/* Import the Tajawal font */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');



/* Base document styling for RTL */
html, body {
    font-family: 'Tajawal', sans-serif; /* Applies Tajawal to all elements */
    direction: rtl;  /* Sets right-to-left text direction */
    text-align: right; /* Aligns text to the right */
}

.languageDropdown{
     font-family: 'Tajawal', sans-serif; /* Applies Tajawal to all elements */
    
}

/* default margin css start */
/* Margin Y (Top and Bottom) */
.my-5 { margin: 5px 0; }
.my-10 { margin: 10px 0; }
.my-15 { margin: 15px 0; }
.my-20 { margin: 20px 0; }
.my-25 { margin: 25px 0; }
.my-30 { margin: 30px 0; }
.my-35 { margin: 35px 0; }
.my-40 { margin: 40px 0; }
.my-45 { margin: 45px 0; }
.my-50 { margin: 50px 0; }
.my-55 { margin: 55px 0; }
.my-60 { margin: 60px 0; }
.my-65 { margin: 65px 0; }
.my-70 { margin: 70px 0; }
.my-75 { margin: 75px 0; }
.my-80 { margin: 80px 0; }
.my-85 { margin: 85px 0; }
.my-90 { margin: 90px 0; }
.my-95 { margin: 95px 0; }
.my-100 { margin: 100px 0; }

/* Margin X (Left and Right) */
.mx-5 { margin: 0 5px; }
.mx-10 { margin: 0 10px; }
.mx-15 { margin: 0 15px; }
.mx-20 { margin: 0 20px; }
.mx-25 { margin: 0 25px; }
.mx-30 { margin: 0 30px; }
.mx-35 { margin: 0 35px; }
.mx-40 { margin: 0 40px; }
.mx-45 { margin: 0 45px; }
.mx-50 { margin: 0 50px; }
.mx-55 { margin: 0 55px; }
.mx-60 { margin: 0 60px; }
.mx-65 { margin: 0 65px; }
.mx-70 { margin: 0 70px; }
.mx-75 { margin: 0 75px; }
.mx-80 { margin: 0 80px; }
.mx-85 { margin: 0 85px; }
.mx-90 { margin: 0 90px; }
.mx-95 { margin: 0 95px; }
.mx-100 { margin: 0 100px; }

/* Margin Start (replaces Margin Left) */
.ms-5 { margin-inline-start: 5px; }
.ms-10 { margin-inline-start: 10px; }
.ms-15 { margin-inline-start: 15px; }
.ms-20 { margin-inline-start: 20px; }
.ms-25 { margin-inline-start: 25px; }
.ms-30 { margin-inline-start: 30px; }
.ms-35 { margin-inline-start: 35px; }
.ms-40 { margin-inline-start: 40px; }
.ms-45 { margin-inline-start: 45px; }
.ms-50 { margin-inline-start: 50px; }
.ms-55 { margin-inline-start: 55px; }
.ms-60 { margin-inline-start: 60px; }
.ms-65 { margin-inline-start: 65px; }
.ms-70 { margin-inline-start: 70px; }
.ms-75 { margin-inline-start: 75px; }
.ms-80 { margin-inline-start: 80px; }
.ms-85 { margin-inline-start: 85px; }
.ms-90 { margin-inline-start: 90px; }
.ms-95 { margin-inline-start: 95px; }
.ms-100 { margin-inline-start: 100px; }

/* Margin End (replaces Margin Right) */
.me-5 { margin-inline-end: 5px; }
.me-10 { margin-inline-end: 10px; }
.me-15 { margin-inline-end: 15px; }
.me-20 { margin-inline-end: 20px; }
.me-25 { margin-inline-end: 25px; }
.me-30 { margin-inline-end: 30px; }
.me-35 { margin-inline-end: 35px; }
.me-40 { margin-inline-end: 40px; }
.me-45 { margin-inline-end: 45px; }
.me-50 { margin-inline-end: 50px; }
.me-55 { margin-inline-end: 55px; }
.me-60 { margin-inline-end: 60px; }
.me-65 { margin-inline-end: 65px; }
.me-70 { margin-inline-end: 70px; }
.me-75 { margin-inline-end: 75px; }
.me-80 { margin-inline-end: 80px; }
.me-85 { margin-inline-end: 85px; }
.me-90 { margin-inline-end: 90px; }
.me-95 { margin-inline-end: 95px; }
.me-100 { margin-inline-end: 100px; }

/* Negative margins and other custom margins should also be adapted similarly */

.mb-none-30 {
    margin-bottom: -30px;
}

.mb-none-35 {
    margin-bottom: -35px;
}

.mb-none-40 {
    margin-bottom: -40px;
}

.mb-none-45 {
    margin-bottom: -45px;
}

.mb-none-50 {
    margin-bottom: -50px;
}

/* Padding Y (Top and Bottom) */
.py-5 { padding: 5px 0; }
.py-10 { padding: 10px 0; }
.py-15 { padding: 15px 0; }
.py-20 { padding: 20px 0; }
.py-25 { padding: 25px 0; }
.py-30 { padding: 30px 0; }
.py-35 { padding: 35px 0; }
.py-40 { padding: 40px 0; }
.py-45 { padding: 45px 0; }
.py-50 { padding: 50px 0; }
.py-55 { padding: 55px 0; }
.py-60 { padding: 60px 0; }
.py-65 { padding: 65px 0; }
.py-70 { padding: 70px 0; }
.py-75 { padding: 75px 0; }
.py-80 { padding: 80px 0; }
.py-85 { padding: 85px 0; }
.py-90 { padding: 90px 0; }
.py-95 { padding: 95px 0; }
.py-100 { padding: 100px 0; }
.py-105 { padding: 105px 0; }
.py-110 { padding: 110px 0; }
.py-115 { padding: 100px 0; }
.py-120 { padding: 115px 0; }
.py-125 { padding: 125px 0; }
.py-130 { padding: 130px 0; }
.py-135 { padding: 135px 0; }
.py-140 { padding: 140px 0; }
.py-145 { padding: 145px 0; }
.py-150 { padding: 150px 0; }

/* Padding X (Left and Right) */
.px-5 { padding: 0 5px; }
.px-10 { padding: 0 10px; }
.px-15 { padding: 0 15px; }
.px-20 { padding: 0 20px; }
.px-25 { padding: 0 25px; }
.px-30 { padding: 0 30px; }
.px-35 { padding: 0 35px; }
.px-40 { padding: 0 40px; }
.px-45 { padding: 0 45px; }
.px-50 { padding: 0 50px; }
.px-55 { padding: 0 55px; }
.px-60 { padding: 0 60px; }
.px-65 { padding: 0 65px; }
.px-70 { padding: 0 70px; }
.px-75 { padding: 0 75px; }
.px-80 { padding: 0 80px; }
.px-85 { padding: 0 85px; }
.px-90 { padding: 0 90px; }
.px-95 { padding: 0 95px; }
.px-100 { padding: 0 100px; }
/* from here to do*/

.px-105 {
    padding: 0 105px;
}

.px-110 {
    padding: 0 110px;
}

.px-115 {
    padding: 0 100px;
}

.px-120 {
    padding: 0 115px;
}

.px-125 {
    padding: 0 125px;
}

.px-130 {
    padding: 0 130px;
}

.px-135 {
    padding: 0 135px;
}

.px-140 {
    padding: 0 140px;
}

.px-145 {
    padding: 0 145px;
}

.px-150 {
    padding: 0 150px;
}

.pt-5 {
    padding-top: 5px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-25 {
    padding-top: 25px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-35 {
    padding-top: 35px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-45 {
    padding-top: 45px;
}

.pt-50 {
    padding-top: 50px;
}

.pt-55 {
    padding-top: 55px;
}

.pt-60 {
    padding-top: 60px;
}

.pt-65 {
    padding-top: 65px;
}

.pt-70 {
    padding-top: 70px;
}

.pt-75 {
    padding-top: 75px;
}

.pt-80 {
    padding-top: 80px;
}

.pt-85 {
    padding-top: 85px;
}

.pt-90 {
    padding-top: 90px;
}

.pt-95 {
    padding-top: 95px;
}

.pt-100 {
    padding-top: 100px;
}

.pt-105 {
    padding-top: 105px;
}

.pt-110 {
    padding-top: 110px;
}

.pt-115 {
    padding-top: 100px;
}

.pt-120 {
    padding-top: 115px;
}

.pt-125 {
    padding-top: 125px;
}

.pt-130 {
    padding-top: 130px;
}

.pt-135 {
    padding-top: 135px;
}

.pt-140 {
    padding-top: 140px;
}

.pt-145 {
    padding-top: 145px;
}

.pt-150 {
    padding-top: 150px;
}

.pb-5 {
    padding-bottom: 5px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-25 {
    padding-bottom: 25px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-35 {
    padding-bottom: 35px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-45 {
    padding-bottom: 45px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-55 {
    padding-bottom: 55px;
}

.pb-60 {
    padding-bottom: 60px;
}

.pb-65 {
    padding-bottom: 65px;
}

.pb-70 {
    padding-bottom: 70px;
}

.pb-75 {
    padding-bottom: 75px;
}

.pb-80 {
    padding-bottom: 80px;
}

.pb-85 {
    padding-bottom: 85px;
}

.pb-90 {
    padding-bottom: 90px;
}

.pb-95 {
    padding-bottom: 95px;
}

.pb-100 {
    padding-bottom: 100px;
}

.pb-105 {
    padding-bottom: 105px;
}

.pb-110 {
    padding-bottom: 110px;
}

.pb-115 {
    padding-bottom: 100px;
}

.pb-120 {
    padding-bottom: 115px;
}

.pb-125 {
    padding-bottom: 125px;
}

.pb-130 {
    padding-bottom: 130px;
}

.pb-135 {
    padding-bottom: 135px;
}

.pb-140 {
    padding-bottom: 140px;
}

.pb-145 {
    padding-bottom: 145px;
}

.pb-150 {
    padding-bottom: 150px;
}

.pl-5 {
    padding-left: 5px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-25 {
    padding-left: 25px;
}

.pl-30 {
    padding-left: 30px;
}

.pl-35 {
    padding-left: 35px;
}

.pl-40 {
    padding-left: 40px;
}

.pl-45 {
    padding-left: 45px;
}

.pl-50 {
    padding-left: 50px;
}

.pl-55 {
    padding-left: 55px;
}

.pl-60 {
    padding-left: 60px;
}

.pl-65 {
    padding-left: 65px;
}

.pl-70 {
    padding-left: 70px;
}

.pl-75 {
    padding-left: 75px;
}

.pl-80 {
    padding-left: 80px;
}

.pl-85 {
    padding-left: 85px;
}

.pl-90 {
    padding-left: 90px;
}

.pl-95 {
    padding-left: 95px;
}

.pl-100 {
    padding-left: 100px;
}

.pl-105 {
    padding-left: 105px;
}

.pl-110 {
    padding-left: 110px;
}

.pl-115 {
    padding-left: 100px;
}

.pl-120 {
    padding-left: 115px;
}

.pl-125 {
    padding-left: 125px;
}

.pl-130 {
    padding-left: 130px;
}

.pl-135 {
    padding-left: 135px;
}

.pl-140 {
    padding-left: 140px;
}

.pl-145 {
    padding-left: 145px;
}

.pl-150 {
    padding-left: 150px;
}

.pr-5 {
    padding-right: 5px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-20 {
    padding-right: 20px;
}

.pr-25 {
    padding-right: 25px;
}

.pr-30 {
    padding-right: 30px;
}

.pr-35 {
    padding-right: 35px;
}

.pr-40 {
    padding-right: 40px;
}

.pr-45 {
    padding-right: 45px;
}

.pr-50 {
    padding-right: 50px;
}

.pr-55 {
    padding-right: 55px;
}

.pr-60 {
    padding-right: 60px;
}

.pr-65 {
    padding-right: 65px;
}

.pr-70 {
    padding-right: 70px;
}

.pr-75 {
    padding-right: 75px;
}

.pr-80 {
    padding-right: 80px;
}

.pr-85 {
    padding-right: 85px;
}

.pr-90 {
    padding-right: 90px;
}

.pr-95 {
    padding-right: 95px;
}

.pr-100 {
    padding-right: 100px;
}

.pr-105 {
    padding-right: 105px;
}

.pr-110 {
    padding-right: 110px;
}

.pr-115 {
    padding-right: 100px;
}

.pr-120 {
    padding-right: 115px;
}

.pr-125 {
    padding-right: 125px;
}

.pr-130 {
    padding-right: 130px;
}

.pr-135 {
    padding-right: 135px;
}

.pr-140 {
    padding-right: 140px;
}

.pr-145 {
    padding-right: 145px;
}

.pr-150 {
    padding-right: 150px;
}

.bb-none {
    border-bottom: none !important;
}

.bt-none {
    border-top: none !important;
}


/* default padding css end */
/* reset css start */
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Tajawal";
    text-align: right;
    direction:rtl;
    font-size: 1rem;
    padding: 0;
    margin: 0;
    font-weight: 400;
    position: relative;
    background-color: #f3f3f9;
    word-break: break-word;
}



a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

ul,
ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

button {
    cursor: pointer;
}

*:focus {
    outline: none;
}

button {
    border: none;
}

button:focus {
    outline: none;
}

a span {
    color: #007bff;
}

a:hover,
a span:hover {
    text-decoration: none;
    color: #05164e;
}

table {
    width: 100%;
}

p,
li,
span {
    color: #5b6e88;
    margin-bottom: 0;
}

/* reset css end */
/* global css start */
.text--shadow {
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.35);
}

.nice-select {
    background-color: transparent;
    height: 40px !important;
    line-height: 40px !important;
    min-height: 40px !important;
    padding: 0 30px;
}

.nice-select span {
    color: #5b6e88;
}

.nice-select .list {
    box-shadow: 0px -5px 26px -5px #cdd4e7;
}

.nice-select .list li {
    margin-right: 0 !important;
}

.nice-select .list .option {
    color: #5b6e88;
}

.nice-select .list .option.selected,
.nice-select .list .option:hover {
    border: none !important;
}

.box--shadow1 {
    box-shadow: 0px 5px 26px -5px #cdd4e7 !important;
}

.box--shadow2 {
    box-shadow: 0 4px 10px #38414a0f !important;
}

.box--shadow3 {
    box-shadow: 0 3px 5px 0 rgba(18, 38, 63, 0.2) !important;
}

.b-radius--3 {
    border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -ms-border-radius: 3px !important;
    -o-border-radius: 3px !important;
}

.b-radius--4 {
    border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -ms-border-radius: 4px !important;
    -o-border-radius: 4px !important;
}

.b-radius--5 {
    border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    -o-border-radius: 5px !important;
}

.b-radius--6 {
    border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    -ms-border-radius: 6px !important;
    -o-border-radius: 6px !important;
}

.b-radius--7 {
    border-radius: 7px !important;
    -webkit-border-radius: 7px !important;
    -moz-border-radius: 7px !important;
    -ms-border-radius: 7px !important;
    -o-border-radius: 7px !important;
}

.b-radius--8 {
    border-radius: 8px !important;
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    -ms-border-radius: 8px !important;
    -o-border-radius: 8px !important;
}

.b-radius--9 {
    border-radius: 9px !important;
    -webkit-border-radius: 9px !important;
    -moz-border-radius: 9px !important;
    -ms-border-radius: 9px !important;
    -o-border-radius: 9px !important;
}

.b-radius--10 {
    border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    -ms-border-radius: 10px !important;
    -o-border-radius: 10px !important;
}

.b-radius--rounded {
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -ms-border-radius: 50% !important;
    -o-border-radius: 50% !important;
}

.b-radius--capsule {
    border-radius: 999px !important;
    -webkit-border-radius: 999px !important;
    -moz-border-radius: 999px !important;
    -ms-border-radius: 999px !important;
    -o-border-radius: 999px !important;
}

.b-radius--none {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
}

.nav-tabs-primary {
    border: none;
}

.nav-tabs-primary .nav-item a {
    border: none;
}

.nav-tabs-primary .nav-item a.active {
    border-bottom: 2px solid #05164e;
}

.hover--effect1 {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.hover--effect1:hover {
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.w--10 {
    width: 10% !important;
}

.w--15 {
    width: 15% !important;
}

.w--20 {
    width: 20% !important;
}

.page-wrapper {
    min-height: 100vh;
}

/* global css end */
/* typography css start */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
    color: #34495e;
    margin: 0;
    line-height: 1.4;
}

h1 {
    font-size: 2.25rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.375rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

p {
    font-size: 0.875rem;
    line-height: 1.7;
    font-weight: 400;
}

p,
li,
a {
    font-size: 0.875rem;
}

.text--small {
    font-size: 0.75rem !important;
}

.f-size--24 {
    font-size: 1.5rem !important;
}

.f-size--28 {
    font-size: 1.75rem !important;
}

.f-size--42 {
    font-size: 2.625rem !important;
}

.f-size--48 {
    font-size: 3rem !important;
}

.f-size--56 {
    font-size: 3.5rem !important;
}

.f-size--72 {
    font-size: 4.5rem !important;
}

.f-size--90 {
    font-size: 5.625rem !important;
}

.f-size--100 {
    font-size: 6.25rem !important;
}

/* typography css end */
/* color css start */
.text--primary {
    color: #05164e !important;
}

.text--secondary {
    color: #868e96 !important;
}

.text--success {
    color: #28c76f !important;
}

.text--danger {
    color: #ea5455 !important;
}

.text--warning {
    color: #ff9f43 !important;
}

.text--info {
    color: #1e9ff2 !important;
}

.text--dark {
    color: #10163A !important;
}

.text--white {
    color: #ffffff !important;
}

.text--black {
    color: #000000 !important;
}

.text--gray {
    color: #9E9E9E !important;
}

.text--blue-gray {
    color: #607D8B !important;
}

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

.text--pink {
    color: #E91E63 !important;
}

.text--purple {
    color: #9C27B0 !important;
}

.text--deep-purple {
    color: #673AB7 !important;
}

.text--indigo {
    color: #3F51B5 !important;
}

.text--blue {
    color: #2196F3 !important;
}

.text--light-blue {
    color: #45c5ff !important;
}

.text--cyan {
    color: #00BCD4 !important;
}

.text--teal {
    color: #009688 !important;
}

.text--green {
    color: #4CAF50 !important;
}

.text--light-green {
    color: #8BC34A !important;
}

.text--lime {
    color: #CDDC39 !important;
}

.text--yellow {
    color: #FFEB3B !important;
}

.text--amber {
    color: #FFC107 !important;
}

.text--orange {
    color: #FF9800 !important;
}

.text--brown {
    color: #795548 !important;
}

.text-color--1 {
    color: #127681 !important;
}

.text-color--2 {
    color: #ea907a !important;
}

.text-color--3 {
    color: #10375c !important;
}

.text-color--4 {
    color: #4f8a8b !important;
}

.text-color--5 {
    color: #d92027 !important;
}

.text-color--6 {
    color: #ff9234 !important;
}

.text-color--7 {
    color: #4cd3c2 !important;
}

.text-color--8 {
    color: #35d0ba !important;
}

.text-color--9 {
    color: #e84a5f !important;
}

.text-color--10 {
    color: #00005c !important;
}

.text-color--11 {
    color: #45046a !important;
}

.text-color--12 {
    color: #5c2a9d !important;
}

.text-color--13 {
    color: #6a097d !important;
}

.text-color--14 {
    color: #ff5200 !important;
}

.text-color--15 {
    color: #162447 !important;
}

.text-color--16 {
    color: #e43f5a !important;
}

.text-color--17 {
    color: #035aa6 !important;
}

.text-color--18 {
    color: #0779e4 !important;
}

.text-color--19 {
    color: #342ead !important;
}

.text-color--20 {
    color: #d7385e !important;
}

/* color css end */
/* background-color css start */
*[class*="bg"] {
    color: #ffffff;
}

.bg--white,
.bg--gray {
    color: inherit;
}

.bg--primary {
    background-color: #05164e !important;
}

.bg--secondary {
    background-color: #868e96 !important;
}

.bg--success {
    background-color: #28c76f !important;
}

.bg--danger {
    background-color: #ea5455 !important;
}

.bg--warning {
    background-color: #ff9f43 !important;
}

.bg--info {
    background-color: #1e9ff2 !important;
}

.bg--dark {
    background-color: #071251 !important;
}

.bg--white {
    background-color: #ffffff !important;
}

.bg--black {
    background-color: #000000 !important;
}

.bg--gray {
    background-color: #9E9E9E !important;
}

.bg--blue-gray {
    background-color: #607D8B !important;
}

.bg--red {
    background-color: #F44336 !important;
}

.bg--pink {
    background-color: #E91E63 !important;
}

.bg--purple {
    background-color: #9C27B0 !important;
}

.bg--deep-purple {
    background-color: #673AB7 !important;
}

.bg--indigo {
    background-color: #3F51B5 !important;
}

.bg--blue {
    background-color: #2196F3 !important;
}

.bg--light-blue {
    background-color: #45c5ff !important;
}

.bg--cyan {
    background-color: #00BCD4 !important;
}

.bg--teal {
    background-color: #009688 !important;
}

.bg--green {
    background-color: #4CAF50 !important;
}

.bg--light-green {
    background-color: #8BC34A !important;
}

.bg--lime {
    background-color: #CDDC39 !important;
}

.bg--yellow {
    background-color: #FFEB3B !important;
}

.bg--amber {
    background-color: #FFC107 !important;
}

.bg--orange {
    background-color: #FF9800 !important;
}

.bg--brown {
    background-color: #795548 !important;
}

.bg--transparent {
    background-color: transparent;
    color: #5b6e88;
}

.bg--1 {
    background-color: #127681 !important;
}

.bg--2 {
    background-color: #ea907a !important;
}

.bg--3 {
    background-color: #10375c !important;
}

.bg--4 {
    background-color: #4f8a8b !important;
}

.bg--5 {
    background-color: #d92027 !important;
}

.bg--6 {
    background-color: #ff9234 !important;
}

.bg--7 {
    background-color: #4cd3c2 !important;
}

.bg--8 {
    background-color: #35d0ba !important;
}

.bg--9 {
    background-color: #e84a5f !important;
}

.bg--10 {
    background-color: #00005c !important;
}

.bg--11 {
    background-color: #45046a !important;
}

.bg--12 {
    background-color: #5c2a9d !important;
}

.bg--13 {
    background-color: #6a097d !important;
}

.bg--14 {
    background-color: #ff5200 !important;
}

.bg--15 {
    background-color: #162447 !important;
}

.bg--16 {
    background-color: #e43f5a !important;
}

.bg--17 {
    background-color: #035aa6 !important;
}

.bg--18 {
    background-color: #0779e4 !important;
}

.bg--19 {
    background-color: #342ead !important;
}

.bg--20 {
    background-color: #d7385e !important;
}
/* from here */
.bg--gradi-1,
.overlay--gradi-1[class*="overlay"]::before {
    background: #4776E6 !important;
    background: -webkit-linear-gradient(to top, #8E54E9, #4776E6) !important;
    background: linear-gradient(to top, #8E54E9, #4776E6) !important;
}

.bg--gradi-2,
.overlay--gradi-2[class*="overlay"]::before {
    background: #c31432 !important;
    background: -webkit-linear-gradient(to left, #240b36, #c31432) !important;
    background: linear-gradient(to left, #240b36, #c31432) !important;
}

.bg--gradi-3,
.overlay--gradi-3[class*="overlay"]::before {
    background: #8360c3 !important;
    background: -webkit-linear-gradient(to left, #2ebf91, #8360c3) !important;
    background: linear-gradient(to left, #2ebf91, #8360c3) !important;
}

.bg--gradi-4,
.overlay--gradi-4[class*="overlay"]::before {
    background: #654ea3 !important;
    background: -webkit-linear-gradient(to left, #eaafc8, #654ea3) !important;
    background: linear-gradient(to left, #eaafc8, #654ea3) !important;
}

.bg--gradi-5,
.overlay--gradi-5[class*="overlay"]::before {
    background: #DA4453 !important;
    background: -webkit-linear-gradient(to right, #89216B, #DA4453) !important;
    background: linear-gradient(to right, #89216B, #DA4453) !important;
}

.bg--gradi-6,
.overlay--gradi-6[class*="overlay"]::before {
    background: #11998e !important;
    background: -webkit-linear-gradient(to left, #38ef7d, #11998e) !important;
    background: linear-gradient(to left, #38ef7d, #11998e) !important;
}

/* Till*/
.alert button.close {
    right: auto; /* Disable right positioning */
    left: 0; /* Position on the left side for RTL */
}
input, textarea {
    direction: rtl; /* Right-to-left text in form inputs if necessary */
}
/* RTL adjustments for tables */
table th:first-child, table td:first-child {
    text-align: right; /* Change text alignment to right for the first cell in RTL */
}

table th:last-child, table td:last-child {
    text-align: left; /* Change text alignment to left for the last cell in RTL */
}

table thead th {
    text-align: right; /* Align table headers to the right in RTL */
}

table tbody td {
    text-align: right; /* Align table data to the right in RTL */
}

/* Ensure dataTables control elements are properly aligned in RTL */
div.dataTables_wrapper div.dataTables_filter {
    float: left; /* Switch float to left in RTL */
}

div.dataTables_wrapper .dataTables_paginate {
    float: left; /* Switch pagination control to the left in RTL */
}

 table th:first-child,  table td:first-child {
    text-align: right;
}

 table th:last-child,  table td:last-child {
    text-align: left;
}

 table thead th {
    text-align: right;
}

 table tbody td {
    text-align: right;
}

 div.dataTables_wrapper div.dataTables_filter {
    float: left;
}

 div.dataTables_wrapper .dataTables_paginate {
    float: left;
}


/* RTL adjustments */
 .user-table-list .user+.user {
    margin-left: 0; /* Remove if not needed in RTL */
    margin-right: -10px; /* Adjust spacing for RTL */
}

 table th:first-child,  table td:first-child {
    text-align: right; /* Align the first column to the right in RTL */
}

 table th:last-child,  table td:last-child {
    text-align: left; /* Align the last column to the left in RTL */
}

/* Ensure dataTables control elements are properly aligned in RTL */
 div.dataTables_wrapper div.dataTables_filter {
    float: right; /* Align filter to the right side in RTL */
}

 div.dataTables_wrapper .dataTables_paginate {
    float: right; /* Keep pagination on the right in RTL */
}

/* Responsive adjustments for smaller screens in RTL context */
@media (max-width: 767px) {
     .table-responsive--sm table .user {
        justify-content: flex-start; /* Adjust alignment to start in RTL */
    }

     .table-responsive--sm table.dataTable .user {
        justify-content: flex-start; /* Adjust alignment for dataTable in RTL */
    }
}

@media (max-width: 1199px) {
     .table-responsive--lg tr th,
     .table-responsive--lg tr td {
        text-align: left !important; /* Text alignment for RTL */
        padding-right: 45% !important; /* Adjust padding for RTL */
        padding-left: 0 !important;
    }

     .table-responsive--lg .user-table-list,
     .table-responsive--lg .customer-details {
        justify-content: flex-start; /* Adjust content justification for RTL */
    }
}

@media (max-width: 991px) {
     .table-responsive--md tr th,
     .table-responsive--md tr td {
        text-align: left !important; /* Text alignment for RTL */
        padding-right: 45% !important; /* Adjust padding for RTL */
        padding-left: 0 !important;
    }

     .table-responsive--md .user-table-list,
     .table-responsive--md .customer-details {
        justify-content: flex-start; /* Adjust content justification for RTL */
    }
}

/* RTL adjustments for responsive tables and widgets */
 *[class*="table-responsive--"].data-label--none tr th,
 *[class*="table-responsive--"].data-label--none tr td {
    padding-right: .75rem;
    padding-left: 0; /* Flip padding for RTL */
}

 .pagination .page-item.previous .page-link::before,
 .pagination .page-item.next .page-link::before {
    right: auto; /* Switch to auto for RTL */
    left: 11px; /* Align icon to the left for RTL */
}

 .pagination .page-item.previous .page-link::before {
    content: "\f105"; /* Change icon direction for 'previous' in RTL */
}

 .pagination .page-item.next .page-link::before {
    content: "\f104"; /* Change icon direction for 'next' in RTL */
}

/* Ensure correct text and element alignment in widgets for RTL */
 .widget__content,
 .widget-two__content,
 .widget-three__content,
 .widget-four .widget__content,
 .widget-five .widget__content {
    text-align: right; /* Align text to the right for RTL */
}

 .widget-two.style--two .overlay-icon {
    left: -15px; /* Adjust icon position for RTL */
    right: auto; /* Disable right positioning */
}

 .widget-two.style--two .widget-two__btn {
    right: auto; /* Disable right positioning for button */
    left: 5px; /* Place button on the left side */
}
/* RTL adjustments for widgets and navigation elements */
 .dashboard-w1 {
    justify-content: flex-start; /* Align content to the start for RTL */
}

 .dashboard-w1 .icon {
    right: 0;
    left: auto; /* Flip icon position for RTL */
}

 .dashboard-w1 .details {
    text-align: left; /* Align text to the left for RTL */
}

 .sidebar {
    left: auto;
    right: 0; /* Position sidebar on the right for RTL */
}

 .sidebar.open {
    right: 0; /* Ensure sidebar opens correctly on the right for RTL */
}

 .res-sidebar-open-btn {
    right: 0; /* Adjust button position for opening sidebar in RTL */
}

 .res-sidebar-close-btn {
    right: auto;
    left: -35px; /* Adjust close button position for RTL */
}

/* Adapt padding for table cells in responsive tables */
 *[class*="table-responsive--"].data-label--none tr th,
 *[class*="table-responsive--"].data-label--none tr td {
    padding-right: .75rem;
    padding-left: 0; /* Flip padding for RTL */
}

/* Flip pagination navigation arrows for RTL */
 .pagination .page-item.previous .page-link::before,
 .pagination .page-item.next .page-link::before {
    right: auto; /* Switch to auto for better control in RTL */
    left: 11px; /* Align icon to the left for RTL */
}

 .pagination .page-item.previous .page-link::before {
    content: "\f105"; /* Change icon direction for 'previous' in RTL */
}

 .pagination .page-item.next .page-link::before {
    content: "\f104"; /* Change icon direction for 'next' in RTL */
}
/* Adjust navbar wrapper and search bar for RTL */
 .navbar-wrapper {
    padding: 10px 10px;
}

 .navbar-search {
    width: 300px;
}

 .navbar-search i {
    left: auto;
    right: 15px; /* Move search icon to the right for RTL */
}

 .navbar-search .navbar-search-field {
    padding-left: 10px;
    padding-right: 40px; /* Adjust padding for search field */
}

/* Flip the direction of dropdowns and reposition elements for RTL */
 .navbar__right {
    margin-right: auto; /* Align navbar elements to the right */
}

 .navbar__right .dropdown-menu {
    left: auto; /* Dropdown should align towards the left */
    right: 0;
}

 .navbar-user__info {
    text-align: right; /* Text alignment for user info in navbar */
    padding-right: 10px;
    padding-left: 0;
}

/* Adjust sidebar for RTL */
 .sidebar {
    left: auto;
    right: 0; /* Position sidebar on the right */
}

 .sidebar.open {
    right: 0;
}

/* Misc adjustments for buttons and interactive elements */
 .navbar__action-list li {
    margin-left: 15px;
    margin-right: 0; /* Adjust margins for list items */
}

 .dropdown-menu__item .dropdown-menu__icon~.dropdown-menu__caption {
    padding-right: 8px;
    padding-left: 0; /* Adjust padding for icons and captions */
}


/* RTL Adjustments for Animations and UI Positioning */
 .pulse--secondary,
 .pulse--info,
 .pulse--warning,
 .pulse--danger {
    right: auto;  /* Switch from right to left for RTL */
    left: 7px;
}

/* Navbar wrapper adjustments for RTL */
 .navbar-wrapper {
    margin-right: 250px;  /* Adjust for sidebar on the right in RTL */
    margin-left: 0;
}

@media (max-width: 991px) {
     .navbar-wrapper {
        margin-right: 0; /* Reset margin for responsive layouts */
    }
}

/* Navbar search adjustments for RTL */
 .navbar-search i {
    left: auto;  /* Move icon to the opposite side */
    right: 15px;
}

/* Adjust padding and placement for RTL */
 .body-wrapper {
    margin-right: 250px;  /* Adjust body wrapper margin for sidebar on the right */
    margin-left: 0;
}

@media (max-width: 991px) {
     .body-wrapper {
        margin-right: 0; /* Reset margin for responsive layouts */
    }
}

/* Adjust navbar elements for RTL */
 .navbar-user__info {
    text-align: right;  /* Align text to the right */
    padding-right: 10px;  /* Adjust padding for text next to avatar */
    padding-left: 0;
}

/* Modify action list spacing for RTL */
 .navbar__action-list li {
    margin-left: 15px;
    margin-right: 0;  /* Flip margins for list items */
}

/* Flip dropdown menu alignment for RTL */
 .navbar__right .dropdown-menu {
    left: auto;  /* Align dropdown to the left */
    right: 0;
}

/* Sidebar adjustments for RTL */
 .sidebar {
    left: auto;  /* Move sidebar to the right edge */
    right: 0;
}


/* Documentation and General Layout Adjustments for RTL */
 .docs-wrapper pre {
    padding-right: 20px; /* Adjust padding to the right for RTL */
    padding-left: 0;
}

/* Login Page Adjustments for RTL */
 .login-main::before {
    right: 0; /* Align gradient overlay to the right for RTL */
    left: auto;
}

 .login-area::after {
    left: -80px; /* Move the circular gradient to the left for RTL */
    right: auto;
}

 .login-wrapper__top::after {
    right: 5px; /* Move arrow decoration to the right for RTL */
    left: auto;
}

/* Login Form Label and Input Adjustments for RTL */
 .login-form label {
    text-align: right; /* Align labels to the right for RTL */
}

 .login-form .form-control {
    padding-right: 20px; /* Adjust text padding to the right for RTL */
    padding-left: 0;
}

 .login-form .form-check-label::before {
    right: 0; /* Move checkbox to the right for RTL */
    left: auto;
}

/* Error Page Adjustments for RTL */
 .error-area .error-wrapper {
    text-align: right; /* Align text to the right for RTL */
}

/* Dark Version Adjustments for RTL */
 .dark-version .navbar-wrapper,
 .dark-version .sidebar,
 .dark-version .body-wrapper {
    transition: margin-right 0.5s cubic-bezier(0.4, -0.25, 0.25, 1.1);
}

 .dark-version .sidebar {
    right: 0; /* Position sidebar on the right for RTL */
    left: auto;
}

 .dark-version .body-wrapper {
    margin-right: 250px; /* Adjust margin for the sidebar on the right */
}

@media (max-width: 991px) {
     .dark-version .body-wrapper {
        margin-right: 0; /* Reset margin when sidebar is toggled off */
    }
}

 .dark-version .navbar-search {
    direction: rtl; /* Ensure search bar accommodates RTL */
}

/* Adjust positioning of dropdown menus for RTL */
 .navbar__right .dropdown-menu {
    right: 0; /* Align dropdown to the right for RTL */
    left: auto;
}


/* Dark version adjustments for RTL */
 .dark-version .table .thead-dark th,
 .dark-version .table-dark {
    background-color: #262c49;
}

 .dark-version .dataTables_wrapper .custom-select {
    background-color: #867bf526 !important;
}

 .dark-version .dataTables_paginate .pagination li.active a {
    color: #ffffff !important;
}

 .dark-version .page-link,
 .dark-version .page-item.disabled .page-link {
    background-color: #262c49;
    border-color: #262c49;
}

 .dark-version div.dataTables_wrapper .dt-buttons button {
    border-color: #191b4a;
}

 .dark-version .form-control,
 .dark-version .form-control:disabled,
 .dark-version .form-control[readonly],
 .dark-version .custom-select {
    background-color: #060b2b !important;
}

 .dark-version .input-group-text {
    background-color: #262c49;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

 .dark-version .select2-container--default .select2-selection--single,
 .dark-version .select2-container--default .select2-selection--multiple,
 .dark-version .timepicki.time_pick input,
 .dark-version .single-answer,
 .dark-version textarea {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

 .dark-version .select2-dropdown {
    border: none;
}

 .dark-version .timepicker_wrap .action-next:hover,
 .dark-version .timepicker_wrap .action-prev:hover {
    background-color: #000000;
}

 .dark-version .timepicker_wrap .action-next::before,
 .dark-version .timepicker_wrap .action-prev::before {
    color: #ebeefd;
}

 .dark-version .single-answer.from__admin .single-answer__header {
    background-color: #03061b !important;
}

 .dark-version .activity-list__item::before {
    border-color: rgba(255, 255, 255, 0.25);
}

 .dark-version .card,
 .dark-version .widget,
 .dark-version .widget-two,
 .dark-version .widget-three {
    box-shadow: 0 10px 25px 2px rgba(0, 0, 0, 0.2) !important;
}

 .dark-version .pagination .page-item.active .page-link {
    background-color: #05164e;
    border-color: #05164e;
    color: #ffffff;
}

 .dark-version .pagination .page-item .page-link,
 .dark-version .pagination .page-item span {
    font-size: .875rem;
    display: flex;
    width: 36px;
    height: 36px;
    margin: 0 3px;
    padding: 0;
    border-radius: 50% !important;
    align-items: center;
    justify-content: center;
    color: #c2c6dc;
}

 .mailsent .envelope .line.line1 {
    right: -20px; /* Changed from left to right */
}

 .mailsent .envelope .line.line2 {
    right: -20px; /* Changed from left to right */
}

 .mailsent .envelope .line.line3 {
    right: -20px; /* Changed from left to right */
}

/* Adjust keyframes for movement and rotation to mirror animations */
@-moz-keyframes mailsent-movement {
    0% {
        transform: translate(50%);
        opacity: .1;
    }

    10% {
        transform: translate(50%);
        opacity: 1;
    }

    50% {
        transform: translate(-50%);
    }

    90% {
        transform: translate(-50%);
        opacity: 1;
    }

    100% {
        transform: translate(-150%);
        opacity: .1;
    }
}

@keyframes mailsent-movement {
    0% {
        transform: translate(50%);
    }

    50% {
        transform: translate(-50%);
    }

    100% {
        transform: translate(-150%);
    }
}

/* Rotate envelope */
@keyframes mailsent-rotation {
    0% {
        transform: skewX(30deg);
    }

    50% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(30deg);
    }
}

/* Adjust width and positioning animations for lines */
@keyframes line-size-large {
    0% {
        width: 15px;
        right: -20px; /* Changed from left to right */
    }

    50% {
        width: 0;
        right: -5px; /* Changed from left to right */
    }

    55% {
        width: 0;
        right: -5px; /* Changed from left to right */
    }

    100% {
        width: 15px;
        right: -20px; /* Changed from left to right */
    }
}

@keyframes line-size-small {
    0% {
        width: 10px;
        right: -15px; /* Changed from left to right */
    }

    50% {
        width: 0;
        right: -5px; /* Changed from left to right */
    }

    55% {
        width: 0;
        right: -5px; /* Changed from left to right */
    }

    100% {
        width: 10px;
        right: -15px; /* Changed from left to right */
    }
}
.widget-two__content {
  width: calc(100% - 65px);
  padding-right: 20px;
}

 .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-right: -1px; /* Changed from margin-left to margin-right */
  border-top-right-radius: 0; /* Changed from left to right */
  border-bottom-right-radius: 0; /* Changed from left to right */
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}


toggle:nth-last-child(n+3), .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
    border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}


 table thead th:first-child {
  border-radius: 0 5px 0 0; /* Adjusts the border-radius for RTL */
}

table thead th:last-child {
  border-radius: 5px 0 0 0;
}

.navbar__right {
  margin-right: auto;
  left: 10px;
  position: absolute;
}

.sidebar[class*="bg--"] .sidebar__menu .sidebar__menu-header {
  color: #b5b5b5;
}

.sidebar__menu-header {
  font-size: 0.6875rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #b5b5b5;
  margin: 10px 30px 8px 0;
}


.sidebar__menu .menu-icon {
  color: #5b6e88;
  font-size: 1.125rem;
  margin-left: 15px;
  transition: all 0.5s;
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.15);
}

.sidebar__menu .sidebar-dropdown > a {
  padding-left: 40px;
  position: relative;
}

.sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item .menu-icon, .sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item .menu-title {
  color: #e0e0e0;
  font-size: 13px;
}
.sidebar__menu .sidebar-dropdown > a::before {
  position: absolute;
  top: 15px;
  left: 20px;
  right:auto;
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: "\f107";
  font-size: 13px;
  color: #5b6e88;
  transition: all 0.3s;
}

 .slimScrollRail{
    color: #14a1e6 !important;
    right: auto !important; /* Disable the inline right style */
    left: 3px !important;   /* Add your new style with important */


}
.sidebar .slimScrollDiv .smliScrollBar .slimScrollRail{
    color: #14a1e6 !important;
    right: auto !important; /* Disable the inline right style */
    left: 3px !important;   /* Add your new style with important */


}
.modal-header .btn-close {
  padding: .5rem .5rem;
  margin: 0;
}

.toggle-group .toggle-off {
  background-color: #293654;
  color: #ffffff;
  font-size: 10px;
}
.toggle-on.btn-lg {
  padding-right: 25px;
}

/*
.checkbox label .toggle, .checkbox-inline .toggle { margin-right: -20px; margin-left: 5px; }
.toggle { position: relative; overflow: hidden; }
.toggle input[type=checkbox] { display: none; }
.toggle-group { position: absolute; width: 200%; top: 0; bottom: 0; right: 0; transition: right .35s; -webkit-transition: right .35s; -moz-user-select: none; -webkit-user-select: none; }
.toggle.off .toggle-group { right: -100%; }
.toggle-on { position: absolute; top: 0; bottom: 0; right: 0; left: 50%; margin: 0; border: 0; border-radius: 0; }
.toggle-off { position: absolute; top: 0; bottom: 0; right: 50%; left: 0; margin: 0; border: 0; border-radius: 0; }
.toggle-handle { position: relative; margin: 0 auto; padding-top: 0; padding-bottom: 0; height: 100%; width: 0; border-width: 0 1px; }
.toggle.btn { min-width: 59px; min-height: 34px; }
.toggle-on.btn { padding-left: 24px; }
.toggle-off.btn { padding-right: 24px; }
.toggle.btn-lg { min-width: 79px; min-height: 45px; }
.toggle-on.btn-lg { padding-left: 31px; }
.toggle-off.btn-lg { padding-right: 31px; }
.toggle-handle.btn-lg { width: 40px; }
.toggle.btn-sm { min-width: 50px; min-height: 30px; }
.toggle-on.btn-sm { padding-left: 20px; }
.toggle-off.btn-sm { padding-right: 20px; }
.toggle.btn-xs { min-width: 35px; min-height: 22px; }
.toggle-on.btn-xs { padding-left: 12px; }
.toggle-off.btn-xs { padding-right: 12px; }
.toggle-on.btn-lg {
  padding-right: 25px;
} */


.la-hand-point-right {
    transform: scaleX(-1); /* Flips the icon horizontally */
}
.la-hand-o-right {
    transform: scaleX(-1); /* Flips the icon horizontally */
}