:root {
  --white: #ffffff;
  --silver: #eee;
  --gray: #ccc;
  --black: #000;
}
html,
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  background-color: var(--white);
  color: var(--black);
}
table td {
  background-color: var(--white);
  color: var(--black) !important;
}
.b-gray {
  border: 1px solid var(--gray);
}
.bg-gray,
.bg-100,
.bg-200 {
  background-color: var(--silver) !important;
  color: var(--black) !important;
}
table th,
.bg-100,
.mat-table th {
  background-color: var(--gray) !important;
  color: var(--white) !important;
}
td.current-leave {
  font-weight: bold;
}
.center {
  text-align: center;
  align-content: center;
  align-items: center;
  vertical-align: middle;
}
.w-full {
  width: 100%;
}
.p-4 {
  padding: 1em;
}
.px-2 {
  padding-left: 1em;
  padding-right: 1em;
}

h3 {
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
}
td.heading {
  background-color: var(--gray);
  color: var(--black);
  border: 1px solid var(--gray);
  padding-left: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
}
td.data {
  background-color: var(--white);
  color: var(--black);
  font-weight: normal;
  border: 1px solid var(--gray);
}
td.blank-line {
  background-color: var(--white);
  height: 20px;
  border: 0px solid var(--gray);
}
td.border-dotted {
  border-bottom: 1px solid var(--gray);
}
.text-2xl {
  font-size: 1.2rem;
}

td.current-leave::before {
  content: " ";
  background-image: url("/assets/chk.svg");
  color: #000;
  padding-right: 0.5em;
  width: 5px;
  height: 12px;
  display: inline-block;
}
.blank-line {
  height: 20px;
}
.small {
  font-size: 0.8rem;
}
.data-small {
  font-size: 0.8rem;
  background-color: var(--white);
  color: var(--black);
  font-weight: normal;
  border: 1px solid var(--gray);
}
.leave-types td.data-small {
  max-width: 75px;
}