body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, span, a, button, input, textarea, select {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', sans-serif !important;
}

.right-0
{
    left: 0 !important;
    right:auto !important;
}

.oblique {
    transform: skewX(-10deg) !important;
    overflow: hidden;
    width: 60% ;
    left: -10rem !important;
    right: auto !important;
    border-bottom-right-radius: 0.75rem !important;
}

/* ========== RTL Fixes for Bootstrap Custom Controls (Checkboxes/Radios) ========== */
.custom-control {
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
}

.custom-control-label::before,
.custom-control-label::after {
    left: auto !important;
    right: -1.5rem !important;
}

.custom-control-input {
    left: auto !important;
    right: 0 !important;
}

/* ========== RTL Fixes for Form Elements ========== */
.form-control,
.form-control-alternative,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    text-align: right !important;
}

.form-control-label {
    text-align: right !important;
    display: block;
}

.input-group .input-group-prepend {
    order: 1;
}

.input-group .form-control {
    order: 0;
}

/* ========== RTL Fixes for Tables ========== */
.table th,
.table td {
    text-align: right !important;
}

/* ========== RTL Fixes for Card Headers ========== */
.card-header .row .col-4.text-right {
    text-align: left !important;
}

.card-header .row .col-8 {
    text-align: right !important;
}

/* ========== RTL Fixes for Buttons Group ========== */
.btn + .btn {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

/* ========== RTL Fixes for Pagination ========== */
.pagination {
    direction: ltr;
}

/* ========== RTL Fixes for Dropdown Menus ========== */
.dropdown-menu {
    text-align: right !important;
}

/* ========== RTL Fixes for Alerts and Flash Messages ========== */
.alert {
    text-align: right !important;
}

/* ========== RTL Fixes for Separator Heading ========== */
h4.display-4 {
    text-align: right !important;
}