:root {
    --font-size: 11px;
    --list-width: 1040px;

    --gradient-low: 10%;
    --gradient-high: 60%;

    --banner-bg-opacity: 0.03;
    --banner-max-height: 28px;
    --banner-max-width: 100px;

    --cdtitle-bg-opacity: 0.15;

    --name-color-light: #dfb7f1;
    --name-color-dark: #c275c2;

    --artist-name-color-light: #a6ebf7;
    --artist-name-color-dark: #75c6c9;
    --artist-max-width: 300px;

    --mapper-name-color-light: #f7f8c2;
    --mapper-name-color-dark: #f0e587;
    --mapper-max-width: 200px;

    --diff-max-width: 200px;

    --columns-4-color-light: #ffffff;
    --columns-4-color-dark: #ffffff;
    --columns-4-0-color-light: #66ccff;
    --columns-4-0-color-dark: #55a7cf;
    --columns-4-1-color-light: #099948;
    --columns-4-1-color-dark: #0b7e3d;
    --columns-4-2-color-light: #ddaa00;
    --columns-4-2-color-dark: #b48b03;
    --columns-4-3-color-light: #ff6666;
    --columns-4-3-color-dark: #cf5555;
    --columns-4-4-color-light: #c97bff;
    --columns-4-4-color-dark: #a466cf;
    --columns-4-5-color-light: #666666;
    --columns-4-5-color-dark: #555555;

    --columns-6-color-light: #ffffff;
    --columns-6-color-dark: #ffffff;
    --columns-6-0-color-light: #66ccff;
    --columns-6-0-color-dark: #55a7cf;
    --columns-6-1-color-light: #099948;
    --columns-6-1-color-dark: #0b7e3d;
    --columns-6-2-color-light: #ddaa00;
    --columns-6-2-color-dark: #b48b03;
    --columns-6-3-color-light: #ff6666;
    --columns-6-3-color-dark: #cf5555;
    --columns-6-4-color-light: #c97bff;
    --columns-6-4-color-dark: #a466cf;
    --columns-6-5-color-light: #666666;
    --columns-6-5-color-dark: #555555;

    --columns-8-color-light: #ffffff;
    --columns-8-color-dark: #ffffff;
    --columns-8-0-color-light: #66ccff;
    --columns-8-0-color-dark: #55a7cf;
    --columns-8-1-color-light: #099948;
    --columns-8-1-color-dark: #0b7e3d;
    --columns-8-2-color-light: #ddaa00;
    --columns-8-2-color-dark: #b48b03;
    --columns-8-3-color-light: #ff6666;
    --columns-8-3-color-dark: #cf5555;
    --columns-8-4-color-light: #c97bff;
    --columns-8-4-color-dark: #a466cf;
    --columns-8-5-color-light: #666666;
    --columns-8-5-color-dark: #555555;

    --columns-10-color-light: #ffffff;
    --columns-10-color-dark: #ffffff;
    --columns-10-0-color-light: #66ccff;
    --columns-10-0-color-dark: #55a7cf;
    --columns-10-1-color-light: #099948;
    --columns-10-1-color-dark: #0b7e3d;
    --columns-10-2-color-light: #ddaa00;
    --columns-10-2-color-dark: #b48b03;
    --columns-10-3-color-light: #ff6666;
    --columns-10-3-color-dark: #cf5555;
    --columns-10-4-color-light: #c97bff;
    --columns-10-4-color-dark: #a466cf;
    --columns-10-5-color-light: #666666;
    --columns-10-5-color-dark: #555555;
}

/******************************* Pack Builder *********************************/
* {
    box-sizing: border-box;
}

body {
    background: #132533;
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-family: Tahoma, "Trebuchet MS", Helvetica, sans-serif;
    font-size: 12px;
}

body.file-drop * {
    pointer-events: none;
}

#fileDropOverlay {
    z-index: 100001;
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
}

#fileDropOverlay>div {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    border: 6px solid #305675;
    background: #283b4a;
    font-size: 55px;
    padding: 20px 30px;
    border-radius: 20px;
    box-shadow: 0 0 5px #000;
}

body.file-drop #fileDropOverlay {
    display: block;
}

.wrapper {
    width: max(1100px, calc(var(--list-width) + 60px));
    min-height: 100vh;
    background: #283b4a;
    margin: 0 auto;
    padding: 20px;
    border-width: 0 6px;
    border-color: #305675;
    border-style: solid;
    box-shadow: 0px 0px 25px #000;
}

.info {
    padding: 0 0 25px 0;
    text-align: center;
}

.file {
    text-align: center;
    font-weight: 800;
}

.file,
.theme {
    background: #384f62;
    padding: 10px;
    border-radius: 15px;
    margin: 0 0 15px;
}

#input {
    width: 100%;
    cursor: pointer;
    padding: 5px;
}

#pickers > table {
    width:100%;
}
#pickers label {
    padding: 0 0 0 5px;
}
#pickers td {
    vertical-align: top;
}
#metadata > div {
    display: inline-block;
    margin: 0 0 5px;
    width: 50%;
}
#metadata {
    width: 50%;
}
#columns {
    width: 50%;
}
#column-selector {
    display: table;
    width: 100%;
    margin: 0 0 10px;
}
#column-selector > div {
    display: table-cell;
    width: 25%;
    background: #0004;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}
#column-selector > div:first-child { border-radius: 15px 0 0 15px; }
#column-selector > div:last-child { border-radius: 0 15px 15px 0; }
#column-nodes > div > div {
    display: inline-block;
    margin: 0 0 5px;
    width: 50%;
}
.clr-field button {
    border-radius: 4px;
}
.clr-field input {
    background: #283b4a;
    border: 0;
    color: #fff;
    border-radius: 4px;
    width: 120px;
}
.clr-field {
    border: 3px solid #4f7493;
    border-radius: 5px;
}
input[type="text"] {
    background: #283b4a;
    border: 3px solid #4f7493;
    color: #fff;
    border-radius: 5px;
    width: 126px;
  }
/******************* Pack List *********************/
#pack_list {
    background: #2c2c2c;
    padding: 20px;
    margin: 0 auto;
    width: var(--list-width);
}

#pack_list>table {
    width: 100%;
    font-size: var(--font-size);
    font-weight: bold;
}

#pack_list span {
    background-clip: text;
    color: transparent;
}

#pack_list .item {
    position: relative;
}

#pack_list .item::before {
    content: "";
    background-image: var(--banner);
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: var(--banner-bg-opacity);
    z-index: 0;
    background-position-y: center;
}

#pack_list .item td {
    z-index: 1000;
    position: relative;
}

#pack_list .banner {
    width: var(--banner-max-width);
    min-height: calc(var(--banner-max-height) + 2px);
    padding: 0 5px 0 0;
    text-align: center;
}

#pack_list .banner img {
    max-height: var(--banner-max-height);
}

/** Song Name **/
.name span {
    background: linear-gradient(0deg, var(--name-color-dark) var(--gradient-low), var(--name-color-light) var(--gradient-high));
}

/** Artist **/
.artist {
    max-width: var(--artist-max-width);
}
.artist span {
    background: linear-gradient(0deg, var(--artist-name-color-dark) var(--gradient-low), var(--artist-name-color-light) var(--gradient-high));
}

/** Step-Author / Credit **/
.credit {
    position: relative;
    max-width: var(--mapper-max-width);
}

.credit::before {
    content: "";
    background-image: var(--cdtitle);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 0;
    opacity: var(--cdtitle-bg-opacity);
}

.credit span {
    position: relative;
    background: linear-gradient(0deg, var(--mapper-name-color-dark) var(--gradient-low), var(--mapper-name-color-light) var(--gradient-high));
    z-index: 1000;
}

/** Difficulty List */
.difficulties {
    width: var(--diff-max-width);
    padding: 0 0 0 20px
}

.difficulties .list {
    width: 100%;
}

.difficulties .list td {
    text-align: center;
    width: 13.33333333333333%;
}
.difficulties .list td.cc {
    min-width: 30px;
}

.columns-single {
    display: flex;
    width: 100%;
    text-align: center;
}
.columns-single > div {
    flex-grow: 1;
}
.columns-single .cc {
    width: 30px;
    flex-grow: 0;
}

.columns-4 .cc span { background: linear-gradient(0deg, var(--columns-4-color-dark) var(--gradient-low), var(--columns-4-color-light) var(--gradient-high)); }
.columns-4 .d0 span { background: linear-gradient(0deg, var(--columns-4-0-color-dark) var(--gradient-low), var(--columns-4-0-color-light) var(--gradient-high)); }
.columns-4 .d1 span { background: linear-gradient(0deg, var(--columns-4-1-color-dark) var(--gradient-low), var(--columns-4-1-color-light) var(--gradient-high)); }
.columns-4 .d2 span { background: linear-gradient(0deg, var(--columns-4-2-color-dark) var(--gradient-low), var(--columns-4-2-color-light) var(--gradient-high)); }
.columns-4 .d3 span { background: linear-gradient(0deg, var(--columns-4-3-color-dark) var(--gradient-low), var(--columns-4-3-color-light) var(--gradient-high)); }
.columns-4 .d4 span { background: linear-gradient(0deg, var(--columns-4-4-color-dark) var(--gradient-low), var(--columns-4-4-color-light) var(--gradient-high)); }
.columns-4 .d5 span { background: linear-gradient(0deg, var(--columns-4-5-color-dark) var(--gradient-low), var(--columns-4-5-color-light) var(--gradient-high)); }

.columns-6 .cc span { background: linear-gradient(0deg, var(--columns-6-color-dark) var(--gradient-low), var(--columns-6-color-light) var(--gradient-high)); }
.columns-6 .d0 span { background: linear-gradient(0deg, var(--columns-6-0-color-dark) var(--gradient-low), var(--columns-6-0-color-light) var(--gradient-high)); }
.columns-6 .d1 span { background: linear-gradient(0deg, var(--columns-6-1-color-dark) var(--gradient-low), var(--columns-6-1-color-light) var(--gradient-high)); }
.columns-6 .d2 span { background: linear-gradient(0deg, var(--columns-6-2-color-dark) var(--gradient-low), var(--columns-6-2-color-light) var(--gradient-high)); }
.columns-6 .d3 span { background: linear-gradient(0deg, var(--columns-6-3-color-dark) var(--gradient-low), var(--columns-6-3-color-light) var(--gradient-high)); }
.columns-6 .d4 span { background: linear-gradient(0deg, var(--columns-6-4-color-dark) var(--gradient-low), var(--columns-6-4-color-light) var(--gradient-high)); }
.columns-6 .d5 span { background: linear-gradient(0deg, var(--columns-6-5-color-dark) var(--gradient-low), var(--columns-6-5-color-light) var(--gradient-high)); }

.columns-8 .cc span { background: linear-gradient(0deg, var(--columns-8-color-dark) var(--gradient-low), var(--columns-8-color-light) var(--gradient-high)); }
.columns-8 .d0 span { background: linear-gradient(0deg, var(--columns-8-0-color-dark) var(--gradient-low), var(--columns-8-0-color-light) var(--gradient-high)); }
.columns-8 .d1 span { background: linear-gradient(0deg, var(--columns-8-1-color-dark) var(--gradient-low), var(--columns-8-1-color-light) var(--gradient-high)); }
.columns-8 .d2 span { background: linear-gradient(0deg, var(--columns-8-2-color-dark) var(--gradient-low), var(--columns-8-2-color-light) var(--gradient-high)); }
.columns-8 .d3 span { background: linear-gradient(0deg, var(--columns-8-3-color-dark) var(--gradient-low), var(--columns-8-3-color-light) var(--gradient-high)); }
.columns-8 .d4 span { background: linear-gradient(0deg, var(--columns-8-4-color-dark) var(--gradient-low), var(--columns-8-4-color-light) var(--gradient-high)); }
.columns-8 .d5 span { background: linear-gradient(0deg, var(--columns-8-5-color-dark) var(--gradient-low), var(--columns-8-5-color-light) var(--gradient-high)); }

.columns-10 .cc span { background: linear-gradient(0deg, var(--columns-10-color-dark) var(--gradient-low), var(--columns-10-color-light) var(--gradient-high)); }
.columns-10 .d0 span { background: linear-gradient(0deg, var(--columns-10-0-color-dark) var(--gradient-low), var(--columns-10-0-color-light) var(--gradient-high)); }
.columns-10 .d1 span { background: linear-gradient(0deg, var(--columns-10-1-color-dark) var(--gradient-low), var(--columns-10-1-color-light) var(--gradient-high)); }
.columns-10 .d2 span { background: linear-gradient(0deg, var(--columns-10-2-color-dark) var(--gradient-low), var(--columns-10-2-color-light) var(--gradient-high)); }
.columns-10 .d3 span { background: linear-gradient(0deg, var(--columns-10-3-color-dark) var(--gradient-low), var(--columns-10-3-color-light) var(--gradient-high)); }
.columns-10 .d4 span { background: linear-gradient(0deg, var(--columns-10-4-color-dark) var(--gradient-low), var(--columns-10-4-color-light) var(--gradient-high)); }
.columns-10 .d5 span { background: linear-gradient(0deg, var(--columns-10-5-color-dark) var(--gradient-low), var(--columns-10-5-color-light) var(--gradient-high)); }