stylesheet-all.css

/* stylesheet v0.8 - https://github.com/DiemenDesign/stylesheet */

@charset "UTF-8";

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --body-background-color: #fff;
  --color: #000;
  --color-muted: #6c757d;
  --link-color: #0044ff;
  --link-color-hover: #0056b3;
  --content-background-color: #920de90b;
  --content-border-color: #007bff;
  --box-shadow-color: #f4f4f4;
  --border-radius: .25rem;
  --border-color: #e9e9e9;
  --border-width: 1px;
  --mark-background-color: #ff0;

  --menu-background-color: #fff;
  --menu-background-color-hover: #ddd;
  --menu-background-color-active: #ccc;
  --menu-color: #444;
  --menu-color-active: #000;
  --menu-link-color: #444;
  --menu-link-color-hover: #666;
  --menu-link-color-active: #000;
  --menu-dropdown-background-color: #fff;
  --menu-dropdown-border-color: #e9e9e9;

  --button-color: #fff;
  --button-color-hover: #f5f5f5;
  --button-background-color: #007bff;
  --button-background-color-hover: #0069d9;
  --button-border-color: #007bff;
  --button-border-color-hover: #0069d9;

  --table-background-color: #fff;
  --table-color: #000;
  --table-head-background-color: #000;
  --table-head-color: #fff;
  --table-border-color: #e9e9e9;
  --table-zebra-background: #f9f9f9;

  --form-border-color: #ced4da;
  --form-border-color-hover: #007bff;
  --form-color: #495057;
  --form-placeholder-color: #999;
  --form-focus-color: #495057;
  --form-focus-border-color: #8bbafe;
  --form-focus-shadow: rgba(13, 110, 253, .25);
  --form-required-color: #dc3545;
  --form-required-border-color: #dc3545;
  --form-focus-required-shadow: rgba(253, 110, 13, .25);
  --form-valid-color: #28a745;
  --form-valid-border-color: #28a745;
  --form-valid-shadow: rgba(40, 167, 69, .25);

  --slidertron-height: 400px;
  --slidertron-background-color: #ddd;

  --jumbotron-background-color: #ddd;

  --badge-background-color: #5755d9;
  --badge-color: #fff;

  --dialog-background-color: #fff;
  --dialog-border-color: #e9e9e9;
  --dialog-border-radius: .25rem;
  --dialog-min-width: 460px;
  --dialog-max-width: 800px;

  --tooltip-background-color: #000;
  --tooltip-color: #fff;

  --primary-background-color: #cfe2ff;
  --primary-border-color: #bbd6fe;
  --primary-color: #073984;
  --primary-link: #042454;
  --secondary-background-color: #e2e3e5;
  --secondary-border-color: #d6d8db;
  --secondary-color: #383d41;
  --secondary-link: #202326;
  --default-background-color: #ddd;
  --default-border-color: #ced4da;
  --default-color: #000;
  --default-link: #000;
  --info-background-color: #d1ecf1;
  --info-border-color: #bee5eb;
  --info-color: #0c5460;
  --info-link: #062c33;
  --success-background-color: #d4edda;
  --success-border-color: #c3e6cb;
  --success-color: #15572f;
  --success-link: #0b2e13;
  --warning-background-color: #fff3cd;
  --warning-border-color: #ffeeba;
  --warning-color: #856404;
  --warning-link: #533f03;
  --danger-background-color: #f8d7da;
  --danger-border-color: #f5c6cb;
  --danger-color: #721c24;
  --danger-link: #491217;

  --code-background-color: #f8f9fa;
  --code-color: #000;
  --code-border-color: #e9e9e9;

  --justify-important: center;
  --justify-normal: left;

  --width-card: 285px;
  --width-card-medium: 460px;
  --width-card-wide: 800px;
  --width-content: 100%;

  --spacing-1: .25rem !important;
  --spacing-2: .5rem !important;
  --spacing-3: 1rem !important;
  --spacing-4: 1.5rem !important;
  --spacing-5: 3rem !important; }

@media (prefers-color-scheme: dark) {
  :root {
    --body-background-color: #333;
    --color: #f7f7f7;
    --color-muted: #aaa;
    --link-color: #007bff;
    --link-color-hover: #0056b3;
    --content-background-color: #555;
    --content-border-color: #007bff;
    --box-shadow-color: #bbbbbb10;
    --border-color: #444;

    --menu-background-color: #343a40;
    --menu-background-color-hover: #454b51;
    --menu-background-color-active: #454b51;
    --menu-color: #fff;
    --menu-color-active: ;
    --menu-link-color: #ffffff80;
    --menu-link-color-hover: #ffffff40;
    --menu-link-color-active: #fff;
    --menu-dropdown-background-color: #343a40;
    --menu-dropdown-border-color: #666;

    --table-background-color: #444;
    --table-color: #fff;
    --table-head-background-color: #000;
    --table-head-color: #fff;
    --table-border-color: #666;
    --table-zebra-background: #555;

    --jumbotron-background-color: #222;

    --code-background-color: #222;
    --code-color: #fff;
    --code-border-color: #666; }
}

/*  Extra small devices (portrait phones, less than 576px)
    No media query for `xs` since this is the default.
    Obviously you can set custom breakpoints, these are here to
    help faciliate ease of use.
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

* {
  box-sizing: border-box; }

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important; }

/* Head */
base,
DOCTYPE,
head,
link,
meta,
noscript,
style,
script,
title {
  display: none; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  line-height: 1.5; }

/* Sections */
article {}

article aside {
  border-left: 4px solid var(--content-border-color);
  background: var(--content-background-color);
  padding: .01rem .8rem; }

article header {
  padding-top: 0; }

article footer {}

aside {}

body {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  margin: 0;
  background: var(--body-background-color);
  padding: 0;
  overflow-x: hidden;
  color: var(--color);
  font-weight: 400;
  font-size: 1rem;
  font-family: var(--font);
  line-height: 1.5; }

/* Dialog*/
dialog {
  display: block;
  position: fixed;
  top: 50%;
  right: 0;
  left: 0;
  transform: translate(0, -50%);
  margin: auto;
  outline: 0;
  border: 0;
  border-radius: var(--dialog-border-radius);
  background: #fff;
  padding: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  min-width: var(--dialog-min-width);
  max-width: var(--dialog-max-width);
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  pointer-events: auto;
  color: #000; }

dialog[open] {
  -webkit-animation: dialog-show .45s cubic-bezier(.5, .61, .355, 1) normal;
          animation: dialog-show .45s cubic-bezier(.5, .61, .355, 1) normal; }

dialog[open]::-webkit-backdrop {
  -webkit-animation: dialog-backdrop-show .45s cubic-bezier(.5, .61, .355, 1) normal;
          animation: dialog-backdrop-show .45s cubic-bezier(.5, .61, .355, 1) normal; }

dialog[open]::backdrop {
  -webkit-animation: dialog-backdrop-show .45s cubic-bezier(.5, .61, .355, 1) normal;
          animation: dialog-backdrop-show .45s cubic-bezier(.5, .61, .355, 1) normal; }

dialog:not([open]) {
  display: none; }

dialog::-webkit-backdrop {
  z-index: 1050;
  background-color: rgba(0, 0, 0, .4); }

dialog::backdrop {
  z-index: 1050;
  background-color: rgba(0, 0, 0, .4); }

dialog + .backdrop {
  background-color: rgba(0, 0, 0, .4); }

dialog header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0;
  border-bottom: 1px solid var(--dialog-border-color);
  border-top-right-radius: var(--dialog-border-radius);
  border-top-left-radius: var(--dialog-border-radius);
  background-color: var(--dialog-background-color);
  padding: 1rem;
  width: 100%; }

dialog header .close {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  opacity: .5;
  margin: -1rem -1rem -1rem auto;
  border: 0;
  background-color: transparent;
  padding: 1rem 1rem;
  color: #000;
  font-weight: 700;
  font-size: calc(1.275rem + .3vw);
  line-height: 1;
  text-shadow: 0 1px 0 #fff; }

dialog header .close:focus,
dialog header .close:hover {
  opacity: .75;
  box-shadow: none;
  color: #000;
  text-decoration: none; }

dialog header h1,
dialog header h2,
dialog header h3,
dialog header h4,
dialog header h5,
dialog header h6 {
  margin: 0;
  padding: 0; }

dialog p,
dialog section {
  display: block;
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
  overflow-y: auto; }

dialog footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  border-top: 1px solid var(--dialog-border-color);
  border-bottom-right-radius: var(--dialog-border-radius);
  border-bottom-left-radius: var(--dialog-border-radius);
  padding: .75rem; }

@-webkit-keyframes dialog-show {
  0% {
    transform: translateY(-25%);
    opacity: 0; }

  50% {
    opacity: 1; }

  100% {
    transform: translateY(-50%);
    opacity: 1; }
}

@keyframes dialog-show {
  0% {
    transform: translateY(-25%);
    opacity: 0; }

  50% {
    opacity: 1; }

  100% {
    transform: translateY(-50%);
    opacity: 1; }
}

@-webkit-keyframes dialog-backdrop-show {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; }
}

@keyframes dialog-backdrop-show {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; }
}

/* Blocks */
div {}

div header {
  padding-top: 0; }

header,
footer,
main {
  margin: 0 auto;
  padding: 2rem 1rem;
  max-width: var(--width-content); }

main {
  display: block; }

main header {
  padding-top: 0; }

header {
  text-align: var(--justify-important); }

header nav img {
  margin: 1rem 0; }

address,
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--justify-important);
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit; }

address aside,
footer aside {
  margin: .5rem;
  padding: .25rem;
  width: var(--width-card); }

address {
  margin: 0;
  background-color: var(--body-background-color);
  color: var(--color); }

footer {
  margin: 0;
  background-color: var(--body-background-color);
  color: var(--color); }

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--justify-important); }

section article,
section aside {
  position: relative;
  margin: 1rem;
  box-shadow: 2px 2px 10px var(--box-shadow-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1.25rem;
  width: var(--width-card);
  overflow: hidden; }

section article,
section aside img {
  max-width: 100%; }

section header {
  padding-top: 0;
  width: 100%; }

template {
  display: none; }

/* Navigation */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  font-weight: 700; }

nav ul {
  padding: 0;
  list-style: none; }

nav ul li {
  display: inline-block;
  position: relative;
  margin: 0 .5rem;
  text-align: left; }

nav ul li:hover ul {
  display: block; }

nav ul li ul {
  display: none;
  position: absolute;
  top: 1.7rem;
  right: 0;
  z-index: 1000;
  box-shadow: 2px 2px 10px var(--box-shadow-color);
  border: 1px solid var(--menu-dropdown-border-color);
  border-radius: var(--border-radius);
  background-color: var(--menu-dropdown-background-color);
  padding: .5rem 1rem;
  width: auto;
  height: auto;
  white-space: nowrap; }

nav ul li ul li,
nav ul li ul li a {
  display: block; }

/* Table */
caption {
  padding-top: .5rem;
  padding-bottom: .5rem;
  caption-side: top;
  color: var(--color);
  text-align: left; }

col {}

colgroup {}

table {
  vertical-align: top;
  margin-bottom: 1rem;
  border-collapse: collapse;
  width: 100%;
  caption-side: bottom;
  color: var(--table-color); }

tbody {
  vertical-align: inherit; }

tr {
  border-right: 1px solid var(--table-border-color); }

td,
th {
  border-bottom: 1px solid var(--table-border-color);
  border-left: 1px solid var(--table-border-color);
  padding: .5rem;
  text-align: var(--justify-important); }

th {
  text-align: inherit;
  text-align: -webkit-match-parent; }

thead {
  margin: 0;
  border-radius: var(--border-radius);
  border-collapse: collapse;
  background-color: var(--table-head-background-color);
  padding: 0;
  color: var(--table-head-color); }

  thead tr {
    border: 0; }

  thead th {
    vertical-align: bottom;
    border: 0;
    border-bottom-color: var(--table-border-color); }

  thead th:first-child {
    border-top-left-radius: 5px; }

  thead th:last-child {
    border: 0;
    border-top-right-radius: 5px; }

  thead th:first-child,
  tr td:first-child {
    text-align: var(--justify-normal); }

table tr:nth-child(even) {
  background-color: var(--table-zebra-background); }

tfoot {}

/* Form */
button,
.btn,
[role="button"],
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

[role="button"]:disabled,
button:disabled,
.btn:disabled,
input:disabled {
  opacity: .65;
  cursor: not-allowed; }

[role="button"][disabled]:hover,
button[disabled]:hover,
.btn[disabled]:hover, {
  -webkit-filter: none;
          filter: none; }

[role="button"],
button,
.btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: inline-block;
  vertical-align: middle;
  transition: color .15s ease-in-out,
              background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
  margin: 0;
  border: 1px solid var(--button-border-color);
  border-radius: var(--border-radius);
  background-color: var(--button-background-color);
  padding: .375rem .75rem;
  color: var(--button-color);
  font-weight: 400;
  font-size: 1rem;
  font-family: var(--font);
  line-height: 1.5;
  user-select: none;
  text-align: center;
  text-decoration: none; }

[role="button"]:hover,
button:hover,
.btn:hover {
  cursor: pointer;
  border-color: var(--button-background-color-hover);
  background-color: var(--button-background-color-hover);
  color: var(--button-color-hover);
  text-decoration: none; }

[role="button"]:focus,
.btn:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none!important;
  box-shadow:0 0 0 .2rem var(--form-focus-shadow);
  border-width: 1px!important;
  border-color: var(--form-focus-border-color); }

datalist {}

form {
  display: block;
  padding: 1.5rem;
  min-width: var(--width-card);
  max-width: var(--width-card-wide);
  text-align: var(--justify-normal); }

  form header {
    margin: 1.5rem 0;
    padding: 1.5rem 0; }

fieldset {
  margin: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius); }

  fieldset legend {
    padding: .2em 0;
    color: var(--color-text);
    font-weight: 700; }

label {
  display: block;
  margin: 1rem 0 0 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit; }

input,
select,
textarea {
  display: block;
  transition: border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
  border: 1px solid var(--form-border-color);
  border-radius: var(--border-radius);
  background-clip: padding-box;
  background-color: transparent;
  padding: .375rem .75rem;
  width: 100%;
  color: var(--form-color);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  input,
  select,
  textarea {
    transition: none; }
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem var(--form-focus-shadow);
  border-color: var(--form-focus-border-color);
  background-color: transparent;
  color: var(--form-color); }

input[readonly],
textarea[readonly] {
  background-color: var(--form-border-color); }

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  color: var(--form-placeholder-color); }

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  color: var(--form-placeholder-color); }

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  color: var(--form-placeholder-color); }

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  opacity: 1;
  color: var(--form-placeholder-color); }

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
  opacity: 1;
  color: var(--form-placeholder-color); }

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: var(--form-placeholder-color); }

label {
  display: inline-block;
  margin-bottom: .5rem;
  font-weight: 700; }

keygen {}

legend {
  float: left;
  margin-bottom: .5rem;
  padding: 0;
  width: 100%;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
  white-space: normal; }

meter {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--body-background-color);
  width: 100%;
  color: var(--button-color); }

meter::-webkit-meter-bar {
  border-radius: var(--border-radius);
  background: none;
  background-image: -webkit-linear-gradient(45deg,
                      rgba(255, 255, 255, .15) 25%,
                      transparent 25%,
                      transparent 50%,
                      rgba(255, 255, 255, .15) 50%,
                      rgba(255, 255, 255, .15) 75%,
                      transparent 75%, transparent),
                      -webkit-linear-gradient(left, var(--btn-color-bg), var(--btn-color-bg)
                    );
  background-size: 1rem 1rem; }

meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
  border-radius: var(--border-radius);
  background-image: linear-gradient(
                      90deg,
                      #8bcf69 5%,
                      #e6d450 5%,
                      #e6d450 15%,
                      #f28f68 15%,
                      #f28f68 55%,
                      #cf82bf 55%,
                      #cf82bf 95%,
                      #719fd1 95%,
                      #719fd1 100%
                    );
  background-size: 100% 100%; }

meter::-webkit-meter-optimum-value {
  -webkit-transition: width .5s; }

meter::-webkit-meter-optimum-value:hover {
  -webkit-transition: width .5s;
  transition: width .5s;
  background-image: linear-gradient(
                      90deg,
                      #8bcf69 20%,
                      #e6d450 20%,
                      #e6d450 40%,
                      #f28f68 40%,
                      #f28f68 60%,
                      #cf82bf 60%,
                      #cf82bf 80%,
                      #719fd1 80%,
                      #719fd1 100%
                    );
  width: 100% !important; }

meter::-webkit-meter-suboptimum-value {
  border-radius: var(--border-radius);
  background-image: -webkit-linear-gradient(
                      45deg,
                      rgba(255, 255, 255, .15) 25%,
                      transparent 25%,
                      transparent 50%,
                      rgba(255, 255, 255, .15) 50%,
                      rgba(255, 255, 255, .15) 75%,
                      transparent 75%,
                      transparent
                    ),
                    -webkit-linear-gradient(
                      left,
                      var(--btn-color-bg),
                      var(--btn-color-bg)
                    );
  background-size: 1rem 1rem; }

meter::-webkit-meter-even-less-good-value  {
  background: #cc4600; }

meter::-moz-meter-bar {
  box-shadow: 0 5px 5px -5px #999 inset;
  border-radius: var(--border-radius);
  background-image: linear-gradient(
                      90deg,
                      #8bcf69 5%,
                      #e6d450 5%,
                      #e6d450 15%,
                      #f28f68 15%,
                      #f28f68 55%,
                      #cf82bf 55%,
                      #cf82bf 95%,
                      #719fd1 95%,
                      #719fd1 100%
                    );
  background-size: 100% 100%; }

meter:-moz-meter-optimum::-moz-meter-bar {
  border-radius: var(--border-radius);
  background-image: -webkit-linear-gradient(
                      45deg,
                      rgba(255, 255, 255, .15) 25%,
                      transparent 25%,
                      transparent 50%,
                      rgba(255, 255, 255, .15) 50%,
                      rgba(255, 255, 255, .15) 75%,
                      transparent 75%,
                      transparent
                    ),
                    -webkit-linear-gradient(
                      left,
                      var(--btn-color-bg),
                      var(--btn-color-bg)
                    );
  background-size: 1rem 1rem; }

meter:-moz-meter-sub-optimum::-moz-meter-bar {
  border-radius: var(--border-radius);
  background-image: -webkit-linear-gradient(
                      45deg,
                      rgba(255, 255, 255, .15) 25%,
                      transparent 25%,
                      transparent 50%,
                      rgba(255, 255, 255, .15) 50%,
                      rgba(255, 255, 255, .15) 75%,
                      transparent 75%,
                      transparent
                    ),
                    -webkit-linear-gradient(
                      left,
                      var(--btn-color-bg),
                      var(--btn-color-bg)
                    );
  background-size: 1rem 1rem; }

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  border-radius: var(--border-radius);
  background-image: -webkit-linear-gradient(
                      45deg,
                      rgba(255, 255, 255, .15) 25%,
                      transparent 25%,
                      transparent 50%,
                      rgba(255, 255, 255, .15) 50%,
                      rgba(255, 255, 255, .15) 75%,
                      transparent 75%,
                      transparent
                    ),
                    -webkit-linear-gradient(
                      left,
                      var(--btn-color-bg),
                      var(--btn-color-bg)
                    );
  background-size: 1rem 1rem; }

optgroup {}

option {}

output {
  display: inline-block; }

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: baseline;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--button-background-color);
  width: 100%;
  color: var(--button-background-color); }

progress::-webkit-progress-bar {
  border-radius: var(--border-radius);
  background-color: var(--body-background-color); }

progress::-webkit-progress-value {
  border-radius: var(--border-radius);
  background-image: -webkit-linear-gradient(
                      45deg,
                      rgba(255, 255, 255, .15) 25%,
                      transparent 25%,
                      transparent 50%,
                      rgba(255, 255, 255, .15) 50%,
                      rgba(255, 255, 255, .15) 75%,
                      transparent 75%,
                      transparent
                    ),
                    -webkit-linear-gradient(
                      left,
                      var(--btn-color-bg),
                      var(--btn-color-bg)
                    );
  background-size: 1rem 1rem; }

progress::-moz-progress-bar {
  border-radius: var(--border-radius);
  background-image: -moz-linear-gradient(
                      45deg,
                      rgba(255, 255, 255, .15) 25%,
                      transparent 25%,
                      transparent 50%,
                      rgba(255, 255, 255, .15) 50%,
                      rgba(255, 255, 255, .15) 75%,
                      transparent 75%,
                      transparent
                    ),
                    -moz-linear-gradient(
                      left,
                      var(--btn-color-bg),
                      var(--btn-color-bg)
                    );
  background-size: 1rem 1rem; }

select {
  text-transform: none;
  word-wrap: normal; }

[list]::-webkit-calendar-picker-indicator {
  display: none; }

::-moz-focus-inner {
  border-style: none;
  padding: 0; }

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: textfield; }

input[type="color"] {
  min-height: calc(1.5em + .75rem + 2px); }

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  border-width: 1px;
  border-color: var(--border-color);
  border-radius: 0.25rem;
  background-origin: border-box;
  background-color: #fff;
  width: 1em;
  height: 1em;
  user-select: none; }

input[type="checkbox"] {
  border-radius: var(--border-radius); }

input[type="radio"] {
  border-radius: 50%; }

input[type="checkbox"]:active,
input[type="radio"]:active {
  outline: 0;
  border-color: var(--border-color);
  background-color: transparent;
  color: var(--form-color); }

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 0;
  border-color: var(--form-focus-border-color);
  background-color: transparent;
  color: var(--form-color); }

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  border-color: var(--button-border-color);
  background-position: center center;
  background-size: 1rem;
  background-repeat: no-repeat;
  background-color: var(--button-background-color); }

input[type="checkbox"]:checked {
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: currentColor; }

input[type="radio"]:checked {
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: currentColor; }

input[type="checkbox"]:indeterminate {
  border-color: var(--btn-color-bg);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
  background-position: center center;
  background-size: 1em;
  background-repeat: no-repeat;
  background-color: #0d6efd; }

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  -webkit-filter: none;
  opacity: .5;
  filter: none;
  pointer-events: none; }

input[type="checkbox"][disabled],
input[type="radio"][disabled] ~ label,
input[type="checkbox"]:disabled,
input[type="radio"]:disabled ~ label {
  opacity: .5; }

input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border: 0;
  background-color: transparent;
  padding: 0;
  width: 100%;
  height: 1.4rem; }

input[type="range"]:focus {
  outline: none;
  box-shadow: none;
  border: 0; }

input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff,
              0 0 0 .2rem rgba(13, 110, 253, .25); }

input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff,
              0 0 0 .2rem rgba(13, 110, 253, .25); }

input[type="range"]:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #fff,
              0 0 0 .2rem rgba(13, 110, 253, .25); }

input[type="range"]::-moz-focus-outer {
  border: 0; }

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  -webkit-transition: background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
  transition: background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
  margin-top: -.25rem;
  border: 0;
  border-radius: 1rem;
  background-color: var(--button-background-color);
  width: 1rem;
  height: 1rem; }

@media (prefers-reduced-motion: reduce) {
  input[type="range"]::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none; }
}

input[type="range"]::-webkit-slider-thumb:active {
  background-color: var(--button-background-color); }

input[type="range"]::-webkit-slider-runnable-track {
  cursor: pointer;
  border-color: transparent;
  border-radius: var(--border-radius);
  background-color: var(--border-color);
  width: 100%;
  height: .5rem;
  color: transparent; }

input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  -moz-transition: background-color .15s ease-in-out,
                   border-color .15s ease-in-out,
                   box-shadow .15s ease-in-out;
  transition: background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
  border: 0;
  border-radius: 1rem;
  background-color: var(--button-background-color);
  width: 1rem;
  height: 1rem; }

@media (prefers-reduced-motion: reduce) {
  input[type="range"]::-moz-range-thumb {
    -moz-transition: none;
    transition: none; }
}

input[type="range"]::-moz-range-thumb:active {
  background-color: var(--button-background-color); }

input[type="range"]::-moz-range-track {
  cursor: pointer;
  border-color: transparent;
  border-radius: var(--border-radius);
  background-color: var(--border-color);
  width: 100%;
  height: .5rem;
  color: transparent; }

input[type="range"]::-ms-thumb {
  appearance: none;
  -ms-transition: background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
  transition: background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
  margin-top: 0;
  margin-right: .2rem;
  margin-left: .2rem;
  border: 0;
  border-radius: var(--border-radius);
  background-color: var(--button-background-color);
  width: 1rem;
  height: 1rem; }

@media (prefers-reduced-motion: reduce) {
  input[type="range"]::-ms-thumb {
    -ms-transition: none;
    transition: none; }
}

input[type="range"]::-ms-thumb:active {
  background-color: var(button-background-color-hover); }

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

input[type="range"]::-ms-fill-lower {
  border-radius: var(--border-radius);
  background-color: var(--border-color); }

input[type="range"]::-ms-fill-upper {
  margin-right: 15px;
  border-radius: var(--border-radius);
  background-color: var(--border-color); }

input[type="range"]:disabled {
  pointer-events: none; }

input[type="range"]:disabled::-webkit-slider-thumb {
  background-color: var(button-background-color); }

input[type="range"]:disabled::-moz-range-thumb {
  background-color: var(button-background-color); }

input[type="range"]:disabled::-ms-thumb {
  background-color: var(button-background-color); }

input[type="file"] {
  position: relative;
  opacity: 0;
  z-index: 2;
  margin: 0;
  width: 100%;
  height: 100%; }

input[type="file"] + label {
  display: block;
  flex-shrink: 0;
  margin-left: -1px;
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  background-color: var(--button-background-color);
  padding: .375rem .75rem;
  color: var(--button-color);
  line-height: 1.5; }

input[type="file"] + label * {
  pointer-events: none; }

input[type="file"]:focus + label,
input[type="file"] + label:hover {
  background-color: var(--button-background-color-hover); }

input[type="file"]:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px; }

textarea {
  margin-bottom: 1rem;
  resize: vertical; }

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0; }

::-webkit-inner-spin-button {
  height: auto; }

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-color-swatch-wrapper {
  padding: 0; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

  /* Validation Classes */
input:required,
select:required,
textarea:required {
  border-color: var(--form-required-border-color);
  color: var(--form-required-color); }

input:required:valid,
textarea:required:valid {
  border-color: var(--form-valid-border-color);
  color: var(--form-valid-color); }

input:required:valid:focus,
textarea:required:valid:focus {
  box-shadow: 0 0 0 .2rem var(--form-valid-shadow);
  border-color: var(--form-valid-border-color);
  color: var(--form-valid-color); }

input:required:focus,
select:required:focus,
textarea:required:focus {
  box-shadow: 0 0 0 .2rem var(--form-focus-required-shadow); }

input:required::-moz-placeholder,
select:required::-moz-placeholder,
textarea:required::-moz-placeholder {
  color: var(--form-required-color); }

input:required::-ms-input-placeholder,
select:required::-ms-input-placeholder,
textarea:required::-ms-input-placeholder {
  color: var(--form-required-color); }

input:required::-moz-placeholder, select:required::-moz-placeholder, textarea:required::-moz-placeholder {
  color: var(--form-required-color); }

input:required:-ms-input-placeholder, select:required:-ms-input-placeholder, textarea:required:-ms-input-placeholder {
  color: var(--form-required-color); }

input:required::-ms-input-placeholder, select:required::-ms-input-placeholder, textarea:required::-ms-input-placeholder {
  color: var(--form-required-color); }

input:required::placeholder,
select:required::placeholder,
textarea:required::placeholder {
  color: var(--form-required-color); }

input:invalid:focus:not(:-moz-placeholder-shown) ~ .requirements {
  border: 0 2px 2px 2px;
  padding: 20px 30px 20px 50px;
  max-height: 200px; }

input:invalid:focus:not(:-ms-input-placeholder) ~ .requirements {
  border: 0 2px 2px 2px;
  padding: 20px 30px 20px 50px;
  max-height: 200px; }

input:invalid:focus:not(:placeholder-shown) ~ .requirements {
  border: 0 2px 2px 2px;
  padding: 20px 30px 20px 50px;
  max-height: 200px; }

form .requirements {
  transition: .28s;
  border: 0;
  padding:0;
  max-height: 0;
  overflow: hidden; }

/* Interactive */
command {}

details {
  display: block;
  margin: 1.3rem 0; }

details summary {
  display: list-item;
  cursor: pointer;
  font-weight: 700; }

details summary:focus {
  outline: none; }

menu {}

/* Edits */
del {}

ins {}

/* Embedded */
area {}

audio {}

canvas {}

embed {}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  vertical-align: middle; }

img {
  border-style: none; }

img,
video {
  max-width: 100%;
  height: auto; }

iframe {}

map {}

object {}

param {}

source {}

track {}

video {}

/* Class Additions */
  /* Footer Styling */
footer.pagefooter {
  margin: 0;
  background: #000;
  color: #fff; }
  
  /* Positioning */
.clearfix::after {
  display: block; /* Bootstrap 4 */
  clear: both;
  content: ''; }

.pull-left,  /* Bootstrap 3 */
.float-left {
  float: left; /* Bootstrap 4 */  }

.pull-right, /* Bootstrap 3 */
.float-right {
  float: right; /* Bootstrap 4 */  }

.float-none {
  float: none; /* Bootstrap 4 */ }

  /* Margin and Padding */
.mt-auto, /* Bootstrap 4 */
.margin-top-auto {
  margin-top: auto; }

.mr-auto, /* Bootstrap 4 */
.margin-right-auto {
  margin-right: auto; }

.mb-auto, /* Bootstrap 4 */
.margin-bottom-auto {
  margin-bottom: auto; }

.ml-auto, /* Bootstrap 4 */
.margin-left-auto {
  margin-left: auto; }

.mx-auto, /* Bootstrap 4 */
.margin-x-auto {
  margin-right: auto;
  margin-left: auto; }

.my-auto, /* Bootstrap 4 */
.margin-y-auto {
  margin-top: auto;
  margin-bottom: auto; }

.m-0, /* Bootstrap 4 */
.margin-0 {
  margin: 0; }

.mx-0, /* Bootstrap 4 */
.margin-x-0 {
  margin-right: 0;
  margin-left: 0; }

.my-0, /* Bootstrap 4 */
.margin-y-0 {
  margin-top: 0;
  margin-bottom:0; }

.mt-0, /* Bootstrap 4 */
.margin-top-0 {
  margin-top: 0; }

.mr-0, /* Bootstrap 4 */
.margin-right-0 {
  margin-right: 0; }

.mb-0, /* Bootstrap 4 */
.margin-bottom-0 {
  margin-bottom: 0; }

.ml-0, /* Bootstrap 4 */
.margin-left-0 {
  margin-left: 0; }

.m-1, /* Bootstrap 4 */
.margin-1 {
  margin: var(--spacing-1); }

.mx-1, /* Bootstrap 4 */
.margin-x-1 {
  margin-right: var(--spacing-1);
  margin-left: var(--spacing-1); }

.my-1, /* Bootstrap 4 */
.margin-y-1 {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1); }

.mt-1, /* Bootstrap 4 */
.margin-top-1 {
  margin-top: var(--spacing-1); }

.mr-1, /* Bootstrap 4 */
.margin-right-1 {
  margin-right: var(--spacing-1); }

.mb-1, /* Bootstrap 4 */
.margin-bottom-1 {
  margin-bottom: var(--spacing-1); }

.ml-1, /* Bootstrap 4 */
.margin-left-1 {
  margin-left: var(--spacing-1); }

.m-2, /* Bootstrap 4 */
.margin-2 {
  margin: var(--spacing-2); }

.mx-2, /* Bootstrap 4 */
.margin-x-2 {
  margin-right: var(--spacing-2);
  margin-left: var(--spacing-2); }

.my-2, /* Bootstrap 4 */
.margin-y-2 {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2); }

.mt-2, /* Bootstrap 4 */
.margin-top-2 {
  margin-top: var(--spacing-2); }

.mr-2, /* Bootstrap 4 */
.margin-right-2 {
  margin-right: var(--spacing-2); }

.mb-2, /* Bootstrap 4 */
.margin-bottom-2 {
  margin-bottom: var(--spacing-2); }

.ml-2, /* Bootstrap 4 */
.margin-left-2 {
  margin-left: var(--spacing-2); }

.m-3, /* Bootstrap 4 */
.margin-3 {
  margin: var(--spacing-3); }

.mx-3, /* Bootstrap 4 */
.margin-x-3 {
  margin-right: var(--spacing-3);
  margin-left: var(--spacing-3); }

.my-3, /* Bootstrap 4 */
.margin-y-3 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3); }

.mt-3, /* Bootstrap 4 */
.margin-top-3 {
  margin-top: var(--spacing-3); }

.mr-3, /* Bootstrap 4 */
.margin-right-3 {
  margin-right: var(--spacing-3); }

.mb-3, /* Bootstrap 4 */
.margin-bottom-3 {
  margin-bottom: var(--spacing-3); }

.ml-3, /* Bootstrap 4 */
.margin-left-3 {
  margin-left: var(--spacing-3); }

.m-4, /* Bootstrap 4 */
.margin-4 {
  margin: var(--spacing-4); }

.mx-4, /* Bootstrap 4 */
.margin-x-4 {
  margin-right: var(--spacing-4);
  margin-left: var(--spacing-4); }

.my-4, /* Bootstrap 4 */
.margin-y-4 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4); }

.mt-4, /* Bootstrap 4 */
.margin-top-4 {
  margin-top: var(--spacing-4); }

.mr-4, /* Bootstrap 4 */
.margin-right-4 {
  margin-right: var(--spacing-4); }

.mb-4, /* Bootstrap 4 */
.margin-bottom-4 {
  margin-bottom: var(--spacing-4); }

.ml-4, /* Bootstrap 4 */
.margin-left-4 {
  margin-left: var(--spacing-4); }

.m-5, /* Bootstrap 4 */
.margin-5 {
  margin: var(--spacing-5); }

.mx-5, /* Bootstrap 4 */
.margin-x-5 {
  margin-right: var(--spacing-5);
  margin-left: var(--spacing-5); }

.my-5, /* Bootstrap 4 */
.margin-y-5 {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5); }

.mt-5, /* Bootstrap 4 */
.margin-top-5 {
  margin-top: var(--spacing-5); }

.mr-5, /* Bootstrap 4 */
.margin-right-5 {
  margin-right: var(--spacing-5); }

.mb-5, /* Bootstrap 4 */
.margin-bottom-5 {
  margin-bottom: var(--spacing-5); }

.ml-5, /* Bootstrap 4 */
.margin-left-5 {
  margin-left: var(--spacing-5); }

.p-0, /* Bootstrap 4 */
.padding-0 {
  padding: 0; }

.px-0, /* Bootstrap 4 */
.padding-x-0 {
  padding-right: 0;
  padding-left: 0; }

.py-0, /* Bootstrap 4 */
.padding-y-0 {
  padding-top: 0;
  padding-bottom: 0; }

.pt-0, /* Bootstrap 4 */
.padding-top-0 {
  padding-top: 0; }

.pr-0, /* Bootstrap 4 */
.padding-right-0 {
  padding-right: 0; }

.pb-0, /* Bootstrap 4 */
.padding-bottom-0 {
  padding-bottom: 0; }

.pl-0, /* Bootstrap 4 */
.padding-left-0 {
  padding-left: 0; }

.p-1, /* Bootstrap 4 */
.padding-1 {
  padding: var(--spacing-1); }

.px-1, /* Bootstrap 4 */
.padding-x-1 {
  padding-right: var(--spacing-1);
  padding-left: var(--spacing-1); }

.py-1, /* Bootstrap 4 */
.padding-y-1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1); }

.pt-1, /* Bootstrap 4 */
.padding-top-1 {
  padding-top: var(--spacing-1); }

.pr-1, /* Bootstrap 4 */
.padding-right-1 {
  padding-right: var(--spacing-1); }

.pb-1, /* Bootstrap 4 */
.padding-bottom-1 {
  padding-bottom: var(--spacing-1); }

.pl-1, /* Bootstrap 4 */
.padding-left-1 {
  padding-left: var(--spacing-1); }

.p-2, /* Bootstrap 4 */
.padding-2 {
  padding: var(--spacing-2); }

.px-2, /* Bootstrap 4 */
.padding-x-2 {
  padding-right: var(--spacing-2);
  padding-left: var(--spacing-2); }

.py-2, /* Bootstrap 4 */
.padding-y-2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2); }

.pt-2, /* Bootstrap 4 */
.padding-top-2 {
  padding-top: var(--spacing-2); }

.pr-2, /* Bootstrap 4 */
.padding-right-2 {
  padding-right: var(--spacing-2); }

.pb-2, /* Bootstrap 4 */
.padding-bottom-2 {
  padding-bottom: var(--spacing-2); }

.pl-2, /* Bootstrap 4 */
.padding-left-2 {
  padding-left: var(--spacing-2); }

.p-3, /* Bootstrap 4 */
.padding-3 {
  padding: var(--spacing-3); }

.px-3, /* Bootstrap 4 */
.padding-x-3 {
  padding-right: var(--spacing-3);
  padding-left: var(--spacing-3); }

.py-3, /* Bootstrap 4 */
.padding-y-3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3); }

.pt-3, /* Bootstrap 4 */
.padding-top-3 {
  padding-top: var(--spacing-3); }

.pr-3, /* Bootstrap 4 */
.padding-right-3 {
  padding-right: var(--spacing-3); }

.pb-3, /* Bootstrap 4 */
.padding-bottom-3 {
  padding-bottom: var(--spacing-3); }

.pl-3, /* Bootstrap 4 */
.padding-left-3 {
  padding-left: var(--spacing-3); }

.p-4, /* Bootstrap 4 */
.padding-4 {
  padding: var(--spacing-4); }

.px-4, /* Bootstrap 4 */
.padding-x-4 {
  padding-right: var(--spacing-4);
  padding-left: var(--spacing-4); }

.py-4, /* Bootstrap 4 */
.padding-y-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4); }

.pt-4, /* Bootstrap 4 */
.padding-top-4 {
  padding-top: var(--spacing-4); }

.pr-4, /* Bootstrap 4 */
.padding-right-4 {
  padding-right: var(--spacing-4); }

.pb-4, /* Bootstrap 4 */
.padding-bottom-4 {
  padding-bottom: var(--spacing-4); }

.pl-4, /* Bootstrap 4 */
.padding-left-4 {
  padding-left: var(--spacing-4); }

.p-5, /* Bootstrap 4 */
.padding-5 {
  padding: var(--spacing-5); }

.px-5, /* Bootstrap 4 */
.padding-x-5 {
  padding-right: var(--spacing-5);
  padding-left: var(--spacing-5); }

.py-5, /* Bootstrap 4 */
.padding-y-5 {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5); }

.pt-5, /* Bootstrap 4 */
.padding-top-5 {
  padding-top: var(--spacing-5); }

.pr-5, /* Bootstrap 4 */
.padding-right-5 {
  padding-right: var(--spacing-5); }

.pb-5, /* Bootstrap 4 */
.padding-bottom-5 {
  padding-bottom: var(--spacing-5); }

.pl-5, /* Bootstrap 4 */
.padding-left-5 {
  padding-left: var(--spacing-5); }

  /* Display Classes */
.hide,    /* Bootstrap 2, 3 */
.hidden,  /* Bootstrap 3 */
.d-hide,  /* Spectre */
.d-none,  /* Bootstrap 4, Spectre */
.is-invisible, /* Foundatio 6 */
[hidden] {
  display: none; /* Foundation 6 */ }

.d-visible {
  visibility: visible; /* Spectre */ }

.d-invisible, /* Spectre */
.invisible {
  visibility: hidden; /* Bootstrap 2, 3 */ }

.d-inline {
  display: inline; /* Bootstrap 4 */ }

.d-inline-block {
  display: inline-block; /* Bootstrap 4 */ }

.is-visible, /* Foundation 6 */
.show, /* Bootstrap 2 */
.d-block {
  display: block; /* Bootstrap 4 */ }

.d-table {
  display: table; /* Bootstrap 4 */ }

.d-table-row {
  display: table-row; /* Bootstrap 4 */ }

.d-table-cell {
  display: table-cell; /* Bootstrap 4 */ }

.d-flex {
  display: flex; /* Bootstrap 4 */ }

.d-inline-flex {
  display: inline-flex; /* Bootstrap 4 */ }
/* Margin, Padding, positioning */


  /* Typography */
.ellipsis {
  text-overflow: ellipsis; }

.clip {
  text-overflow: clip; }

  /* Code Highlighting this is an extra only intended for the example page, you may however decide to use it */
pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: .875em; }

pre code {
  color: inherit;
  font-size: inherit;
  word-break: normal; }

code {
  color: #d63384;
  font-size: .875em;
  word-wrap: break-word; }

a > code {
  color: inherit; }
pre,
code,
kbd,
samp {
  font-size: 1em;
  font-family: var(--font-family-monospace); }

kbd {
  border-radius: var(--border-radius);
  background-color: #212529;
  padding: .2rem .4rem;
  color: #fff;
  font-size: .875em; }

  kbd kbd {
    padding: 0;
    font-weight: 700;
    font-size: 1em; }

code {
  border: 1px solid var(--code-border-color) !important;
  background-color: var(--code-background-color) !important;
  padding: 0 .5rem !important;
  color: var(--code-color);
  font-size: 1rem;
  word-wrap: break-word; }

code,
samp {
  display: inline-block;
  margin: 0 .1rem;
  border-radius: var(--border-radius);
  background-color: transparent;
  padding: 0 .5rem;
  color: var(--color);
  text-align: var(--justify-normal); }

rp {}

rt {}

ruby {
  color: var(--color-muted); }

figure.highlight {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  display: block;
  position: relative;
  margin: 2rem auto!important;
  border: 1px solid var(--code-border-color) !important;
  background-color: var(--code-background-color) !important;
  width: 80%; }

figure.highlight:before {
  display: block;
  position: absolute;
  top: -10px;
  left: 5px;
  border: 1px solid var(--code-border-color) !important;
  background-color: var(--code-background-color) !important;
  padding: .15em 1em;
  font-size: 10px;
  content: "CODE:"; }

figure.highlight pre code {
  border: 0 none !important;
  border-radius: 0;
  padding: 0 !important;
  color: inherit;
  font-size: 1rem;
  text-align: left !important;
  word-break: normal; }

figure.highlight code {
  margin: 10px 20px; }

figure.highlight code,
figure.highlight kbd,
figure.highlight pre,
figure.highlight samp {
  font-size: 1em;
  font-family: var(--font-family-monospace); }

    /* Element */
code .e {
  color: #2f6f9f; }
    /* Attribute */
code .a {
  color: #4f9fcf; }
    /* Attribute Value */
code .av {
  color: #d44950; }
    /* CSS Element */
code .csse {
  color: #f00; }
    /* CSS Attribute */
code .cssa {
  color: #44f; }
    /* CSS Attribute Value */
code .cssv {
  color: #282; }
    /* Comments */
code .comment {
  color: #888; }

@media print {
  .d-print-none {
    display: none !important; }
  .d-print-inline {
    display: inline !important; }
  .d-print-inline-block {
    display: inline-block !important; }
  .d-print-block {
    display: block !important; }
  .d-print-table {
    display: table !important; }
  .d-print-table-row {
    display: table-row !important; }
  .d-print-table-cell {
    display: table-cell !important; }
  .d-print-flex {
    display: flex !important; }
  .d-print-inline-flex {
    display: inline-flex !important; }
}

blockquote {
  margin-left: 0;
  border-left: .1rem solid var(--border-color);
  padding: .4rem .8rem; }

blockquote p:last-child {
  margin-bottom: 0; }

hr {
  box-sizing: content-box;
  margin: 4rem 0;
  border: none;
  background-color: var(--border-color);
  height: 1px; }

p {
  margin-top: 1em;
  margin-bottom: 1em;
  font-style: normal;
  font-weight: 300;
  font-size: 1.15em;
  font-family: var(--font);
  line-height: 1.25; }

ol li,
ul li {
  padding: .2rem 0; }

dl {}

dt {
  font-weight: 700; }

dd {
  margin-bottom: .5rem;
  margin-left: 0; }

figure {
  display: inline-block;
  margin: 0;
  padding: 0; }

figure img {
  margin-bottom: .5rem;
  max-width: 100%;
  line-height: 1; }

figcaption {
  color: var(--color-muted);
  font-size: .875em; }

a {
  background-color: transparent;
  color: var(--link-color);
  text-decoration: none; }

a:hover {
  color: var(--link-color-hover);
  text-decoration: underline; }

abbr {}

abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: none;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none; }

b,
strong {
  font-weight: 700; }

bdi {}

bdo {}

br {}

cite {}

dfn {}

em {}

i {}

mark {
  background-color: var(--mark-background-color);
  padding: .2rem; }

s {}

small {
  font-size: 80%; }

span {}

sub,
sup {
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0; }

sub {
  bottom:-.25em; }

sup {
  top: -.5em; }

time {}

q {}

u {}

var {}

wbr {}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font); }

h1 {
  margin-top: .0375em;
  margin-bottom: .3125em;
  font-size: 2.25em;
  line-height: 1.25;
  letter-spacing: 1.25px; }

h2 {
  margin-top: 1.15384616em;
  margin-bottom: .38461539em;
  font-size: 2em;
  line-height: 1.15384615; }

h3 {
  margin-top: 1.36363637em;
  margin-bottom: .45454546em;
  font-size: 1.75em;
  line-height: 1.13636364; }

h4 {
  margin-top: 1.66666667em;
  margin-bottom: .55555556em;
  font-size: 1.15em;
  line-height: 1.11111111; }

@media (min-width: 43.75em) {
  blockquote,
  p {
    font-size: 2em;
    line-height: 1.45833333; }

  h1 {
    margin-top: .73333334em;
    margin-bottom: .24444445em;
    font-size: 3.5em;
    line-height: 1.125;
    letter-spacing: normal; }

  h2 {
    margin-top: 1.03125em;
    margin-bottom: .34375em;
    font-size: 2.75em;
    line-height: 1.25; }

  h3 {
    margin-top: 1.37500001em;
    margin-bottom: .45833334em;
    font-size: 2.5em;
    line-height: 1.25; }

  h4 {
    margin-top: 1.83333333em;
    margin-bottom: .61111111em;
    font-size: 2.15em;
    line-height: 1.22222222; }
}

@media (min-width: 56.25em) {
  blockquote,
  p {
    font-size: 1.25em;
    line-height: 1.45833333; }

  h1 {
    margin-top: .6875em;
    margin-bottom: .22916667em;
    font-size: 2.25em;
    line-height: 1.05;
    letter-spacing: normal; }

  h2 {
    margin-top: 1.03125em;
    margin-bottom: .34375em;
    font-size: 1.75em;
    line-height: 1.25; }

  h3 {
    margin-top: 1.37500001em;
    margin-bottom: .45833334em;
    font-size: 1.5em;
    line-height: 1.25; }

  h4 {
    margin-top: 1.83333333em;
    margin-bottom: .61111111em;
    font-size: 1.25em;
    line-height: 1.22222222; }
}


article.full {
  margin: 0 2rem;
  box-shadow: none;
  border:0;
  width: 100%; }

/* Collapse Menu for Mobile Devices */
nav[role="menubar"] {
  display: flex;
  position: relative;
  background-color: var(--menu-background-color);
  width: 100%; }

nav[role="menubar"] input[type="checkbox"].menubar-input {
  display: none!important; }

nav[role="menubar"] label.menubar-label {
  display: none;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

nav[role="menubar"] ul {
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none; }

nav[role="menubar"] ul li {
  color: var(--menu-color);
}

nav[role="menubar"] ul li a {
  color: var(--menu-link-color);
}

nav[role="menubar"] ul li a:hover,
nav[role="menubar"] ul li a:focus {
  color: var(--menu-link-color-hover);
}

nav[role="menubar"] ul li.active {
  color: var(--menu-link-color-active);
}

@media screen and (max-width: 44em) {
  nav[role="menubar"] {
    display: block;
    align-items: flex-start; }

  nav[role="menubar"] ul {
    display: none; }

  nav[role="menubar"] label.menubar-label {
    display: inline-block;
    vertical-align: middle;
    transition: color .15s ease-in-out,
                background-color .15s ease-in-out,
                border-color .15s ease-in-out,
                box-shadow .15s ease-in-out;
    margin: 0 .5rem;
    border: 1px solid var(--button-border-color);
    border-radius: var(--border-radius);
    background-color: var(--button-background-color);
    padding: .375rem .75rem;
    width: 100%;
    color: var(--button-color);
    font-weight: 400;
    font-size: 1rem;
    font-family: var(--font);
    line-height:1.5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    text-decoration: none; }

  nav[role="menubar"] label.menubar-label:hover {
    cursor: pointer;
    border-color: var(--button-border-color-hover);
    background-color: var(--button-background-color-hover);
    color: var(--button-color-hover);
    text-decoration: none; }

  nav[role="menubar"] input[type="checkbox"]:checked ~ ul {
    display: block; }

  nav[role="menubar"] input[type="checkbox"]:checked ~ ul li {
    width: 100%; }
}

/* Tooltips */
[data-tooltip] {
  position: relative; }

[data-tooltip]:before,
[data-tooltip]:after {
  -webkit-transition: .1s;
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  visibility: hidden;
  opacity: 0;
  transition: .1s;
  will-change: transform;
  pointer-events: none; }

[data-tooltip]:before {
  transform: translate(-50%, -5px) scale(.5);
  z-index: 1070!important;
  border-radius: var(--border-radius);
  background-color: var(--tooltip-background-color);
  padding: .25rem .5rem;
  width: -webkit-max-content;
  width: max-content;
  width: -moz-max-content;
  min-width: 50px;
  max-width: 300px;
  color: var(--tooltip-color);
  font-size: .875rem;
  font-family: var(--font);
  line-break: auto;
  text-align: left;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  content: attr(title);
  word-wrap: break-word; }

[data-tooltip]:after {
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  transition-duration: 0s;
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: var(--tooltip-background-color) transparent transparent transparent;
  content: ''; }

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1; }

[data-tooltip]:hover:before {
  transform: translate(-50%, -5px) scale(1);
  transition-delay: .15s; }

[data-tooltip]:hover:after {
  transform: translateX(-50%) scaleY(1);
  transition-delay: .15s;
  transition-duration: .1s; }

[data-tooltip="left"]:before,
[data-tooltip="left"]:after {
  right: calc(100% + 5px);
  bottom: 50%;
  left: auto; }

[data-tooltip="left"]:before {
  transform: translate(-5px, 50%) scale(.5); }

[data-tooltip="left"]:hover:before {
  transform: translate(-5px, 50%) scale(1); }

[data-tooltip="left"]:after {
  transform: translateY(50%) scaleX(0);
  transform-origin: left;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent var(--tooltip-background-color); }

[data-tooltip="left"]:hover:after {
  transform: translateY(50%) scaleX(1); }

[data-tooltip="right"]:before,
[data-tooltip="right"]:after {
  bottom: 50%;
  left: calc(100% + 5px); }

[data-tooltip="right"]:before {
  transform: translate(5px, 50%) scale(.5); }

[data-tooltip="right"]:hover:before {
  transform: translate(5px, 50%) scale(1); }

[data-tooltip="right"]:after {
  transform: translateY(50%) scaleX(0);
  transform-origin: right;
  border-width: 5px 5px 5px 0;
  border-color: transparent var(--tooltip-background-color) transparent transparent; }

[data-tooltip="right"]:hover:after {
  transform: translateY(50%) scaleX(1); }

[data-tooltip="bottom"]:before,
[data-tooltip="bottom"]:after {
  top: calc(100% + 5px);
  bottom: auto; }

[data-tooltip="bottom"]:before {
  transform: translate(-50%, 5px) scale(.5); }

[data-tooltip="bottom"]:hover:before {
  transform: translate(-50%, 5px) scale(1); }

[data-tooltip="bottom"]:after {
  transform-origin: bottom;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent var(--tooltip-background-color) transparent; }

/* Slidertron */
section.slidertron {
  position: relative;
  background-color: var(--slidertron-background-color);
  height: var(--slidertron-height);
  overflow: hidden; }

section.slidertron input {
  position: absolute;
  left: -9999px; }

section.slidertron .slider-arrow-nav .slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  z-index: 2;
  cursor: pointer;
  border: 1px solid #fff;
  width: 2rem;
  height: 2rem; }

section.slidertron .slider-arrow-nav .slider-arrow.next {
  right: 1rem;
  border-bottom: none;
  border-left: none; }

section.slidertron .slider-arrow-nav .slider-arrow.prev {
  left: 1rem;
  z-index: 3;
  border-top: none;
  border-right: none; }

section.slidertron .slider-arrow-nav .slider-arrow.next:first-of-type {
  z-index: 3; }

section.slidertron .slider {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  transition: 1000ms cubic-bezier(.68, -.57, .33, 1.67) opacity;
  width: 100%;
  height: 100%;
  text-align: center; }

section.slidertron .slider img {
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -o-object-fit: cover;
     object-fit: cover; }

section.slidertron .slider .slider-caption {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

section.slidertron .slider-nav {
  position: absolute;
  bottom: 1rem;
  left: 0;
  z-index: 3;
  width: 100%;
  text-align: center; }

section.slidertron .slider-nav .slider-button {
  display: inline-block;
  cursor: pointer;
  margin: 0 .5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  width: 1rem;
  height: 1rem; }

section.slidertron .slider-nav .slider-button:hover {
  background: rgba(255, 255, 255, .8); }

section.slidertron #slide1:checked ~ .slider-content .slide1,
section.slidertron #slide2:checked ~ .slider-content .slide2 {
  opacity: 1; }

section.slidertron #slide1:checked ~ .slider-nav .slider-button[for="slide1"],
section.slidertron #slide2:checked ~ .slider-nav .slider-button[for="slide2"] {
  background: #fff; }

section.slidertron #slide1:checked ~ .slider-arrow-nav .slider-arrow.next[for="slide1"]:last-of-type,
section.slidertron #slide1:checked ~ .slider-arrow-nav .slider-arrow.prev[for="slide1"],
section.slidertron #slide1:checked ~ .slider-arrow-nav .slider-arrow.prev[for="slide1"] ~ .slider-arrow.prev,
section.slidertron #slide2:checked ~ .slider-arrow-nav .slider-arrow.next[for="slide2"]:last-of-type,
section.slidertron #slide2:checked ~ .slider-arrow-nav .slider-arrow.prev[for="slide2"],
section.slidertron #slide2:checked ~ .slider-arrow-nav .slider-arrow.prev[for="slide2"] ~ .slider-arrow.prev {
  z-index: 2; }

section.slidertron #slide1:checked ~ .slider-arrow-nav .slider-arrow.next[for="slide1"] + .slider-arrow,
section.slidertron #slide2:checked ~ .slider-arrow-nav .slider-arrow.next[for="slide2"] + .slider-arrow {
  z-index: 4; }

/* Content Items with aside section */
section.content-items {
  display: flex; }

section.content-items {
  width: 75%; }

section.content-items article {
  position: relative;
  overflow: hidden; }

section.content-items article p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

aside.sidemenu {
  width: 22%; }

@media(min-width: 360px) {
  section.content-items {
    width: 100%; }

  aside.sidemenu {
    width: 100%; }
}
@media(min-width: 768px) {
  section.content-items {
    width: 75%; }

  aside.sidemenu {
    width: 22%; }
}
/* Covertron */
section.covertron:empty {
  display: none; }

section.covertron[style*="background-image"] {
  display: block; }

section.covertron {
  position: relative;
  z-index: -101;
  box-shadow: inset 0 -30px 30px -30px rgba(0, 0, 0, .5);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 60vh;
  overflow: hidden; }

section.covertron video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%; }

/* Jumbotron */
section.jumbotron {
  display: block;
  margin: 0;
  border-radius: 0;
  background-color: var(--jumbotron-background-color);
  padding: 2rem 1rem;
  padding-right: 0;
  padding-left: 0;
  text-align: center; }

section.jumbotron p {
  display: block; }

section.jumbotron:empty {
  display: none; }

@media (min-width: 576px) {
  section.jumbotron {
    padding: 4rem 2rem; }
}

/* article cards */
.card {
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--card-background-color);
  padding: 0; }

.card .card-header,
.card .card-body,
.card .card-footer {
  padding: .1rem .8rem;
  padding-bottom: 0; }

.card .card-header {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.card .card-title {
  margin: .1rem .2rem; }

.card .card-title h2,
.card .card-title h3,
.card .card-title h4,
.card .card-title h5,
.card .card-title h6 {
  margin: 0;
  padding: 0; }

.card .card-header a {
  color: var(--card-link-color); }

.card .card-header a:hover {
  color: var(--card-link-color-hover);
  text-decoration: none; }

.card .card-header:last-child,
.card .card-body:last-child,
.card .card-footer:last-child {
  padding-bottom: .8rem; }

.card .card-footer {
  display: flex; }

.card .card-footer .btn {
  margin-right: 0 !important;
  margin-left: auto !important; }

.card .card-subtitle {
  color: #bcc3ce !important; }

.card .card-subtitle a:focus,
.card .card-subtitle a:hover {
  color: #adb6c4; }

.card .card-subtitle a:visited {
  color: #cbd0d9; }

.card .card-body {
  -webkit-line-clamp: var(--card-body-lines);
  -webkit-box-orient: vertical;
  -webkit-box-flex: 1;
  display: -webkit-box;
  flex: 1 1 auto;
  overflow: hidden; }

.card img {
  width: 100%; }


.card .card-image {
  padding-top: .8rem; }

.card .card-image img {
  height: 12rem;
  -o-object-fit: cover;
     object-fit: cover; }

.card .card-image:first-child {
  padding-top: 0; }

.card .card-image:first-child img {
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
  width: 100%; }

.card .card-image:last-child img {
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius); }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--body-background-color);
  padding: .75rem 1rem;
  list-style: none; }

.breadcrumb {
  display: flex; }

.breadcrumb-item + .breadcrumb-item {
  padding-left: .5rem; }

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: .5rem;
  color: var(--color-muted);
  content: "/"; }

.breadcrumb-item.active {
  color: var(--link-color-hover); }

/* Alerts */
.alert {
  position: relative;
  border: 1px solid transparent;
  border-color: var(--default-border-color);
  border-radius: var(--border-radius);
  background-color: var(--default-background-color);
  padding: .75em 1.25em;
  width: 100%;
  color: var(--default-color); }

.alert h1,
.alert h2,
.alert h3,
.alert h4,
.alert h5,
.alert h6 {
  color: inherit;
  font-size: 1em; }

.alert a {
  color: var(--default-link);
  font-weight: 700; }

.alert a:hover {
  color: inherit;
  text-decoration: underline; }

.alert-info {
  border-color: var(--info-border-color);
  background-color: var(--info-background-color);
  color: var(--info-color); }

.alert-info a {
  color: var(--info-link); }

.alert-success {
  border-color: var(--success-border-color);
  background-color: var(--success-background-color);
  color: var(--success-color); }

.alert-success a {
  color: var(--info-success); }

.alert-warning {
  border-color: var(--warning-border-color);
  background-color: var(--warning-background-color);
  color: var(--warning-color); }

.alert-warning a {
  color: var(--info-warning); }

.alert-danger {
  border-color: var(--danger-border-color);
  background-color: var(--danger-background-color);
  color: var(--danger-color); }

.alert-danger a {
  color: var(--info-danger); }

/* Tabs */
.tabs {
  margin-right: auto;
  width: 100%; }

.tabs input {
  display: none !important; }

.tabs #tab1:checked ~ .tab.content1,
.tabs #tab2:checked ~ .tab.content2,
.tabs #tab3:checked ~ .tab.content3,
.tabs #tab4:checked ~ .tab.content4,
.tabs #tab5:checked ~ .tab.content5 {
  display: block; }

.tabs input + label {
  display: inline-block;
  position: relative;
  top: 1px;
  margin:0;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  background: transparent;
  padding: 4px 12px; }

.tabs input + label:hover {
  background-color: var(--button-color-hover); }

.tabs input:checked + label {
  border-bottom: 1px solid transparent;
  background-color: var(--button-background-color);
  color: #fff; }

.tabs input:checked + label:hover {
  background-color: var(--button-background-color-hover); }

.tabs input ~ .tab {
  display: none;
  border-top: 1px solid var(--border-color);
  padding: 12px;
  width: 100%; }

/* List Grouping */
.list-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding-left: 0; }

.list-group-item-action {
  width: 100%;
  color: #495057;
  text-align: inherit; }

.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  background-color: #f8f9fa;
  color: #495057;
  text-decoration: none; }

.list-group-item-action:active {
  background-color: #e9ecef;
  color: #212529; }

.list-group-item {
  display: block;
  position: relative;
  margin-bottom: 0;
  border: 1px solid var(--border-color);
  background-color: #fff;
  padding: .75rem 1.25rem;
  text-decoration: none; }

.list-group-item:first-child {
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius); }

.list-group-item:last-child {
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius); }

.list-group-item.disabled, .list-group-item:disabled {
  background-color: #fff;
  pointer-events: none;
  color: #6c757d; }

.list-group-item.active {
  z-index: 2;
  border-color: #0d6efd;
  background-color: #0d6efd;
  color: #fff; }

.list-group-item + .list-group-item {
  border-top-width: 0; }

.list-group-item + .list-group-item.active {
  margin-top: -1px;
  border-top-width: var(--border-width); }

.list-group-horizontal {
  flex-direction: row; }

.list-group-horizontal .list-group-item:first-child {
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--border-radius); }

.list-group-horizontal .list-group-item:last-child {
  border-top-right-radius: var(--border-radius);
  border-bottom-left-radius: 0; }

.list-group-horizontal .list-group-item.active {
  margin-top: 0; }

.list-group-horizontal .list-group-item + .list-group-item {
  border-top-width: 1px;
  border-left-width: 0; }

.list-group-horizontal .list-group-item + .list-group-item.active {
  margin-left: -1px;
  border-left-width: 1px; }

/* Avatar */
.avatar {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin: 0;
  border-radius: 50%;
  background: var(--border-color);
  width: 1.6rem;
  height: 1.6rem;
  color: rgba(255, 255, 255, .85);
  font-weight: 300;
  font-size: .8rem;
  line-height: 1.25; }

.avatar.extra-small {
  width: .8rem;
  height: .8rem;
  font-size: .4rem; }

.avatar.small {
  width: 1.2rem;
  height: 1.2rem;
  font-size: .6rem; }

.avatar.large {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.2rem; }

.avatar.extra-large {
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.6rem; }

.avatar img {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  width: 100%;
  height: 100%; }

/* Badge */
.badge {
  position: relative;
  white-space: nowrap; }

.badge[data-badge]::after,
.badge:not([data-badge])::after {
  display: inline-block;
  transform: translate(-.05rem, -.5rem);
  box-shadow: 0 0 0 .1rem var(--box-shadow-color);
  border-radius: 50%;
  background: var(--badge-background-color);
  background-clip: padding-box;
  color: var(--badge-color);
  content: attr(data-badge); }

.badge[data-badge]::after {
  padding: .1rem .2rem;
  min-width: .9rem;
  height: .9rem;
  font-size: .7rem;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap; }

.badge:not([data-badge])::after,
.badge[data-badge=""]::after {
  padding: 0;
  width: 6px;
  min-width: 6px;
  height: 6px; }

button.badge::after {
  position: absolute;
  top: 0;
  right: -.5rem;
  transform: translate(50%, -50%); }

.badge.avatar::after {
  position: absolute;
  top: 14.64%;
  right: 14.64%;
  transform: translate(50%, -50%);
  z-index: 100; }

/* Content Ribbons */
.corner-ribbon:empty {
  display: none; }

.corner-ribbon {
  position: absolute;
  top: 15px;
  left: -70px;
  transform: rotate(-45deg);
  background: #f8f9fa;
  width: 200px;
  color: #212529;
  font-size: .5em;
  line-height: 30px;
  letter-spacing: 1px;
  text-align: center; }

.corner-ribbon.small {
  top: 5px;
  left: -30px;
  line-height: 20px; }

.corner-ribbon.big {
  top: 20px;
  left: -50px;
  font-size: 1em;
  line-height: 60px; }

.corner-ribbon.top-left {
  top: 25px;
  left: -65px;
  transform: rotate(-45deg); }

.corner-ribbon.small.top-left {
  top: 15px;
  left: -80px;
  transform: rotate(-45deg); }

.corner-ribbon.big.top-left {
  top: 20px;
  left: -50px;
  transform: rotate(-45deg); }

.corner-ribbon.top-right {
  top: 25px;
  right: -65px;
  left: auto;
  transform: rotate(45deg); }

.corner-ribbon.small.top-right {
  top: 15px;
  right: -80px;
  left: auto;
  transform: rotate(45deg); }

.corner-ribbon.big.top-right {
  top: 20px;
  right: -50px;
  left: auto;
  transform: rotate(45deg); }

.corner-ribbon.bottom-left {
  top: auto;
  bottom: 25px;
  left: -65px;
  transform: rotate(45deg); }

.corner-ribbon.small.bottom-left {
  top: auto;
  bottom: 15px;
  left: -80px;
  transform: rotate(45deg); }

.corner-ribbon.big.bottom-left {
  top: auto;
  bottom: 20px;
  left: -50px;
  transform: rotate(45deg); }

.corner-ribbon.bottom-right {
  top: auto;
  right: -25px;
  bottom: 65px;
  left: auto;
  transform: rotate(-45deg); }

.corner-ribbon.small.bottom-right {
  top: auto;
  right: -80px;
  bottom: 15px;
  left: auto;
  transform: rotate(-45deg); }

.corner-ribbon.big.bottom-right {
  top: auto;
  right: -50px;
  bottom: 20px;
  left: auto;
  transform: rotate(-45deg); }

.corner-ribbon.black {
  background: #333;
  color: #fff; }

.corner-ribbon.danger {
  background: var(--danger-border-color);
  color: var(--danger-color); }

.corner-ribbon.dark {
  background: #343a40;
  color: #fff; }

.corner-ribbon.info {
  background: var(--info-background-color);
  color: var(--info-color); }

.corner-ribbon.light {
  background: #f8f9fa;
  color: #555; }

.corner-ribbon.primary {
  background: var(--primary-background-color);
  color: var(--primary-color); }

.corner-ribbon.secondary {
  background: var(--secondary-background-color);
  color: var(--secondary-color); }

.corner-ribbon.success {
  background: var(--success-background-color);
  color: var(--success-color); }

.corner-ribbon.warning {
  background: var(--warning-background-color);
  color: var(--warning-color); }

.corner-ribbon.white {
  background: #f0f0f0;
  color: #555; }

.corner-ribbon.outline-primary {
  border-color: var(--primary-border-color);
  background-color: #fff;
  color: var(--primary-color); }

.corner-ribbon.outline-secondary {
  border-color: var(--secondary-border-color);
  background-color: #fff;
  color: var(--secondary-color); }

.corner-ribbon.outline-success {
  border-color: var(--success-border-color);
  background-color: #fff;
  color: var(--success-color); }

.corner-ribbon.outline-info {
  border-color: var(--info-border-color);
  background-color: #fff;
  color: var(--info-color); }

.corner-ribbon.outline-warning {
  border-color: var(--warning-border-color);
  background-color: #fff;
  color: var(--warning-color); }

.corner-ribbon.outline-danger {
  border-color: var(--danger-border-color);
  background-color: #fff;
  color: var(--danger-color); }

.corner-ribbon.outline-light {
  border-color: #f8f9fa;
  background-color: #fff;
  color: #f8f9fa; }

.corner-ribbon.outline-dark {
  border-color: #343a40;
  background-color: #fff;
  color: #343a40; }

/* 360 Viewer */
.viewer-360 {
  -ms-flex-align: center;
  -webkit-box-align: center;
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  align-items: center; }

.viewer-360 .viewer-slider[max="36"][value="1"] + .viewer-image {
  background-position-y: 0; }

.viewer-360 .viewer-slider[max="36"][value="2"] + .viewer-image {
  background-position-y: 2.8571428571%; }

.viewer-360 .viewer-slider[max="36"][value="3"] + .viewer-image {
  background-position-y: 5.7142857143%; }

.viewer-360 .viewer-slider[max="36"][value="4"] + .viewer-image {
  background-position-y: 8.5714285714%; }

.viewer-360 .viewer-slider[max="36"][value="5"] + .viewer-image {
  background-position-y: 11.4285714286%; }

.viewer-360 .viewer-slider[max="36"][value="6"] + .viewer-image {
  background-position-y: 14.2857142857%; }

.viewer-360 .viewer-slider[max="36"][value="7"] + .viewer-image {
  background-position-y: 17.1428571429%; }

.viewer-360 .viewer-slider[max="36"][value="8"] + .viewer-image {
  background-position-y: 20%; }

.viewer-360 .viewer-slider[max="36"][value="9"] + .viewer-image {
  background-position-y: 22.8571428571%; }

.viewer-360 .viewer-slider[max="36"][value="10"] + .viewer-image {
  background-position-y: 25.7142857143%; }

.viewer-360 .viewer-slider[max="36"][value="11"] + .viewer-image {
  background-position-y: 28.5714285714%; }

.viewer-360 .viewer-slider[max="36"][value="12"] + .viewer-image {
  background-position-y: 31.4285714286%; }

.viewer-360 .viewer-slider[max="36"][value="13"] + .viewer-image {
  background-position-y: 34.2857142857%; }

.viewer-360 .viewer-slider[max="36"][value="14"] + .viewer-image {
  background-position-y: 37.1428571429%; }

.viewer-360 .viewer-slider[max="36"][value="15"] + .viewer-image {
  background-position-y: 40%; }

.viewer-360 .viewer-slider[max="36"][value="16"] + .viewer-image {
  background-position-y: 42.8571428571%; }

.viewer-360 .viewer-slider[max="36"][value="17"] + .viewer-image {
  background-position-y: 45.7142857143%; }

.viewer-360 .viewer-slider[max="36"][value="18"] + .viewer-image {
  background-position-y: 48.5714285714%; }

.viewer-360 .viewer-slider[max="36"][value="19"] + .viewer-image {
  background-position-y: 51.4285714286%; }

.viewer-360 .viewer-slider[max="36"][value="20"] + .viewer-image {
  background-position-y: 54.2857142857%; }

.viewer-360 .viewer-slider[max="36"][value="21"] + .viewer-image {
  background-position-y: 57.1428571429%; }

.viewer-360 .viewer-slider[max="36"][value="22"] + .viewer-image {
  background-position-y: 60%; }

.viewer-360 .viewer-slider[max="36"][value="23"] + .viewer-image {
  background-position-y: 62.8571428571%; }

.viewer-360 .viewer-slider[max="36"][value="24"] + .viewer-image {
  background-position-y: 65.7142857143%; }

.viewer-360 .viewer-slider[max="36"][value="25"] + .viewer-image {
  background-position-y: 68.5714285714%; }

.viewer-360 .viewer-slider[max="36"][value="26"] + .viewer-image {
  background-position-y: 71.4285714286%; }

.viewer-360 .viewer-slider[max="36"][value="27"] + .viewer-image {
  background-position-y: 74.2857142857%; }

.viewer-360 .viewer-slider[max="36"][value="28"] + .viewer-image {
  background-position-y: 77.1428571429%; }

.viewer-360 .viewer-slider[max="36"][value="29"] + .viewer-image {
  background-position-y: 80%; }

.viewer-360 .viewer-slider[max="36"][value="30"] + .viewer-image {
  background-position-y: 82.8571428571%; }

.viewer-360 .viewer-slider[max="36"][value="31"] + .viewer-image {
  background-position-y: 85.7142857143%; }

.viewer-360 .viewer-slider[max="36"][value="32"] + .viewer-image {
  background-position-y: 88.5714285714%; }

.viewer-360 .viewer-slider[max="36"][value="33"] + .viewer-image {
  background-position-y: 91.4285714286%; }

.viewer-360 .viewer-slider[max="36"][value="34"] + .viewer-image {
  background-position-y: 94.2857142857%; }

.viewer-360 .viewer-slider[max="36"][value="35"] + .viewer-image {
  background-position-y: 97.1428571429%; }

.viewer-360 .viewer-slider[max="36"][value="36"] + .viewer-image {
  background-position-y:100%; }

.viewer-360 .viewer-slider {
  order: 2;
  cursor: ew-resize;
  margin: 1rem;
  width: 60%; }

.viewer-360 .viewer-image {
  order: 1;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: 0;
  padding-bottom: 37.5%;
  width: 100%;
  max-width: 100%; }

/* Comparison Slider */
.comparison {
  margin:0 auto;
  width: 100%;
  max-width: 600px; }

.comparison-slider {
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding-bottom: 60.2222%;
  width: 100%;
  height: auto;
  overflow: hidden; }

.comparison-slider .comparison-after,
.comparison-slider .comparison-before {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  height: 100%;
  overflow: hidden; }

.comparison-slider .comparison-after img,
.comparison-slider .comparison-before img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
 -o-object-position: left center;
     object-position: left center; }

.comparison-slider .comparison-before {
  z-index: 1;
  width: 100%; }

.comparison-slider .comparison-before .comparison-label {
  right: .8rem; }

.comparison-slider .comparison-after {
  z-index: 2;
  min-width: 0;
  max-width: 100%; }

.comparison-slider .comparison-after::before {
  position: absolute;
  top: 0;
  right: .8rem;
  left: 0;
  z-index: 1;
  cursor: default;
  background: 0 0;
  height: 100%;
  content: ""; }

.comparison-slider .comparison-after::after {
  position: absolute;
  top: 50%;
  right: .4rem;
  transform: translate(50%, -50%);
  box-shadow: 0 -5px,0 5px;
  border-radius: 50%;
  background: currentColor;
  width: 3px;
  height: 3px;
  color: #fff;
  content: ""; }

.comparison-slider .comparison-after .comparison-label {
  left: .8rem; }

.comparison-slider .comparison-resizer {
  position: relative;
  top: 0;
  left: 0;
  transform: translateY(-50%) scaleY(30);
  opacity: 0;
  -webkit-animation: first-run 1.5s 1 ease-in-out;
          animation: first-run 1.5s 1 ease-in-out;
  cursor: ew-resize;
  outline: 0;
  width: 0;
  min-width: .8rem;
  max-width: 100%;
  height: .8rem;
  resize: horizontal; }

.comparison-slider .comparison-label {
  position: absolute;
  bottom: .8rem;
  background: rgba(48, 55, 66, .5);
  padding: .2rem .4rem;
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

@-webkit-keyframes first-run {
  0% {
    width: 0; }
  25% {
    width: 10rem; }
  50% {
    width: 5rem; }
  75% {
    width: 2rem; }
  100% {
    width: 0; }
}

@keyframes first-run {
  0% {
    width: 0; }
  25% {
    width: 10rem; }
  50% {
    width: 5rem; }
  75% {
    width: 2rem; }
  100% {
    width: 0; }
}