/**
 * Shift: a Transmission web interface.
 *
 * © 2024 Killemov.
 *
 * This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
 * To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/ or send a
 * letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
 */

@media print {
  body {
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
}

html.base a {
  color: purple;
}

html {
  background-color: white;
  cursor: auto;
}

@keyframes fullcircle {
  from {
    filter: hue-rotate( 0deg );
  }
  to {
    filter: hue-rotate( 360deg );
  }
}

html.base {
  animation: 3600s linear 0s infinite fullcircle;
}

html.base ::selection {
  color: white;
  background: purple;
}

html.dark {
  -moz-filter: invert( 85% );
  -ms-filter: invert( 85% );
  -o-filter: invert( 85% );
  -webkit-filter: invert( 85% );
  filter: invert( 85% );
}

@keyframes fullcircle_dark {
  from {
    filter: hue-rotate( 0deg ) invert( 85% );
  }
  to {
    filter: hue-rotate( 360deg ) invert( 85% );
  }
}

html.base.dark {
  animation-name: fullcircle_dark;
}

body {
  background-color: inherit;
  margin: 0;
  min-height: 600px;
  overflow-x: hidden;
  padding: 0;
}

h1 {
  margin: 0;
  text-align: center;
}

menu {
  margin: 0;
  padding: 0;
}

body.box menu#menu {
  margin: 8px;
}

button.styled,
menu#menu li {
  background-color: lightgray;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  line-height: 32px;
  min-width: 64px;
  padding: 0 8px;
}

html.base menu#menu li {
  outline-offset: -2px;
}

html.base menu#menu li:focus {
  outline: 2px solid purple;
}

html.base menu#menu li.selected {
  color: white;
  background: purple;
}

html.base menu#menu li.selected:focus {
  outline: 2px solid lightgray;
}

html.base button.styled {
  border: none;
  line-height: 32px;
  min-width: 64px;
  outline-offset: -2px;
}

div.popup button.styled {
  float: right;
}

body.box th#filterContainerCell {
  display: none;
}

div.filter {
  margin: 2px 0;
  white-space: nowrap;
}

div.filterInput {
  display: inline-block;
}

label {
  display: inline-block;
  font-weight: bold;
  margin: 0px 4px;
  white-space: nowrap;
}

led + label {
  margin-left: 0px;
}

div#stats label {
  margin-right: 8px;
  text-align: right;
  width: 4em;
}

div.filter > label {
  margin-right: 8px;
}

label#newLabel,
label:first-child {
  text-align: right;
  width: 6em;
}

progress {
  background-color: lightgray;
  width: 100%;
}

progress::-moz-progress-bar {
  background-color: purple;
}

div.upload {
  max-width: 600px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.name {
  width: 100px;
}

div#outside {
  display: none;
  height: 100%;
  z-index: 2;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

div#popups {
  background-color: transparent;
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.popup {
  background-color: white;
  border: 1px solid lightgray;
  display: none;
  position: absolute;
}

.popup > div {
  margin: 4px 0;
}

.dialog {
  overflow: scroll;
  padding: 8px;
  position: fixed;
  max-height: 80%;
  max-width: 80%;
  min-width: 320px;
}

div.dialog > div:last-child {
  margin: 0;
  float: right;
}

.dialog > div:last-child .styled {
  margin: 0;
  float: unset;
}

div.dialog > div:last-child:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}

.popup menu li {
  cursor: pointer;
  display: block;
  padding: 0 8px;
}

html.base .popup menu li:hover {
  background-color: lightgray;
  color: purple;
}

.popup menu div.space {
  height: 8px;
}

html.base .popup menu div.space {
  background-color: purple;
}

html.base .popup menu div.space:hover {
  background-color: white;
}

div#popupAbout {
  text-align: center;
}

div#popupAbout div:last-child {
  height: 32px;
  width: 100%;
}

div#popupAbout div:last-child .styled {
  float: right;
}

div#popupAdd label {
  width: 48px;
}

div#popupAdd led {
  margin-right: 4px;
}

div#popupAdd input[readonly="readonly"].styled {
  cursor: pointer;
}

div#popupAdd label#dir {
  text-align: left;
  margin-left: 17px;
}

html.base div#popupAdd div.pathselect {
  width: 302px;
}

html.base div#popupDialog div.pathselect {
  width: calc(100% - 36px);
}

div#popupBatchRename input.styled,
div#popupSubstitute input.styled {
  width: 32em;
}

div#popupBatchRename span.example,
div#popupSubstitute span.example {
  display: inline-block;
  overflow: clip;
  text-indent: 3px;
  white-space: nowrap;
  width: 32em;
}

div#popupBatchRename input + led,
div#popupSubstitute input + led {
  margin: 0 -1px 0 8px;
}

html.base div.popup > div:last-child led {
  margin-left: 16px;
  margin-right: 4px;
}

html.base div.popup > div:last-child button:first-child,
html.base div.popup > div:last-child led:first-child {
  margin-left: 0px;
}

html.base div.popup > div:last-child button:first-of-type {
  margin-left: 16px;
}

div#uploads {
  max-height: 20em;
  max-width: 48em;
  overflow-y: auto;
  overflow-x: hidden;
}

div#paths {
  display: block;
  min-height: 8em;
  min-width: 314px;
  line-height: 1.3em;
  overflow: auto;
  width: unset;
  resize: both;
  white-space: pre;
}

html.base div#paths {
  background-attachment: local;
  background-image: url('data:image/svg+xml;utf8,<svg width="4096" height="20" viewBox="0 0 4094 20" xmlns="http://www.w3.org/2000/svg"><path stroke="darkgray" d="M -1,19.6 h 4096" /></svg>');
  background-position: -1px 0px;
  line-height: 20px;
}

led#port-is-open {
  float: right;
}

html.base led#port-is-open {
  margin-right: 0px;
  margin-top: 4px;
}

div.additional label {
  display: inline-block;
  width: 28px;
}

html.base div.additional input {
  width: calc(100% - 28px - 6px);
}

html.base div.additional select {
  width: calc(100% - 28px);
}

html.base div.additional led {
  margin: 0 4px 0 10px;
}

li#high, li#normal, li#low, li#none {
  display: inline-block;
  padding: 0 4px;
}

li#folder {
  padding: 0 4px;
}

.styled {
  font: inherit;
  text-align: left;
}

html.base .styled {
  border: 1px solid lightgray;
  outline-offset: -1px;
}

html.base a:focus,
html.base span[tabindex]:focus,
html.base led[tabindex]:focus,
html.base .dialog:focus,
html.base .styled:focus {
  outline: 2px solid purple;
}

html.base table#torrentTable span[tabindex]:focus {
  outline: 4px solid purple;
}

html.base .filter select.styled {
  margin-right: 3px;
}

input.styled.number {
  text-align: right;
  width: 6em;
}

div#filterContainer input.styled[type="text"] {
  background-color: inherit;
  text-indent: 4px;
}

select.styled {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: inherit;
  background-image:
    linear-gradient( 45deg, transparent 50%, purple 50%),
    linear-gradient( 135deg, purple 50%, transparent 50%);
  background-position:
    calc(1em - 8px) 0.5em,
    1em 0.5em;
  background-size:
    8px 8px,
    8px 8px;
  background-repeat: no-repeat;
  padding-left: 2em;
}

textarea.styled {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  resize: none;
  width: 100%;
}

led {
  background-color: purple;
  border: 1px solid white;
  color: lightgray;
  display: inline-block;
  font-size: 12pt;
  height: 12px;
  line-height: 11px;
  margin-top: -4px;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  width: 12px;
}

led.close {
  line-height: 0.5em;
  text-indent: 0.05em;
}

led.open {
  line-height: 0.5em;
}

button,
led {
  cursor: pointer;
}

led[readonly] {
  cursor: auto;
}

html.base led.added {
  background-color: green;
}

html.base led.duplicate {
  background-color: red;
  font-size: 14px;
  line-height: 12px;
}

html.base led.loading {
  font-size: 15pt;
  line-height: 7px;
  text-indent: 2px;
}

@keyframes blinker {
  50% { opacity: 0; }
}

led.checking,
led.loading,
led.processing,
led.uploading {
  animation: blinker 1s linear infinite;
}

html.base led.loaded {
  background-color: yellow;
  color: black;
  font-size: 11pt;
  line-height: 11px;
  text-indent: 0px;
}

html.base led.loading {
  background-color: blue;
}

led.none {
  background-color: lightgray;
  color: purple;
}

html.base led.processing {
  background-color: purple;
  line-height: 0.9em;
  text-indent: -1px;
}

html.base led.uploading {
  background-color: purple;
  font-size: 15pt;
  line-height: 6px;
}

div.pathselect.styled {
  border: medium none;
  display: inline-block;
  width: 100%
}

html.base div.pathselect.styled > input.styled {
  width: calc(100% - 6px);
}

html.base table.keyvalue div.pathselect.styled > input.styled {
  width: calc(100% - 8px);
}

div.pathselect.styled > select.styled {
  width: 100%;
}

span.add {
  display: inline-block;
  width: 3em;
}

span.rename,
span.substitute {
  display: inline-block;
  width: 5em;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

html.base table {
  border: 1px solid lightgray;
}

col.key {
  width: 25%;
}

col.menu,
col.priority {
  width: 22px;
}

col.primary-mime-type {
  width: 20px;
}

col.name {
  width: 60%;
}

table#pathTable,
table#ruleTable {
  width: unset;
}

html.base table#pathTable thead tr,
html.base table#ruleTable thead tr {
  background-color: lightgray;
}

table#pathTable th.count {
  text-align: right;
}

html.base table#pathTable td {
  border-left: none;
  border-right: none;
}

table#pathTable td.path {
  white-space: nowrap;
}

table#pathTable td.count,
table#pathTable td.free,
table#pathTable td.total {
  text-align: right;
  white-space: nowrap;
}

td,
th {
  padding: 0 ;
  text-align: right;
  white-space: nowrap;
}

th {
  text-align: left;
}

html.base td,
html.base th {
  border: 1px solid lightgray;
  padding: 0 4px;
}

table#torrentTable tr.header th {
  cursor: ns-resize;
}

table#torrentTable tr.header th led {
  margin-left: 4px;
}

led.clipboard,
table#torrentTable th led {
  margin-left: 16px;
  margin-right: 4px;
}

table#torrentTable th#h_menu led {
  margin-left: 0;
}

table#torrentTable th#filterContainerCell {
  font-weight: normal;
}

td.queuePosition {
  cursor: pointer;
}

table.keyvalue {
  text-align: left;
}

table.keyvalue td {
  text-align: left;
  white-space: normal;
}

table.keyvalue td.key {
  white-space: nowrap;
}

table.keyvalue td#s_download-dir,
table.keyvalue td#s_incomplete-dir {
  padding: 0px;
}

html.base table.keyvalue div.pathselect > .styled {
  border: none;
  margin: -1px;
}

html.base table.keyvalue td > input.styled:first-child,
html.base table.keyvalue td > select.styled:first-child,
html.base table.keyvalue td > textarea.styled,
html.base table#trackerTable textarea.styled:first-child {
  border: none;
  margin: 0px -4px;
  padding: 0px 4px;
}

html.base table#ruleTable col.field {
  min-width: 132px;
}

html.base table#ruleTable col.matches {
  min-width: 256px;
}

html.base table#ruleTable col.labels {
  min-width: 36px;
}

html.base table#ruleTable td > input.styled:first-child,
html.base table#ruleTable td > select.styled:first-child,
html.base table#ruleTable td > textarea.styled {
  border: none;
  margin: 0;
  padding: 0;
}

html.base table#ruleTable td > select.styled:first-child {
  margin-right: 8px;
}

html.base table#ruleTable td > textarea.styled {
  line-height: 1em;
}

html.base table.keyvalue td button.styled {
  margin: -1px 0;
}

html.base table.keyvalue td > button.styled:first-child {
  margin-left: -5px;
}

html.base table#ruleTable td > button.styled {
  margin-left: -1px;
}

html.base table.keyvalue select.styled {
  background-position: 4px 0.5em, 12px 0.5em;
  padding-left: 24px !important;
}

td.address,
td.clientName,
td.flagStr {
  text-align: left;
}

table#trackerTable col.announce {
  width: 40%;
}

table#trackerTable tr.tier {
  background-color: lightgray;
  height: 4px;
}

td.announce,
td.errorString,
td.name,
td.status {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

html.base table.keyvalue td button + button {
  margin-left: 0px;
}

table.keyvalue input {
  width: 100%;
}

td#s_labelMaticRules,
td#d_labels,
td#s_labels,
td#s_paths {
  padding: 0;
}

html.base td#s_labelMaticRules table,
html.base td#s_paths table {
  margin: -1px;
}

html.base td#s_labelMaticRules table td {
  padding: 0;
}

td#s_labelMaticEnabled led {
  margin-right: 28px;
}

td#s_minSeeders input {
  margin-right: 8px;
  width: 2em;
}

html.base td#s_trackers led:first-of-type {
  margin-right: 4px;
}

td#s_styleSheet led,
td#s_trackers led + led,
td#s_trackers button {
  margin-left: 16px;
  margin-right: 4px;
}

html.base td#s_trackers textarea {
  border-bottom: 1px solid lightgray;
}

table#fileTable td.name {
  text-align: left;
  padding-left: calc(0em + 4px); /* This is a template, the 0 gets replaced. */
}

button#tracker {
  width: 12em;
}

div#header {
  background-color: inherit;
}

body.normal div#header {
  position: inherit;
  width: inherit;
}

body.fixed div#header {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 1;
}

body.fixed > div#content {
  margin-top: 98px;
}

body.box div#header {
  position: fixed;
  right: 9px;
  width: 372px;
  z-index: 1;
}

html.base body.box div#header {
  border: 1px solid lightgray;
}

table.keyvalue td#d_pieces {
  padding: 0px;
}

body.box div#stats {
  cursor: move;
  float: none;
  width: unset;
}

canvas {
  border: 0px solid rgba(255, 255, 255, 0); /* marker for NO color, creates HSL gradient */
  height: 1.1em;
  width: 100%;
}

html.base canvas {
  color: purple;
  height: 1.35em;
  margin: -1px 0px -4px 0px;
}

html.base canvas.gradient {
  border-left: rgba(128, 0, 128, 0);
  border-right: rgba(128, 0, 128, 1);
}

table#fileTable th#filePieces {
  overflow-y: clip;
  padding: 0;
}

html.base table#fileTable th canvas.pieces {
  height: 1.3125em;
  margin-bottom: -4px;
}

div.reloaded {
  text-align: center;
}

div#stats span {
  display: inline-block;
  font-weight: inherit;
  font-size: inherit;
}

td#d_downloadDir {
  overflow-x: hidden;
  white-space: nowrap;
}

led#d_move {
  margin-right: 4px;
}

html.base td#d_downloadDir div.pathselect {
  width: calc(100% - 10px);
}

html.base td#d_downloadDir div.pathselect input.styled {
  width: calc(100% - 12px);
}

html.base td#d_downloadDir div.pathselect select.styled {
  width: calc(100% - 4px);
}

td#d_errorString {
  font-weight: bold;
}

div.torrents {
  max-height: 120px;
  max-width: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

img.mimeType {
  cursor: pointer;
  height: 16px;
  margin: -3px -4px 0 -3px;
  vertical-align: middle;
  width: 16px;
}

#detailsTable img.mimeType {
cursor: auto;
}

img.mimeType.application\/octet-stream {
  display: none;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

img.hover {
  border: 1px solid rgba( 255, 255, 255, 0.5 );
  cursor: pointer;
  display: block;
  height: auto;
  margin-top: 1.35em;
  max-height: 128px;
  max-width: 128px;
  opacity: 0;
  position: absolute;
  width: auto;
}

html.dark img.hover {
  -moz-filter: invert( 85% );
  -ms-filter: invert( 85% );
  -o-filter: invert( 85% );
  -webkit-filter: invert( 85% );
  filter: invert( 85% );
}

td.hover > img.hover {
  animation: fade 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

td.hover:hover > img.hover {
  opacity: 1;
}

html.base span.labels span.border {
  margin-top: 2px;
}

html.base span.labels span.border:focus {
  background-color: purple;
}

html.base span.labels span.label {
  filter: grayscale();
}

html.base span.labels span.border:focus span.label {
  mix-blend-mode: overlay;
}

table#torrentTable tr.header th span.labels {
  float: right;
}

div#popupRevert {
  width: 60%;
}

div#popupRevert div.scroll {
  max-height: 400px;
  overflow-y: scroll;
}

table#revertTable {
  table-layout: fixed;
  width: 100%;
}

table#revertTable col.key {
  width: 200px;
}

table#revertTable col.value {
  width: calc(50% - 122px);
}

table#revertTable col.local,
table#revertTable col.remote {
  width: 22px;
}

table#revertTable td {
  text-align: left;
  white-space: wrap;
  word-break: break-all;
}