@layer components {
    .grid-body {
        @apply flex flex-col text-left text-sm;
    }

    .grid-body>div {
        @apply -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8;
    }

    .grid-body>div>div {
        @apply py-2 align-middle inline-block w-full sm:px-6 lg:px-8;
    }

    .grid-body>div>div>div {
        @apply shadow overflow-hidden border-b border-gray-200 sm:rounded-lg;
    }

    .grid-header {
        @apply w-full divide-y divide-gray-200 text-sm;
    }

    .grid-header thead {
        /*@apply bg-gray-50;*/
        @apply bg-gray-50 sticky top-0 z-10;
    }

    .grid-header thead th {
        /*@apply px-3 py-2 text-left text-sm font-medium text-gray-500 uppercase tracking-wider;*/
        @apply pl-3 py-2 text-left text-sm font-medium text-gray-500 uppercase;
    }

    .grid-header thead tr {
        @apply align-baseline;
    }

    .grid-header .filter {
        @apply text-sm w-full;
    }

    .grid-content tbody {
        @apply bg-white divide-y divide-gray-200;
    }

    .grid-header thead tr {
        @apply align-baseline;
    }

    .grid-content{
        width: 100%;
        min-height: 130px;
        max-height: 650px;
        height: auto;
        overflow: auto;
    }

    .grid-content tbody td {
        /*@apply px-4 whitespace-nowrap;*/
        /*@apply whitespace-nowrap  py-2 px-1 ;*/
        @apply items-center text-center py-2 px-1 ;
        font-size: 14px;

    }

    .grid-action ul {
        @apply flex items-center justify-center mt-2 mb-2;
    }

    .grid-action ul li a {
        @apply text-indigo-500 bg-transparent border border-solid border-indigo-500 uppercase px-2 py-1 outline-none text-sm;
    }

    .grid-action ul li a:hover {
        @apply bg-indigo-500 text-white;
    }

    .grid-action ul li a:active {
        @apply bg-indigo-600 font-bold;
    }

    .grid-action ul li a:focus {
        @apply outline-none mb-1 ease-linear transition-all duration-150;
    }

    .grid-action ul li:first-child a {
        @apply text-indigo-500 bg-transparent border-l border-t border-b border-indigo-500 uppercase px-2 py-1 rounded-l outline-none text-sm;
    }

    .grid-action ul li:first-child a:hover {
        @apply bg-indigo-500 text-white;
    }

    .grid-action ul li:first-child a:active {
        @apply bg-indigo-600 font-bold;
    }

    .grid-action ul li:first-child a:focus {
        @apply outline-none mb-1 ease-linear transition-all duration-150;
    }

    .grid-action ul li:last-child a {
        @apply text-indigo-500 bg-transparent border-t border-b border-r border-indigo-500 uppercase px-2 py-1 rounded-r outline-none text-sm;
    }

    .grid-action ul li:last-child a:hover {
        @apply bg-indigo-500 text-white;
    }

    .grid-action ul li:last-child a:active {
        @apply bg-indigo-600 font-bold;
    }

    .grid-action ul li:last-child a:focus {
        @apply outline-none mb-1 ease-linear transition-all duration-150;
    }

    .grid-footer {
        @apply bg-gray-50 w-full;
    }

    .grid-footer-left {
        @apply  px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider
    }

    .grid-footer-center {
        @apply  px-6 py-3 text-center text-sm font-medium text-gray-500 uppercase tracking-wider
    }

    .grid-footer-right {
        @apply  px-6 py-3 text-right text-sm font-medium text-gray-500 uppercase tracking-wider
    }

    .grid-pagination ul {
        @apply flex items-center justify-center m-0;
    }

    .grid-pagination ul li a {
        @apply text-indigo-500 bg-transparent border border-solid border-indigo-500 uppercase px-4 py-2 outline-none text-sm;
    }

    .grid-pagination ul li a:hover {
        @apply bg-indigo-500 text-white;
    }

    .grid-pagination ul li a:active {
        @apply bg-indigo-600 font-bold;
    }

    .grid-pagination ul li a:focus {
        @apply outline-none mb-1 ease-linear transition-all duration-150;
    }

    .grid-pagination ul li:first-child a {
        @apply text-indigo-500 bg-transparent border-l border-t border-b border-indigo-500 uppercase px-4 py-2 rounded-l outline-none text-sm;
    }

    .grid-pagination ul li:first-child a:hover {
        @apply bg-indigo-500 text-white;
    }

    .grid-pagination ul li:first-child a:active {
        @apply bg-indigo-600 font-bold;
    }

    .grid-pagination ul li:first-child a:focus {
        @apply outline-none mb-1 ease-linear transition-all duration-150;
    }

    .grid-pagination ul li:last-child a {
        @apply text-indigo-500 bg-transparent border-t border-b border-r border-indigo-500 uppercase px-4 py-2 rounded-r outline-none text-sm;
    }

    .grid-pagination ul li:last-child a:hover {
        @apply bg-indigo-500 text-white;
    }

    .grid-pagination ul li:last-child a:active {
        @apply bg-indigo-600 font-bold;
    }

    .grid-pagination ul li:last-child a:focus {
        @apply outline-none mb-1 ease-linear transition-all duration-150;
    }


    .backgrid tbody tr.selected {
        background: rgb(128,129,130);
        background: linear-gradient(0deg, rgba(128,129,130,1) 1%, rgba(255, 182, 193, 0.5) 2%, rgb(255, 182, 193, 0.5) 54%, rgb(255, 182, 193, 0.5) 98%, rgba(128,129,130,1) 99%);
        font-weight: bold;
        border-style : hidden;
    }

    .backgrid tbody tr.selected:hover {
        background: rgb(128,129,130);
        background: linear-gradient(0deg, rgba(128,129,130,1) 1%, rgba(255, 182, 193, 0.5) 2%, rgb(255, 182, 193, 0.5) 54%, rgb(255, 182, 193, 0.5) 98%, rgba(128,129,130,1) 99%);
        font-weight: bold;

    }
    .backgrid tbody tr {
        cursor: pointer;
        user-select: none;
    }

    .backgrid tbody tr:hover {
        background: rgb(238,240,247);
        background: linear-gradient(0deg, rgba(238,240,247,1) 3%, rgba(220,222,230,1) 13%, rgba(220,222,230,1) 23%, rgba(213,214,222,1) 50%, rgba(220,222,230,1) 76%, rgba(238,240,247,1) 93%);
    }

    .grid-datepicker ul {
        @apply flex items-center justify-center m-0;
    }

    .grid-datepicker ul li a {
        @apply text-indigo-500 bg-transparent border border-solid border-indigo-500 uppercase px-4 py-2 outline-none text-sm;
    }

    .grid-datepicker ul li a:hover {
        @apply bg-indigo-500 text-white;
    }

    .grid-datepicker ul li a:active {
        @apply bg-indigo-600 font-bold;
    }

    .grid-datepicker ul li a:focus {
        @apply outline-none mb-1 ease-linear transition-all duration-150;
    }

    .grid-datepicker ul li:first-child a {
        @apply text-indigo-500 bg-transparent border-l border-t border-b border-indigo-500 uppercase px-4 py-2 rounded-l outline-none text-sm;
    }

    .grid-datepicker ul li:first-child a:hover {
        @apply bg-indigo-500 text-white;
    }

    .grid-datepicker ul li:first-child a:active {
        @apply bg-indigo-600 font-bold;
    }

    .grid-datepicker ul li:first-child a:focus {
        @apply outline-none mb-1 ease-linear transition-all duration-150;
    }

    .grid-datepicker ul li:last-child a {
        @apply text-indigo-500 bg-transparent border-t border-b border-r border-indigo-500 uppercase px-4 py-2 rounded-r outline-none text-sm;
    }

    .grid-datepicker ul li:last-child a:hover {
        @apply bg-indigo-500 text-white;
    }

    .grid-datepicker ul li:last-child a:active {
        @apply bg-indigo-600 font-bold;
    }

    .grid-datepicker ul li:last-child a:focus {
        @apply outline-none mb-1 ease-linear transition-all duration-150;
    }


    /*.grid-container {*/
    /*    width: 100%; !* Ajustez la largeur selon vos besoins *!*/
    /*    overflow-x: auto; !* Active la barre de défilement horizontal *!*/
    /*}*/

    /*.grid-container {*/
    /*    display: flex !important;*/
    /*    flex-direction: column !important;*/
    /*    overflow-x: auto !important;*/
    /*    white-space: nowrap !important;*/
    /*}*/

    /*.grid-header {*/
    /*    background-color: #fff !important;*/
    /*    position: sticky !important;*/
    /*    top: 0 !important;*/
    /*    z-index: 1 !important;*/
    /*}*/

    /*.grid-content {*/
    /*    flex: 1 !important;*/
    /*    overflow-y: auto !important;*/
    /*    overflow-x: hidden !important;*/
    /*}*/






}