body {
    overflow: hidden;
    font-family: 'Tajawal', sans-serif !important;
}
/************************* General Style **********************************/
.rtl{   
    direction: rtl !important;
    text-align: right !important;
}
input{
    text-align: right !important;
}

/* fix phone input border radius with prefix code style in RTl */
    input.input-with-prefix {
        border-bottom-left-radius: var(--br-primary) !important;
        border-top-left-radius: var(--br-primary) !important;
        border-bottom-right-radius: 0 !important;
        border-top-right-radius: 0!important;
    }

.prefix-input {
    border-bottom-right-radius: var(--br-primary) !important;
    border-top-right-radius: var(--br-primary) !important;
    border-bottom-left-radius: 0!important;
    border-top-left-radius: 0!important;
}
/*******************************/
/* update all web input to be rtl */
#Donation-Amount,
.web-input {
    direction: rtl !important;
}
/********************************/
/************** begain : Notification Section : home page ***************/
.notification-icon-box{
position: absolute;
left: -30px;
right: auto;
}
/************** end : Notification Section : home page ***************/
.balance-box::before {
    left: auto !important;
    right: -11px !important;
}

input.numInput.flatpickr-hour, input.numInput.flatpickr-minute {
    text-align: center !important;
}

/*.svg-icon.position-absolute{
    left: 0px !important;
    right: auto !important;
}*/
/* margin start in rtl */
.me-9 {
    margin-left: 2.25rem !important;
}
.me-5 {
    margin-left: 1.25rem!important;
}
.me-4 {
    margin-left: 1rem!important;
}
.me-2 {
    margin-left: .5rem!important;
}
.rotate-img-180d{
    transform:rotateY(180deg) !important;
}
/*************************/

/* margin end in rtl */

.ms-3 {
    margin-right: .75rem!important;
}
/*********************/

/* login page - background image on rtl */
.earth-Colored-background {
    transform: rotateY(180deg) !important;
}
/***************************************/
/* to top icon*/
.scrolltop{
    right: auto !important;
    left: 20px !important;
}
/********************************/
/* header drop down */

/* flat time picker style in modal*/
.flatpickr-calendar{
    text-align : start !important;
    direction: rtl !important;
}
/* flat time picker style in modal*/

/********
    admin CP    
*************/
/* info footer for table */
.dataTables_info {
    padding-top: 5px !important;
    padding-right: 5px !important;
}
/***************/
/******/

/************* select2 close icon in international phone number  ************/
.select2-container--bootstrap5 .select2-selection__clear {
    right: auto !important;
    left: 3rem !important;
}
/*.CountryCodesContainer .select2-container--bootstrap5 .select2-selection__clear {
    right: auto !important;
    left: 5px !important;
}*/
.rtl-search-icon{
    transform: rotate(90deg); 
}
/*********************************************/
/**************** web project style ******************/
.rtl-flex-revrse{
    display: flex;
    flex-direction: row-reverse !important;
}
.dir-rtl{
    direction: rtl !important;
}
.timeline.timeline-3.desktop 
.timeline-items 
.timeline-item:not(.Documentary):after{
left: auto !important;
right: 120px!important;
}
.home-page-about-section {
    background-image: url("/dashboard-assets//assets/media/web/about-bg-desktop-rtl.png") !important;
}
/******* begain of Buttons Style ********/
.btn {
    border-radius: var(--br-primary) !important;
}

.btn-primary {
    color: var(--bg-white) !important;
    background-color: var(--bs-primary1) !important;
}

.btn-secondary {
    color: var(--bg-white) !important;
    background-color: var(--bg-secondary) !important;
}

.btn.btn-primary:hover {
    color: #fff !important;
    background-color: var(--bs-primary-hover) !important;
}

.btn-default {
    background: var(--bg-gray) !important;
    color: var(--bg-white) !important;
}

    .btn-default:hover {
        background: var(--bg-gray-hover) !important;
    }

.bi-pencil-square:hover {
    color: var(--bg-white) !important;
}
.btn i {
    padding-left: 0;
}

.bi-people {
    color: white !important;
}
/*end of Buttons Style*/
#kt_content {
    overflow-y: auto;
    height: 80vh;
}

#kt_aside_menu_docs_wrapper {
    max-height: 500px !important;
}
/******** text style  ***********/
/***********************************/
/* dashbard style */
.apexcharts-title-text {
    text-anchor: end !important;
    /* or use direction: rtl; if needed */
}
@media only screen and (min-width: 992px) {
    .aside-enabled .content {
        padding-left: 0px !important;
        padding-right:15px !important ;
    }

    .aside-enabled[data-kt-sticky-aside-sticky=on] .content{
        padding-left: 0px !important;
        padding-right: 280px !important;
    }
}
/*********************************/

/* to fix the tag in the mutli select filter in RTL mode */
.select2-container--bootstrap5 .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg) .select2-selection__choice .select2-selection__choice__remove {
    margin-right: 0.5rem !important;
}

.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display {
    margin-left: 0.5rem !important;
    margin-right: 1.2rem !important;
}
.select2-container--bootstrap5 .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg) .select2-selection__choice .select2-selection__choice__remove {
    margin-right: 0rem !important;
}
/*********************************************************/
.CountryCodesContainer .input-with-prefix,
.br-end-none {
    border-end-start-radius: var(--br-input-primary) !important;
    border-start-start-radius: var(--br-input-primary) !important;
}

.phoneNumberContainer .input-with-prefix,
.br-start-none {
    border-start-end-radius: var(--br-input-primary) !important;
    border-end-end-radius: var(--br-input-primary) !important;
    text-align: left !important;
}

.service_provider {
    padding-bottom: 8rem;
}

#kt_sign_up_form {
    padding-bottom: 6rem;
}
.scroll_kt {
    overflow-y: auto;
    height: 80vh;
}
.text-button-group {
    float: right;
}