@keyframes blinker {
    50% {
        color: #ffbf26;
    }
}

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

body {
    margin: 0;
    padding: 0;
    text-align: center;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #3f3f3f;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;

    -ms-overflow-style: none;
    scrollbar-width: none;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#ui {
    pointer-events: none;
    overflow: hidden;
}

body::-webkit-scrollbar {
    display: none;
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

p {
    margin: 0;
}

/* Remove if update Bootstrap. */
.w-auto {
    width: auto !important;
}

.game-menu-button {
    position: fixed;
    top: 0;
    right: 4px;
    padding: 5px;
    z-index: 1000;
}

.app {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    overflow: hidden;
    padding-bottom: 65px;

    -ms-overflow-style: none;
    scrollbar-width: none;
}
.app-background {
    background-color: rgba(0,0,0, 0.5);
}

.app::-webkit-scrollbar {
    display: none;
}

.app-btn {
    width: 100%;
    font-size: 32px;
    color: #faf1eb;
    background-color: black;
    display: inline-block;
    border: none;
    margin: 6px auto;
    box-shadow: 3px 3px 3px #000000;
    text-decoration: none !important;
}

.app-btn:disabled {
    color: #bdbbbb !important;
}

.app-btn:hover {
    color: white;
    text-decoration: none !important;
}

.app-btn-primary {
    background: rgb(107, 107, 107);
    background: linear-gradient(0deg, rgb(75, 75, 75) 0%, rgb(107, 107, 107) 40%, rgb(162, 162, 162) 100%);
    padding: 16px;
}
.app-btn-primary:hover {
    background: #c73421;
}

.app-btn-secondary {
    background: rgb(107, 107, 107);
    background: linear-gradient(0deg, rgb(75, 75, 75) 0%, rgb(107, 107, 107) 40%, rgb(162, 162, 162) 100%);
    padding: 2px;
}
.app-btn-secondary:hover {
    background: #c73421;
}

.selectable {
    -webkit-user-select: text !important;
    -khtml-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

.app-content-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    top: 25px;
    color: white;
}

.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background-color: rgba(0, 0, 0, 0.6);
}

.loading-overlay-text {
    position: relative;
    color: white;
    top: 30%;
    width: 100%;
    text-align: center;
}

#loading{
    position: fixed !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    top: -250px !important;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 !important;
    padding: 1rem;
}
#loading > *{
    margin: 1rem;
}
#loading br{
    display: none;
}

.app-content {
    height: 100%;
}

.app-content-inner {
    padding-top: 12px;
    height: 90%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    overflow-y: auto;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
}
.app-content-inner::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.app-input {
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #101010;
    color: white;
    background-color: rgba(13, 13, 13, 0.75);
    border-radius: 5px;
}

.app-input:disabled {
    color: #777777;
}

/* Sidebar */

#sidebar {
    background: #4e58c5;
    position: absolute;
    top: 0;
    left: 0;
    width:1000px;
    height: 100%;
    border-right: 1px solid black;
    font-size: 120px;
}

#sidebar .app-btn-primary, #sidebar .app-btn-secondary {
    background: linear-gradient(rgb(78, 88, 197), rgb(43, 48, 114));
    box-shadow: 0 0 3px #000;
    font-size: 0.9em !important;
    height: 170px;
    padding: 0px;
    transition-duration: 0.125s;
}

#sidebar .app-btn-primary:hover, #sidebar .app-btn-secondary:hover {
    background: linear-gradient(rgb(162, 163, 233), rgb(114, 115, 184));
    box-shadow: 0 0 5px #000;
    cursor: pointer;
    font-size: 1.6em;
}

.btn-small:focus {
    border-color: white;
    color: white;
    outline: none;
}

/* Chrome, Safari, Edge, Opera */
input.btn-small::-webkit-outer-spin-button,
input.btn-small::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number].btn-small {
    -moz-appearance: textfield;
}

#sidebar-footer a.github-button {
    line-height: 44px;
}

#sidebar-footer a.discord-button svg {
    width: 100%;
    height: 100%;
    padding: 5px;
}

#sidebar-footer a.discord-button svg path {
    fill: #777;
}

#sidebar-footer a.discord-button:hover svg path {
    fill: #fff;
}

#sidebar-footer a:hover, #sidebar-footer button:hover, .close-statistics-button:hover, .footer-button:hover, .btn-small:hover, .title-button:hover .btn-small {
    border: 2px solid white;
    color: white;
}

#sidebar-header {
    height: 70px;
    background: linear-gradient(rgb(24, 24, 24), rgb(12, 12, 12));
    border-bottom: 1px solid black;
    padding: 7px;
}

/* Inner Contents of Sidebar */

#sidebar-body {
    background: linear-gradient(rgb(78, 88, 197), rgb(0, 143, 255));
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: left;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#sidebar-body::-webkit-scrollbar {
    display: none;
}

#sidebar-body .menu-body {
    position: absolute;
    top: 0px;
    bottom: 70px;
    left: 0;
    right: 0;
    overflow: auto;
}

#sidebar-body .menu-footer-buttons {
    height: 50px;
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
}

#sidebar-body .menu-footer-buttons > .app-btn.app-btn-primary {
    margin: 0;
}

#sidebar-body .menu-page-title {
    height: 46px;
    line-height: 36px;
    background: #121212;
    padding: 4px 0;
    font-size: 1.45em;
    border-bottom: 1px solid black;
    text-align: center;
}

#sidebar-body .menu-page {
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Page-specific Stylings */

#construction-page {
    position: absolute;
    top: 12px;
    bottom: 0;
    left: 12px;
    right: 12px;
}

#construction-page > .menu-page {
    background: black;
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    border: 1px solid black;
}

#construction-page > .menu-page.modes-disabled {
    top: 52px;
}

#construction-page .construction-modes-wrapper {
    width: 100%;
    height: 45px;
    background: #090909;
    position: relative;
    border: 1px solid #090909;
    margin: 0 0 5px 0;
}

#construction-page .construction-mode-button {
    background: #141414;
    font-size: 1.4em;
    color: white;
    border: 1px solid #090909;
    cursor: pointer;
}

#construction-page .construction-mode-button.select-mode-button {
    font-size: 1.1em;
}

#construction-page .construction-mode-button.mode-selected {
    background: white;
    color: black;
}

/*
.colonial-faction #construction-page .construction-mode-button.mode-selected {
    background: #619b12;
}

.warden-faction #construction-page .construction-mode-button.mode-selected {
    background: #1a92ff;
}
*/

#construction-page .construction-mode-button:hover {
    border-color: white;
}

#construction-page .construction-mode-button:not(.mode-selected):hover {
    background: #222;
}

#construction-page .construction-filter-wrapper {
    width: 100%;
    height: 45px;
    background: #090909;
    position: relative;
    border: 2px solid #090909;
}

#construction-page .construction-settings-button, #construction-page .construction-tech-button {
    width: 69px;
    height: 100%;
    background: #141414;
    color: white;
    border: 1px solid transparent;
    padding: 0;
    position: absolute;
    top: 0;
    left: 42px;
    cursor: pointer;
}

#construction-page .construction-settings-button {
    width: 40px;
    left: 0;
    line-height: 40px;
    font-size: 1.4em;
}

#construction-page .construction-settings-button:hover, #construction-page .construction-tech-button:hover {
    background: #222;
    border-color: white;
}

#construction-page .construction-category-wrapper {
    height: 100%;
    position: absolute;
    top: 0;
    left: 112px;
    right: 0;
}

#construction-page .construction-category {
    background: #141414;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: 1.1em;
    padding: 0 10px;
    cursor: pointer;
}

#construction-page .construction-category:hover, #construction-page .construction-category:focus {
    border-color: white;
}

#construction-page .construction-item-category {
    background: linear-gradient(rgb(233, 109, 52), rgb(132, 59, 24));
    background: linear-gradient(to right, #242424, #0000);
    background: linear-gradient(to right, rgb(233, 109, 52), #0000);
    background: #0f0f0f;
    padding: 4px 8px;
    border: 1px solid black;
    cursor: pointer;
    clear: both;
}

#construction-page .construction-item-category:hover {
    background: #1b1b1b;
}

#about-page > .about-section {
    margin-bottom: 20px;
}

#about-page > .about-section > div.about-section-header {
    background: linear-gradient(rgb(233, 109, 52), rgb(132, 59, 24));
    border-bottom: 1px solid black;
    font-size: 1.3em;
    margin: 0;
    padding: 6px 12px;
}

#about-page > .about-section > p, #about-page > .about-section > div {
    background: #1c1c1c;
    padding: 8px 14px;
}

#about-page > .about-section .controls-section-body {
    font-size: 0.96em;
}

#about-page > .about-section hr {
    margin-top: 8px;
    margin-bottom: 8px;
    border-top: 1px solid #2d2d2d;
}

#about-page > .about-section a {
    color: #ff864e;
    margin: 0 2px;
}

#about-page > .about-section a:hover {
    color: white;
}

#about-page > .about-section > .contributors-list a {
    white-space: nowrap;
}

#about-page > .about-section .left-mouse-button,
#about-page > .about-section .right-mouse-button,
#about-page > .about-section .middle-mouse-button {
    display: inline-block;
    min-width: 18px;
    min-height: 25px;
    position: relative;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    vertical-align: middle;
    margin-bottom: 5px;
}

#about-page > .about-section .left-mouse-button::before,
#about-page > .about-section .right-mouse-button::before ,
#about-page > .about-section .middle-mouse-button::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid black;
    top: 10px;
}

#about-page > .about-section .left-mouse-button::after,
#about-page > .about-section .right-mouse-button::after,
#about-page > .about-section .middle-mouse-button::after {
    content: '';
    display: block;
    background: #ff8f00;
    width: 50%;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

#about-page > .about-section .right-mouse-button::after {
    left: 50%;
}

#about-page > .about-section .middle-mouse-button::after {
    width: 4px;
    border-radius: 6px;
    position: initial;
    margin: 0 auto;
}

#about-page > .about-section .keyboard-key {
    display: inline-block;
    min-width: 25px;
    min-height: 25px;
    background: white;
    border-radius: 3px;
    color: black;
    padding: 0 4px;
    text-align: center;
    border: 2px solid #ccc;
    vertical-align: middle;
    margin-bottom: 5px;
}

.build-icon {
    cursor: pointer;
    width: 25%;
    padding-top: 25%;
    border: 1px solid black;
    background-color: #282828;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}

.build-icon:hover {
    background-color: #3b3b3b;
}

.resource-col {
    display: inline-block;
    width: 45px;
    height: 45px;
    position: relative;
    margin-right: 5px;
}

.resource-row {
    background: linear-gradient(to right, #242424, #0000);
    overflow: auto;
    margin-bottom: 4px;
    text-align: left;
}

.resource-icon {
    width: 48px;
    height: 48px;
    background-color: #0B0B0B;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid black;
    float: left;
    margin: 0;
}

.resource-col > .resource-icon {
    width: 100%;
    height: 100%;
}

.resource-col > .resource-amount {
    position: absolute;
    bottom: 0;
    right: 0;
}

.resource-row > .resource-icon {
    margin-right: 8px;
}

.resource-row > .resource-name {
    line-height: 26px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.resource-row > .resource-amount, .resource-col > .resource-amount {
    color: #d50101;
    line-height: 16px;
    pointer-events: none;
}

.resource-col.power-production .resource-icon {
    font-size: 1.7em;
    text-align: center;
    line-height: 30px;
}

.upgrade-list {
    text-align: center;
}

.upgrade-list > .settings-title {
    margin-bottom: 8px;
}

.upgrade-list > .upgrade-button {
    display: inline-block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
}

.upgrade-list > .upgrade-button > .resource-icon {
    width: 52px;
    height: 52px;
    background-color: #151515;
    border-color: #0d0d0d;
    float: none;
}

.upgrade-list > .upgrade-button:not(.selected-upgrade) > .resource-icon:hover {
    background-color: black;
    border-color: white;
}

.upgrade-list > .upgrade-button.selected-upgrade > .resource-icon {
    background-color: #2c1407;
    border-color: #ff8f00;
}

.production-stats {
    background: #0d0d0d;
    padding: 0 8px 6px 8px;
    position: relative;
    overflow: auto;
}

.production-stats > .select-production {
    text-align: center;
}

.production-stats-resources span {
    font-size: 0.85em;
    color: #a2a2a2;
}

.production-list {
    padding: 12px;
}

.production-list > .select-production {
    background: #0d0d0d;
    border: 2px solid black;
    margin-bottom: 12px;
    padding: 0 8px 6px 8px;
    position: relative;
    cursor: pointer;
    text-align: center;
    overflow: auto;
}

.production-list > .select-production:last-child {
    margin-bottom: 0;
}

.production-list > .select-production:hover:not(.selected-production) {
    background: #131313;
    border-color: white;
}

.select-production > .production-requirements {
    color: yellow;
}

.production-list > .select-production > .production-enabled {
    color: black;
    position: absolute;
    bottom: 0;
    right: 8px;
}

.production-list > .select-production.selected-production > .production-enabled {
    color: #03b003;
}

.production-list > .select-production h6 {
    margin: 0;
}

.production-list > .select-production.selected-production {
    border-color: #03b003;
}

.delete-button:hover {
    background: linear-gradient(rgb(255, 0, 0), rgb(168, 0, 0)) !important;
}

.facility-banner {
    position: fixed;
    bottom: 50px;
    left: 365px;
    font-size: 1.8em;
    text-shadow: 0 2px 3px #2d2d2d;
    pointer-events: none;
}

.close-statistics-button, .footer-button, .btn-small {
    width: 30px;
    height: 30px;
    line-height: 25px;
    margin: 6px 6px 6px 0;
    font-size: 1.15em;
    float: right;
}

.close-statistics-button {
    margin: 3px;
}

#confirmation-dialog {
    width: 400px;
    height: 200px;
    background-color: #1a1a1a;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

#confirmation-dialog .confirmation-header {
    background: linear-gradient(rgb(233, 109, 52), rgb(132, 59, 24));
    padding: 4px 4px 4px 9px;
    position: relative;
    text-align: left;
}

#confirmation-dialog .confirmation-header > h3 {
    display: inline-block;
    margin: 0;
}

#confirmation-dialog .confirmation-header > button {
    margin: 2px;
}

#confirmation-dialog .confirmation-body {
    padding: 20px;
}

#confirmation-dialog .confirmation-body > button {
    width: 100%;
    background: linear-gradient(rgb(255, 0, 0), rgb(168, 0, 0));
    margin-top: 14px;
    padding: 4px 4px 4px 9px;
    position: relative;
    font-size: 2em;
    color: white;
    border: 2px solid black;
    box-shadow: 0 0 3px #000;
    cursor: pointer;
}

#confirmation-dialog .confirmation-body > button:hover {
    border: 2px solid white;
}

.statistics-panel {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 300px;
    padding: 0;
    background-color: #1a1a1a;
}

.statistics-panel-header {
    background: linear-gradient(rgb(233, 109, 52), rgb(132, 59, 24));
    padding: 4px 4px 4px 9px;
    position: relative;
}

.statistics-panel-header h3 {
    display: inline-block;
    margin: 0;
}

.statistics-panel-header button {
    background: #1a1a1a;
    float: right;
    margin: 2px;
}

.statistics-panel-body {
    min-height: 400px;
    max-height: 890px;
    padding: 12px;
    overflow: auto;
}

.statistics-panel-fac-output .resource-amount {
    color: #03b003;
}

#hover-building-info {
    width: 600px;
    background: #1a1a1a;
    border: 2px solid black;
    box-shadow: 0 0 10px black;
    position: fixed;
    top: 15px;
    left: 365px;
    text-align: left;
    z-index: 100;
    pointer-events: none;
}

#hover-building-info > .building-info-name {
    background: linear-gradient(rgb(233, 109, 52), rgb(132, 59, 24));
    overflow: auto;
}

#hover-building-info > .building-info-name > img {
    width: 36px;
    height: 36px;
    background-color: #151515;
    float: left;
    margin: 2px;
    padding: 1px;
    border: 1px solid black;
}

#hover-building-info > .building-info-name > h4 {
    line-height: 40px;
    margin: 0 0 0 48px;
    padding-right: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#hover-building-info > .building-info-upgrade {
    background: #0b0b0b;
    padding: 2px 7px;
}

#hover-building-info > .building-info-body {
    padding: 10px;
}

#hover-building-info > .building-info-body > p.building-info-description, #hover-building-info > .building-info-body > p.building-tech-description {
    margin-bottom: 10px;
    padding: 0;
}

#hover-building-info > .building-info-body > p.building-tech-description {
    font-size: 0.95em;
    color: #0ff;
}

#hover-building-info > .building-info-body > p.building-tech-description span {
    color: #00e7ff;
}

#hover-building-info > .building-info-body > .building-info-production {
    background: #0d0d0d;
    border: 1px solid black;
    margin-bottom: 10px;
    padding: 10px 15px;
    overflow: auto;
}

#hover-building-info .produced-resource-row {
    width: 50%;
    float: left;
}

.produced-resource-row .production-recipe {
    display: inline-block;
    overflow: hidden;
}

.produced-resource-row .production-recipe * {
    vertical-align: middle;
}

.produced-resource-row .production-recipe > div {
    margin-right: 5px;
}

.produced-resource-row .production-recipe > div:last-child {
    margin-right: 0;
}

.produced-resource-row .production-recipe .building-icon img {
    width: 100%;
    height: 100%;
}

.produced-resource-row .building-icon, .produced-resource-row .produced-resource-input, .produced-resource-row .produced-resource-output, .produced-resource-row .power-production {
    width: 40px;
    height: 40px;
    float: left;
}

.produced-resource-row .produced-resource-output .resource-amount {
    color: #03b003;
}

.produced-resource-row .production-pointer {
    width: 20px;
    font-size: 18px;
    line-height: 40px;
    float: left;
    text-align: center;
}

.produced-resource-row .produced-resource {
    color: #45d745;
    font-size: 0.95em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.produced-resource-row .produced-resource > span:not(:first-child)::before {
    content: ', ';
}

.produced-resource-row .produced-resource::before {
    content: '';
    display: inline-block;
    background: linear-gradient(rgb(233, 109, 52), rgb(132, 59, 24));
    background: #45d745;
    width: 10px;
    height: 10px;
    width: 8px;
    height: 8px;
    margin-right: 6px;
}

.produced-resource-row .power-production .resource-amount {
    color: #45d745;
}

#hover-building-info .produced-resource-row .produced-resource {
    padding-right: 10px;
}

#hover-building-info > .building-info-body > .building-cost > div:last-child {
    margin-bottom: 0;
}

#hover-building-info > .building-info-body > .power-cost, #hover-building-info > .building-info-body > .power-produced {
    color: #d50101;
    font-size: 1.2em;
    position: absolute;
    bottom: 0;
    right: 5px;
    z-index: 100;
}

#hover-building-info > .building-info-body > .power-produced {
    color: #45d745;
}

.footer {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1));
    color: white;
    height: 44px;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 350px;
    text-align: left;
}

.footer .checkbox-button {
    display: inline-block;
    cursor: pointer;
    margin: 8px 55px 0 8px;
}

.footer .checkbox-button input[type="checkbox"] {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    width: 25px;
    height: 25px;
    border: 2px solid white;
    padding: 3px;
    vertical-align: middle;
}

.footer .checkbox-button input[type="checkbox"]::before {
    content: "";
    display: block;
    height: 100%;
}

.footer .checkbox-button input[type="checkbox"]:checked::before {
    background: linear-gradient(rgb(233, 109, 52), rgb(132, 59, 24));
}

.title-button {
    background: none;
    border: none;
    padding: 5px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.title-button {
    outline: none !important;
}

.title-button .inner-button {
    width: 36px;
    height: 36px;
    line-height: 32px;
    background: #1a1a1a;
    border: 2px solid #202020;
    font-size: 1.2em;
    color: #777;
}

.title-button:hover .inner-button {
    color: white;
    border-color: white;
}

.title-button.trash-button {
    left: 42px;
}

.title-button.clone-button, .title-button.lock-button {
    left: auto;
    right: 42px;
}

.title-button.lock-button {
    right: 0;
}

.trash-button:hover .inner-button, .title-button.lock-button .locked {
    color: #dd3030;
}

.title-button.lock-button .partially-locked {
    color: #ff8f00;
}

.trash-button:hover .inner-button {
    border-color: #dd3030;
}

.settings-option-wrapper .settings-buttons {
    padding: 5px;
    text-align: center;
}

.settings-option-wrapper .settings-button {
    display: inline-block;
    width: 45px;
    height: 45px;
    background-color: #1a1a1a;
    border: 2px solid #131313;
    color: white;
    cursor: pointer;
    margin: 2px;
    font-size: 1.4em;
}

.settings-option-wrapper .settings-button:hover {
    border-color: white;
}

.settings-option-wrapper .settings-button.trash:hover, .settings-option-wrapper .settings-button.lock .locked {
    color: #dd3030;
}

.settings-option-wrapper .settings-button.trash:hover {
    border-color: #dd3030;
}

.settings-option-wrapper {
    background: #222;
    border: 1px solid #131313;
    border-radius: 5px;
    line-height: 30px;
    margin-bottom: 18px;
    overflow: hidden;
}

.settings-option-wrapper .settings-option {
    background: #0c0c0c;
    position: relative;
    border-bottom: 1px solid #1c1c1c;
    padding: 0 3px;
    overflow: auto;
}

.settings-option-wrapper .settings-option .btn-small {
    margin: 6px 3px;
    float: left;
}

.btn-small.btn-active {
    color: #ff8034;
}

.settings-option-wrapper .settings-option .btn-right {
    float: right;
}

.menu-body .settings-option-wrapper:last-child {
    margin-bottom: 0;
}

.settings-option-wrapper .settings-title {
    background: #151515;
    background: linear-gradient(#1a1a1a, #151515);
    position: relative;
    font-size: 1.2em;
    padding: 5px 8px;
    text-align: center;
}

label.settings-option-wrapper, .settings-option-wrapper label, .settings-option-wrapper .settings-option-row {
    display: block;
    padding: 6px 6px 6px 12px;
    overflow: auto;
}

.settings-option-wrapper label, .settings-option-wrapper .settings-option-row {
    border-bottom: 1px solid #131313;
    margin: 0;
}

.settings-option-wrapper label:last-child, .settings-option-wrapper .settings-option-row:last-child {
    border-bottom: none;
}

label.settings-option-wrapper select, .settings-option-wrapper label select,
label.settings-option-wrapper input, .settings-option-wrapper label input {
    background: #131313;
    height: 30px;
    border-radius: 5px;
    float: right;
}

label.settings-option-wrapper input:not(.slider), .settings-option-wrapper label input:not(.slider) {
    width: 100px;
}

label.settings-option-wrapper input[type="checkbox"], .settings-option-wrapper label input[type="checkbox"] {
    width: 30px;
}

label.settings-option-wrapper select:focus, .settings-option-wrapper label select:focus,
label.settings-option-wrapper input:focus, .settings-option-wrapper label input:focus {
    outline: 2px solid white;
}

.settings-option-wrapper .text-button-wrapper {
    padding: 6px 10px;
    text-align: center;
}

.settings-option-wrapper button.text-button {
    width: 100%;
    height: 45px;
    background: linear-gradient(rgb(91, 91, 91), rgb(62, 62, 62));
    border: none;
    box-shadow: 0 0 3px #000;
    font-size: 1.3em;
    color: white;
    margin: 5px 0;
    padding: 0 15px;
    transition-duration: 0.125s;
    cursor: pointer;
}

.settings-option-wrapper button.text-button:hover {
    background: linear-gradient(rgb(233, 109, 52), rgb(132, 59, 24));
    font-size: 1.35em;
    box-shadow: 0 0 5px #000;
    text-decoration: none;
}

.settings-option-wrapper textarea {
    display: block;
    width: 100%;
    min-height: 150px;
    max-height: 400px;
    line-height: 20px;
    background: #131313;
    color: white;
    padding: 6px 10px;
    border: none;
}

.settings-option-wrapper textarea:focus {
    outline: none;
}

#save-load-page .facility-name-input {
    position: relative;
    padding: 6px;
}

#save-load-page .edit-icon {
    position: absolute;
    top: 12px;
    font-size: 1.5em;
    right: 14px;
    color: #555;
    pointer-events: none;
}

#save-load-page .facility-name-input input {
    width: 100%;
    height: 36px;
    color: white;
    padding: 6px;
    text-align: center;
}

#save-load-page .load-button, #save-load-page .save-button {
    width: 45%;
    height: 42px;
    background: linear-gradient(rgb(91, 91, 91), rgb(62, 62, 62));
    font-size: 1.3em;
    margin: 10px 3px;
}

#save-load-page .load-button:hover, #save-load-page .save-button:hover {
    font-size: 1.35em;
}

#save-load-page .select-preset-wrapper {
    display: inline-block;
    height: 40px;
    margin: 10px 0;
    vertical-align: middle;
}

#save-load-page .select-preset-wrapper select {
    width: 100%;
    height: 100%;
    background-color: #131313;
    color: white;
    padding: 0 10px;
    border: 1px solid #101010;
    vertical-align: middle;
}

#save-load-page .select-preset-wrapper select:focus {
    border-color: white;
}

#save-load-page .preset-load-button {
    width: 80px;
    height: 40px;
    background: linear-gradient(rgb(91, 91, 91), rgb(62, 62, 62));
    color: white;
    margin: 10px 0;
    padding: 0 10px;
    text-align: center;
    border: 1px solid #101010;
    cursor: pointer;
    transition-duration: 0.125s;
    vertical-align: middle;
}

#save-load-page .preset-load-button:hover {
    background: linear-gradient(rgb(233, 109, 52), rgb(132, 59, 24));
}