:root {
  --color3: #a94038;
  --color5: #bdbba3;
  --bg1b: #212321;
  --bg1: #383d38;
  --bg2: #455048;
  --icons: 24px;
  --link: #0687f5;
  --text: #909190;
}

* {
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  background: var(--bg1);
  background-image: url("bg.svg");
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

body > div {
  flex-grow: 1;
  background: black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  margin-left: 1em;
  margin-right: 1em;
  width: 350px;
  max-width: 100%;
  min-height: 0;
}

.maintabs > .w_tabheader {
  background: var(--bg1b);
  min-height: auto;
  align-items: center;
}

.w_tabheader a {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body > * {
  flex-shrink: 1;
}

.w__space {
  flex-grow: 1;
}

.w__hdiv,
.w__vdiv,
.w_hbox,
.w_vbox {
  display: flex;
}

.w_text {
  color: var(--text);
  margin: 1em;
  font-family: sans-serif;
}

.w__hdiv,
.w_hbox {
  flex-direction: row;
}

.w__hdiv > *,
.w_hbox > * {
  min-width: 0;
}

.w__vdiv,
.w_vbox {
  flex-direction: column;
}

.w_player {
  flex-grow: 2;
}
.controls {
  flex-grow: 1;
}

.w__hbar {
  height: 0.12em;
  background-color: var(--bg1);
  display: inline-block;
  flex-grow: 1;
  grid-column: 1 / end;
}

.w_imagelink {
  display: inline-flex;
  width: fit-content;
  height: fit-content;
  min-width: fit-content;
  min-height: fit-content;
}

.maintabs > .w_tabbody {
  flex-grow: 1;
  overflow: auto;
}

.controls {
  justify-content: space-evenly;
  align-items: center;
}

.w_toggle div {
  display: none;
}

body > .w_tabs > div {
  justify-content: space-around;
}

body > .w_tabs > div > .w_tab {
  border-top: 2px solid black;
  margin: 0.4em;
  padding-top: 0.2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

body > .w_tabs > div > .w_tab:hover {
  border-color: var(--color3);
  opacity: 100%;
}

body > .w_tabs > div > .w_tab.w_selected {
  border-color: var(--color3);
}

.w_tab img,
.w_slider > img,
.w_toggle input,
img.w_button {
  opacity: 50%;
  filter: invert(100%) brightness(190%);
}
.w_tab:hover img,
.w_tab.w_selected img,
.w_slider:hover > img,
.w_toggle:hover input,
img.w_button:hover {
  opacity: 100%;
}
button.w_button {
  border: 2px solid var(--text);
  color: var(--text);
  padding: 0.4em;
  background: none;
  border-radius: 0.4em;
  font-size: 1em;
}
button.w_button:hover {
  border-color: white;
  color: white;
}

.w_slider > * {
  margin-left: 0.2em;
  margin-right: 0.2em;
}

.w_toggle input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  display: inline-block;
  width: var(--icons);
  height: var(--icons);
}

.w_toggle.star_check input {
  background-image: url("star-outline.svg");
}

.w_toggle.star_check input:checked {
  background-image: url("star.svg");
}

div.errors {
  color:rgb(210, 106, 106);
}

p {
  margin: 1em 0;
}

.w_toggle,
.w_slider,
.w_button {
  margin: 4px;
}

.w_list {
  height: 100%;
  background: #232323;
}

.w_details[open="false"] > *:not(.w_detailssummary) {
  display: none !important;
}

.w_details .w_detailssummary {
  cursor: pointer;
  padding-left: calc(var(--icons) * 1.25);
  margin-left: calc(var(--icons) * -1.25);
  display: inline-block;
  background-image: url("chevron-right.svg");
  background-repeat: no-repeat;
  background-position: left center;
}

.w_details .w_expand {
  display: inline-block;
  width: var(--icons);
  height: var(--icons);
  background-image: url("chevron-right.svg");
}

.w_details[open="true"] > .w_detailssummary > .w_expand {
  background-image: url("chevron-down.svg");
}

.tool {
  align-items: center;
}

.trcklistelement {
  background: black;
  margin: 0.2em;
  padding: 0.2em;
  font-family: sans-serif;
  align-items: center;
}

.trcklistelement > a {
  margin: 4px;
}

.trcklistelement > div {
  justify-content: space-around;
  padding-left: 0.2em;
  flex-grow: 1;
}

.trcklistelement > div > a {
  margin-left: 0.5em;
}

.trcklistelement .date,
.trcklistelement .time {
  margin: 0.5em;
}

.trcklistelement .date {
  color: rgb(82, 82, 82);
}

.trcklistelement .time {
  color: rgb(100, 100, 100);
}

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

.settings-outer {
  background-color: var(--bg2);
  border-left: 2px solid black;
  padding: 1em;
  overflow-y: auto;
  color: var(--color5);
  font-family: sans-serif;
  flex-grow: 1;
  border-right: 2px solid black;
}

.settings {
  display: grid;
  grid-template-columns: 0fr 0fr 0fr 1fr;
  align-items: center;
  text-transform: capitalize;
  grid-template-rows: 0fr 0fr 0fr 1fr;
  grid-gap: 0.4em;
}

.settings .w_toggle input {
  background-image: url("checkbox-blank-outline.svg");
}

.settings .w_toggle input:checked {
  background-image: url("checkbox-marked-outline.svg");
}

.settings .w_details {
  display: contents;
}

.settings .w_detailssummary .w_expand {
  grid-column: 1;
}

.settings .w_toggle {
  grid-column: 2;
  align-self: center;
}

.settings .w_detailssummary .w_text {
  grid-column: 3 / span 2;
  margin: 0;
}

.settings .w_slider input {
  grid-column: 3 / span 2;
}

.settings .detail .w_text {
  grid-column: 3 / span 2;
}

.settings .tool {
  display: inline-block !important;
  grid-column: 3 / span 2;
  text-align: right;
}

.settings-outer .tool > * {
  margin: 0.5em 1em;
}

.settings .w_details > .w_hbox {
  display: contents;
}

.settings .w_toggle {
  min-width: auto;
}

.settings .w_slider {
  display: contents;
}

.settings .w_slider label {
  grid-column: 2;
  min-width: auto;
}

.settings > .w_details:nth-child(1) > .w_detailssummary {
  margin-top: 0.2em;
}

.settings > .w_details > .w_detailssummary {
  margin-top: 1em;
  font-size: 1.5em;
  font-weight: bold;
}

.settings > .w_details > .w_details > .w_detailssummary {
  margin-top: 0.5em;
  font-size: 1.2em;
}

.postfilters {
  padding-top: 1em;
}

div.info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0.5em 1em 0.5em 1em;
}

div.info > * {
  margin: 0;
}

div.info > *:last-child {
  flex-grow: 1;
  text-align: right;
}

.trcklistelement .w_imagelink {
  flex-shrink: 0;
}

.trcklistelement .w_imagelink > img {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  overflow: hidden;
}