Zelda64Recomp/assets/recomp.rcss

/* stylelint-disable color-no-hex, color-hex-length */
h1 {
  font-size: 68dp;
  letter-spacing: 4.76dp;
  line-height: 68dp;
  font-style: normal;
  font-weight: 700;
}

h2 {
  font-size: 52dp;
  letter-spacing: 3.64dp;
  line-height: 52dp;
  font-style: normal;
  font-weight: 700;
}

h3, .tab {
  font-size: 36dp;
  letter-spacing: 2.52dp;
  line-height: 36dp;
  font-style: normal;
  font-weight: 700;
}

.label-lg, .menu-list-item__label, .button--large {
  font-size: 36dp;
  letter-spacing: 3.96dp;
  line-height: 36dp;
  font-style: normal;
  font-weight: 700;
}

.label-md, .config-debug-option__label, .button, .config-option__title, .config-option--hz .config-option__title, .config-group__title, .control-option__label {
  font-size: 28dp;
  letter-spacing: 3.08dp;
  line-height: 28dp;
  font-style: normal;
  font-weight: 700;
}

.label-sm, .config-debug__select-wrapper .config-debug__select-label, .subtitle-title__disclaimer, .config-option__range-label, .config-option-range__label, .config-option__radio-tabs .config-option__tab-label,
.config-option__list .config-option__tab-label, .centered-page__controls > label {
  font-size: 20dp;
  letter-spacing: 2.8dp;
  line-height: 20dp;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.config-option__details {
  font-size: 18dp;
  letter-spacing: 2.52dp;
  line-height: 18dp;
  font-style: normal;
  font-weight: 400;
}

body, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .config-description__contents, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config__wrapper p {
  font-size: 20dp;
  letter-spacing: 0dp;
  line-height: 20dp;
  font-style: normal;
  font-weight: 400;
}

.toggle__icon {
  font-family: promptfont;
  font-size: 56dp;
  font-style: normal;
  font-weight: 400;
  line-height: 56dp;
}

.prompt-font {
  font-family: promptfont;
  font-size: 40dp;
  font-style: normal;
  font-weight: 400;
  line-height: 40dp;
}

.prompt-font-sm, .input-viz__mappings div {
  font-family: promptfont;
  font-size: 32dp;
  font-style: normal;
  font-weight: 400;
  line-height: 32dp;
}

/*
@include trans-colors;
*/
/*
@include trans-colors-opa;
*/
/*
@include trans-colors-svg;
*/
/*
@include trans-colors-border;
*/
.nav-vert, .nav-dir, .nav-all, .config-debug__select-wrapper select selectbox option, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .toggle, .subtitle-title:not(:disabled, [disabled]), .menu-list-item:not(:disabled, [disabled]), .icon-button:not([disabled]), .button:not([disabled]), .button, .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config-option__radio-tabs input.radio,
.config-option__list input.radio, .config-option__radio-tabs .config-option__checkbox,
.config-option__list .config-option__checkbox, .tab, .control-option__binding:not([disabled]) {
  nav-up: auto;
  nav-down: auto;
}

.nav-horiz, .nav-dir, .nav-all, .config-debug__select-wrapper select selectbox option, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .toggle, .subtitle-title:not(:disabled, [disabled]), .menu-list-item:not(:disabled, [disabled]), .icon-button:not([disabled]), .button:not([disabled]), .button, .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config-option__radio-tabs input.radio,
.config-option__list input.radio, .config-option__radio-tabs .config-option__checkbox,
.config-option__list .config-option__checkbox, .tab, .control-option__binding:not([disabled]) {
  nav-right: auto;
  nav-left: auto;
}

.nav-foc, .nav-all, .config-debug__select-wrapper select selectbox option, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .toggle, .subtitle-title:not(:disabled, [disabled]), .menu-list-item:not(:disabled, [disabled]), .icon-button:not([disabled]), .button:not([disabled]), .button, .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config-option__radio-tabs input.radio,
.config-option__list input.radio, .config-option__radio-tabs .config-option__checkbox,
.config-option__list .config-option__checkbox, .tab, .control-option__binding:not([disabled]) {
  focus: auto;
  tab-index: auto;
}

/*
@include set-color(COLOR);
*/
/* stylelint-disable color-no-hex, color-hex-length */
h1 {
  font-size: 68dp;
  letter-spacing: 4.76dp;
  line-height: 68dp;
  font-style: normal;
  font-weight: 700;
}

h2 {
  font-size: 52dp;
  letter-spacing: 3.64dp;
  line-height: 52dp;
  font-style: normal;
  font-weight: 700;
}

h3, .tab {
  font-size: 36dp;
  letter-spacing: 2.52dp;
  line-height: 36dp;
  font-style: normal;
  font-weight: 700;
}

.label-lg, .menu-list-item__label, .button--large {
  font-size: 36dp;
  letter-spacing: 3.96dp;
  line-height: 36dp;
  font-style: normal;
  font-weight: 700;
}

.label-md, .config-debug-option__label, .button, .config-option__title, .config-option--hz .config-option__title, .config-group__title, .control-option__label {
  font-size: 28dp;
  letter-spacing: 3.08dp;
  line-height: 28dp;
  font-style: normal;
  font-weight: 700;
}

.label-sm, .config-debug__select-wrapper .config-debug__select-label, .subtitle-title__disclaimer, .config-option__range-label, .config-option-range__label, .config-option__radio-tabs .config-option__tab-label,
.config-option__list .config-option__tab-label, .centered-page__controls > label {
  font-size: 20dp;
  letter-spacing: 2.8dp;
  line-height: 20dp;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.config-option__details {
  font-size: 18dp;
  letter-spacing: 2.52dp;
  line-height: 18dp;
  font-style: normal;
  font-weight: 400;
}

body, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .config-description__contents, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config__wrapper p {
  font-size: 20dp;
  letter-spacing: 0dp;
  line-height: 20dp;
  font-style: normal;
  font-weight: 400;
}

.toggle__icon {
  font-family: promptfont;
  font-size: 56dp;
  font-style: normal;
  font-weight: 400;
  line-height: 56dp;
}

.prompt-font {
  font-family: promptfont;
  font-size: 40dp;
  font-style: normal;
  font-weight: 400;
  line-height: 40dp;
}

.prompt-font-sm, .input-viz__mappings div {
  font-family: promptfont;
  font-size: 32dp;
  font-style: normal;
  font-weight: 400;
  line-height: 32dp;
}

/*
@include trans-colors;
*/
/*
@include trans-colors-opa;
*/
/*
@include trans-colors-svg;
*/
/*
@include trans-colors-border;
*/
.nav-vert, .nav-dir, .nav-all, .config-debug__select-wrapper select selectbox option, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .toggle, .subtitle-title:not(:disabled, [disabled]), .menu-list-item:not(:disabled, [disabled]), .icon-button:not([disabled]), .button:not([disabled]), .button, .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config-option__radio-tabs input.radio,
.config-option__list input.radio, .config-option__radio-tabs .config-option__checkbox,
.config-option__list .config-option__checkbox, .tab, .control-option__binding:not([disabled]) {
  nav-up: auto;
  nav-down: auto;
}

.nav-horiz, .nav-dir, .nav-all, .config-debug__select-wrapper select selectbox option, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .toggle, .subtitle-title:not(:disabled, [disabled]), .menu-list-item:not(:disabled, [disabled]), .icon-button:not([disabled]), .button:not([disabled]), .button, .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config-option__radio-tabs input.radio,
.config-option__list input.radio, .config-option__radio-tabs .config-option__checkbox,
.config-option__list .config-option__checkbox, .tab, .control-option__binding:not([disabled]) {
  nav-right: auto;
  nav-left: auto;
}

.nav-foc, .nav-all, .config-debug__select-wrapper select selectbox option, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .toggle, .subtitle-title:not(:disabled, [disabled]), .menu-list-item:not(:disabled, [disabled]), .icon-button:not([disabled]), .button:not([disabled]), .button, .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config-option__radio-tabs input.radio,
.config-option__list input.radio, .config-option__radio-tabs .config-option__checkbox,
.config-option__list .config-option__checkbox, .tab, .control-option__binding:not([disabled]) {
  focus: auto;
  tab-index: auto;
}

/*
@include set-color(COLOR);
*/
/* stylelint-disable color-no-hex */
/* stylelint-disable selector-max-id */
* {
  box-sizing: border-box;
}

hr {
  display: block;
  padding: 1.5dp;
  background: #08070D;
}

body {
  color: #fff;
  font-family: chiaro;
  font-size: 20dp;
  font-style: normal;
  font-weight: normal;
}

/* div { 
    focus:none;
    tab-index:none;
} */
div#window {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-color: rgba(255, 255, 255, 0.2);
  background-color: #121018;
}

div#content {
  z-index: 2;
  width: auto;
  height: 100%;
  overflow: hidden auto;
  text-align: center;
}

p {
  text-align: left;
}

input.submit {
  margin-left: 0;
}

input.text,
input.password {
  box-sizing: border-box;
  height: 31dp;
  padding: 11dp 10dp 0;
  text-align: left;
  cursor: text;
}

textarea {
  padding: 14dp 12dp 10dp;
  text-align: left;
  cursor: text;
}

input.text,
input.password,
select,
textarea {
  /* color: #333; */
  /* font-size: 13dp */
  height: auto;
}

table input.text {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  /* height: 18dp; */
  margin: 0;
  border-width: 1.1dp;
  border-color: #000;
  background-color: #fff;
  font-size: 15dp;
  /* padding: 0 5dp; */
  line-height: 1;
  decorator: none;
  /* vertical-align: center; */
}

input.radio {
  flex: 0;
  width: 0dp;
  nav-up: auto;
  nav-right: auto;
  nav-down: auto;
  nav-left: auto;
  tab-index: auto;
  focus: auto;
}

input.checkbox {
  width: 20dp;
  height: 20dp;
  nav-up: auto;
  nav-right: auto;
  nav-down: auto;
  nav-left: auto;
  tab-index: auto;
  focus: auto;
}

scrollbarvertical, scrollbarhorizontal {
  margin: 0;
  border: 0;
}
scrollbarvertical slidertrack, scrollbarhorizontal slidertrack {
  background: #DABAF7;
  opacity: 0.05;
}
scrollbarvertical sliderbar, scrollbarhorizontal sliderbar {
  border-radius: 5dp;
  background: #DABAF7;
  opacity: 0.1;
}
scrollbarvertical sliderbar:hover:not(:active), scrollbarhorizontal sliderbar:hover:not(:active) {
  opacity: 0.2;
}
scrollbarvertical sliderbar:active, scrollbarhorizontal sliderbar:active {
  opacity: 0.3;
}
scrollbarvertical sliderarrowdec, scrollbarvertical sliderarrowinc, scrollbarhorizontal sliderarrowdec, scrollbarhorizontal sliderarrowinc {
  width: 0;
  height: 0;
}

scrollbarvertical {
  width: 12dp;
}
scrollbarvertical slidertrack {
  width: 12dp;
}
scrollbarvertical sliderbar {
  width: 12dp;
}

scrollbarhorizontal {
  height: 12dp;
}
scrollbarhorizontal slidertrack {
  height: 12dp;
}
scrollbarhorizontal sliderbar {
  height: 12dp;
}

.centered-page {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 64dp;
  background-color: rgba(255, 255, 255, 0.1);
}

.centered-page__modal {
  display: flex;
  position: relative;
  flex: 1 1 100%;
  flex-direction: column;
  width: 100%;
  max-width: 1692.4444444444dp;
  height: 100%;
  margin: auto;
  border-width: 1.1dp;
  border-radius: 16dp;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(8, 7, 13, 0.9);
}
.centered-page__modal > .tabs {
  display: flex;
  position: relative;
  flex: 1 1 100%;
  flex-direction: column;
  width: 100%;
  max-width: 1692.4444444444dp;
  height: 100%;
  margin: auto;
}
.centered-page__modal panels {
  flex: 1 1 100%;
}

.centered-page__controls {
  display: flex;
  position: absolute;
  bottom: 24dp;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1692.4444444444dp;
  height: auto;
  margin: 0 auto;
}
.centered-page__controls > label {
  display: inline-block;
  align-items: center;
  justify-content: space-between;
  width: auto;
  height: 24dp;
}
.centered-page__controls > label:not(:last-child) {
  margin-right: 40dp;
}
.centered-page__controls > label > span:first-child {
  margin-right: 4dp;
}

.control-option {
  color: #CCCCCC;
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  padding: 4dp 16dp 4dp 20dp;
  border-radius: 8dp;
  background-color: rgba(0, 0, 0, 0);
}
.control-option svg {
  image-color: #CCCCCC;
}
.control-option svg {
  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
}
.control-option:focus-visible:not(:disabled, [disabled]), .control-option:hover:not(:disabled, [disabled]) {
  color: #F2F2F2;
  background-color: rgba(190, 184, 219, 0.1);
}
.control-option:focus-visible:not(:disabled, [disabled]) svg, .control-option:hover:not(:disabled, [disabled]) svg {
  image-color: #F2F2F2;
}
.control-option:disabled, .control-option[disabled] {
  opacity: 0.5;
}
[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] {
  border-color: #F86039;
}
[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-icon {
  opacity: 0;
}
[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-recording {
  opacity: 1;
}
[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] {
  border-color: #F86039;
}
[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-icon {
  opacity: 0;
}
[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-recording {
  opacity: 1;
}
.control-option .icon-button {
  flex: 1 1 auto;
}

.control-option__label {
  flex: 2 1 300dp;
  height: auto;
  white-space: nowrap;
}

.control-option__bindings {
  display: flex;
  position: relative;
  flex: 2 1 400dp;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 56dp;
  padding: 0 12dp 0 4dp;
}

.control-option__binding {
  color: #CCCCCC;
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out;
  display: flex;
  position: relative;
  flex: 1 1 100%;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56dp;
  margin: 0 4dp;
  padding: 8dp;
  border-width: 1.1dp;
  border-radius: 8dp;
  border-color: rgba(190, 184, 219, 0.1);
  background-color: rgba(190, 184, 219, 0.1);
}
.control-option__binding svg {
  image-color: #CCCCCC;
}
.control-option__binding svg {
  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
}
.control-option__binding:focus, .control-option__binding:hover {
  color: #F2F2F2;
  border-color: #F2F2F2;
  background-color: rgba(255, 255, 255, 0.1);
}
.control-option__binding:focus svg, .control-option__binding:hover svg {
  image-color: #F2F2F2;
}
.control-option__binding:active {
  color: rgb(244.6, 244.6, 244.6);
}
.control-option__binding:active svg {
  image-color: rgb(244.6, 244.6, 244.6);
}
.control-option__binding:disabled, .control-option__binding[disabled] {
  color: #CCCCCC;
  opacity: 0.5;
}
.control-option__binding:disabled svg, .control-option__binding[disabled] svg {
  image-color: #CCCCCC;
}
.control-option__binding:not([disabled]) {
  cursor: pointer;
}

.control-option__binding-icon {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
  opacity: 1;
}

@keyframes control-option__binding-recording-scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}
.control-option__binding-recording {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.control-option__binding-recording .control-option__binding-circle {
  width: 24dp;
  height: 24dp;
  animation: 1.5s sine-in-out infinite control-option__binding-recording-scale;
  border-radius: 24dp;
  background-color: #F86039;
}
.control-option__binding-recording .control-option__binding-edge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36dp;
  height: 36dp;
  transform: translate(-50%, -50%);
}
.control-option__binding-recording .control-option__binding-edge > svg.control-option__binding-edge-svg {
  width: 36dp;
  height: 36dp;
  image-color: #F86039;
}

/*
    Example:
        <tab class="tab">
            <div>Graphics</div>
            <div class="tab__indicator"></div>
        </tab>
*/
.tabs tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.tab {
  display: block;
  position: relative;
  margin: 0;
  padding: 20dp 24dp;
  opacity: 0.9;
  background-color: rgba(0, 0, 0, 0);
  color: rgba(255, 255, 255, 0.6);
}
.tab:selected {
  color: #F2F2F2;
}
.tab:selected .tab__indicator {
  background-color: rgba(255, 255, 255, 0.6);
}
.tab:selected:hover {
  cursor: default;
}
.rmlui-window:not([mouse-active]) .tab:focus {
  transition: none;
  animation: blue-pulse 0.75s infinite;
}
.rmlui-window:not([mouse-active]) .tab:focus:selected .tab__indicator {
  animation: blue-pulse-background 0.75s infinite;
}
.tab:focus, .tab:hover {
  opacity: 1;
  color: #F2F2F2;
  cursor: pointer;
}

.tab__indicator {
  position: absolute;
  right: 0;
  bottom: 2dp;
  left: 0;
  height: 2dp;
  background-color: rgba(0, 0, 0, 0);
}

.config__icon-buttons {
  display: flex;
  position: absolute;
  top: 8dp;
  right: 0dp;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: auto;
}
.config__icon-buttons .icon-button {
  margin: 0 8dp;
}

.config__form {
  border-top-width: 1.1dp;
  border-top-color: rgba(255, 255, 255, 0.1);
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  border-bottom-right-radius: 16dp;
  border-bottom-left-radius: 16dp;
}

.config__wrapper {
  flex: 1 1 100%;
  width: auto;
  height: auto;
  padding: 16dp;
  border-radius: 0dp;
  border-bottom-right-radius: 16dp;
  border-bottom-left-radius: 16dp;
  background-color: rgba(0, 0, 0, 0.35);
  text-align: left;
}
.config__wrapper p {
  padding: 16dp;
  line-height: 28dp;
  white-space: pre-line;
}
.config__wrapper p b {
  color: #B97DF2;
}
.config__wrapper p i {
  color: #E9CD35;
  font-style: normal;
}

.config__hz-wrapper {
  display: flex;
  flex: 1 1 100%;
  flex-direction: row;
  width: 100%;
  height: 100%;
  border-radius: 0dp;
  text-align: left;
}

.config__header, .config__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.35);
}

.config__header {
  border-bottom-width: 1.1dp;
  border-bottom-color: rgba(255, 255, 255, 0.1);
  padding: 12dp 20dp;
}

.config__footer {
  border-top-width: 1.1dp;
  border-top-color: rgba(255, 255, 255, 0.1);
  padding: 20dp 20dp;
  border-bottom-right-radius: 16dp;
  border-bottom-left-radius: 16dp;
}

.config__header-left {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
}
.config__header-left > :not(:first-child) {
  margin-left: 8dp;
}

.config__row {
  display: flex;
  flex-direction: row;
}

.config-group {
  position: relative;
}
.config-group--scrollable {
  flex: 1 1 100%;
  width: auto;
  height: auto;
  padding: 0 0 0 16dp;
}
.config-group--scrollable .config-group__wrapper {
  max-height: 100%;
  overflow-y: auto;
}
.config-group__title {
  color: #B97DF2;
}
.config-group__title--hidden {
  display: none;
}
.config-group__wrapper {
  padding: 16dp 0;
}

.config-option {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 16dp 0dp 24dp;
}
.config-option--hz {
  flex-direction: row-reverse;
  align-items: center;
  margin-top: 4dp;
  margin-bottom: 4dp;
}
.config-option--hz .config-option__title {
  flex: 1 1 100%;
}
.config-option--hz .config-option__list {
  flex: 1 1 auto;
  width: auto;
}
.config-option--hz:first-child {
  margin-top: 0;
}
.config-option--hz:last-child {
  margin-bottom: 0;
}

.config-option__title {
  padding: 0 12dp;
}

.config-option__radio-tabs,
.config-option__list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  padding: 0;
}
.config-option__radio-tabs input:first-of-type,
.config-option__list input:first-of-type {
  nav-left: none;
}
.config-option__radio-tabs input:last-of-type,
.config-option__list input:last-of-type {
  nav-right: none;
}
.config-option__radio-tabs .config-option__tab-label,
.config-option__list .config-option__tab-label {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
  display: block;
  position: relative;
  height: auto;
  margin: 4dp 12dp 0;
  padding: 8dp 0;
  color: rgba(255, 255, 255, 0.6);
  tab-index: none;
}
.config-option__radio-tabs .config-option__tab-label:hover,
.config-option__list .config-option__tab-label:hover {
  color: #F2F2F2;
  cursor: pointer;
}
.config-option__radio-tabs .config-option__checkbox-wrapper,
.config-option__list .config-option__checkbox-wrapper {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
  width: 32dp;
  height: 32dp;
  margin: 4dp 12dp 0;
  border-radius: 8dp;
  opacity: 0.5;
  background-color: rgba(190, 184, 219, 0.1);
  cursor: pointer;
}
.config-option__radio-tabs .config-option__checkbox-wrapper:hover,
.config-option__list .config-option__checkbox-wrapper:hover {
  opacity: 1;
}
.config-option__radio-tabs .config-option__checkbox-wrapper[checked],
.config-option__list .config-option__checkbox-wrapper[checked] {
  background-color: #3333FF;
}
.config-option__radio-tabs .config-option__checkbox,
.config-option__list .config-option__checkbox {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
  visibility: visible;
  width: 0;
  height: 0;
}
.config-option__radio-tabs input.radio,
.config-option__list input.radio {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
  visibility: visible;
  width: 0;
  height: 0;
}
.config-option__radio-tabs input.radio:not(:disabled):checked + .config-option__tab-label,
.config-option__list input.radio:not(:disabled):checked + .config-option__tab-label {
  border-bottom: 1dp;
  border-color: #F2F2F2;
  color: #F2F2F2;
}
.config-option__radio-tabs input.radio:not(:disabled):checked + .config-option__tab-label:hover,
.config-option__list input.radio:not(:disabled):checked + .config-option__tab-label:hover {
  cursor: default;
}
.rmlui-window:not([mouse-active]) .config-option__radio-tabs input.radio:not(:disabled):focus + .config-option__tab-label,
.rmlui-window:not([mouse-active]) .config-option__list input.radio:not(:disabled):focus + .config-option__tab-label {
  transition: none;
  animation: blue-pulse 0.75s infinite;
  border-color: #17D6E8;
  color: #17D6E8;
}
.config-option__radio-tabs input.radio:not(:disabled):focus + .config-option__tab-label, .config-option__radio-tabs input.radio:not(:disabled):hover + .config-option__tab-label,
.config-option__list input.radio:not(:disabled):focus + .config-option__tab-label,
.config-option__list input.radio:not(:disabled):hover + .config-option__tab-label {
  color: #F2F2F2;
}
.config-option__radio-tabs input.radio:disabled + .config-option__tab-label,
.config-option__list input.radio:disabled + .config-option__tab-label {
  opacity: 0.5;
}
.config-option__radio-tabs input.radio:disabled + .config-option__tab-label:hover,
.config-option__list input.radio:disabled + .config-option__tab-label:hover {
  cursor: default;
}
.config-option__radio-tabs input.range slidertrack,
.config-option__list input.range slidertrack {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
  height: 2dp;
  margin-top: 8dp;
  background-color: rgba(255, 255, 255, 0.2);
}
.config-option__radio-tabs input.range sliderbar,
.config-option__list input.range sliderbar {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
  width: 16dp;
  height: 16dp;
  margin-top: 1dp;
  margin-right: -8dp;
  margin-left: -8dp;
  transition: background-color 0.05s linear-in-out;
  border-radius: 8dp;
  background-color: #CCCCCC;
}
.rmlui-window:not([mouse-active]) .config-option__radio-tabs input.range sliderbar:focus,
.rmlui-window:not([mouse-active]) .config-option__list input.range sliderbar:focus {
  border-width: 1.1dp;
  border-color: #3333FF;
  animation: blue-pulse-background 0.75s infinite;
}
.config-option__radio-tabs input.range sliderbar:hover,
.config-option__list input.range sliderbar:hover {
  background-color: #F2F2F2;
  cursor: pointer;
}
.config-option__radio-tabs input.range sliderbar:active,
.config-option__radio-tabs input.range slidertrack:active + sliderbar,
.config-option__list input.range sliderbar:active,
.config-option__list input.range slidertrack:active + sliderbar {
  background-color: #17D6E8;
}
.config-option__radio-tabs input.range sliderarrowdec,
.config-option__radio-tabs input.range sliderarrowinc,
.config-option__list input.range sliderarrowdec,
.config-option__list input.range sliderarrowinc {
  display: none;
}

.config-option__details {
  height: 18dp;
  margin: 14dp 12dp 0;
  color: #B97DF2;
}

.config-option-color {
  width: 100%;
  max-width: 360dp;
  height: auto;
  margin-top: 4dp;
  margin-left: 12dp;
  padding: 0;
}
.config-option-color__preview-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 72dp;
}
.config-option-color__preview-block {
  display: block;
  width: 88dp;
  height: 100%;
  border-width: 1.1dp;
  border-radius: 16dp;
  border-color: rgba(255, 255, 255, 0.2);
}
.config-option-color__hsv-wrapper {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  width: auto;
  height: auto;
  padding-left: 8dp;
}
.config-option-color__hsv-wrapper .config-option-range {
  flex: 1 1 auto;
}
.config-option-color__hsv-wrapper .config-option-range label {
  min-width: 72dp;
}
.config-option-color__hsv-wrapper .config-option-range input {
  flex: 1 1 auto;
}

.config-option-range {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 360dp;
  height: auto;
  margin-top: 4dp;
  padding: 0;
}
.config-option-range__label {
  display: block;
  width: 56dp;
  margin: 0 12dp;
  margin-right: 16dp;
  padding: 0;
  color: #F2F2F2;
  tab-index: none;
}
.config-option-range__range-input {
  flex: 1;
}
.config-option-range__range-input slidertrack {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
  height: 2dp;
  margin-top: 8dp;
  background-color: rgba(255, 255, 255, 0.2);
}
.config-option-range__range-input sliderbar {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
  width: 16dp;
  height: 16dp;
  margin-top: 1dp;
  margin-right: -8dp;
  margin-left: -8dp;
  transition: background-color 0.05s linear-in-out;
  border-radius: 8dp;
  background-color: #CCCCCC;
}
.rmlui-window:not([mouse-active]) .config-option-range__range-input sliderbar:focus {
  border-width: 1.1dp;
  border-color: #3333FF;
  animation: blue-pulse-background 0.75s infinite;
}
.config-option-range__range-input sliderbar:hover {
  background-color: #F2F2F2;
  cursor: pointer;
}
.config-option-range__range-input sliderbar:active,
.config-option-range__range-input slidertrack:active + sliderbar {
  background-color: #17D6E8;
}
.config-option-range__range-input sliderarrowdec,
.config-option-range__range-input sliderarrowinc {
  display: none;
}

.config-option__range-wrapper {
  max-width: 360dp;
  margin-top: 4dp;
}

.config-option__range-label {
  display: block;
  width: 56dp;
  margin: 0 12dp;
  margin-right: 16dp;
  padding: 0;
  color: #F2F2F2;
  tab-index: none;
}

.config-option-dropdown, .config-option-textfield {
  display: flex;
  position: relative;
  flex: 1 1 100%;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: auto;
  padding: 8dp 24dp 8dp 12dp;
}
.config-option-dropdown__select, .config-option-textfield__select {
  display: block;
  height: 48dp;
  padding: 14dp;
  cursor: pointer;
}
.config-option-dropdown__wrapper, .config-option-textfield__wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  padding: 2dp 0 12dp;
  cursor: text;
}
.config-option-dropdown__wrapper input, .config-option-textfield__wrapper input {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out;
  border-width: 1.1dp;
  border-color: rgba(255, 255, 255, 0.5);
  position: relative;
  box-sizing: border-box;
  flex: 1 1 100%;
  width: auto;
  border-radius: 12dp;
  background-color: rgba(255, 255, 255, 0.05);
}
.config-option-dropdown__select svg, .config-option-dropdown__wrapper svg, .config-option-textfield__select svg, .config-option-textfield__wrapper svg {
  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
}
.config-option-dropdown__select:hover, .config-option-dropdown__select:focus, .config-option-dropdown__wrapper:hover, .config-option-dropdown__wrapper:focus, .config-option-textfield__select:hover, .config-option-textfield__select:focus, .config-option-textfield__wrapper:hover, .config-option-textfield__wrapper:focus {
  border-width: 1.1dp;
  border-color: rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.2);
}
.config-option-dropdown__select selectvalue, .config-option-dropdown__wrapper selectvalue, .config-option-textfield__select selectvalue, .config-option-textfield__wrapper selectvalue {
  display: inline;
  height: auto;
  margin: auto 0;
}
.config-option-dropdown__select selectbox, .config-option-dropdown__wrapper selectbox, .config-option-textfield__select selectbox, .config-option-textfield__wrapper selectbox {
  border-width: 1.1dp;
  border-color: rgba(255, 255, 255, 0.2);
  margin-top: 2dp;
  padding: 4dp 0;
  border-radius: 12dp;
  background-color: #191622;
}
.config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
  padding: 8dp 12dp;
  background-color: rgba(0, 0, 0, 0);
  color: #CCCCCC;
  font-weight: 400;
}
.config-option-dropdown__select selectbox option:hover, .config-option-dropdown__select selectbox option:focus, .config-option-dropdown__wrapper selectbox option:hover, .config-option-dropdown__wrapper selectbox option:focus, .config-option-textfield__select selectbox option:hover, .config-option-textfield__select selectbox option:focus, .config-option-textfield__wrapper selectbox option:hover, .config-option-textfield__wrapper selectbox option:focus {
  background-color: rgba(255, 255, 255, 0.2);
}
.config-option-dropdown__select selectbox option:hover:not(:checked), .config-option-dropdown__wrapper selectbox option:hover:not(:checked), .config-option-textfield__select selectbox option:hover:not(:checked), .config-option-textfield__wrapper selectbox option:hover:not(:checked) {
  cursor: pointer;
}
.config-option-dropdown__select selectbox option:checked, .config-option-dropdown__wrapper selectbox option:checked, .config-option-textfield__select selectbox option:checked, .config-option-textfield__wrapper selectbox option:checked {
  background-color: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
}

.config-description {
  flex: 1 1 100%;
  width: auto;
  height: auto;
  padding: 16dp;
  border-radius: 0dp;
  border-bottom-right-radius: 16dp;
  border-bottom-left-radius: 16dp;
  background-color: rgba(0, 0, 0, 0.35);
  text-align: left;
}
.config-description__contents {
  padding: 16dp;
  line-height: 28dp;
  white-space: pre-line;
}
.config-description__contents b {
  color: #B97DF2;
}
.config-description__contents i {
  color: #E9CD35;
  font-style: normal;
}

.input-config {
  padding: 0;
}

.input-config__horizontal-split {
  display: flex;
  position: relative;
  flex-direction: row;
  height: 100%;
}

.input-config__mappings {
  display: block;
  flex: 1 1 auto;
  min-width: 640dp;
  height: 100%;
}

.input-config__mappings-scroll {
  display: block;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
}

.input-config__mappings-wrapper {
  padding: 8dp;
}

.input-config__visual-wrapper {
  display: block;
  flex: 1 1 100%;
  width: auto;
  max-width: 1040.4444444444dp;
  height: auto;
  max-height: 780.3333333333dp;
  margin: auto 0;
}

.input-config__visual-aspect {
  position: relative;
  width: 100%;
  margin: auto 0;
  padding-bottom: 75%;
  background-color: rgba(0, 0, 0, 0.35);
}

.input-config__visual {
  display: flex;
  position: absolute;
  top: 16dp;
  right: 16dp;
  bottom: 16dp;
  left: 16dp;
  flex-direction: column;
  border-radius: 108dp;
  background-color: rgba(255, 255, 255, 0.05);
}

.input-config__visual-half {
  display: flex;
  position: relative;
  flex: 1 1 100%;
  flex-direction: row;
  padding: 6%;
}
.input-config__visual-half--bottom {
  align-items: flex-end;
  justify-content: space-between;
}

.input-config__visual-quarter-left {
  display: flex;
  flex: 1 1 50%;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
}

.input-config__visual-quarter-right {
  display: flex;
  flex: 1 1 100%;
  align-items: flex-start;
  justify-content: flex-end;
}

.input-config__visual-stick-wrapper {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: center;
}

.input-viz {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
.input-viz > svg:not(.input-viz__dpad-arrow) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
[cur-input=NONE] .input-viz[visual-input] {
  opacity: 1;
}

.input-viz[visual-input~=A] {
  opacity: 0.25;
}
[cur-input=A] .input-viz[visual-input~=A] {
  opacity: 1;
}

.input-viz[visual-input~=B] {
  opacity: 0.25;
}
[cur-input=B] .input-viz[visual-input~=B] {
  opacity: 1;
}

.input-viz[visual-input~=Z] {
  opacity: 0.25;
}
[cur-input=Z] .input-viz[visual-input~=Z] {
  opacity: 1;
}

.input-viz[visual-input~=START] {
  opacity: 0.25;
}
[cur-input=START] .input-viz[visual-input~=START] {
  opacity: 1;
}

.input-viz[visual-input~=DPAD_UP] {
  opacity: 0.25;
}
[cur-input=DPAD_UP] .input-viz[visual-input~=DPAD_UP] {
  opacity: 1;
}

.input-viz[visual-input~=DPAD_DOWN] {
  opacity: 0.25;
}
[cur-input=DPAD_DOWN] .input-viz[visual-input~=DPAD_DOWN] {
  opacity: 1;
}

.input-viz[visual-input~=DPAD_LEFT] {
  opacity: 0.25;
}
[cur-input=DPAD_LEFT] .input-viz[visual-input~=DPAD_LEFT] {
  opacity: 1;
}

.input-viz[visual-input~=DPAD_RIGHT] {
  opacity: 0.25;
}
[cur-input=DPAD_RIGHT] .input-viz[visual-input~=DPAD_RIGHT] {
  opacity: 1;
}

.input-viz[visual-input~=L] {
  opacity: 0.25;
}
[cur-input=L] .input-viz[visual-input~=L] {
  opacity: 1;
}

.input-viz[visual-input~=R] {
  opacity: 0.25;
}
[cur-input=R] .input-viz[visual-input~=R] {
  opacity: 1;
}

.input-viz[visual-input~=C_UP] {
  opacity: 0.25;
}
[cur-input=C_UP] .input-viz[visual-input~=C_UP] {
  opacity: 1;
}

.input-viz[visual-input~=C_DOWN] {
  opacity: 0.25;
}
[cur-input=C_DOWN] .input-viz[visual-input~=C_DOWN] {
  opacity: 1;
}

.input-viz[visual-input~=C_LEFT] {
  opacity: 0.25;
}
[cur-input=C_LEFT] .input-viz[visual-input~=C_LEFT] {
  opacity: 1;
}

.input-viz[visual-input~=C_RIGHT] {
  opacity: 0.25;
}
[cur-input=C_RIGHT] .input-viz[visual-input~=C_RIGHT] {
  opacity: 1;
}

.input-viz[visual-input~=X_AXIS_NEG] {
  opacity: 0.25;
}
[cur-input=X_AXIS_NEG] .input-viz[visual-input~=X_AXIS_NEG] {
  opacity: 1;
}

.input-viz[visual-input~=X_AXIS_POS] {
  opacity: 0.25;
}
[cur-input=X_AXIS_POS] .input-viz[visual-input~=X_AXIS_POS] {
  opacity: 1;
}

.input-viz[visual-input~=Y_AXIS_NEG] {
  opacity: 0.25;
}
[cur-input=Y_AXIS_NEG] .input-viz[visual-input~=Y_AXIS_NEG] {
  opacity: 1;
}

.input-viz[visual-input~=Y_AXIS_POS] {
  opacity: 0.25;
}
[cur-input=Y_AXIS_POS] .input-viz[visual-input~=Y_AXIS_POS] {
  opacity: 1;
}

.input-viz__button {
  color: #F2F2F2;
}
.input-viz__button svg {
  image-color: #F2F2F2;
}
.input-viz__button--sm {
  width: 64dp;
  height: 64dp;
}
.input-viz__button--sm > svg {
  width: 64dp;
  height: 64dp;
}
.input-viz__button--md {
  width: 76dp;
  height: 76dp;
}
.input-viz__button--md > svg {
  width: 76dp;
  height: 76dp;
}
.input-viz__button--lg {
  width: 84dp;
  height: 84dp;
}
.input-viz__button--lg > svg {
  width: 84dp;
  height: 84dp;
}
.input-viz__button--C svg {
  image-color: #E9CD35;
}
.input-viz__button--A {
  margin-top: auto;
}
.input-viz__button--A svg {
  image-color: #3333FF;
}
.input-viz__button--B svg {
  image-color: #45D043;
}
.input-viz__button--Start svg {
  image-color: #F86039;
}

.input-viz__Z {
  width: 136dp;
  height: 136dp;
}
.input-viz__Z svg {
  image-color: #E9CD35;
}
.input-viz__Z > svg {
  width: 136dp;
  height: 136dp;
}

.input-viz.input-viz__dpad {
  width: 192dp;
  height: 192dp;
  position: relative;
}
.input-viz.input-viz__dpad svg {
  image-color: #F2F2F2;
}
.input-viz.input-viz__dpad > svg {
  width: 192dp;
  height: 192dp;
}

.input-config__visual-stick {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 200dp;
  height: 200dp;
  border-radius: 100dp;
  background-color: rgba(255, 255, 255, 0.05);
}

.input-viz__dpad-split,
.input-viz__stick-split {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
}
.input-viz__dpad-split--vertical,
.input-viz__stick-split--vertical {
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.input-viz__dpad-split--horizontal,
.input-viz__stick-split--horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.input-viz__dpad-split > div,
.input-viz__stick-split > div {
  display: flex;
  flex: 1 1 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.input-viz__dpad-split > div {
  width: 64dp;
  height: 64dp;
}

.input-viz__stick-split > div {
  width: 66.6666666667dp;
  height: 66.6666666667dp;
}

.input-viz__dpad-arrow {
  position: absolute;
  width: 60dp;
  height: 60dp;
}
.input-viz__dpad-arrow--up {
  top: 4dp;
  margin: 0 auto;
}
.input-viz__dpad-arrow--down {
  bottom: 4dp;
  margin: 0 auto;
  transform: rotate(180deg);
}
.input-viz__dpad-arrow--left {
  left: 4dp;
  margin: auto 0;
  transform: rotate(-90deg);
}
.input-viz__dpad-arrow--right {
  right: 4dp;
  margin: auto 0;
  transform: rotate(90deg);
}

.input-viz__R {
  width: 96dp;
  height: 96dp;
}
.input-viz__R svg {
  image-color: #FFFFFF;
}
.input-viz__R > svg {
  width: 96dp;
  height: 96dp;
}

.input-viz__L {
  width: 136dp;
  height: 136dp;
}
.input-viz__L svg {
  image-color: #17D6E8;
}
.input-viz__L > svg {
  width: 136dp;
  height: 136dp;
}

.input-config__c-buttons {
  position: relative;
  width: 208dp;
  height: 132dp;
}
.input-config__c-buttons-lr, .input-config__c-buttons-du {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.input-config__c-buttons-lr {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}
.input-config__c-buttons-du {
  flex-direction: column-reverse;
  align-items: center;
  justify-content: space-between;
}
.input-config__c-buttons .input-viz[visual-input=C_UP] {
  margin-top: -32dp;
}

.input-config__main-buttons {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  width: 268dp;
  min-width: 1dp;
  height: 128dp;
  margin-right: 10dp;
}

.button {
  border-color: rgba(185, 125, 242, 0.8);
  background-color: rgba(185, 125, 242, 0.05);
  color: #CCCCCC;
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
  display: block;
  width: auto;
  height: auto;
  padding: 23dp;
  border-width: 1.1dp;
  border-radius: 12dp;
}
.button:focus, .button:hover {
  border-color: #B97DF2;
  background-color: rgba(185, 125, 242, 0.3);
  color: #F2F2F2;
}
.button:disabled, .button[disabled] {
  color: rgba(255, 255, 255, 0.6);
}
.button:active {
  background-color: rgba(185, 125, 242, 0.2);
  color: rgb(244.6, 244.6, 244.6);
}
.button--primary {
  border-color: rgba(185, 125, 242, 0.8);
  background-color: rgba(185, 125, 242, 0.05);
  color: #CCCCCC;
}
.button--primary:focus, .button--primary:hover {
  border-color: #B97DF2;
  background-color: rgba(185, 125, 242, 0.3);
  color: #F2F2F2;
}
.button--primary:disabled, .button--primary[disabled] {
  color: rgba(255, 255, 255, 0.6);
}
.button--primary:active {
  background-color: rgba(185, 125, 242, 0.2);
  color: rgb(244.6, 244.6, 244.6);
}
.button--secondary {
  border-color: rgba(23, 214, 232, 0.8);
  background-color: rgba(23, 214, 232, 0.05);
  color: #CCCCCC;
}
.button--secondary:focus, .button--secondary:hover {
  border-color: #17D6E8;
  background-color: rgba(23, 214, 232, 0.3);
  color: #F2F2F2;
}
.button--secondary:disabled, .button--secondary[disabled] {
  color: rgba(255, 255, 255, 0.6);
}
.button--secondary:active {
  background-color: rgba(23, 214, 232, 0.2);
  color: rgb(244.6, 244.6, 244.6);
}
.button--tertiary {
  border-color: rgba(242, 242, 242, 0.8);
  background-color: rgba(242, 242, 242, 0.05);
  color: #CCCCCC;
}
.button--tertiary:focus, .button--tertiary:hover {
  border-color: #F2F2F2;
  background-color: rgba(242, 242, 242, 0.3);
  color: #F2F2F2;
}
.button--tertiary:disabled, .button--tertiary[disabled] {
  color: rgba(255, 255, 255, 0.6);
}
.button--tertiary:active {
  background-color: rgba(242, 242, 242, 0.2);
  color: rgb(244.6, 244.6, 244.6);
}
.button--success {
  border-color: rgba(69, 208, 67, 0.8);
  background-color: rgba(69, 208, 67, 0.05);
  color: #CCCCCC;
}
.button--success:focus, .button--success:hover {
  border-color: #45D043;
  background-color: rgba(69, 208, 67, 0.3);
  color: #F2F2F2;
}
.button--success:disabled, .button--success[disabled] {
  color: rgba(255, 255, 255, 0.6);
}
.button--success:active {
  background-color: rgba(69, 208, 67, 0.2);
  color: rgb(244.6, 244.6, 244.6);
}
.button--error {
  border-color: rgba(248, 96, 57, 0.8);
  background-color: rgba(248, 96, 57, 0.05);
  color: #CCCCCC;
}
.button--error:focus, .button--error:hover {
  border-color: #F86039;
  background-color: rgba(248, 96, 57, 0.3);
  color: #F2F2F2;
}
.button--error:disabled, .button--error[disabled] {
  color: rgba(255, 255, 255, 0.6);
}
.button--error:active {
  background-color: rgba(248, 96, 57, 0.2);
  color: rgb(244.6, 244.6, 244.6);
}
.button--warning {
  border-color: rgba(233, 205, 53, 0.8);
  background-color: rgba(233, 205, 53, 0.05);
  color: #CCCCCC;
}
.button--warning:focus, .button--warning:hover {
  border-color: #E9CD35;
  background-color: rgba(233, 205, 53, 0.3);
  color: #F2F2F2;
}
.button--warning:disabled, .button--warning[disabled] {
  color: rgba(255, 255, 255, 0.6);
}
.button--warning:active {
  background-color: rgba(233, 205, 53, 0.2);
  color: rgb(244.6, 244.6, 244.6);
}
.button:not([disabled]) {
  cursor: pointer;
}
.button:disabled, .button[disabled] {
  opacity: 0.5;
}
.button__label {
  width: auto;
  height: auto;
}

/*
    <button
        class="icon-button icon-button--error"
    >
        <svg src="icons/Trash.svg" />
    </button>
*/
.icon-button {
  color: #CCCCCC;
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 53.8dp;
  min-width: 53.8dp;
  max-width: 53.8dp;
  height: 53.8dp;
  min-height: 53.8dp;
  max-height: 53.8dp;
  border-width: 1.1dp;
  border-radius: 26.9dp;
  border-color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
}
.icon-button svg {
  image-color: #CCCCCC;
}
.icon-button svg {
  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
}
.icon-button:focus, .icon-button:hover {
  color: #F2F2F2;
  background-color: rgba(255, 255, 255, 0.2);
}
.icon-button:focus svg, .icon-button:hover svg {
  image-color: #F2F2F2;
}
.icon-button:active {
  color: rgb(244.6, 244.6, 244.6);
  background-color: rgba(255, 255, 255, 0.1);
}
.icon-button:active svg {
  image-color: rgb(244.6, 244.6, 244.6);
}
.icon-button:disabled, .icon-button[disabled] {
  color: #CCCCCC;
  opacity: 0.5;
}
.icon-button:disabled svg, .icon-button[disabled] svg {
  image-color: #CCCCCC;
}
.icon-button:not([disabled]) {
  cursor: pointer;
}
.icon-button svg {
  width: 32dp;
  height: 32dp;
}
.icon-button--primary {
  border-color: rgba(185, 125, 242, 0.8);
  background-color: rgba(185, 125, 242, 0.05);
}
.icon-button--primary:focus, .icon-button--primary:hover {
  border-color: #B97DF2;
  background-color: rgba(185, 125, 242, 0.3);
}
.icon-button--primary:active {
  background-color: rgba(185, 125, 242, 0.2);
}
.icon-button--secondary {
  border-color: rgba(23, 214, 232, 0.8);
  background-color: rgba(23, 214, 232, 0.05);
}
.icon-button--secondary:focus, .icon-button--secondary:hover {
  border-color: #17D6E8;
  background-color: rgba(23, 214, 232, 0.3);
}
.icon-button--secondary:active {
  background-color: rgba(23, 214, 232, 0.2);
}
.icon-button--tertiary {
  border-color: rgba(242, 242, 242, 0.8);
  background-color: rgba(242, 242, 242, 0.05);
}
.icon-button--tertiary:focus, .icon-button--tertiary:hover {
  border-color: #F2F2F2;
  background-color: rgba(242, 242, 242, 0.3);
}
.icon-button--tertiary:active {
  background-color: rgba(242, 242, 242, 0.2);
}
.icon-button--success {
  border-color: rgba(69, 208, 67, 0.8);
  background-color: rgba(69, 208, 67, 0.05);
}
.icon-button--success:focus, .icon-button--success:hover {
  border-color: #45D043;
  background-color: rgba(69, 208, 67, 0.3);
}
.icon-button--success:active {
  background-color: rgba(69, 208, 67, 0.2);
}
.icon-button--error {
  border-color: rgba(248, 96, 57, 0.8);
  background-color: rgba(248, 96, 57, 0.05);
}
.icon-button--error:focus, .icon-button--error:hover {
  border-color: #F86039;
  background-color: rgba(248, 96, 57, 0.3);
}
.icon-button--error:active {
  background-color: rgba(248, 96, 57, 0.2);
}
.icon-button--warning {
  border-color: rgba(233, 205, 53, 0.8);
  background-color: rgba(233, 205, 53, 0.05);
}
.icon-button--warning:focus, .icon-button--warning:hover {
  border-color: #E9CD35;
  background-color: rgba(233, 205, 53, 0.3);
}
.icon-button--warning:active {
  background-color: rgba(233, 205, 53, 0.2);
}

.launcher {
  display: block;
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-color: #08070D;
}

.launcher__vertical-split {
  display: flex;
  position: absolute;
  top: 0;
  right: 50%;
  bottom: 0;
  left: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.launcher__vertical-split--right {
  right: 0;
  left: 50%;
  align-items: flex-end;
}

@keyframes slide-mm-bg-over {
  0% {
    transform: translateX(100dp);
  }
  100% {
    transform: translateX(0dp);
  }
}
.launcher__background-wrapper {
  display: flex;
  position: absolute;
  top: -55vw;
  right: -100%;
  bottom: -50vw;
  left: -70vw;
  align-items: center;
  justify-content: flex-start;
  transform: translateX(0dp);
  animation: 25s cubic-out 1 slide-mm-bg-over;
}

@keyframes fade-mm-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.1;
  }
}
.launcher__background-mm {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: 100%;
  animation: 2.5s cubic-in-out 1 fade-mm-in;
  opacity: 0.1;
}

.launcher__title-quadrant {
  flex: 1 1 auto;
  width: auto;
  height: auto;
  padding-top: 96dp;
  padding-left: 96dp;
}
.launcher__title-quadrant--right {
  padding-right: 96dp;
  padding-left: 0;
}

.launcher__content-quadrant {
  display: flex;
  position: relative;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  height: auto;
  padding: 32dp;
}

/*
    Example layout:
        <button class="menu-list-item menu-list-item--right">
            <div class="menu-list-item__bullet">•</div>
            <div class="menu-list-item__label">Setup controls</div>
        </button>
    - Variants:
        .menu-list-item--right (align to right side)
    - Optional:
        - <div class="subtitle-title__disclaimer">Coming Soon™</div>

*/
.menu-list-item {
  color: #CCCCCC;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 16dp;
  border-radius: 8dp;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}
.menu-list-item svg {
  image-color: #CCCCCC;
}
.menu-list-item--right {
  flex-direction: row-reverse;
  align-content: flex-end;
}
.menu-list-item--right .menu-list-item__bullet {
  margin-left: 12dp;
  opacity: 1;
}
.menu-list-item--right.menu-list-item:focus:not(:disabled, [disabled]), .menu-list-item--right.menu-list-item:hover:not(:disabled, [disabled]) {
  decorator: horizontal-gradient(#7A2AC600 #DABAF714);
}
.menu-list-item:focus:not(:disabled, [disabled]), .menu-list-item:hover:not(:disabled, [disabled]) {
  color: #B97DF2;
  decorator: horizontal-gradient(#7A2AC614 #DABAF700);
}
.menu-list-item:focus:not(:disabled, [disabled]) svg, .menu-list-item:hover:not(:disabled, [disabled]) svg {
  image-color: #B97DF2;
}
.menu-list-item:focus:not(:disabled, [disabled]) .menu-list-item__bullet, .menu-list-item:hover:not(:disabled, [disabled]) .menu-list-item__bullet {
  opacity: 1;
}
.menu-list-item:disabled, .menu-list-item[disabled] {
  opacity: 0.5;
  tab-index: none;
  cursor: default;
}

.menu-list-item__bullet {
  margin-right: 12dp;
  opacity: 0;
}

/*
    Example layout:

        <button class="subtitle-title" disabled>
            <h3>Zelda 64: Recompiled</h3>
            <h1>Ocarina of Time</h1>
            <div class="subtitle-title__disclaimer">Coming Soon™</div>
        </button>
    - Variants:
        .subtitle-title--right (align to right side)
    - Optional:
        - <div class="subtitle-title__disclaimer">Coming Soon™</div>

*/
.subtitle-title {
  display: block;
  position: relative;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  width: auto;
  height: auto;
  padding: 0;
  background-color: rgba(0, 0, 0, 0);
  color: #CCCCCC;
  text-align: left;
  cursor: pointer;
}
.subtitle-title--right {
  align-content: flex-end;
}
.subtitle-title--right, .subtitle-title--right > * {
  text-align: right;
}
.subtitle-title[selected] {
  color: #F2F2F2;
  cursor: default;
}
.subtitle-title:focus:not(:disabled, [disabled]), .subtitle-title:hover:not(:disabled, [disabled], [selected]) {
  color: #B97DF2;
}
.subtitle-title:disabled, .subtitle-title[disabled] {
  opacity: 0.5;
  cursor: default;
  tab-index: none;
}
.subtitle-title h3 {
  margin-bottom: 6dp;
}
.subtitle-title h1 {
  margin-top: 6dp;
}
.subtitle-title__disclaimer {
  margin-top: 16dp;
}

.toggle {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 162dp;
  height: 72dp;
  border-radius: 36dp;
  opacity: 0.9;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
}
.toggle:hover, .toggle:focus-visible, .toggle:focus {
  opacity: 1;
  background-color: rgba(23, 214, 232, 0.3);
}
.toggle:active {
  opacity: 1;
  background-color: rgba(23, 214, 232, 0.05);
}
.toggle .toggle__border {
  position: absolute;
  top: 1.1dp;
  right: 1.1dp;
  bottom: 1.1dp;
  left: 1.1dp;
  border-width: 1.1dp;
  border-color: #A2EFF6;
  display: block;
  border-radius: 36dp;
}
.toggle .toggle__floater {
  position: absolute;
  top: 50%;
  left: 4dp;
  width: 80dp;
  height: 64dp;
  transform: translateY(-50%);
  border-radius: 32dp;
  background: #25A1AD;
}
.toggle--checked .toggle__floater {
  left: 78dp;
}
.toggle--checked .toggle__icon.toggle__icon--left {
  opacity: 0.9;
  color: #A2EFF6;
}
.toggle--checked .toggle__icon.toggle__icon--right {
  opacity: 1;
  color: #F2F2F2;
}

.toggle__icons {
  display: flex;
  position: absolute;
  top: 50%;
  right: 16dp;
  left: 16dp;
  align-items: center;
  justify-content: space-between;
  height: 56dp;
  transform: translateY(-50%);
}

.toggle__icon {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56dp;
  height: 56dp;
  color: #F2F2F2;
}
.toggle__icon--right {
  opacity: 1;
  color: #A2EFF6;
}

.bottom-left {
  display: flex;
  position: absolute;
  bottom: 4dp;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 1692.4444444444dp;
  height: auto;
  margin: 0 4dp;
}

.prompt__overlay {
  background-color: rgba(190, 184, 219, 0.1);
  pointer-events: auto;
}
.prompt__overlay, .prompt__content-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.prompt__content-wrapper {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: center;
}
.prompt__content {
  display: flex;
  position: relative;
  flex: 1 1 100%;
  flex-direction: column;
  width: 100%;
  max-width: 700dp;
  height: auto;
  margin: auto;
  border-width: 1.1dp;
  border-radius: 16dp;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(8, 7, 13, 0.9);
}
.prompt__content h3, .prompt__content p {
  margin: 24dp;
}
.prompt__content p {
  margin-top: 0;
}
.prompt__controls {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 24dp 12dp;
  border-top-width: 1.1dp;
  border-top-color: rgba(255, 255, 255, 0.1);
}
.prompt__controls .button {
  min-width: 233.3333333333dp;
  margin: 0 12dp;
  text-align: center;
  nav-up: none;
  nav-down: none;
}

.config-debug {
  display: block;
  position: relative;
  width: 100%;
  max-height: 100%;
  padding: 8dp;
}

.config-debug__scroll {
  display: block;
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
}

.config-debug-option {
  color: #CCCCCC;
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
  border-bottom-width: 1.1dp;
  border-bottom-color: rgba(255, 255, 255, 0.1);
  display: block;
  position: relative;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 12dp 4dp;
  background-color: rgba(0, 0, 0, 0);
}
.config-debug-option svg {
  image-color: #CCCCCC;
}
.config-debug-option svg {
  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
}
.config-debug-option:focus:not(:disabled, [disabled]), .config-debug-option:focus-visible:not(:disabled, [disabled]), .config-debug-option:hover:not(:disabled, [disabled]) {
  color: #F2F2F2;
  background-color: rgba(190, 184, 219, 0.1);
}
.config-debug-option:focus:not(:disabled, [disabled]) svg, .config-debug-option:focus-visible:not(:disabled, [disabled]) svg, .config-debug-option:hover:not(:disabled, [disabled]) svg {
  image-color: #F2F2F2;
}
.config-debug-option:disabled, .config-debug-option[disabled] {
  opacity: 0.5;
}
.config-debug-option .icon-button {
  margin-left: 8dp;
}

.config-debug__option-split {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.config-debug-option__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 4dp 16dp 12dp;
  width: auto;
  height: auto;
  white-space: nowrap;
}

.config-debug__option-controls {
  display: block;
  position: relative;
  flex: 1 1 auto;
  height: auto;
  width: auto;
  max-width: 800dp;
  padding: 0 12dp;
}

.config-debug__option-trigger {
  flex: 1 1 auto;
}

.config-debug__select-wrapper {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 100%;
  width: auto;
  max-width: 800dp;
  height: auto;
  padding: 4dp;
}
.config-debug__select-wrapper .config-debug__select-label {
  padding-right: 16dp;
  flex: auto;
  width: 196dp;
}
.config-debug__select-wrapper .config-debug__select-label > div {
  display: inline;
  width: auto;
  height: auto;
}
.config-debug__select-wrapper input {
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 0;
  flex: 1 1 100%;
  width: auto;
  height: 20dp;
  margin: auto 0;
}
.config-debug__select-wrapper select {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out;
  border-width: 1.1dp;
  border-color: rgba(255, 255, 255, 0.5);
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 0;
  flex: 1 1 100%;
  width: auto;
  height: 48dp;
  border-radius: 12dp;
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  align-items: center;
  justify-content: flex-start;
  padding: 14dp;
}
.config-debug__select-wrapper select svg {
  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
}
.config-debug__select-wrapper select:hover, .config-debug__select-wrapper select:focus {
  border-width: 1.1dp;
  border-color: rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.2);
}
.config-debug__select-wrapper select selectvalue {
  display: inline;
  margin: auto 0;
  height: auto;
}
.config-debug__select-wrapper select selectbox {
  border-width: 1.1dp;
  border-color: rgba(255, 255, 255, 0.8);
  background-color: #191622;
  padding: 4dp 0;
  margin-top: 2dp;
  border-radius: 12dp;
}
.config-debug__select-wrapper select selectbox option {
  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
  padding: 8dp 12dp;
  background-color: rgba(0, 0, 0, 0);
  color: #CCCCCC;
  font-weight: 400;
}
.config-debug__select-wrapper select selectbox option:hover, .config-debug__select-wrapper select selectbox option:focus {
  background-color: rgba(255, 255, 255, 0.2);
}
.config-debug__select-wrapper select selectbox option:hover:not(:checked) {
  cursor: pointer;
}
.config-debug__select-wrapper select selectbox option:checked {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.05);
}

body {
  box-sizing: border-box;
  color: #F2F2F2;
  font-family: chiaro;
}

.rmlui-window {
  opacity: 1;
}
.rmlui-window--hidden {
  opacity: 0;
}
.rmlui-window:not([mouse-active]) {
  pointer-events: none;
}

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

button {
  background-color: #7A2AC6;
}

@keyframes blue-pulse {
  0% {
    color: #17D6E8;
  }
  50% {
    color: #A2EFF6;
  }
  100% {
    color: #17D6E8;
  }
}
@keyframes blue-pulse-with-border {
  0% {
    border-color: #17D6E8;
    color: #17D6E8;
  }
  50% {
    border-color: #A2EFF6;
    color: #A2EFF6;
  }
  100% {
    border-color: #17D6E8;
    color: #17D6E8;
  }
}
@keyframes blue-pulse-background {
  0% {
    background-color: #17D6E8;
  }
  50% {
    background-color: #A2EFF6;
  }
  100% {
    background-color: #17D6E8;
  }
}