/* Directory Styles */
#employee-directory_wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 3rem auto;
}
table#employee-directory.dataTable {
  padding: 1rem 0 2rem;
  border-bottom: none;
}
#employee-directory_wrapper.dataTables_wrapper .dataTables_length {
  float: right !important;
  font-family: articulat-cf, sans-serif;
  font-family: var(--font-art);
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  color: #333333;
  text-transform: capitalize;
}
#employee-directory_wrapper.dataTables_wrapper .dataTables_length select {
  font-weight: 700;
  background: #EBF1F3;
  border-radius: 12px;
  padding: 0 15px;
  text-align: center;
  margin: 0 8px;
  border-color: transparent;
}
#employee-directory_wrapper.dataTables_wrapper .dataTables_length select option {
  text-align: center;
}
#employee-directory_wrapper.dataTables_wrapper .dataTables_filter {
  float: left !important;
}
#employee-directory_wrapper.dataTables_wrapper .dataTables_filter label {
  font-size: 0;
}
#employee-directory_wrapper.dataTables_wrapper .dataTables_filter label input {
  width: 652px;
  height: 41px;
  border: none;
  border-bottom: 1px solid #333333;
  border-radius: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 8px 16px;
  gap: 8px;
  font-weight: 700;
  font-family: articulat-cf, sans-serif;
  font-family: var(--font-art);
  font-size: 18px;
  background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2215%22%20viewBox%3D%220%200%2014%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M12.25%2013.0767L9.74167%2010.5683M11.0833%207.24333C11.0833%209.82066%208.994%2011.91%206.41667%2011.91C3.83934%2011.91%201.75%209.82066%201.75%207.24333C1.75%204.666%203.83934%202.57666%206.41667%202.57666C8.994%202.57666%2011.0833%204.666%2011.0833%207.24333Z%22%20stroke%3D%22%23333333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E%0A);
  background-repeat: no-repeat;
  background-position: 98% 50%;
  background-size: 14px;
}
#employee-directory_wrapper.dataTables_wrapper .dataTables_info {
  font-weight: 700;
}
#employee-directory_wrapper.dataTables_wrapper .dataTables_paginate .paginate_button.current, body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #0c7799;
  background: var(--Primary-color-1, #0c7799);
  color: #fff !important;
  border: none !important;
}
#employee-directory_wrapper.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-family: articulat-cf, sans-serif;
  font-family: var(--font-art);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: #0c7799 !important;
  color: var(--Primary-color-1, #0c7799) !important;
  border: none !important;
}
#employee-directory_wrapper.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #ebf1f3;
  background: var(--Neutral-color-3, #ebf1f3);
  color: var(--Primary-color-1, #0c7799) !important;
  border: none !important;
}
#employee-directory_wrapper.dataTables_wrapper .dataTable thead {
  display: none;
}
#employee-directory_wrapper.dataTables_wrapper .dataTable tbody tr {
  background: transparent !important;
}
.dataTable .person-profile-block-card {
  display: flex;
  gap: 16px;
  width: 100%;
}
.dataTable .person-profile-block-card .img {
  max-height: 145px;
  max-width: 128px;
  width: 100%;
  height: 145px;    
}

.dataTable .person-profile-block-card .img img {
  border-radius: 8px;
  height: 100%;
  object-fit: cover;
  width: 100%;
  margin: 0
}
.dataTable .person-profile-block-card .name {
  font-family: futura-pt, sans-serif;
  font-family: var(--font-fut);
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  background: linear-gradient(270deg, #0C7799 0%, #003762 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.dataTable .person-profile-block-card .person-title {
  font-family: articulat-cf, sans-serif;
  font-family: var(--font-art);
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 155%;
  background: linear-gradient(270deg, #0C7799 0%, #003762 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;    
}
.dataTable .person-profile-block-card .contact-info, .dataTable .person-profile-block-card .contact-additional {
  display: flex;
  gap: 20px;
  padding: .5rem 0;
}
.dataTable .person-profile-block-card .contact-info + .contact-additional {
  padding-top: .25rem;
}
.dataTable .person-profile-block-card a {
  color: #0c7799;
  color: var(--Primary-color-1, #0c7799);
  text-decoration: underline !important;
}
.dataTable .person-profile-block-card i {
  color: #0c7799;
  color: var(--Primary-color-1, #0c7799);
  margin-top: 3px;
}
.dataTable .person-profile-block-card .phone,
.dataTable .person-profile-block-card .email,
.dataTable .person-profile-block-card .contact-additional .linkedin {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 5px;
}
.dataTable .person-profile-block-card .contact-additional .linkedin i {
  margin-top: 1px;
}
td.firstname, td.lastname, td.department {
  display: none;
}
.alphabet {
  margin-top: 5rem;
  padding: 0 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: articulat-cf, sans-serif;
  font-family: var(--font-art);
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: initial;
  color: #333333;
  text-transform: capitalize;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .alphabet {
    font-size: 20px;
  }
}
.alphabet span {
  color: #0c7799 !important;
  color: var(--Primary-color-1, #0c7799) !important;
  border: none !important;
  margin: .2rem .1rem;
  padding: 0 .4rem;
  background: linear-gradient(270deg, #0C7799 0%, #003762 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.alphabet span.clear {
  padding: 0 .6rem;
}
.alphabet span.active, .alphabet span:hover  {
  color: #fff !important;
  background: #003762;
  background: linear-gradient(270deg, #0C7799 0%, #003762 100%);
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  text-fill-color: initial;
}