.ordinary-directory .employee-card {
  grid-template-rows: auto 92px auto auto auto;
}

.employee-salary-card {
  grid-column: 1 / -1;
  grid-row: auto;
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding: 13px 14px;
  color: #24203a;
  border: 1px solid rgba(79, 39, 213, 0.18);
  border-left: 3px solid #5a2cf5;
  border-radius: 5px;
  background: linear-gradient(135deg, #f7f5ff 0%, #eeebff 100%);
}

.employee-salary-card.is-loading {
  color: #716b87;
  border-left-color: #aaa4bb;
  background: #f4f2f8;
}

.employee-salary-card.is-loading > div,
.employee-salary-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.employee-salary-card span,
.employee-salary-card dt {
  color: #81799b;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.employee-salary-card-heading strong {
  color: #4f27d5;
  font-size: 15px;
  line-height: 1;
}

.employee-salary-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.employee-salary-card dl > div {
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(79, 39, 213, 0.12);
}

.employee-salary-card dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: #24203a;
  font-size: 11px;
  font-weight: 750;
}

.employee-salary-card p {
  margin: 0;
  font-size: 9px;
  line-height: 1.5;
}

.intern-card .employee-salary-card {
  grid-column: 1 / -1;
  grid-row: auto;
}

.intern-card .employee-salary-card.is-intern-salary {
  border-color: rgba(190, 126, 31, 0.22);
  border-left-color: #bd7e22;
  background: linear-gradient(135deg, #fffdf7 0%, #fff4dc 100%);
}

.intern-card .employee-salary-card.is-intern-salary .employee-salary-card-heading strong {
  color: #8a5512;
}

.intern-card .employee-salary-card.is-intern-salary p {
  color: #8a6a3e;
}

.employee-salary-fields {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(79, 39, 213, 0.18);
  border-left: 4px solid #5a2cf5;
  border-radius: 6px;
  background: linear-gradient(135deg, #f8f7ff, #f0edff);
}

.employee-salary-fields[hidden] {
  display: none !important;
}

.employee-salary-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
}

.employee-salary-heading h3 {
  margin: 4px 0 0;
  color: #1b1732;
  font-size: 18px;
}

.employee-salary-heading p {
  max-width: 510px;
  margin: 6px 0 0;
  color: #736d86;
  font-size: 10px;
  line-height: 1.6;
}

.employee-salary-total {
  min-width: 155px;
  padding: 11px 13px;
  border: 1px solid rgba(79, 39, 213, 0.16);
  border-radius: 5px;
  background: #fff;
  text-align: right;
}

.employee-salary-total span {
  display: block;
  color: #827b98;
  font-size: 9px;
}

.employee-salary-total strong {
  display: block;
  margin-top: 4px;
  color: #4f27d5;
  font-size: 18px;
}

.employee-salary-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  margin-top: 14px;
}

.employee-salary-inputs .field {
  min-width: 0;
  margin: 0;
}

.employee-salary-plus {
  display: grid;
  min-height: 42px;
  place-items: center;
  color: #5a2cf5;
  font-size: 17px;
  font-weight: 800;
}

#employee-performance-salary-field[hidden],
#employee-salary-plus[hidden],
#employee-intern-salary-rule[hidden] {
  display: none !important;
}

.employee-intern-salary-rule {
  display: block;
  margin-top: 12px;
  padding: 9px 11px;
  color: #74501c;
  border-left: 3px solid #bd7e22;
  background: rgba(255, 244, 220, 0.78);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.55;
}

.employee-salary-security {
  display: block;
  margin-top: 10px;
  color: #746d8a;
  font-size: 9px;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .ordinary-directory .employee-card {
    grid-template-rows: auto 92px auto auto auto;
  }

  .employee-salary-card dl,
  .employee-salary-heading,
  .employee-salary-inputs {
    grid-template-columns: 1fr;
  }

  .employee-salary-total {
    min-width: 0;
    text-align: left;
  }

  .employee-salary-plus {
    min-height: 16px;
  }
}

@media print {
  .employee-salary-card,
  .employee-salary-fields {
    display: none !important;
  }
}