.delete-button {
  cursor: pointer;
  border-radius: 0.7445rem;
  border: 0.1654rem solid rgba(0, 0, 0, 0.20);
  border: 0.1654rem solid color(display-p3 0 0 0 / 0.20);
  background: #454545;
  background: color(display-p3 0.2708 0.2708 0.2708);
  box-shadow: 0rem 0rem 4.6324rem 0rem rgba(69, 69, 69, 0.56);
  box-shadow: 0rem 0rem 4.6324rem 0rem color(display-p3 0.2706 0.2706 0.2706 / 0.56);
  width: 6.9375rem;
  height: 3.0625rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.40);
  color: color(display-p3 1 1 1 / 0.40);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 143.836%;
  /* 1.88788rem */
  transition: all .2s ease;
}

.click-on-rank {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  color: color(display-p3 1 1 1);
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  width: 100%;
}

.permission-pages {
  display: flex;
  align-items: center;
  column-gap: .75rem;
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background: rgba(117, 183, 255, 0.37);




  /* Not removed via appearance */
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: currentColor;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.1875rem;


  display: grid;
  place-content: center;
}


input[type="checkbox"].red {
  background: #fb444d45;

}

input[type="checkbox"].yellow {
  background: #f68c4536;

}

input[type="checkbox"].purple {
  background: #a050f02d;

}
input[type="checkbox"].green {
  background: #026E0045;

}
input[type="checkbox"].black {
  background: #00000045;

}
input[type="checkbox"]::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  /* Windows High Contrast Mode */
  background-color: #FFF;
}

input[type="checkbox"]:checked {
  background: #75B7FF;
}

input[type="checkbox"]:checked.red {
  background: #fb444d7a;

}

input[type="checkbox"]:checked.yellow {
  background: #f68c4570;

}

input[type="checkbox"]:checked.purple {
  background: #a050f070;

}

input[type="checkbox"]:checked.green {
  background: #026E0070;

}

input[type="checkbox"]:checked.black {
  background: #00000070;

}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.rank-permissions {
  width: 100%;
  height: 23.875rem;
  border-radius: 0.4375rem;
  background: rgba(117, 183, 255, 0.10);
  background: color(display-p3 0.5176 0.7098 1 / 0.10);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  position: relative;
}

.rank-permission {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .15rem 0;
}

.rank-permission p {
  color: #FFF;
  color: color(display-p3 1 1 1);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.78838rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.employee-list {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  padding: 1rem;
  overflow: auto;
}

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

.employee-view-button {
  width: 3.75rem;
  height: 2.4375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7445rem;
  border: 0.1654rem solid rgba(0, 0, 0, 0.20);
  background: #3E8FEF;
  box-shadow: 0rem 0rem 4.6324rem 0rem rgba(69, 69, 69, 0.56);
  color: #FFF;
  color: color(display-p3 1 1 1);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 600;
  line-height: 143.836%;
  cursor: pointer;
  /* 0.899rem */
  transition: all .2s ease;
}


.employee-view-button.red {
  background: #fb444d;

}
.employee-view-button.yellow {
  background: #f68c45;

}
.employee-view-button.purple {
  background: #a050f0;
}
.employee-view-button.green {
  background: #026E00;
}
.employee-view-button.black {
  background: #000;
}

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



.permission-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.87806rem;
  height: 3.87806rem;
  border-radius: 0.45244rem;
  background: rgba(255, 255, 255, 0.20);
  cursor: pointer;
  transition: all .2s ease;
}

.permission-box:hover {
  opacity: 0.9;
}

.permission-box.active {
  background: #75B7FF;
}

.permission-box.active.red {
  background: #fb444d;

}

.permission-box.active.purple {
  background: #a050f0;
}

.permission-box.active.yellow {
  background-color: #f68c45;
}
.permission-box.active.black {
  background: #000;

}.permission-box.active.green {
  background: #026E00;

}
.ranks-settings-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.delete-button:hover {
  opacity: 0.9;

}