/*Libs*/
.gg-chevron-up-r {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 4px
}
.gg-chevron-up-r::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 6px;
    height: 6px;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    left: 6px;
    bottom: 5px
}
.gg-chevron-down-r {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 4px
}
.gg-chevron-down-r::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
    left: 6px;
    top: 5px
}
.gg-stack,
.gg-stack::after,
.gg-stack::before {
    display: block;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 2px solid
}
.gg-stack {
    margin-right: 8px;
    margin-top: 8px;
    transform: scale(1);
    position: relative
}
.gg-stack::after,
.gg-stack::before {
    content: "";
    position: absolute;
    border-left: 0;
    border-bottom: 0;
    right: -5px;
    top: -5px
}
.gg-stack::before {
    right: -8px;
    top: -8px
}
.gg-info {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 20px;
    height: 20px;
    border: 2px solid;
    border-radius: 40px
}
.gg-info::after,
.gg-info::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border-radius: 3px;
    width: 2px;
    background: currentColor;
    left: 7px
}
.gg-info::after {
    bottom: 2px;
    height: 8px
}
.gg-info::before {
    height: 2px;
    top: 2px
}
.gg-close {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    border-radius: 40px
}
.gg-close::after,
.gg-close::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 16px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
    border-radius: 5px;
    top: 8px;
    left: 1px
}
.gg-close::after {
    transform: rotate(-45deg)
}
.gg-duplicate {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 10px;
    height: 10px;
    border: 2px solid transparent;
    border-bottom: 4px solid transparent;
    box-shadow: 0 0 0 2px,inset 0 -2px 0 0;
    margin-left: -4px;
    margin-top: 4px
}
.gg-duplicate::after,
.gg-duplicate::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute
}
.gg-duplicate::before {
    background: currentColor;
    left: 2px;
    bottom: -2px;
    width: 2px;
    height: 6px
}
.gg-duplicate::after {
    width: 14px;
    height: 14px;
    border-right: 2px solid;
    border-top: 2px solid;
    right: -8px;
    top: -8px
}
.gg-trash {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 10px;
    height: 12px;
    border: 2px solid transparent;
    box-shadow:
            0 0 0 2px,
            inset -2px 0 0,
            inset 2px 0 0;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    margin-top: 4px
}
.gg-trash::after,
.gg-trash::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute
}
.gg-trash::after {
    background: currentColor;
    border-radius: 3px;
    width: 16px;
    height: 2px;
    top: -4px;
    left: -5px
}
.gg-trash::before {
    width: 10px;
    height: 4px;
    border: 2px solid;
    border-bottom: transparent;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    top: -7px;
    left: -2px
}
.gg-headset {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 18px;
    height: 18px;
    border-top-left-radius: 120px;
    border-top-right-radius: 120px;
    border: 2px solid;
    border-bottom: 0
}
.gg-headset::after,
.gg-headset::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border: 2px solid;
    width: 6px;
    height: 8px;
    top: 8px
}
.gg-headset::before {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    left: -2px
}
.gg-headset::after {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    left: 10px
}
.gg-software-download {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 16px;
    height: 6px;
    border: 2px solid;
    border-top: 0;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    margin-top: 8px
}
.gg-software-download::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 8px;
    height: 8px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    transform: rotate(-45deg);
    left: 2px;
    bottom: 4px
}
.gg-software-download::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border-radius: 3px;
    width: 2px;
    height: 10px;
    background: currentColor;
    left: 5px;
    bottom: 5px
}
.gg-spinner {
    transform: scale(1)
}
.gg-spinner,
.gg-spinner::after,
.gg-spinner::before {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 20px;
    height: 20px
}
.gg-spinner::after,
.gg-spinner::before {
    content: "";
    position: absolute;
    border-radius: 100px
}
.gg-spinner::before {
    animation: spinner 1s
    cubic-bezier(.6,0,.4,1) infinite;
    border: 3px solid transparent;
    border-top-color: currentColor
}
.gg-spinner::after {
    border: 3px solid;
    opacity: .2
}
@keyframes spinner {
    0% { transform: rotate(0deg) }
    to { transform: rotate(359deg) }
}
.gg-music-speaker {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 16px;
    height: 22px;
    border: 2px solid;
    border-radius: 3px
}
.gg-music-speaker::after,
.gg-music-speaker::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border: 2px solid;
    border-radius: 100px
}
.gg-music-speaker::before {
    bottom: 2px;
    width: 8px;
    height: 8px;
    left: 2px
}
.gg-music-speaker::after {
    width: 4px;
    height: 4px;
    left: 4px;
    top: 2px
}
.gg-calibrate {
    display: block;
    box-sizing: border-box;
    position: relative;
    transform: scale(1);
    width: 18px;
    height: 18px;
    overflow: hidden
}
.gg-calibrate::after,
.gg-calibrate::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border-radius: 22px
}
.gg-calibrate::before {
    width: 6px;
    height: 6px;
    background: currentColor;
    top: 10px;
    left: 6px
}
.gg-calibrate::after {
    width: 22px;
    height: 22px;
    border: 6px solid transparent;
    border-top: 6px solid;
    left: -2px;
    top: 1px
}
.gg-shape-circle {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(1);
    width: 16px;
    height: 16px;
    border: 3px solid;
    border-radius: 100px
}
.gg-more-vertical {
    transform: scale(1)
}
.gg-more-vertical,
.gg-more-vertical::after,
.gg-more-vertical::before {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-radius: 100%
}
.gg-more-vertical::after,
.gg-more-vertical::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -2px
}
.gg-more-vertical::before {
    top: -10px
}

.gg-menu-grid-r {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 16px;
    height: 16px;
}
.gg-menu-grid-r::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 4px;
    height: 4px;
    background: currentColor;
    box-shadow:
            0 6px 0,
            6px 6px 0,
            12px 6px 0,
            6px 12px 0,
            12px 12px 0,
            6px 0 0,
            12px 0 0,
            0 12px 0;
}
.gg-select-r {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 4px;
}
.gg-select-r::after,
.gg-select-r::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 6px;
    height: 6px;
    left: 6px;
    transform: rotate(-45deg)
}
.gg-select-r::before {
    border-left: 2px solid;
    border-bottom: 2px solid;
    bottom: 4px
}
.gg-select-r::after {
    border-right: 2px solid;
    border-top: 2px solid;
    top: 4px
}
.gg-file-add {
    background: linear-gradient(to bottom,
    currentColor 5px, transparent 0) no-repeat 2px 9px/6px 2px;
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 14px;
    height: 16px;
    border: 2px solid transparent;
    border-right: 0;
    border-top: 0;
    box-shadow: 0 0 0 2px;
    border-radius: 1px;
    border-top-right-radius: 4px;
    overflow: hidden
}
.gg-file-add::after,
.gg-file-add::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    height: 6px
}
.gg-file-add::before {
    background: currentColor;
    left: 4px;
    width: 2px;
    top: 7px
}
.gg-file-add::after {
    width: 6px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    right: -1px;
    top: -1px
}
.gg-pen {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: rotate(-45deg) scale(.75);
    width: 14px;
    height: 4px;
    border-right: 2px solid transparent;
    box-shadow:
            0 0 0 2px,
            inset -2px 0 0;
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    margin-right: -2px
}
.gg-pen::after,
.gg-pen::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute
}
.gg-pen::before {
    background: currentColor;
    border-left: 0;
    right: -6px;
    width: 3px;
    height: 4px;
    border-radius: 1px;
    top: 0
}
.gg-pen::after {
    width: 8px;
    height: 7px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 7px solid;
    left: -11px;
    top: -2px
}
.gg-options {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 10px;
    height: 2px;
    box-shadow:
            -3px 4px 0 0,
            3px -4px 0 0
}
.gg-options::after,
.gg-options::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid;
    border-radius: 100%
}
.gg-options::before {
    top: -7px;
    left: -4px
}
.gg-options::after {
    bottom: -7px;
    right: -4px
}
.gg-alarm {
    background:
            linear-gradient( to left,
            currentColor 5px, transparent 0)
            no-repeat 4.5px 6px/5px 2px,
            linear-gradient( to left,
            currentColor 7px, transparent 0)
            no-repeat 4.5px 2px/2px 6px;
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    border: 2px solid transparent;
    transform: scale(1);
    box-shadow: 0 0 0 2px
}
.gg-alarm::after,
.gg-alarm::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 6px;
    height: 2px;
    background: currentColor;
    top: -4px
}
.gg-alarm::before {
    left: -5px;
    transform: rotate(-42deg)
}
.gg-alarm::after {
    transform: rotate(42deg);
    right: -5px
}
.gg-undo {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 14px;
    height: 14px;
    border: 2px solid;
    border-left-color: transparent;
    border-radius: 100px
}
.gg-undo::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 6px;
    height: 6px;
    border-top: 2px solid;
    border-left: 2px solid;
    top: -3px;
    left: -1px;
    transform: rotate(-68deg)
}
.gg-remove {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 22px
}
.gg-remove::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 2px;
    background: currentColor;
    border-radius: 5px;
    top: 8px;
    left: 4px
}
.gg-play-button {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 22px;
    height: 22px
}
.gg-play-button::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 0;
    height: 10px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid;
    top: 6px;
    left: 9px
}
.gg-repeat {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    box-shadow:
            -2px -2px 0 0,
            2px 2px 0 0;
    width: 14px;
    height: 6px
}
.gg-repeat::after,
.gg-repeat::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent
}
.gg-repeat::before {
    border-left: 5px solid;
    top: -4px;
    right: 0
}
.gg-repeat::after {
    border-right: 5px solid;
    bottom: -4px;
    left: 0
}
.gg-play-stop {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 10px;
    height: 10px;
    background: currentColor
}
.gg-file-add {
    background:
            linear-gradient(to bottom,
            currentColor 5px,transparent 0)
            no-repeat 2px 9px/6px 2px;
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 14px;
    height: 16px;
    border: 2px solid transparent;
    border-right: 0;
    border-top: 0;
    box-shadow: 0 0 0 2px;
    border-radius: 1px;
    border-top-right-radius: 4px;
    overflow: hidden
}
.gg-file-add::after,
.gg-file-add::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    height: 6px
}
.gg-file-add::before {
    background: currentColor;
    left: 4px;
    width: 2px;
    top: 7px
}
.gg-file-add::after {
    width: 6px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    right: -1px;
    top: -1px
}
.gg-danger {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 20px;
    height: 20px;
    border: 2px solid;
    border-radius: 40px
}
.gg-danger::after,
.gg-danger::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border-radius: 3px;
    width: 2px;
    background: currentColor;
    left: 7px
}
.gg-danger::after {
    top: 2px;
    height: 8px
}
.gg-danger::before {
    height: 2px;
    bottom: 2px
}
.gg-link {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: rotate(-45deg) scale(1);
    width: 8px;
    height: 2px;
    background: currentColor;
    border-radius: 4px;
}
.gg-link::after,
.gg-link::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border-radius: 3px;
    width: 8px;
    height: 10px;
    border: 2px solid;
    top: -4px;
}
.gg-link::before {
    border-right: 0;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    left: -6px;
}
.gg-link::after {
    border-left: 0;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    right: -6px;
}
.gg-carousel {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1) rotate(270deg);
    width: 22px;
    height: 18px;
}
.gg-carousel::after,
.gg-carousel::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border-radius: 3px;
}
.gg-carousel::before {
    width: 22px;
    height: 10px;
    border: 2px solid;
}
.gg-carousel::after {
    width: 10px;
    height: 2px;
    background: currentColor;
    top: 16px;
    left: 6px;
    box-shadow:
            -3px -4px 0,
            3px -4px 0;
}
.gg-top-list,
.gg-top-list::before {
    display: block;
    box-sizing: border-box;
}
.gg-top-list {
    position: relative;
    transform: scale(1);
    width: 18px;
    height: 18px;
    border: 2px solid;
    border-top: 4px solid;
    border-radius: 3px;
}
.gg-top-list::before {
    content: "";
    position: absolute;
    width: 10px;
    border-radius: 3px;
    left: 2px;
    background: currentColor;
    height: 2px;
    top: 2px;
}
.gg-arrows-v {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 10px;
    height: 20px;
    background:
            linear-gradient(to left, currentColor 15px, transparent 0) no-repeat 4px 2px/2px
            6px,
            linear-gradient(to left, currentColor 15px, transparent 0) no-repeat 4px
            12px/2px 6px;
}
.gg-arrows-v::after,
.gg-arrows-v::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 6px;
    height: 6px;
    transform: rotate(-45deg);
    left: 2px;
}
.gg-arrows-v::after {
    border-bottom: 2px solid;
    border-left: 2px solid;
    bottom: 1px;
}
.gg-arrows-v::before {
    border-top: 2px solid;
    border-right: 2px solid;
    top: 1px;
}

/*!
  * Milligram v1.4.1
  * https://milligram.io
  *
  * Copyright (c) 2020 CJ Patoilo
  * Licensed under the MIT license
 */

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

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

body {
    color: #606c76;
    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.6em;
    font-weight: 300;
    letter-spacing: .01em;
    line-height: 1.6;
}

blockquote {
    border-left: 0.3rem solid #d1d1d1;
    margin-left: 0;
    margin-right: 0;
    padding: 1rem 1.5rem;
}

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

.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
    background-color: #d79c4e;
    border: 0.1rem solid #d79c4e;
    border-radius: .4rem;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    height: 3.8rem;
    /*letter-spacing: .1rem;*/
    line-height: 3.8rem;
    padding: 0 3.0rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.button:focus, .button:hover,
button:focus,
button:hover,
input[type='button']:focus,
input[type='button']:hover,
input[type='reset']:focus,
input[type='reset']:hover,
input[type='submit']:focus,
input[type='submit']:hover {
    background-color: #606c76;
    border-color: #606c76;
    color: #fff;
    outline: 0;
}

.button[disabled],
button[disabled],
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
    cursor: default;
    opacity: .5;
}

.button[disabled]:focus, .button[disabled]:hover,
button[disabled]:focus,
button[disabled]:hover,
input[type='button'][disabled]:focus,
input[type='button'][disabled]:hover,
input[type='reset'][disabled]:focus,
input[type='reset'][disabled]:hover,
input[type='submit'][disabled]:focus,
input[type='submit'][disabled]:hover {
    background-color: #d79c4e;
    border-color: #d79c4e;
}

.button.button-outline,
button.button-outline,
input[type='button'].button-outline,
input[type='reset'].button-outline,
input[type='submit'].button-outline {
    background-color: transparent;
    color: #d79c4e;
}

.button.button-outline:focus, .button.button-outline:hover,
button.button-outline:focus,
button.button-outline:hover,
input[type='button'].button-outline:focus,
input[type='button'].button-outline:hover,
input[type='reset'].button-outline:focus,
input[type='reset'].button-outline:hover,
input[type='submit'].button-outline:focus,
input[type='submit'].button-outline:hover {
    background-color: transparent;
    border-color: #606c76;
    color: #606c76;
}

.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
button.button-outline[disabled]:focus,
button.button-outline[disabled]:hover,
input[type='button'].button-outline[disabled]:focus,
input[type='button'].button-outline[disabled]:hover,
input[type='reset'].button-outline[disabled]:focus,
input[type='reset'].button-outline[disabled]:hover,
input[type='submit'].button-outline[disabled]:focus,
input[type='submit'].button-outline[disabled]:hover {
    border-color: inherit;
    color: #d79c4e;
}

.button.button-clear,
button.button-clear,
input[type='button'].button-clear,
input[type='reset'].button-clear,
input[type='submit'].button-clear {
    background-color: transparent;
    border-color: transparent;
    color: #d79c4e;
}

.button.button-clear:focus, .button.button-clear:hover,
button.button-clear:focus,
button.button-clear:hover,
input[type='button'].button-clear:focus,
input[type='button'].button-clear:hover,
input[type='reset'].button-clear:focus,
input[type='reset'].button-clear:hover,
input[type='submit'].button-clear:focus,
input[type='submit'].button-clear:hover {
    background-color: transparent;
    border-color: transparent;
    color: #606c76;
}

.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
button.button-clear[disabled]:focus,
button.button-clear[disabled]:hover,
input[type='button'].button-clear[disabled]:focus,
input[type='button'].button-clear[disabled]:hover,
input[type='reset'].button-clear[disabled]:focus,
input[type='reset'].button-clear[disabled]:hover,
input[type='submit'].button-clear[disabled]:focus,
input[type='submit'].button-clear[disabled]:hover {
    color: #d79c4e;
}

code {
    background: #f4f5f6;
    border-radius: .4rem;
    font-size: 86%;
    margin: 0 .2rem;
    padding: .2rem .5rem;
    white-space: nowrap;
}

pre {
    background: #f4f5f6;
    border-left: 0.3rem solid #d79c4e;
    overflow-y: hidden;
}

pre > code {
    border-radius: 0;
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
}

hr {
    border: 0;
    border-top: 0.1rem solid #f4f5f6;
    margin: 3.0rem 0;
}

input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='week'],
input:not([type]),
textarea,
select {
    -webkit-appearance: none;
    background-color: transparent;
    border: 0.1rem solid #d1d1d1;
    border-radius: .4rem;
    box-shadow: none;
    box-sizing: inherit;
    height: 3.8rem;
    padding: .6rem 1.0rem .7rem;
    width: 100%;
    background-blend-mode: soft-light;
}

input[type='color']:focus,
input[type='date']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='email']:focus,
input[type='month']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
input[type='week']:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
    border-color: #d79c4e;
    outline: 0;
}

select {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>') center right no-repeat;
    padding-right: 3.0rem;
}

select[multiple] {
    background: none;
    height: auto;
}

textarea {
    min-height: 6.5rem;
}

label,
legend {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

fieldset {
    border-width: 0;
    padding: 0;
}

input[type='checkbox'],
input[type='radio'] {
    display: inline;
}

.label-inline {
    display: inline-block;
    font-weight: normal;
    margin-left: .5rem;
}

.container {
    margin: 0 auto;
    max-width: 112.0rem;
    padding: 0 2.0rem;
    position: relative;
    width: 100%;
}

.row {
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
}

.row.row-no-padding {
    padding: 0;
}

.row.row-no-padding > .column {
    padding: 0;
}

.row.row-wrap {
    flex-wrap: wrap;
}

.row.row-top {
    align-items: flex-start;
}

.row.row-bottom {
    align-items: flex-end;
}

.row.row-center {
    align-items: center;
}

.row.row-stretch {
    align-items: stretch;
}

.row.row-baseline {
    align-items: baseline;
}

.row .column {
    display: block;
    flex: 1 1 auto;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
}

.row .column.column-offset-10 {
    margin-left: 10%;
}

.row .column.column-offset-20 {
    margin-left: 20%;
}

.row .column.column-offset-25 {
    margin-left: 25%;
}

.row .column.column-offset-33, .row .column.column-offset-34 {
    margin-left: 33.3333%;
}

.row .column.column-offset-40 {
    margin-left: 40%;
}

.row .column.column-offset-50 {
    margin-left: 50%;
}

.row .column.column-offset-60 {
    margin-left: 60%;
}

.row .column.column-offset-66, .row .column.column-offset-67 {
    margin-left: 66.6666%;
}

.row .column.column-offset-75 {
    margin-left: 75%;
}

.row .column.column-offset-80 {
    margin-left: 80%;
}

.row .column.column-offset-90 {
    margin-left: 90%;
}

.row .column.column-10 {
    flex: 0 0 10%;
    max-width: 10%;
}

.row .column.column-20 {
    flex: 0 0 20%;
    max-width: 20%;
}

.row .column.column-25 {
    flex: 0 0 25%;
    max-width: 25%;
}

.row .column.column-33, .row .column.column-34 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

.row .column.column-40 {
    flex: 0 0 40%;
    max-width: 40%;
}

.row .column.column-50 {
    flex: 0 0 50%;
    max-width: 50%;
}

.row .column.column-60 {
    flex: 0 0 60%;
    max-width: 60%;
}

.row .column.column-66, .row .column.column-67 {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
}

.row .column.column-75 {
    flex: 0 0 75%;
    max-width: 75%;
}

.row .column.column-80 {
    flex: 0 0 80%;
    max-width: 80%;
}

.row .column.column-90 {
    flex: 0 0 90%;
    max-width: 90%;
}

.row .column .column-top {
    align-self: flex-start;
}

.row .column .column-bottom {
    align-self: flex-end;
}

.row .column .column-center {
    align-self: center;
}

@media (min-width: 40rem) {
    .row {
        flex-direction: row;
        margin-left: -1.0rem;
        width: calc(100% + 2.0rem);
    }
    .row .column {
        margin-bottom: inherit;
        padding: 0 1.0rem;
    }
}

a {
    color: #d79c4e;
    text-decoration: none;
}

a:focus, a:hover {
    color: #606c76;
}

dl,
ol,
ul {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
}

dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
    font-size: 90%;
    margin: 1.5rem 0 1.5rem 3.0rem;
}

ol {
    list-style: decimal inside;
}

ul {
    list-style: circle inside;
}

.button,
button,
dd,
dt,
li {
    margin-bottom: 1.0rem;
}

fieldset,
input,
select,
textarea {
    margin-bottom: 1.5rem;
}

blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
    margin-bottom: 2.5rem;
}

table {
    border-spacing: 0;
    display: block;
    overflow-x: auto;
    text-align: left;
    width: 100%;
}

td,
th {
    border-bottom: 0.1rem solid #d79c4e30;
    padding: 1.2rem 1.5rem;
}

td:first-child,
th:first-child {
    padding-left: 0;
}

td:last-child,
th:last-child {
    /*padding-right: 0;*/
}

@media (min-width: 40rem) {
    table {
        display: table;
        overflow-x: initial;
    }
}

b,
strong {
    font-weight: bold;
}

p {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    letter-spacing: -.1rem;
    margin-bottom: 2.0rem;
    margin-top: 0;
}

h1 {
    font-size: 4.6rem;
    line-height: 1.2;
}

h2 {
    font-size: 3.6rem;
    line-height: 1.25;
}

h3 {
    font-size: 2.8rem;
    line-height: 1.3;
}

h4 {
    font-size: 2.2rem;
    letter-spacing: -.08rem;
    line-height: 1.35;
}

h5 {
    font-size: 1.8rem;
    letter-spacing: -.05rem;
    line-height: 1.5;
}

h6 {
    font-size: 1.6rem;
    letter-spacing: 0;
    line-height: 1.4;
}

img {
    max-width: 100%;
}

.clearfix:after {
    clear: both;
    content: ' ';
    display: table;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

body .container {
    max-width: 1280px;
}
body.is-itch-io .container {
    max-width: 95vw;
}
body.is-itch-io #allOptionsPanel .column.left-buttons {
    max-width: 48rem;
}



/*Main*/
body {
    background-color: #202124;
}
*:not(input) {
    user-select: none;
    -webkit-user-select: none;
}
.show { display: block !important; }
.no-display { display: none !important; }
.disabled {
    opacity: .5;
}
.clear {
    clear: both;
}
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }
.logo {
    position: fixed;
    bottom: 0;
    right: 1rem;
    height: 2rem;
    opacity: 0.35;
}
.pop-up.show ~ .pop-up-blind, *::backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(32 33 36 / 76%);
    z-index: 99;
}
#toggleOptionsButton {
    position: absolute;
    margin-left: 50vw;
    /*margin-top: 19rem;*/
    margin-top: .85rem;
    color: #d79c4e30;
    text-align: center;
    cursor: pointer;
    transition: margin-top .25s ease-in;
}
#toggleOptionsButton i {
    background-color: #202124;
}
#toggleOptionsButton.collapsed {
    margin-top: 0.85rem;
}
.logo h3::after {
    content: attr(data-version);
    font-size: 1rem;
    position: absolute;
    margin-left: -0.75rem;
    margin-top: 2.55rem;
}
.container {
    min-height: 95vh;
    transition: opacity .15s;
    min-width: 400px;
    padding: 0 1rem;
}
.all-options {
    position: sticky;
    top: 0;
    background-color: #202124;
    z-index: 2;
    padding-top: 4rem;
    margin-top: -1rem;
    padding-bottom: 0.75rem;
    border-bottom: 0.1rem solid #d79c4e30;
    transition: all .25s ease-in;
    height: 20.5rem;
}
.all-options.hidden {
    transform: translateY(-19rem);
    margin-top: -19rem;
}
#masterList thead {
    position: sticky;
    top: 20.5rem;
    background-color: #202124;
    z-index: 1;
    transition: all .25s ease-in;
}
.container:has(.all-options.hidden) #masterList thead {
    top: 2rem;
}
.header-menu {
    position: fixed;
    background-color: #2c2d30;
    width: 100vw;
    left: 0;
    top: 0;
    z-index: 3;
}
#infoIndicator, .file-num {
    float: right;
    font-size: 1.3rem;
    margin-right: 5rem;
    margin-left: 5rem;
    opacity: .7;
}
.file-num {
    float: left;
}
input, .btn-audio-config { color: #a8a8a8; }
.input-set input, .input-set select, .btn-audio-config {
    width: 65%;
    padding: 0 0.5rem;
    border: 1px solid #8a5d2e;
    padding-left: 7.5rem;
    background-color: #202124;
}
.input-set[readonly], .btn-audio-config {
    border: 1px solid #312b25;
}
.input-set button {
    padding: 0 2.5rem;
}
.input-set .before-input {
    position: absolute;
    color: #815e36;
    line-height: 4rem;
    margin-left: 0.75rem;
    font-size: 1.2rem;
}
.input-set {
    margin-top: -1.5rem;
    display: flex;
}
.input-set:first-child {
    margin-top: 0;
    margin-bottom: -1rem;
}
#getJoined, .wav-link-hidden, .meta-link-hidden, .hidden { visibility: hidden; }
.hide { display: none !important; }
.fade { opacity: .15 !important; }
.chain-action-icons:has(.toggle-op-xy-preset-bundling:not(.fade)) .toggle-top-list {
    opacity: .15 !important;
}
.slice-loop {
    background-color: #511eb963 !important;
}
.file-loop-on:before, .file-loop-pp:before {
    content: '';
    border-top: 2px dotted #00cbff;
    display: block;
}
.file-loop-pp:before {
    border-top: 2px dashed #fff700;
}
#getJoined, #uploadInput, #uploadSliceFile { display: none; }
#fileNum { padding-left: 1rem; }
#fileNum.gg-spinner {padding-left: 3rem; }
#fileNum.gg-spinner::before {margin-left: -2.5rem; }
#fileNum.gg-spinner::after {display: none; }
table#masterList { padding-bottom: 12rem; padding-top: 1rem; }
#fileList {
    content-visibility: auto;
}
#fileList:empty::after {
    content: 'Load / Drop samples here to get started... (Shift+K to see keyboard shortcuts)';
    text-align: center;
    padding-top: 7rem;
    padding-bottom: 7rem;
    opacity: .35;
    position: absolute;
    width: 100%;
    font-size: 2rem;
    border: 2px dashed #40392e;
    border-radius: 1.5rem;
    margin-top: 1rem;
    max-width: 97vw;
}
th a { color: #606c76; }
th a:first-of-type { margin-left: -15px; color: #d79c4e; }
.sort-by-selected {
    width: 4.5rem;
    display: inline-block;
    margin-left: -2.5rem;
}
.end-of-grid td {
    border-bottom: 2px solid #4ed75f40;
}
tr.file-row.end-of-grid::after {
    content: 'end joined file';
    position: absolute;
    margin-left: -50%;
    margin-top: 5.7rem;
    font-size: 0.8rem;
    text-align: center;
    opacity: .75;
    overflow: hidden;
}
tr.selected {
    /*background-color: #cb9d5b0d;*/
    background-color: #cb9d5b14;
}
tr.drag-offset td {
    box-shadow: inset 0 12px 0 #3f3a34;
}
td.waveform-td:has(canvas) {
    width: 180px;
}
canvas.waveform {
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s;
    margin-top: 0.4rem;
    margin-bottom: -0.5rem;
    transform: scaleY(0.95) translateY(-0.1rem);
}
canvas.waveform:hover { opacity: .98; }

.chain-name-toggle {
    padding: 0;
    margin-left: -1.5rem;
    height: 0;
    transition: all .25s ease;
    display: block;
    margin-top: -1.5rem;
}
.chain-name-toggle:hover {
    color: #d79c4e;
    opacity: 1 !important;
}
.chain-file-name-option.used {
    opacity: .5;
    text-decoration: line-through;
}
@keyframes waveformPlayHead {
    from { margin-left: 0; }
    to { margin-left: 150px; }
}

.waveform-td:has(canvas.waveform.playing)::before {
    content: '';
    display: block;
    position: absolute;
    margin-left: 140px;
    margin-top: 8px;
    width: 0;
    height: 0;
    border-top: .5rem solid transparent;
    border-bottom: .5rem solid transparent;
    border-left: .75rem solid #008000b0;
}
.waveform-btn.playing {
    color: #008000b0;
}
td.waveform-td span.play-head {
    display: none;
    height: 56px;
    width: 1px;
    position: absolute;
    background-color: #4a4032;
    margin-top: -61px;
    margin-left: 0;
    animation-timing-function: linear;
}
.waveform-td:has(canvas.waveform.playing) span.play-head {
    animation-name: waveformPlayHead;
    display: block;
}
td.waveform-td span.play-head.play {
    margin-left: 150px !important;
}

.waveform-container {
    width: auto;
    border-left: 1px solid #d79c4e30;
    border-right: 1px solid #d79c4e30;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 16px;
    padding-top: 40px;
    min-height: 168px;
}
.waveform-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.file-path-td::-webkit-scrollbar {
    display: none;
}
#sliceLines { margin-top: -150px; }
.waveform-container .line, .waveform-container .edit-line {
    /*height: 150px;*/
    /*width: 1px;*/
    /*background-color: #e18603;*/
    /*margin-top: -150px;*/
    height: 150px;
    width: 1px;
    border-left: 1px solid #e18603;
    border-right: 1px solid #9f4141;
    margin-top: -150px;
    background-color: #99794b1a;
    opacity: .85;
}
.waveform-container .edit-line {
    pointer-events: none;
}
.waveform-container .edit-line:before,
.waveform-container .edit-line:after {
    content: '';
    width: 4px;
    height: 4px;
    display: block;
    border: 1px solid;
    visibility: hidden;
}
.waveform-container .edit-line:before {
    margin-left: -1px;
}
.waveform-container .edit-line:after {
    transform: translateX(1px);
    float: right;
    margin-top: -6px;
}
.waveform-container .edit-line.start-is-zero-crossing:before,
.waveform-container .edit-line.end-is-zero-crossing:after {
    visibility: visible;
}

td { padding: 0; }
td .gg-more-vertical { opacity: .25; }
td button { margin: 0.5rem; }
.min-width-20 { min-width: 20rem;}
.align-right { text-align: right; }
.check {
    padding: 0;
    width: 4.2rem;
}
.waveform-td { padding: 0 1rem; }
.is-ot-file::after, .is-op-file::after, .is-dc-file::after, .sff-button::after, .is-chain-count::after, .file-has-slice-data::after {
    text-align: center;
    content: 'DC';
    color: #b91c1c;
    font-size: .75rem;
    margin-top: -0.55rem;
    position: absolute;
    margin-left: 0.9rem;
    background-color: #202124;
    line-height: 1rem;
    min-width: 1rem;
}
.is-dc-file::after, .is-op-file::after {
    content: attr(data-slice-count);
}
.sff-t1::after {
    content: 'T1';
}
.sff-t2::after {
    content: 'T2';
}
.sff-t3::after {
    content: 'T3';
}
.sff-t4::after {
    content: 'T4';
}
.is-chain-count::after {
    content: attr(data-count);
}
.file-path { display: block; word-break: break-word; }
.toggle-check, .sort-check {
    border: 0.2rem solid #40392e;
    width: 3.25rem;
    height: 3.25rem;
}
.sort-check {
    margin-left: -1rem;
}
.move-up, .move-down, .duplicate, .remove, .toggle-edit { padding: 0; }
.gg-info {
    margin: 0.25rem;
    transform: scale(.6);
    margin-top: -0.15rem;
}
.sample-op-buttons .button {
    width: 8.5rem;
    padding: 0;
}
.sample-op-buttons {
    padding-bottom: 1rem;
    text-align: center;
}
.sample-op-buttons::before {
    content: attr(data-sample-duration);
    position: absolute;
    left: 2.5rem;
    margin-top: -2rem;
    font-size: 1.2rem;
}
.edit-btn-group {
    max-width: 35%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.edit-btn-group.float-right {
    max-width: 20%;
    justify-content: end;
}

.slice-range {
    display: none;
    width: 1024px;
    padding: 0;
    margin: 0;
    z-index: 2;
    background: transparent;
    position: absolute;
    appearance: none;
}
.slice-range:first-of-type {
    margin-top: -3rem;
}
/*.select.split {*/
/*    background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M4 4H8V8H4V4Z" fill="currentColor" /> <path d="M4 10H8V14H4V10Z" fill="currentColor" /> <path d="M8 16H4V20H8V16Z" fill="currentColor" /> <path d="M10 4H14V8H10V4Z" fill="currentColor" /> <path d="M14 10H10V14H14V10Z" fill="currentColor" /> <path d="M10 16H14V20H10V16Z" fill="currentColor" /> <path d="M20 4H16V8H20V4Z" fill="currentColor" /><path d="M16 10H20V14H16V10Z" fill="currentColor" /> <path d="M20 16H16V20H20V16Z" fill="currentColor" /> </svg>') center right no-repeat !important;*/
/*    padding-right: 3.0rem;*/
/*}*/
.channel-options, .pan-options {
    border: 1px solid #40392e;
    border-radius: 5px;
    margin-right: 1.5rem;
    padding: 0.75rem 0.5rem 0.25rem 0.5rem;
    width: 7rem;
    text-align: center;
}
.channel-options a, .pan-options a {
    color: #40392e;
    margin-bottom: 0.2rem;
    display: inline-block;
    opacity: .5;
}
.channel-options a.selected, .pan-options a.selected {
    color: #d79c4e;
    opacity: 1;
}
/*.channel-options-stereo i {*/
/*    display: inline-block;*/
/*    transform: translateY(0.25rem);*/
/*}*/
/*.channel-options-stereo i.stereo-circle {*/
/*    margin-left: -1.35rem;*/
/*}*/

.channel-options-stereo-opf {
    padding-bottom: 0;
}
.channel-options-stereo-opf span.op-la,
.channel-options-stereo-opf span.op-rb {
    width: 2.9rem;
    display: inline-block;
    float: left;
}
.channel-options-stereo-opf span.op-la {
    border-right: 1px solid rgba(64, 57, 46, 0.6);
}

.channel-options-stereo-opf input.channel-balance {
    width: 7rem;
    margin-left: -0.5rem;
    position: absolute;
    height: 2.1rem;
    background: transparent;
    appearance: none;
}
.channel-options-stereo-opf input.channel-balance::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 36px;
    width: 4px;
    background: #3f382e;
}
.channel-options-stereo-opf input.channel-balance:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

.channel-options-stereo-opf .op-la::after {
    content: 'L';
}
.channel-options-stereo-opf .op-rb::before {
    content: 'R';
}
.channel-options-stereo-opf.op-pan-ab-true .op-la::after {
    content: 'A';
}
.channel-options-stereo-opf.op-pan-ab-true .op-rb::before {
    content: 'B';
}
.info-panel-md, .split-panel-options, .edit-panel-options,
.merge-panel-options, .not-served-md, .export-settings-panel-md,
.op-export-panel-options, .chain-name-list-panel-md {
    position: fixed;
    width: 512px;
    top: 10vh;
    left: 50%;
    margin: 0 -256px;
    z-index: 100;
    background-color: #202124;
    border: 1px solid orange;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 0 4px #cf8600;
    box-sizing: content-box;
    max-width: 512px;
    transition: opacity .33s ease-in;
    display: none;
}

.shortcut-container {
    display: flex;
}
.shortcut-section {
    margin: -1rem 1rem 0 1rem;
    min-width: 48%;
}
#exportSettingsPanel {
    margin-top: 4rem;
    max-height: calc(89vh - 4rem);
}
#exportSettingsPanel .disabled {
    pointer-events: none;
    user-focus: none;
    opacity: .33;
}
#exportSettingsPanel .export-options {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid;
    border-color: #d79c4e;
    display: flex;
}
#exportSettingsPanel .export-options span {
    padding: .65rem 1rem;
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    cursor: pointer;
    margin-right: .5rem;
    transform: translateY(1px);
    border-bottom: 1px solid #d79c4e;
    z-index: 2;
}
#exportSettingsPanel .export-options span.active {
    color: #d79c4e;
    border-bottom-color: #202124;
}
#exportSettingsPanel .input-set input {
    max-width: 28.5rem;
    margin-top: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 3.5rem;
}
#exportSettingsPanel .input-set label {
    padding-top: 1.4rem;
}
#exportSettingsPanel .input-set button {
    padding-top: 1.4rem;
    margin-left: -3rem;
}
#exportSettingsPanel button {
    padding: 0;
    width: 4.2rem;
    height: 2.5rem;
    line-height: 2rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
#exportSettingsPanel tr {
    min-height: 2rem;
}
#exportSettingsPanel input[type=radio] {
    background-color: transparent;
    color: #d79c4e;
}
#exportSettingsPanel input[type=radio]:checked {
    background-color: #d79c4e;
    color: #fff;
}
#exportSettingsPanel #sliceGridGroup {
    display: flex;
    align-content: flex-end;
    justify-content: space-around;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
#exportSettingsPanel #sliceGridGroup input {
    max-width: 5rem;
    margin-right: 1rem;
    min-width: 4rem;
    padding: 0 1rem;
    border: 0.1rem solid #d1d1d12b;
}
#exportSettingsPanel #sliceGridGroup input::-webkit-outer-spin-button,
#exportSettingsPanel #sliceGridGroup input::-webkit-inner-spin-button {
    display: none;
}
#settingAudioConfig button.check, #settingSession button.check {
    width: 7rem;
}

.above-waveform-buttons {
    width: 100%;
    display:inline-block;
    margin-top: 1rem;
}

.playback-controls button {
    padding: .5rem;
    margin: 0;
    width: 2rem;
    height: 2.25rem;
    text-align: center;
    vertical-align: middle;
    margin-top: -.25rem;
}

.zoom-level {
    display: flex;
    position: absolute;
    right: 3rem;
}
.zoom-level button {
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    vertical-align: middle;
    line-height: .25rem;
    margin-left:.5rem;
}
.zoom-level button.zoom-waveform-height {
    width: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


dialog {
    color: #606c76;
    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    /*width: 512px;*/
    width: 75vw;
    max-width: 768px;
    background-color: #202124;
    border: 1px solid orange;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 0 4px #cf8600;
    box-sizing: content-box;
    transition: opacity .33s ease-in;
    max-height: 89vh;
    outline: none;
}

#welcomePanelMd .tip-header {
    margin-left: 1rem;
}
#tipElement .tip {
    border: 1px solid #40392e;
    border-radius: 5px;
    padding: 1.5rem;
}

.op-export-panel-options { top: 1vh;}
.op-export-side-panel-options {
    width: 50rem;
    position: fixed;
    top: 0;
    bottom: 0;
    right: -50rem;
    z-index: 5;
    border-left: 1px solid #2c2d30;
    max-width: 50%;
    transition: right .33s ease-in;
    padding: 1rem;
    /*background: #202124c7;*/
    background-color: #202124;
    overflow-y: auto;
}
.op-export-side-panel-options.show {
    right: 0;
}
.op-chain-drop-zone {
    border-style: dashed;
    color: #483f33 !important;
    margin-left: 2rem;
    padding: 0 1rem;
}
/*#masterList { padding-right: 25rem; }*/
/*td.move-up-td, td.move-down-td {display:none;}*/

.loading .op-export-side-panel-options.show {
    opacity: .05;
}
#opExportPanelContent {
    margin: 2rem;
}
 a {
    cursor: pointer;
}
.w-0 { width: 0; }
.p-0 { padding: 0; }
#fileList tr:has(.check.button-outline) {
    opacity: 0.55;
}
.download-buttons {
    width: 35rem;
}
.btn-download {
    padding: 0;
    width: 15.5rem;
}
.btn-download-all {
    margin-left: 1rem;
}
.dl-single-files { width: 10rem; }
.dl-spaced, .dl-chain{
    width: 18.25rem;
    padding: 0;
}

.chain-actions {
    display: flex;
    flex-direction: row;
    justify-content: left;
}
.chain-action-icons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-left: 1rem;
    width: 14rem;
}
.chain-action-icons button {
    padding: 0;
}

.toggle-op-xy-preset-bundling {
    width: 3rem;
    display: flex;
    height: 4rem;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 0 .25rem;
}

button:has(.selection-count[data-selection-count="0"]),
button:has(.join-count[data-join-count="0"]) {
    opacity: .2;
    cursor: not-allowed;
}
.toggle-export-settings, .toggle-seconds-per-file {
    padding: 0 1rem;
    float: right;
    transform: translateY(-0.75rem);
}
.toggle-seconds-per-file {
    margin: 0.7rem 0 0 0;
    color: #d79c4e;
}
.toggle-seconds-per-file.on { color: #d79c4e !important;}
.slice-group {
    border: 1px solid orange;
    padding: 1rem;
    border-radius: 5px;
    text-align: center;
    padding-bottom: 0.25rem;
    width: 35rem;
    height: 10.75rem;
    background-color: #202124;
    transition: transform .2s ease-in;
}
.waveform-container .slice-group {
    padding-bottom: 2rem;
}
.all-options.hidden .slice-group.float-down {
    transform: translateY(14rem);
}
.button-clear.remove {
    color: #343433;
    transition: color .2s;
}
.button-clear:has(i):focus,
.button-clear.toggle-op-xy-preset-bundling {
    color: #d79c4e;
}
.button-clear.remove:hover,
.button-clear.remove:has(i):focus{
    color: #5e1a1a;
}
button.sel-transient { margin-left: .5rem; }
button.sel-transient:is(.button-outline) ~ #transientThreshold {
    display: none !important;
}
#transientThreshold {
    width: 4.5rem;
    height: 2.5rem;
}
.left-buttons .button, .left-buttons .btn-audio-config {
    padding: 0 1.5rem;
    margin-right: 0.5rem;
    width: 47%;
}
.left-buttons .button:last-child {
    margin-right: 0;
}

.load-file-label {
    width: 21% !important;
}
.btn-audio-config {
    width: 73.5% !important;
}

.selected-actions-button-list {
    position: absolute;
    margin-top: 4.25rem;
    border: 1px solid #d79c4e30;
    padding: 0.5rem 0.5rem 0 0.5rem;
    border-radius: 0.4rem;
    background-color: #202124;
    z-index: 1;
    max-width: 45rem;
    max-height: 60vh;
    overflow: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
}
.selected-actions-button-list .button-outline, .selected-actions-button-list .button-clear {
    width: 14rem;
    padding: 0;
}

.right-buttons i, .left-buttons i {
    display: inline-block;
    margin-top: 0;
    margin-right: 0.5rem;
    top: 0.35rem;
}
.right-buttons {
    transition: opacity .33s ease-in;
}
.right-buttons:has(.toggle-seconds-per-file.on) button.check:not(.slice-grid-off),
.right-buttons:has(.toggle-seconds-per-file.on) button.dl-spaced {
    pointer-events: none;
    color: #2f3234;
    border-color: #2f3234 !important;
    background-color: transparent !important;

}
.btn-audio-config * { color: #7a6241; }
.btn-audio-config:hover * { color: #d79c4e; }
.loading-message {
    display: none;
    top: 40vh;
    position: fixed;
    width: 100%;
    font-size: 3rem;
    text-align: center;
}
.loading-message div {
    width: 32rem;
    margin: auto;
}
.loading-message .gg-spinner {
    transform: scale(2);
    margin-top: 4rem;
}
.loading-message span {
    margin-left: 5rem;
    margin-top: -3.25rem;
    display: block;
}
.loading .loading-message {
    display: block;
    z-index: 100;
}
.loading .container {
    opacity: .15;
}
.gradient-text {
    background-color: #606c76;
    background-image: linear-gradient(90deg, #606c76, #606c76);
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}
.btn-audio-config {
    background-color: #202124;
    text-align: left;
    /*color: #d79c4e;*/
    color: #606c76;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-block;
    height: 3.8rem;
    letter-spacing: .1rem;
    line-height: 3.8rem;
    padding: 0 3.0rem;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    border-color: #313438 !important;
    background-blend-mode: soft-light;
}
#splitOptions .slice-group {
    width: auto;
    border: none;
}
#splitOptions .split-right-action-buttons button {
    padding: 0 1rem;
    margin-right: .5rem;
    min-width: 11rem;
}
#splitOptions .button-create-ot {
    visibility: hidden;
}
body[data-target-sr="44100"] #splitOptions .button-create-ot {
    visibility: visible;
}
.slice-options {
    margin-top: -1.5rem !important;
}
.slice-options label {
    margin-top: .25rem;
}
.slice-options #sliceSelection {
    width: 12rem;
    padding: 0;
    margin-top: .2rem;
    padding-left: 5rem;
    background-color: #202124;
    text-align: left;
    color: #606c76;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-block;
    height: 3.8rem;
    letter-spacing: .1rem;
    line-height: 3.8rem;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid #8a5d2e;
    background-blend-mode: soft-light;
}
.slice-options button {
    padding: 0 .5rem;
}
.touch-buttons {
    /*display: none;*/
    position: fixed;
    bottom: 0;
    width: 10rem;
    z-index: 101;
}
.touch-buttons button {
    width: 100%;
    background: #202124 !important;
    opacity: .33;
}
.touch-buttons button#modifierKeyshiftKey.active {
    opacity: 1;
    background-color: #4E99D7A0 !important;
    color: #fff !important;
}
.touch-buttons button#modifierKeyctrlKey.active {
    opacity: 1;
    background-color: #d74e81a1 !important;
    color: #fff !important;
}

.has-shift-mod, .has-ctrl-mod, .has-shift-mod-i, .has-ctrl-mod-i {
    transition: all .1s linear;
}

body.shiftKey-mod-down .has-shift-mod,
body.shiftKey-down .has-shift-mod {
    border-color: #4E99D7A0 !important;
    color: #d79c4e;
    background-color: transparent !important;
}
body.ctrlKey-mod-down .has-ctrl-mod,
body.ctrlKey-down .has-ctrl-mod {
    border-color: #663247 !important;
    background-color: transparent !important;
    color: #d79c4e;
}
body.ctrlKey-mod-down .split[class*="is-"] .has-ctrl-mod-i,
body.ctrlKey-down .split[class*="is-"] .has-ctrl-mod-i,
body.ctrlKey-mod-down .has-ctrl-mod-i,
body.ctrlKey-down .has-ctrl-mod-i {
    color: #663247  !important;
}
body.shiftKey-mod-down.ctrlKey-mod-down .has-shift-mod.has-ctrl-mod,
body.shiftKey-down.ctrlKey-down .has-shift-mod.has-ctrl-mod {
    border-left-color: #663247 !important;
    border-top-color: #663247 !important;
    border-right-color: #4E99D7A0 !important;
    border-bottom-color: #4E99D7A0 !important;
    background-color: transparent !important;
    color: #d79c4e;
}
body.shiftKey-mod-down .has-shift-mod-i,
body.shiftKey-down .has-shift-mod-i {
    color: #4E99D7A0  !important;
}

.mh-60vh {
    max-height: 60vh;
    overflow: auto;
}
.merge-info, .edit-info, .file-nav-buttons {
    position: relative;
    font-size: 1.05rem;
    opacity: .8;
    float: left;
    max-width: 80%;
    margin-top: 1rem;
}
.file-nav-buttons {
    float: right;
}
.settings-info {
    position: absolute;
    font-size: 1.05rem;
    opacity: .8;
}

table#mergeList th {
    padding-left: 0;
}
table#mergeList td.file-path-td {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.current-selection-text {
    position: absolute;
    font-size: 1.1rem;
    opacity: .5;
    padding-left: 0.5rem;
}

.path-exceeds-127 {
    /*border-left: 2px solid #5d1d1d;*/
    padding-left: .25rem;
    border: 2px solid;
    border-image-slice: 1;
    border-width: 2px;
    border-image-source: linear-gradient(to bottom, transparent, #5f404b, transparent);
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    padding-left: 1rem;
    margin-left: -1rem;
}
body.grid-view .path-exceeds-127 {
    margin-left: 0;
}

/*OP Editor*/
.op-key {
    width: 22rem;
    height: 5rem;
    border: 1px solid;
    border-radius: 7px;
    margin: 3px;
    float: left;
    background-color: #202124b5;
    display: flex;
    align-content: stretch;
    justify-content: space-between;
    align-items: stretch;
}

.op-key.white.selected::before,
.op-key.black.selected::before {
    content: ' ';
    background-color: #d79c4e !important;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    position: absolute;
    margin-top: 2rem;
    opacity: 1;
    margin-left: -2rem;
}
.in-link-mode .op-key.black.selected::before {
    margin-left: 22.5rem;
}

.op-key.black:nth-of-type(1) { margin-top: 3rem; }
.op-key.black:nth-of-type(4), .op-key.black:nth-of-type(6), .op-key.black:nth-of-type(9) { margin-top: 6rem; }

.op-key .left-a {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 5rem;
    background: #3c2b1366;
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
    padding: 1px;
    opacity: 0;
    transition: opacity .15s ease;
    min-width: 33%;
}
.op-key .right-b {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 5rem;
    text-align: center;
    background: #3c2b1366;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
    padding: 1px;
    opacity: 0;
    transition: opacity .15s ease;
    min-width: 33%;
}

.op-key .center-c {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 33%;
}

.op-key.drag-over .left-a,
.op-key.drag-over .right-b,

.op-key:has(.left-a.drag-over) .right-b,
.op-key:has(.right-b.drag-over) .left-a
{
    opacity: 1;
}
.op-key.drag-over .left-a.drag-over,
.op-key.drag-over .right-b.drag-over,
.op-key .left-a.drag-over,
.op-key .right-b.drag-over,
.op-key .left-a[title$='.'],
.op-key .right-b[title$='.'] {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
    visibility: visible;
    opacity: 1;
}

.op-key .center-c[title$='.'] {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
    visibility: visible;
    opacity: 1;
}

.op-key::after {
    position: absolute;
    line-height: 5rem;
    padding-left: 1rem;
    opacity: .85;
    z-index: -1;
}
.op-key.key-0::after { content: '1 kick'; }
.op-key.key-1::after { content: '2 kick alt'; }
.op-key.key-2::after { content: '3 snare'; }
.op-key.key-3::after { content: '4 snare'; }
.op-key.key-4::after { content: '5 rim'; }
.op-key.key-5::after { content: '6 clap'; }
.op-key.key-6::after { content: '7 tamb'; }
.op-key.key-7::after { content: '8'; }
.op-key.key-8::after { content: '9 closed hat'; }
.op-key.key-9::after { content: '10 kick'; }
.op-key.key-10::after { content: '11 open hat'; }
.op-key.key-11::after { content: '12'; }
.op-key.key-12::after { content: '13'; }
.op-key.key-13::after { content: '14 ride'; }
.op-key.key-14::after { content: '15'; }
.op-key.key-15::after { content: '16 crash'; }
.op-key.key-16::after { content: '17'; }
.op-key.key-17::after { content: '18'; }
.op-key.key-18::after { content: '19'; }
.op-key.key-19::after { content: '20'; }
.op-key.key-20::after { content: '21'; }
.op-key.key-21::after { content: '22'; }
.op-key.key-22::after { content: '23'; }
.op-key.key-23::after { content: '24'; }

.op-key-linked {
    display: flex;
    align-items: center;
    width: 2.5rem;
    justify-content: space-between;
}

.sample-list {
    width: 40%;
    border: 1px solid;
    float: left;
    max-height: 60rem;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 5px;
}
/*.white-keys, .black-keys {*/
/*    width: 28%;*/
/*}*/

.white-keys .op-key {
    float: right;
}

.op-key-details {
    display: none;
    width: 45%;
    min-height: 78rem;
    border: 1px solid #606c76;
    border-radius: 7px;
    position: absolute;
    background-color: #202124;
    z-index: 1;
    margin-top: .5rem;
    margin-left: -.4rem;
    padding: .5rem;
    flex-wrap: wrap;
    flex-direction: column;
    margin-left: 45%;
}

.op-key-details-buttons {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.op-key-details-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.op-key-details-controls select, .op-key-details-controls button {
    border-color: #40392e;
}

.op-key-detail {
    display: flex;
    justify-content: space-around;
    align-content: center;
    align-items: stretch;
}
.op-key-detail-title {
    border-bottom: 1px solid #43392d;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.op-key-spacer {
    border-top: 1px solid #43392d;
    margin-bottom: 1rem;
    height: 1rem;
    display: block;
}

.op-key-detail-name {
    width: 75%;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.op-key-detail-name:empty::before {
    content: 'no sample';
    opacity: .35;
}
.op-key-details .channel-options {
    display: flex;
    justify-content: space-around;
    margin-right: 0;
    border: none;
}

#opExportPanelContent:has(.op-key.selected) .op-key-details:not(:empty) {
    display: flex;
}

#opExportPanelContent:has(.op-key.selected) .op-key:not(.selected) {
    opacity: .4;
}

.op-samples-length-bar {
    display: flex;
    width: 100%;
    height: 1rem;
    border: 1px solid #43392d;
    border-radius: 7px;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.op-samples-length-bar .fill {
    display: flex;
    background-color: #7f8081;
    border-radius: 7px;
}
.op-samples-length-bar::after {
    content: attr(data-caption);
    width: 100%;
    font-size: 1.25rem;
    position: absolute;
    margin-top: -2rem;
    text-align: right;
    margin-left: -7rem;
}

.op-buttons button {
    margin-right: 1rem;
}

@media (min-width: 430px) {
    body.grid-view #masterList tr {
        display: none;
    }

    body.grid-view #masterList tr.file-row {
        display: block;
        width: 26rem;
        height: 30rem;
        float: left;
        border: 0.1rem solid #d79c4e30;
        border-radius: 10px;
        padding: 1.2rem 1.5rem;
        margin: .5rem;
    }

    body.grid-view #masterList td {
        border: none;
        display: inline-block;
    }


    body.grid-view #masterList .move-up-td {
        position: absolute;
        margin-left: 15rem;
        margin-top: -1rem;
    }

    body.grid-view #masterList .move-down-td {
        position: absolute;
        margin-left: 15rem;
        margin-top: 2rem;
    }

    body.grid-view #masterList .waveform-td {
        margin-left: 4rem;
    }

    body.grid-view #masterList td.file-path-td {
        width: 85%;
        height: 13rem;
        overflow-y: auto;
    }

    body.grid-view #masterList td.duration-td {
        width: 100%;
        margin-top: .5rem;
        padding-right: 4rem;
        opacity: .7;
        margin-left: 8rem;
    }

    body.grid-view #masterList td.toggle-edit-td {
        position: absolute;
        margin-left: 21rem;
        margin-top: -14.5rem;
    }

    body.grid-view #masterList td.split-td {
        position: absolute;
        margin-left: 17.5rem;
        margin-top: -10rem;
    }

    body.grid-view #masterList td.duplicate-td {
        position: absolute;
        margin-left: 21rem;
        margin-top: -7.5rem;
    }

    body.grid-view #masterList td.remove-td {
        position: absolute;
        margin-left: 21rem;
        margin-top: -3.5rem;
    }

    body.grid-view #masterList td.channel-options-td {
        margin-top: -3rem;
        position: absolute;
        margin-left: 0rem;
    }

    body.grid-view #masterList tr.end-of-grid {
        border-bottom: 2px solid #4ed75f40;
        border-right: 2px solid #4ed75f40;
    }
    body.grid-view #masterList tr.end-of-grid::after {
        margin-left: 9rem;
        margin-top: 0.7rem;
    }
}

@media (max-width: 40.0rem) {
    .container { margin-top: 2.5rem; }
    .min-width-20, .column-33, .column-33 .download-buttons, .column-33 .slice-group { width: 99%; }
    .column-33 .btn-download-all { width: 49.3%;}
    .column-33 .check { width: 13.1%; }
    .left-buttons .row { display: block; }
    .left-buttons .button { width: 48.5%; margin-right: 0.1rem; }
    .left-buttons .row .button:first-child { margin-left: 0.25rem;}
    .dl-chain, .dl-spaced { width: 56%;}
    .chain-action-icons { width: 43%;}
    .info-panel-md, .split-panel-options {
        width: 90%;
        left: 4.5%;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .all-options {
        height: 35.5rem;
        position:relative;
    }
    #masterList thead {
        position: inherit;
    }
    .all-options.hidden {
        transform: translateY(-34rem);
        margin-top: -31rem;
    }
    #toggleOptionsButton {
        /*margin-top: 35.5rem;*/
        margin-top: .85rem;
    }
}

@media (max-width: 350px) {
    .container {
        display: block;
        margin: -2rem 0 0 -2rem;
    }

    .end-of-grid td {
        border-bottom: none;
    }

    .end-of-grid .waveform-td {
        border-bottom: 0.1rem solid #d79c4e30;
    }

    table#masterList {
        overflow-x: hidden;
        padding-top: 2.5rem;
    }

    #toggleOptionsButton {
        /*margin-top: 34rem;*/
    }

    #masterList tr {
        display: none;
    }

    #masterList tr.file-row {
        display: block;
        width: 98%;
        height: 20rem;
        float: left;
        border: 0.1rem solid #d79c4e30;
        border-radius: 10px;
        padding: .7rem 1rem;
        margin: .5rem
    }

    #masterList td {
        border: none;
        display: inline-block;
    }


    #masterList .move-up-td {
        position: absolute;
        margin-left: 24rem;
        margin-top: -1rem;
    }

    #masterList .move-down-td {
        position: absolute;
        margin-left: 24rem;
        margin-top: 2rem;
    }

    #masterList .waveform-td {
        margin-left: 3rem;
        border: 0.1rem solid #d79c4e30;
        padding: 0 1rem;
        border-radius: .5rem;
    }

    #masterList td.file-path-td {
        width: 70%;
        height: 5rem;
        text-overflow: ellipsis;
        margin-right: -13rem;
        overflow: hidden;
    }

    #masterList td.file-path-td span, #masterList td.file-path-td a {
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #masterList td.duration-td {
        width: 100%;
        margin-top: 3rem;
        margin-left: 8rem;
        opacity: .7;
    }

    #masterList td.toggle-edit-td {
        position: absolute;
        margin-left: 30.25rem;
        margin-top: -12.25rem;
    }

    #masterList td.split-td {
        position: absolute;
        margin-left: 27rem;
        margin-top: -8rem;
    }

    #masterList td.duplicate-td {
        position: absolute;
        margin-left: 30.5rem;
        margin-top: -6rem;
    }

    #masterList td.remove-td {
        position: absolute;
        margin-left: 30.5rem;
        margin-top: -3rem;
    }

    #masterList td.channel-options-td {
        margin-top: -3rem;
        position: absolute;
        margin-left: 0rem;
    }

    body.grid-view #masterList tr.end-of-grid {
        border-bottom: 2px solid #4ed75f40;
    }

    #masterList tr.file-row.end-of-grid::after {
        content: 'end joined file';
        position: absolute;
        margin-left: 15rem;
        margin-top: 0.7rem;
        font-size: 0.8rem;
        text-align: center;
        opacity: .75;
    }

    .edit-btn-group.float-left {
        max-width: 55% !important;
    }
    .edit-btn-group.float-right {
        max-width: 30% !important;
    }
}

@media (max-width: 430px), (max-height:650px) {
    html {
        font-size: 50%;
        overflow-x: hidden;
    }
    .all-options {
        padding-right: 1rem;
    }
    .info-panel-md, .split-panel-options, .edit-panel-options, .merge-panel-options, .not-served-md, .export-settings-panel-md, .op-export-panel-options, .chain-name-list-panel-md {
        position: fixed;
        top: 1vh;
        max-height: 98vh;
        left: 0;
        margin: 0;
        z-index: 100;
        background-color: #202124;
        border: 1px solid orange;
        padding: 2rem;
        border-radius: 5px;
        box-shadow: 0 0 4px #cf8600;
        box-sizing: border-box;
        max-width: 99vw;
        height: 98vh;
        width: 99vw;
        transition: opacity .33s ease-in;
        overflow: auto;
    }
    dialog {
        max-width: 98vw;
        height: fit-content;
        width: 88vw;
        max-height: 89vh;
    }

    .input-set input {
        width: 58%;
    }
    .sample-op-buttons span {
        font-size: 1.4rem;
    }

    .merge-info, .edit-info, .settings-info {
        position: relative;
        font-size: 1.05rem;
        opacity: .8;
        float: left;
        max-width: 80%;
        margin-top: 1rem;
    }

    .edit-btn-group.float-left {
        max-width: 31%;
    }
    .edit-btn-group.float-right {
        max-width: 55%;
    }

}

@media (max-width: 430px) {
    html {
        font-size: 50%;
        overflow-x: hidden;
    }
    .all-options {
        width: 100vw;
        padding-right: 1rem;
    }
    .container {
        display: block;
        margin: -2rem 0 0 -2rem;
    }
    #toggleOptionsButton {
        /*margin-top: 34rem;*/
    }
    .edit-btn-group.float-left {
        max-width: 44%;
        margin-top: 4rem;
    }
    .edit-btn-group.float-right {
        max-width: 23%;
    }
    .zoom-level {
        clear: right;
    }
}

@media (max-width: 980px) {
    #opExportPanelContent {
        display: none;
    }
    #opExportPanel::before {
        content: 'OP Kit Builder requires a wider screen width, please expand the window or zoom out.';
        position: absolute;
        margin-top: 5rem;
        padding: 2rem;
        font-size: 1.85rem;
        text-align: center;
        opacity: .85;
    }
}

@media (min-width: 1100px) {
    .info-panel-md, .split-panel-options, .edit-panel-options,
    .merge-panel-options, .not-served-md, .export-settings-panel-md,
    .op-export-panel-options {
        width: 1030px;
        top: 16vh;
        left: 50%;
        margin: 0px -535px;
        z-index: 1000;
        background-color: #202124;
        border: 1px solid orange;
        padding: 2rem;
        border-radius: 5px;
        box-shadow: 0 0 4px #cf8600;
        box-sizing: content-box;
        max-width: 1030px;
    }
    dialog {
        width: 1030px;
        max-width: 1030px;
    }
    .op-export-panel-options { top: 1vh;}
    #exportSettingsPanel, #welcomePanelMd {
        width: 768px;
        /*margin: 0 -384px;*/
        max-width: 768px;
    }

    #chainFileNameListPanel {
        width: 512px;
        max-width: 512px;
    }

    .edit-btn-group.float-right {
        max-width: 40%;
    }
}

/*@media (hover: none) and (pointer: coarse) {*/
/*    .touch-buttons { display: block; }*/
/*}*/

/*@media (hover: none) and (pointer: fine) {*/
/*    .touch-buttons { display: block; }*/
/*}*/

body.light,
body.light #allOptionsPanel,
body.light .slice-group,
body.light .pop-up,
body.light .dialog-pop-up,
body.light #opExportPanel,
body.light select,
body.light input,
body.light .slice-options #sliceSelection,
body.light #toggleOptionsButton i,
body.light .selected-actions-button-list,
body.light *[class*=is-]:after,
body.light *[class*=sff-]:after,
body.light #masterList thead
{
    background-color: #f5f5f5;
    background-blend-mode: normal;
}

body.light .header-menu {
    background-color: #dddddd;
}

body.light .button-clear.remove {
    color: #c5c5c5;
}

body.light .button-clear.remove:hover {
    color: #e77d7d;
}

body.light .right-buttons:has(.toggle-seconds-per-file.on) button.check:not(.slice-grid-off),
body.light .right-buttons:has(.toggle-seconds-per-file.on) button.dl-spaced {
    pointer-events: none;
    color: #2f3234;
    border-color: #2f3234 !important;
    background-color: transparent !important;
    opacity: .15;
}

.toggle-seconds-per-file {
    opacity: .15;
    transition: all .25s ease;
}
.toggle-seconds-per-file.on {
    opacity: 1;
}

body.normalize-contrast a, body.normalize-contrast .waveform {
    filter: contrast(0.5);
}

.toggle-help-panel {
    padding: 0;
    font-size: 1.5rem;
    border: 2px solid;
    box-sizing: content-box;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 5rem;
    float: right;
    margin-right: 1rem;
    margin-top: 0.5rem;
    text-align: center;
}

body.show-help .help-text {
    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    white-space: break-spaces;
    line-height: 1.5rem;
    text-align: left;
    border: 1px solid #606c76;
    border-radius: 5px;
    padding: 1rem;
    background-color: #202124;
    min-height: 6.5rem;
    font-size: 1.1rem;
    color: #606c76;
    transition: all 1s ease;
    min-width: 16.5rem;
    max-width: 30vw;
    z-index: 105;
}

body.light.show-help .help-text {
    background-color: #ede5d8;
}

body.light .op-key {
    background-color: transparent;
}
body.light .op-key-details {
    background-color: #f5f5f5;
}
body.light .op-key-spacer {
    border-top: 1px solid #f0e5d6;
}
body.light .op-key .center-c[title$='.'] {
    background-color: #7f8081;
}
body.light #exportSettingsPanel .export-options span.active {
    border-bottom-color: #f5f5f5;
}

html.scaled {
    font-size: 54%;
    overflow-x: hidden;
}

#dcDialog {
    max-width: 50rem;
    padding: 2rem 2rem 1.25rem 2rem;
    max-height: fit-content;
}
#dcDialog .content {
    display: flex;
    flex-direction: column;
}
#dcDialog .prompt {
    padding-bottom: 2rem;
}
#dcDialog input {
    width: 95%;
    margin: 0 auto 2rem auto;
}
#dcDialog .buttons-group {
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}
#dcDialog .buttons-group button {
    min-width: 5rem;
}
#dcDialog .buttons-group .prompt-ok {
    margin-left: 2rem;
}

.toast {
    position: absolute;
    z-index: 20;
    width: 30rem;
    padding: 1rem 2rem;
    background-color: #d79c4ee3;
    top: 1rem;
    margin: auto calc(50% - 15rem);
    color: #ffffff;
    border: 4px solid #43392d;
    border-style: double;
    border-radius: .4rem;
    text-align: center;
    animation-duration: .5s;
    animation-fill-mode: both;
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.fadeInDown {
    animation-name: fadeInDown;
}
@keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}
.fadeOutUp {
    animation-name: fadeOutUp;
}

body:not(.light) #dcDialog .prompt {
    color: #98a4ae;
}

body.latest .header-menu::after {
    content: 'This is the active development build, things here may be broken!';
    float: right;
    padding-right: 1rem;
    font-size: 1.25rem;
    color: #ff1c1c;
    margin-top: -.05rem;
}