:root {
    --text-white: #ffff;
    --text-gray: rgb(102, 102, 102);

    --filter-clear-border-color: rgba(0, 0, 0, 0.322);
    --filter-clear-border-radius: 5%;
}
.entitylist-filter {
    margin-bottom: 0px;
}
.entitylist-search>input {
    margin-top: 1px;
}
#filter-buttons-container {
    display: flex;
    gap: 10px;
}
.filter-toggle {
    background: none!important;
    border: none;
    padding: 8px!important;
    font-size: 19px;
    font-weight: 400;
    font-family: arial, sans-serif;
    color: var(--text-gray);
    text-decoration: underline;
    cursor: pointer;
}
.filter-clear {
    background: none!important;
    border: solid 1px var(--filter-clear-border-color);
    border-radius: var(--filter-clear-border-radius);
    padding: 8px!important;
    font-size: 19px;
    font-weight: 400;
    font-family: arial, sans-serif;
    color: var(--text-gray);
    text-decoration: underline;
    cursor: pointer;
}
.filter-toggle-container {
    transition: all 4s 1s;
    &.hidden {
       height: 0;
    }
}
.filter-container {
   display:flex; 
   flex-direction:column;
   border:var(--border-light);
   text-wrap: nowrap;
   margin-bottom: 3rem;
}
.filter-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--filter-group-gap);
    padding:3rem;
}

.filter-item {
    display:inline-grid;
}

.filter-item>*>input,
.filter-item>div>input,
.table>tbody>tr>td>input  {
    border-color: var(--input-border-color) !important;
    border-radius: 3px;
}
.filter-item-number {
    display:flex;
    align-items: center;
    border: 1px solid var(--input-border-color);
    border-radius: 3px;
}

.toolbar-actions {
    display: flex; 
    gap:10px;
}
.filter-item-number>input {
    width: 9rem;
    border:none;
    padding-left: 1rem;
}
.filter-item-number>input::placeholder {
    opacity: 0.5;
  }
.filter-item-number>input:focus-visible {
    outline: none;
}
.filter-item-number>input:first-child {
    border-right: 1px solid var(--input-border-color);
}
.input[type=date] {
    padding-left: 1rem;
    padding-right: 1rem;
}
.filter-item > a {
    text-decoration: none !important;
}

.filter-group-button {
    margin: 1rem;
}

.entitylist-filter-option-text {
    width: 130px;
}

.entitylist-filter-option-text >
    .input-group-addon:first-child {
    display: none;
}
.grid-actions {
    margin-bottom: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.button-container {
    position: relative;
    display: inline-block;
  }
.clear-btn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 12px;
    line-height: 2;
    cursor: pointer;
    border-left: 1px solid #ccc;
    background-color: #e8e8e8;
  }