/* This is the Underdark module CSS. Its structure is based on SMACSS. See
https://smacss.com for more info. */

/* ssh key */
textarea.sshkey,
pre.sshkey {
  word-break: break-all;
}
textarea.sshkey {
  font-family: monospace, monospace;
}

/* table */
td.number,
th.number {
  text-align: right;
}
td.number input {
  text-align: inherit;
}

/* sortable */
th.sortable > a,
th.ascending > a,
th.descending > a {
  color: transparent;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
}
th.sortable > a::before {
  content: url('data:image/svg+xml,<svg fill="%23000" viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><polygon points="0 -2.5, -2 -0.5, 2 -0.5"/><polygon points="0 2.5, -2 0.5, 2 0.5"/></svg>');
}
th.ascending > a::before {
  content: url('data:image/svg+xml,<svg fill="%23000" viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><polygon points="0 1, -2 -1, 2 -1"/></svg>');
}
th.descending > a::before {
  content: url('data:image/svg+xml,<svg fill="%23000" viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><polygon points="0 -1, -2 1, 2 1"/></svg>');
}

/* pros and cons list */
ul.pros,
ul.cons {
  font-size: .9375rem;
  color: #555;
  line-height: 1.6875rem;
  margin: 1rem 0;
  padding: .5rem 1rem .5rem 2.5rem;
  background-color: #f7f7f7;
  list-style: none;
}
ul.pros > li,
ul.cons > li {
  position: relative;
  margin: .5rem 0;
}
ul.pros > li > .fa,
ul.cons > li > .fa {
  font-size: 1rem;
  position: absolute;
  left: -1.5rem;
  width: 1.125rem;
  text-align: center;
  line-height: 1.6875rem;
}

/* pagination */
nav.pagination {
  text-align: center;
}
nav.pagination > ol {
  padding: 0;
}
nav.pagination > ol > li {
  display: inline-block;
}
/* nav.pagination > ol > li:not(:last-child) {
  margin-right: .5rem;
} */
nav.pagination > ol > li {
  margin: .125rem 0;
}
nav.pagination > ol > li.active,
nav.pagination > ol > li > a {
  padding: .25rem .75rem;
}
nav.pagination > ol > li > a {
  display: block;
  border: 1px solid rgb(0, 0, 0, .1);
}

/* form */
form.is-submitting [type="submit"],
form.is-submitting button:not([type]) {
  opacity: .2;
  cursor: default;
}

/* toggle */
input[type="checkbox"].toggle {
  opacity: 0;
}
input[type="checkbox"].toggle + label {
  text-indent: -9999em;
  display: inline-block;
  position: relative;
  left: -1em;
  width: 3em;
  height: 1.5em;
  border-radius: .75em;
  background-color: rgb(235, 35, 23);
  overflow: hidden;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  transition: background-color .2s;
  -webkit-transition: background-color .2s;
}
input[type="checkbox"].toggle:checked + label {
  background-color: rgb(35, 235, 23);
}
input[type="checkbox"].toggle[disabled] + label {
  opacity: .4;
  cursor: not-allowed;
}
input[type="checkbox"].toggle + label::after {
  content: '';
  position: absolute;
  left: .125em;
  top: .125em;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background-color: #fff;
  transition: transform .2s;
  -webkit-transition: -webkit-transform .2s;
}
input[type="checkbox"].toggle:checked + label::after {
  transform: translateX(1.5em);
  -webkit-transform: translateX(1.5em);
}
input[type="checkbox"].toggle:not([disabled]):hover + label::after,
input[type="checkbox"].toggle:not([disabled]):focus + label::after {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
  background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
  background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
  background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
  background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
input[type="checkbox"].toggle:active:not([disabled]):hover + label::after,
input[type="checkbox"].toggle:active:not([disabled]):focus + label::after {
  background-color: #eee;
}

/* editable */
div.editable {
  position: relative;
  overflow: hidden;
  transition: height .5s;
  -webkit-transition: height .5s;
}
div.editable > section {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
  transition-property: opacity, transform;
  -webkit-transition-property: opacity, -webkit-transform;
}
div.editable.is-editing > section:first-child,
div.editable:not(.is-editing) > section:nth-child(2) {
  opacity: 0;
}
div.editable.is-editing > section:first-child {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}
div.editable:not(.is-editing) > section:nth-child(2) {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}
div.editable > section button.edit {
  font-size: .875rem;
  /* position: absolute;
  top: 1rem;
  right: 5%; */
  float: right;
  min-width: 4rem;
  margin-top: 1rem;
}
div.editable > section button.view {
  margin-top: .5rem;
}

/* filter */
div.filter {
  text-align: right;
}

/* search */
body > header form.search > div:only-of-type > label,
body > footer form.search > div:only-of-type > label,
aside form.search > div:only-of-type > label,
nav form.search > div:only-of-type > label {
  position: absolute;
  visibility: hidden;
}
form.search > div > input {
  flex-basis: auto;
}
/* search */
/* TODO: Should be basic module style. Scoped to main for now */
main form.search > div:only-of-type > input[type="search"] {
  flex-basis: 100%;
}
main form.search > div:only-of-type > [type="submit"],
main form.search > div:only-of-type > .button {
  min-width: 6rem;
}
main form.search > div:only-of-type > .button {
  margin-left: .5rem;
}

/* search in body header */
body > header form.search > div:only-of-type > label {
  position: static; /* reset */
}

@media screen and (min-width: 40rem) {
  body > header > div > form.login + form.search {
    margin-right: 1rem;
  }
}

/* form.search {
  display: inline-block;
  float: right;
}
main > div > section > header > form.search > div,
main > div > section > header > form.search > p {
  display: inline-block;
} */

/* steps */
ol.steps {
  padding: 0;
  list-style: none;
}
ol.steps > li {
  display: inline-block;
  position: relative;
  margin: .125rem 0;
  vertical-align: top;
}
ol.steps > li > label {
  display: block;
  position: relative;
  margin: 0; /* TODO: Make default margin on labels way more specific and remove this */
  padding: 0 .5rem 0 1.75rem;
  background-color: rgba(0, 0, 0, .1);
}
ol.steps > li:not(:last-child) {
  margin-right: .5rem;
}

ol.steps > li > input[type="checkbox"] {
  position: absolute;
  left: .5rem;
  top: .3125rem;
  z-index: 1;
}
ol.steps > li:not(:first-child) > input[type="checkbox"] + label::before,
ol.steps > li:not(:last-child) > input[type="checkbox"] + label::after {
  position: absolute;
  width: .5rem;
  height: 1.5rem;
}
ol.steps > li:not(:first-child) > input[type="checkbox"] + label::before {
  content: url('data:image/svg+xml,<svg fill-opacity=".1" viewBox="0 0 8 24" xmlns="http://www.w3.org/2000/svg"><polygon points="0,-.5 8,-.5 8,24.5 0,24.5 8,12"/></svg>');
  left: -.5rem;
  top: 0;
}
ol.steps > li:not(:last-child) > input[type="checkbox"] + label::after {
  content: url('data:image/svg+xml,<svg fill-opacity=".1" viewBox="0 0 8 24" xmlns="http://www.w3.org/2000/svg"><polygon points="0,-.5 8,12 0,24.5"/></svg>');
  right: -.5rem;
  bottom: 0;
}

ol.steps > li > input[type="checkbox"]:disabled,
ol.steps > li > input[type="checkbox"]:disabled + label {
  position: absolute;
  visibility: hidden;
}

/* tabs */
.tabs {
  display: block !important; /* TODO: fix flexbox layout issues and selector specificity */
  border: 1px solid rgba(0, 0, 0, .05);
  background-color: rgba(0, 0, 0, .05);
}
.tabs > input[type="radio"] {
  display: none;
}

.tabs > label {
  float: left;
  margin: 0 !important; /* TODO: fix selector specificity */
  padding: .5em 1em;
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
}
.tabs > label:not(.is-active):focus,
.tabs > label:not(.is-active):hover {
  background-color: rgba(255, 255, 255, .5);
}
.tabs > label.is-active {
  color: inherit;
  background-color: #fff;
}

.tabs > div,
.tabs > section {
  clear: left; /* label float */
  padding: 1em;
  background-color: #fff;
}

.tabs > input[type="radio"]:not(:checked) + div,
.tabs > input[type="radio"]:not(:checked) + section {
  display: none;
}
/* tabs in table */
table .tabs > label {
  font-size: .875rem;
}
table .tabs > div,
table .tabs > section {
  padding: .5em;
}

/* toddler */
main.toddler > section {
  box-sizing: border-box;
}


@media screen and (min-width: 100rem) {
  div.editable > section > button.edit {
    right: 10%;
  }
}

/* modal */
.modal {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 1rem;
  z-index: 9999;
  box-sizing: border-box;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
}
.modal label[for^="modaltoggle"] {
  font-weight: bold;
  text-align: center;
  display: block;
  margin: 0 -1rem;
  padding: .5rem 1rem;
  background-color: #eee;
  -webkit-transition: background-color .1s;
  transition: background-color .1s;
}
.modal label[for^="modaltoggle"]::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .5);
  z-index: -1;
}
.modal label[for^="modaltoggle"]::hover {
  background-color: #ddd;
}
.modal > aside,
.modal > section {
  max-width: 30rem;
  margin: 0 auto;
  padding: 0 1rem;
  border-radius: .5rem;
  background-color: #fff;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
  overflow: hidden;
}
.modal > aside::before,
.modal > section::before {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  display: block;
  margin: 0 -1rem;
  padding: .75rem 1rem .75rem 3.25rem;
  background-position: 1rem center;
  background-repeat: no-repeat;
}
/* modal type */
.modal.success > aside::before,
.modal.success > section::before {
  content: 'Success';
  background-color: hsl(103, 44%, 49%);
  background-image: url('data:image/svg+xml,<svg fill="%23fff" height="24" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1412 734q0-28-18-46l-91-90q-19-19-45-19t-45 19l-408 407-226-226q-19-19-45-19t-45 19l-91 90q-18 18-18 46 0 27 18 45l362 362q19 19 45 19 27 0 46-19l543-543q18-18 18-45zm252 162q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
}
.modal.info > aside::before,
.modal.info > section::before {
  content: 'Information';
  background-color: hsl(200, 65%, 51%);
  background-image: url('data:image/svg+xml,<svg fill="%23fff" height="24" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1152 1376v-160q0-14-9-23t-23-9h-96v-512q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v160q0 14 9 23t23 9h96v320h-96q-14 0-23 9t-9 23v160q0 14 9 23t23 9h448q14 0 23-9t9-23zm-128-896v-160q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v160q0 14 9 23t23 9h192q14 0 23-9t9-23zm640 416q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
}
.modal.warning > aside::before,
.modal.warning > section::before {
  content: 'Warning';
  background-color: hsl(50, 81%, 54%);
  background-image: url('data:image/svg+xml,<svg fill="%23fff" height="24" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
}
.modal.error > aside::before,
.modal.error > section::before {
  content: 'Error';
  background-color: hsl(0, 43%, 51%);
  background-image: url('data:image/svg+xml,<svg fill="%23fff" height="24" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
}
[lang="nl"] .modal.success > aside::before,
[lang="nl"] .modal.success > section::before {
  content: 'Gelukt';
}
[lang="nl"] .modal.info > aside::before,
[lang="nl"] .modal.info > section::before {
  content: 'Informatie';
}
[lang="nl"] .modal.warning > aside::before,
[lang="nl"] .modal.warning > section::before {
  content: 'Waarschuwing';
}
[lang="nl"] .modal.error > aside::before,
[lang="nl"] .modal.error > section::before {
  content: 'Mislukt';
}
/* modal state */
.modaltoggle:not(:checked) + .modal {
  opacity: 0;
  pointer-events: none;
}

/* messages block (-like) */
p.primary,
tr.primary td,
tr.primary th,
td.primary,
th.primary,
button.primary,
input.primary,
mark.primary {
  color: #fff;
  background-color: hsl(208, 56%, 46%);
}
p.success,
tr.success td,
tr.success th,
td.success,
th.success,
input.success,
mark.success {
  background-color: hsl(103, 44%, 89%);
}
p.info,
tr.info td,
tr.info th,
td.info,
th.info,
input.info,
mark.info {
  background-color: hsl(200, 65%, 91%);
}
p.warning,
tr.warning td,
tr.warning th,
td.warning,
th.warning,
input.warning,
mark.warning {
  background-color: hsl(50, 81%, 94%);
}
p.error,
tr.error td,
tr.error th,
td.error,
th.error,
input.error,
mark.error {
  background-color: hsl(0, 43%, 91%);
}
/* messages p */
p.primary,
p.success,
p.info,
p.warning,
p.error {
  padding: 1em;
}
p.success::before,
p.info::before,
p.warning::before,
p.error::before {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-right: .5em;
  vertical-align: middle;
}
p.success::before {
  content: url('data:image/svg+xml,<svg viewBox="0 0 1792 1792" fill="%2365b345" xmlns="http://www.w3.org/2000/svg"><path d="M1412 734q0-28-18-46l-91-90q-19-19-45-19t-45 19l-408 407-226-226q-19-19-45-19t-45 19l-91 90q-18 18-18 46 0 27 18 45l362 362q19 19 45 19 27 0 46-19l543-543q18-18 18-45zm252 162q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
}
p.info::before {
  content: url('data:image/svg+xml,<svg viewBox="0 0 1792 1792" fill="%23309dd3" xmlns="http://www.w3.org/2000/svg"><path d="M1152 1376v-160q0-14-9-23t-23-9h-96v-512q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v160q0 14 9 23t23 9h96v320h-96q-14 0-23 9t-9 23v160q0 14 9 23t23 9h448q14 0 23-9t9-23zm-128-896v-160q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v160q0 14 9 23t23 9h192q14 0 23-9t9-23zm640 416q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
}
p.warning::before {
  content: url('data:image/svg+xml,<svg viewBox="0 0 1792 1792" fill="%23e8c92a" xmlns="http://www.w3.org/2000/svg"><path d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
}
p.error::before {
  content: url('data:image/svg+xml,<svg viewBox="0 0 1792 1792" fill="%23b74c4c" xmlns="http://www.w3.org/2000/svg"><path d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
}
/* messages button */
button.success,
input[type="button"].success {
  color: #fff;
  background-color: hsl(103, 44%, 49%);
}
button.info,
input[type="button"].info {
  color: #fff;
  background-color: hsl(200, 65%, 51%);
}
button.warning,
input[type="button"].warning {
  color: #fff;
  background-color: hsl(50, 81%, 54%);
}
button.error,
input[type="button"].error {
  color: #fff;
  background-color: hsl(0, 43%, 51%);
}
/* messages inline other */
label.primary,
dd.primary {
  color: hsl(208, 56%, 46%);
}
label.success,
dd.success {
  color: hsl(103, 44%, 49%);
}
label.info,
dd.info {
  color: hsl(200, 65%, 51%);
}
label.warning,
dd.warning {
  color: hsl(50, 81%, 54%);
}
label.error,
dd.error {
  color: hsl(0, 43%, 51%);
}

dl.details > dt {
  font-weight: bold;
}
dl.details > dd {
  margin: 0 0 .5rem;
}

@media screen and (min-width: 20rem) {
  dl.details::after {
    /* clearfix */
    content: '';
    display: table;
    clear: left;
  }
  /* NOTE: Floating dts won't work with long terms */
  dl.details > dt {
    clear: both;
    float: left;
    width: 38%;
    margin-bottom: .5rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  dl.details > dd {
    clear: right;
    float: right;
    width: 62%;
  }
}

/* dl.details > dd::before {
  content: '– ';
} */
/*
dl.details {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
dl.details > dt {
  font-weight: bold;
  width: 38%;
}
dl.details > dd {
  width: 62%;
  margin-left: 0;
}
dl.details > dt + dd {
}
dl.details > dd + dd {
  margin-left: 38%;

}
*/

/* vars */
dl.vars > dt {
  float: left;
}
dl.vars > dt::after {
  content: ': ';
  margin-right: .5rem; /* add margin because float eats the space */
}
dl.vars > dt var {
  font-style: inherit;
}
dl.vars > dd {
  margin: 0;
  word-break: break-all;
}

/* tree */
ul.tree,
ul.tree ul,
ul.tree li {
  position: relative;
}
ul.tree {
  list-style: none;
}
ul.tree ul {
  list-style: none;
  padding-left: 32px;
}
ul.tree li::before,
ul.tree li::after {
  content: "";
  position: absolute;
  left: -12px;
}
ul.tree li::before {
  border-top: 2px solid #9b9b9b;
  top: 11px;
  width: 8px;
}
ul.tree li::after {
  border-left: 2px solid #9b9b9b;
  height: 100%;
  padding-top: .5rem;
  top: -.25rem;
}
ul.tree ul > li:last-child::after {
  height: 8px;
}
ul.tree > li:last-child::after,
ul.tree > li:last-child::before {
  display: none;
}

/* scrollable (used for overflowing table) */
div.scrollable {
  overflow-x: auto;
}
div.scrollable + div.scrollable {
  margin-top: 1rem;
}
@media screen and (min-width: 30rem) {
  form > div.scrollable + [type="submit"] {
    margin-left: 0; /* reset */
  }
}