@import url("fonts/fonts.css");
/* --- variables --- */
:root {
  --brandprimary: #244762;
  --brandsecondary: #1795c1;
  --brandcontrast: #ffffff;
  --brandhighlight: #1795c1;
  --pagebackground: #ffffff;
  --bodytext: #222222;
  --basic: #e86060;
  --occupational: #f26e25;
  --therapy: #f4a20f;
  --training: #aac928;
  --proact: #67c454;
  --behavioural: #40bfa8;
  --administration: #34bccf;
  --quality: #35aed8;
  --specialisms: #3a90dd;
  --nursing: #857cd6;
  --manager: #d667bf;
  --unavailable: #dddddd;
  --bodyfont: 'Figtree', Arial, Sans-serif;
  --bodyweight: 400;
  --basesize: 0.9vw;
  --iconfont: 'Breeicons'; }

/* --- reset --- */
@-ms-viewport {
  width: device-width; }
*,
*:before,
*:after {
  box-sizing: border-box; }

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-decoration: none;
  outline: none; }

input:not(.special), textarea, button, select {
  appearance: none;
  border: none;
  outline: none; }

::-moz-selection, ::selection {
  background-color: rgba(0, 0, 0, 0.1); }

h1, h2, h3, h4, h5, h6, p, ul, ol {
  display: block;
  margin-top: 0;
  position: relative; }
  h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child {
    margin-bottom: 0; }

h1 {
  font-size: 3.6em; }

h2 {
  font-size: 3.4em; }

h3 {
  font-size: 2.8em; }

h4 {
  font-size: 2.2em; }

h5 {
  font-size: 2em; }

h6 {
  font-size: 1.6em; }

p, ul, ol {
  font-size: 1em;
  font-weight: var(--bodyweight); }

hr {
  border: 0;
  border-top: 1px solid #dddddd;
  margin: 1.5em 0 2.2em 0; }

button {
  font-family: var(--bodyfont);
  font-size: 1em;
  font-weight: 400;
  padding: 0.8em 2em;
  border-radius: 1.6em;
  background-color: var(--brandsecondary);
  color: var(--brandcontrast);
  cursor: pointer; }
  button.secondary {
    background-color: #999999; }
  button.highlighted {
    font-size: 1.3em;
    background-color: #c1172e; }

input[type="text"],
input[type="number"],
select,
textarea {
  font-family: var(--bodyfont);
  font-size: 1em;
  padding: 0.8em 1em;
  border-radius: 0.7em;
  background-color: #ffffff; }

select {
  background-image: url("../graphics/dropdown.svg");
  background-position: right 1em center;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-right: 2.4em;
  padding-left: 1.2em;
  border-radius: 2em; }

html, body {
  width: 100%;
  margin: 0;
  font-size: var(--basesize);
  scrollbar-width: thin; }
  html::-webkit-scrollbar, body::-webkit-scrollbar {
    width: 9px; }
  html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
    background-color: #eeeeee; }
  html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
    background-color: var(--brandsecondary);
    border: transparent; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-family: var(--bodyfont);
  font-weight: 300;
  font-style: normal;
  background-color: var(--pagebackground);
  color: var(--bodytext);
  line-height: 1.3; }

header {
  display: flex;
  align-items: center;
  padding: 0.7em;
  gap: 0.5em;
  background-color: #f4f4f4; }
  header img#logo {
    height: 2.5em;
    margin-right: auto; }

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: 1em;
  container-type: inline-size; }

/* --- layout --- */
div.role {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 0 1em;
  line-height: 1.1;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  z-index: 0;
  clip-path: polygon(-0.7lh 1.4lh, 0.7lh 0, 100% 0, 100% calc(100% - 0.7lh), calc(100% - 0.7lh) 100%, -0.7lh 100%); }
  div.role.basic {
    background-color: var(--basic); }
  div.role.occupational {
    background-color: var(--occupational); }
  div.role.therapy {
    background-color: var(--therapy); }
  div.role.training {
    background-color: var(--training); }
  div.role.proact {
    background-color: var(--proact); }
  div.role.behavioural {
    background-color: var(--behavioural); }
  div.role.administration {
    background-color: var(--administration); }
  div.role.quality {
    background-color: var(--quality); }
  div.role.specialisms {
    background-color: var(--specialisms); }
  div.role.nursing {
    background-color: var(--nursing); }
  div.role.manager {
    background-color: var(--manager); }
  div.role.starter:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #222222;
    clip-path: polygon(0 0.7lh, 0.7lh 0, 100% 0, 100% calc(100% - 0.7lh), calc(100% - 0.7lh) 100%, 0 100%, 0 0.7lh, var(--border-thickness) calc(0.7lh + (var(--border-thickness)/2.415)), var(--border-thickness) calc(100% - var(--border-thickness)), calc(100% - 0.7lh - (var(--border-thickness)/2.415)) calc(100% - var(--border-thickness)), calc(100% - var(--border-thickness)) calc(100% - 0.7lh - (var(--border-thickness)/2.415)), calc(100% - var(--border-thickness)) var(--border-thickness), calc(0.7lh + (var(--border-thickness)/2.415)) var(--border-thickness), var(--border-thickness) calc(0.7lh + (var(--border-thickness)/2.415))); }
  div.role.selected, div.role.available {
    z-index: 2; }

#pathway-grid {
  --border-thickness: 0.2em;
  display: grid;
  position: relative;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 4.2em;
  /* height of tiles */
  gap: 0.9em;
  align-self: center;
  align-content: center;
  flex: 1;
  width: 100em;
  /* modes */ }
  #pathway-grid > a {
    grid-column: auto / span 2;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--bodytext);
    background-color: #ededed;
    padding: 1em;
    border: 0 solid transparent;
    gap: 1em;
    z-index: 0; }
    #pathway-grid > a span {
      flex: 1; }
    #pathway-grid > a:before, #pathway-grid > a:after {
      font-family: var(--iconfont);
      color: #afafaf; }
    #pathway-grid > a.up:after {
      content: '\2227';
      font-size: 2em; }
    #pathway-grid > a.down:before {
      content: '\2228';
      font-size: 2em; }
    #pathway-grid > a.left:before {
      content: '\002B';
      font-size: 1.6em; }
    #pathway-grid > a.right:after {
      content: '\2192';
      font-size: 1.6em; }
    #pathway-grid > a.basic {
      border-color: var(--basic); }
    #pathway-grid > a.occupational {
      border-color: var(--occupational); }
    #pathway-grid > a.therapy {
      border-color: var(--therapy); }
    #pathway-grid > a.training {
      border-color: var(--specialisms); }
    #pathway-grid > a.proact {
      border-color: var(--proact); }
    #pathway-grid > a.behavioural {
      border-color: var(--behavioural); }
    #pathway-grid > a.administration {
      border-color: var(--administration); }
    #pathway-grid > a.quality {
      border-color: var(--quality); }
    #pathway-grid > a.specialisms {
      border-color: var(--specialisms); }
    #pathway-grid > a.nursing {
      border-color: var(--nursing); }
    #pathway-grid > a.manager {
      border-color: var(--manager); }
  #pathway-grid > button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 2em;
    font-weight: 500;
    border-radius: 0;
    color: #9b9b9b;
    background-color: transparent;
    background-image: url("../graphics/add-box.svg");
    background-size: 100% 100%;
    opacity: 0;
    pointer-events: none; }
  #pathway-grid > a + button:first-of-type, #pathway-grid > a + div:first-of-type {
    grid-column: 1; }
  #pathway-grid.editing .role.available:before {
    content: '';
    position: absolute;
    display: block;
    width: 1.2em;
    height: 1.2em;
    left: -0.6em;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("../graphics/add.svg");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0.2em;
    background-color: var(--bodytext);
    color: #ffffff;
    font-weight: 500;
    clip-path: none; }
  #pathway-grid.editing .role:not(.selected):not(.available) {
    background-color: var(--unavailable); }
  #pathway-grid.editing > a.available {
    border-width: var(--border-thickness); }
  #pathway-grid.admin > button {
    opacity: 1;
    pointer-events: all;
    cursor: pointer;
    z-index: 2; }
  #pathway-grid.admin .role {
    z-index: 2; }
  #pathway-grid.admin .role.starter:after {
    content: none; }
  #pathway-grid.built .role:not(.selected) {
    background-color: var(--unavailable); }

/* pathway line overlay */
#pathway-line-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1; }

/* sheets */
.sheet {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 100vw;
  width: 54em;
  max-width: 90vw;
  height: 100dvh;
  font-size: 1vw;
  padding: 2.8em 4em;
  z-index: 10;
  overflow-y: auto;
  opacity: 0;
  background-color: #f5f6f7;
  box-shadow: -0.5em 0 1em rgba(0, 0, 0, 0.2);
  transform: translateX(0);
  transition: opacity 0.1s linear, transform 0.3s cubic-bezier(0, 0.5, 0.5, 1); }
  .sheet.open {
    opacity: 1;
    transform: translateX(-100%); }
  .sheet button.close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.8em;
    left: 0.8em;
    font-size: 1.4em;
    padding: 0;
    font-family: var(--iconfont);
    background-color: transparent;
    color: var(--bodytext);
    opacity: 0.3;
    cursor: pointer; }
    .sheet button.close.hover {
      opacity: 0.7; }
  .sheet h2 {
    font-size: 2.2em;
    color: var(--brandsecondary); }
  .sheet h4 {
    font-size: 1.6em;
    margin-bottom: 0.8em;
    margin-top: 1.5em; }
  .sheet hr + h4 {
    margin-top: 0; }
  .sheet > ul {
    padding-left: 1.2em;
    margin-bottom: 0; }
    .sheet > ul li {
      margin-bottom: 1em; }
  .sheet .form {
    display: grid;
    grid-template-columns: 9em auto;
    align-items: center;
    gap: 1.2em; }
    .sheet .form label {
      font-size: 1.05em;
      font-weight: 700; }
    .sheet .form input,
    .sheet .form select,
    .sheet .form div.radio-group,
    .sheet .form ul,
    .sheet .form > button {
      grid-column-start: 2; }
    .sheet .form ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      align-self: start;
      padding: 1em 0.7em 0 0.7em;
      gap: 0.1em;
      margin: 0; }
      .sheet .form ul li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1.05em;
        gap: 0.5em;
        color: var(--brandsecondary);
        font-weight: 700; }
        .sheet .form ul li button.delete {
          font-family: var(--iconfont);
          font-size: 1.5em;
          padding: 0 0.3em;
          background-color: transparent;
          color: var(--bodytext);
          opacity: 0.4;
          cursor: pointer; }
          .sheet .form ul li button.delete.hover {
            opacity: 0.7; }
          .sheet .form ul li button.delete:hover {
            opacity: 1; }
    .sheet .form label:has(+ ul) {
      align-self: start;
      padding-top: 1em; }
    .sheet .form div.radio-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 2em; }
    .sheet .form input[type="radio"] {
      display: none; }
    .sheet .form label:has(+ input[type="radio"]) {
      display: flex;
      align-items: center;
      gap: 0.5em;
      font-size: 1em;
      font-weight: var(--bodyweight);
      cursor: pointer; }
      .sheet .form label:has(+ input[type="radio"]):after {
        content: '';
        width: 1.3em;
        height: 1.3em;
        background-color: #ffffff;
        outline: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 1em;
        margin: 0; }
      .sheet .form label:has(+ input[type="radio"]):has(+ input[type="radio"]:checked):after {
        background-color: #1795c1;
        border: 0.3em solid #ffffff; }
  .sheet button#add-progression, .sheet button.add-pathway-role {
    padding: 0;
    width: 2em;
    height: 2em;
    background-image: url("../graphics/add.svg");
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    font-weight: 400; }
  .sheet .buttongroup {
    display: flex;
    gap: 0.5em;
    margin-top: auto;
    padding-top: 2em;
    justify-content: flex-end; }
    .sheet .buttongroup.centered {
      justify-content: center; }
  .sheet .role {
    width: 13em;
    aspect-ratio: 8 / 3; }
    .sheet .role.current {
      font-size: 1.6em;
      margin-bottom: 1.5em; }
  .sheet .pathway {
    display: flex;
    align-items: center;
    position: relative;
    gap: 1.4em;
    width: fit-content;
    margin-bottom: 1.4em;
    padding-left: 1.4em; }
    .sheet .pathway:before {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: 0;
      border-top: 2px solid #444444; }
    .sheet .pathway:after {
      content: '';
      position: absolute;
      left: 100%;
      width: 1.5em;
      height: 0;
      border-top: 2px dashed #b2b2b2; }

input[type="radio"] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 1em;
  margin: 0;
  cursor: pointer;
  line-height: normal;
  box-sizing: border-box;
  padding: 0;
  font-family: inherit;
  font-size: inherit; }

/* Modals */
.modal {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 100vw;
  width: 100vw;
  min-height: 100dvh;
  padding: 1em;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0, 0.5, 0.5, 1); }
  .modal > div {
    display: flex;
    flex-direction: column;
    position: relative;
    font-size: 1vw;
    width: 50em;
    overflow-y: auto;
    padding: 2.8em 4em;
    background-color: #ffffff;
    border-radius: 1em;
    box-shadow: 0 0.3em 1.2em rgba(0, 0, 0, 0.3);
    transform: scale(0.5);
    transition: transform 0.2s cubic-bezier(0, 0.5, 0.5, 1); }
  .modal.open {
    left: 0;
    z-index: 15;
    opacity: 1; }
    .modal.open > div {
      transform: scale(1); }
  .modal button.close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.8em;
    right: 0.8em;
    font-size: 1.4em;
    padding: 0;
    font-family: var(--iconfont);
    background-color: transparent;
    color: var(--bodytext);
    opacity: 0.3;
    cursor: pointer; }
    .modal button.close.hover {
      opacity: 0.7; }
  .modal h2 {
    font-size: 2.2em;
    color: var(--brandsecondary); }
  .modal h4 {
    font-size: 1.6em;
    margin-bottom: 0.8em;
    margin-top: 1.5em; }
  .modal hr + h4 {
    margin-top: 0; }
  .modal > ul {
    padding-left: 1.2em;
    margin-bottom: 0; }
    .modal > ul li {
      margin-bottom: 1em; }
  .modal .buttongroup {
    display: flex;
    gap: 0.5em;
    margin-top: auto;
    padding-top: 2em;
    justify-content: flex-end; }

.validation-summary {
  display: none;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #d13438;
  background: #fde7e9;
  color: #a4262c; }

.validation-summary ul {
  margin: 0;
  padding-left: 1.25rem; }

.example-header {
  display: flex;
  /*justify-content: space-between;*/
  align-items: center; }

.remove-pathway-example {
  background: transparent;
  color: inherit;
  border: 0;
  padding: 0;
  font-size: 1.5rem;
  min-width: auto;
  cursor: pointer;
  padding: 0 0.3em;
  opacity: 0.4;
  transition: opacity .2s ease; }

.remove-pathway-example:hover {
  opacity: 1; }

#pathway-examples {
  grid-column-start: 2; }

input, textarea {
  color: #2b3e50; }

.help-block {
  font-size: 1em; }

.bs-example {
  max-width: 30em;
  margin: 0 auto;
  border: none !important; }

.form-group {
  display: grid;
  grid-template-columns: 6em 1fr;
  align-items: center;
  margin-bottom: 15px; }

.bs-example .form-group label {
  margin-bottom: 0; }

.bs-example .form-group input[type="text"], .bs-example .form-group input[type="password"] {
  width: 100% !important;
  padding: 0.2em;
  border-radius: inherit; }

a.btn, div.btn, input.btn, label.btn, button.btn {
  display: inline-block;
  padding: 0.4em 1em 0.6em 1em;
  border: none;
  border-radius: 0;
  font-family: "Figtree", Arial, Sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer; }

/*# sourceMappingURL=pathways.css.map */