:root {
  --nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
  --nc-tx-1: #000000; --nc-tx-2: #1A1A1A; --nc-bg-1: #FFFFFF; --nc-bg-2: #F6F8FA; --nc-bg-3: #E5E7EB; --nc-lk-1: #0070F3; --nc-lk-2: #0366D6; --nc-lk-tx: #FFFFFF; --nc-ac-1: #79FFE1; --nc-ac-tx: #0C4047;
  --programming-color: blue;
  --csharp-color: #9e0cf5;
  --react-color: #f17829;
  --leadershipintech-color: salmon;
}

* { margin: 0; padding: 0; }
address, area, article, aside, audio, blockquote, datalist, details, dl, fieldset, figure, form, input, iframe, img, meter, nav, ol, optgroup, option, output, p, pre, progress, ruby, section, table, textarea, ul, video { margin-bottom: 1rem; }
::selection { background: var(--nc-ac-1); color: var(--nc-ac-tx); }
a, a:active, a:visited { color: var(--nc-lk-1); }
a:hover { color: var(--nc-lk-2); }
h1, h2, h3, h4, h5, h6 { line-height: 1; color: var(--nc-tx-1); padding-top: .875rem; }
h1, h2, h3 { color: var(--nc-tx-1); padding-bottom: 2px; margin-bottom: 8px; border-bottom: 1px solid var(--nc-bg-2); }
h1 { font-size: 2.25rem; }
h1 a { text-decoration: none; }
h2 { font-size: 1.85rem; }
h3 { font-size: 1.55rem; }
abbr, abbr:hover { cursor: help; }
blockquote { padding: 1.5rem; background: var(--nc-bg-2); border-left: 5px solid var(--nc-bg-3); }
blockquote *:last-child { padding-bottom: 0; margin-bottom: 0; }
html, input, select, button { font-family: var(--nc-font-sans); }
fieldset { margin-top: 1rem; padding: 2rem; border: 1px solid var(--nc-bg-3); border-radius: 4px; }
legend { padding: auto .5rem; }
textarea { max-width: 100%; }
textarea, select, input { padding: 6px 12px; margin-bottom: 1rem; background: var(--nc-bg-2); color: var(--nc-tx-2); border: 1px solid var(--nc-bg-3); border-radius: 4px; box-shadow: none; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
a button, button, input[type="submit"], input[type="reset"], input[type="button"] { font-size: 1rem; display: inline-block; padding: 0.75rem 1rem; text-align: center; text-decoration: none; white-space: nowrap; background: var(--nc-lk-1); color: var(--nc-lk-tx); border: 0; border-radius: 4px; box-sizing: border-box; cursor: pointer; color: var(--nc-lk-tx); }
a button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] { cursor: default; opacity: .5; cursor: not-allowed; }
.button:focus, .button:enabled:hover, button:focus, button:enabled:hover, input[type="submit"]:focus, input[type="submit"]:enabled:hover, input[type="reset"]:focus, input[type="reset"]:enabled:hover, input[type="button"]:focus, input[type="button"]:enabled:hover { background: var(--nc-lk-2); }
input[type="button"].secondary, input[type="submit"].secondary, button.secondary { background: var(--nc-bg-3); color: var(--nc-tx-2); &:focus, &:hover { color: var(--nc-lk-tx); } }
code, pre, kbd, samp { font-family: var(--nc-font-mono); }
code, samp, kbd, pre { background: var(--nc-bg-2); border: 1px solid var(--nc-bg-3); border-radius: 4px; padding: 3px 6px; font-size: 0.9em; }
kbd { border-bottom: 3px solid var(--nc-bg-3); }
pre { padding: 1rem 1.4rem; max-width: 100%; overflow: auto; }
pre code { background: inherit; font-size: inherit; color: inherit; border: 0; padding: 0; margin: 0; }
code pre { display: inline; background: inherit; font-size: inherit; color: inherit; border: 0; padding: 0; margin: 0; }
details { padding: .6rem 1rem; background: var(--nc-bg-2); border: 1px solid var(--nc-bg-3); border-radius: 4px; }
summary { cursor: pointer; font-weight: bold; }
details[open] { padding-bottom: .75rem; }
details[open] summary { margin-bottom: 6px; }
details[open]>*:last-child { margin-bottom: 0; }
dt { font-weight: bold; }
dd::before { content: '→ '; }
hr { border: 0; border-bottom: 1px solid var(--nc-bg-3); margin: 1rem auto; }
ol, ul { padding-left: 2rem; }
li { margin-top: .4rem; }
ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; }
img { max-width: 100%; }
mark { padding: 3px 6px; background: var(--nc-ac-1); color: var(--nc-ac-tx); }
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid var(--nc-bg-3); text-align: left; padding: .5rem; }
th { background: var(--nc-bg-2); }
tr:nth-child(even) { background: var(--nc-bg-2); }
tbody tr:hover, tbody tr:nth-child(even):hover { background-color: var(--nc-bg-3); }
table caption { font-weight: bold; margin-bottom: .5rem; }

/* custom styling */

body { font-size: 16px; margin: 1rem; font-family: var(--nc-font-sans); }
header { background: var(--nc-bg-2); border-bottom: 1px solid var(--nc-bg-3); padding: 1rem; margin: -1rem -1rem 1rem -1rem; }
.dev header { background: lightgreen; }
header nav { display: flex; justify-content: space-between; }
header nav a { text-decoration: none; }
header > *:last-child { margin-bottom: 0; }

form { max-width: 750px; }
textarea, input[type="text"], input[type="date"], select, input[type="email"], input[type="password"], input[type="file"], input[type="datetime-local"], input[type="number"] { display: block; width: 100%; font-size: 100%; }
fieldset { width: 100%; }

a.current { text-decoration: none; color: #000000; }
a.action { text-decoration: none; color: grey; }

.success, .error { padding: 1.5rem; border-left: 5px solid var(--nc-bg-3); }
.success { background-color: #f2f9ef; border-color: #090 }
.error { background-color: #fdf7f7; border-color: #d9534f;}
.danger { background-color: #d9534f; }
.danger:enabled:hover { background-color: #c24f4c; }

.inline { display: inline; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mb { margin-bottom: 1rem; }
.no-mb { margin-bottom: 0; }
.none { display: none; }
.max-width { max-width: 750px; }
.scroll { display: block; overflow-x: auto; }
.text-clip { text-overflow: clip; overflow: hidden; white-space: nowrap; }
.text-red { color: red; }
.text-green { color: green; }
.text-muted { color: var(--nc-tx-2); }
.bg-pink { background-color: #fdf2f2; }
.bg-orange { background-color: #fff2c9; }
.small { font-size: 85% }

.row {
  display: flex;
  > * { margin-right: 0.5em; }
  > :last-child { margin-right: 0; }

  input[type="submit"] { margin-bottom: 1rem; }
}

input[type="radio"], input[type="checkbox"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  width: auto;
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
}

.row.equal > * { flex: 1; min-width: 0; }

.middot {
  > *::after { content: " · "; }
  > :last-child::after { content: ""; }
}

.chart { max-width: 750px; margin-bottom: 1rem; }

.list { padding: 2px 4px; display: inline-block; color: #fff; font-weight: bold; }
.list a { color: #fff !important; text-decoration: none; }

table.sponsorships {
  font-size: 0.85em;
  thead tr:first-child th { position: sticky; top: 0; }
  th, td { padding: 3px; height: 2.25rem; }
  tr:nth-child(even) { background-color: var(--nc-bg-1); }
  tr:nth-child(even):hover { background-color: var(--nc-bg-3); }
  .past { background-color: var(--nc-bg-2); }
  .available { color: #28a745; font-size: 0.8em; }
  .missed { color: #6c757d; font-size: 0.8em; }
}

.programming {
  h1, a, a:visited, a:active { color: var(--programming-color); }
  .list { background: var(--programming-color); }
}

.react {
  h1, a, a:visited, a:active { color: var(--react-color); }
  .list { background: var(--react-color); }
}

.csharp {
  h1, a, a:visited, a:active { color: var(--csharp-color); }
  .list { background: var(--csharp-color); }
}

.leadershipintech {
  h1, a, a:visited, a:active { color: var(--leadershipintech-color); }
  .list { background: var(--leadershipintech-color); }
}

.article-category form {
  display: inline-block; margin-left: 0.75em; margin-top: 1em;
  &:first-child { margin-left: 0 }
}

.tox-tinymce { margin-bottom: 1em; }

.pagy { margin-top: 2em; text-align: center; }
.pagy a { margin-right: 0.5em; border: 1px solid var(--nc-bg-3); border-radius: 3px; background-color: var(--nc-bg-2); display: inline-block; padding: 2px 6px; }
.pagy a[aria-current] { color: #000000; background-color: var(--nc-bg-1); }

/* Deals & Tasks CRM */

body.deals-index { overflow-x: auto; }

.kanban-board {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: max-content;
  padding-bottom: 1rem;
}

.kanban-column {
  width: 220px;
  min-width: 220px;
  background: var(--nc-bg-2);
  border: 1px solid var(--nc-bg-3);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  transition: background 0.15s;
  &.drag-over { background: var(--nc-ac-1); border-color: var(--nc-ac-tx); }
}

.kanban-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--nc-bg-3);
}

.kanban-column-title {
  font-weight: bold;
  font-size: 0.82em;
  color: var(--nc-tx-2);
}

.kanban-count {
  background: var(--nc-bg-3);
  color: var(--nc-tx-2);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.78em;
  font-weight: bold;
}

.kanban-cards {
  flex: 1;
  padding: 8px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kanban-drop-placeholder { flex: 1; min-height: 20px; }

.kanban-card {
  background: var(--nc-bg-1);
  border: 1px solid var(--nc-bg-3);
  border-radius: 4px;
  padding: 8px 10px;
  cursor: grab;
  color: var(--nc-tx-2);
  transition: box-shadow 0.15s, opacity 0.15s;
  margin-bottom: 0;
  &:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
  &.dragging { opacity: 0.4; cursor: grabbing; }
}

.kanban-card-title {
  font-size: 0.9em;
  font-weight: 500;
  margin-bottom: 4px;
  > a { text-decoration: none; color: var(--nc-tx-1); }
  > a:hover { color: var(--nc-lk-1); }
}

.kanban-card-meta { margin-bottom: 4px; }

.kanban-card-next-task {
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &.kanban-card-next-task--overdue { color: red; }
}

.kanban-card-next-task-title { opacity: 0.7; }

.kanban-card-created {
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0.6;
  margin-top: 5px;
  &:hover { opacity: 1; }
}

.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
}

.kanban-card-value { font-weight: bold; }

.kanban-column-footer {
  padding: 6px 10px 8px;
  border-top: 1px solid var(--nc-bg-3);
  font-size: 0.82em;
}

.tasks-table {
  margin-bottom: 0.5rem;
  td { border: none; border-bottom: 1px solid var(--nc-bg-3); vertical-align: middle; }
  tr:nth-child(even) { background: var(--nc-bg-1); }
  tr:hover, tr:nth-child(even):hover { background: var(--nc-bg-2); }
}

.tasks-table-completed {
  opacity: 0.55;
  td { text-decoration: line-through; }
}

.task-check,
.task-uncheck {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  line-height: 1.4em;
  text-align: center;
  border: 1px solid var(--nc-bg-3);
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.85em;
}
.task-check { color: var(--nc-bg-3); &:hover { border-color: green; color: green; } }
.task-uncheck { &:hover { border-color: var(--nc-lk-1); color: var(--nc-lk-1); } }

.task-complete-btn { width: 2rem; }

.task-title { font-size: 0.95em; }

.task-context { white-space: nowrap; }

.task-due { white-space: nowrap; width: 5rem; }

.task-actions { width: 4rem; white-space: nowrap; }

.task-complete td { opacity: 0.5; text-decoration: line-through; }

@media (max-width: 750px) {
  .hide-small { display: none; }
  .row.equal { display: block; }
}

@media (min-width: 1512px) {
  .campaign-form {
    width: 100%; max-width: 100%;
    .fields { display: flex }
    .metadata { width: 500px; }
    .content { padding-left: 15px; width: calc(100% - 525px); max-width: 950px; }
    .sm { display: none; }
    .xl { display: block; }
  }
}

@media (max-width: 1511px) {
  .campaign-form {
    .fields { display: block; }
    .sm { display: block; }
    .xl { display: none; }
  }
}