.employee-details-container {
  display: flex;
  column-gap: 2rem;
  width: 100%;
  position: relative;
}

.employee-details {
  flex: 9;
  height: 33.5625rem;
  border-radius: 0.9317rem;
  border: 0.1433rem solid #7da0ff;
  background: rgba(66, 157, 255, 0.16);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.employee-details.red{
  border: 0.1433rem solid #fb444d64;
  background: #fb444d33;
}
.employee-details.yellow{
  border: 0.1433rem solid #f68c457a;
  background: #f68c453c;
}
.employee-details.purple{
  border: 0.1433rem solid #a050f019;
  background: #a050f055;
}
.employee-details.green{
  border: 0.1433rem solid #026E0019;
  background: #026E0019;
}
.employee-details.black{
  border: 0.1433rem solid #00000019;
  background: #00000019;
}

.employee-fire-modal {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  align-items: center;
}

.employee-fire-modal-header {
  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;
  line-height: 143.836%;
  /* 2.1576rem */
}

.employee-fire-modal-container {
  width: 24.875rem;
  height: 19.6875rem;
  border-radius: 0.9375rem;
  border: 0.125rem solid rgba(255, 255, 255, 0.17);
  background: rgba(255, 73, 83, 0.3);
  backdrop-filter: blur(0.3125rem);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  row-gap: 1rem;
  align-items: center;
}

.employee-status-container {
  display: flex;
  column-gap: 1.5rem;
  width: 100%;
  height: 100%;
}

.employee-status {
  flex: 6;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.employee-status-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.online-text {
  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.7884rem;
  font-style: normal;
  font-weight: 600;
}

.offline-text{
  color: #FFA9AB;
  color: color(display-p3 0.6417 1 0.5833);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.7884rem;
  font-style: normal;
  font-weight: 600;
}

.employee-status-box-container {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  position: relative;
}

.employee-status-box-text {
  color: #fff;
  color: color(display-p3 1 1 1);
  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-status-box-small {
  border-radius: 0.4375rem;
  background: rgba(255, 255, 255, 0.2);
  width: 2.1875rem;
  height: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.employee-status-box {
  border-radius: 0.4375rem;
  background: rgba(255, 255, 255, 0.2);
  width: 100%;
  flex: 1;
  height: 1.875rem;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  column-gap: 0.5rem;
}

.employee-logs-container {
  flex: 6;
  display: flex;
  flex-direction: column;
  row-gap: 0.75rem;
}

.employee-logs-header {
  color: rgba(255, 255, 255, 0.6);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.employee-logs-scroll {
  width: 100%;
  flex: 11;
  overflow: auto;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.employee-log-date {
  color: rgba(255, 255, 255, 0.91);
  color: color(display-p3 1 1 1 / 0.91);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

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

.employee-logs {
  width: 100%;
  height: 23.875rem;
  border-radius: 0.4375rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  position: relative;
}

.employee-log {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.cancel-button {
  border-radius: 0.7445rem;
  border: 0.125rem solid rgba(0, 0, 0, 0.2);

  background: #fff;

  width: 55%;
  height: 3.0625rem;
  transition: all 0.2s ease;
  cursor: pointer;
  color: #060606;
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fire-button {
  border-radius: 0.7445rem;
  border: 0.1654rem solid rgba(0, 0, 0, 0.2);
  background: #ff4953;
  box-shadow: 0rem 0rem 4.6324rem 0rem rgba(255, 73, 83, 0.56);
  width: 6.9375rem;
  height: 3.0625rem;
  transition: all 0.2s ease;
  cursor: pointer;
  color: #fff;
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fire-button:hover {
  opacity: 0.9;
}

.cancel-button:hover {
  opacity: 0.9;
}

.employee-details-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.employee-note {
  flex: 4;

  height: 33.5625rem;
  border-radius: 0.9317rem;
  border: 0.1433rem solid #7da0ff;
  background: rgba(66, 157, 255, 0.16);
  position: relative;
  display: flex;
  justify-content: center;
}




.employee-note.red {
  border: 0.1433rem solid #fb444d64;
  background: #fb444d33;
}
.employee-note.yellow {
  border: 0.1433rem solid #f68c457a;
background: #f68c453c;
}
.employee-note.purple {
  border: 0.1433rem solid #a050f019;
  background: #a050f055;
}
.employee-note.green {
  border: 0.1433rem solid #026E0064;
  background: #026E0064;
}
.employee-note.black {
  border: 0.1433rem solid #00000064;
  background: #00000064;
}


.employee-note-icon {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}


.employee-no-note {
  appearance: none;
  background-color: transparent;
  outline: none;
  border: none;
  width: 100%;
  height: 76%;

  color: rgba(255, 255, 255,0.8);
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 1.1875rem;
  font-style: normal;
  font-weight: 500;
  padding:1rem;
  line-height: normal;
}

.employee-no-note::placeholder {
  color: rgba(255, 255, 255, 0.60);

}
.employee-note-button {
  width: 11.25rem;
  height: 2.5rem;
  cursor: pointer;
  transition: all .2s ease;
  position: absolute;
  left: 50%;
  bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  border-radius: 0.625rem;
  border: 0.1654rem solid rgba(0, 0, 0, 0.20);
  border: 0.1654rem solid color(display-p3 0 0 0 / 0.20);
  background: #75B7FF;
  background: color(display-p3 0.5167 0.71 1);
  box-shadow: 0rem 0rem 4.6324rem 0rem rgba(117, 183, 255, 0.35);
  box-shadow: 0rem 0rem 4.6324rem 0rem color(display-p3 0.5176 0.7098 1 / 0.35);
  color: #FFF;
  color: color(display-p3 1 1 1);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.employee-note-button.red {
  background-color: #FB444D;
}
.employee-note-button.yellow {
  background-color: #F68D45;

}
.employee-note-button.purple {
  background-color: #9F50F0;

}
.employee-note-button.green {
  background-color: #026E00;

}
.employee-note-button.black {
  background-color: #000;

}


.employee-note-button:hover {
  opacity: 0.9;
}