#referral-filter.wp-referral-filter--active {
  background: #404BF21A !important;
  border: 1px solid #7981F6 !important;

  .wps-head-filters & {
    border: 1px solid rgba(121, 129, 246, 1)
  }

  .wps-referral-filter__text {
    display: flex;
    gap: 3px;
    align-items: center;
  }

  .filter-text {
    color: #404BF2 !important;
  }

  .wps-badge {
    min-width: 14px;
    height: 14px;
    background: #404BF21A;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dashicons-filter {
    background: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjEwIiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgMTAgMTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02LjI1IDcuMjVWMTFMMy43NSAxMi4yNVY3LjI1TDAgMS42MjVWMC4zNzVIMTBWMS42MjVMNi4yNSA3LjI1Wk0xLjUwMjMxIDEuNjI1TDUgNi44NzE1TDguNDk3NjkgMS42MjVIMS41MDIzMVoiIGZpbGw9IiM0MDRCRjIiLz4KPC9zdmc+Cg==") no-repeat center center;
  }

  &:after {
    background: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjEzIiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgMTMgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02LjQ5OTk3IDcuOTk4MTRDNi40MzQxNyA3Ljk5ODUyIDYuMzY4OTQgNy45ODU5MSA2LjMwODAyIDcuOTYxMDJDNi4yNDcxIDcuOTM2MTQgNi4xOTE2OSA3Ljg5OTQ4IDYuMTQ0OTcgNy44NTMxNEwzLjE0NDk3IDQuODUzMTRDMy4wNTA4MiA0Ljc1ODk5IDIuOTk3OTIgNC42MzEyOSAyLjk5NzkyIDQuNDk4MTRDMi45OTc5MiA0LjM2NDk5IDMuMDUwODIgNC4yMzcyOSAzLjE0NDk3IDQuMTQzMTRDMy4yMzkxMiA0LjA0ODk5IDMuMzY2ODIgMy45OTYwOSAzLjQ5OTk3IDMuOTk2MDlDMy42MzMxMiAzLjk5NjA5IDMuNzYwODIgNC4wNDg5OSAzLjg1NDk3IDQuMTQzMTRMNi40OTk5NyA2Ljc5MzE0TDkuMTQ0OTcgNC4xNDgxNEM5LjI0MDYyIDQuMDY2MjMgOS4zNjM2NiA0LjAyMzQyIDkuNDg5NSA0LjAyODI4QzkuNjE1MzMgNC4wMzMxNCA5LjczNDcgNC4wODUzMSA5LjgyMzc1IDQuMTc0MzZDOS45MTI4IDQuMjYzNDEgOS45NjQ5NiA0LjM4Mjc3IDkuOTY5ODIgNC41MDg2MUM5Ljk3NDY5IDQuNjM0NDUgOS45MzE4OCA0Ljc1NzQ5IDkuODQ5OTcgNC44NTMxNEw2Ljg0OTk3IDcuODUzMTRDNi43NTY4NCA3Ljk0NTUxIDYuNjMxMTQgNy45OTc1OSA2LjQ5OTk3IDcuOTk4MTRaIiBmaWxsPSIjNDA0QkYyIi8+Cjwvc3ZnPgo=") center center no-repeat;
  }
}

#referral-filter {
  border: 1px solid #DADCE0;
  padding: 4px 21px;
  margin-top: 0 !important;
  border-radius: 3px;
  align-items: center;
  display: flex;
  gap: 8px;
  cursor: pointer;

  @media(max-width: 698px) {
    padding: 4px 12px !important;
  }

  &:after {
    content: '';
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjgiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDggNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuMDAwMDkgNC4wMDAwOUMzLjkzNDI5IDQuMDAwNDcgMy44NjkwNiAzLjk4Nzg2IDMuODA4MTQgMy45NjI5OEMzLjc0NzIyIDMuOTM4MDkgMy42OTE4MSAzLjkwMTQzIDMuNjQ1MDkgMy44NTUwOUwwLjY0NTA5MyAwLjg1NTA5M0MwLjU1MDk0MSAwLjc2MDk0MSAwLjQ5ODA0NyAwLjYzMzI0MyAwLjQ5ODA0NyAwLjUwMDA5M0MwLjQ5ODA0NyAwLjM2Njk0MiAwLjU1MDk0MSAwLjIzOTI0NSAwLjY0NTA5MyAwLjE0NTA5M0MwLjczOTI0NSAwLjA1MDk0MDkgMC44NjY5NDIgLTAuMDAxOTUzMTIgMS4wMDAwOSAtMC4wMDE5NTMxMkMxLjEzMzI0IC0wLjAwMTk1MzEyIDEuMjYwOTQgMC4wNTA5NDA5IDEuMzU1MDkgMC4xNDUwOTNMNC4wMDAwOSAyLjc5NTA5TDYuNjQ1MDkgMC4xNTAwOTNDNi43NDA3NCAwLjA2ODE3OTYgNi44NjM3OCAwLjAyNTM3NjQgNi45ODk2MiAwLjAzMDIzN0M3LjExNTQ2IDAuMDM1MDk3NSA3LjIzNDgzIDAuMDg3MjY0IDcuMzIzODcgMC4xNzYzMTFDNy40MTI5MiAwLjI2NTM1OCA3LjQ2NTA5IDAuMzg0NzI4IDcuNDY5OTUgMC41MTA1NjZDNy40NzQ4MSAwLjYzNjQwNCA3LjQzMiAwLjc1OTQ0MiA3LjM1MDA5IDAuODU1MDkzTDQuMzUwMDkgMy44NTUwOUM0LjI1Njk2IDMuOTQ3NDYgNC4xMzEyNiAzLjk5OTU0IDQuMDAwMDkgNC4wMDAwOVoiIGZpbGw9IiNBOUFBQUUiLz4KPC9zdmc+Cg==");
    background-repeat: no-repeat;
    transform: rotate(0);
    background-position: center;
  }

  .wps-badge {
    color: #404bf2;
    background: #eeeff1;
    padding: 4px;
    border-radius: 18px;
    height: 10px;
    min-width: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 10px;
  }

  .dashicons-filter {
    width: 10px;
    height: 11.88px;
    background: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjExIiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgMTEgMTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02Ljc1IDcuMjVWMTFMNC4yNSAxMi4yNVY3LjI1TDAuNSAxLjYyNVYwLjM3NUgxMC41VjEuNjI1TDYuNzUgNy4yNVpNMi4wMDIzMSAxLjYyNUw1LjUgNi44NzE1TDguOTk3NjkgMS42MjVIMi4wMDIzMVoiIGZpbGw9IiMzODNBM0QiLz4KPC9zdmc+Cg==") no-repeat center;

    &:before {
      display: none;
    }
  }

  .filter-text {
    color: #0C0C0D;
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
  }
}

#TB_closeWindowButton:focus .tb-close-icon {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

#referrals-filter {
  cursor: pointer;
  color: #666;
  transition: 0.5s all;
  margin-top: 5px;

  .dashicons {
    vertical-align: -5px;
  }

  &:hover {
    color: #d82424;
  }
}

#wps-referrals-filter-form {
  padding: 0;
  margin-right: -15px;
  margin-left: -15px;
  margin-bottom: -15px;

  table {
    width: 100%;
    padding-bottom: 52px;
    position: relative;
  }

  table.widefat {
    border: 0 !important;
    box-shadow: none !important;
  }
}

#wps-referrals-filter-form {

  .wps-referrals-filter-title{
    padding: 25px 16px 0;
    color: #56585A;
    font-size: 13px;
    font-weight: 400;
    line-height: 15.23px;
  }

  .wps-referrals-filter-content {
    padding: 8px 16px  53px;
  }

}

.wps-referrals-filter {
  .select2-container {
    width: 100% !important;
  }

  .rtl & {
    text-align: right !important;
  }
}