@import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css);

:root {
    --color-Dark: #282A36;
    --color-LessDark: #282A36;
    --color-Grey: #44475a;
    --color-GreySelected: #44475a;
    --color-LightGrey: #44475a;
    --color-White: #f8f8f2;
    --color-ProgressBarFG: #f8f8f2;
    --color-ProgressBarBG: #BD93F9;
    --color-DarkSelected: #6272a4;

    --color-RatioBad: #ffb86c;
    --color-RatioAlmost: #FFFFA5;
    --color-RatioGood: #A4FFFF;
    --color-RatioBest: #D6ACFF;

    --color-BadRed: #FF5555;
    --color-GoodGreen: #50FA7B;
    --color-Orange: #FF6E6E;
    --color-Blue: #BD93F9;

    --button-color: #34373f;
    --button-color-hover: #2e78d8;
    --button-text: #eee;
    --accent-color: #2e78d8;
    --accent-color-hover: #2e78d8;
    --text: #F8F8F2;
    --text-hover: #fff;
    --link-color: #bd93f9;
}

/* THEME */
html,
body,
#desktopHeader,
#desktopNavbar,
#mochaToolbar,
#Filters {
    background: var(--color-Dark) !important;
    color: var(--color-White);
}

a {
    color: var(--color-White) !important;
}

#desktopNavbar li a {
    color: var(--color-White) !important;
    border-bottom-color: var(--color-Grey) !important;
}

#desktopNavbar li a:hover {
    background: var(--color-Grey) !important;
}

#desktopNavbar li ul {
    background: var(--color-Dark) !important;
    background-image: none !important;
}

#desktopNavbar li ul .divider {
    border-top-color: var(--color-Grey) !important;
    display: none;
}

#pageWrapper {
    border-top-color: var(--color-Grey) !important;
}

.torrentTable,
.dynamicTable {
    border-color: var(--color-Grey) !important;
}

.torrentTable th,
.dynamicTable th {
    background: var(--color-Dark) !important;
    color: var(--color-White) !important;
}

.dynamicTable th {
    border-right-color: var(--color-Grey) !important;
}

.torrentTable tr,
.dynamicTable tr {
    background: var(--color-Dark) !important;
}

.torrentTable tr:nth-child(even),
.dynamicTable tr:nth-child(even) {
    background: var(--color-LessDark) !important;
}

.torrentTable tr.selected,
.torrentTable tr:hover,
.dynamicTable tr.selected,
.dynamicTable tr:hover {
    color: var(--color-White) !important;
}

.torrentTable tr.selected,
.dynamicTable tr.selected {
    background: var(--color-GreySelected) !important;
}

.torrentTable tr:hover,
.dynamicTable tr:hover,
ul.filterList li:hover,
.selectedFilter {
    background: var(--color-GreySelected) !important;
}

.toolbarTabs {
    padding-bottom: 0 !important;
}

.toolbarTabs li,
.toolbarTabs li a {
    background-image: none !important;
    color: var(--color-White) !important;
}

.toolbarTabs li {
    margin-left: 2px !important;
    margin-right: 2px !important;
    margin-bottom: 0 !important;
    background: var(--color-Grey) !important;
    border-radius: 2px 2px 0 0;
    box-shadow: none;
    background-position: left -70px
}

.toolbarTabs li.selected {
    background: var(--color-DarkSelected) !important;
}

.toolbarTabs li a {
    margin-left: 0 !important;
    padding: 4px 9px !important;
}

#propertiesPanel_header {
    height: 27px !important;
}

#propertiesPanel_headerContent {
    padding-top: 3px !important;
}

#prop_general fieldset,
#watched_folders_tab tr,
#watched_folders_tab th,
#watched_folders_tab td {
    border-color: var(--color-White) !important;
}

#desktopFooter {
    background: var(--color-Dark) !important;
    border: 1px solid var(--color-Grey) !important;
    color: var(--color-White) !important;
}



.icon16 {
    margin: 0;
    cursor: pointer;
}


.panel {
    background: var(--color-Dark) !important;
    border-bottom-color: var(--color-Grey) !important;
    color: var(--color-White) !important;
}

.panel-header,
.panel-headerContent,
.toolbarTabs {
    background-image: none !important;
    background-color: var(--color-Grey) !important;
}

.panel-header {
    border-bottom-color: var(--color-Dark) !important;
}

.horizontalHandle,
.columnHandle {
    background: var(--color-Grey) !important;
    border-color: var(--color-Grey) !important;
}

.horizontalHandle .handleIcon {
    background: none !important;
}

.columnHandle:after {
    transform: rotate(90deg) !important;
}

.horizontalHandle {
    background-image: none !important;
}

.mochaCanvas {
    display: none !important;
}

.mochaTitlebar,
.mochaTitlebar.replaced {
    background: var(--color-Grey) !important;
    border-radius: 7px 7px 0 0;
}

.mochaTitle {
    color: var(--color-White) !important;
}

.mochaToolbarWrapper {
    border-top-color: var(--color-Grey) !important;
}

.mochaToolbar {
    border-top-color: var(--color-Grey) !important;
    background: var(--color-Grey) !important;
    padding-top: 4px;
}

.mochaContentBorder {
    border-top-color: var(--color-Dark) !important;
    border-bottom-color: var(--color-Grey) !important;
    border-bottom-width: 23px !important;
    border-radius: 0 0 7px 7px;
}

.mochaContentWrapper {
    background: var(--color-Dark) !important;
}

.mochaContent fieldset {
    border-color: var(--color-White) !important;
}

.mocha::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 5px;
    bottom: 7px;
    right: 5px;
    border-radius: 7px;
    box-shadow: 0 0 10px #000;
    z-index: -1000;
}

.mocha#preferencesPage::after {
    bottom: 6px;
}

.contextMenu,
.contextMenu li ul {
    background: var(--color-Grey) !important;
    border-color: #5e5e5e !important;
}

.contextMenu li a {
    color: var(--color-White) !important;
}

.contextMenu li a:hover {
    background: var(--color-DarkSelected) !important;
}

h2,
h3 {
    color: var(--color-White);
}

.filterList a {
    color: var(--color-White) !important;
}

/*Makes the toolbar buttons, rightclick menu and menu bar white*/
.mochaToolButton,
.contextMenu img,
#desktopNavbar img,
#addTrackersPlus {
    filter: grayscale(90%) brightness(249%) !important;
}

/*Adjusts images in the footer and filter menu and torrents section (e.g. the downloading, seeding and paused icons) to be slightly brighter*/
#filtersColumn img,
#transferList_wrapper img,
#desktopFooter img {
    filter: brightness(100%);
}

.filterTitle img {
    width: 16px;
    height: 10px;
    margin-bottom: -3px;
    padding: 1px 1px 2px 1px;
}

/*progressbar border*/
div.progressbar_wrapper {
    border-color: var(--color-GreySelected) !important;
}

/* % of download completed*/
.progressbar_dark {
    background: var(--color-ProgressBarBG) !important;
    color: var(--color-ProgressBarFG) !important;
}

/* % of download uncompleted*/
.progressbar_light {
    background: var(--color-Dark) !important;
    color: var(--color-White) !important;
}

/* .panel-collapse {
    filter: grayscale(100%) brightness(60%) !important;
} */

select {
    background: var(--color-Grey);
    border-color: var(--color-Blue);
    color: var(--color-White) !important;
}

input,
textarea {
    background: var(--color-Grey) !important;
    color: var(--color-White) !important;
    border: 0px;
    white-space: nowrap;
}

input::placeholder {
    color: var(--color-White) !important;
}

.select-watched-folder-editable {
    position: relative;
    background-color: var(--color-Grey);
    border: 0px;
    width: 160px;
    height: 20px;
}


#error_div {
    color: red;
}

/* SCROLLBARS
----------------------------------------------------------------------------------------------*/
::-webkit-scrollbar-corner {
    background-color: var(--color-Grey);
}

::-webkit-scrollbar {
    background-color: var(--color-Grey);
    height: 10px;
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-GreySelected);
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

/* CREDITS
----------------------------------------------------------------------------------------------*/
div#aboutpage_content.mochaContent h3:nth-child(2)::after {
    content: '\Awith the Nightwalker-theme. By the Walkerserver community';
    white-space: pre;
    font-weight: normal;
    color: rgb(255, 255, 255);
}

/* RATIO COLORS
----------------------------------------------------------------------------------------------*/
.ratioBad {
    color: var(--color-RatioBad);
}

.ratioAlmost {
    color: var(--color-RatioAlmost);
}

.ratioGood {
    color: var(--color-RatioGood);
}

.ratioBest {
    color: var(--color-RatioBest);
}


/* REMOVE UGLY DIVIDER GIF
----------------------------------------------------------------------------------------------*/
td.statusBarSeparator {
    background-image: none;
}

#mochaToolbar .divider {
    background-image: none;
}


/* TOP MENU ITEMS
----------------------------------------------------------------------------------------------*/
#desktopNavbar li ul li a {
    position: relative;
    /* padding: 1px 9px 1px 25px; */
    min-width: 120px;
    font-weight: normal;
    padding: 5px 10px 1px 1px;
}

.MyMenuIcon {
    margin-left: 0px;
}


/* ICONS IN LEFT SIDEBAR/FILTERLIST
----------------------------------------------------------------------------------------------*/

ul.filterList a {
    display: inline;
}

#all_filter>a img {
    display: none;
}

#all_filter:before {
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    content: "\f0b0";
    font-weight: 900;
    display: inline-block;
    margin-right: 5px;
    color: var(--color-White);
    padding-left: 5px;
}

#downloading_filter>a img {
    display: none;
}

#downloading_filter:before {
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    content: "\f063";
    font-weight: 900;
    display: inline-block;
    margin-right: 5px;
    color: var(--color-GoodGreen);
    padding-left: 5px;
}

#seeding_filter>a img {
    display: none;
}

#seeding_filter:before {
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    content: "\f062";
    font-weight: 900;
    display: inline-block;
    margin-right: 5px;
    color: var(--color-Blue);
    padding-left: 5px;
}

#completed_filter>a img {
    display: none;
}

#completed_filter:before {
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    content: "\f00c";
    font-weight: 900;
    display: inline-block;
    margin-right: 5px;
    color: var(--color-Blue);
    padding-left: 5px;
}

#resumed_filter>a img {
    display: none;
}

#resumed_filter:before {
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    content: "\f04b";
    font-weight: 900;
    display: inline-block;
    margin-right: 5px;
    color: var(--color-GoodGreen);
    padding-left: 5px;
}

#paused_filter>a img {
    display: none;
}

#paused_filter:before {
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    content: "\f04c";
    font-weight: 900;
    display: inline-block;
    margin-right: 5px;
    color: var(--color-Orange);
    padding-left: 5px;
}

#errored_filter>a img {
    display: none;
}

#errored_filter:before {
    font-family: "Font Awesome 5 Free";
    font-size: 16px;
    content: "\f00d";
    font-weight: 900;
    display: inline-block;
    margin-right: 5px;
    color: var(--color-BadRed);
    padding-left: 5px;
}

#active_filter>a img {
    display: none;
}

#active_filter:before {
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    content: "\f0b0";
    font-weight: 900;
    display: inline-block;
    margin-right: 5px;
    color: var(--color-GoodGreen);
    padding-left: 5px;
}

#inactive_filter>a img {
    display: none;
}

#inactive_filter:before {
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    content: "\f0b0";
    font-weight: 900;
    display: inline-block;
    margin-right: 5px;
    color: var(--color-LightGrey);
    padding-left: 5px;
}

#stalled_filter>a img {
    display: none;
}

#stalled_filter:before {
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    content: "\f0b0";
    font-weight: 900;
    display: inline-block;
    margin-right: 5px;
    color: var(--color-LightGrey);
    padding-left: 5px;
}

#stalled_uploading_filter>a img {
    display: none;
}

#stalled_uploading_filter:before {
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    content: "\f093";
    font-weight: 900;
    display: inline-block !important;
    margin-right: 5px;
    color: var(--color-LightGrey);
    padding-left: 5px;
}

#stalled_downloading_filter>a img {
    display: none;
}

#stalled_downloading_filter:before {
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    content: "\f019";
    font-weight: 900;
    display: inline-block !important;
    margin-right: 5px;
    color: var(--color-LightGrey);
    padding-left: 5px;
}

/* REPLACE STANDARD ICONS WITH CUSTOM PNG VERSION
----------------------------------------------------------------------------------------------*/

img[src="icons/inode-directory.svg"] {
    background: url('../icons/inode-directory.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

img[src="icons/inode-tag.svg"] {
    background: url('../icons/inode-tag.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

img[src="icons/network-server.svg"] {
    background: url('../icons/network-server.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

img[src="icons/paused.svg"] {
    background: url('../icons/paused.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

img[src="icons/stalledDL.svg"] {
    background: url('../icons/stalledDL.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

img[src="icons/stalledUP.svg"] {
    background: url('../icons/stalledUP.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

img[src="icons/seeding.svg"],
img[src="icons/uploading.svg"] {
    background: url('../icons/seeding.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

img[src="icons/downloading_small.svg"],
img[src="icons/downloading.svg"] {
    background: url('../icons/downloading.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

img[src="icons/connected.svg"] {
    background: url('../icons/connected.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

img[src="icons/disconnected.svg"] {
    background: url('../icons/disconnected.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

img[src="icons/slow.svg"] {
    background: url('../icons/slow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

img[src="icons/slow_off.svg"] {
    background: url('../icons/slow_off.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

img[src="icons/completed.svg"] {
    background: url('../icons/completed.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

img[src="icons/mail-folder-inbox.svg"] {
    background: url('../icons/mail-folder-inbox.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}






/* TOOLBAR ICONS
----------------------------------------------------------------------------------------------*/


#downloadButton>img.mochaToolButton {
    display: none;
}

#downloadButton:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f0c1";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 5px;
}

#downloadButton:hover:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f0c1";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: white;
}

#uploadButton>img.mochaToolButton {
    display: none;
}

#uploadButton:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f067";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.7);
}

#uploadButton:hover:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f067";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: white;
}

#deleteButton>img.mochaToolButton {
    display: none;
}

#deleteButton:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f068";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.7);
}

#deleteButton:hover:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f068";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: white;
}

#resumeButton>img.mochaToolButton {
    display: none;
}

#resumeButton:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f04b";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.7);
}

#resumeButton:hover:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f04b";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: white;
}

#pauseButton>img.mochaToolButton {
    display: none;
}

#pauseButton:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f04c";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.7);
}

#pauseButton:hover:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f04c";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: white;
}

#topPrioButton>img.mochaToolButton {
    display: none;
}

#topPrioButton:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f102";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.7);
}

#topPrioButton:hover:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f102";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: white;
}

#increasePrioButton>img.mochaToolButton {
    display: none;
}

#increasePrioButton:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f106";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.7);
}

#increasePrioButton:hover:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f106";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: white;
}

#decreasePrioButton>img.mochaToolButton {
    display: none;
}

#decreasePrioButton:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f107";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.7);
}

#decreasePrioButton:hover:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f107";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: white;
}

#bottomPrioButton>img.mochaToolButton {
    display: none;
}

#bottomPrioButton:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f103";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.7);
}

#bottomPrioButton:hover:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f103";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: white;
}

#preferencesButton>img.mochaToolButton {
    display: none;
}

#preferencesButton:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f013";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.7);
}

#preferencesButton:hover:before {
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    content: "\f013";
    font-weight: 900;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: white;
}

/* BASICS
----------------------------------------------------------------------------------------------*/

select {
    border: none !important;
}

a,
h2,
h3,
h4,
.mochaTitlebar h3 {
    color: #fff;
}

/* Login */
#main h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 2em;
    margin-block-end: -.9em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

#error_msg {
    text-transform: uppercase;
    color: #D8000C;
    background-color: #FFD2D2;
    font-family: Helvetica, Arial, sans-serif;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: absolute;
    border-radius: 4px;
}

#main {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    padding-top: 0;
    /* background: rgba(0, 0, 0, 0.25); */
    width: 400px;
    height: 460px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

#logo img {
    height: 11em;
    position: absolute;
    left: 50%;
    /* top: 50%; */
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -160%);
}

#formplace {
    text-transform: uppercase;
    text-align: left;
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    padding: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}


#mochaToolbar .divider {
    background-image: none;
    padding-left: 0px;
}

#mochaToolbar {
    margin-bottom: 5px;
}


.dynamicTable th.sorted.reverse {
    background-image: url('../icons/go-down.png') !important;
}

.dynamicTable th.sorted {
    background-image: url('../icons/go-up.png') !important;
    background-size: 9px !important;
    background-position: right !important;
    background-repeat: no-repeat !important;

}

li.divider {
    border-top: 1px solid rgba(255, 255, 255, .25) !important;
}


#main input[type="text"i] {
    color: #FFF;
    background-color: rgba(0, 0, 0, .25);
    border-width: 0px;
    outline: none;
    border: none;
    border-radius: 4px;
    width: 250px;
    height: 24px;
    padding: 7px 12px;
}

#main input[type="text"i]:focus {
    background-color: rgba(0, 0, 0, .45);
}

#main input[type="password"i] {
    color: #FFF;
    background-color: rgba(0, 0, 0, .25);
    border-width: 0px;
    outline: none;
    border: none;
    border-radius: 4px;
    width: 250px;
    height: 24px;
    padding: 7px 12px;
}

#main input[type="password"i] {
    background-color: rgba(0, 0, 0, .45);
}

#loginform #login {
    padding: 6px 15px !important;
    width: 100%;
    margin-top: 35px;
    background-color: var(--button-color) !important;
    border: none;
    border-radius: 4px;
    color: var(--button-text) !important;
    outline: none;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 300;
    height: 44px;
    line-height: 1.3333333;
}

#loginform #login:hover {
    background-color: var(--button-color-hover) !important;
    padding: 6px 15px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    color: var(--button-text) !important;
}



/* Sidemenu */
.selectedFilter {
    background-color: rgba(0, 0, 0, 0.25);
    color: #FFF;
}

ul.filterList li:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.columnHandle {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid;
}

fieldset {
    border-width: 1px !important;
    border-style: solid !important;
}

/*Modal */

.mochaTitlebar {
    width: 100%;
    overflow: hidden;

}

.mochaToolButton {
    margin-right: 10px;
    border-radius: 5px;
}

.mochaToolButton:hover {
    margin-right: 10px;
    border-radius: 5px;
    color: var(--color-Blue);
}

.mochaOverlay {
    /* background: var(--color-Grey) !important; */
    height: 0px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0px;
    padding: 0px;
}

.mochaToolbarWrapper {
    width: 100%;
    position: relative;
    height: 29px;
    overflow: hidden;
    border-top: none !important;
}

.mochaToolbar {
    width: 100%;
    border-top: none !important;
}

.mocha.isFocused .mochaTitlebar h3 {
    color: #fff;
}

.mochaContentWrapper {
    font-size: 12px;
    overflow: auto;
}

.mochaContentBorder {
    border-top: 0px solid #dadada;
    border-bottom: 1px solid #dadada;
}

fieldset.settings {
    border: solid 1px rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    padding: 4px 4px 4px 10px;
}

textarea:disabled {
    color: rgb(84, 84, 84);
    cursor: default;
    background-color: rgb(255, 255, 255, .05) !important;
    border: none !important;
}

textarea {
    color: #fff !important;
    cursor: default;
    background-color: rgb(0, 0, 0, .25) !important;
    border: none !important;
}

#watched_folders_tab td,
#watched_folders_tab th {
    padding: 2px 4px;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

input[type="button"i]:hover {
    background-color: var(--button-color-hover);
    padding: 6px 15px;
    cursor: pointer;
    border: none;
    color: var(--button-text);
}

input[type="button"i] {
    padding: 6px 15px !important;
    background-color: var(--button-color);
    cursor: pointer;
    border: none;
    color: var(--button-text);
}

button {
    background-color: var(--button-color) !important;
    cursor: pointer;
    border: 2px solid transparent;
    color: var(--button-text);
}

button:hover {
    background-color: var(--button-color-hover) !important;
    cursor: pointer;
    border: 2px solid transparent;
    color: var(--button-text);
}

input[type="submit"i] {
    padding: 6px 15px !important;
    width: 100%;
    margin-top: 15px;
    background-color: var(--button-color) !important;
    border: none;
    color: var(--button-text);
    outline: none;
    text-transform: uppercase;
}

input[type="submit"i]:hover {
    padding: 6px 15px !important;
    background-color: var(--button-color-hover) !important;
    width: 100%;
    cursor: pointer;
    border: none;
    color: var(--button-text);
    outline: none;
    text-transform: uppercase;
}


/* RSS
----------------------------------------------------------------------------------------------*/




#rssView {
    padding: 20px 20px 0 20px;
    height: calc(100% - 20px);
}

#rssContentView {
    display: table;
    width: 100%;
    height: calc(100% - 30px);
    vertical-align: top;
}

#rssFeedFixedHeaderDiv .dynamicTableHeader,
#rssArticleFixedHeaderDiv .dynamicTableHeader {
    cursor: default;
}

.alignRight {
    float: right;
}

.unreadArticle {
    color: var(--color-Blue);
}

#rssFetchingDisabled {
    color: var(--color-BadRed);
    font-style: italic;
    margin-bottom: 10px;
}

#centerRssColumn {
    margin: 0 10px 0 10px;
}

#leftRssColumn,
#centerRssColumn,
#rightRssColumn {
    float: left;
    /* should be 20 px but due to rounding differences some browsers don't render that properly */
    width: calc(calc(100% - 21px) / 3);
    border: none;
}

#rightRssColumn {
    overflow: auto;
}

#rssFeedTableDiv,
#rssArticleTableDiv {
    height: calc(100vh - 180px);
}

#rssTorrentDetailsName {
    background-color: var(--color-Blue);;
    padding: 0;
    color: white;
}

#rssTorrentDetailsDate {
    background-color:var(--color-Grey);
}

#rssDetailsView {
    height: calc(100vh - 135px);
    overflow: auto;
}

#rssButtonBar {
    overflow: hidden;
    height: 30px;
}

#rssContentView table {
    width: 100%;
}

#rssDescription {
    width: 100%;
    border: none;
}

#rssdownloaderpage_content {
    height: calc(100% - 30px);
}

#RssDownloader {
    height: 100%;
}

#leftRssDownloaderColumn {
    width: 25%;
    float: left;
}

#rulesTable, #rssDownloaderArticlesTable {
    overflow: auto;
    width: 100%;
    height: 100%;
}

#centerRssDownloaderColumn {
    width: 50%;
    float: left;
}

#rightRssDownloaderColumn {
    width: 25%;
    float: left;
}

.fullWidth {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.noWrap {
    white-space: nowrap;
}

#rssDownloaderFeeds {
    height: calc(100% - 355px);
    overflow: hidden;
}

#rssDownloaderFeedsTable {
    height: calc(100% - 21px);
    width: 100%;
    overflow: auto;
}

#saveButton {
    margin-top: 5px;
    width: 100%;
}

.articleTableFeed td {
    font-weight: bold;
}

.articleTableArticle td {
    padding-left: 22px;
}

#rssDownloaderDisabled {
    color: var(--color-BadRed);
    font-style: italic;
    margin-bottom: 10px;
}

#rulesTable table, #rssDownloaderFeedsTable table, #rssDownloaderArticlesTable table {
    width: 100%;
}

#ignoreDaysValue {
    width: 4em;
}

#lastMatchDiv {
    float: right;
}

#ruleSettings {
    padding: 4px 10px 4px 10px
}

#topMenuBar {
    height: 26px;
}

#rulesTableDesc {
    vertical-align: middle;
}

.imageButton {
    height: 22px;
    width: 24px;
    margin: 1px 2px 1px 2px;
    border: 1px solid;
    border-radius: 2px;
    background-color: #efefef;
    border-color: #767676;
    background-position: center center;
    vertical-align: middle;
}

.imageButton:hover {
    background-color: #e5e5e5;
    border-color: #4f4f4f;
}

.imageButton:active {
    background-color: #f5f5f5;
    border-color: #8d8d8d;
}

#newRuleButton {
    float: right;
    background-image: url('../icons/document-new.svg');
}

#deleteRuleButton {
    float: right;
    background-image: url('../icons/list-remove.svg');
}
