::-webkit-input-placeholder {
    color: var(--text-muted) !important
}

:focus::-webkit-input-placeholder {
    color: var(--text-muted) !important
}

:-moz-placeholder {
    color: var(--text-muted) !important
}

:focus:-moz-placeholder {
    color: var(--text-muted) !important
}

::-moz-placeholder {
    color: var(--text-muted) !important
}

:focus::-moz-placeholder {
    color: var(--text-muted) !important
}

:-ms-input-placeholder {
    color: var(--text-muted) !important
}

:focus:-ms-input-placeholder {
    color: var(--text-muted) !important
}

:root {
    --transparency-dark-05: rgba(0, 0, 0, .05);
    --transparency-dark-10: rgba(0, 0, 0, .10);
    --transparency-dark-15: rgba(0, 0, 0, .15);
    --transparency-dark-25: rgba(0, 0, 0, .25);
    --transparency-dark-35: rgba(0, 0, 0, .35);
    --transparency-dark-40: rgba(0, 0, 0, .40);
    --transparency-dark-45: rgba(0, 0, 0, .45);
    --transparency-dark-50: rgba(0, 0, 0, .50);
    --transparency-dark-55: rgba(0, 0, 0, .55);
    --transparency-dark-60: rgba(0, 0, 0, .60);
    --transparency-dark-65: rgba(0, 0, 0, .65);
    --transparency-dark-70: rgba(0, 0, 0, .70);
    --transparency-dark-75: rgba(0, 0, 0, .75);
    --transparency-dark-80: rgba(0, 0, 0, .80);
    --transparency-dark-85: rgba(0, 0, 0, .85);
    --transparency-dark-90: rgba(0, 0, 0, .90);
    --transparency-light-05: rgba(255, 255, 255, .05);
    --transparency-light-10: rgba(255, 255, 255, .10);
    --transparency-light-15: rgba(255, 255, 255, .15);
    --transparency-light-20: rgba(255, 255, 255, .20);
    --transparency-light-25: rgba(255, 255, 255, .25);
    --transparency-light-30: rgba(255, 255, 255, .30);
    --transparency-light-35: rgba(255, 255, 255, .35);
    --transparency-light-45: rgba(255, 255, 255, .45);
    --transparency-light-50: rgba(255, 255, 255, .50);
    --transparency-light-55: rgba(255, 255, 255, .55);
    --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
    --modal-bg-color: linear-gradient(135deg, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
    --modal-header-color: linear-gradient(135deg, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
    --modal-footer-color: linear-gradient(135deg, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
    --drop-down-menu-bg: #2d2d2d;
    --button-color: #7a7a7a;
    --button-color-hover: #9b9b9b;
    --button-text: #eee;
    --button-text-hover: #FFF;
    --accent-color: 170, 170, 170;
    --accent-color-hover: rgba(255, 255, 255, 0.45);
    --link-color: #7a7a7a;
    --link-color-hover: #fff;
    --label-text-color: black;
    --text: #ddd;
    --text-hover: #fff;
    --text-muted: #777;
    --arr-queue-color: #6b5;
    --plex-poster-unwatched: #e5a00d;
    --petio-spinner: invert(35%) sepia(12%) saturate(4%) hue-rotate(2deg) brightness(104%) contrast(86%);
    --gitea-color-primary-dark-4: 255, 255, 255;
    --overseerr-gradient: radial-gradient(circle, rgba(58, 58, 58, .95), rgba(45, 45, 45, .95), rgba(32, 32, 32, .95), rgba(20, 20, 20, .95), rgb(0, 0, 0, .95)) center center/cover no-repeat fixed
}

.message {
    color: var(--text-hover)
}

#login {
    min-height: 100%;
    height: auto;
    background: var(--main-bg-color);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: center center, center center;
    background-size: auto, cover;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover
}

body {
    color: var(--text);
    font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif
}

h1,
h2,
h3,
h4,
h5,
h6,
th {
    color: var(--text-hover) !important
}

 #login input[type=password],
 #login input[type=text] {
    color: var(--text-hover) !important;
    background: var(--transparency-dark-15) !important;
    border: none
}

#password input[type=password],
#password input[type=text] {
    color: var(--text-hover) !important;
    background: var(--transparency-dark-15) !important;
    border: none

}


#loading {
    background: var(--main-bg-color);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: center center, center center;
    background-size: auto, cover;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover
}

#loading .spinner * {
    background-color: #fff !important
}

html {
    min-height: 100%;
    background: var(--main-bg-color);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: center center, center center;
    background-size: auto, cover;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover
}

body {
    background: var(--main-bg-color);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: center center, center center;
    background-size: auto, cover;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover
}

@media(max-width:736px) {

    nav,
    nav.active {
        background: var(--modal-bg-color) !important
    }

    #dropdown.active {
        background: var(--drop-down-menu-bg) !important
    }
}

nav {
    background: var(--transparency-dark-45);
    height: 100%;
    top: 64px;
    width: 240px
}

.overlay:not(nav) {
    background-color: transparent
}

nav .action {
    color: var(--text);
    font-size: 13px;
    font-family: Open Sans Semibold, Helvetica Neue, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 0;
    padding-bottom: 0
}

nav .action:hover {
    background: var(--transparency-light-05);
    color: rgb(var(--accent-color))
}

nav>div {
    border-top: none
}

header {
    background: var(--transparency-dark-25);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: center center, center center;
    background-size: auto, cover;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover;
    border-bottom: transparent;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15)
}

header>div:first-child {
    height: 60px
}

body {
    padding-top: 60px
}

.shell {
    background: var(--modal-bg-color);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: center center, center center;
    background-size: auto, cover;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover;
    color: rgb(var(--accent-color))
}

.shell__prompt i {
    color: rgb(var(--accent-color))
}

.action {
    color: var(--text-hover)
}

#listing.list .item {
    background: var(--transparency-dark-15);
    color: var(--text);
    border: none
}

#listing.list .item:hover {
    background: var(--transparency-light-10);
    color: var(--text-hover);
    border: none;
    transition: .4s
}

#listing.list .item.header {
    background: var(--transparency-dark-45);
    color: var(--text-hover);
    border-bottom: none;
    right: auto
}

.material-icons,
.prompt .file-list ul li:before {
    color: rgb(var(--accent-color))
}

.action:hover {
    background-color: rgba(var(--accent-color), .1)
}

.action .counter {
    background: rgb(var(--accent-color));
    color: var(--label-text-color);
    border: 2px solid var(--label-text-color)
}

.share__box {
    background: 0 0
}

.share__box__info {
    background: var(--transparency-dark-25)
}

.share__box__download {
    background: rgb(var(--accent-color));
    color: var(--text-hover);
    border-bottom: 1px solid rgb(var(--accent-color))
}

.share__box__element {
    border-top: 1px solid rgb(255 255 255/10%)
}

svg {
    fill: rgb(var(--accent-color)) !important
}

#listing.list .item div:first-of-type i {
    color: rgb(var(--accent-color))
}

#listing .item i {
    color: rgb(var(--accent-color))
}

#listing.mosaic:hover .item:hover i:hover {
    color: var(--accent-color-hover)
}

#listing .item[aria-selected=true] {
    background-color: rgba(255, 255, 255, .2) !important;
    color: var(--text-hover) !important
}

#listing h2 {
    color: var(--text-hover)
}

#listing #multiple-selection {
    background: var(--modal-bg-color);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: center center, center center;
    background-size: auto, cover;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover
}

#breadcrumbs span a {
    color: var(--text-hover)
}

#breadcrumbs {
    border-bottom: 1px solid rgb(var(--accent-color))
}

#listing .item {
    background: var(--transparency-dark-15);
    color: var(--text);
    border: none
}

.input {
    background: var(--transparency-dark-25);
    color: var(--text-hover)
}

select>option {
    background: var(--drop-down-menu-bg)
}

#search #input {
    background: #fff;
    display: flex;
    padding: 10px
}

#search #result {
    background: var(--modal-bg-color);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: center center, center center;
    background-size: auto, cover;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover;
    color: var(--text-hover)
}

#search .boxes {
    background: var(--transparency-dark-15);
    padding: 15px
}

#search .boxes h3 {
    color: var(--text-hover)
}

#search .boxes>div>div {
    background: var(--transparency-dark-10)
}

#search .boxes>div>div:hover {
    background-color: var(--transparency-light-10)
}

#search.active #input {
    background: var(--main-bg-color);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: center center, center center;
    background-size: auto, cover;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover;
    height: 60px;
    color: #000
}

#search.active i,
#search.active input {
    color: var(--text-hover)
}

#search #result>div>:first-child {
    margin-top: 10px
}

.card {
    background: var(--transparency-dark-15)
}

.card h3 {
    color: var(--text-hover)
}

.card#share ul li a {
    color: rgb(var(--accent-color))
}

select {
    color: var(--text-hover)
}

.card#share .input-group * {
    border: none;
    background: 0 0
}

.card#share .input-group select>option {
    background-color: var(--drop-down-menu-bg)
}

button,
input,
select,
textarea {
    color: var(--text-hover)
}

.collapsible>label * {
    color: var(--text-hover)
}

.breadcrumbs,
.breadcrumbs span,
.breadcrumbs span a,
.link,
a {
    color: var(--link-color)
}

.breadcrumbs span a:hover,
.link:hover,
a:hover {
    color: var(--link-color-hover)
}

table th {
    color: var(--text-hover)
}

.card.floating {
    background: var(--modal-bg-color);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: center center, center center;
    background-size: auto, cover;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover
}

#search #input {
    background: var(--transparency-light-10)
}

#listing.mosaic .item {
    box-shadow: none !important
}

#listing.mosaic .item:hover {
    box-shadow: none !important;
    background: var(--transparency-light-10)
}

.dashboard p label {
    color: var(--text-hover)
}

.dashboard #nav li.active {
    border-color: rgb(var(--accent-color))
}

.dashboard #nav ul li.active {
    border-color: rgb(var(--accent-color));
    color: rgb(var(--accent-color))
}

.dashboard #nav ul li.active:before {
    background: rgb(var(--accent-color));
    opacity: .08
}

.dashboard #nav ul li:hover {
    background: rgb(var(--accent-color), .15);
    color: rgb(var(--accent-color))
}

.dashboard #nav .wrapper {
    border-bottom: 2px solid var(--accent-color-hover)
}

@media(min-width:1024px) {
    main {
        margin-left: 270px
    }
}

@media(max-width:1024px) {
    nav {
        width: 175px
    }
}

.button:not(.button--flat.button--red) {
    background: var(--button-color);
    color: var(--button-text)
}

.button:active:not(.button--flat.button--red),
.button:focus:not(.button--flat.button--red),
.button:hover:not(.button--flat.button--red) {
    background: var(--button-color-hover);
    color: var(--button-text-hover)
}

button:hover:not(.action),
input[type=submit]:hover {
    color: var(--button-text-hover)
}

.button--flat {
    margin-left: 5px
}

.button--flat:hover {
    background: var(--dark-red);
    color: var(--text-hover);
    margin-left: 5px
}

#editor-container {
    background: var(--modal-bg-color)
}

.ace-chrome .ace_gutter {
    background: #282a36 !important;
    color: #909194 !important
}

.ace-chrome .ace_print-margin {
    width: 1px;
    background: #44475a
}

.ace-chrome {
    background-color: #282a36;
    color: #f8f8f2
}

.ace-chrome .ace_cursor {
    color: #f8f8f0
}

.ace-chrome .ace_marker-layer .ace_selection {
    background: #44475a
}

.ace-chrome.ace_multiselect .ace_selection.ace_start {
    box-shadow: 0 0 3px 0 #282a36;
    border-radius: 2px
}

.ace-chrome .ace_marker-layer .ace_step {
    background: #c6dbae
}

.ace-chrome .ace_marker-layer .ace_bracket {
    margin: -1px 0 0 -1px;
    border: 1px solid #a29709
}

.ace-chrome .ace_marker-layer .ace_active-line {
    background: #44475a
}

.ace-chrome .ace_gutter-active-line {
    background-color: #44475a
}

.ace-chrome .ace_marker-layer .ace_selected-word {
    box-shadow: 0 0 0 1px #a29709;
    border-radius: 3px
}

.ace-chrome .ace_fold {
    background-color: #50fa7b;
    border-color: #f8f8f2
}

.ace-chrome .ace_keyword {
    color: #ff79c6
}

.ace-chrome .ace_constant.ace_language {
    color: #bd93f9
}

.ace-chrome .ace_constant.ace_numeric {
    color: #bd93f9
}

.ace-chrome .ace_constant.ace_character {
    color: #bd93f9
}

.ace-chrome .ace_constant.ace_character.ace_escape {
    color: #ff79c6
}

.ace-chrome .ace_constant.ace_other {
    color: #bd93f9
}

.ace-chrome .ace_support.ace_function {
    color: #8be9fd
}

.ace-chrome .ace_support.ace_constant {
    color: #6be5fd
}

.ace-chrome .ace_support.ace_class {
    font-style: italic;
    color: #66d9ef
}

.ace-chrome .ace_support.ace_type {
    font-style: italic;
    color: #66d9ef
}

.ace-chrome .ace_storage {
    color: #ff79c6
}

.ace-chrome .ace_storage.ace_type {
    font-style: italic;
    color: #8be9fd
}

.ace-chrome .ace_invalid {
    color: #f8f8f0;
    background-color: #ff79c6
}

.ace-chrome .ace_invalid.ace_deprecated {
    color: #f8f8f0;
    background-color: #bd93f9
}

.ace-chrome .ace_string {
    color: #f1fa8c
}

.ace-chrome .ace_comment {
    color: #6272a4
}

.ace-chrome .ace_variable {
    color: #50fa7b
}

.ace-chrome .ace_variable.ace_parameter {
    font-style: italic;
    color: #ffb86c
}

.ace-chrome .ace_entity.ace_other.ace_attribute-name {
    color: #50fa7b
}

.ace-chrome .ace_entity.ace_name.ace_function {
    color: #50fa7b
}

.ace-chrome .ace_entity.ace_name.ace_tag {
    color: #ff79c6
}

.ace-chrome .ace_invisible {
    color: #626680
}

.ace-chrome .ace_indent-guide {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC) right repeat-y
}

.credits {
    color: var(--text-muted)
}

.vue-simple-progress {
    margin-right: 3em
}

#login img {
    width: 100%;
    height: 100%;
}

#login h1 {
    display: none;
}