body {
  --color-1: 242, 242, 242;
  --color-2: 166, 138, 86;
  --color-3: 38, 40, 64;
  --color-4: 99, 104, 191;
  --color-5: 30, 40, 217;
  --color-R: 200, 50, 50;
  --color-C: 235, 235, 235;
  --color-C2: 200, 200, 200;
  --button-font-family: Verdana,Arial,sans-serif;
  --form-field-height: 36px;
  color: rgb(var(--color-3));
  background-color: rgb(var(--color-1));
  font-family: Verdana, Arial, sans-serif;
  display: grid;
  grid-template-columns: [nav] 130px [body] 1fr;
  grid-template-areas: "nav con";
  margin: 0;
  min-height: 100vh;
}
body.no-scroll {
  overflow: hidden;
}
body > #main-nav {
  position: sticky;
  top: 0px;
  grid-area: nav;
  box-shadow: -1px 7px 21px 1px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: -1px 7px 21px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -1px 7px 21px 1px rgba(0, 0, 0, 0.75);
}
body > #contents {
  grid-area: con;
  margin: 0 1em;
}
body > #contents > h1 + .anchor {
  float: right;
  margin-top: -60px;
}
body > #overlay {
  display: grid;
  position: fixed;
  z-index: 2;
  grid-template-columns: 1fr max-content 1fr;
  grid-template-rows: 1fr max-content 1fr;
  grid-template-areas: ". . ." ". a ." ". . .";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(var(--color-3), 1);
}
body > #overlay > *:last-child {
  grid-area: a;
  z-index: 3;
  flex-grow: 1;
  flex-shrink: 1;
}
body > #overlay > *:not(:last-child) {
  display: none;
}
body > #overlay:empty {
  display: none;
}
body #footer {
  display: grid;
  grid-template-columns: [foo] 50% [bar] max-content [baz] max-content 1fr;
  grid-template-rows: max-content;
  margin: 10px 0;
}
body #footer > span:first-child {
  grid-column: foo;
  text-align: right;
  align-self: center;
}
body #footer > span:last-child {
  grid-column: baz;
  text-align: right;
  align-self: center;
}
body #footer > a {
  grid-column: bar;
}

.svg-logo {
  --logo-color: var(--color-1);
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1My4yODQgMTQuMjMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOTQuODM4IC0xMzMuNSkiPgoJCTxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSI+CgkJCTxyZWN0IHg9Ijk1LjU1MSIgeT0iMTM0LjIyIiB3aWR0aD0iMjAuMjQ2IiBoZWlnaHQ9IjEyLjgwNCIgcng9IjUuNDcwMSIgcnk9IjUuODk0MSIvPgoJCQk8cmVjdCB4PSIxMTEuMzYiIHk9IjEzNC4yMiIgd2lkdGg9IjIwLjI0NiIgaGVpZ2h0PSIxMi44MDQiIHJ4PSI1LjQ3MDEiIHJ5PSI1Ljg5NDEiLz4KCQkJPHJlY3QgeD0iMTI3LjE2IiB5PSIxMzQuMjIiIHdpZHRoPSIyMC4yNDYiIGhlaWdodD0iMTIuODA0IiByeD0iNS40NzAxIiByeT0iNS44OTQxIi8+CgkJPC9nPgoJCTxnIGZpbGw9ImN1cnJlbnRDb2xvciI+CgkJCTxwYXRoIGQ9Im0xMDQuNTggMTM2LjA5Yy0xLjM5ODQgMC4wMzkzLTIuODE4NCAxLjEyMDgtMi44NTQ0IDIuNTkyOS0wLjE0NzkyIDEuMzE2NiAwLjg3NjM1IDIuNDIxNiAxLjk5OTcgMi45MzkxIDAuNTc1MzggMC4zMjYwOSAxLjUxOSAwLjU2ODk0IDEuNDc5OCAxLjM4OTMtMC4wMTMyIDAuNjc0NDItMS4wMDczIDAuNjY3NTYtMS4zMzIyIDAuMjM2NjUtMC4xNjYyOC0wLjM1Nzc3LTAuMTA0NzItMC44OTgyNi0wLjU4NjA2LTEuMDM0My0wLjM5MjI0LTAuMDg0NC0wLjgxMjMxLTAuMTAyNzItMS4yMDY5LTAuMDQwNC0wLjY4ODM5IDAuMjg0MzktMC4zNjY1IDEuMTM2OC0wLjQyODc2IDEuNjk5NCAwLjA1MDMgMC4zODY3NC0wLjA5NzggMC45MzA3NiAwLjA2OTQgMS4yMjQ5IDEuNTgxMyAwLjM4NjIyIDMuNDA3NCAwLjgxNTI2IDQuODg3Ny0wLjExNTExIDEuNTYxMi0xLjA0OTIgMS40OTA4LTMuNjUyNi0wLjA3MDctNC42NzA5LTAuNjg4OTItMC41OTE3Mi0xLjcxNjktMC43Mzc0LTIuMjU1NC0xLjUwMjktMC4xNjQwMi0wLjM4MzA3IDAuMTU5NzQtMC44MDgyNSAwLjU3MjE0LTAuNzI4MDQgMC41MjAxMi0wLjA0NTUgMC42NTU3MyAwLjQ5ODc0IDAuNzMwODIgMC44OTM2OSAwLjI4NTU3IDAuNTgxNSAxLjAxMDIgMC4zNDUxIDEuNTE4NyAwLjQyMTc5IDAuNjQ3My0wLjA4MTEgMC40OTY5OS0wLjgzODg2IDAuNTAzOTEtMS4yNzc5di0xLjYzODRjLTAuOTg5My0wLjI0Nzc3LTIuMDAwOC0wLjQ3MjE1LTMuMDI3Ny0wLjM4OTc3eiIvPgoJCQk8cGF0aCBkPSJtMTIxLjI4IDEzNi4wOWMtMS4zOTg2IDAuMDM5Mi0yLjgxOCAxLjEyMTEtMi44NTQ0IDIuNTkyOS0wLjE0ODAyIDEuMzE2NiAwLjg3NjY2IDIuNDIxNCAxLjk5OTcgMi45MzkxIDAuNTc2NTkgMC4zMjU2NSAxLjUxNzcgMC41NjY4IDEuNDc5OCAxLjM4NjUtMC4wMTY1IDAuNzk0OTctMS40MjE5IDAuNjY3MTktMS40MzUtMC4wNzI2IDAuMDIxNC0wLjU5MTMzLTAuNjIzMDktMC44OTk3Ni0xLjEzOS0wLjc3MTAyLTAuNTM1MTUtMC4xNzYxMy0xLjEzNTUgMC4yNzM4MS0xLjAwMzcgMC44NTMzMyAwLjA1NTMgMC42ODM5NiA4ZS0zIDEuMzc2IDAuMDIzNyAyLjA2MyAxLjYwMzcgMC4zOTEwMSAzLjQ1NDEgMC44NDI4NSA0Ljk1ODUtMC4wOTg5IDEuNTU5NC0xLjA0OTggMS40ODkzLTMuNjUzLTAuMDcyMS00LjY3MDktMC42ODkxOC0wLjU5MDgxLTEuNzEzOS0wLjczODc1LTIuMjU1NC0xLjUwMTUtMC4xNzYxNy0wLjQxNTYgMC4xOTc2NS0wLjgyMDU5IDAuNjIyMjUtMC43Mjk0MiAwLjUyMjUzLTVlLTMgMC41ODUyNyAwLjU0MTIgMC42OTE4NSAwLjkyMTU0IDAuMzI5NzcgMC41NDcwOCAxLjA1MjYgMC4zMzQ1NSAxLjU3NDQgMC4zODI4IDAuNjE5MzEtMC4xNjA2MSAwLjQwNDc5LTAuODg4MDEgMC40Mzg1LTEuMzM4di0xLjU2NzJjLTAuOTg5ODMtMC4yNDgyOS0yLjAwMTctMC40NzA4LTMuMDI5MS0wLjM4OTc3eiIvPgoJCQk8cGF0aCBkPSJtMTM4Ljc1IDEzNi4wOGMtMS43NjQzIDAuMDQ0Ny0zLjI0NjMgMS41NTA5LTMuNDkxNSAzLjI2MDctMC4zMzU1NSAxLjYzODItMC4yMjI3MyAzLjQ5MzQgMC43NTc1NCA0Ljg5OTUgMS40Mjc5IDEuODA0NCA0LjUzNTEgMS43MTczIDUuODk1Mi0wLjEyNjQyIDAuODQ5NjQtMS4xMzI5IDEuMDEzLTIuNjM1NCAwLjk0MDM0LTQuMDEwOC0wLjEwNTY3LTEuNDExNS0wLjY1MDM4LTIuOTc2OC0yLjAxOS0zLjYyMDctMC42MzkzNy0wLjMyNDE1LTEuMzY4OS0wLjQ1NzM5LTIuMDgyNS0wLjQwMjN6bTAuMzA3NjQgMi4wMDczYzAuODI2NSAwLjE1NzU5IDAuOTcwMzIgMS4xNjIxIDEuMDY2IDEuODU4NCAwLjA4MjcgMS4xNDggMC4xOTQ0NSAyLjUwMTEtMC42MDggMy40MzE0LTAuNTgyNzUgMC40MDI4OS0xLjM5MDQtMC4wNjY3LTEuNDc1Ny0wLjczNTA5LTAuMzU4Ny0xLjEzODUtMC4zMjI2LTIuMzUyLTAuMDk4Ni0zLjQ5ODUgMC4xMzE4Ny0wLjUyMDIgMC40ODEyNS0xLjE1NDQgMS4xMTY0LTEuMDU2MnoiLz4KCQk8L2c+Cgk8L2c+Cjwvc3ZnPgo=");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-position: center center;
  display: inline-block;
  box-sizing: border-box;
  height: var(--form-field-height);
  width: 110px;
  margin-right: 10px;
  margin-left: 10px;
  background-color: rgba(var(--logo-color), 0.6);
}
.svg-logo:hover {
  background-color: rgba(var(--logo-color), 0.9);
}

body {
  grid-template-columns: 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas: "nav" "con";
}

@media screen and (min-width: 768px) {
  body {
    grid-template-columns: 130px 1fr;
    grid-template-rows: auto;
    grid-template-areas: "nav con";
  }

  .hide-gt-small:not(.force-open) {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .hide-lt-medium:not(.force-open) {
    display: none !important;
  }
}
@media screen and (min-width: 1024px) {
  body {
    grid-template-columns: 130px 1fr 894px 1fr;
    grid-template-rows: auto;
    grid-template-areas: "nav . con .";
  }

  .hide-gt-medium:not(.force-open) {
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
  .hide-lt-large:not(.force-open) {
    display: none !important;
  }
}
#menu {
  --menu-link-color: var(--color-3);
  --menu-link-padding: 12px 0;
  --menu-link-icon-size: 38px;
  --menu-link-text-align: left;
  --menu-link-icon-margins: 0 10px 8px;
  --menu-arrow-color: var(--color-4);
  --menu-top-offset: 58px;
  background-color: rgb(var(--color-1));
  overflow-y: auto;
  max-height: calc(100vh - var(--menu-top-offset));
}
#menu > a {
  display: block;
  position: relative;
  padding: var(--menu-link-padding);
  color: rgba(var(--menu-link-color), 0.6);
  text-decoration: none;
  text-align: var(--menu-link-text-align);
  font-weight: bold;
}
#menu > a:before {
  transition: color 0.2s ease-in;
  display: inline-block;
  content: "";
  top: 0;
  width: var(--menu-link-icon-size);
  height: var(--menu-link-icon-size);
  margin: var(--menu-link-icon-margins);
  vertical-align: middle;
}
#menu > a[href="/domains"]:before {
  background-color: rgba(var(--menu-link-color), 0.6);
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9Imxhbmd1YWdlSWNvblRpdGxlIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBmaWxsPSJub25lIiBjb2xvcj0iY3VycmVudENvbG9yIj4gPHRpdGxlIGlkPSJsYW5ndWFnZUljb25UaXRsZSI+TGFuZ3VhZ2U8L3RpdGxlPiA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPiA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0xMiwyMiBDMTQuNjY2NjY2NywxOS41NzU3NTc2IDE2LDE2LjI0MjQyNDIgMTYsMTIgQzE2LDcuNzU3NTc1NzYgMTQuNjY2NjY2Nyw0LjQyNDI0MjQyIDEyLDIgQzkuMzMzMzMzMzMsNC40MjQyNDI0MiA4LDcuNzU3NTc1NzYgOCwxMiBDOCwxNi4yNDI0MjQyIDkuMzMzMzMzMzMsMTkuNTc1NzU3NiAxMiwyMiBaIi8+IDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTIuNSA5TDIxLjUgOU0yLjUgMTVMMjEuNSAxNSIvPiA8L3N2Zz4=");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
#menu > a[href="/logout"]:before {
  background-color: rgba(var(--menu-link-color), 0.6);
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImV4aXRJY29uVGl0bGUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGZpbGw9Im5vbmUiIGNvbG9yPSJjdXJyZW50Q29sb3IiPiA8dGl0bGUgaWQ9ImV4aXRJY29uVGl0bGUiPkV4aXQ8L3RpdGxlPiA8cGF0aCBkPSJNMTggMTVsMy0zLTMtMyIvPiA8cGF0aCBkPSJNMTEuNSAxMkgyMCIvPiA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0yMSAxMmgtMSIvPiA8cGF0aCBkPSJNMTUgNHYxNkg0VjR6Ii8+IDwvc3ZnPg==");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
#menu > a:hover {
  color: rgba(var(--menu-link-color), 0.9);
}
#menu > a:hover:before {
  background-color: rgba(var(--menu-link-color), 0.9);
}
#menu > a.active:after {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  border-color: transparent rgb(var(--menu-arrow-color)) transparent transparent;
  border-width: 20px;
  border-style: solid;
  right: 0;
  top: 22%;
}
@media screen and (min-width: 768px) {
  #menu {
    --menu-link-color: var(--color-1);
    --menu-link-icon-size: 54px;
    --menu-link-text-align: center;
    --menu-top-offset: 0px;
    --menu-arrow-color: var(--color-1);
    --menu-link-icon-margins: 0 auto 8px;
    background-color: transparent;
    max-height: none;
  }
  #menu > a:before {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  #menu {
    box-shadow: -1px 7px 21px 1px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: -1px 7px 21px 1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 7px 21px 1px rgba(0, 0, 0, 0.75);
  }
}

#main-nav {
  color: rgb(var(--color-1));
  background-color: rgb(var(--color-3));
}

ul.capsules {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.capsules li {
  display: inline-block;
  box-sizing: border-box;
  color: rgb(var(--color-1));
  background-color: rgb(var(--color-4));
  padding: 6px 10px;
  margin: 2px;
  border-radius: 6px;
  line-height: 1em;
  max-width: 100%;
  word-break: break-all;
}

.ic {
  --icon-color: var(--color-3);
  --icon-base-opacity: 0.5;
  --icon-hover-opacity: 1;
  background-size: cover;
  background-color: black;
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.2s ease-in;
  background-color: rgba(var(--icon-color), var(--icon-base-opacity));
}
.ic.opaque {
  --icon-base-opacity: 1;
}
.ic:hover, button:hover .ic, a:hover .ic, .iconify:hover .ic {
  background-color: rgba(var(--icon-color), var(--icon-hover-opacity));
}
.ic.edit {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImVkaXRJY29uVGl0bGUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9ImN1cnJlbnRDb2xvciI+IDx0aXRsZSBpZD0iZWRpdEljb25UaXRsZSI+RWRpdDwvdGl0bGU+IDxwYXRoIGQ9Ik0xOC40MTQyMTM2IDQuNDE0MjEzNTZMMTkuNTg1Nzg2NCA1LjU4NTc4NjQ0QzIwLjM2NjgzNSA2LjM2NjgzNTAyIDIwLjM2NjgzNSA3LjYzMzE2NDk4IDE5LjU4NTc4NjQgOC40MTQyMTM1Nkw4IDIwIDQgMjAgNCAxNiAxNS41ODU3ODY0IDQuNDE0MjEzNTZDMTYuMzY2ODM1IDMuNjMzMTY0OTggMTcuNjMzMTY1IDMuNjMzMTY0OTggMTguNDE0MjEzNiA0LjQxNDIxMzU2ek0xNCA2TDE4IDEwIi8+IDwvc3ZnPg==");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
.ic.delete {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImJpbkljb25UaXRsZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBmaWxsPSJub25lIiBjb2xvcj0iY3VycmVudENvbG9yIj4gPHRpdGxlIGlkPSJiaW5JY29uVGl0bGUiPkJpbjwvdGl0bGU+IDxwYXRoIGQ9Ik0xOSA2TDUgNk0xNCA1TDEwIDVNNiAxMEw2IDIwQzYgMjAuNjY2NjY2NyA2LjMzMzMzMzMzIDIxIDcgMjEgNy42NjY2NjY2NyAyMSAxMSAyMSAxNyAyMSAxNy42NjY2NjY3IDIxIDE4IDIwLjY2NjY2NjcgMTggMjAgMTggMTkuMzMzMzMzMyAxOCAxNiAxOCAxMCIvPiA8L3N2Zz4=");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
.ic.prev {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImNpcmNsZUFycm93TGVmdEljb25UaXRsZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBmaWxsPSJub25lIiBjb2xvcj0iY3VycmVudENvbG9yIj4gPHRpdGxlIGlkPSJjaXJjbGVBcnJvd0xlZnRJY29uVGl0bGUiPkFycm93IExlZnQ8L3RpdGxlPiA8cGF0aCBkPSJNMTAuNSAxNWwtMy0zIDMtMyIvPiA8cGF0aCBkPSJNMTYuNSAxMkg5Ii8+IDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTcuNSAxMkg5Ii8+IDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+IDwvc3ZnPg==");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
.ic.next {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImNpcmNsZUFycm93UmlnaHRJY29uVGl0bGUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9ImN1cnJlbnRDb2xvciI+IDx0aXRsZSBpZD0iY2lyY2xlQXJyb3dSaWdodEljb25UaXRsZSI+QXJyb3cgUmlnaHQ8L3RpdGxlPiA8cGF0aCBkPSJNMTMuNSA5bDMgMy0zIDMiLz4gPHBhdGggZD0iTTcuNSAxMkgxNSIvPiA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0xNi41IDEySDE1Ii8+IDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+IDwvc3ZnPg==");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
.ic.search {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9InNlYXJjaEljb25UaXRsZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBmaWxsPSJub25lIiBjb2xvcj0iY3VycmVudENvbG9yIj4gPHRpdGxlIGlkPSJzZWFyY2hJY29uVGl0bGUiPlNlYXJjaDwvdGl0bGU+IDxwYXRoIGQ9Ik0xNC40MTIxMTIyLDE0LjQxMjExMjIgTDIwLDIwIi8+IDxjaXJjbGUgY3g9IjEwIiBjeT0iMTAiIHI9IjYiLz4gPC9zdmc+");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
.ic.add {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9InBsdXNJY29uVGl0bGUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGZpbGw9Im5vbmUiIGNvbG9yPSJjdXJyZW50Q29sb3IiPiA8dGl0bGUgaWQ9InBsdXNJY29uVGl0bGUiPlBsdXM8L3RpdGxlPiA8cGF0aCBkPSJNMjAgMTJMNCAxMk0xMiA0TDEyIDIwIi8+IDwvc3ZnPg==");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
.ic.hamburger {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImhhbWJ1cmdlckljb25UaXRsZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgZmlsbD0ibm9uZSIgY29sb3I9ImN1cnJlbnRDb2xvciI+IDx0aXRsZSBpZD0iaGFtYnVyZ2VySWNvblRpdGxlIj5NZW51PC90aXRsZT4gPHBhdGggZD0iTTYgN0wxOCA3TTYgMTJMMTggMTJNNiAxN0wxOCAxNyIvPiA8L3N2Zz4=");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
.ic.close {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImNsb3NlSWNvblRpdGxlIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGZpbGw9Im5vbmUiIGNvbG9yPSJjdXJyZW50Q29sb3IiPiA8dGl0bGUgaWQ9ImNsb3NlSWNvblRpdGxlIj5DbG9zZTwvdGl0bGU+IDxwYXRoIGQ9Ik02LjM0MzE0NTc1IDYuMzQzMTQ1NzVMMTcuNjU2ODU0MiAxNy42NTY4NTQyTTYuMzQzMTQ1NzUgMTcuNjU2ODU0MkwxNy42NTY4NTQyIDYuMzQzMTQ1NzUiLz4gPC9zdmc+");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
.ic.locked {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImxvY2tJY29uVGl0bGUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgZmlsbD0ibm9uZSIgY29sb3I9ImN1cnJlbnRDb2xvciI+IDx0aXRsZSBpZD0ibG9ja0ljb25UaXRsZSI+TG9jazwvdGl0bGU+IDxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxMCIgeD0iNSIgeT0iMTEiLz4gPHBhdGggZD0iTTEyLDMgTDEyLDMgQzE0Ljc2MTQyMzcsMyAxNyw1LjIzODU3NjI1IDE3LDggTDE3LDExIEw3LDExIEw3LDggQzcsNS4yMzg1NzYyNSA5LjIzODU3NjI1LDMgMTIsMyBaIi8+IDwvc3ZnPg==");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
.ic.unlocked {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImxvY2tPcGVuSWNvblRpdGxlIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGZpbGw9Im5vbmUiIGNvbG9yPSJjdXJyZW50Q29sb3IiPiA8dGl0bGUgaWQ9ImxvY2tPcGVuSWNvblRpdGxlIj5Mb2NrPC90aXRsZT4gPHBhdGggZD0iTTcsNy42MjUgTDcsNyBDNyw0LjIzODU3NjI1IDkuMjM4NTc2MjUsMiAxMiwyIEwxMiwyIEMxNC43NjE0MjM3LDIgMTcsNC4yMzg1NzYyNSAxNyw3IEwxNywxMSIvPiA8cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTAiIHg9IjUiIHk9IjExIi8+IDwvc3ZnPg==");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
.ic.globe {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9Imxhbmd1YWdlSWNvblRpdGxlIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBmaWxsPSJub25lIiBjb2xvcj0iY3VycmVudENvbG9yIj4gPHRpdGxlIGlkPSJsYW5ndWFnZUljb25UaXRsZSI+TGFuZ3VhZ2U8L3RpdGxlPiA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPiA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0xMiwyMiBDMTQuNjY2NjY2NywxOS41NzU3NTc2IDE2LDE2LjI0MjQyNDIgMTYsMTIgQzE2LDcuNzU3NTc1NzYgMTQuNjY2NjY2Nyw0LjQyNDI0MjQyIDEyLDIgQzkuMzMzMzMzMzMsNC40MjQyNDI0MiA4LDcuNzU3NTc1NzYgOCwxMiBDOCwxNi4yNDI0MjQyIDkuMzMzMzMzMzMsMTkuNTc1NzU3NiAxMiwyMiBaIi8+IDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTIuNSA5TDIxLjUgOU0yLjUgMTVMMjEuNSAxNSIvPiA8L3N2Zz4=");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
.ic.people {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9InBlb3BsZUljb25UaXRsZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgZmlsbD0ibm9uZSIgY29sb3I9ImN1cnJlbnRDb2xvciI+IDx0aXRsZSBpZD0icGVvcGxlSWNvblRpdGxlIj5QZW9wbGU8L3RpdGxlPiA8cGF0aCBkPSJNMSAxOEMxIDE1Ljc1IDQgMTUuNzUgNS41IDE0LjI1IDYuMjUgMTMuNSA0IDEzLjUgNCA5Ljc1IDQgNy4yNTAyNSA0Ljk5OTc1IDYgNyA2IDkuMDAwMjUgNiAxMCA3LjI1MDI1IDEwIDkuNzUgMTAgMTMuNSA3Ljc1IDEzLjUgOC41IDE0LjI1IDEwIDE1Ljc1IDEzIDE1Ljc1IDEzIDE4TTEyLjc5MTgxMTQgMTUuNzI2NjY4NEMxMy4yODQwNTUxIDE1LjU0ODI2NiAxMy42ODc0ODYyIDE1LjM4MzI5OTQgMTQuMDAyMTA0NSAxNS4yMzE3Njg1IDE0LjU1Mjc3NiAxNC45NjY1NDYzIDE1LjA4NDA1NzQgMTQuNjY1OTQyNiAxNS41IDE0LjI1IDE2LjI1IDEzLjUgMTQgMTMuNSAxNCA5Ljc1IDE0IDcuMjUwMjUgMTQuOTk5NzUgNiAxNyA2IDE5LjAwMDI1IDYgMjAgNy4yNTAyNSAyMCA5Ljc1IDIwIDEzLjUgMTcuNzUgMTMuNSAxOC41IDE0LjI1IDIwIDE1Ljc1IDIzIDE1Ljc1IDIzIDE4Ii8+IDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTEyLDE2IEMxMi4zNjYyNzQxLDE1Ljg3NjM0NzIgMTIuNjMwMjExMiwxNS43ODUyMzY2IDEyLjc5MTgxMTQsMTUuNzI2NjY4NCIvPiA8L3N2Zz4=");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
.ic.logout {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImV4aXRJY29uVGl0bGUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGZpbGw9Im5vbmUiIGNvbG9yPSJjdXJyZW50Q29sb3IiPiA8dGl0bGUgaWQ9ImV4aXRJY29uVGl0bGUiPkV4aXQ8L3RpdGxlPiA8cGF0aCBkPSJNMTggMTVsMy0zLTMtMyIvPiA8cGF0aCBkPSJNMTEuNSAxMkgyMCIvPiA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0yMSAxMmgtMSIvPiA8cGF0aCBkPSJNMTUgNHYxNkg0VjR6Ii8+IDwvc3ZnPg==");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}

div.actions > a.ic {
  width: 32px;
  height: 32px;
}

.pager {
  display: grid;
  box-sizing: border-box;
  padding: 10px 0;
  grid-template-columns: [left] max-content [center] 1fr [right] max-content;
  position: sticky;
}
@media screen and (max-width: 768px) {
  .pager.top {
    display: none !important;
    background-color: green;
  }
  .pager.bottom {
    bottom: 0px;
    background-color: rgb(var(--color-1));
    z-index: 1;
    margin: 0 -1em;
    padding: 10px;
    box-shadow: 1px -9px 16px -3px rgba(var(--color-3), 0.4);
    -webkit-box-shadow: 1px -9px 16px -3px rgba(var(--color-3), 0.4);
    -moz-box-shadow: 1px -9px 16px -3px rgba(var(--color-3), 0.4);
  }
}
.pager a {
  width: 48px;
  height: 48px;
}
.pager a.prev {
  grid-column: left/span 1;
}
.pager a.next {
  grid-column: right/span 1;
}

input:not([type=checkbox]) {
  height: var(--form-field-height);
  font-size: calc(var(--form-field-height) * 0.4);
}

button, a.button {
  --button-padding: 8px;
  --button-radius: 6px;
  --button-bg-opacity: 1;
  font-family: var(--button-font-family);
  box-sizing: border-box;
  height: var(--form-field-height);
  font-size: calc(var(--form-field-height) * 0.4);
  padding: var(--button-padding);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: var(--button-radius);
  background-color: rgba(var(--button-bg-color), var(--button-bg-opacity));
  color: rgba(var(--button-fg-color), 0.8);
  transition: all 0.2s ease-in;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  justify-content: center;
  --button-bg-color: var(--color-3);
  --button-fg-color: var(--color-1);
  --button-fg-hover-color: var(--button-fg-color);
  --button-bg-hover-color: var(--button-bg-color);
}
button.small, a.button.small {
  --form-field-height: 32px;
}
button.large, a.button.large {
  --form-field-height: 48px;
}
button.round, a.button.round {
  --button-radius: 50%;
}
button.no-pad, a.button.no-pad {
  --button-padding: 0px;
}
button.no-bg, a.button.no-bg {
  --button-bg-opacity: 0;
}
button.no-bg.warning, a.button.no-bg.warning {
  --button-fg-color: var(--color-R);
}
button.no-bg.primary, a.button.no-bg.primary {
  --button-fg-color: var(--color-3);
}
button:not(.no-bg).warning, a.button:not(.no-bg).warning {
  --button-bg-color: var(--color-R);
  --button-fg-color: var(--color-1);
}
button:not(.no-bg).primary, a.button:not(.no-bg).primary {
  --button-bg-color: var(--color-3);
  --button-fg-color: var(--color-1);
}
button:not(.no-bg).bright, a.button:not(.no-bg).bright {
  --button-bg-color: var(--color-5);
  --button-fg-color: var(--color-1);
}
button:not(.no-bg).search, a.button:not(.no-bg).search {
  --button-bg-color: var(--color-2);
  --button-fg-color: 0, 0, 0;
}
button:hover, a.button:hover {
  color: rgba(var(--button-fg-hover-color), 1);
  background-color: rgba(var(--button-bg-hover-color), var(--button-bg-opacity));
}
button > .ic, a.button > .ic {
  width: calc(var(--form-field-height) - (var(--button-padding) * 2));
  height: calc(var(--form-field-height) - (var(--button-padding) * 2));
  --icon-color: var(--button-fg-color) !important;
}
button > .ic:hover, a.button > .ic:hover {
  --icon-color: var(--button-fg-hover-color) !important;
}

div.button-group {
  box-sizing: border-box;
  position: relative;
  display: flex;
  gap: 10px;
}
div.button-group.align-end {
  justify-content: flex-end;
}

div.custom-select {
  --icon-size: calc(var(--form-field-height) * 0.8);
  position: relative;
  display: inline-flex;
}
div.custom-select > select {
  display: inline-flex;
  position: relative;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  height: var(--form-field-height);
  padding: 8px;
  padding-right: var(--icon-size) !important;
  border-color: rgb(var(--color-C2));
  border-radius: 6px;
  font-size: calc(var(--form-field-height) * 0.4);
}
div.custom-select > select:hover {
  background-color: rgb(var(--color-C2));
}
div.custom-select > select option {
  background-color: white;
}
div.custom-select:after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 10%;
  right: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: rgb(var(--color-3));
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImNoZXZyb25Eb3duSWNvblRpdGxlIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBmaWxsPSJub25lIiBjb2xvcj0iY3VycmVudENvbG9yIj4gPHRpdGxlIGlkPSJjaGV2cm9uRG93bkljb25UaXRsZSI+Q2hldnJvbiBEb3duPC90aXRsZT4gPHBvbHlsaW5lIHBvaW50cz0iNiAxMCAxMiAxNiAxOCAxMCIvPiA8L3N2Zz4=");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}

div.labeled {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
}
ul.data-desc {
  position: relative;
  display: block;
  box-sizing: border-box;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.data-desc > li.value > span {
  border-bottom: solid 1px rgba(var(--color-3), 0.2);
  word-break: break-all;
}
ul.data-desc > li.value > button {
  vertical-align: text-bottom;
}
ul.data-desc > li.modified {
  margin-top: 0.5em;
  font-size: 0.8em;
}

div.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
div.form > p {
  margin-top: 0;
}
div.form > *:not(label):not(:last-child) {
  margin-bottom: 10px;
}
div.form.sectioned > label {
  padding-top: 4px;
  border-top: solid 1px rgba(var(--color-3), 0.2);
  color: rgba(var(--color-3), 0.5);
  font-weight: bold;
}

div.form-component {
  --form-round-left: 0;
  --form-round-right: 0;
  display: inline-flex;
  align-items: center;
  border: solid 1px rgb(var(--color-C2));
  border-radius: 6px;
}
div.form-component > :first-child {
  --form-round-left: 6px;
}
div.form-component > :last-child {
  --form-round-right: 6px;
}
div.form-component.large {
  --form-field-height: 48px;
}
div.form-component > .grow {
  flex-grow: 1;
  width: 100%;
}
div.form-component > .shrink {
  flex-shrink: 1;
  width: 100%;
}
div.form-component input, div.form-component select, div.form-component button {
  box-sizing: border-box;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  height: var(--form-field-height);
  border-radius: var(--form-round-left) var(--form-round-right) var(--form-round-right) var(--form-round-left) !important;
  border: none;
}
div.form-component select {
  border-right: solid 1px rgb(var(--color-C2));
}
div.form-component > div.iconify {
  position: relative;
  display: inline-block;
}
div.form-component > div.iconify > input {
  padding-right: var(--form-field-height);
  border-radius: var(--form-round-left) var(--form-round-right) var(--form-round-right) var(--form-round-left);
}
div.form-component > div.iconify > input[type=password]:placeholder-shown + .ic {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImxvY2tPcGVuSWNvblRpdGxlIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGZpbGw9Im5vbmUiIGNvbG9yPSJjdXJyZW50Q29sb3IiPiA8dGl0bGUgaWQ9ImxvY2tPcGVuSWNvblRpdGxlIj5Mb2NrPC90aXRsZT4gPHBhdGggZD0iTTcsNy42MjUgTDcsNyBDNyw0LjIzODU3NjI1IDkuMjM4NTc2MjUsMiAxMiwyIEwxMiwyIEMxNC43NjE0MjM3LDIgMTcsNC4yMzg1NzYyNSAxNyw3IEwxNywxMSIvPiA8cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTAiIHg9IjUiIHk9IjExIi8+IDwvc3ZnPg==");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
div.form-component > div.iconify > input[type=password]:not(:placeholder-shown) + .ic {
  --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9ImxvY2tJY29uVGl0bGUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgZmlsbD0ibm9uZSIgY29sb3I9ImN1cnJlbnRDb2xvciI+IDx0aXRsZSBpZD0ibG9ja0ljb25UaXRsZSI+TG9jazwvdGl0bGU+IDxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxMCIgeD0iNSIgeT0iMTEiLz4gPHBhdGggZD0iTTEyLDMgTDEyLDMgQzE0Ljc2MTQyMzcsMyAxNyw1LjIzODU3NjI1IDE3LDggTDE3LDExIEw3LDExIEw3LDggQzcsNS4yMzg1NzYyNSA5LjIzODU3NjI1LDMgMTIsMyBaIi8+IDwvc3ZnPg==");
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
}
div.form-component > div.iconify .ic {
  position: absolute;
  top: 10%;
  right: 4px;
  width: calc(var(--form-field-height) * 0.8);
  height: calc(var(--form-field-height) * 0.8);
}
div.form-component > div.iconify.grow > input {
  width: 100%;
}
div.dialog {
  background-color: rgb(var(--color-1));
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  min-width: 300px;
  max-width: min(90vw, 500px);
  box-shadow: -1px 10px 16px 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: -1px 10px 16px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: -1px 10px 16px 5px rgba(0, 0, 0, 0.5);
}
div.dialog > div.head {
  position: relative;
}
div.dialog > div.head > div.title {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 1em;
  color: rgba(var(--color-3), 0.8);
}
div.dialog > div.head > .close {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 0;
  right: 0;
}
div#tbl-users {
  --border-color: rgba(var(--color-3), 0.2);
  box-sizing: border-box;
  border: solid 1px var(--border-color);
  font-size: 0.8em;
}
div#tbl-users > div > span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  width: fit-content;
  word-break: break-all;
  line-height: 1.5em;
}
@media screen and (min-width: 768px) {
  div#tbl-users {
    display: grid;
    grid-auto-flow: column;
    border-bottom: none;
    grid-template-columns: [username] calc( 25% - 20px ) [mobile] calc( 25% - 20px ) [email] calc( 25% - 20px ) [roles] 1fr [actions] max-content;
  }
  div#tbl-users > div {
    box-sizing: border-box;
    min-height: 60px;
    line-height: 40px;
    padding: 8px;
    border-bottom: solid 1px var(--border-color);
  }
  div#tbl-users > div.header {
    color: rgba(var(--color-3), 0.6);
    font-weight: bold;
  }
  div#tbl-users > div.username {
    grid-column: username/span 1;
  }
  div#tbl-users > div.mobile {
    grid-column: mobile/span 1;
  }
  div#tbl-users > div.email {
    grid-column: email/span 1;
  }
  div#tbl-users > div.roles {
    grid-column: roles/span 1;
  }
  div#tbl-users > div.actions {
    grid-column: actions/span 1;
  }
}
@media screen and (max-width: 768px) {
  div#tbl-users {
    display: block;
    border-top: none;
  }
  div#tbl-users > div {
    display: grid;
    grid-template-columns: [foo] 100px [bar] 1fr;
    box-sizing: border-box;
    padding: 8px;
  }
  div#tbl-users > div:before {
    grid-column: foo;
    display: inline-block;
    color: rgba(var(--color-3), 0.6);
    font-weight: bold;
  }
  div#tbl-users > div > * {
    grid-column: bar;
  }
  div#tbl-users > div.header {
    display: none;
  }
  div#tbl-users > div.username {
    border-top: solid 1px var(--border-color);
  }
  div#tbl-users > div.username:before {
    content: "Username";
  }
  div#tbl-users > div.mobile:before {
    content: "Mobile";
  }
  div#tbl-users > div.email:before {
    content: "Email";
  }
  div#tbl-users > div.roles:before {
    content: "Roles";
  }
  div#tbl-users > div.actions:not(.header) {
    display: block;
    float: right;
    border-top: solid 1px var(--border-color);
  }
  div#tbl-users > div.actions:not(.header):before {
    display: none;
  }
}

div#tbl-domains {
  --border-color: rgba(var(--color-3), 0.2);
  box-sizing: border-box;
  border: solid 1px var(--border-color);
  display: grid;
  grid-auto-flow: column;
  border-bottom: none;
  grid-template-columns: [domain] calc( 100% - 130px ) [actions] max-content;
}
div#tbl-domains > div {
  box-sizing: border-box;
  min-height: 60px;
  line-height: 40px;
  padding: 10px;
  border-bottom: solid 1px var(--border-color);
}
div#tbl-domains > div > span {
  display: inline-block;
  text-overflow: ellipsis;
  box-sizing: border-box;
  width: fit-content;
  word-break: break-all;
  line-height: 1.5em;
}
div#tbl-domains > div.header {
  color: rgba(var(--color-3), 0.6);
  font-weight: bold;
}
div#tbl-domains > div.domain {
  grid-column: domain/span 1;
}
div#tbl-domains > div.actions {
  grid-column: actions/span 1;
}

div#tbl-domain-roles {
  --border-color: rgba(var(--color-3), 0.2);
  box-sizing: border-box;
  border: solid 1px var(--border-color);
  display: grid;
  grid-auto-flow: column;
  border-bottom: none;
  grid-template-columns: [selector] max-content [role] 1fr [actions] max-content;
}
div#tbl-domain-roles > div {
  box-sizing: border-box;
  min-height: 1em;
  line-height: 1em;
  padding: 10px;
  border-bottom: solid 1px var(--border-color);
}
div#tbl-domain-roles > div.header {
  color: rgba(var(--color-3), 0.6);
  font-weight: bold;
}
div#tbl-domain-roles > div.selector {
  grid-column: selector/span 1;
  border-right: 1px solid var(--border-color);
}
div#tbl-domain-roles > div.role {
  grid-column: role/span 1;
  word-break: break-all;
}
div#tbl-domain-roles > div.actions {
  grid-column: actions/span 1;
}

div#tbl-account-roles {
  --border-color: rgba(var(--color-3), 0.2);
  box-sizing: border-box;
  border: solid 1px var(--border-color);
  display: grid;
  grid-auto-flow: column;
  border-bottom: none;
  grid-template-columns: [selector] max-content [role] 1fr;
}
div#tbl-account-roles > div {
  box-sizing: border-box;
  min-height: 1.5em;
  line-height: 1.5em;
  padding: 10px;
  border-bottom: solid 1px var(--border-color);
  word-break: break-all;
}
div#tbl-account-roles > div.header {
  color: rgba(var(--color-3), 0.6);
  font-weight: bold;
}
div#tbl-account-roles > div.selector {
  grid-column: selector/span 1;
  border-right: 1px solid var(--border-color);
}
div#tbl-account-roles > div.role {
  grid-column: role/span 1;
}

ul.breadcrumbs {
  list-style-type: none;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 20px 0;
  gap: 10px;
  width: 100%;
}
ul.breadcrumbs:empty {
  display: none;
}
ul.breadcrumbs li {
  box-sizing: border-box;
  max-width: 100%;
  width: fit-content;
  display: inline-grid;
  grid-template-columns: [foo] 1fr [bar] max-content;
  grid-auto-flow: column;
  gap: 8px;
  transition: background-color 0.1s ease-in;
  border: solid 1px rgba(var(--color-3), 0.2);
  border-radius: 4px;
  background-color: rgba(var(--color-3), 0.05);
}
ul.breadcrumbs li:hover {
  background-color: rgba(var(--color-3), 0.15);
}
ul.breadcrumbs li > a {
  padding: 8px 0 8px 8px;
  font-weight: bold;
  grid-column: foo/span 1;
  text-decoration: none;
  color: rgb(var(--color-3));
  word-break: break-all;
}
ul.breadcrumbs li:after {
  content: ">";
  grid-column: bar/span 1;
  display: inline-block;
  padding: 8px 8px 8px 0;
  color: rgb(var(--color-3));
}

div.kv-table {
  --border-color: rgba(var(--color-3), 0.2);
  box-sizing: border-box;
  display: block;
  border: solid 1px var(--border-color);
  border-top: none;
}
div.kv-table > div {
  display: grid;
  grid-template-columns: [foo] 100px [bar] 1fr;
  border-top: solid 1px var(--border-color);
  padding: 8px;
}
div.kv-table > div:before {
  content: attr(data-label);
  grid-column: foo;
}
div.kv-table > div > * {
  grid-column: bar;
}

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