/* ---------- VSM Site Engine 2 Stylesheet ---------- */
/* -------------- Imports */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100;0,400;0,900;1,400&display=swap");
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  font-size: 1em;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

input,
textarea,
select,
button {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  padding: 0;
  margin: 0;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
  max-width: 100%;
}

input[type=text],
input[type=number],
input[type=date],
input[type=datetime-local],
input[type=time],
input[type=email],
input[type=password],
input[type=file],
textarea {
  width: 100%;
  max-width: 100%;
}

input[type=datetime-local] {
  max-width: 220px;
}

input,
textarea,
button {
  border: 1px solid gray;
}

textarea {
  max-width: 100%;
  resize: vertical;
}

button {
  width: 100%;
  border-radius: 0;
  background-color: transparent;
}

img,
svg,
iframe,
video,
object,
embed {
  display: block;
  max-width: 100%;
}

table {
  table-layout: fixed;
  width: 100%;
}

/* Responsive  */
@font-face {
  font-family: "VSM-Site-Engine";
  src: url("VSM-Site-Engine.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
#main ul.posted-items.events li.item .icon::before, #main ul.posted-items.events li.item.folder > .icon::before, #main ul.posted-items.accounts li.item .icon::before, #main ul.sortable li.folder > .icon::before, #main ul.posted-items li.item .icon::before, #menu ul li button::before, .button.next::before,
button.next::before,
input[type=submit].next::before, .button.previous::before,
button.previous::before,
input[type=submit].previous::before, .button.last::before,
button.last::before,
input[type=submit].last::before, .button.first::before,
button.first::before,
input[type=submit].first::before, #interface-wrapper.inspector-visible #mobile-header .inspector-toggle::before, #interface-wrapper.menu-visible #mobile-header .menu-toggle::before, #mobile-header .inspector-toggle::before, #mobile-header .menu-toggle::before {
  font-family: "VSM-Site-Engine" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 32px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#mobile-header .menu-toggle::before {
  content: "\e900";
}

#mobile-header .inspector-toggle::before {
  content: "\e901";
}

#interface-wrapper.inspector-visible #mobile-header .inspector-toggle::before, #interface-wrapper.menu-visible #mobile-header .menu-toggle::before {
  content: "\e902";
}

.button.first::before,
button.first::before,
input[type=submit].first::before {
  content: "\e905";
}

.button.last::before,
button.last::before,
input[type=submit].last::before {
  content: "\e906";
}

.button.previous::before,
button.previous::before,
input[type=submit].previous::before {
  content: "\e907";
}

#menu ul li button::before, .button.next::before,
button.next::before,
input[type=submit].next::before {
  content: "\e908";
}

#main ul.posted-items li.item .icon::before {
  content: "\e909";
}

#main ul.sortable li.folder > .icon::before {
  content: "\e90a";
}

#main ul.posted-items.accounts li.item .icon::before {
  content: "\e90b";
}

#main ul.posted-items.events li.item.folder > .icon::before {
  content: "\e90c";
}

#main ul.posted-items.events li.item .icon::before {
  content: "\e90d";
}

#editor-container #editor-content {
  font-family: Serif;
  font-size: 15px;
  line-height: 1.25;
}
#editor-container #editor-content p {
  margin-bottom: 1.25em;
}
#editor-container #editor-content h1 {
  font-size: 3em;
  line-height: 1;
  margin-bottom: 0.5em;
}
#editor-container #editor-content h2 {
  font-size: 2em;
  line-height: 1;
  margin-bottom: 0.5em;
}
#editor-container #editor-content h3 {
  font-size: 1.5em;
  line-height: 1;
  margin-bottom: 0.5em;
}
#editor-container #editor-content h4 {
  font-size: 1.25em;
  line-height: 1;
  margin-bottom: 0.5em;
}

/* DEFAULT VSM Site Engine Skin */
/* ------------ Variables */
/* Colours */
/* ---------------- Fonts */
/* ----------- Extensions */
/* Typography */
#main table thead tr th, body {
  font-weight: 400;
}

#inspector fieldset.labels label, #inspector .status, #main table tbody tr td.steps a,
#main table tbody tr td.steps span, #main table tbody tr td.name, #main ul.posted-items li.item .details a.step, #main ul.posted-items li.item .details span.step, #main ul.posted-items li.item .details span.status,
#main ul.posted-items li.item .details a.status, #main ul.posted-items li.item .name span, #mobile-header .title {
  font-weight: 900;
}

/* ------------ Global */
body {
  font-family: "Urbanist", sans-serif;
  font-size: 14px;
}

/* --------- Branding */
#menu::before {
  content: "";
  display: block;
  background-image: url("/css/theme/img/blue-goose-logo.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 90px;
  padding-top: 100px;
  margin-bottom: 1em;
  width: 100%;
}

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

fieldset.scrollable {
  margin-bottom: 2em;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: 33vh;
  overflow-y: scroll;
}
fieldset.scrollable label {
  flex-basis: 33%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 20px;
}

/* ----------- Extensions */
/* ------- Global Styling */
body {
  background: rgb(238, 238, 238);
  color: rgb(80, 80, 80);
  min-height: 100vh;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

/* --------------- Typography */
h1 {
  font-size: 4em;
  line-height: 1;
  margin-bottom: 0.5em;
}
@media (max-width: 960px) {
  h1 {
    font-size: 3em;
    margin-bottom: 0.25em;
  }
}

h2 {
  font-size: 1.5em;
  line-height: 1;
  margin-bottom: 0.5em;
}
@media (max-width: 960px) {
  h2 {
    font-size: 1.33em;
    margin-bottom: 0.25em;
  }
}

h3 {
  font-size: 1.2em;
  line-height: 1;
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1em;
}

hr {
  margin: 1em 0;
  outline: none;
  border: none;
  height: 3px;
  border-radius: 3px;
  background-color: rgb(225.25, 225.25, 225.25);
}

/* --------------- Form Elements */
.button,
button,
input[type=submit] {
  display: inline-block;
  padding: 10px;
  background-color: rgba(80, 80, 80, 0.1);
  border: none;
  border-radius: 5px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}
.button:hover, .button:focus,
button:hover,
button:focus,
input[type=submit]:hover,
input[type=submit]:focus {
  outline: none;
  background-color: rgb(80, 80, 80);
  color: white;
}
.button.disabled,
button.disabled,
input[type=submit].disabled {
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px);
}
.button.accept,
button.accept,
input[type=submit].accept {
  color: rgb(62, 187, 135);
  background-color: rgba(62, 187, 135, 0.2);
}
.button.accept:hover, .button.accept:focus,
button.accept:hover,
button.accept:focus,
input[type=submit].accept:hover,
input[type=submit].accept:focus {
  background-color: rgb(62, 187, 135);
  color: white;
}
.button.cancel, .button.dismiss,
button.cancel,
button.dismiss,
input[type=submit].cancel,
input[type=submit].dismiss {
  color: rgb(236, 96, 68);
  background-color: rgba(236, 96, 68, 0.2);
}
.button.cancel:hover, .button.cancel:focus, .button.dismiss:hover, .button.dismiss:focus,
button.cancel:hover,
button.cancel:focus,
button.dismiss:hover,
button.dismiss:focus,
input[type=submit].cancel:hover,
input[type=submit].cancel:focus,
input[type=submit].dismiss:hover,
input[type=submit].dismiss:focus {
  background-color: rgb(236, 96, 68);
  color: white;
}
.button.pending,
button.pending,
input[type=submit].pending {
  color: rgb(212, 174, 22);
  background-color: rgba(212, 174, 22, 0.2);
}
.button.pending:hover, .button.pending:focus,
button.pending:hover,
button.pending:focus,
input[type=submit].pending:hover,
input[type=submit].pending:focus {
  background-color: rgb(212, 174, 22);
  color: white;
}
.button.accent,
button.accent,
input[type=submit].accent {
  color: rgb(28, 137, 182);
  background-color: rgba(28, 137, 182, 0.2);
}
.button.accent:hover, .button.accent:focus,
button.accent:hover,
button.accent:focus,
input[type=submit].accent:hover,
input[type=submit].accent:focus {
  background-color: rgb(28, 137, 182);
  color: white;
}
.button,
button,
input[type=submit] {
  /* buttons with icons */
}
.button.previous,
button.previous,
input[type=submit].previous {
  position: relative;
  padding-left: 2.5em;
}
.button.previous::before,
button.previous::before,
input[type=submit].previous::before {
  font-size: 16px;
  position: absolute;
  left: 0.5em;
  top: calc(50% - 8px);
}
.button.first,
button.first,
input[type=submit].first {
  position: relative;
  padding-left: 2.5em;
}
.button.first::before,
button.first::before,
input[type=submit].first::before {
  font-size: 16px;
  position: absolute;
  left: 0.5em;
  top: calc(50% - 8px);
}
.button.next,
button.next,
input[type=submit].next {
  position: relative;
  padding-right: 2.5em;
}
.button.next::before,
button.next::before,
input[type=submit].next::before {
  font-size: 16px;
  position: absolute;
  right: 0.5em;
  top: calc(50% - 8px);
}
.button.last,
button.last,
input[type=submit].last {
  position: relative;
  padding-right: 2.5em;
}
.button.last::before,
button.last::before,
input[type=submit].last::before {
  font-size: 16px;
  position: absolute;
  right: 0.5em;
  top: calc(50% - 8px);
}

input,
textarea {
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 5px;
  font-size: 1.5em;
  margin-bottom: 5px;
}
input:hover, input:focus,
textarea:hover,
textarea:focus {
  outline: none;
  background-color: white;
}
input.pending,
textarea.pending {
  color: rgb(212, 174, 22);
  background-color: rgba(212, 174, 22, 0.2);
}

textarea {
  min-height: 8em;
}
textarea.pending {
  color: rgb(212, 174, 22);
  background-color: rgba(212, 174, 22, 0.2);
}

/* search field with adjascent submit button */
input.search-submit ~ input[type=submit] {
  padding: 0 2em;
  font-size: 1em;
  margin-left: 5px;
}

/* styling for text areas that contain custom markup */
textarea.code {
  min-height: 50vh;
  font-family: monospace;
  font-size: 12px;
  line-height: 24px;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  padding: 24px;
  background-color: rgb(80, 80, 80);
  color: rgb(238, 238, 238);
}
textarea.code::-moz-selection {
  color: white;
  background: rgb(28, 137, 182);
}
textarea.code::selection {
  color: white;
  background: rgb(28, 137, 182);
}

/* range slider */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 42px;
  border-radius: 21px;
  margin-bottom: 0;
  background-color: rgba(80, 80, 80, 0.1);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  display: block;
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  background-color: rgb(80, 80, 80);
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb:hover {
  background-color: rgb(28, 137, 182);
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

label.range {
  position: relative;
  padding-right: 2em !important;
  margin-bottom: 0;
}
label.range output {
  font-weight: bold;
  position: absolute;
  right: 0.33em;
  top: 1.66em;
  font-size: 1.5em;
}

select {
  display: inline-block;
  width: 100%;
  padding: 10px;
  margin-bottom: 0.25em;
  background-color: rgba(80, 80, 80, 0.1);
  border: none;
  border-radius: 5px;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve" > <g> <path d="M18,12h22c1.1,0,2-0.9,2-2s-0.9-2-2-2H18c-1.1,0-2,0.9-2,2C16,11.1,16.9,12,18,12z" /> <path d="M40,22H18c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h22c1.1,0,2-0.9,2-2S41.1,22,40,22z" /> <path d="M40,36H18c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h22c1.1,0,2-0.9,2-2S41.1,36,40,36z" /> <circle cx="9" cy="10" r="3" /> <circle cx="9" cy="24" r="3" /> <circle cx="9" cy="38" r="3" /> </g> </svg> ');
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: right 0.5em center;
}
select:hover, select:focus {
  outline: none;
  background-color: rgb(80, 80, 80);
  color: white;
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve" > <g fill="white" > <path d="M18,12h22c1.1,0,2-0.9,2-2s-0.9-2-2-2H18c-1.1,0-2,0.9-2,2C16,11.1,16.9,12,18,12z" /> <path d="M40,22H18c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h22c1.1,0,2-0.9,2-2S41.1,22,40,22z" /> <path d="M40,36H18c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h22c1.1,0,2-0.9,2-2S41.1,36,40,36z" /> <circle cx="9" cy="10" r="3" /> <circle cx="9" cy="24" r="3" /> <circle cx="9" cy="38" r="3" /> </g> </svg> ');
}
select.pending {
  color: rgb(212, 174, 22);
  background-color: rgba(212, 174, 22, 0.2);
}

input[type=radio], input[type=checkbox] {
  margin: 0 10px 0.25em 0;
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  opacity: 0.33;
  cursor: not-allowed;
  color: inherit;
  background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px);
}

fieldset {
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  padding: 0 5px;
  border: 3px solid rgb(225.25, 225.25, 225.25);
  border-radius: 8px;
}
fieldset.full {
  margin: 10px 10px 10px 0px;
  width: 100%;
}
fieldset legend {
  background-color: rgb(225.25, 225.25, 225.25);
  padding: 0 0.5em;
  border-radius: 1em;
}

/* ------------------------------------------------------------------------------ INTERFACE */
/* layout */
#interface-wrapper {
  position: relative;
  height: 100vh;
  width: 100%;
  transition: transform 0.5s ease;
}
@media (max-width: 960px) {
  #interface-wrapper {
    position: fixed;
  }
}

#menu {
  position: fixed;
  top: 0;
  bottom: 0;
  padding: 20px 20px 80px 20px;
  width: 200px;
  overflow-y: auto;
}
@media (max-width: 960px) {
  #menu {
    width: calc(100vw - 70px);
    transform: translateX(calc(-100vw + 70px));
    z-index: 999;
  }
}

#main {
  position: fixed;
  left: 200px;
  right: 240px;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 20px;
}
@media (max-width: 960px) {
  #main {
    left: 0;
    right: 0;
    padding-top: 90px;
  }
}

#inspector {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 240px;
  overflow-y: auto;
  padding: 20px;
}
@media (max-width: 960px) {
  #inspector {
    width: calc(100vw - 70px);
    transform: translateX(calc(100vw - 70px));
    z-index: 999;
  }
}

/* mobile */
#mobile-header {
  display: none;
}
@media (max-width: 960px) {
  #mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    background-color: rgb(250.75, 250.75, 250.75);
    border: none;
    border: 3px solid rgb(225.25, 225.25, 225.25);
    border-radius: 10px;
    padding: 20px;
    left: 10px;
    right: 10px;
    top: 10px;
    padding: 10px 0;
    height: 50px;
    z-index: 999;
  }
}
#mobile-header .title {
  color: rgb(80, 80, 80);
  font-size: 1.25em;
}
#mobile-header .menu-toggle {
  color: rgb(80, 80, 80);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: transform 0.5s ease, color 0.5s ease;
}
#mobile-header .inspector-toggle {
  color: rgb(80, 80, 80);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: transform 0.5s ease, color 0.5s ease;
}

@media (max-width: 960px) {
  #interface-wrapper.menu-visible {
    transform: translateX(calc(100vw - 70px));
  }
}
#interface-wrapper.menu-visible #mobile-header .menu-toggle {
  color: rgb(236, 96, 68);
  transform: rotate(720deg);
}
@media (max-width: 960px) {
  #interface-wrapper.inspector-visible {
    transform: translateX(calc(-100vw + 70px));
  }
}
#interface-wrapper.inspector-visible #mobile-header .inspector-toggle {
  color: rgb(236, 96, 68);
  transform: rotate(-720deg);
}

/* menu */
#menu ul li {
  margin-bottom: 5px;
}
#menu ul li a,
#menu ul li button {
  display: block;
  padding: 10px;
  background-color: rgba(80, 80, 80, 0.1);
  color: rgb(80, 80, 80);
  border: none;
  border-radius: 5px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}
#menu ul li a:hover, #menu ul li a:focus,
#menu ul li button:hover,
#menu ul li button:focus {
  outline: none;
  background-color: rgb(80, 80, 80);
  color: white;
}
#menu ul li button {
  position: relative;
  padding-right: 24px;
}
#menu ul li button::before {
  font-size: 1em;
  position: absolute;
  right: 8px;
  transform: rotate(90deg);
}
#menu ul li button + ul {
  display: none;
  padding: 5px 0 0.5em;
  margin: 0 0 1em 0;
  border-bottom: 3px solid rgb(225.25, 225.25, 225.25);
}
#menu ul li button + ul li a {
  background-color: white;
}
#menu ul li button.open {
  background-color: rgb(80, 80, 80);
  color: white;
}
#menu ul li button.open::before {
  transform: rotate(-90deg);
}
#menu ul li button.open + ul {
  display: block;
}
#menu ul li.active a {
  background-color: rgb(28, 137, 182);
  color: white;
}
#menu ul li.separator {
  background-color: rgb(225.25, 225.25, 225.25);
  height: 3px;
  margin: 1em 0;
}
#menu .powered-by {
  position: absolute;
  width: calc(100% - 40px);
  bottom: 0;
}
@media (max-width: 960px) {
  #menu .powered-by {
    width: 200px;
  }
}

/* custom scrollbars */
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 80, 80, 0.1) transparent;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 15px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(80, 80, 80, 0.1);
  border-radius: 10px;
  border: 5px solid rgb(238, 238, 238);
}
*::-webkit-scrollbar-thumb:hover {
  background-color: rgb(28, 137, 182);
}

/*for code editing blocks */
textarea.code {
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 80, 80, 0.1) transparent;
}

textarea.code::-webkit-scrollbar {
  width: 15px;
}

textarea.code::-webkit-resizer {
  -webkit-appearance: none;
  background: rgb(92.75, 92.75, 92.75);
  border-radius: 0 0 6px 0;
}

textarea.code::-webkit-scrollbar-track {
  background: rgb(80, 80, 80);
  border-radius: 6px 6px 0 0;
}

textarea.code::-webkit-scrollbar-thumb {
  background-color: rgb(238, 238, 238);
  border-radius: 10px;
  border: 5px solid rgb(80, 80, 80);
}
textarea.code::-webkit-scrollbar-thumb:hover {
  background-color: rgb(28, 137, 182);
}

/* ------------------------------------------------------------- MAIN */
#main {
  /* --------------------------------------- Tab Control */
}
#main #tab-control {
  display: flex;
  margin: 1em 0 2em;
  border-bottom: 3px solid rgb(28, 137, 182);
}
#main #tab-control .item {
  flex: 1;
  padding: 0.5em;
  margin: 0 3px;
  border-radius: 12px 12px 0 0;
  text-align: center;
  background-color: rgba(80, 80, 80, 0.1);
  cursor: pointer;
}
#main #tab-control .item:hover {
  color: rgb(238, 238, 238);
  background: rgb(80, 80, 80);
}
#main #tab-control .item.active {
  background-color: rgb(28, 137, 182);
  color: white;
}
#main .tab {
  display: none;
}
#main .tab.active {
  display: block;
}
#main {
  /* --------------------------------------------- Lists */
}
#main ul.posted-items {
  border: 3px solid rgb(225.25, 225.25, 225.25);
  border-radius: 8px;
  padding: 5px 5px 0 5px;
  margin-bottom: 2em;
  /* change icon types */
}
#main ul.posted-items li.item {
  display: grid;
  grid-template-columns: [thumbnail] 32px [name] 25% [details] auto [actions] 25% [end];
  background-color: white;
  border-radius: 0;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  line-height: 1;
}
#main ul.posted-items li.item .thumbnail {
  display: flex;
  align-items: center;
  width: 32px;
  height: 32px;
  background-size: cover;
  background-position: center center;
  border-radius: 3px;
}
#main ul.posted-items li.item .thumbnail video {
  display: none;
}
#main ul.posted-items li.item .name {
  display: flex;
  align-items: center;
}
#main ul.posted-items li.item .name span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 0 3px 10px;
}
#main ul.posted-items li.item .details {
  display: flex;
  align-items: center;
  min-width: 0;
}
#main ul.posted-items li.item .details span,
#main ul.posted-items li.item .details a {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 0 3px 10px;
}
#main ul.posted-items li.item .details span.status,
#main ul.posted-items li.item .details a.status {
  font-size: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2em;
  padding: 0 1.5em;
  border-radius: 1em;
  background-color: rgb(225.25, 225.25, 225.25);
  color: white;
}
#main ul.posted-items li.item .details span.status.accept,
#main ul.posted-items li.item .details a.status.accept {
  background-color: rgb(62, 187, 135);
}
#main ul.posted-items li.item .details span.status.cancel,
#main ul.posted-items li.item .details a.status.cancel {
  background-color: rgb(236, 96, 68);
}
#main ul.posted-items li.item .details span.status.pending,
#main ul.posted-items li.item .details a.status.pending {
  background-color: rgb(212, 174, 22);
}
#main ul.posted-items li.item .details span.status.accent,
#main ul.posted-items li.item .details a.status.accent {
  background-color: rgb(28, 137, 182);
}
#main ul.posted-items li.item .details span.step {
  font-size: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  min-width: 3em;
  flex-grow: revert;
  padding: 0;
  margin: 1px;
  border-radius: 1.5em;
  background-color: rgba(80, 80, 80, 0.1);
  color: white;
}
#main ul.posted-items li.item .details a.step {
  font-size: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  min-width: 3em;
  flex-grow: revert;
  padding: 0;
  margin: 1px;
  border-radius: 1.5em;
  background-color: rgb(225.25, 225.25, 225.25);
  color: white;
}
#main ul.posted-items li.item .details a.step.accept {
  background-color: rgb(62, 187, 135);
}
#main ul.posted-items li.item .details a.step.cancel {
  background-color: rgb(236, 96, 68);
}
#main ul.posted-items li.item .details a.step.pending {
  background-color: rgb(212, 174, 22);
}
#main ul.posted-items li.item .details a.step.accent {
  background-color: rgb(28, 137, 182);
}
#main ul.posted-items li.item .details a.step:hover {
  background-color: rgb(80, 80, 80);
}
#main ul.posted-items li.item .actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 0 0 10px;
}
#main ul.posted-items li.item .actions a.button, #main ul.posted-items li.item .actions button {
  padding: 0.5em;
  margin: 1px;
}
#main ul.posted-items li.item .actions button {
  width: auto;
}
#main ul.posted-items li.item label {
  margin-bottom: 0;
  margin-right: 10px;
}
#main ul.posted-items li.item label input {
  line-height: 1.5;
  background-color: rgba(80, 80, 80, 0.1);
  padding: 0;
  width: auto;
  margin-bottom: auto;
  margin-left: 10px;
}
#main ul.posted-items.simplified li {
  grid-template-columns: [name] auto [actions] 25% [end];
}
#main ul.posted-items.simplified li .thumbnail,
#main ul.posted-items.simplified li .details {
  display: none;
}
#main ul.posted-items.long-name li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px 5px 0 5px;
}
#main ul.posted-items.long-name li .name {
  flex-basis: 100%;
  max-width: 100%;
  border-bottom: 1px solid rgb(238, 238, 238);
}
#main ul.posted-items.long-name li .name span {
  padding: 5px 0;
}
#main ul.posted-items.long-name li .details {
  flex-grow: 1;
}
#main ul.posted-items.long-name li .details span {
  padding: 5px 0;
}
#main ul.posted-items.long-name li .actions {
  flex: 0;
  padding: 5px 0 5px 10px;
}
#main ul.posted-items.long-name li .thumbnail {
  display: none;
}
#main ul.posted-items.media {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 2px;
}
#main ul.posted-items.media li {
  display: flex;
  flex-direction: column;
  width: calc(25% - 6px);
  margin: 3px;
}
@media (max-width: 1280px) {
  #main ul.posted-items.media li {
    width: calc(33.3% - 6px);
  }
}
@media (max-width: 640px) {
  #main ul.posted-items.media li {
    width: calc(50% - 6px);
  }
}
#main ul.posted-items.media li .name span {
  padding: 5px 3px 10px;
}
#main ul.posted-items.media li .actions {
  justify-content: center;
}
#main ul.posted-items.media li .thumbnail {
  width: 100%;
  aspect-ratio: 1/1;
  height: auto;
  justify-content: center;
  padding: 10px;
  background-image: linear-gradient(45deg, white 25%, transparent 25%), linear-gradient(135deg, white 25%, transparent 25%), linear-gradient(45deg, transparent 75%, white 75%), linear-gradient(135deg, transparent 75%, white 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
}
#main ul.posted-items.media li .thumbnail img,
#main ul.posted-items.media li .thumbnail video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#main ul.sortable {
  grid-template-rows: [iteminfo] auto [nestedfolder] auto [end];
}
#main ul.sortable li {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: grab;
}
#main ul.sortable li:hover {
  box-shadow: 0 0 0 2px rgb(28, 137, 182);
}
#main ul.sortable li.folder {
  background-color: rgba(67.25, 67.25, 67.25, 0.1);
  padding: 5px;
}
#main ul.sortable li.folder ul.sortable {
  grid-row-start: nestedfolder;
  grid-column-start: thumbnail;
  grid-column-end: end;
  border: none;
  margin: 0;
  padding: 5px 0;
}
#main ul.sortable li.folder ul.sortable li {
  margin-left: 32px;
}
#main ul.sortable-contents {
  grid-template-rows: [iteminfo] auto [nestedfolder] auto [end];
}
#main ul.sortable-contents li {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#main ul.sortable-contents li.folder {
  background-color: rgba(67.25, 67.25, 67.25, 0.1);
  padding: 5px;
}
#main ul.sortable-contents li.folder ul.sortable {
  grid-row-start: nestedfolder;
  grid-column-start: thumbnail;
  grid-column-end: end;
  border: none;
  margin: 0;
  padding: 5px 0;
}
#main ul.sortable-contents li.folder ul.sortable li {
  margin-left: 32px;
}
#main hr {
  margin: 4em 0;
}
#main {
  /* --------------------------------------------- Tables */
}
#main .table-scroll {
  overflow-x: scroll;
  max-width: 100%;
}
#main .table-reports {
  table-layout: fixed;
}
#main table {
  border: 3px solid rgb(225.25, 225.25, 225.25);
  border-radius: 8px;
  margin-bottom: 2em;
  padding: 5px;
  table-layout: auto;
  border-spacing: 0;
}
#main table thead tr {
  margin-bottom: 2px;
}
#main table thead tr th {
  line-height: 1;
  text-align: left;
  padding: 1em 0.5em;
  background-color: rgba(80, 80, 80, 0.1);
  border-bottom: 5px solid rgb(238, 238, 238);
  border-right: 5px solid rgb(238, 238, 238);
}
#main table thead tr th:first-child {
  border-radius: 5px 0 0 0;
}
#main table thead tr th:first-child.checkbox {
  text-align: center;
}
#main table thead tr th:first-child.checkbox input {
  margin: 0;
  cursor: pointer;
}
#main table thead tr th:first-child.checkbox label {
  margin: 0;
}
#main table thead tr th:last-child {
  border-radius: 0 5px 0 0;
  border-right: none;
}
#main table thead tr th:last-child.actions {
  text-align: right;
}
#main table tbody tr td {
  padding: 0.5em;
  background-color: white;
  height: 2em;
}
#main table tbody tr td.checkbox {
  text-align: center;
}
#main table tbody tr td.checkbox input {
  margin: 0;
  cursor: pointer;
}
#main table tbody tr td.checkbox label {
  margin: 0;
}
#main table tbody tr td.steps {
  display: flex;
  width: auto;
  align-items: center;
  justify-content: center;
  height: auto;
}
#main table tbody tr td.steps a,
#main table tbody tr td.steps span {
  font-size: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  min-width: 3em;
  flex-grow: revert;
  padding: 0;
  margin: 1px;
  border-radius: 1.5em;
  background-color: rgb(225.25, 225.25, 225.25);
  color: white;
}
#main table tbody tr td.steps a.pending,
#main table tbody tr td.steps span.pending {
  background-color: rgb(212, 174, 22);
}
#main table tbody tr td.steps a.complete,
#main table tbody tr td.steps span.complete {
  background-color: rgb(62, 187, 135);
}
#main table tbody tr td.steps a:not(span):hover,
#main table tbody tr td.steps span:not(span):hover {
  background-color: rgb(80, 80, 80);
}
#main table tbody tr td.actions {
  text-align: right;
  height: auto;
}
#main table tbody tr td.actions .button {
  display: inline-block;
  padding: 0.5em;
  margin: 1px 0;
}
@media (max-width: 960px) {
  #main table tbody tr td.actions .button {
    display: block;
  }
}
#main table tbody tr td.actions form {
  display: inline;
}
#main table tbody tr:nth-child(even) td {
  background-color: transparent;
}
#main table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}
#main table tbody tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}
#main table.form {
  padding-bottom: 0;
}
#main table.form tbody tr td {
  background-color: transparent;
  padding: 0 5px 0 0;
}
#main table.form tbody tr td input {
  font-size: 1em;
}
#main table.form tbody tr td select {
  min-width: 10em;
}
#main {
  /* tablesorter plugin styles */
}
#main .tablesorter-headerUnSorted,
#main .tablesorter-headerDesc,
#main .tablesorter-headerAsc {
  background-size: 16px;
  background-position: right 10px center;
  background-repeat: no-repeat;
  cursor: s-resize;
}
#main .tablesorter-headerUnSorted:focus,
#main .tablesorter-headerDesc:focus,
#main .tablesorter-headerAsc:focus {
  outline: none;
}
#main .tablesorter-headerUnSorted.sorter-false {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 41"><path fill="rgba(0,0,0,0.2)" d="M40,19a2,2,0,0,1-1.2-.4L24,8,9.2,18.6a2,2,0,1,1-2.4-3.2l16-12a2,2,0,0,1,2.4,0l16,12A2,2,0,0,1,40,19Z" transform="translate(-6 -3)" /> <path fill="rgba(0,0,0,0.2)" d="M8,28a2,2,0,0,1,1.2.4L24,39,38.8,28.4a2,2,0,0,1,2.4,3.2l-16,12a2,2,0,0,1-2.4,0l-16-12A2,2,0,0,1,8,28Z" transform="translate(-6 -3)" /> </svg>');
  background-image: none;
  cursor: initial;
}
#main .tablesorter-headerUnSorted.sorter-false:hover {
  color: rgb(80, 80, 80);
  background-color: rgba(80, 80, 80, 0.1);
  background-image: none;
}
#main .tablesorter-headerUnSorted {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 41"><path fill="rgba(0,0,0,0.2)" d="M40,19a2,2,0,0,1-1.2-.4L24,8,9.2,18.6a2,2,0,1,1-2.4-3.2l16-12a2,2,0,0,1,2.4,0l16,12A2,2,0,0,1,40,19Z" transform="translate(-6 -3)" /> <path fill="rgba(0,0,0,0.2)" d="M8,28a2,2,0,0,1,1.2.4L24,39,38.8,28.4a2,2,0,0,1,2.4,3.2l-16,12a2,2,0,0,1-2.4,0l-16-12A2,2,0,0,1,8,28Z" transform="translate(-6 -3)" /> </svg>');
}
#main .tablesorter-headerUnSorted:hover {
  background-color: rgb(80, 80, 80);
  color: rgb(238, 238, 238);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 41"><path fill="rgba(255,255,255,0.2)" d="M40,19a2,2,0,0,1-1.2-.4L24,8,9.2,18.6a2,2,0,1,1-2.4-3.2l16-12a2,2,0,0,1,2.4,0l16,12A2,2,0,0,1,40,19Z" transform="translate(-6 -3)" /> <path fill="rgba(255,255,255,0.2)" d="M8,28a2,2,0,0,1,1.2.4L24,39,38.8,28.4a2,2,0,0,1,2.4,3.2l-16,12a2,2,0,0,1-2.4,0l-16-12A2,2,0,0,1,8,28Z" transform="translate(-6 -3)" /> </svg>');
}
#main .tablesorter-headerDesc {
  color: rgb(238, 238, 238);
  background-color: rgb(28, 137, 182);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 41"><path fill="rgba(255,255,255,1)" d="M40,19a2,2,0,0,1-1.2-.4L24,8,9.2,18.6a2,2,0,1,1-2.4-3.2l16-12a2,2,0,0,1,2.4,0l16,12A2,2,0,0,1,40,19Z" transform="translate(-6 -3)" /> <path fill="rgba(255,255,255,0.2)" d="M8,28a2,2,0,0,1,1.2.4L24,39,38.8,28.4a2,2,0,0,1,2.4,3.2l-16,12a2,2,0,0,1-2.4,0l-16-12A2,2,0,0,1,8,28Z" transform="translate(-6 -3)" /> </svg>');
}
#main .tablesorter-headerAsc {
  color: rgb(238, 238, 238);
  background-color: rgb(28, 137, 182);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 41"><path fill="rgba(255,255,255,0.2)" d="M40,19a2,2,0,0,1-1.2-.4L24,8,9.2,18.6a2,2,0,1,1-2.4-3.2l16-12a2,2,0,0,1,2.4,0l16,12A2,2,0,0,1,40,19Z" transform="translate(-6 -3)" /> <path fill="rgba(255,255,255,1)" d="M8,28a2,2,0,0,1,1.2.4L24,39,38.8,28.4a2,2,0,0,1,2.4,3.2l-16,12a2,2,0,0,1-2.4,0l-16-12A2,2,0,0,1,8,28Z" transform="translate(-6 -3)" /> </svg>');
  cursor: n-resize;
}
#main {
  /* --------------------------------------------- Filter Bar */
}
#main .filters {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1em 0;
  border: 3px solid rgb(225.25, 225.25, 225.25);
  border-radius: 8px;
  padding: 5px 2px 2px 5px;
}
@media (max-width: 960px) {
  #main .filters {
    flex-direction: column;
  }
}
#main .filters * {
  font-size: 12px;
}
#main .filters .segment {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 0;
  margin: 0;
  border: none;
  min-width: 320px;
}
@media (max-width: 960px) {
  #main .filters .segment {
    min-width: auto;
  }
}
#main .filters .segment.drop {
  position: relative;
}
#main .filters .segment.drop .contents {
  display: none;
  position: absolute;
  z-index: 900;
  left: -5px;
  right: -5px;
  top: 40px;
  background: white;
  padding: 5px 5px 2px 5px;
  border: 3px solid rgb(225.25, 225.25, 225.25);
  border-radius: 8px;
}
#main .filters .segment.drop .contents label {
  margin-bottom: 2px;
}
#main .filters .segment.drop .toggle {
  width: 100%;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 3em;
  line-height: 1;
  padding: 0 0.5em;
  flex-grow: 1;
}
#main .filters .segment.drop .toggle.open + .contents {
  display: block;
  margin: 5px 5px 2px 5px;
}
#main .filters .segment.drop .toggle.open + .contents label,
#main .filters .segment.drop .toggle.open + .contents a {
  display: flex;
  margin-bottom: 3px;
}
#main .filters .segment legend {
  background: transparent;
  padding: 0;
}
#main .filters .segment .segment-label {
  width: 100%;
  padding: 3px;
}
#main .filters .segment > span {
  align-self: center;
  font-weight: bold;
  padding: 0 0.5em;
  font-size: 1.1em;
}
#main .filters .segment > * {
  margin: 0 3px 3px 0;
}
#main .filters input[type=text],
#main .filters input[type=search],
#main .filters input[type=submit],
#main .filters select,
#main .filters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  width: auto;
  line-height: 1;
  padding: 0 0.5em;
  margin: 0 3px 3px 0;
  flex-grow: 1;
}
#main .filters input[type=submit] {
  justify-content: center;
}
#main .filters input[type=file] {
  width: auto;
  height: 3em;
  padding: 8px;
  flex-grow: 1;
}
#main .filters input[type=radio],
#main .filters input[type=checkbox] {
  display: none;
}
#main .filters label {
  text-align: center;
  background-color: rgba(80, 80, 80, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  line-height: 1;
  padding: 0 0.5em;
  margin: 0;
  border-radius: 5px;
  cursor: pointer;
  flex-grow: 1;
}
#main .filters label:hover {
  background-color: rgb(80, 80, 80);
  color: rgb(238, 238, 238);
}
#main .filters input[type=radio]:checked + label,
#main .filters input[type=checkbox]:checked + label {
  background: rgb(28, 137, 182);
  color: rgb(238, 238, 238);
}
#main .filters input[type=radio].cancel:checked + label,
#main .filters input[type=checkbox].cancel:checked + label {
  background: rgb(236, 96, 68);
  color: rgb(183.3689320388, 46.0873786408, 18.6310679612);
}
#main .filters input[type=radio].pending:checked + label,
#main .filters input[type=checkbox].pending:checked + label {
  background: rgb(212, 174, 22);
  color: rgb(119.5897435897, 98.1538461538, 12.4102564103);
}
#main .filters input[type=radio].accept:checked + label,
#main .filters input[type=checkbox].accept:checked + label {
  background: rgb(62, 187, 135);
  color: rgb(36.6024096386, 110.3975903614, 79.6987951807);
}
#main {
  /* --------------------------------- Pagination */
}
#main .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 1em 0;
  border: 3px solid rgb(225.25, 225.25, 225.25);
  border-radius: 8px;
  padding: 5px 2px 2px 5px;
}
@media (max-width: 640px) {
  #main .pagination {
    flex-wrap: wrap;
  }
}
#main .pagination * {
  font-size: 12px;
}
#main .pagination .current {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}
@media (max-width: 640px) {
  #main .pagination .current {
    order: -1;
    width: 100%;
  }
}
#main .pagination .current select {
  width: auto;
  padding-right: 4em;
  margin: 0 3px 3px 0;
  flex-grow: 1;
}
#main .pagination .current input {
  margin: 0 3px 3px 0;
}
#main .pagination a {
  margin: 0 3px 3px 0;
}
@media (max-width: 640px) {
  #main .pagination a {
    flex-grow: 1;
  }
}
#main .pagination a.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ------------------------------------------------------------- CONTENT EDITOR */
/* Sortable Repeater Editor Page */
.sortable-repeater {
  padding: 0.5em;
  border: 3px solid rgb(225.25, 225.25, 225.25);
  border-radius: 8px;
}
.sortable-repeater .item {
  border-radius: 4px;
  padding: 1em;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  cursor: grab;
}
@media (max-width: 1280px) {
  .sortable-repeater .item {
    flex-direction: column;
  }
}
.sortable-repeater .item:hover {
  box-shadow: 0 0 0 2px rgb(28, 137, 182);
}
.sortable-repeater .item:not(:last-child) {
  margin: 0 0 0.5em 0;
}
.sortable-repeater .item .handle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1em;
}
.sortable-repeater .item .code-block, .sortable-repeater .item .code-block-full {
  min-height: 50vh;
}
@media (max-width: 1280px) {
  .sortable-repeater .item .code-block, .sortable-repeater .item .code-block-full {
    width: 100%;
  }
}
.sortable-repeater .item .code-block textarea, .sortable-repeater .item .code-block-full textarea {
  height: 100%;
  font-size: 12px;
  line-height: 24px;
  font-family: monospace;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
}
.sortable-repeater .item .code-block {
  width: 75%;
}
.sortable-repeater .item .code-block-full {
  width: 100%;
}
.sortable-repeater .item .image-block {
  position: relative;
  width: calc(25% - 1em);
  margin: 0 0 0 1em;
  padding: 1em 1em 5em 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(245.65, 245.65, 245.65);
  border-radius: 5px;
}
@media (max-width: 1280px) {
  .sortable-repeater .item .image-block {
    width: 100%;
    height: 50vh;
    margin: 1em 0 0 0;
  }
}
.sortable-repeater .item .image-block img {
  max-width: 100%;
  max-height: 100%;
}
.sortable-repeater .item .image-block .actions {
  position: absolute;
  bottom: 1em;
  left: 1em;
  right: 1em;
  width: auto;
}

/* EXPERIMENTAL

#editor-container {
  background: white;
  padding: 40px;
  border-radius: 25px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  min-height: calc(100vh - 10em);
  @include tablet {
    min-height: calc(100vh - 12em);
  }
  #editor-content {
    margin: 0 auto;
    max-width: 960px;
    .inspected {
      background-color: rgba($swatchAccent, 0.1);
    }
    & > *[contenteditable='true'] {
      &:focus {
        outline: none;
        border: none;
      }
      &::selection {
        background-color: $swatchAccent;
        color: white;
      }
    }
  }
}

*/
/* ------------------------------------------------------------- INSPECTOR */
#inspector .button {
  display: block;
  margin-bottom: 5px;
}
#inspector p {
  margin-bottom: 5px;
}
#inspector label {
  margin: 5px 0;
  cursor: pointer;
}
#inspector label.pending {
  color: rgb(212, 174, 22);
  background-color: rgba(212, 174, 22, 0.2);
}
#inspector label input,
#inspector label select {
  font-size: 1em;
}
#inspector label textarea {
  font-size: 0.8em;
  min-height: 10em;
}
#inspector label img {
  margin-bottom: 5px;
  padding: 5px;
  border: 3px solid rgb(225.25, 225.25, 225.25);
  border-radius: 8px;
}
#inspector .status {
  font-size: 0.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  border-radius: 1.5em;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background-color: rgb(199.75, 199.75, 199.75);
  margin-bottom: 5px;
}
#inspector .status.accept {
  background-color: rgb(62, 187, 135);
}
#inspector .status.cancel {
  background-color: rgb(236, 96, 68);
}
#inspector .status.pending {
  background-color: rgb(212, 174, 22);
}
#inspector .status.accent {
  background-color: rgb(28, 137, 182);
}
#inspector {
  /* radioset for selecting labels */
}
#inspector fieldset.labels {
  padding: 5px;
}
#inspector fieldset.labels label {
  font-size: 0.85em;
  padding: 1px 5px;
  border-radius: 10px;
  margin: 1px 0;
  background-color: rgba(80, 80, 80, 0.1);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#inspector fieldset.labels label input[type=radio] {
  margin-right: 5px;
}
#inspector fieldset.labels label.accept {
  background-color: rgb(62, 187, 135);
}
#inspector fieldset.labels label.cancel {
  background-color: rgb(236, 96, 68);
}
#inspector fieldset.labels label.pending {
  background-color: rgb(212, 174, 22);
}
#inspector fieldset.labels label.accent {
  background-color: rgb(28, 137, 182);
}

/* ------------------------------------------------------------- OTHER INTERFACE */
/* modals and notifications */
#modal,
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(80, 80, 80, 0.75);
  z-index: 1000;
}
#modal .modal-content,
.modal .modal-content {
  padding: 2em;
  margin: 20px;
  max-width: 480px;
  background: rgb(80, 80, 80);
  color: rgb(238, 238, 238);
  box-shadow: 0 5px 20px rgb(54.5, 54.5, 54.5);
  border: 3px solid rgb(225.25, 225.25, 225.25);
  border-radius: 10px;
  font-size: 1.25em;
  text-align: center;
}
#modal .modal-content p,
.modal .modal-content p {
  line-height: 1;
  margin-bottom: 1em;
}
#modal .modal-content .button,
.modal .modal-content .button {
  padding: 0.5em 1em;
}

#notification,
.notification {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: rgb(80, 80, 80);
  color: white;
  box-shadow: 0 5px 20px rgb(54.5, 54.5, 54.5);
  border-bottom: 1px solid rgb(54.5, 54.5, 54.5);
  transition: all 0.5s ease;
  z-index: 999;
}
#notification p,
.notification p {
  margin-bottom: 0;
}
#notification .button,
.notification .button {
  padding: 0.5em 1em;
}

/* Login Page */
#login-wrapper,
.login-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
#login-wrapper .loginContainer,
.login-wrapper .loginContainer {
  border: none;
  border: 3px solid rgb(225.25, 225.25, 225.25);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#login-wrapper .loginContainer label,
.login-wrapper .loginContainer label {
  width: 100%;
}
#login-wrapper .loginContainer .logo,
.login-wrapper .loginContainer .logo {
  width: 120px;
  margin: auto;
  margin-bottom: 15px;
}
#login-wrapper .loginContainer a#login-show-password,
.login-wrapper .loginContainer a#login-show-password {
  display: block;
  text-decoration: none;
  text-align: right;
  width: 100%;
  margin-bottom: 15px;
  font-size: 0.8em;
}
#login-wrapper .loginContainer a#login-show-password:hover::before, #login-wrapper .loginContainer a#login-show-password:focus::before,
.login-wrapper .loginContainer a#login-show-password:hover::before,
.login-wrapper .loginContainer a#login-show-password:focus::before {
  color: rgb(62, 187, 135);
}
#login-wrapper .loginContainer input,
.login-wrapper .loginContainer input {
  font-size: 1em;
}
#login-wrapper .loginContainer input#current-password[type=password] + a#login-show-password::before,
.login-wrapper .loginContainer input#current-password[type=password] + a#login-show-password::before {
  content: "show password";
}
#login-wrapper .loginContainer input#current-password[type=text] + a#login-show-password::before,
.login-wrapper .loginContainer input#current-password[type=text] + a#login-show-password::before {
  content: "hide password";
}
#login-wrapper .loginContainer a.login-recover,
.login-wrapper .loginContainer a.login-recover {
  display: block;
  text-decoration: none;
  text-align: right;
  width: 100%;
  margin-top: 10px;
  font-size: 0.8em;
}
#login-wrapper .loginContainer a.login-recover:hover, #login-wrapper .loginContainer a.login-recover:focus,
.login-wrapper .loginContainer a.login-recover:hover,
.login-wrapper .loginContainer a.login-recover:focus {
  color: rgb(62, 187, 135);
}
#login-wrapper a.powered-by,
.login-wrapper a.powered-by {
  max-width: 240px;
  margin-top: 10px;
}

/* Powered by VSM Site Engine Link */
a.powered-by {
  display: block;
  position: relative;
  width: 100%;
  height: 80px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672.58 132.75"><path d="M448.78,20.1A247.1,247.1,0,0,1,575.7,57.88a233.6,233.6,0,0,0-255.21-5A247,247,0,0,1,448.78,20.1Z" transform="translate(-22.61 -17.39)" /> <g> <path d="M48.34,124.82,22.61,53.9H38.72l19.45,53.49L77.62,53.9h16.1L68,124.82Z" transform="translate(-22.61 -17.39)" /> <path d="M121.68,126.13a34.6,34.6,0,0,1-11.45-1.9,28.8,28.8,0,0,1-9.57-5.47,20.53,20.53,0,0,1-5.92-8.53L109,105a6.51,6.51,0,0,0,2.25,2.84,14.65,14.65,0,0,0,4.44,2.25,19,19,0,0,0,6,.89,18.19,18.19,0,0,0,5.73-.89,11.51,11.51,0,0,0,4.35-2.46,4.82,4.82,0,0,0,1.67-3.64,4.32,4.32,0,0,0-1.74-3.52,13.59,13.59,0,0,0-4.46-2.23A35.93,35.93,0,0,0,121.68,97a57.22,57.22,0,0,1-13.8-3.67,23.28,23.28,0,0,1-9.62-7.07,18,18,0,0,1-3.52-11.45,18.79,18.79,0,0,1,3.74-11.62,25,25,0,0,1,9.91-7.78,31.94,31.94,0,0,1,13.29-2.78,34.72,34.72,0,0,1,11.47,1.9,28.26,28.26,0,0,1,9.6,5.49,20.27,20.27,0,0,1,5.88,8.61l-14.29,5.17A6.15,6.15,0,0,0,132.09,71a14.22,14.22,0,0,0-4.43-2.2,19.32,19.32,0,0,0-6-.87,16.49,16.49,0,0,0-5.62.87,12.19,12.19,0,0,0-4.41,2.48,4.69,4.69,0,0,0-1.72,3.54,5,5,0,0,0,1.62,4.08,9.78,9.78,0,0,0,4.28,1.9q2.65.56,5.85,1a50.85,50.85,0,0,1,13.42,3.8,26,26,0,0,1,9.83,7.29,17.09,17.09,0,0,1,3.7,11.1,18.9,18.9,0,0,1-3.72,11.62,24.9,24.9,0,0,1-9.86,7.78A32,32,0,0,1,121.68,126.13Z" transform="translate(-22.61 -17.39)" /> <path d="M151.67,124.82,165.44,53.9h13l15.9,41.84L210.22,53.9h13L237,124.82h-15.5l-7.39-38.3-14.49,38.3H189.05l-14.49-38.3-7.4,38.3Z" transform="translate(-22.61 -17.39)" /> <path d="M272.06,126.13a34.24,34.24,0,0,1-11-1.8,28.16,28.16,0,0,1-9.29-5.14,18.44,18.44,0,0,1-5.65-8l7.95-3a10.7,10.7,0,0,0,3.77,4.94,20.94,20.94,0,0,0,6.51,3.27,26.17,26.17,0,0,0,7.75,1.16,23.83,23.83,0,0,0,8.49-1.49A16.2,16.2,0,0,0,286.9,112a9.06,9.06,0,0,0,2.43-6.28,7.87,7.87,0,0,0-2.53-6,18.38,18.38,0,0,0-6.48-3.75,51.31,51.31,0,0,0-8.26-2.15,66,66,0,0,1-13.14-3.47,22,22,0,0,1-9.17-6.31q-3.37-4.05-3.37-10.69A17.13,17.13,0,0,1,250,62.46a23.41,23.41,0,0,1,9.45-7.14,31.63,31.63,0,0,1,12.66-2.53A34.48,34.48,0,0,1,283,54.54a28.56,28.56,0,0,1,9.34,5.09,19,19,0,0,1,5.83,8.15l-8.06,2.94a10.68,10.68,0,0,0-3.77-5,20.52,20.52,0,0,0-6.48-3.24,26.49,26.49,0,0,0-7.78-1.14,22.42,22.42,0,0,0-8.41,1.47,16.34,16.34,0,0,0-6.33,4.2,9,9,0,0,0-2.43,6.23q0,4.26,2.25,6.51a14,14,0,0,0,6.16,3.37,87.59,87.59,0,0,0,8.76,2,56.73,56.73,0,0,1,12.77,3.68,25.28,25.28,0,0,1,9.44,6.66,15.15,15.15,0,0,1,3.57,10.23,17.11,17.11,0,0,1-3.57,10.79,23.44,23.44,0,0,1-9.44,7.14A31.92,31.92,0,0,1,272.06,126.13Z" transform="translate(-22.61 -17.39)" /> <path d="M313,64.9a4.66,4.66,0,0,1-3.35-1.32,4.67,4.67,0,0,1,0-6.59,4.93,4.93,0,0,1,6.69,0,4.65,4.65,0,0,1,0,6.59A4.63,4.63,0,0,1,313,64.9Zm-4.31,9.26h8.51v50.66h-8.51Z" transform="translate(-22.61 -17.39)" /> <path d="M356.34,82.67H344.85l-.06,42.15h-8.51l.06-42.15h-8.72V74.16h8.72l-.06-15.9h8.51l.06,15.9h11.49Z" transform="translate(-22.61 -17.39)" /> <path d="M386.18,126.13a23.6,23.6,0,0,1-12.74-3.59,26.9,26.9,0,0,1-12.59-23.05,27.34,27.34,0,0,1,7.42-18.92,25.38,25.38,0,0,1,8.08-5.75,24.78,24.78,0,0,1,20.34.23,24.26,24.26,0,0,1,8.2,6.41A27.5,27.5,0,0,1,410,91a31,31,0,0,1,1.24,11.6H369.92a18.32,18.32,0,0,0,2.83,7.67,16.67,16.67,0,0,0,5.7,5.35,15.76,15.76,0,0,0,7.73,2,15,15,0,0,0,8.25-2.35,17.67,17.67,0,0,0,6-6.46l8.66,2a26.49,26.49,0,0,1-9.17,11A23.35,23.35,0,0,1,386.18,126.13ZM369.66,95.89h33A16.7,16.7,0,0,0,400,88.12,18.05,18.05,0,0,0,394,82.47a15.6,15.6,0,0,0-15.65,0,17.39,17.39,0,0,0-5.85,5.6A18.36,18.36,0,0,0,369.66,95.89Z" transform="translate(-22.61 -17.39)" /> <path d="M420.57,124.82V53.9h42.14v3h-39.1V85.31h33.22v3H423.61v33.43h39.1v3Z" transform="translate(-22.61 -17.39)" /> <path d="M513.26,96.75v28.07h-3V97a22.91,22.91,0,0,0-2.48-10.64,20.72,20.72,0,0,0-6.61-7.67,16,16,0,0,0-18.24,0,20.38,20.38,0,0,0-6.58,7.67A23,23,0,0,0,473.85,97v27.86h-3V74.16h3V84.5a24.43,24.43,0,0,1,7.83-8.66,19,19,0,0,1,21.14.25,23.73,23.73,0,0,1,7.55,8.81A26.71,26.71,0,0,1,513.26,96.75Z" transform="translate(-22.61 -17.39)" /> <path d="M565.73,74.16h3v53.19a19.1,19.1,0,0,1-2,8.48,26.57,26.57,0,0,1-13,12.44,21.33,21.33,0,0,1-8.74,1.87,21.56,21.56,0,0,1-10.15-2.56,27.1,27.1,0,0,1-8.38-6.76,22,22,0,0,1-4.66-9.12l2.83-1.31a18.27,18.27,0,0,0,4,8.35,24.06,24.06,0,0,0,7.49,6.08,18.91,18.91,0,0,0,8.86,2.28,18.61,18.61,0,0,0,7.6-1.64A23.41,23.41,0,0,0,559.3,141a22,22,0,0,0,4.68-6.33,16.34,16.34,0,0,0,1.75-7.34V113.06a23.92,23.92,0,0,1-8,9.45,20.6,20.6,0,0,1-12.11,3.62,23.66,23.66,0,0,1-9.82-2.07,25.27,25.27,0,0,1-8.08-5.75,27.57,27.57,0,0,1,0-37.74,25.27,25.27,0,0,1,8.08-5.75,23.66,23.66,0,0,1,9.82-2.07,20.72,20.72,0,0,1,12.11,3.59,23.77,23.77,0,0,1,8,9.47Zm-20.06,48.93a17.53,17.53,0,0,0,10.74-3.29,21.24,21.24,0,0,0,6.84-8.66,30,30,0,0,0,0-23.48A20.91,20.91,0,0,0,556.33,79a17.69,17.69,0,0,0-10.66-3.24A20.61,20.61,0,0,0,534.4,79a23.42,23.42,0,0,0-8,8.58,24.22,24.22,0,0,0-3,11.93,23.79,23.79,0,0,0,11.14,20.44A20.61,20.61,0,0,0,545.67,123.09Z" transform="translate(-22.61 -17.39)" /> <path d="M582.5,62.51a2.33,2.33,0,0,1-1.65-.63,2.05,2.05,0,0,1-.68-1.59,2,2,0,0,1,.68-1.62,2.36,2.36,0,0,1,1.65-.61,2.23,2.23,0,0,1,1.57.61,2,2,0,0,1,.65,1.57,2.19,2.19,0,0,1-2.22,2.27Zm-1.57,11.65h3v50.66h-3Z" transform="translate(-22.61 -17.39)" /> <path d="M637.55,96.75v28.07h-3V97A22.91,22.91,0,0,0,632,86.32a20.63,20.63,0,0,0-6.61-7.67,16,16,0,0,0-18.23,0,20.4,20.4,0,0,0-6.59,7.67A23,23,0,0,0,598.15,97v27.86h-3V74.16h3V84.5A24.5,24.5,0,0,1,606,75.84a19,19,0,0,1,21.15.25,23.7,23.7,0,0,1,7.54,8.81A26.71,26.71,0,0,1,637.55,96.75Z" transform="translate(-22.61 -17.39)" /> <path d="M670,126.13a23.6,23.6,0,0,1-12.74-3.59,26.9,26.9,0,0,1-12.59-23.05,27.34,27.34,0,0,1,7.42-18.92,25.49,25.49,0,0,1,8.08-5.75A23.71,23.71,0,0,1,670,72.75a24.32,24.32,0,0,1,10,2,23.55,23.55,0,0,1,7.95,5.78,27.06,27.06,0,0,1,5.29,8.94,34.93,34.93,0,0,1,2,11.52H647.68a24.89,24.89,0,0,0,3.62,11.32,23.48,23.48,0,0,0,8,7.88,21.37,21.37,0,0,0,22.34-.56,24.13,24.13,0,0,0,8.2-9.52l3,.71a26.42,26.42,0,0,1-9.17,11A23.35,23.35,0,0,1,670,126.13ZM647.68,98h44.47a22.43,22.43,0,0,0-3.24-11,23.76,23.76,0,0,0-8-8.13,21.29,21.29,0,0,0-21.86-.08,23.42,23.42,0,0,0-7.92,8A24.37,24.37,0,0,0,647.68,98Z" transform="translate(-22.61 -17.39)" /> </g> </svg> ');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.1;
}
a.powered-by::before {
  content: "powered by";
  font-size: 10px;
  position: absolute;
  top: 10px;
  left: 5%;
  color: black;
}
a.powered-by:hover, a.powered-by:focus {
  outline: none;
  border: none;
  opacity: 0.2;
}

/* loading overlay */
body::before {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(80, 80, 80, 0.8);
  transform: translateY(-100vh);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}
body::after {
  content: "";
  position: fixed;
  width: 120px;
  height: 120px;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  border: 12px dotted rgba(238, 238, 238, 0.8);
  border-radius: 50%;
  transform: translateY(-100vh);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}
body.loading::before {
  transform: translateY(0);
  opacity: 1;
  z-index: 998;
}
body.loading::after {
  transform: translateY(0);
  opacity: 1;
  animation-name: loading-spin;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 999;
}

@keyframes loading-spin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
/* ------------------------------------------------ DEPRECATED */
#main {
  /* old filter bar */
}
#main .filterBar {
  display: flex;
  align-items: flex-end;
  margin-bottom: 2em;
  border: 3px solid rgb(225.25, 225.25, 225.25);
  border-radius: 8px;
  padding: 5px;
}
@media (max-width: 960px) {
  #main .filterBar {
    flex-direction: column;
  }
}
#main .filterBar label {
  width: 100%;
  margin-right: 3px;
  margin-bottom: 0;
}
#main .filterBar input[type=text],
#main .filterBar input[type=search] {
  margin: 0;
  padding: 0.5em;
}
#main .filterBar .button,
#main .filterBar input[type=submit] {
  margin-left: 3px;
  padding: 0.5em;
}
#main .filterBar select {
  margin: 0;
  padding: 0.5em;
}
#main .filterBar fieldset {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  margin: 0;
  padding: 0 1em 0 0;
  border: none;
  width: 100%;
}
@media (max-width: 960px) {
  #main .filterBar fieldset {
    padding-right: 0;
    margin-bottom: 0.5em;
  }
}
#main .filterBar fieldset.checklist {
  position: relative;
}
#main .filterBar fieldset.checklist .button {
  width: 100%;
}
#main .filterBar fieldset.checklist .button.open + .dropdown {
  display: block;
}
#main .filterBar fieldset.checklist .dropdown {
  display: none;
  position: absolute;
  z-index: 900;
  left: 0;
  right: 1em;
  top: 2.25em;
  background: white;
  padding: 5px 5px 3px 5px;
  border: 3px solid rgb(225.25, 225.25, 225.25);
  border-radius: 8px;
}
#main .filterBar fieldset.checklist .dropdown label {
  margin-bottom: 2px;
}
#main .filterBar fieldset legend {
  background: transparent;
  padding: 0;
}
#main .filterBar fieldset input[type=radio],
#main .filterBar fieldset input[type=checkbox] {
  display: none;
}
#main .filterBar fieldset label {
  line-height: 1;
  text-align: center;
  font-size: 0.75em;
  display: inline-block;
  background-color: rgba(80, 80, 80, 0.1);
  border-radius: 5px;
  margin-right: 2px;
  padding: 0.75em 0.5em;
  cursor: pointer;
  flex-grow: 1;
}
#main .filterBar fieldset label:hover {
  background-color: rgb(80, 80, 80);
  color: rgb(238, 238, 238);
}
#main .filterBar fieldset input[type=radio]:checked + label,
#main .filterBar fieldset input[type=checkbox]:checked + label {
  background: rgb(28, 137, 182);
  color: rgb(238, 238, 238);
  cursor: default;
}
#main .filterBar fieldset input[type=radio].cancel:checked + label,
#main .filterBar fieldset input[type=checkbox].cancel:checked + label {
  background: rgb(236, 96, 68);
  color: rgb(183.3689320388, 46.0873786408, 18.6310679612);
}
#main .filterBar fieldset input[type=radio].pending:checked + label,
#main .filterBar fieldset input[type=checkbox].pending:checked + label {
  background: rgb(212, 174, 22);
  color: rgb(119.5897435897, 98.1538461538, 12.4102564103);
}
#main .filterBar fieldset input[type=radio].accept:checked + label,
#main .filterBar fieldset input[type=checkbox].accept:checked + label {
  background: rgb(62, 187, 135);
  color: rgb(36.6024096386, 110.3975903614, 79.6987951807);
}
#main .row {
  display: flex;
  margin-bottom: 1em;
}
#main .row label {
  width: 100%;
}
#main .row label:not(:last-child) {
  margin-right: 5px;
}
#main label {
  display: block;
  margin-bottom: 0.5em;
}
#main label input {
  line-height: 1;
  font-size: 18px;
  padding: 10px;
}
#main label select {
  line-height: 1;
  font-size: 18px;
  padding: 12px 10px;
  background-size: 15px 15px;
}

/* ---------- Password Requirements Checklist */
li.met {
  color: rgb(62, 187, 135);
}/*# sourceMappingURL=style.css.map */