@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif !important;
}

:root {
    --primary-color: #ff8539 !important;
    --secondary-color: #ff9d5c;
    --accent-color: #d78100;
    --text-color: #00060f;
    --light-bg: #f7f7f7;
}

.skin-blue-light .main-header .navbar .dropdown-menu li a {
    color: var(--text-color) !important;
}

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

.btn-primary {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;
    border: none !important;
    padding: 10px 25px !important;
    border-radius: 8px !important;
}


.main-header {
    background: var(--primary-color) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}


.sidebar-menu > li > a {
    font-weight: 500 !important;
    padding: 15px 20px !important;
}

.sidebar-menu li.active > a {
    background: var(--light-bg) !important;
    border-left: 4px solid var(--secondary-color);
}

.box {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.table {
    border-radius: 8px;
    /* overflow: hidden; */
}

.table th {
    background:  #F8F1EB !important;
    color: rgb(34, 34, 34) !important;
}

/* <!-- Dans votre layout principal -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet"> */
.form-control {
    /* border-radius: 8px !important;
    padding: 12px 15px !important;
     */
    border: 1px solid #020406 !important;
}

.input-group-addon {
    background: var(--light-bg) !important;
    border: 2px solid #e2e8f0 !important;
}

.btn {
    transition: all 0.3s ease !important;
}

.navbar-nav > li > a {
    transition: color 0.2s ease-in-out;
}

table th.sorting {
color: #000000;
}
.fa-user{
    color: red;
}
.drop_down {
    color: #131212 !important; /* Orange #ff5733*/
 } 
.fa, .fas, .far, .fal, .fad, .fab {
    color: rgb(88, 8, 8) !important; /* Change la couleur en rouge */
    fill: rgb(88, 8, 8) !important; /* Change la couleur en rouge */
}

.tw-text-primary-700 {
    color: #ff5733 !important; /* Remplace avec ta couleur */
}

.tw-dw-btn-primary {
    background-image: linear-gradient(to right, #c63000, #6F4F28);
    color: white; /* Assure que le texte est en blanc pour une meilleure lisibilité *//* Teinte d'orange personnalisé */

  }

.input-sm {
    color: red; /* Change la couleur du texte en rouge */
}
@media (max-width: 767px) {
    .product_box {
        width: 48% !important;
        margin: 1% !important;
    }
    
    .main-header .navbar {
        padding: 10px 0 !important;
    }
}



/* Largeur de la barre de scroll */
::-webkit-scrollbar {
    width: 10px; /* Change la largeur */
    height: 10px; /* Pour le scroll horizontal */
}

/* Style du "thumb" (le bloc qu'on fait glisser) */
::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #ff5733, #ffcc00); /* Dégradé de couleurs */
    border-radius: 10px; /* Arrondi */
    border: 2px solid white; /* Bordure autour */
}

/* Au survol */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #a07102, #ff5733);
}

/* Style de la "track" (le fond de la barre de scroll) */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Fond gris clair */
    border-radius: 10px;
}

/* Quand la scrollbar est active (cliquer dessus) */
::-webkit-scrollbar-thumb:active {
    background: #ff5733;
} 



.tw-dw-btn.tw-dw-btn-xs.tw-dw-btn-outline.tw-dw-btn-info.tw-w-max.dropdown-toggle {
    border-color: var(--accent-color) !important;
    color:  var(--accent-color) !important;
    background-color: transparent !important;
    transition: all 0.3s ease !important;
}

.tw-dw-btn.tw-dw-btn-xs.tw-dw-btn-outline.tw-dw-btn-info.tw-w-max.dropdown-toggle:hover {
    /*background-color: var(--accent-color) !important;*/
    /* color: white !important; */
    border-color: var(--accent-color) !important;
}

.tw-dw-btn.tw-dw-btn-xs.tw-dw-btn-outline.tw-dw-btn-info.tw-w-max.dropdown-toggle:focus {
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.4) !important;
}

.tw-dw-btn.tw-dw-btn-primary.tw-dw-btn-lg{
    /* color:  var(--accent-color) !important; */
    background-color: var(--accent-color) !important;
    /* background-color: linear-gradient(45deg, #ff5733, #ffcc00) !important; */
}