.employees {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  position: relative;
}

.employees-header {
  padding: 0 1.75rem;
  padding-top: 1.75rem;
  padding-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.employees-header h2 {
  color: rgba(255, 255, 255, 0.69);
  color: color(display-p3 1 1 1 / 0.69);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.recruit-employee {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24.875rem;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  justify-content: center;
  z-index: 3;
}

.recruit-employee h1 {
  color: #fff;
  color: color(display-p3 1 1 1);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  text-align: center;
}

.recruit-wrapper {
  width: 100%;
  height: 26.5rem;
  border-radius: 0.9375rem;
  background: rgba(117, 183, 255, 0.3);
  background: color(display-p3 0.5167 0.71 1 / 0.3);
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  padding: 1.5rem 0;
  align-items: center;
  backdrop-filter: blur(0.3125rem);

}

.recruit-inputs {
  display: flex;
  flex-direction: column;
  row-gap: 0.75rem;
}

.recruit-input-wrapper {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}

select::-ms-expand {
  /* for IE 11 */
  display: none;
}

.recruit-input-container ul {
  color: rgba(255, 255, 255, 1);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border-radius: 0.625rem;
  border: 0.125rem solid rgba(0, 0, 0, 0.22);
  outline: none;
  background-color: rgba(0, 0, 0, 0.53);
  width: 13.8125rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  position: relative;
  display: flex;
  align-items: center;
}

.admin .recruit-input-container ul {
  border: 0.125rem solid rgba(0, 0, 0, 0.0);
  background-color: rgba(0, 0, 0, 0.0);
}

.recruit-input-container ul div,
.employee-status-wrapper ul div {
  z-index: 33;
  position: absolute;
  left: 50%;
  bottom: -285%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.47);

  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border-radius: 0.625rem;
  border: 0.125rem solid rgba(0, 0, 0, 0.22);
  outline: none;
  background-color: rgba(0, 0, 0, 0.53);
  backdrop-filter: blur(0.3125rem);
  width: 13.8125rem;
  height: 10.25rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: .3rem;
  padding: .6rem;
}

.selected-item {
  list-style-type: none;
}

.recruit-input-container ul div li,
.employee-status-wrapper ul div li {
  list-style-type: none;
  text-align: left;
  cursor: pointer;
  padding: .35rem;
  width: 100%;
  border-bottom: 0.0625rem solid #101820;
  transition: color .1s ease;
  display: flex;
  column-gap: .75rem;
  opacity: 0.5;
}

.recruit-input-container ul div li.selected,
.employee-status-wrapper ul div li.selected {
  opacity: 1;
  color: rgba(255, 255, 255, 1);

}


.recruit-input-container ul div li:hover,
.employee-status-wrapper ul div li:hover {
  color: white;
}

.recruit-input-container input {
  color: rgba(255, 255, 255, 1);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border-radius: 0.625rem;
  border: 0.125rem solid rgba(0, 0, 0, 0.22);
  outline: none;
  background: rgba(0, 0, 0, 0.53);
  width: 13.8125rem;
  height: 2.5rem;
  padding: 0 0.5rem;
}

.recruit-input-container input::placeholder {
  color: rgba(255, 255, 255, 0.47);
  color: color(display-p3 1 1 1 / 0.47);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.recruit-inputs span {
  color: rgba(255, 255, 255, 0.47);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  text-align: center;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.recruit-input-wrapper div {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6875rem;
  border: 0.125rem solid rgba(0, 0, 0, 0.22);
  background: rgba(0, 0, 0, 0.53);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recruit-wrapper .click-auto-text {
  color: rgba(255, 255, 255, 0.59);
  color: color(display-p3 1 1 1 / 0.59);
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  margin: 0 auto;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.recruit-player-pp-holder {
  padding: 0.15rem;
  border: 0.125rem solid #75b7ff;
  width: 4.024rem;
  height: 4.024rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recruit-player-pp-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.employees-input-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.employees-input-wrapper {
  width: 38.0515rem;
  height: 2.4816rem;
  position: relative;
}

.employees-search-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 0.2s ease;
}

.employees-search-icon:hover {
  opacity: 0.9;
}

.employees-input-wrapper input {
  width: 100%;
  height: 100%;
  border-radius: 1.9026rem;
  outline: none;
  border: none;

  padding-left: 1rem;
  padding-right: 3.25rem;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0rem 0.0827rem 0.3309rem 0rem rgba(0, 0, 0, 0.18) inset;
  color: rgba(255, 255, 255, 1);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.9926rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.employees-input-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.9926rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.employee-list-container {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  padding: 0 1.75rem;
  padding-bottom: 0.75rem;
}

.employee-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.employee-list-header h1 {
  color: #fff;
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 1.0754rem;
  font-style: normal;
  font-weight: 600;
  line-height: 143.836%;
  /* 1.5468rem */
}

.employee-list-header p {
  color: rgba(255, 255, 255, 0.47);
  text-align: right;
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 1.0754rem;
  font-style: normal;
  font-weight: 600;
  line-height: 143.836%;
  /* 1.5468rem */
}

.employees-list {
  flex: 1 0 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.2rem;
  row-gap: 1.5rem;
  overflow: auto;
}

.employees-list .employee {
  width: 18.65%;
  height: 22.5rem;
  border-radius: 0.9317rem;
  position: relative;
  border: 0.1433rem solid #8191ff;
  background: rgba(129, 145, 255, 0.03);
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  align-items: center;
  row-gap: 1rem;
  transition: all 0.2s ease;
}

.employees-list .employee.red {
  border: 0.1433rem solid #FB444D;
}

.employees-list .employee.purple {
  border: 0.1433rem solid #9F50F0;

}

.employees-list .employee.yellow {

  border: 0.1433rem solid #F68D45;
}
.employees-list .employee.black {
  border: 0.1433rem solid #000;

}
.employees-list .employee.green {
  border: 0.1433rem solid #026E00;

}

.employees-list .employee:hover {
  border: 0.1433rem solid #7da0ff;
  background: rgba(62, 143, 239, 0.5);
}


.employees-list .employee.red:hover  {

  border: 0.1433rem solid #fb444d64;
  background: #fb444d64;
}

.employees-list .employee.purple:hover  {
  border: 0.1433rem solid #a050f055;
  background: #a050f055;

}

.employees-list .employee.yellow:hover  {
  border: 0.1433rem solid #f68c457a;
  background: #f68c457a;
}

.employees-list .employee.black:hover  {
  border: 0.1433rem solid #00000055;
  background: #00000055;

}
.employees-list .employee.green:hover  {
  border: 0.1433rem solid #026E0055;
  background: #026E0055;

}
.admin .employees-list .employee {
  border: 0.1433rem solid #FF7B80;

}

.admin .employees-list .employee:hover {
  border: 0.1433rem solid #FF7B80;
  background: #fa5d62;

}

.employees-activity-status-container {
  display: flex;
  align-items: center;
  column-gap: 0.75rem;
  position: absolute;
  left: 2.5rem;
  bottom: 2rem;
}

.online-employees {
  color: #83ff87;
  color: color(display-p3 0.6417 1 0.5833);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 143.836%;
  /* 1.0788rem */
}

.offline-employees {
  color: #ff989c;
  color: color(display-p3 1 0.6208 0.6208);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 143.836%;
  /* 1.0788rem */
}

.employee-activity-status {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
}

.employee-online {
  background-color: #0f0;
}

.employee-offline {
  background-color: #f00;
}

.employee-name {
  color: #fff;
  color: color(display-p3 1 1 1);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 1.0751rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.employee-job {
  color: rgba(255, 255, 255, 0.47);
  color: color(display-p3 1 1 1 / 0.47);
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.7884rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.employee-other-info {
  display: flex;
  justify-content: flex-start;
  width: 100%;

  column-gap: 0.75rem;
}

.employee-other-info p {
  color: rgba(255, 255, 255, 0.7);
  color: color(display-p3 1 1 1 / 0.7);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.7884rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}