#filterContainer{
    display: flex;
    margin: 18px 3px 12px 3px;
    gap: 3px;
    flex-wrap: wrap;
    font-size: 12px;
}
.fa, .checkboxSymbol{
    font-family: 'Font Awesome 6 Pro' !important;
}
#filterContainer *{
    font-size: inherit;
}
#filterContainer > * > *:not(.showInfoIconDiv.unchangeable){
    cursor: pointer;
}
#clearFiltersBtn{
    margin-left: 3px;
}
.filterDiv{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: auto;
    margin: 3px;
    border-style: solid;
    border-width: thin;
    padding: 0 5px;
    color: #057eff;
    border-color: #057eff;
    background-color: #F7F9FD;
}
.filterDiv.unchangeable{
    color: #6c757d;
    border-color: #ced4da;
    background-color: #e9ecef;
}
.filterDiv > *{
    padding: 0 1px;
}
.filterText{
    display: flex;
    align-items: center;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 3px;
}
.fieldOptionDiv{
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
}
#filterInfoEditor, #addFilterDropdown{
    transform: translateX(-50%);
    position: absolute;
    width: 150px;
    max-height: 330px;
    overflow-y: auto;
    padding: 5px 10px;
    border: 1px solid #888;
    z-index: 101;    /* The z-index of the reportIconHeaderContainer is 100 */
}
#addFilterBtn{
    display: flex;
    align-items: center;
    gap: 7px;
    margin-right: 20px;
    padding: 0 10px;
    border-radius: 20px;
}
#dateSpecialDropdown, #userSpecialDropdown{
    position: absolute;
    width: 150px;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px;
    border: 1px solid #888;
    z-index: 102;    /* The z-index of the reportIconHeaderContainer is 100 */
}
#filterInfoEditor *:not(label):not(label *){
    margin-top: 4px;
    margin-bottom: 4px;
}

.TextField_Input, .DateField_From, .DateField_To, .NumberField_From, .NumberField_To{
    width: 100%;
}

.NumberField_From_percent, .NumberField_To_percent{
    width: 120px;
}

.showInfoIconDiv{
    display: flex;
    height: 15px;
}

.showInfoIcon {
    align-self: center;
    border-color: #057eff transparent;
    border-width: 5px 4px 0 4px;
    border-style: solid;
    margin-left: 5px;
}
.showInfoIcon.unchangeable{
    border-color: #6c757d transparent;
}

.specialFilterText {
    cursor: pointer;
}

.specialFilterContent {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.specialFilter_input {
    width: 40px;
}

.filterTypeSwitch:hover, .optionLabel:hover, .fieldOptionDiv:hover, .specialFilterIcon:hover, .specialDropdownOption:hover, #addFilterBtn:hover{
    background-color: #dbdbdb;
    cursor: pointer;
}
.filterTextContent:hover, .filterTextContent:hover i::before{
    text-decoration: line-through;
    text-decoration-color: #057eff;
}

.filterTextContent.unchangeable:hover, .filterTextContent.unchangeable:hover i::before{
    text-decoration: line-through;
    text-decoration-color: #6c757d;
}

.filterTypeSwitch{
    font-size: 13px;
}

.specialFilterText, .specialFilterContent{
    font-size: 13px;
}

#resetFilterStatusBtn, #submitNewFilterBtn{
    background: linear-gradient(to bottom, #ffffff, #f8f8f8);
}

.optionLabel{
    display: block;
    white-space: nowrap;
}

.optionLabel > input{
    margin-right: 5px;
    margin-left: 5px;
}
.optionLabel, .fieldOptionDiv{
    padding: 4px;
}

.number_inputFromContainer_suffix, .number_inputToContainer_suffix{
    display: flex;
    align-items: center;
}

.number_inputFromContainer_suffix > input, .number_inputToContainer_suffix > input {
    flex: 1;
    margin-right: 5px;
}
.exactMatchLabel{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 5px;
}