$primary-blue: rgb(0, 117, 255);
$primary-blue-60: rgba(0, 117, 255, 0.60);
$primary-blue-50: rgba(0, 117, 255, 0.50);
$primary-blue-20: rgba(0, 117, 255, 0.20);
$primary-blue-10: rgba(0, 117, 255, 0.10);
$primary-blue-7: rgba(0, 117, 255, 0.07);
$primary-blue-2: rgba(0, 117, 255, 0.02);
$primary-dark: rgb(16, 38, 64);
$primary-dark-50: rgba(16, 38, 64, 0.5);
$primary-dark-30: rgba(16, 38, 64, 0.3);
$primary-dark-15: rgba(16, 38, 64, 0.15);
$primary-dark-10: rgba(16, 38, 64, 0.10);
$primary-dark-2: rgba(16, 38, 64, 0.02);
$primary-dark-1: rgba(16, 38, 64, 0.01);
$error-red: rgb(233, 31, 79);
$error-red-50: rgba(233, 31, 79, 0.5);
$error-red-10: rgba(233, 31, 79, 0.10);
$secondary-purple: rgb(108, 25, 173);
$alert-yellow: rgb(255, 238, 88);
$benchmark-orange: rgb(245, 129, 21);
$benchmark-orange-50: rgba(245, 129, 21, 0.50);
$action-green: rgb(158, 206, 56);
$action-green-50: rgba(158, 206, 56, 0.5);
$box-shadow: 5px 5px 30px 0 rgba(24, 45, 70, 0.05);

.row-title {
  img {
    border-radius: 5px;
  }
}

#wpbody-content .inline-edit-row-contact .inline-edit-col-left {
  width: 50%;
}

#wpbody-content .inline-edit-row-contact .inline-edit-col-right {
  width: 50%;
}

.search-label {
  font-weight: 500;
  font-size: 14px;
}

#search-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

#search-panel .filters {
  display: flex;
  justify-content: flex-start;
  /*align-items: center;*/
  width: 100%;
  gap: 5px;

  align-items: stretch;
}

#search-panel .contact-quick-search {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

#search-panel .search-filters-wrap {
  width: 100%;
}

#search-panel .search-contacts-wrap {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

span#search-name {
  cursor: pointer;
}

#search-panel button.enable-filters {
  background: #FFFFFF;
  border: 1px solid #8c8f94;
  border-radius: 3px;
  padding: 5px;
  cursor: pointer;

  &:hover{
    background: $primary-dark-1;
    border-color: $primary-dark-50;
  }
}

.search-param {
  display: inline-block;
  margin: 5px;
  max-width: 300px;
  /*min-height: 150px;*/
  /*min-width: 300px;*/
  vertical-align: top;
  padding: 10px;
  /*border: 1px solid #e5e5e5;*/
}

.search-param input,
.search-param select {
  max-width: 100%;
}

#search-filters .tags-filter.search-param {
  display: inline-block;
  max-width: 700px;
}

#search-filters .tags-filter .filters {
  display: flex;
  justify-content: left;
  /*float: left;*/
}

#search-filters .tags-filter .filters .search-param {
  padding: 0;
  margin: 10px 10px 0 0;
}

.start-search {
  padding-left: 15px;
}

li#option-delete a,
a.danger,
a.change-status.unsubscribed,
a.change-status.spam,
a.change-status.bounced,
a.change-status.complained {
  color: #a00;
}

li#option-delete a:hover,
a.danger:hover,
a.change-status.unsubscribed:hover,
a.change-status.spam:hover,
a.change-status.bounced:hover,
a.change-status.complained:hover {
  color: #dc3232;
}

#quick-search {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #f9f9f9;
  margin-top: 10px;
  margin-bottom: 0;
}

#quick-search .small-select-wrap {
  width: 250px;
  display: inline-block;
}

#quick-search .tag-quick-search-wrap {
  display: inline-block;
  margin-right: 20px;
}

#quick-search .right form {
  display: flex;
  justify-content: space-between;
}

#quick-search .right form .quick-search {
  width: auto;
}

.filter-group-wrap {
  padding: 20px
}

td.column-tags_col .tags {
  white-space: normal;
}

td.column-tags_col .tags .tag {
  background: #f2f2f2;
  padding: 3px 9px;
  border-radius: 3px;
  margin: 0 6px 6px 0;
  font-size: 12px;
  display: inline-block;
}

.more-actions:after {
  content: "\f347";
  display: inline-block;
  font: normal 18px/1 dashicons;
  vertical-align: middle;
  margin-left: 5px;
  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

td.address .time-zone:before,
td.address .ip-address:before {
  content: "\f11f";
  display: inline-block;
  font: normal 13px/1 dashicons;
  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  margin-right: 3px;
  vertical-align: middle;
}

td.address .time-zone:before {
  content: "\f469";
}

td.tel_numbers .dashicons {
  font-size: 13px !important;
  margin-right: 5px !important;
  vertical-align: middle;
}

.phone-ext {
  width: 100px;
}

.alternate, .striped > tbody > :nth-child(odd) td,
.alternate, .striped > tbody > :nth-child(odd) th {
  background-color: #f9f9f9;
}

.alternate, .striped > tbody > :nth-child(even) td,
.alternate, .striped > tbody > :nth-child(even) th {
  background-color: #ffffff;
}

@media only screen and ( min-width: 782px ){

  .wp-list-table th#email,
  .wp-list-table th#tags_col {
    width: 400px;
  }

  .wp-list-table th,
  .wp-list-table #first_name,
  .wp-list-table #user_id,
  .wp-list-table #owner_id,
  .wp-list-table #tel_numbers,
  .wp-list-table #last_name {
    width: 125px;
  }

  .wp-list-table #birthday,
  .wp-list-table #date_created {
    width: 200px;
  }

  .wp-list-table #address {
    width: 300px;
  }

  .table-scroll {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: auto;
    overflow-y: auto;
  }

  .table-scroll table {
    width: 100%;
    min-width: 1280px;
    margin: auto;
  }

  .table-wrap {
    position: relative;
  }

  .table-scroll thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  /* safari and ios need the tfoot itself to be position:sticky also */
  .table-scroll tfoot,
  .table-scroll tfoot th,
  .table-scroll tfoot td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 2;
  }

  tbody th.check-column,
  tfoot td.check-column,
  thead td.check-column {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 4;
  }

  thead th.column-email,
  tfoot th.column-email,
  tbody td.column-email {
    position: -webkit-sticky;
    position: sticky;
    left: 33px;
    z-index: 4;
  }

  td.check-column,
  thead th.column-email,
  tfoot th.column-email {
    background: #ffffff;
  }

}


@media only screen and ( max-width: 782px ){

  #below-filters{
    margin-top: 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  #load-saved-search{
    margin-bottom: 0;
  }

  .tablenav.top .gh-actions {
    display: none;
  }

  #search-panel {
    flex-direction: column;
    gap: 20px;

    .contact-quick-search{
      justify-content: flex-start;
    }
  }

}