.x-text-red {
    color: #ff0000 !important;
}

.x-bg-softorange {
    background-color: #ae896c !important;
}

.x-bg-coffee {
    background-color: #7b542f !important;
}

.x-bg-pastel-light {
    background-color: #f1e0d9 !important;
}

/* soft orange */
.x-btn-softorange {
    background-color: #ae896c !important; /* Your desired background color */
    border-color: #ae896c !important; /* matching border color */
    color: #ffffff !important; /* text color for contrast */
}

.x-btn-softorange:hover {
    background-color: #916d50 !important; /* Darker shade for hover state - 20% darker */
    border-color: #916d50 !important;
    color: #ffffff !important;
}

.x-btn-softorange:focus,
.x-btn-softorange:active {
    box-shadow: 0 0 0 0.2rem rgba(174, 137, 108, 0.5) !important; /* box-shadow for focus/active - same as background color with 0.5 opacity */
}

.x-btn-softorange.disabled {
    background-color: #ceb8a7 !important; /* 40% lighter */
    border-color: #ceb8a7 !important;
    color: #ffffff !important;
}

/* red */
.x-btn-red {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    color: #ffffff !important;
}

.x-btn-red:hover {
    background-color: #cc0000 !important;
    border-color: #cc0000 !important;
    color: #ffffff !important;
}

.x-btn-red:focus,
.x-btn-red:active {
    box-shadow: 0 0 0 0.2rem rgba(225, 0, 0, 0.5) !important;
}

.x-btn-red.disabled {
    background-color: #ff6666 !important;
    border-color: #ff6666 !important;
    color: #ffffff !important;
}

/* sky blue */
.x-btn-sky-blue {
    background-color: #0097e6 !important;
    border-color: #0097e6 !important;
    color: #ffffff !important;
}

.x-btn-sky-blue:hover {
    background-color: #0078c2 !important;
    border-color: #0078c2 !important;
    color: #ffffff !important;
}

.x-btn-sky-blue:focus,
.x-btn-sky-blue:active {
    box-shadow: 0 0 0 0.2rem rgba(0, 151, 230, 0.5) !important;
}

.x-btn-sky-blue.disabled {
    background-color: #81cfff !important;
    border-color: #81cfff !important;
    color: #ffffff !important;
}

/* gray */
.x-btn-gray {
    background-color: #6a757e !important;
    border-color: #6a757e !important;
    color: #ffffff !important;
}

.x-btn-gray:hover {
    background-color: #545f67 !important;
    border-color: #545f67 !important;
    color: #ffffff !important;
}

.x-btn-gray:focus,
.x-btn-gray:active {
    box-shadow: 0 0 0 0.2rem rgba(106, 117, 126, 0.5) !important;
}

.x-btn-gray.disabled {
    background-color: #a4acb3 !important;
    border-color: #a4acb3 !important;
    color: #ffffff !important;
}