:root {
    --salam-primary: rgb(0, 98, 103) !important;
    --salam-primary-dark: rgb(0, 88, 93) !important;
    /* Manually specify the darker color */
    --salam-text: rgb(212 154 90 / var(--tw-text-opacity, 1));
    --salam-highlight: rgb(187 155 27) !important;
    /* A bright yellow color */
}

@font-face {
    font-family: "LamaSans";
    src: url("../fonts/LamaSans-Regular.ttf");
}

@font-face {
    font-family: "LamaSans";
    src: url("../fonts/LamaSans-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "LamaSans";
    src: url("fonts/LamaSans-RegularItalic.ttf");
    font-style: italic;
}


/* Apply the font when the body has the layout-mode-rtl class */
body.layout-mode-rtl *:not(i, *::before, *::after){
    font-family: 'LamaSans', sans-serif !important;
}

.bg-salam-primary {
    background-color: var(--salam-primary) !important;
}

.btn-salam-primary {
    background-color: var(--salam-primary);
    border: 1px solid var(--salam-primary);

    color: #fff !important;
}

.btn-salam-primary:active,
.btn-salam-primary:hover,
.btn-salam-primary:focus,
.btn-salam-primary.focus,
.btn-salam-primary.active,
.btn-salam-primary.hover {
    background-color: var(--salam-primary-dark);
    border-color: var(--salam-primary-dark);
}

.btn-salam-primary:disabled {
    background-color: #b0c4c7;
    border-color: #b0c4c7;
}

.salam-text {
    color: var(--salam-text) !important;
}

.salam-highlight {
    color: var(--salam-highlight) !important;
}



/* Target elements when body has the layout-mode-rtl class */
body.layout-mode-rtl .sidebar .sidebar-menu>ul li .submenu>ul li a {
    padding-right: 40px;
    /* Set padding-right to 40px */
    padding-left: default;
}

/* RTL specific styling for the ::before pseudo-element */
body.layout-mode-rtl .sidebar .sidebar-menu>ul li .submenu>ul li a::before {
    right: 28px;
    /* Adjust right property for RTL layout */
    left: default;
}


/* DATATABLE STYLES */
body.layout-mode-rtl .dataTables_wrapper .dataTables_processing {
    right: 50%;
}


body.layout-mode-rtl table.dataTable>thead .sorting_asc:after {
    visibility: hidden;
}

body.layout-mode-rtl .page-item.next .page-link i,
.page-item.previous .page-link i {
    color: #5e6278;
}

body.layout-mode-rtl .page-item .page-link .next {
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='%235E6278'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.93537 4.57889C6.03839 4.77912 6.0191 5.0363 5.87137 5.21403L2.87153 8.82282C2.68598 9.04603 2.36951 9.06026 2.16468 8.8546C1.95985 8.64893 1.94422 8.30126 2.12977 8.07804L4.80594 4.85863L2.15586 1.93583C1.96104 1.72096 1.96165 1.37314 2.15722 1.15895C2.35279 0.944757 2.66927 0.945311 2.86409 1.16018L5.85194 4.45551C5.8859 4.49296 5.91371 4.53459 5.93537 4.57889Z'/%3e%3c/svg%3e");
    transform: scale(-1);
}

body.layout-mode-rtl .page-item .page-link .next,
.page-item .page-link .previous {
    display: block;
    height: .875rem;
    width: .875rem;
}

body.layout-mode-rtl .page-item .page-link i {
    font-size: .85rem;
}

body.layout-mode-rtl .page-link .previous {
    transform: scale(-1);
}

body.layout-mode-rtl div.dataTables_wrapper div.dataTables_info {
    padding-top: initial;
    margin-top: 0.5rem;
}

body.layout-mode-rtl table.table.dataTable>thead>tr th {
    text-align: right;
}

body.layout-mode-rtl .paginate_button.page-item {
    margin-left: 3px;
    /* Adjust the value to your preference */
    margin-right: 3px;
    /* Adjust the value to your preference */
}

body.layout-mode-rtl .dataTables_wrapper select {
    background-position: left 0.5rem center;
}

body.layout-mode-rtl .dataTables_wrapper {
    margin-right: 15px;
}

/* required astric */
.form-label.required:after {
    content: "*";
    color: red;
}

/* scrollbar */
body.layout-mode-rtl ::-webkit-scrollbar {
    height: 5px;
    width: 7px;
}

/********** Select2 Styles **********/

.select2-container--default .select2-selection--single.is-invalid {
    border-color: #dc3545;
}

.select2-container--default.select2-container--open .select2-selection--single.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.select2-container--default .select2-selection--single.is-valid {
    border-color: #28a745;
}

.select2-container--default.select2-container--open .select2-selection--single.is-valid {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}



.table-responsive .dropdown,
.table-responsive .btn-group,
.table-responsive .btn-group-vertical {
    position: static;
}

/********** Twitter Bootstrap Wizard Styles **********/

.twitter-bs-wizard .twitter-bs-wizard-nav .nav-link::after {
    content: "";
    position: absolute;
    width: 75%;
    height: 2px;
    background-color: #e9e9ef;
    right: 62%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.twitter-bs-wizard .twitter-bs-wizard-pager-link li.next {
    float: left;
}


/********** Dropzone Styles **********/

/* Container styling */
.dropzone {
    background-color: #f9f9f9;
    padding: 20px;
    text-align: center;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border-color: transparent;
    border-radius: 2.5rem;
}

/* Drag and drop hover state */
.dropzone:hover {
    background-color: #f0f0f0;
}

/* Style for thumbnails */
.dropzone .dz-preview .dz-image img {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    object-fit: cover;
}

/* Preview box for uploaded files */
.dz-preview {
    display: inline-block;
    margin: 10px;
    position: relative;
    border-radius: 5px;
}

.dz-preview .dz-remove {
    position: absolute;
    top: 10px;
    right: 5px;
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    z-index: 200;
    color: transparent;
}

/* Add the 'X' using ::after */
.dz-preview .dz-remove::after {
    content: 'X';
    /* Display the "X" */
    font-size: 16px;
    /* Set the desired size of the "X" */
    color: white;
    /* Set the desired color */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Center the "X" */
}

/* Button styles */
/* .btn {
    padding: 10px 20px;
    background-color: #5a9;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
  }
  
  .btn:hover {
    background-color: #4a8;
  } */


.dropzone .dz-preview .dz-image img {
    display: block;
    width: 100%;
    height: 100%
}

.dropzone .dz-preview .dz-image {
    border-radius: 30px;
    overflow: hidden;
    width: 250px;
    height: auto;
    position: relative;
    display: block;
    z-index: 10;
    object-fit: cover;
}

.dropzone.hzScroll {
    /* width: auto; */
    overflow: auto;
    white-space: nowrap;
}

input[type="number"] {
    direction: rtl;
    text-align: right;
}


.accordion-button:not(.collapsed)::after {
    content: "\f078";
    font-family: "Fontawesome";
    font-size: 12px;
    line-height: 1;
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3.125rem;
    color: #6A7287;
    transform: rotate(180deg);
}







.media-modal .modal-content {
    border: 5px solid #abd1fa;
    /* Blue border */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    /* Blue shadow */
    border-radius: 10px;
    /* Rounded corners */
}

/* Optional: Add some padding to the modal body */
.media-modal .modal-body {
    padding: 20px;
}


.prose {
    /* 14px */
    line-height: 1.5;
    border: gray;
    background-color: #f9f9f9;
    white-space: pre-wrap;
    word-wrap: break-word;
}

@media (min-width: 640px) {
    .prose {
        /* 16px */
        border: gray;
        background-color: #f9f9f9;
    }
}


.header .header-left .logo img {
    width: 93px !important;
}


body.layout-mode-rtl .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
}


body.layout-mode-rtl .border-profile {
    border-right: 1px solid #d2d2d2;
    /* Adjust the color as needed */
    padding-right: 10px;
    /* Adjust the padding as needed */
}

@media (max-width: 992px) {
    body.layout-mode-rtl .sidebar {
        right: unset !important;
        left: 0 !important;
        border-right: 1px solid #E9EDF4 !important;
        border-left: unset !important;
    }

    body.layout-mode-rtl .page-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}