/* Main generated container */
.gridjs-container {
   display: flex;
   flex-direction: column;
   width: 100%;
   min-width: min-content;
   color: #000;
   padding: 2px 2px 7px 2px;
   /* container-type: inline-size; */
}

/* header */
.gridjs-head {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
   padding: 0;
   margin-bottom: 5px;
   font-family: 'Inter', sans-serif;
}
.gridjs-head:after {
   clear: both;
   content: "";
   display: block;
   display: none;
}
.gridjs-head:empty {
   border: none;
   padding: 0;
}

/* header search wrapper  */
.gridjs-search {float: left; }
/* hearder search */
.gridjs-search-input { width: 250px; height: 36px; }
input.gridjs-input {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-color: #fff;
   border: 1px solid #d2d6dc;
   border-radius: 6px;
   font-size: 14px;
   line-height: 1.45;
   outline: none;
   padding: 10px 13px
}
input.gridjs-input:focus, .gridjs-limit:focus {
   border-color: #24282d;
   box-shadow: 0 0 0 3px rgba(149, 189, 243, .5);
}
/* table limit select input  */
.gridjs-limit{
   border-color: #e5e7eb;
   width: 65px;
   min-width: 65px;
   height: 36px;
   background-color: #fff;
   border: 1px solid #d2d6dc;
   border-radius: 6px;
   font-size: 14px;
   line-height: 1.45;
   padding: 0 12px 0 12px;
}
/* @container (max-width: 335px) {
   .gridjs-head {flex-direction: column;}
   .gridjs-limit, .gridjs-search-input {width: 100%;}
} */


/* table wrapper  */
.gridjs-wrapper {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: flex; /* or display: block; depending on your layout */
   flex-direction: column; /* or row, depending on your layout */
   width: 100%; /* or any specific width */
   max-width: 100%; /* Ensure it doesn't exceed the viewport */
   border-top-width: 1px;
   margin-bottom: 5px;
   border-radius: 8px;
   border: 1px solid #e5e7eb;
}
.gridjs-wrapper:nth-last-of-type(2) {
   border-bottom-width: 1px;
   border-radius: 8px;
}
/* table  */
table.gridjs-table {
   width: 100%;
   border-collapse: collapse;
   display: table;
   margin: 0;
   padding: 0;
   text-align: left;
   /* table-layout: fixed; */
}
/* .gridjs-thead, .gridjs-tbody {width: 100%;} */
.gridjs-tbody tr:hover { background-color: #f7f7f9; }
.gridjs-tr { border: none; /* z-index: 4; */ }
.gridjs-tr-selected td { background-color: #ebf5ff; }
.gridjs-tr:last-child td { border-bottom: 0;}

/* table head  */
th.gridjs-th {
   white-space: nowrap;
   height: 40px;
   padding: 0 12px 0 12px;
   background-color: #ffffff;
   border: 1px solid #e5e7eb;
   border-top: none;
   box-sizing: border-box;
   color: #4f4f56;
   outline: none;
   font-family: var(--font);
   font-weight: 500;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
   vertical-align: middle;
}
th.gridjs-th .gridjs-th-content {
   float: left;
   overflow: hidden;
   text-overflow: ellipsis;
}
th.gridjs-th-sort { cursor: pointer;}
th.gridjs-th-sort:focus,
th.gridjs-th-sort:hover {
   background-color: #f7f7f9;
}
th.gridjs-th-fixed {
   box-shadow: 0 1px 0 0 #e5e7eb;
   position: sticky;
}
@supports (-moz-appearance:none) {
   th.gridjs-th-fixed {
      box-shadow: 0 0 0 1px #e5e7eb;
   }
}
th.gridjs-th:first-child { border-top-left-radius: 8px; border-left: none; }
th.gridjs-th:last-child { border-top-right-radius: 8px; border-right: none; }
/* th sort  */
button.gridjs-sort {
   background-color: transparent;
   background-position-x: center;
   background-repeat: no-repeat;
   background-size: contain;
   border: none;
   cursor: pointer;
   float: left;
   height: 24px;
   margin: 0;
   margin-left: 8px;
   outline: none;
   padding: 0;
   width: 13px;
}
button.gridjs-sort-neutral {
   background-image: url(./sort-neutral.svg);
   background-position-y: center;
   opacity: 0.3;
   background-size: 16px;
}
button.gridjs-sort-asc {
   background-image: url(./sort-Asc.svg);
   background-position-y: center;
   background-size: 16px;
   opacity: 0.6;
}
button.gridjs-sort-desc {
   background-image: url(./sort-Desc.svg);
   background-position-y: center;
   background-size: 16px;
   opacity: 0.6;
}
button.gridjs-sort:focus {
   outline: none;
}
/* table body td*/
td.gridjs-td {
   border: 1px solid #e5e7eb;
   box-sizing: content-box;
   padding: 12px 24px;
   padding: 8px 12px 8px 12px;
   font-family: var(--font);
   color: var(--dark);
   position: relative;
}
td.gridjs-td:first-child { border-left: none;}
td.gridjs-td:last-child { border-right: none;}
.gridjs-tbody .gridjs-tr:last-child td.gridjs-td { border-bottom: none !important; }
.gridjs-tbody .gridjs-tr:last-child td.gridjs-td:first-child { border-bottom-left-radius: 8px !important;}
.gridjs-tbody .gridjs-tr:last-child td.gridjs-td:last-child { border-bottom-right-radius: 8px !important;}
td.gridjs-message {text-align: center;}
/* td checkbox */
.gridjs-td .gridjs-checkbox {
   cursor: pointer;
   display: block;
   margin: auto;
}
/* for table menu  */
.dropdown-menu{padding: 4px;}
.action-menu > i{
   height: 32px;
   width: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border-radius: 6px;
   font-size: 18px;
   color: #09090b;
}
.action-menu > i:hover{ background-color: #e9ecef;}
.dropdown-item{
   font-family: var(--font);
   color: var(--dark);
   padding: 6px 8px;
   font-size: 14px;
   line-height: 20px;
   border-radius: 6px;
}
.dropdown-item:focus{background-color: #e9ecef; color: #09090b;}
/* .dropdown-item.delete{color: var(--danger);} */
/* .dropdown-item.delete:hover{color: var(--danger);} */
.dropdown-item.delete{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}




/* table footer  */
.gridjs-footer {
   display: flex;
   width: 100%;
   height: auto;
   background-color: #fff;
   border-bottom-width: 1px;
   border-color: #e5e7eb;
   border-radius: 0 0 8px 8px;
   display: block;
   padding-top: 7px;
   font-family: var(--font);
}
.gridjs-footer:empty {
   border: none;
   padding: 0
}
.gridjs-footer button,
.gridjs-head button {
   background-color: transparent;
   background-image: none;
   border: none;
   cursor: pointer;
   margin: 0;
   outline: none;
   padding: 0;
}

.gridjs-pagination {
   width: 100%;
   display: block;
}
/* .gridjs-pagination:after {
   clear: both;
   content: "";
   display: block;
   border: 1px solid yellow;
} */
.gridjs-pagination .gridjs-summary {
   float: left;
   margin-top: 5px;
   color: #3d4044;
}
.gridjs-pagination .gridjs-pages {
   float: right;
}
.gridjs-pagination .gridjs-pages button {
   background-color: #fff;
   border: 1px solid #d2d6dc;
   border-right: none;
   outline: none;
   padding: 5px 14px;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none
}

.gridjs-pagination .gridjs-pages button:focus {
   border-right: 1px solid #d2d6dc;
   box-shadow: 0 0 0 2px rgba(149, 189, 243, .5);
   margin-right: -1px;
   position: relative
}

.gridjs-pagination .gridjs-pages button:hover {
   background-color: #f7f7f7;
   color: #3c4257;
   outline: none
}

.gridjs-pagination .gridjs-pages button:disabled,
.gridjs-pagination .gridjs-pages button:hover:disabled,
.gridjs-pagination .gridjs-pages button[disabled] {
   background-color: #fff;
   color: #6b7280;
   cursor: default
}

.gridjs-pagination .gridjs-pages button.gridjs-spread {
   background-color: #fff;
   box-shadow: none;
   cursor: default
}

.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
   background-color: #f7f7f7;
   font-weight: 700;
}

.gridjs-pagination .gridjs-pages button:last-child {
   border-bottom-right-radius: 6px;
   border-right: 1px solid #d2d6dc;
   border-top-right-radius: 6px
}

.gridjs-pagination .gridjs-pages button:first-child {
   border-bottom-left-radius: 6px;
   border-top-left-radius: 6px
}

.gridjs-pagination .gridjs-pages button:last-child:focus {
   margin-right: 0
}

/* @container (max-width: 540px) {
   .gridjs-pagination {
      display: flex;
      flex-direction: row;
      gap: 10px;
   }
   .gridjs-summary{min-width: 200px;}
   .gridjs-pages{display: flex; flex-direction: row;}
} */


.gridjs *,
.gridjs :after,
.gridjs :before {
   box-sizing: border-box;
}

.gridjs-loading-bar {
   background-color: #fff;
   opacity: .5;
   z-index: 10;
}

.gridjs-loading-bar,
.gridjs-loading-bar:after {
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
}

.gridjs-loading-bar:after {
   animation: shimmer 2s infinite;
   background-image: linear-gradient(90deg, hsla(0, 0%, 80%, 0), hsla(0, 0%, 80%, .2) 20%, hsla(0, 0%, 80%, .5) 60%, hsla(0, 0%, 80%, 0));
   content: "";
   transform: translateX(-100%);
}

@keyframes shimmer {to {transform: translateX(100%);}}

.gridjs-resizable {bottom: 0;position: absolute;right: 0;top: 0;width: 5px;}
.gridjs-resizable:hover {background-color: #9bc2f7;cursor: ew-resize;}
.gridjs-temp {position: relative;}