body,
.jq-toast-wrap, .jq-toast-single,.jq-toast-single h2{
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: normal;
}

.sidebar{
    font-family: "Poppins", serif;
    
}
.btn {
    font-size: 1.1rem;
    padding: 0.6rem 1.5rem;
}

a.btn2 {
    text-decoration: none;
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
    font-weight: 500;
}

.icon-btn {
    padding: 0.375rem 0.5625rem;
    font-size: 1rem;
    margin: 0 1px;
}

.card .card-title {
    margin-bottom: 0;
}

.sidebar .nav .nav-item.active > .nav-link {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.sidebar .nav .nav-item .nav-link{
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link[aria-expanded=true] {
border-top-right-radius: 20px;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link[aria-expanded=true] {
border-top-right-radius: 20px;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

.sidebar .nav.sub-menu {
border-top-right-radius: 0px;
border-bottom-right-radius: 20px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}


.dataTables_wrapper .dataTables_filter {
    text-align: left !important;
}

.dataTables_wrapper .dataTables_length label {
    text-align: right !important;
}

.rtl .dataTables_wrapper .dataTables_filter {
    text-align: right !important;
}

.rtl .dataTables_wrapper .dataTables_length label {
    text-align: left !important;
}

select.form-select {
color: #000000 !important;
}

.material-form .form-group .bar::before {
    background: #205cb3 !important;
}

.material-form .form-group select:focus ~ .control-label, .material-form .form-group input:focus ~ .control-label, .material-form .form-group textarea:focus ~ .control-label {
    color: #205cb3 !important;
}

.statistics-details {
    margin-bottom: 20px !important;
    
}

.progressbar-js-circle {
    width: 70%;
    margin: auto;
}

.text-primary {
    color: #003B5C !important;
}

@media (max-width: 992px){
    .progressbar-js-circle {
    width: 50%;
    margin: auto;
}
}

.btn1 {
    border-radius: 0px 5px 5px 0px !important ;
}

.p-2{
    color:#003B5C;
}

.table-active {
    color: white !important;
    background-color: #00456563 !important;
}

.rate-container {
  display: flex;
  flex-direction: column; 
  align-items: flex-start; 
}

@media (min-width: 992px) {
  .rate-container {
    flex-direction: row; 
    align-items: center;
    justify-content: space-between; 
  }
}

@media (max-width: 991px) {
  .rate-container span {
    margin-top: 10px;
  }

  .rate-percentage {
    font-size: 1.5rem; 
  }
  .text-medium {
    font-size: 0.9rem; 
  }
  .icon-md {
    font-size: 1rem;
  }
  .ccenter{
    text-align:center;
  }
}

.card-body {
  overflow: hidden; 
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator .count {
    background: #ff1200;
    border: 4px solid #ff1200;
}

    .btn-modern.btn-primary {
        background-color: #0253c6 !important;
    }
    
    .file-upload-container:hover {
        border-color: #0253c6 !important;
    }
    
    .modern-checkbox-item input:checked + .modern-checkbox-button {
        background-color: #0253c6 !important;
    }
    
    .btn-info {
    background: #0253c6;
    color: #ffffff;
    border-color: #0253c6;
}

    .btn-info:hover {
    color: #fff;
    background-color: #003b8f;
    border-color: #003b8f;
}

    .btn-info:active {
    color: #fff !important;
    background-color: #003b8f !important;
    border-color: #003b8f !important;
}

.timeline {
    position: relative;
    padding-left: 30px;
    direction: ltr;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 42px;
    top: 0;
    width: 2px;
    height: 100%;
    background: #ddd;
}
.timeline-item {
    position: relative;
    margin-bottom: 30px;
    padding-left: 40px;
    text-align: left;
}
.timeline-icon {
    position: absolute;
    left: -5px;
    top: -2px;
    width: 35px;
    height: 35px;
    background: #0d6efd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.timeline-icon:hover {
    background: #0056b3;
    transform: scale(1.1);
    transition: 0.2s ease-in-out;
}
.timeline-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 45px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    display: none;
}
.timeline-icon:hover::after {
    display: block;
}

  .welcome-container {
    padding-top: 0px;
    margin: 20px 0;
    border-radius: 12px;
  }

  .welcome-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
  }

  .welcome-subtext {
    font-size: 1.1rem;
    color: #5b5b5b;
    margin: 8px 0 0 0;
  }
  
  .btn-group label.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 1.5;
    height: 100%;
}

.breadcrumb {
    background: transparent;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border:0px;
    padding-bottom: 0px;
}

.breadcrumb .breadcrumb-item {
font-size: 1rem;
padding-left: 0px;
padding-right: 0px;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding: 0 0.5rem;
    color: #aaa;
}

.breadcrumb-item a{
    color:#0253c6;
    text-decoration: none;
}

.nav-tabs .nav-item:last-child .nav-link {
border-radius: 0px 8px 0px 0px;
}

.nav-tabs .nav-item:first-child .nav-link {
    border-radius: 8px 0px 0px 0px;
}

.datepicker table tr td span.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active:hover {
    background-image: none;
    background-color: #003b5c !important;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
    margin-right: 0px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}

.chart-canvas {
  width: 100% !important;
height: 200px !important;
  max-width: 100%;
  aspect-ratio: 2 / 1; /* يحافظ على النسبة */
  min-height: 200px;   /* ارتفاع مناسب للجوال */
}

  @media (max-width: 768px) {
    .welcome-heading {
      font-size: 1.5rem;
    }

    .welcome-subtext {
      font-size: 1rem;
    }
    
  }


@media (max-width: 991px) {
 .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown { 
        left: 20px !important;
        top: 97px;
        width: 60% !important;
    }
    
}

@media (max-width: 768px) {
#usersTable tr {
    background-color: transparent !important;
    border: 1px solid #eaeaea !important;
    
}

#usersTable td {
    border-bottom: 2px solid #3f4352;
}
#ordersTable thead {
            display: none;
        }

#ordersTable tbody tr {
            display: block;
            margin-bottom: 15px;
            margin-top: 15px;
            border: 1px solid #e7e7e7;
            padding: 10px;
            border-radius: 10px;
        }

#ordersTable tbody td {
            display: flex;
            justify-content: space-between;
            padding: 8px 10px;
            border-bottom: 1px solid #d4d4d4;
        }


#ordersTable tbody td:last-child {
            border-bottom: none;
            padding-top: 10px;
justify-content: space-around;
        }
        
.order-id-badge {
        display: inline-block;
        background-color: #0253c6; /* أزرق bootstrap */
        color: #fff;
        font-size: 0.875rem;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 4px;
        line-height: 1;
        white-space: nowrap;
    }
    
    .breadcrumb .breadcrumb-item {
    padding-bottom: 1rem;
}

    .table.table-hover > tbody > tr:hover > *, .jsgrid .table-hover.jsgrid-table > tbody > tr:hover > * {
background: none;
}
}


@media (max-width: 768px) {
  .btn-responsive-sm {
    padding: 0.35rem 0.7rem !important; /* نفس btn-sm */
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
  
  .datepicker.datepicker-dropdown{
    left: 2rem !important;
    top: 4rem !important;
    z-index: 99999 !important;
    
  }
  
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item {
        margin-right: 1rem !important;
        margin-left: 0px;
    }
}

.dataTables_filter, .dataTables_length {
  width: 100%;
}

.dataTables_length select {
  appearance: none;
  -webkit-appearance: none;
  padding-left: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23333' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 8px;
}

@media (min-width: 768px) {
  .dataTables_filter, .dataTables_length {
    margin-bottom: 15px;
  }
}


@media (max-width: 767px) {

    .card {
    border-radius: 10px;
    margin-bottom: 15px;
  }
 
  
  .card-header {
    padding: 15px;
  }
  
  .card-body {
    padding: 12px;
  }
  
  .card-title {
    margin-bottom: 10px;
    font-size: 18px;
  }
  
  .btn-rounded {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
  }
  
  .dataTables_filter label {
    width: 100%;
  }
  
  .form-input {
    padding: 10px;
    border-radius: 8px;
  }
  
  .dataTables_length {
    margin-top: 10px;
  }
  
  .dataTables_length label {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }
  
  .custom-select {
    margin-left: 10px;
    flex: 1;
    max-width: 120px;
  }
  
  #usersTable {
    display: block;
    width: 100%;
  }
  
  #usersTable thead {
    display: none;
  }
  
  #usersTable tbody, 
  #usersTable tr {
    display: block;
    width: 100%;
  }
  
  #usersTable tr {
    margin-bottom: 12px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 12px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  
  #usersTable td {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 8px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  #usersTable td:last-child {
    border-bottom: none;
  }
  
  #usersTable td:before {
    content: attr(data-title);
    width: 80px;
    min-width: 80px;
    font-weight: 600;
    color: #555;
    margin-right: 12px;
  }
  
  #usersTable .img-sm {
    width: 40px;
    height: 40px;
  }
  
  #usersTable .wrapper {
    flex: 1;
  }
  
  .form-button-action {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
  }
  
  .icon-btn {
    padding: 6px 8px;
    border-radius: 4px;
  }
  
  #usersEmpty {
    padding: 20px;
    text-align: center;
  }
  
  .empty {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


@media (max-width: 767px) {
 
  #usersTable tr:hover {
    background-color: inherit !important; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; 
    cursor: default !important; 
    transform: none !important; 
  }
  
  #usersTable tr:hover td {
    background-color: transparent !important;
  }
  
  .table-hover tbody tr:hover {
    background-color: transparent !important;
  }
}
.showSelect{
  margin-right:10px;
}
@media (max-width: 767px) {
  /* Make search input 100% width on mobile */
  .dataTables_filter input.form-input {
    width: 100% !important;
  }
  /* Also fix the select dropdown width */
  .dataTables_length select.form-control {
    max-width: 99% !important;
  }
}

.nav-item.d-block.d-lg-none button i.icon-calendar {
  color: #212121;
  font-size: 1.1rem;
}

.datepicker.datepicker-dropdown, .datepicker.datepicker-inline{
    z-index: 99999999 !important;
    width: 20%;
}

.btn-radius{
    border-radius: 11px;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown i {
    
    vertical-align: sub;
}

.badge-sales {
color: white !important;
background: rgb(199, 87, 0) !important;
border: 1px solid rgb(199, 87, 0) !important;
border-radius: 4px;
}

.badge-user {
color: white !important;
background: rgb(171, 171, 171) !important;
border: 1px solid rgb(171, 171, 171) !important;
border-radius: 4px;
}

.alert-warning {
color: #a47100;
}

.loyalty{
    background: linear-gradient(135deg, #d4af37, #b8860b);
}

.star-icon{
    fill:#fff
}


.bg-opacity-danger i {
font-size: 20px;
}

.bg-opacity-info i {
font-size: 20px;
}

.bg-opacity-success i {
font-size: 20px;
}

.bg-opacity-primary i {
font-size: 20px;
}

.country-badge, .variety-badge {
font-weight: normal;
font-size: 0.78rem;
padding: 0.35em 0.65em;
border-radius: 5px;
background-color: #f0f0f0 !important;
}


.rating-container {
display: inline-flex;
align-items: center;
background-color: #e6a370;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}

.reporticon{
    width: 45px;
    height: 45px;
}

  .text-justify {
    text-align: right !important;
  }
  
  
 a {
     text-decoration: none;
 }
 
 
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
    min-width: 300px;
}

@media(max-width:400px){
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
    min-width: 200px;
}
}

.cropuse-group {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cropuse-group .btn-check:checked + .btn-crop {
    background-color: #0253c6;
    color: #fff;
    border-color: #0253c6;
  }

  .btn-crop {
    border-radius: 30px;
    padding: 0.5rem 1.2rem;
    white-space: nowrap;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid #ccc;
    font-size: 1rem;
  }

  .btn-crop:hover {
    background-color: #f3f4f6;
  }

  .cropuse-container::-webkit-scrollbar {
    display: none;
  }
  
.bg-opacity-danger p ,.bg-opacity-info p ,.bg-opacity-success p ,.bg-opacity-primary p {
font-size: 13px;
}

    .bg-new-subtle i {
        color: #bd58c4;
    }
    
        .bg-new-2 i {
        color: #df9655;
    }
    .bg-new-subtle {
        background-color: rgb(251, 203, 254);
        color:#000;
        
    }

    .bg-new-2 {
        background-color: rgb(252, 231, 213);
        color: #000 !important;

    }

.ol-primary-subtle {
  border: 1px solid #d0e2ff !important;
}

.btn-check:checked  + .ol-primary-subtle {
  background:#d0e2ff;
  color:#000;
}

.ol-success-subtle {
  border: 1px solid #d2e7dd !important;
}

.btn-check:checked  + .ol-success-subtle {
  background:#d2e7dd;
  color:#000;
}

.ol-warning-subtle {
  border: 1px solid #fff4d0 !important;
}

.btn-check:checked  + .ol-warning-subtle {
  background:#fff4d0;
  color:#000;
}

.ol-info-subtle {
  border: 1px solid #d0f5fc !important;
}

.btn-check:checked  + .ol-info-subtle {
  background:#d0f5fc;
  color:#000;
}

.ol-danger-subtle {
  border: 1px solid #fcdcdf !important;
}

.btn-check:checked  + .ol-danger-subtle {
  background:#fcdcdf;
  color:#000;
}

.ol-new-2 {
  border: 1px solid rgb(255, 234, 215) !important;
}

.btn-check:checked  + .ol-new-2 {
  background:rgb(255, 234, 215);
  color:#000;
}

.ol-new-subtle {
  border: 1px solid rgb(251, 203, 254) !important;
}

.btn-check:checked  + .ol-new-subtle {
  background:rgb(251, 203, 254);
  color:#000;
}


.badge-opacity-new {
    background: #c394e0;
    color: #5d2481;
    border-radius: 6px;
}


.badge-opacity-primary {
background: #ffd6ba;
color: #712e00;
border-radius: 6px;
}



body{
    background: #ffffff;
}

   .content-wrapper {
background: rgb(255, 255, 255);
}

.navbar .navbar-menu-wrapper {
background: rgb(255, 255, 255);
}

    .navbar .navbar-menu-wrapper {
background: rgb(255, 255, 255);
}

.sidebar {
    background: rgb(255, 255, 255);
}

.footer {
background: rgb(255, 255, 255);
}

.card {
    border: 1px solid rgb(232, 232, 232) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.navbar .navbar-brand-wrapper {
background: rgb(255, 255, 255);
}
@media (min-width: 992px) {
    .content-wrapper{
     padding: 0rem 2.187rem 1.5rem 3.5rem;   
    }
    
}

.navbar{
    background: transparent;
}

.table.table-hover > tbody > tr:hover > *, .jsgrid .table-hover.jsgrid-table > tbody > tr:hover > * {
background: #f9f9f9;
}

.navbar.headerLight {
box-shadow: none;
-webkit-box-shadow: none;
}

@media (max-width: 991px){
.navbar .navbar-menu-wrapper {
padding-top: 25px;
}
}

@media (max-width: 767px) {
    .content-wrapper {
        padding: 0rem 1.5rem 1.5rem 1.5rem;
    }
}

.auth .auth-form-light {
    border: 1px solid #e8e8e8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.no-border{
    border:none !important;
    box-shadow: none !important;
}

@media (min-width: 992px) {
    /* للعربي (RTL) */
    html[dir="rtl"] .navbar .navbar-brand-wrapper {
        border-left: 1px solid #e8e8e8;
        border-right: none;
    }

    /* للإنجليزي (LTR) */
    html[dir="ltr"] .navbar .navbar-brand-wrapper {
        border-right: 1px solid #e8e8e8;
        border-left: none;
    }
}

/* Sidebar - Light Mode */
html[dir="rtl"] .sidebar {
    border-left: 1px solid #e8e8e8;
    border-right: none;
}
html[dir="ltr"] .sidebar {
    border-right: 1px solid #e8e8e8;
    border-left: none;
}


.badge-opacity-primary , .badge-opacity-info , .badge-opacity-success , .badge-opacity-warning , .badge-opacity-danger , .badge-opacity-new{
border-radius: 9px;
padding-left: 12px;
padding-right: 12px;
}

.btn-check + .btn:hover{
    border-color: #0253c6;
}

.btn-gray{
    background: #E6ECEF;
border-color: #E6ECEF;
color:#003a60;
}



.btn-gray:hover{
    background: #CDD8DF;
border-color: #CDD8DF;
}


    .apexcharts-tooltip {
  background: rgba(255, 255, 255, 0.46) !important; /* خلفية شبه شفافة */
  color: #363636 !important;                        /* النص أبيض */
  border-radius: 10px !important;                /* زوايا دائرية */
  border: 1px solid #fff !important;
  backdrop-filter: blur(1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  border-image: linear-gradient(90deg, #000, #dedede) 1;
}

/* العنوان داخل التولتيب */
.apexcharts-tooltip-title {
  background: rgba(255, 255, 255, 0.46) !important;
  color: #363636 !important;
  font-weight: bold;
  padding: 6px 10px !important;
  border-radius: 6px 6px 0 0 !important;
  border-bottom:none !important;
}

/* القيم */
.apexcharts-tooltip-text {
  color: #363636 !important;
}


.btn-ancestry{
    background:transparent;
    border:none;
    color:#9e9ea8;
}

.btn-main{

    background: transparent;
    color: #262626;
    border-color: rgb(225 225 225);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 1rem;
}

.btn-main:hover{

    background: rgb(250, 250, 250);
    color: #262626;
    border-color: rgb(225 225 225);
}

    .btn-arrow{
        border-radius: 999px;
        font-size: 0.9rem;
        background-color: transparent;
        border:1px solid rgb(232, 232, 232);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    
    .dark-mode .btn-arrow{
        background-color: transparent;
        color:#9e9e9e;
        border:1px solid #1c1c1c;
    }
    
    .btn-arrow:hover{
      background-color: #f4f4f4;  
    }
    
    .dark-mode .btn-arrow:hover{
      background-color: rgb(28, 28, 28);  
    }