* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background-color: #ccc;
  font-size: 16px;
  font-family: Lato,system-ui,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  margin: 0;
  padding: 0;
  height: 100%;
}
h1 {
  margin: 0;
}
nav {
  padding: 8px;
}
nav a {
  margin: 0 8px;
}
nav a.text {
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
nav a.text:hover {
  text-decoration: underline;
}
.w-full {
  width: 100%;
}
.padded {
  padding: 8px;
}
.float-right {
  float: right;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.inline_block {
  display: inline-block;
}
.job {
  margin-bottom: 10px;
  padding: 8px;
}
.location {
  display: inline-block;
  font-size: 16px;
}
.pay_range {
  font-size: 16px;
}
input[type=text], input[type=email], input[type=password], select {
  border-radius: 4px;
  border: 1px solid #333;
  background-color: #ddd;
  padding: 8px;
}
input[type=checkbox] {
  margin: 6px;
}
textarea {
  padding: 4px;
  width: 100%;
  height: 300px;
  max-width: 1200px;
}
.field.error label {
  color: #f00;
  font-weight: 500;
}
.field.error input,
.field.error textarea
{
  border: 1px solid #f00;
}

.button {
  border-radius: 4px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .3s ease;
}
.button.green {
  background: #1c8234;
}
.button.red {
  background: #f00;
}
.button.green:not(:disabled):hover {
  background: #07661e;
}
.button.blue {
  background: #1c4482;
}
.button.blue:not(:disabled):hover {
  background: #275aaa;
}
.button.gray {
  background: #6a6363;
}
.button.gray:not(:disabled):hover {
  background: #8c8484;
}
.button:disabled {
  cursor: default;
  opacity: 0.4;
}

.success {
  color: #1c8234;
  font-weight: 700;
}

.header {
  grid-area: header;
  font-weight: 700;
  background: #ccc;
}

.job_grid > div > div {
  padding: 10px;
}
.job_grid > div:nth-child(1) > div {
  font-weight: 700;
}
.job_grid > div:nth-child(2n) > div {
  background-color: #eee;
}
.job_grid > div.footer > div {
  background: none;
}

.grid {
  display: grid;
}
.grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12,minmax(0,1fr)); }
.col-span-1 { grid-column: span 1/span 1; }
.col-span-2 { grid-column: span 2/span 2; }
.col-span-3 { grid-column: span 3/span 3; }
.col-span-4 { grid-column: span 4/span 4; }
.col-span-5 { grid-column: span 5/span 5; }
.col-span-6 { grid-column: span 6/span 6; }
.col-span-7 { grid-column: span 7/span 7; }
.col-span-8 { grid-column: span 8/span 8; }
.col-span-9 { grid-column: span 9/span 9; }
.col-span-10 { grid-column: span 10/span 10; }
.col-span-11 { grid-column: span 11/span 11; }
.col-span-12 { grid-column: span 12/span 12; }
.grid .field {
  padding: 12px 4px;
}

.job_form {
  min-width: 600px;
  max-width: 1200px;
  margin: auto;
}

.main_grid {
  display: flex;
}
.main_grid .content {
  flex-grow: 1;
}
.main_grid .sidebar {
  flex-shrink: 0;
  width: 320px;
}
.main_grid .sidebar fieldset {
  background-color: #ddd;
  border: 1px solid #999;
  border-radius: 8px;
  margin: 8px;
  padding: 0;
}
.main_grid .sidebar .field {
  margin-bottom: 8px;
}
.main_grid .sidebar .field:last-child {
  margin-bottom: 0px;
}
.main_grid .sidebar .label {
  font-size: 14px;
}
.main_grid .sidebar section {
  margin: 0;
  padding: 12px 8px;
}
/*.main_grid .sidebar section.green {
  background: #bde6bd;
}
.main_grid .sidebar section.yellow {
  background: #f9e5bf;
}
.main_grid .sidebar section.blue {
  background: #bdcbe6;
}
.main_grid .sidebar section.red {
  background: #f9bfbf;
}
.main_grid .sidebar section.purple {
  background: #e1bff9;
}*/
.main_grid .sidebar section h2 {
  font-size: 14px;
  border-bottom: 1px solid #777;
  padding-bottom: 4px;
  margin: 0 0 8px 0;
}

legend {
  text-transform: uppercase;
  font-size: 12px;
}

.tag {
  background: #717171;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  margin: 0 2px;
  white-space: nowrap;
}
.tag.pending {
  background: #ff983c;
}
.tag.active {
  background: #06b100;
}

.owner_actions {
  background: #ccc;
  border: 1px solid #999;
  border-radius: 4px;
  display: inline-block;
  float: right;
  padding: 8px;
  margin: 8px;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #020020;
    color: #eee;
  }

  a {
    color: #98ceff;
  }

  input[type=text], input[type=email], input[type=password], select, textarea {
    border: 1px solid #575686;
    background-color: #1c1b39;
    color: #fff;
  }

  .job_grid > div:nth-child(2n) > div {
    background-color: #4a487d;
  }

  .job_grid > div.footer > div {
    background: none;
  }

  .main_grid .sidebar fieldset {
    background-color: #242244;
  }

  .owner_actions {
    border: 1px solid #575686;
    background-color: #1c1b39;
  }
}