@import "https://fonts.googleapis.com/css?family=Open+Sans:light,regular,medium,thin,italic,mediumitalic,bold";
:root {
  --backgroundcolor: rgb(34, 34, 34);
  --backgroundcolor-dark: rgb(0, 0, 0);
  --backgroundcolor-light: rgb(51, 51, 51);
  --foregroundcolor: rgb(255, 255, 255);
  --foregroundcolor-disabled: rgb(64, 64, 64);
  --problue: rgb(64, 106, 255);
  --hubburgundy: rgb(255, 0, 122);
  --green: rgb(0, 127, 1);
  --rz-menu-item-focus-outline: rz-menu-item-focus-outline;
  --rz-tooltip-background-color: rgb(0, 0, 0);
}
*,
:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body,
html {
  scroll-behavior: smooth;
  min-height: 100vh;
  --rz-tooltip-background-color: var(--backgroundcolor-light);
}
body ::-webkit-scrollbar,
html ::-webkit-scrollbar {
  width: 16px;
  border: transparent;
}
body ::-webkit-scrollbar-thumb,
html ::-webkit-scrollbar-thumb {
  background-color: #555555;
  background-clip: padding-box;
  border: 0;
  border-left: 4px solid transparent;
  border-right: 2px solid transparent;
}
body ::-webkit-scrollbar-track,
html ::-webkit-scrollbar-track {
  background-color: transparent;
}
body ::-webkit-scrollbar-button:single-button,
html ::-webkit-scrollbar-button:single-button {
  background-color: transparent;
  display: block;
  border-style: solid;
  height: 20px;
  width: 12px;
}
body ::-webkit-scrollbar-button:single-button:vertical:decrement,
html ::-webkit-scrollbar-button:single-button:vertical:decrement {
  border: 0;
  border-left: 4px solid var(--backgroundcolor);
  border-right: 2px solid var(--backgroundcolor);
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 330 330' style='enable-background:new 0 0 330 330;' xml:space='preserve'%3E%3Cpath id='XMLID_224_' fill='white' d='M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394 l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393 C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
}
body ::-webkit-scrollbar-button:single-button:vertical:decrement:hover,
html ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 330 330' style='enable-background:new 0 0 330 330;' xml:space='preserve'%3E%3Cpath id='XMLID_224_' fill='lightgray' d='M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394 l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393 C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
}
body ::-webkit-scrollbar-button:single-button:vertical:increment,
html ::-webkit-scrollbar-button:single-button:vertical:increment {
  border: 0;
  border-left: 4px solid var(--backgroundcolor);
  border-right: 2px solid var(--backgroundcolor);
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 330 330' style='enable-background:new 0 0 330 330;' xml:space='preserve' fill='white'%3E%3Cpath id='XMLID_225_' d='M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
}
body ::-webkit-scrollbar-button:vertical:single-button:increment:hover,
html ::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 330 330' style='enable-background:new 0 0 330 330;' xml:space='preserve' fill='lightgray'%3E%3Cpath id='XMLID_225_' d='M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
}
header {
  top: 0;
  position: sticky;
  background-color: var(--backgroundcolor);
  z-index: 6;
  border: 0;
  padding: 1px 0;
}
body {
  font-family:
    "Open Sans",
    "Inter",
    Segoe UI,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-weight: 100;
  font-size: 0.75em;
  color: var(--foregroundcolor);
  background: var(--backgroundcolor);
  margin: 0 8em;
  min-width: 20em;
  overflow-x: hidden;
}
h2 {
  font-size: 1.25em;
  font-weight: normal;
  margin-bottom: 1em;
}
h3 {
  font-size: 1.25em;
  font-weight: bold;
}
a {
  display: flex;
  color: inherit;
  text-decoration: none;
  align-items: center;
}
a hover {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: inherit;
  text-decoration: none;
}
hr {
  border-top: none;
  background-color: inherit;
  border-color: rgb(51, 51, 51);
  margin: 0.5em 0;
}
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
select option {
  border: none;
}
@media screen and (max-width: 1200px) {
  body {
    margin: 0 1em;
  }
}
.display-none {
  display: none;
}
.rz-tooltip .rz-bottom-tooltip-content {
  border-radius: 8px;
}
.rz-progressbar-circular-lg {
  width: 5rem;
  height: 5rem;
  font-size: calc(var(--rz-progressbar-font-size) * 1);
}
.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-circular-value {
  stroke: var(--hubburgundy);
  stroke-width: 3px;
}
.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-circular-value {
  stroke: var(--foregroundcolor-disabled);
  stroke-width: 3px;
}
.rz-progressbar-circular-background {
  stroke: transparent;
  stroke-width: 3px;
}
.rz-tooltip {
  --rz-tooltip-background-color: #464854;
}
.rz-tooltip .rz-bottom-tooltip-content::after {
  width: 0;
  height: 0;
}
.rz-tooltip .rz-left-tooltip-content::after {
  width: 0;
  height: 0;
}
.rz-tooltip .rz-top-tooltip-content::after {
  width: 0;
  height: 0;
}
.rz-tooltip .rz-right-tooltip-content::after {
  width: 0;
  height: 0;
}
.rz-tooltip .rz-context-menu .rz-menu-closed {
  background-color: var(--backgroundcolor-dark);
  border-radius: 6px;
  border: 1px solid var(--foregroundcolor) !important;
  user-select: none;
}
.rz-tooltip .rz-context-menu .rz-menu-closed .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link .rz-navigation-item-icon {
  color: var(--foregroundcolor) !important;
}
.rz-tooltip .rz-context-menu .rz-menu-closed .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-link .rz-navigation-item-text {
  color: var(--foregroundcolor) !important;
}
.rz-tooltip .rz-context-menu .rz-menu-closed .rz-navigation-item .rz-navigation-item-wrapper:hover {
  background-color: var(--backgroundcolor-light);
  border-radius: 6px;
}
.rz-tooltip .rz-context-menu .rz-menu-closed .rz-state-focused {
  outline: none;
}
.rz-tooltip .rz-context-menu .rz-menu-closed .rz-state-focused .rz-navigation-item-wrapper:focus-visible {
  outline: none;
}
.rz-tooltip .rz-context-menu .rz-menu-closed:focus-visible {
  outline: none;
}
.rz-splitter .rz-splitter-bar {
  background-color: transparent;
  margin-left: 4px;
}
.rz-splitter .rz-splitter-bar .rz-collapse {
  display: table;
  transform: scale(3);
}
.rz-splitter .rz-splitter-bar .rz-collapse::before {
  color: white;
}
.rz-splitter .rz-splitter-bar .rz-resize {
  border: 4px solid white;
  opacity: 1;
  border-radius: 6px;
}
@media (orientation: portrait) {
  .rz-splitter .rz-splitter-bar .rz-resize {
    width: 40%;
    margin: 0 0.5em;
  }
}
@media (orientation: landscape) {
  .rz-splitter .rz-splitter-bar .rz-resize {
    height: 40%;
    margin: 0.5em 0;
  }
}
.rz-splitter .rz-splitter-bar .rz-expand {
  display: table;
  transform: scale(3);
}
.rz-splitter .rz-splitter-bar .rz-expand::before {
  color: white;
}
.rz-splitter .rz-splitter-bar:hover {
  background-color: transparent;
}
.rz-tabview-nav .rz-tabview-selected {
  border: none;
  background-color: var(--backgroundcolor-dark);
  color: var(--foregroundcolor);
}
.rz-tabview-nav li {
  border: none;
  background-color: var(--backgroundcolor-light);
  color: var(--foregroundcolor);
}
.rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
  background-color: var(--backgroundcolor-light);
  color: var(--foregroundcolor);
}
.rz-tabview-panels {
  border: none;
  background-color: var(--backgroundcolor-dark);
}
.loading {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  gap: 120px;
}
.loading label:first-of-type {
  font-size: 1.25em;
  font-weight: bold;
}
.loading .rerunauthentificationcontainer {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 150%;
  transform: translate(-50%, -50%);
  animation: 20s fadeIn;
  animation-fill-mode: forwards;
  visibility: hidden;
  opacity: 0;
  width: 100%;
}
.loading .rerunauthentificationcontainer span {
  font-size: large;
  font-weight: 400;
  text-align: center;
}
.loading .rerunauthentificationcontainer button {
  background-color: var(--problue);
  color: var(--foregroundcolor);
  border-radius: 0.5em;
  padding: 0.5em 2em;
  border: 0;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: 600;
  border: 2px solid transparent;
  margin-bottom: 0.5em;
  margin-top: 10px;
}
@keyframes fadeIn {
  99% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}
.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}
.blazor-error-boundary::after {
  content: "An error has occurred.";
}
#app header nav span {
  color: var(--foregroundcolor);
  text-decoration: none;
  font-weight: 400;
  font-size: 1.25em;
  margin: auto 1em;
}
select {
  color: var(--foregroundcolor);
  background: var(--backgroundcolor);
  border: none;
}
select option {
  background-color: var(--backgroundcolor-dark);
}
.card {
  background: var(--backgroundcolor-light);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  height: 8.25vw;
  width: 97.5%;
  min-height: 5.5em;
  max-height: 13.5em;
  display: inline-block;
  margin: 0.25em;
  aspect-ratio: 16/9;
  position: relative;
  border: none;
  padding: 0.5em 0;
}
.card .cardvideo {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  z-index: 2;
}
.card .cardimage {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
.card .cardcontainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: var(--bs-gutter-x, 0.25rem);
  padding-left: var(--bs-gutter-x, 0.25rem);
  background-size: contain;
  background-repeat: no-repeat;
  border: none !important;
}
.card .cardcontainer .ccicons {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 1em;
  justify-content: end;
}
.card .cardcontainer .ccicons .disabled {
  cursor: default;
  opacity: 0.25;
}
.card .cardcontainer .ccicons :first-child {
  height: 1em;
  width: 1em;
  z-index: 4;
  position: sticky;
  top: 7px;
  right: 7px;
}
.card .cardcontainer .ccicons :last-child {
  height: 1em;
  width: 1em;
  z-index: 4;
  position: sticky;
  top: 7px;
  right: 7px;
}
.card .cardcontainer .ccinfos {
  display: flex;
  justify-content: space-between;
}
.card .cardcontainer .ccinfos .cardtitle {
  color: var(--foregroundcolor);
  align-self: flex-end;
  padding: 0.1em 0.2em 0.2em 0.2em;
  background: rgba(0, 0, 0, 0.8);
  max-width: 50%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  z-index: 3;
}
.card .cardcontainer .ccinfos .cardlength {
  color: var(--foregroundcolor);
  align-self: flex-end;
  padding: 0.1em 0.2em 0.2em 0.2em;
  background: rgba(0, 0, 0, 0.8);
  z-index: 3;
}
.curated-link {
  background-color: #151515;
  margin: 0.25em;
  border-radius: 6px;
}
.curated-link .card {
  margin-bottom: 2em;
}
.curated-link .card .curated {
  font-weight: bold;
  font-size: 1.25em;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: -webkit-fill-available;
  width: -moz-available;
  margin-top: 2em;
}
.curated-link:hover {
  background-color: var(--backgroundcolor-dark);
}
.audiocard {
  cursor: pointer;
  height: 8.4375vw;
  width: 15vw;
  min-height: 4.5em;
  min-width: 8em;
  max-height: 13.5em;
  max-width: 24em;
  display: inline-block;
  padding: 0;
  position: relative;
}
#fav {
  height: 1em;
  width: 1em;
  z-index: 4;
  position: absolute;
  top: 7px;
  right: 7px;
}
#audiotitle {
  margin-bottom: 4px;
  align-self: flex-end;
  padding: 3px;
  background: transparent;
  vertical-align: bottom;
  max-width: 50%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#audiolength {
  margin-bottom: 4px;
  align-self: flex-end;
  padding: 3px;
  background: transparent;
  vertical-align: bottom;
}
.previewcarousel {
  display: grid;
  grid-auto-flow: column;
  width: 100%;
  margin: 1em 0 1.5em 0;
}
.previewcarousel .carousel-element-container {
  display: flex;
  justify-content: center;
  min-height: 5.625em;
  height: 100%;
  max-height: 13.5em;
  overflow: hidden;
}
.previewcarousel .arrow {
  height: 7.03125vw;
}
.previewcarousel #arrowleft {
  height: 1em;
  vertical-align: middle;
  padding-right: 1em;
  top: 40%;
  position: relative;
  float: right;
}
.previewcarousel #arrowright {
  height: 1em;
  vertical-align: middle;
  padding-left: 1em;
  top: 40%;
  position: relative;
}
.homenavigation {
  display: flex;
  margin: 1em 0 0 0;
}
.homenavigation a {
  cursor: pointer;
}
.homenavigation label {
  font-weight: 200;
  font-size: 1.5em;
  margin: 0 0 0 1em;
  display: block;
}
.nohomenavigation {
  margin-top: 0.5em;
}
.search {
  height: 2.5em;
  color: var(--foregoundcolor);
  margin: 1em -3em 1em -5em;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  background-color: var(--backgroundcolor-dark);
  position: sticky;
}
.search div {
  display: flex;
}
.search div .home {
  vertical-align: middle;
  line-height: 100%;
  padding: 0.5em 1em 0.5em 1em;
  background-color: var(--backgroundcolor);
}
.search div .home img {
  height: 1.5em;
}
.search div .back {
  vertical-align: middle;
  line-height: 100%;
  padding: 0.75em 1em 0.75em 1em;
  background-color: var(--backgroundcolor);
}
.search div .back img {
  height: 100%;
}
.search #searchbar {
  background-color: inherit;
  color: var(--foregroundcolor);
  border: none;
  border-left: none;
  margin-left: 0.5em;
  width: calc(100vw - 10em);
}
.search #searchbar:focus {
  outline: 1px solid var(--backgroundcolor-light);
}
.search #type {
  width: 5.5em;
  padding-left: 0.5em;
  margin-right: 2em;
  background-color: inherit;
  font-size: 1.25em;
}
.search #searchbutton {
  text-align: center;
  background-color: inherit;
  width: 3em;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.search #searchbutton img {
  height: 50%;
}
.nosubwarning {
  background: #8c6300;
  padding: 0 0.5em;
  margin: -1em -3em 1em -2em;
  display: flex;
  align-items: center;
  border-radius: 0px 0px 6px 6px;
  width: -webkit-fill-available;
  width: -moz-available;
}
.nosubwarning :first-child {
  margin-right: 1em;
  font-size: 1.5em;
}
#notauth {
  background-color: var(--backgroundcolor-light);
}
@media screen and (max-width: 1200px) {
  .search {
    margin: 1em 0 1em -1em;
  }
  .nosubwarning {
    margin: -1em 0 1em 2em;
  }
}
.flexbox-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
}
#flexfilters {
  justify-content: space-between;
}
.left {
  order: 1;
}
.right {
  order: 2;
}
.radzenslider {
  margin-left: 0.75em;
  margin-right: 0.75em;
}
.rz-slider-handle {
  background-color: var(--foregroundcolor);
  box-shadow: none;
  border: none;
}
.boldlabel {
  font-weight: bold;
}
.filtercaption {
  font-weight: bold;
}
.tab {
  display: inline-block;
  margin-left: 40px;
}
.value {
  display: inline-block;
  min-width: 2.25em;
  text-align: right;
}
.filter input[type=radio] {
  opacity: 0;
  position: fixed;
  width: 0;
}
.filter label {
  display: inline-block;
  padding: 0 1em 0.5em 0;
}
.filter label:hover {
  cursor: pointer;
}
.filter input[type=radio]:checked ~ * {
  font-weight: bold;
}
.tabfilters {
  margin-top: 0.5em;
}
.tabfilters input {
  opacity: 0;
  position: fixed;
  width: 0;
}
.tabfilters label {
  margin: 0 0.25em 0.75em 0;
  font-size: 0.9em;
}
.tabfilters label span {
  background-color: var(--backgroundcolor-light);
  color: gray;
  border: 0;
  border-radius: 0.5em;
  padding: 0.25em;
}
.tabfilters label:hover {
  cursor: pointer;
}
.tabfilters input:checked ~ * {
  color: var(--foregroundcolor);
  border: 1px solid var(--foregroundcolor);
}
#resultlist {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-flow: wrap row;
  margin: 0 -0.25em;
}
#resultlist li {
  display: inline-block;
  flex: 1;
  text-align: center;
}
#listofthings {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-flow: wrap row;
  margin: 0 -0.25em;
}
#listofthings li {
  text-align: center;
  flex-grow: 1;
  max-width: 33.3333333333%;
}
#listofthings li .placeholder {
  background: var(--backgroundcolor);
  min-height: 1px;
  height: 1px;
  min-width: 10em;
  width: 14.6666666667vw;
  cursor: auto;
}
#listofthings li .placeholder-li:hover {
  background: var(--backgroundcolor-light);
}
.searchhresultlist {
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
}
.searchhresultlist::-webkit-scrollbar {
  width: 0 !important;
}
.filters {
  position: sticky;
  background-color: var(--backgroundcolor);
  top: 4.6em;
  z-index: 5;
}
.dropbtn {
  background-color: var(--backgroundcolor-dark);
  color: var(--foregroundcolor);
  padding: 1em 0.5em;
  border: none;
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-gap: 0.5em;
}
.dropbtn label {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.dropbtn .arrowdown {
  width: 1em;
}
.dropdown {
  position: relative;
  display: inline-block;
  margin-left: 1;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--backgroundcolor-dark);
  min-width: 10em;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 5;
}
.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  cursor: pointer;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: var(--backgroundcolor-dark);
}
.dropdown-disabled {
  background-color: var(--backgroundcolor-light);
  color: var(--foregroundcolor);
}
.dropdown-enabled {
  background-color: var(--backgroundcolor-dark);
  color: var(--foregroundcolor);
}
.dropdown-enabled:hover {
  background-color: var(--backgroundcolor-light);
}
#audioplayer {
  background-color: var(--backgroundcolor-light);
  padding: 0.75em;
  position: sticky;
  margin-bottom: 0.5em;
}
#audioplayer .flexbox-panel {
  align-items: center;
  display: flex;
  justify-content: unset;
  gap: 1em;
}
#audioplayer .tag {
  font-size: 0.75em;
  font-weight: bolder;
  border-radius: 0.25em;
  margin-right: 0.5em;
  margin-left: 1em;
  color: white;
  padding: 0.25em 0.5em;
  vertical-align: top;
  min-width: 3.5em;
  display: inline-block;
  text-align: center;
}
#audioplayer #music {
  background-color: #1580B1;
}
#audioplayer #sfx {
  background-color: #84C225;
}
#audioplayer #audiocontrols {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 4em 3em auto 3em 15em;
  align-items: center;
}
#audioplayer #audiocontrols label {
  width: 3em;
  text-align: center;
}
#audioplayer #audiocontrols div {
  width: 100%;
}
#audioplayer #audiocontrols #playpausebutton {
  background-color: var(--backgroundcolor-light);
  color: var(--foregroundcolor);
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-size: 1em;
  border: none;
  cursor: pointer;
}
.apprefresh {
  display: flex;
  align-content: center;
  justify-content: center;
  min-height: 99vh;
}
.welcome {
  font-size: 1.25em;
  font-weight: 400;
  margin: 2em 1em;
}
ul {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 1200px) {
  section.index {
    margin: -1em 0;
  }
}
.tile {
  width: 18em;
  padding: 1em;
  margin: 2px;
  display: flex;
  cursor: pointer;
}
.tile img {
  width: 4em;
  height: 4em;
}
.tile div {
  padding-left: 1em;
  margin-top: auto;
  margin-bottom: auto;
}
.tile div :first-child {
  font-weight: bold;
}
.tile div :last-child {
  font-size: 90%;
  color: darkgray;
}
.tile div br {
  margin: -0.125em;
}
.tile p {
  border-radius: 1em;
  margin-right: 0.25em;
  height: 0.5em;
  width: 0.5em;
  position: absolute;
}
.tile p.None {
  display: none;
}
.tile p.Beta {
  background: var(--hubburgundy);
}
.tile p.New {
  background: white;
}
.tile p.Offer {
  background: var(--problue);
}
.tile:hover {
  background-color: var(--backgroundcolor-dark);
}
.progress-circle {
  font-size: 1em;
  margin: 0px;
  position: relative;
  padding: 0;
  width: 5em;
  height: 5em;
  background-color: var(--backgroundcolor-light);
  border-radius: 50%;
  line-height: 5em;
}
.progress-circle:after {
  border: none;
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  text-align: center;
  display: block;
  border-radius: 50%;
  width: 4.5em;
  height: 4.5em;
  background-color: var(--backgroundcolor-dark);
  content: " ";
}
.progress-circle span {
  position: absolute;
  width: 5em;
  text-align: center;
  display: block;
  color: var(--foregroundcolor);
  z-index: 2;
}
.left-half-clipper {
  border-radius: 50%;
  width: 5em;
  height: 5em;
  position: absolute;
  clip: rect(0, 5em, 5em, 2.5em);
}
.progress-circle.over50 .left-half-clipper {
  clip: rect(auto, auto, auto, auto);
}
.value-bar {
  position: absolute;
  clip: rect(0, 2.5em, 5em, 0);
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 4px solid var(--hubburgundy);
  box-sizing: border-box;
}
.progress-circle.over50 .first50-bar {
  position: absolute;
  clip: rect(0, 5em, 5em, 2.5em);
  background-color: var(--hubburgundy);
  border-radius: 50%;
  width: 5em;
  height: 5em;
}
.progress-circle:not(.over50) .first50-bar {
  display: none;
}
.progress-circle.p0 .value-bar {
  display: none;
}
.progress-circle.p1 .value-bar {
  transform: rotate(4deg);
}
.progress-circle.p2 .value-bar {
  transform: rotate(7deg);
}
.progress-circle.p3 .value-bar {
  transform: rotate(11deg);
}
.progress-circle.p4 .value-bar {
  transform: rotate(14deg);
}
.progress-circle.p5 .value-bar {
  transform: rotate(18deg);
}
.progress-circle.p6 .value-bar {
  transform: rotate(22deg);
}
.progress-circle.p7 .value-bar {
  transform: rotate(25deg);
}
.progress-circle.p8 .value-bar {
  transform: rotate(29deg);
}
.progress-circle.p9 .value-bar {
  transform: rotate(32deg);
}
.progress-circle.p10 .value-bar {
  transform: rotate(36deg);
}
.progress-circle.p11 .value-bar {
  transform: rotate(40deg);
}
.progress-circle.p12 .value-bar {
  transform: rotate(43deg);
}
.progress-circle.p13 .value-bar {
  transform: rotate(47deg);
}
.progress-circle.p14 .value-bar {
  transform: rotate(50deg);
}
.progress-circle.p15 .value-bar {
  transform: rotate(54deg);
}
.progress-circle.p16 .value-bar {
  transform: rotate(58deg);
}
.progress-circle.p17 .value-bar {
  transform: rotate(61deg);
}
.progress-circle.p18 .value-bar {
  transform: rotate(65deg);
}
.progress-circle.p19 .value-bar {
  transform: rotate(68deg);
}
.progress-circle.p20 .value-bar {
  transform: rotate(72deg);
}
.progress-circle.p21 .value-bar {
  transform: rotate(76deg);
}
.progress-circle.p22 .value-bar {
  transform: rotate(79deg);
}
.progress-circle.p23 .value-bar {
  transform: rotate(83deg);
}
.progress-circle.p24 .value-bar {
  transform: rotate(86deg);
}
.progress-circle.p25 .value-bar {
  transform: rotate(90deg);
}
.progress-circle.p26 .value-bar {
  transform: rotate(94deg);
}
.progress-circle.p27 .value-bar {
  transform: rotate(97deg);
}
.progress-circle.p28 .value-bar {
  transform: rotate(101deg);
}
.progress-circle.p29 .value-bar {
  transform: rotate(104deg);
}
.progress-circle.p30 .value-bar {
  transform: rotate(108deg);
}
.progress-circle.p31 .value-bar {
  transform: rotate(112deg);
}
.progress-circle.p32 .value-bar {
  transform: rotate(115deg);
}
.progress-circle.p33 .value-bar {
  transform: rotate(119deg);
}
.progress-circle.p34 .value-bar {
  transform: rotate(122deg);
}
.progress-circle.p35 .value-bar {
  transform: rotate(126deg);
}
.progress-circle.p36 .value-bar {
  transform: rotate(130deg);
}
.progress-circle.p37 .value-bar {
  transform: rotate(133deg);
}
.progress-circle.p38 .value-bar {
  transform: rotate(137deg);
}
.progress-circle.p39 .value-bar {
  transform: rotate(140deg);
}
.progress-circle.p40 .value-bar {
  transform: rotate(144deg);
}
.progress-circle.p41 .value-bar {
  transform: rotate(148deg);
}
.progress-circle.p42 .value-bar {
  transform: rotate(151deg);
}
.progress-circle.p43 .value-bar {
  transform: rotate(155deg);
}
.progress-circle.p44 .value-bar {
  transform: rotate(158deg);
}
.progress-circle.p45 .value-bar {
  transform: rotate(162deg);
}
.progress-circle.p46 .value-bar {
  transform: rotate(166deg);
}
.progress-circle.p47 .value-bar {
  transform: rotate(169deg);
}
.progress-circle.p48 .value-bar {
  transform: rotate(173deg);
}
.progress-circle.p49 .value-bar {
  transform: rotate(176deg);
}
.progress-circle.p50 .value-bar {
  transform: rotate(180deg);
}
.progress-circle.p51 .value-bar {
  transform: rotate(184deg);
}
.progress-circle.p52 .value-bar {
  transform: rotate(187deg);
}
.progress-circle.p53 .value-bar {
  transform: rotate(191deg);
}
.progress-circle.p54 .value-bar {
  transform: rotate(194deg);
}
.progress-circle.p55 .value-bar {
  transform: rotate(198deg);
}
.progress-circle.p56 .value-bar {
  transform: rotate(202deg);
}
.progress-circle.p57 .value-bar {
  transform: rotate(205deg);
}
.progress-circle.p58 .value-bar {
  transform: rotate(209deg);
}
.progress-circle.p59 .value-bar {
  transform: rotate(212deg);
}
.progress-circle.p60 .value-bar {
  transform: rotate(216deg);
}
.progress-circle.p61 .value-bar {
  transform: rotate(220deg);
}
.progress-circle.p62 .value-bar {
  transform: rotate(223deg);
}
.progress-circle.p63 .value-bar {
  transform: rotate(227deg);
}
.progress-circle.p64 .value-bar {
  transform: rotate(230deg);
}
.progress-circle.p65 .value-bar {
  transform: rotate(234deg);
}
.progress-circle.p66 .value-bar {
  transform: rotate(238deg);
}
.progress-circle.p67 .value-bar {
  transform: rotate(241deg);
}
.progress-circle.p68 .value-bar {
  transform: rotate(245deg);
}
.progress-circle.p69 .value-bar {
  transform: rotate(248deg);
}
.progress-circle.p70 .value-bar {
  transform: rotate(252deg);
}
.progress-circle.p71 .value-bar {
  transform: rotate(256deg);
}
.progress-circle.p72 .value-bar {
  transform: rotate(259deg);
}
.progress-circle.p73 .value-bar {
  transform: rotate(263deg);
}
.progress-circle.p74 .value-bar {
  transform: rotate(266deg);
}
.progress-circle.p75 .value-bar {
  transform: rotate(270deg);
}
.progress-circle.p76 .value-bar {
  transform: rotate(274deg);
}
.progress-circle.p77 .value-bar {
  transform: rotate(277deg);
}
.progress-circle.p78 .value-bar {
  transform: rotate(281deg);
}
.progress-circle.p79 .value-bar {
  transform: rotate(284deg);
}
.progress-circle.p80 .value-bar {
  transform: rotate(288deg);
}
.progress-circle.p81 .value-bar {
  transform: rotate(292deg);
}
.progress-circle.p82 .value-bar {
  transform: rotate(295deg);
}
.progress-circle.p83 .value-bar {
  transform: rotate(299deg);
}
.progress-circle.p84 .value-bar {
  transform: rotate(302deg);
}
.progress-circle.p85 .value-bar {
  transform: rotate(306deg);
}
.progress-circle.p86 .value-bar {
  transform: rotate(310deg);
}
.progress-circle.p87 .value-bar {
  transform: rotate(313deg);
}
.progress-circle.p88 .value-bar {
  transform: rotate(317deg);
}
.progress-circle.p89 .value-bar {
  transform: rotate(320deg);
}
.progress-circle.p90 .value-bar {
  transform: rotate(324deg);
}
.progress-circle.p91 .value-bar {
  transform: rotate(328deg);
}
.progress-circle.p92 .value-bar {
  transform: rotate(331deg);
}
.progress-circle.p93 .value-bar {
  transform: rotate(335deg);
}
.progress-circle.p94 .value-bar {
  transform: rotate(338deg);
}
.progress-circle.p95 .value-bar {
  transform: rotate(342deg);
}
.progress-circle.p96 .value-bar {
  transform: rotate(346deg);
}
.progress-circle.p97 .value-bar {
  transform: rotate(349deg);
}
.progress-circle.p98 .value-bar {
  transform: rotate(353deg);
}
.progress-circle.p99 .value-bar {
  transform: rotate(356deg);
}
.progress-circle.p100 .value-bar {
  transform: rotate(360deg);
}
.mediacard {
  background: var(--backgroundcolor);
  height: 10em;
  width: 14em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 6px;
}
.mediacard .mediacardtop {
  display: flex;
  justify-content: space-between;
  background-color: var(--backgroundcolor);
  opacity: 0.75;
  padding: 0.25em 0.5em;
}
.mediacard .mediacardbottom {
  background-color: var(--backgroundcolor);
  opacity: 0.75;
  padding: 0.25em 0.5em;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.mediacard .mediacardbottom progress::-webkit-progress-bar {
  background-color: var(--backgroundcolor-light);
  width: 100%;
  border-radius: 1em;
}
.mediacard .mediacardbottom progress {
  background-color: var(--backgroundcolor-light);
  border-radius: 1em;
}
.mediacard .mediacardbottom label {
  color: var(--foregroundcolor);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.mediacard .mediacardbottom .mediacardimage {
  object-fit: fill;
  margin: 0.125em;
  object-position: center center;
}
.mediacard input[type=file] {
  display: none;
}
.mediacard .custom-file-upload {
  display: inline-block;
  margin-right: 2em;
  cursor: pointer;
}
.mediacontainer {
  margin-left: 0.5em;
}
.cardloadinganimation {
  background: linear-gradient(315deg, var(--foregroundcolor), var(--backgroundcolor-dark));
  background-size: 400% 400%;
  -webkit-animation: LoadingGradient 7s ease infinite;
  -moz-animation: LoadingGradient 7s ease infinite;
  -o-animation: LoadingGradient 7s ease infinite;
  animation: LoadingGradient 7s ease infinite;
}
@-webkit-keyframes LoadingGradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
@-moz-keyframes LoadingGradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
@-o-keyframes LoadingGradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
@keyframes LoadingGradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
.iarrow {
  border: solid var(--foregroundcolor);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2.5px;
}
.iright {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.ileft {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.iup {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.idown {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 25px;
  margin: 0.5em;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--backgroundcolor);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switch input:checked + .slider:before {
  background-color: white;
}
.switch input:checked + .slider {
  background-color: var(--backgroundcolor);
}
.switch input:focus + .slider {
  box-shadow: 0 0 1px var(--backgroundcolor);
}
.switch input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
.switch img {
  position: relative;
  width: 18px;
}
.switch :first-child {
  left: 5px;
}
.switch :last-child {
  right: 5px;
}
.switch input:checked + img:before {
  -webkit-transform: translateX(25px);
  -ms-transform: translateX(25px);
  transform: translateX(25px);
}
.switch .slider.round {
  border-radius: 34px;
}
.switch .slider.round:before {
  border-radius: 50%;
}
.login-main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90dvh;
  flex-direction: column;
  gap: 2rem;
}
.login-main img {
  width: 10rem;
}
.login-main span {
  font-size: large;
  font-weight: 400;
  text-align: center;
}
.login-main button {
  background-color: var(--problue);
  color: var(--foregroundcolor);
  border-radius: 0.5em;
  padding: 0.5em 2em;
  border: 0;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: 600;
  border: 2px solid transparent;
  margin-bottom: 0.5em;
}
.login-main button:disabled {
  background-color: transparent;
  color: var(--foregroundcolor);
  border: 2px solid var(--foregroundcolor);
  cursor: default;
}
input.range {
  -webkit-appearance: none;
  appearance: none;
  bottom: -17.5px;
  position: relative;
  width: 100%;
  height: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: gray;
}
input.range:focus {
  outline: 0;
}
input.range::-moz-focus-outer {
  border: 0;
}
input.range::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 10px;
  border-radius: 0;
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.5px;
}
input.range::-moz-range-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 10px;
  border-radius: 0;
  background: white;
  cursor: pointer;
}
input.range::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
  background: transparent;
  border-radius: 20px;
  border: 0;
}
input.range::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
  background: transparent;
  border-radius: 20px;
  border: 0;
}
input.range::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input.range::-ms-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 10px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  height: 5px;
}
input.range::-ms-fill-lower,
input.range::-ms-fill-upper {
  background: transparent;
  border: 0;
  border-radius: 40px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}
.range__point {
  stroke: #a0a0a0;
}
.range__tick {
  fill: #a0a0a0;
  z-index: 100;
}
.range__tick:first-child {
  -webkit-transform: translateX(2px);
  -moz-transform: translateX(2px);
  -ms-transform: translateX(2px);
  -o-transform: translateX(2px);
  transform: translateX(2px);
}
.range__tick:last-child {
  -webkit-transform: translateX(-3px);
  -moz-transform: translateX(-3px);
  -ms-transform: translateX(-3px);
  -o-transform: translateX(-3px);
  transform: translateX(-3px);
}
.range__field {
  border: 0;
}
#sound-slider__container {
  display: flex;
  height: 20px;
  padding: 2em;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #sound-slider__container input[type=range] {
    overflow: hidden;
    -webkit-appearance: none;
    background-color: var(--backgroundcolor);
    border-radius: 1em;
    height: 5px;
    margin: 0 1em;
  }
  #sound-slider__container input[type=range]::-webkit-slider-runnable-track {
    height: 10px;
    -webkit-appearance: none;
    color: #13bba4;
    margin-top: -1px;
  }
  #sound-slider__container input[type=range]::-webkit-slider-thumb {
    width: 0px;
    -webkit-appearance: none;
    height: 0px;
    cursor: ew-resize;
    box-shadow: -80px 0 0 80px var(--hubburgundy);
  }
}
#sound-slider__container input[type=range]::-moz-range-progress {
  background-color: var(--hubburgundy);
}
#sound-slider__container input[type=range]::-moz-range-track {
  background-color: var(--backgroundcolor-dark);
}
#sound-slider__container input[type=range]::-moz-range-thumb {
  width: 0px;
  height: 0px;
}
#sound-slider__container input[type=range]::-ms-fill-lower {
  background-color: var(--hubburgundy);
}
#sound-slider__container input[type=range]::-ms-fill-upper {
  background-color: var(--backgroundcolor-dark);
}
#sound-slider__container #volume {
  font-family: sans-serif;
  color: rgb(var(--hubburgundy));
  min-width: 2em;
  text-align: right;
  margin: 0;
}
#sound-slider__container img {
  cursor: pointer;
  width: 14px;
}
#cookieConsent {
  color: var(--foregroundcolor);
  background-color: var(--backgroundcolor-dark);
  border: none;
  margin-top: auto;
  display: flex;
  align-items: center;
  margin: 0em -8em;
  justify-content: space-between;
  padding-right: 1rem;
  z-index: 99;
}
#cookieConsent a:hover {
  text-decoration: underline;
}
#cookieConsent button {
  border: 1px solid var(--foregroundcolor);
  border-radius: 6px;
  color: var(--foregroundcolor);
  background-color: black;
  padding: 0.5em;
  margin-left: 1em;
}
#cookieConsent .reject-policy {
  border: none;
}
#cookieConsent button:hover {
  background-color: var(--backgroundcolor-light);
}
@media screen and (max-width: 1200px) {
  #cookieConsent {
    margin: 0 -1em;
  }
}
.note-media {
  margin-top: 20px;
}
.note-media video,
.note-media img {
  height: 300px;
  max-width: 100%;
}
.rz-slider {
  background-color: var(--backgroundcolor-light);
  border: none;
  max-width: 8.5vw;
}
.rz-slider-range {
  background-color: var(--foregroundcolor);
  border: none;
}
.rz-slider-handle {
  background-color: var(--foregroundcolor);
  border-radius: 0px;
  height: 1rem;
  width: 1rem;
}
.rz-slider-handle:before {
  color: var(--backgroundcolor-light);
  vertical-align: top;
}
.rz-slider:not(.rz-state-disabled) .rz-slider-handle:hover,
.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus,
.rz-slider:not(.rz-state-disabled) .rz-slider-handle:active {
  background-color: var(--foregroundcolor);
  box-shadow: none;
  border: none;
  cursor: pointer;
}
.rz-slider-horizontal {
  height: 0.25rem;
  margin-bottom: 0.25rem;
}
br {
  display: block;
  content: " ";
  margin: 1em;
}
.stop-scrolling {
  height: 100%;
  overflow: hidden;
}
#stillgray {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background-color: rgba(17, 17, 17, 0.8666666667);
  z-index: 7;
}
#videooverlay {
  width: calc(100% - 10em);
  height: calc(100% - 2em);
  top: 4em;
  left: 8em;
  padding: 1em;
  position: fixed;
  background-color: var(--backgroundcolor);
  z-index: 2;
  overflow-y: auto;
  text-align: left;
}
.close {
  display: flex;
  float: right;
  cursor: pointer;
}
#videooverlay::-webkit-scrollbar {
}
.details-flexbox-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
}
.details-flexbox-panel .detailsleft {
  max-height: 80%;
}
.details-flexbox-panel .detailsleft #preview {
  width: calc(60vw - 7.5em);
}
.details-flexbox-panel .detailsright {
  margin-left: 1em;
}
.details-flexbox-panel .detailsright .detailbuttons {
  align-items: start;
}
.details-flexbox-panel .detailsright .detailbuttons .detailbuttonsinner {
  display: grid;
  grid-auto-flow: row;
  grid-row-gap: 1em;
}
@media screen and (max-width: 1100px) {
  .details-flexbox-panel .detailsright .detailbuttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .details-flexbox-panel .detailsright .detailbuttons .detailbuttonsinner {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 1em;
  }
}
.details-flexbox-panel .detailsright #info label {
  white-space: pre-line;
}
.detailsfavbutton {
  background-color: var(--backgroundcolor-dark);
  color: var(--foregroundcolor);
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  min-width: 10em;
  border: none;
  cursor: pointer;
  display: block;
}
.detailsfavbutton-img {
  cursor: pointer;
  display: flex;
}
.detailsfavbutton-img img {
  margin: 0.25em;
}
#desc {
  font-weight: bold;
  color: var(--foregroundcolor);
  margin: 0.25em 0 1em 0;
}
.keyword {
  background: var(--backgroundcolor-light);
  padding: 0.15em;
  margin-right: 0.15em;
  margin-bottom: 0.3em;
  display: inline-block;
}
@media screen and (max-width: 1100px) {
  #videooverlay {
    width: calc(100% - 7em);
    height: calc(100% - 4em);
    top: 2em;
    left: 3em;
    padding: 1em;
    padding-top: 0.5em;
    position: fixed;
  }
  .close {
    margin-bottom: 0.5em;
  }
  .details-flexbox-panel {
    display: block;
  }
  .details-flexbox-panel .detailsleft {
    width: 100%;
  }
  .details-flexbox-panel .detailsleft #preview {
    width: 100%;
  }
  .details-flexbox-panel .detailsright {
    margin-left: 0;
    margin-top: 0.5em;
  }
}
.social {
  margin: 0 -8em;
}
@media screen and (max-width: 1200px) {
  .social {
    margin: 0 -1em;
  }
}
.social .header {
  position: fixed;
  top: 0;
  height: 4em;
  z-index: 5;
  width: 100%;
  background-color: #222;
  margin-top: 0px;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 150px 270px;
  grid-template-rows: 56px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "title-div . follow-div";
  border: 0;
}
.social .title-div {
  grid-area: title-div;
  color: var(--foregroundcolor);
  font-family: "Inter", sans-serif;
  font-size: 14pt;
  font-weight: 200;
  margin-left: 12px;
}
.social .follow-div {
  grid-area: follow-div;
  font-family: "Inter", sans-serif;
  font-size: 14pt;
  display: flex;
  color: var(--foregroundcolor);
}
.social .social-icon {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  margin-top: 0px;
}
.social .socialfeed-div {
  margin-top: 4em;
}
#eulacontent {
  margin: 2em;
}
#eulacontent #agreementNotice {
  font-weight: bold;
}
#eulacontent #eulabox {
  background-color: var(--backgroundcolor-light);
  max-height: 400px;
  margin-top: 1em;
  margin-bottom: 0.5em;
  overflow-y: auto;
}
#eulacontent pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0.5em;
}
#eulacontent #eulaagree {
  float: right;
  font-weight: bold;
  border: none;
  border-radius: none;
  cursor: pointer;
  min-width: 12em;
  padding: 1em 0.5em;
}
.bookmarkheader {
  display: flex;
  justify-content: space-between;
}
.bookmarktable {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 25% 25% 25% 22.5%;
  justify-items: center;
  align-items: center;
  font-weight: bold;
  grid-column-gap: 0.5em;
}
.bookmarktablecaption {
  display: grid;
  grid-auto-flow: row;
}
.bookmarktableitem {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 25% 25% 25% 20%;
  justify-items: center;
  align-items: center;
  margin-bottom: 1em;
  font-size: 0.75em;
  grid-column-gap: 0.5em;
}
.bookmarktableitem .bookmarkicon {
  max-height: 8em;
  max-width: 100%;
  padding-right: 0.25em;
  aspect-ratio: 16/9;
  cursor: pointer;
  justify-self: left;
}
.bookmarktableitem .bookmarktitle {
  display: block;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow: hidden;
  max-height: 5em;
  line-height: 1.25em;
}
.bookmarktableitem .unfavbutton {
  cursor: pointer;
  height: 0.75em;
}
.tts select {
  padding: 0.875em 0.5em;
  background-color: var(--backgroundcolor-dark);
  font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;
  font-size: 1em;
}
.tts select option {
  background-color: var(--backgroundcolor-dark);
}
.tts .ttstab {
  background: var(--backgroundcolor-light);
  padding: 0.5em;
  display: grid;
  grid-auto-flow: row;
  grid-row-gap: 0.5em;
  margin-bottom: 0.5em;
}
.tts .ttstab .ttsvoicerow {
  display: grid;
  grid-auto-flow: column;
  column-gap: 1em;
  grid-template-columns: minmax(20em, 40%) minmax(10em, 60%);
}
.tts .ttstab .ttsvoicerow label {
  display: block;
  text-align: right;
  align-self: center;
}
.tts .ttstab .ttsvoicerow .ttsvoiceleft {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 7.5em auto;
  grid-column-gap: 2em;
}
.tts .ttstab .ttsvoicerow .ttsvoiceleft .voiceselect {
  background: var(--backgroundcolor-dark);
  padding: 0.65em 0.75em;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.tts .ttstab .ttsvoicerow .ttsvoiceleft .voiceselect img {
  height: 2.25em;
  border-radius: 6px;
  margin-right: 0.5em;
}
.tts .ttstab .ttsvoicerow .ttsvoiceleft .voiceselect :last-child {
  margin-right: 0.125em;
}
.tts .ttstab .ttsvoicerow .ttsvoiceright {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 7.5em auto 4em;
  grid-column-gap: 2em;
}
.tts .ttstab .ttsvoicerow .ttsvoiceright input {
  min-width: 25px;
}
.tts .ttstab textarea {
  background: var(--backgroundcolor-light);
  border: none;
  height: calc(100vh - 24em);
  padding: 1em;
  color: var(--foregroundcolor);
  resize: none;
}
.tts .ttstab textarea::-webkit-scrollbar {
  display: none;
}
.tts .ttstab .ttscharcount {
  text-align: right;
  padding-right: 0.5em;
}
.tts .ttstab .ttsopentranslatebutton {
  height: 36px;
  width: 36px;
  margin: 0.5em;
  background: transparent;
  border: none;
  cursor: pointer;
}
.tts .ttstab .ttsopentranslatebutton img {
  width: 25px;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
  display: block !important;
}
.tts .ttsdownloadrow {
  display: flex;
  justify-content: space-between;
  height: 3em;
}
.tts .ttsdownloadrow .ttspreview {
  display: flex;
  background: #444;
  padding: 0 0.5em;
  align-items: center;
}
.tts .ttsdownloadrow .ttspreview audio {
  max-height: 3em;
}
@supports (-moz-appearance: none) {
  .tts .ttsdownloadrow .ttspreview audio {
    background: #eee;
  }
}
.tts .ttsdownloadrow .ttspreview audio::-webkit-media-controls {
  border-radius: 0;
  filter: invert(0.76) saturate(0%);
}
.tts .ttsdownloadrow .ttspreview .ttsdownloadbutton {
  height: 3em;
  width: 3em;
  margin: 0 0 0 0.5em;
  background: var(--backgroundcolor-light);
  border: none;
  cursor: pointer;
}
.tts .ttsdownloadrow .ttspreview .ttsdownloadbutton img {
  margin-left: auto;
  margin-right: auto;
  display: block !important;
}
.tts .ttsdownloadrow .ttsspeakbutton {
  height: 3em;
  width: 9em;
  background: #444;
  border: none;
  color: var(--foregroundcolor);
  font-size: 1em;
  cursor: pointer;
}
.tts .ttsimportbutton {
  height: 3em;
  padding: 1em 0.5em;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1em;
  color: var(--foregroundcolor);
  display: flex;
  align-items: center;
  text-overflow: ellipsis;
}
.tts .ttsimportbutton img {
  opacity: 0.7;
}
.tts .ttsexportbutton {
  height: 3em;
  padding: 0 1em;
  background: var(--problue);
  border: none;
  cursor: pointer;
  font-size: 1em;
  color: var(--foregroundcolor);
  display: grid;
  grid-auto-flow: column;
  align-items: center;
}
.tts .ttsexportbutton img {
  margin-right: 0.5em;
}
.tts .ttsexportbutton span {
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tts .ttsexportbutton:disabled {
  color: var(--backgroundcolor-light);
  cursor: default;
}
.tts .ttsexportlabel {
  background: grey;
  padding: 0.25em 1.5em;
  border-radius: 6px 6px 0 6px;
  font-weight: bold;
  margin-bottom: -0.75em;
  z-index: 2;
  font-size: 0.875em;
}
.tts .ttsexportdiv {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  height: 4em;
}
.tts .mleft05 {
  margin-left: 0.5em;
}
.tts .ttsedittranslate {
  z-index: 10;
  position: absolute;
  left: 21em;
  bottom: 5.2em;
  background: #111;
  color: var(--foregroundcolor);
  padding: 0.5em;
  display: grid;
  grid-auto-flow: row;
  grid-row-gap: 0.5em;
}
.tts .ttsedittranslate div {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 0.5em;
}
.tts .ttsedittranslate div:last-of-type {
  display: flex;
  justify-content: center;
}
.tts .ttsedittranslate .ttstranslatebutton {
  height: 3em;
  width: 12em;
  margin-top: 0.5em;
  background: var(--backgroundcolor-light);
  color: var(--foregroundcolor);
  border: none;
  cursor: pointer;
}
.tts .ttsedittranslate .closetranslate {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background: none;
  border: none;
  color: var(--foregroundcolor);
  cursor: pointer;
}
@media screen and (max-width: 1200px) {
  .tts .ttsedittranslate {
    left: 13em;
  }
}
.tts .ttseditvoicepopup {
  position: absolute;
  background: var(--backgroundcolor);
  top: 8em;
  left: 18em;
  width: calc(100% - 20em);
  height: calc(100% - 10.5em);
  padding: 1em;
  z-index: 10;
  display: grid;
  grid-auto-flow: row;
  grid-row-gap: 2em;
  grid-template-rows: 2.5em auto;
  border: 1px solid var(--foregroundcolor-disabled);
}
.tts .ttseditvoicepopup .ttseditvoicetop {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 2em;
  grid-template-columns: auto auto 2em;
}
.tts .ttseditvoicepopup .ttseditvoicetop .ttseditvoiceselect {
  display: grid;
  grid-auto-flow: row;
  grid-row-gap: 1em;
}
.tts .ttseditvoicepopup .ttseditvoicetop .ttseditvoicecheckbox {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  right: 1em;
  top: 5.5em;
  background: var(--backgroundcolor-dark);
  padding: 0.5em;
}
.tts .ttseditvoicepopup .ttseditvoicetop .ttseditvoicecheckbox .checkboxdiv {
  display: flex;
  align-items: center;
  justify-content: left;
  height: 1.5em;
}
.tts .ttseditvoicepopup .ttseditvoicetop .ttseditvoicecheckbox .checkboxdiv input[type=checkbox] {
  margin-right: 0.25em;
}
.tts .ttseditvoicepopup .ttseditvoicelist {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  align-content: flex-start;
}
.tts .ttseditvoicepopup .ttseditvoicelist .ttsvoicebox {
  width: 15em;
  height: 6em;
  padding: 0.5em;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 6em auto;
  cursor: pointer;
}
.tts .ttseditvoicepopup .ttseditvoicelist .ttsvoicebox .ttsvoicepreview {
  grid-row: 1;
  grid-column: 1;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  flex-direction: row-reverse;
  margin-right: 1em;
}
.tts .ttseditvoicepopup .ttseditvoicelist .ttsvoicebox .ttsvoicepreview img {
  height: 25px;
  width: 25px;
  border-radius: 0 0 8px 0;
}
.tts .ttseditvoicepopup .ttseditvoicelist .ttsvoicebox img {
  grid-row: 1;
  grid-column: 1;
  height: 5em;
  width: 5em;
  border-radius: 8px;
}
.tts .ttseditvoicepopup .ttseditvoicelist .ttsvoicebox div {
  display: grid;
  grid-auto-flow: row;
}
.tts .ttseditvoicepopup .ttseditvoicelist .ttsvoicebox div :first-child {
  font-weight: 500;
}
.tts .ttseditvoicepopup .ttseditvoicelist .ttsvoicebox label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.tts .ttseditvoicepopup .ttseditvoicelist .ttsvoicebox:hover {
  background: var(--backgroundcolor-dark);
}
.tts .ttseditvoicepopup .closeeditvoice {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background: none;
  border: none;
  color: var(--foregroundcolor);
  cursor: pointer;
}
@media screen and (max-width: 1200px) {
  .tts .ttseditvoicepopup {
    left: 11em;
    min-width: 40em;
    width: calc(100% - 12em);
  }
}
.flex {
  display: flex;
}
.ttstooltip {
  background-color: var(--backgroundcolor-dark);
  display: flex;
  flex-direction: column;
  padding: 0.5em;
  font-size: 12px;
}
.howtocontainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  cursor: pointer;
}
.howtocontainer .howtovideo {
  display: flex;
  flex-flow: column;
  row-gap: 0.25em;
  margin: 0.5em;
  padding: 0.75em;
  width: 10em;
  align-content: space-between;
  background-color: #151515;
  border-radius: 6px;
}
.howtocontainer .howtovideo label {
  display: -webkit-box;
  height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.howtocontainer .howtovideo:hover {
  background-color: var(--backgroundcolor-dark);
}
.expansions {
  background: darkcyan;
  height: calc(100vh - 4.5em);
  overflow: overlay;
  position: absolute;
  width: 100vw;
  top: 4.5em;
  left: 0;
}
.expansions .horizontalscroll {
  justify-content: space-between;
  display: flex;
  padding: 0 4em;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.expansions .horizontalscroll .scrollbutton {
  background: var(--backgroundcolor-dark);
  width: 3em;
  height: 3em;
  opacity: 40%;
  border-radius: 4px;
  cursor: pointer;
}
.expansions .horizontalscroll .expansiontitle {
  font-weight: 500;
  font-size: 2em;
  margin-left: 1em;
  width: 100%;
}
.expansions .expansionsinfo {
  position: absolute;
  display: flex;
  justify-content: space-between;
  bottom: 7.5%;
  padding: 0 13em 0 5em;
}
.expansions .expansionsinfo p {
  height: 6em;
  overflow-y: scroll;
  width: calc(100% - 14em);
  text-overflow: ellipsis;
  scrollbar-width: none;
}
.expansions .expansionsinfo p::-webkit-scrollbar {
  display: none;
}
.expansions .expansionsinfo .buttondiv {
  display: flex;
  flex-flow: column;
}
.expansions .expansionsinfo .buttondiv .learnmore {
  background-color: transparent;
  color: var(--foregroundcolor);
  padding: 0.5em 2em;
  border: 0;
  cursor: pointer;
  font-size: 1em;
  border: 1px solid var(--foregroundcolor);
  margin-bottom: 0.5em;
}
.expansions .expansionsinfo .buttondiv .buynow {
  background-color: var(--problue);
  color: var(--foregroundcolor);
  padding: 0.5em 2em;
  border: 0;
  cursor: pointer;
  font-size: 1em;
}
@media screen and (max-width: 1200px) {
  .expansions .expansionsinfo {
    padding: 0 5em;
  }
}
.headercontainer {
  margin-bottom: 1em;
}
.headercontainer .flex {
  display: flex;
}
.headercontainer .headertitle {
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.headercontainer .headertitle img {
  height: 2em;
  margin-right: 0.5em;
}
.headercontainer .headertitle .productavailability {
  font-weight: bold;
  margin-right: 1em;
}
.headercontainer .headertitle .bubble {
  border-radius: 6px;
  font-size: 0.75em;
  padding: 0.25em 0.5em;
}
.headercontainer .headertitle .bubble.producttype {
  border: 1px solid var(--foregroundcolor);
}
.headercontainer .headertitle .historytitle {
  font-weight: 500;
}
.headercontainer .installedversion {
  white-space: nowrap;
}
.productinsights {
  background: var(--backgroundcolor-dark);
  width: 100%;
  padding: 1em 1em;
}
.productinsights .flex {
  display: flex;
}
.productinsights.bottommargin {
  margin-bottom: 2em;
}
.productinsights .newestversionnotice {
  font-weight: bold;
}
.productinsights .productreleasecontainer {
  width: 100%;
  background: var(--backgroundcolor);
  padding: 1em 1em;
  cursor: pointer;
  margin-bottom: 0.5em;
  padding-right: 0;
}
.productinsights .productreleasecontainer.history {
  border-left: 8px solid #888;
}
.productinsights .productreleasecontainer.notetext {
  background: transparent;
  border: 1px solid var(--foregroundcolor);
}
.productinsights .productreleasecontainer.improvement {
  border-left: 8px solid var(--hubburgundy);
}
.productinsights .productreleasecontainer.bugfix {
  border-left: 8px solid var(--hubburgundy);
}
.productinsights .productreleasecontainer.feature {
  border-left: 8px solid var(--problue);
}
.productinsights .productreleasecontainer.knownissue {
  border-left: 8px solid #007da9;
}
.productinsights .productreleasecontainer .productreleasetitlecontainer {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto 1.5em 1em;
  align-items: center;
}
.productinsights .productreleasecontainer .productreleasetitlecontainer .productreleasetitleandlablecontainer {
  justify-content: space-between;
  display: flex;
  margin-right: 20px;
}
.productinsights .productreleasecontainer .productreleasetitlecontainer .productreleasetitleandlablecontainer .productreleasetitle {
  font-weight: bold;
  cursor: inherit;
  font-size: 1em;
  padding: 0.25em 0.5em;
}
.productinsights .productreleasecontainer .productreleasetitlecontainer .productreleasetitleandlablecontainer .installed {
  border-radius: 6px;
  padding: 0.25em 0.5em;
  margin-left: 10px;
  background: var(--green);
  color: white;
  font-weight: 400;
  font-size: 1em;
}
.releasenotecontainer {
  width: 100%;
  background: var(--backgroundcolor);
  padding: 1em 1em;
  cursor: pointer;
  margin-bottom: 0.5em;
  background-color: #333333;
  padding-right: 0px;
}
.releasenotecontainer .releasenotetitlecontainer {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto 8em 1em;
  align-items: center;
}
.releasenotecontainer .releasenotetitlecontainer div {
  display: flex;
  align-items: center;
}
.releasenotecontainer .releasenotetitlecontainer div img {
  margin-left: 10px;
  cursor: pointer;
}
.releasenotecontainer .releasenotetitlecontainer .releasenotetitle {
  font-weight: bold;
  cursor: inherit;
  font-size: 1em;
  padding: 0.25em 0.5em;
}
.releasenotecontainer .releasenotetitlecontainer .arrowcontainer {
  align-items: end;
  flex-direction: column;
  margin-right: 1px;
}
.releasenotecontainer .releasenoteactionsccontainer {
  display: flex;
  min-width: 6em;
}
.releasenotecontainer .releasenoteactionsccontainer .releasenotevotecontainer {
  width: 90%;
  cursor: default;
  display: flex;
  align-items: end;
  margin-right: 1em;
}
.releasenotecontainer .releasenoteactionsccontainer .releasenotevotecontainer img {
  cursor: pointer;
}
.releasenotecontainer .releasenoteactionsccontainer .releasenotevotecontainer img.voted {
  cursor: default;
}
.releasenotecontainer .releasenoteactionsccontainer .releasenotevotecontainer label {
  margin-left: 8px;
  font-weight: bold;
  margin-bottom: -0.25em;
}
.releasenotecontainer .releasenoteactionsccontainer .arrowcontainer {
  display: flex;
  align-items: center;
}
.releasenotecontainer .noteinfo {
  margin-top: 0.5em;
  padding: 0.25em 0.5em;
}
.releasenotecontainer .noteinfo .releasenotebottomcontainer {
  display: flex;
}
.releasenotecontainer .noteinfo .releasenotebottomcontainer .votecontainer {
  margin-top: 30px;
  margin-bottom: 10px;
}
.releasenotecontainer .noteinfo .releasenotebottomcontainer .votecontainer.voited {
  cursor: auto;
}
.releasenotecontainer .noteinfo .releasenotebottomcontainer .votecontainer img {
  margin-right: 15px;
  vertical-align: middle;
  cursor: pointer;
}
.releasenotecontainer .noteinfo .releasenotebottomcontainer .votecontainer label {
  font-weight: bold;
  vertical-align: middle;
  cursor: pointer;
}
.releasenotecontainer .noteinfo .releasenotebottomcontainer .votecontainer label.voited {
  cursor: auto;
  color: #B3B3B3;
}
.releasenotecontainer .bubble {
  border-radius: 6px;
  padding: 0.25em 0.5em;
  margin-left: 10px;
  font-size: 0.75em;
}
.releasenotecontainer .bubble.notetext {
  background: transparent;
  border: 1px solid var(--foregroundcolor);
}
.releasenotecontainer .bubble.improvement {
  background: var(--hubburgundy);
}
.releasenotecontainer .bubble.bugfix {
  background: var(--hubburgundy);
}
.releasenotecontainer .bubble.feature {
  background: var(--problue);
}
.releasenotecontainer .bubble.knownissue {
  background: #007da9;
}
.releasenotecontainer .releasename {
  margin-left: 10px;
  border-radius: 6px;
  padding: 0.25em 0.5em;
  border: 1px solid white;
  font-size: 0.75em;
}
.historycontainer {
  width: 100%;
  background: var(--backgroundcolor);
  border-radius: 6px;
  padding: 1em 1em;
  cursor: pointer;
  margin-bottom: 0.5em;
}
.historycontainer.history {
  border-left: 8px solid #FF7B5F;
}
.historycontainer .historytitlecontainer {
  display: flex;
  justify-content: space-between;
}
.historycontainer .historytitlecontainer .historytitle {
  font-weight: bold;
  cursor: inherit;
}
.historycontainer .historyinfo {
  margin-top: 0.5em;
}
.futurereleasenotecontainer {
  width: 100%;
  background: #333333;
  padding: 1em 1em;
  margin-bottom: 0.5em;
}
.futurereleasenotecontainer.notetext {
  background: transparent;
  border: 1px solid var(--foregroundcolor);
}
.futurereleasenotecontainer.improvement {
  border-left: 8px solid var(--hubburgundy);
}
.futurereleasenotecontainer.bugfix {
  border-left: 8px solid var(--hubburgundy);
}
.futurereleasenotecontainer.feature {
  border-left: 8px solid var(--problue);
}
.futurereleasenotecontainer.knownissue {
  border-left: 8px solid #007da9;
}
.futurereleasenotecontainer .futurereleasenoteheadercontainer {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.futurereleasenotecontainer .futurereleasenoteheadercontainer .futurereleasenotetitlecontainer {
  min-width: 17em;
}
.futurereleasenotecontainer .futurereleasenoteheadercontainer .futurereleasenotetitlecontainer .futurereleasenotetitle {
  font-weight: bold;
  cursor: inherit;
  font-size: 1em;
  padding: 0.25em 0.5em;
}
.futurereleasenotecontainer .futurereleasenoteheadercontainer .futurereleasenoteactionsccontainer {
  display: flex;
  min-width: 6em;
  align-items: center;
}
.futurereleasenotecontainer .futurereleasenoteheadercontainer .futurereleasenoteactionsccontainer .futurereleasenotevotecontainer {
  width: 90%;
  cursor: default;
  display: flex;
  align-items: end;
  margin-right: 2em;
}
.futurereleasenotecontainer .futurereleasenoteheadercontainer .futurereleasenoteactionsccontainer .futurereleasenotevotecontainer img {
  cursor: pointer;
  margin-left: 10px;
}
.futurereleasenotecontainer .futurereleasenoteheadercontainer .futurereleasenoteactionsccontainer .futurereleasenotevotecontainer img.voted {
  cursor: default;
}
.futurereleasenotecontainer .futurereleasenoteheadercontainer .futurereleasenoteactionsccontainer .futurereleasenotevotecontainer label {
  margin-left: 8px;
  font-weight: bold;
  margin-bottom: -0.25em;
}
.futurereleasenotecontainer .futurereleasenoteheadercontainer .futurereleasenoteactionsccontainer .arrowcontainer {
  display: flex;
  align-items: center;
}
.futurereleasenotecontainer .noteinfo {
  margin-top: 0.5em;
  padding: 0.25em 0.5em;
  display: flex;
  flex-direction: column;
}
.futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer {
  display: flex;
}
.futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer .futurereleasenoteprogresscontainer {
  margin-top: 20px;
  width: 30em;
}
.futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer .futurereleasenoteprogresscontainer .progresslabel {
  font-weight: 500;
}
.futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer .futurereleasenoteprogresscontainer .futurereleasenoteprogress {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  background-color: black;
}
.futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer .futurereleasenoteprogresscontainer .futurereleasenoteprogress span {
  height: 100%;
  display: block;
  width: 0;
  color: rgb(255, 251, 251);
  line-height: 30px;
  position: absolute;
  text-align: end;
  padding-right: 5px;
  background-color: white;
}
.futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer .votecontainer {
  margin-top: 30px;
  margin-bottom: 10px;
  margin-left: 50px;
}
.futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer .votecontainer.voited {
  cursor: auto;
}
.futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer .votecontainer img {
  margin-right: 15px;
  vertical-align: middle;
  cursor: pointer;
}
.futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer .votecontainer label {
  font-weight: bold;
  vertical-align: middle;
  cursor: pointer;
}
.futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer .votecontainer label.voited {
  cursor: auto;
  color: #B3B3B3;
}
.futurereleasenotecontainer .bubble {
  border-radius: 6px;
  padding: 0.25em 0.5em;
  margin-left: 10px;
  font-size: 0.75em;
}
.futurereleasenotecontainer .bubble.notetext {
  background: transparent;
  border: 1px solid var(--foregroundcolor);
}
.futurereleasenotecontainer .bubble.improvement {
  background: var(--hubburgundy);
}
.futurereleasenotecontainer .bubble.bugfix {
  background: var(--hubburgundy);
}
.futurereleasenotecontainer .bubble.feature {
  background: var(--problue);
}
.futurereleasenotecontainer .bubble.knownissue {
  background: #007da9;
}
.middlecontainer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}
.middlecontainer.insideelement {
  position: relative;
}
@media only screen and (max-device-width: 480px) {
  .futurereleasenotecontainer .futurereleasenoteheadercontainer .futurereleasenoteactionsccontainer div[data-toggle=collapse] {
    display: none;
  }
  .releasenotecontainer .releasenoteactionsccontainer div[data-toggle=collapse] {
    display: none;
  }
}
.headerupdate {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.headerupdate .updatebutton {
  border: none;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  padding: 0.5em 2em;
}
.headerupdate .updatebutton div {
  display: flex;
  flex-direction: column;
}
.headerupdate .updatebutton div :first-child {
  text-transform: uppercase;
  font-weight: bold;
}
.headerupdate .updatebutton div label {
  cursor: pointer;
  white-space: nowrap;
}
@media only screen and (max-device-width: 800px) {
  .futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer {
    display: initial !important;
  }
  .futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer .futurereleasenoteprogresscontainer {
    min-width: 100% !important;
  }
  .futurereleasenotecontainer .noteinfo .futurereleasenotebottomcontainer .votecontainer {
    margin-left: 0 !important;
  }
}
.profile {
  margin-left: 2em;
}
.profile .logoutbutton {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  margin-top: 1em;
}
.profile .logoutbutton img {
  margin-right: 0.5em;
}
.profile .logoutbutton label {
  cursor: pointer;
}
.profile .logoutbutton:hover {
  text-decoration: underline;
}
.profile .profilegreeting {
  display: flex;
  flex-direction: column;
  font-size: 1.25em;
  margin: 1em 0;
}
.profile .profilebenefits {
  display: flex;
  gap: 1em;
  flex-flow: wrap;
}
.profile .profilebenefits .profilebubble {
  background: var(--backgroundcolor-dark);
  display: grid;
  min-width: 26.5em;
  padding: 1.5em;
  justify-items: left;
  border-radius: 6px;
  min-height: 14.5em;
  height: fit-content;
}
.profile .profilebenefits .profilebubble .bubbleabos {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: wrap;
}
.profile .profilebenefits .profilebubble .bubbleabos div {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: 7em 3em;
  justify-items: center;
  align-items: center;
}
.profile .profilebenefits .profilebubble .bubbleabos div img {
  height: 7em;
  padding: 0.5em;
  margin-top: 1em;
}
.profile .profilebenefits .profilebubble .bubbleabos div label:first-of-type {
  text-align: center;
  margin-top: 0.5em;
  max-width: 7em;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.profile .profilebenefits .profilebubble .bubbleabos div:not(:last-child) {
  margin-right: 1em;
}
.profile .profilebenefits .profilebubble .bubbletitle {
  font-weight: bold;
  margin-bottom: 1em;
  display: contents;
}
.profile .profilebenefits .profilebubble .downloadcircles {
  display: flex;
}
.profile .profilebenefits .profilebubble .downloadcircles div {
  margin-right: 1em;
}
.profile .profilebenefits .profilebubble .hubspace-border {
  height: 10px;
  width: 100%;
  background: var(--backgroundcolor-light);
  border-radius: 10px;
  margin: 0.5em 0;
}
.profile .profilebenefits .profilebubble .hubspace-border .hubspace-burgundy {
  background-color: var(--hubburgundy);
  height: 10px;
  border-radius: 10px;
}
.profile .profilebenefits .profilebubble .buylink {
  text-decoration: underline;
}
.profile .profilebenefits .storagebubble {
  min-height: 8em;
  height: 8em;
}
.profile .profilebenefits .circleprogress {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: space-between;
  min-height: 8em;
  height: 8em;
  padding: 0.5em 1.5em;
}
.profile .profilebenefits .circleprogress div {
  display: flex;
  flex-direction: column;
}
.profile .profilebenefits .profiledownloads {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 150px auto;
  justify-items: start;
}
.profile .profilebenefits .redeembubble .redeem-container {
  display: flex;
  flex-flow: row;
  column-gap: 2em;
}
.profile .profilebenefits .redeembubble .redeem-container .redeem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.profile .profilebenefits .redeembubble .redeem-container .redeem input {
  width: 18em;
  background: transparent;
  border: none;
  padding: 0;
  text-transform: uppercase;
  font-size: 1.5em;
  font-family: monospace;
  color: var(--foregroundcolor);
  letter-spacing: 2px;
}
.profile .profilebenefits .redeembubble .redeem-container .redeem input:focus {
  outline: none;
  box-shadow: none;
}
.profile .profilebenefits .redeembubble .redeem-container .redeem button {
  background-color: var(--hubburgundy);
  border: none;
  color: var(--foregroundcolor);
  padding: 0.5em 2em;
  border-radius: 6px;
  width: fit-content;
}
.profile .profilebenefits .redeembubble .redeem-container .redeem button:disabled {
  background-color: var(--foregroundcolor-disabled);
  cursor: default;
}
.profile .profilebenefits .redeembubble .redeem-container .redeem .redeem-result {
  font-weight: bold;
  white-space: pre-wrap;
  max-width: 22em;
}
.profile .profilebenefits .redeembubble .redeem-container .redeem .redeem-result.success {
  color: green;
}
.profile .profilebenefits .redeembubble .redeem-container .redeem .redeem-result.fail {
  color: red;
}
.profiletooltip {
  display: flex;
  flex-direction: column;
  padding: 0.5em;
  font-size: 12px;
}
.profiletooltip div {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 3em auto;
  align-items: start;
}
.profiletooltip div div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profiletooltip div div img {
  height: 2em;
  width: 2em;
  margin-top: 2px;
}
.category {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.category h2 {
  margin-bottom: 0;
}
.helpframe {
  width: 100%;
  height: calc(100vh - 6em);
  border: none;
  background: white;
}
.middlecontainer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}
.mediabrowser {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--backgroundcolor-dark);
}
@media (max-height: 640px) {
  .mediabrowser {
    font-size: 0.875em;
  }
}
.mediabrowser .mediatop {
  height: 5em;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 3em auto;
  align-items: center;
  padding: 0 0 0 0.5em;
}
.mediabrowser .mediatop h1 {
  font-size: 1.25em;
  font-weight: normal;
  margin: 0;
}
.mediabrowser .medialeft {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: 5em auto 5em;
  background: var(--backgroundcolor);
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
}
.mediabrowser .medialeft h3 {
  font-size: 0.9em;
  font-weight: normal;
  color: var(--foregroundcolor);
  opacity: 0.625;
  margin-left: 0.5em;
  margin-bottom: 0.5em;
}
.mediabrowser .medialeft .mediacontainer {
  margin: 0.25em 0 0 0.5em;
}
.mediabrowser .medialeft .mediacontainer :first-child {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: 1.75em auto 2.5em 2.5em 2.5em;
}
.mediabrowser .medialeft .mediacontainer :first-child .containercount {
  background-color: var(--foregroundcolor);
  width: fit-content;
  padding: 0 0.375em;
  color: var(--backgroundcolor);
  border-radius: 6px;
  cursor: default;
}
.mediabrowser .medialeft label {
  cursor: pointer;
  font-size: 1.25em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mediabrowser .medialeft label:hover {
  text-decoration: underline;
}
.mediabrowser .medialeft .collectionsdiv {
  margin-left: 0.5em;
}
@media (orientation: portrait) {
  .mediabrowser .medialeft .collectionsdiv {
    overflow-y: auto;
  }
}
.mediabrowser .medialeft .collectionsdiv .newcontainer {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1.75em auto;
  align-items: center;
  max-width: fit-content;
  background-color: white;
  border-radius: 6px;
  padding: 0 0.5em;
  margin: 0.25em 0;
}
.mediabrowser .medialeft .collectionsdiv .newcontainer .invert {
  filter: invert(1);
}
.mediabrowser .medialeft .collectionsdiv .newcontainer label {
  font-weight: 500;
  color: var(--backgroundcolor-dark);
}
.mediabrowser .medialeft .collectionsdiv .newcontainer label:hover {
  text-decoration: none;
}
.mediabrowser .menubuttondiv {
  display: flex;
  justify-content: flex-end;
}
.mediabrowser .menubuttondiv .menubutton {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mediabrowser .menubuttondiv .menubutton div {
  width: 18px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
}
.mediabrowser .spaceinfodiv {
  margin: 1em;
}
.mediabrowser .spaceinfodiv label {
  font-size: 1em;
  cursor: default;
}
.mediabrowser .spaceinfodiv label:hover {
  text-decoration: none;
}
.mediabrowser .mc-collapsed {
  grid-template-columns: 60px 0 auto;
}
@media (orientation: portrait) {
  .mediabrowser .mediacenter {
    grid-auto-flow: row;
    grid-template-rows: 300px 1px auto;
    grid-template-columns: none;
  }
  .mediabrowser .mc-collapsed {
    grid-template-rows: 40px 1px auto;
    grid-template-columns: none;
  }
}
.mediabrowser .mediamiddle {
  background-color: var(--foregroundcolor-disabled);
}
.mediabrowser .mediaright {
  display: flex;
  flex-flow: wrap;
  align-content: flex-start;
  overflow-y: auto;
  height: calc(100vh - 4em);
  overflow: auto;
}
.mediabrowser progress::-webkit-progress-value {
  background-color: var(--hubburgundy) !important;
  border-radius: 1em;
}
.mediabrowser progress::-moz-progress-bar {
  background-color: var(--hubburgundy) !important;
  border-radius: 1em;
}
.mediabrowser progress {
  height: 6px;
  width: 100%;
  color: var(--hubburgundy);
  accent-color: var(--hubburgundy);
  border-radius: 1em;
}
.mediabrowser progress::-webkit-progress-bar {
  background-color: var(--backgroundcolor-dark);
  width: 100%;
  border-radius: 1em;
}
.mediabrowser progress {
  background-color: var(--backgroundcolor-dark);
  border-radius: 1em;
  border: none;
}
.mediabottom {
  position: absolute;
  margin-top: 200px;
}
.mediabottom .setpagecount {
  display: flex;
  flex-direction: column;
}
.mediabottom label {
  cursor: pointer;
}
.mediabottom .pages {
  display: flex;
  justify-content: space-between;
}
.imagebutton {
  padding: 0.5em;
  cursor: pointer;
}
.flip {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.margin-1em {
  margin-right: 1em;
}
.margin-all-1em {
  margin: 1em;
}
.mediabuttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 1em;
  gap: 1em;
}
.mediabuttons div {
  display: flex;
}
.mediabuttons .mediasearch {
  border-radius: 6px;
  padding: 0.25em 0.5em;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 2em auto;
  align-items: center;
  margin-left: 1em;
}
@media (orientation: portrait) {
  .mediabuttons .mediasearch {
    width: 200px;
  }
}
.mediabuttons .mediasearch img {
  height: 1.5em;
  width: 1.5em;
}
.mediabuttons .mediasearch input {
  border: none;
  background-color: transparent;
  color: var(--foregroundcolor);
  font-size: 1.5em;
}
.mediabuttons .mediasearch input:focus {
  outline: none;
}
.mediabuttons select {
  font-size: 1.5em;
  background: transparent;
  margin-left: 0.5em;
}
.mediabuttons .vert-flip {
  transform: scale(1, -1);
}
.middle {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}
.middle.inelemementloading {
  position: relative;
}
.middle.inelemementloading .lds-magix {
  width: 40px;
  height: 40px;
}
.middle.inelemementloading .lds-ellipsis {
  width: 40px;
  height: 40px;
}
.middle .lds-magix {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.middle .lds-magix div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 12px;
  background: white;
  animation: 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  border-radius: 1em;
}
.middle .lds-magix div:nth-child(1) {
  left: 8px;
  animation-name: lds-magix-left;
  animation-delay: 0s;
  transform: rotate(23.2deg);
}
.middle .lds-magix div:nth-child(2) {
  left: 30px;
  animation-name: lds-magix-mid;
  animation-delay: 0.24s;
  transform: rotate(23.2deg);
}
.middle .lds-magix div:nth-child(3) {
  left: 52px;
  animation-name: lds-magix-right;
  animation-delay: 0.48s;
  transform: rotate(23.2deg);
}
.middle .lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.middle .lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.middle .lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.middle .lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.middle .lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.middle .lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-magix-left {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}
@keyframes lds-magix-mid {
  0% {
    top: -24px;
    height: 128px;
  }
  50%, 100% {
    top: 8px;
    height: 64px;
  }
}
@keyframes lds-magix-right {
  0% {
    top: -8px;
    height: 96px;
  }
  50%, 100% {
    top: 16px;
    height: 48px;
  }
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}