View Issue Details

Jump to Notes
IDProjectCategoryView StatusDate SubmittedLast Update
0014728MMW 5Tracklistpublic2018-04-12 01:212018-04-24 18:26
Reporterrusty Assigned To 
PriorityurgentSeverityminorReproducibilityalways
Status closedResolutionfixed 
Product Version5.0 
Target Version5.0Fixed in Version5.0 
Summary0014728: Tracklist contents can appear off the left margin
DescriptionI'm not sure what triggered this, but when I opened Music > All Tracks, the tracklist appeared with the leftmost column not left-justified.

It should not be possible to move the leftmost column from the left margin of it's container.
TagsNo tags attached.
Attached Files
left_column_not_at_left_margin.jpg (69,438 bytes)   
left_column_not_at_left_margin.jpg (69,438 bytes)   
view_not_at_left_margin.jpg (116,579 bytes)   
view_not_at_left_margin.jpg (116,579 bytes)   
copy_outer_html_re_bug_14728.htm (208,853 bytes)    
<html><head><style type="text/css">/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
/* basic color definition */
body {
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-weight: normal;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
@font-face {
  font-family: Roboto;
  src: url("/skin/fonts/Roboto-Regular.ttf");
}
@font-face {
  font-family: Roboto;
  src: url("/skin/fonts/Roboto-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: Roboto;
  src: url("/skin/fonts/Roboto-Bold.ttf");
  font-weight: bold;
}
@font-face {
  font-family: Roboto;
  src: url("/skin/fonts/Roboto-Italic.ttf");
  font-style: italic;
}
body {
  font-family: Roboto;
}
.sidePanel {
  background-color: #fcfcfc;
}
.verticalPanel {
  background-color: #fcfcfc;
}
.verticalPanel .transparentBackground {
  background-color: rgba(252, 252, 252, 0.8);
}
.verticalPanelNarrow {
  background-color: #fcfcfc;
}
[data-id=toolbuttons] {
  background-color: #3f51b5;
  z-index: 200;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
[data-id=toolbuttons] > * {
  color: #ffffff;
  fill: #ffffff;
}
/* // LS: Currently the left and right sidebars are not always layers over the middle content, we should add the shadows once they become a layers    
[data-id=sidebar] {   
    z-index: 9;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); // left panel
}

[data-id=nowplaying] {   
    z-index: 9;
    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15); // right panel
}
*//* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.relativeBase {
  position: relative;
}
.flex {
  display: flex;
  align-items: stretch;
  align-content: stretch;
}
.flex.column {
  flex-flow: column;
}
.flex.row {
  flex-flow: row;
}
.flex.row_wrap {
  flex-flow: row wrap;
}
.flex.right,
.flex.bottom {
  justify-content: flex-end;
}
.flex.left,
.flex.top {
  justify-content: flex-start;
}
.flexcenter {
  justify-content: center;
}
.flex > .center {
  align-self: center;
}
.flex > .fill {
  flex: 10 10 auto;
  position: relative;
  min-width: 0px;
  min-height: 0px;
}
.flex > .dynamic {
  flex: 1 1 auto;
  position: relative;
  min-width: 0px;
  min-height: 0px;
}
.flex.sameSize > * {
  flex: 1 1 auto;
  position: relative;
  min-width: 0px;
  min-height: 0px;
  flex-basis: 1px;
}
.flex > .dynamicShrink {
  flex: 0 1 auto;
  position: relative;
  min-width: 0px;
  min-height: 0px;
}
.flex > .static {
  flex: 0 0 auto;
  position: relative;
}
.flex > * {
  flex: 0 0 auto;
  position: relative;
}
.flex > .autoMinHeight {
  min-height: auto;
}
.flex > .autoMinWidth {
  min-width: auto;
}
.verticalBaseline {
  align-items: baseline;
  vertical-align: baseline;
}
.verticalCenter {
  align-items: center;
  vertical-align: middle;
}
.verticalTop {
  vertical-align: top;
}
.verticalTextTop {
  vertical-align: text-top;
}
.verticalTextBottom {
  vertical-align: text-bottom;
}
.flex.row > .verticalCenter {
  align-self: center;
}
.fill {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: 0;
}
.allinside {
  max-width: 100%;
  max-height: 100%;
}
.autosize {
  width: auto;
  height: auto;
}
.nonTransparent {
  background-color: #ffffff;
}
.layer {
  position: absolute !important;
  top: 0px;
  left: 0px;
  background-color: #ffffff;
}
.scrollable {
  overflow: auto;
}
.stretchWidth {
  width: 100%;
}
.stretchHeight {
  height: 100%;
}
.hSeparator {
  margin-bottom: 20px;
}
tr.hSeparator > td {
  padding-bottom: 20px;
}
.hSeparatorTiny {
  margin-bottom: 7px;
}
tr.hSeparatorTiny > td {
  padding-bottom: 7px;
}
.hSeparatorsTiny > * {
  margin-bottom: 7px;
}
.vSeparator {
  margin-right: 13px;
}
td.vSeparator {
  padding-right: 13px;
}
.vSeparatorTiny {
  margin-right: 7px;
}
td.vSeparatorTiny {
  padding-right: 7px;
}
.vSeparatorsTiny > * {
  margin-right: 7px;
}
.verticalPanel {
  width: 299px;
}
.verticalPanelNarrow {
  width: 221px;
}
.wideControl,
.flex > .wideControl {
  min-width: 299px;
}
.middleControl,
.flex > .middleControl {
  min-width: 182px;
}
.thinControl {
  width: 65px;
}
.highControl,
.flex > .highControl {
  min-height: 260px;
}
.flex.hasSplitters > .onlyStaticVisible {
  flex-grow: 1;
}
.flex.column.hasSplitters > .initialSize {
  height: 65px;
}
.flex.row.hasSplitters > .initialSize {
  width: 65px;
}
.nonGreedy {
  display: inline-block;
}
.inline {
  display: inline-block;
}
.inlineText {
  display: inline;
}
.innerDlg {
  display: block;
  padding: 10px;
}
.dimmedWindow {
  position: absolute !important;
  background-color: #ffffff;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: 0;
  background-color: black;
  opacity: 0.5;
  z-index: 2147483647;
}
.grindEdge {
  border-radius: 2px;
}
.border {
  border-color: #e6e6e6;
  border-width: 1px;
  border-style: solid;
}
.noBorder {
  border-width: 0 !important;
}
.borderTop {
  border-color: #e6e6e6;
  border-width: 1px;
  border-top-style: solid;
}
.borderBottom {
  border-color: #e6e6e6;
  border-width: 1px;
  border-bottom-style: solid;
}
.padding {
  padding: 7px;
}
.noLeftPadding {
  padding-left: 0px;
}
.paddingSmall {
  padding: 2px;
}
.paddingLarge {
  padding: 13px;
}
.paddingTopLarge {
  padding-top: 13px;
}
.paddingLeft {
  padding-left: 7px;
}
.paddingTop {
  padding-top: 7px;
}
.paddingRight {
  padding-right: 7px;
}
.paddingSides {
  padding-left: 7px;
  padding-right: 7px;
}
.paddingBottom {
  padding-bottom: 7px;
}
.paddingBottomLarge {
  padding-bottom: 13px;
}
.paddingColumn {
  padding-left: 7px;
  padding-right: 7px;
}
.paddingRow {
  padding-top: 7px;
  padding-bottom: 7px;
}
.paddingRowSmall {
  padding-top: 5px;
  padding-bottom: 5px;
}
.paddingNoLeft {
  padding-right: 7px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.paddingColumnSmall {
  padding-left: 5px;
  padding-right: 5px;
}
.innerDlg ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.left-indent-small {
  margin-left: 7px;
}
.left-indent {
  margin-left: 25px;
}
.left-indent2 {
  margin-left: 50px;
}
.slightlytransparent {
  opacity: 0.8;
}
.semitransparent {
  opacity: 0.5;
}
.transparent {
  opacity: 0;
}
label,
input,
textarea,
table,
td,
tr,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
label[data-disabled],
input[data-disabled],
textarea[data-disabled],
table[data-disabled],
td[data-disabled],
tr[data-disabled],
select[data-disabled] {
  color: #989898;
}
.alignright {
  position: absolute;
  right: 0px;
}
.alignbottom {
  position: absolute;
  bottom: 0px;
}
.fillHeight {
  top: 0px;
  bottom: 0px;
}
.fillWidth {
  left: 0px;
  right: 0px;
}
.noWrap {
  white-space: nowrap;
}
label,
h1,
h2,
h3,
h4 {
  white-space: nowrap;
  padding-left: 4px;
  padding-right: 4px;
}
.labelRightPadding {
  padding-right: 4px;
}
.labelLeftPadding {
  padding-left: 4px;
}
.noLeftPadding.labelLeftPadding {
  padding-left: 0;
}
.box {
  display: block;
}
.noStretch {
  white-space: nowrap;
}
td.noStretch {
  width: 1%;
}
.alignBottom {
  vertical-align: bottom;
}
table {
  width: 100%;
}
table.innerTable {
  border-collapse: collapse;
}
table.innerTable td {
  padding: 0px;
}
table.innerTableMultiLine {
  border-collapse: collapse;
}
table.innerTableMultiLine td {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
}
table.innerTableMultiLine tr:first-child td {
  padding-top: 0px;
}
table.innerTableMultiLine tr:last-child td {
  padding-bottom: 0px;
}
.uiRow {
  line-height: 29px;
  align-items: baseline;
  vertical-align: baseline;
}
.uiRowCenter {
  line-height: 29px;
  align-items: center;
  vertical-align: middle;
}
.uiRows > * {
  line-height: 29px;
  align-items: baseline;
  vertical-align: baseline;
}
.uiRow .button,
.uiRowCenter .button {
  padding: 2px 3px;
  margin: 0 3px;
  line-height: initial;
}
.uiRows .button {
  padding: 2px 3px;
  margin: 0 3px;
  line-height: initial;
}
.clrWarning {
  color: #3f51b5;
}
svg .clrWarning,
svg.clrWarning {
  fill: #3f51b5;
}
.clrInfo {
  color: #b5a33f;
}
svg .clrInfo,
svg.clrInfo {
  fill: #b5a33f;
}
.clrError {
  color: #ff4081;
}
svg .clrError,
svg.clrError {
  fill: #ff4081;
}
.cellBase,
.bgColorBase {
  background-color: #ffffff;
}
.cellWarning,
.bgColorWarning {
  background-color: #9fa8da;
}
.cellError,
.bgColorError {
  background-color: #de2121;
}
.cellSelected,
.bgColorSelected {
  background-color: #e6e6e6;
}
.cellHighlight,
.bgColorHighlight {
  background-color: #b8b8b8;
}
.cellDisabled,
.bgColorDisabled {
  background-color: #989898;
}
.innerWindow {
  position: fixed;
  z-index: 2147483646;
  overflow: hidden;
  background: #ffffff;
}
hr.separator {
  border-color: rgba(26, 26, 26, 0);
}
.textCenter {
  text-align: center;
}
.textRight {
  text-align: right;
}
.textWrap {
  white-space: normal !important;
}
.textEllipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smallText {
  font-size: 10px;
}
.slightlyLargerText {
  font-size: 16px;
}
.largeText {
  font-size: 18px;
}
.unimportantText {
  font-size: 10px;
  opacity: 0.8;
}
.slopingText {
  transform: rotate(-45deg);
  transform-origin: center;
  transform-style: preserve-3d;
}
.textOther {
  font-style: italic;
}
.textHighlight {
  color: #3f51b5;
}
.underscoredText {
  text-decoration: underline;
}
.sectionHeader {
  font-weight: bold;
}
.topmost {
  position: absolute;
  z-index: 2147483647;
}
.behind {
  z-index: -1;
}
.globalResizeVertical {
  cursor: ns-resize;
}
.resizeVertical {
  cursor: ns-resize;
  height: 5px;
  bottom: -3px;
  left: 0px;
  right: 0px;
  position: absolute;
  overflow: visible;
}
.resizeVertical.splitterOpposite {
  bottom: auto;
  top: -3px;
}
.globalResizeHorizontal {
  cursor: ew-resize;
}
.resizeHorizontal {
  cursor: ew-resize;
  width: 5px;
  right: -3px;
  top: 0px;
  bottom: 0px;
  position: absolute;
  overflow: visible;
  z-index: 2;
}
.resizeHorizontal.splitterOpposite {
  right: auto;
  left: -3px;
}
.hoverHeader {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  opacity: 0.6;
  fill: #000000;
  z-index: 999;
}
.splitter {
  align-self: stretch;
  flex: 0 0 7px;
  z-index: 999999;
}
.flex.column > .splitter {
  cursor: ns-resize;
  min-height: 7px;
  max-height: 7px;
}
.flex.row > .splitter {
  cursor: ew-resize;
  min-width: 7px;
  max-width: 7px;
}
.margins {
  margin: 7px;
}
.marginsColumn {
  margin-top: 7px;
  margin-bottom: 7px;
}
.marginsRow {
  margin-left: 7px;
  margin-right: 7px;
}
.marginTop {
  margin-top: 7px;
}
.marginTopSmall {
  margin-top: 2.3333333333333335px;
}
.marginTopLarge {
  margin-top: 14px;
}
.marginBottomLarge {
  margin-bottom: 14px;
}
.marginLarge {
  margin: 14px;
}
.marginBottom {
  margin-bottom: 7px;
}
.marginLeftSmall {
  margin-left: 3px;
}
.autoMargin {
  margin: auto;
}
.noMargin {
  margin: 0px;
}
.noOverflow {
  overflow: hidden;
}
.noresize {
  resize: none;
  overflow-y: auto;
}
.hoverHighlight:hover {
  color: #3f51b5;
  fill: #3f51b5;
}
.clickable {
  cursor: pointer;
}
.clickable:hover {
  color: #3f51b5;
  fill: #3f51b5;
}
.clickable:hover {
  color: inherit !important;
  fill: inherit !important;
}
.clickableLabel {
  cursor: pointer;
}
.clickableLabel:hover {
  color: #3f51b5;
  fill: #3f51b5;
}
.clickableLabel:hover {
  color: inherit !important;
  fill: inherit !important;
}
* [data-keyfocused]:not {
  outline: none !important;
  box-shadow: none;
}
* [data-keyfocused] {
  outline: #000000 dashed 1px !important;
  outline-offset: -2px;
  box-shadow: none;
}
.highlightColor {
  color: #3f51b5;
  background-color: #b8b8b8;
}
.textColor {
  color: #000000;
  background-color: #ffffff;
}
svg .textColor,
svg.textColor {
  fill: #000000;
  stroke: #000000;
}
.fontLineSize,
.flex > .fontLineSize {
  min-height: 16px;
  max-height: 16px;
  height: 16px;
}
.middleImageSize,
.flex > .middleImageSize {
  max-width: 104px;
  max-height: 104px;
}
.middleImageSizeExact {
  max-width: 104px;
  max-height: 104px;
  width: 104px;
  height: 104px;
}
.biggerImageSize,
.flex > biggerImageSize {
  max-width: 312px;
  max-height: 208px;
}
.biggerImageSizeExact {
  max-width: 208px;
  max-height: 208px;
  width: 208px;
  height: 208px;
}
.middleHeaderHeight {
  height: 138px;
}
.biggerHeaderHeight {
  height: 242px;
}
[data-contentType='visualization'] {
  z-index: 20;
}
.titleMargin {
  -webkit-margin-before: 7px;
  -webkit-margin-after: 7px;
}
.blockTitleMargin {
  margin-top: 26px;
  margin-bottom: 7px;
}
.blockTitleMarginFirst {
  margin-top: 13px;
  margin-bottom: 7px;
}
h2 {
  -webkit-margin-before: 7px;
  -webkit-margin-after: 7px;
}
.sizeLabel {
  position: absolute;
  right: 0;
  bottom: 1em;
  text-align: center;
  background: #616161;
  opacity: 0.75;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  padding-left: 0.5em;
  padding-right: 0.9em;
  margin-right: 0.1em;
}
.ignoreMouse {
  pointer-events: none;
}
.noBorder {
  border: none;
}
.floatLeft {
  float: left;
}
.floatRight {
  float: right;
}
.centerChild {
  text-align: center;
}
.centerChild:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.centerStretchImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.coverImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.initialFontSize {
  font-size: initial;
}
.baseBackgroundBitTransparent {
  background-color: rgba(255, 255, 255, 0.8200000000000001);
}
.bottomFadeout {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(100%, #ffffff));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0, #ffffff 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0, #ffffff 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0, #ffffff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0, #ffffff 100%);
  z-index: 1;
}
fieldset {
  border-color: #e6e6e6;
  border-width: 1px;
  border-style: solid;
}
.hoverScrollbar:not(:hover)::-webkit-scrollbar,
.hoverScrollbar:not(:hover)::-webkit-scrollbar-thumb {
  visibility: hidden;
}
.hotlink {
  color: #3f51b5;
}
.hotlink:hover {
  text-decoration: underline;
  cursor: pointer;
}
.transparentBackground {
  background-color: rgba(255, 255, 255, 0.8);
}
.dropeffect {
  outline: #3f51b5 dashed 1px;
  outline-offset: -1px;
}
.avoid-clicks {
  pointer-events: none;
}
.lookupField {
  color: #008000;
}
.lookupFieldInConflict {
  margin-left: 3px;
  color: #ff4081;
  font-weight: bold;
}
.lookupFieldCover {
  outline: thin solid #008000;
}
.left-indent {
  margin-left: 24px;
}
.grindEdge {
  border-radius: 0px;
}
.flex.row > .splitter {
  margin-right: -7px;
  /* results in a transparent, but well working splitter */

}
.flex.column > .splitter {
  margin-bottom: -7px;
}
.fieldHeading {
  font-size: 10px;
}
.largeText,
h2 {
  font-weight: 500;
  opacity: 0.87;
  font-size: 20px;
}
.hoverHighlight {
  cursor: pointer;
}
.hoverHighlight:hover {
  color: inherit !important;
  fill: inherit !important;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
@-webkit-keyframes hide {
  from {
    opacity: 1.0;
    visibility: visible;
  }
  to {
    opacity: 0.0;
    visibility: visible;
  }
}
@-webkit-keyframes show {
  from {
    opacity: 0.0;
    visibility: visible;
  }
  to {
    opacity: 1.0;
    visibility: visible;
  }
}
@-webkit-keyframes slideLeftOut {
  from {
    transform: translate(0, 0);
    visibility: visible;
  }
  to {
    transform: translate(-110%, 0);
    visibility: visible;
  }
}
@-webkit-keyframes slideLeftIn {
  from {
    transform: translate(110%, 0);
    visibility: visible;
  }
  to {
    transform: translate(0, 0);
    visibility: visible;
  }
}
@-webkit-keyframes slideRightIn {
  from {
    transform: translate(-110%, 0);
    visibility: visible;
  }
  to {
    transform: translate(0, 0);
    visibility: visible;
  }
}
@-webkit-keyframes zoomIn {
  from {
    transform: scale(0, 0);
    visibility: visible;
  }
  to {
    transform: scale(1, 1);
    visibility: visible;
  }
}
@-webkit-keyframes zoomOut {
  from {
    transform: scale(1, 1);
    visibility: visible;
  }
  to {
    transform: scale(0, 0);
    visibility: visible;
  }
}
@keyframes animatedBackground {
  0% {
    background-position: 0% 0%;
  }
  4% {
    background-position: 0% 0%;
  }
  96% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 100% 100%;
  }
}
.animBackground {
  animation: animatedBackground 12s linear infinite alternate both;
}
.animPaused {
  animation-play-state: paused;
}
.animSlideLeftOut {
  -webkit-animation-name: slideLeftOut;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease;
}
.animSlideLeftIn {
  -webkit-animation-name: slideLeftIn;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease;
}
.animSlideRightIn {
  -webkit-animation-name: slideRightIn;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease;
}
.controlAnimHide {
  -webkit-animation-name: hide;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-out;
}
.controlAnimShow {
  -webkit-animation-name: show;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-out;
}
.animViewZoomIn {
  -webkit-animation-name: zoomIn;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in;
}
.animViewZoomOut {
  -webkit-animation-name: zoomOut;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-out;
}
.animViewFadeIn {
  -webkit-animation-name: show;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-out;
}
.animViewFadeOut {
  -webkit-animation-name: hide;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in;
}
.animHeight {
  transition: height 0.3s, min-height 0.3s, max-height 0.3s;
  transition-timing-function: ease-in;
}
.animWidth {
  transition: width 0.3s, min-width 0.3s, max-width 0.3s;
  transition-timing-function: ease-in;
}
.animationTime {
  transition-duration: 0.3s;
}
.appFade {
  transition: opacity 0.3s;
}
@-webkit-keyframes fadeWindowOut {
  from {
    opacity: 1.0;
    visibility: visible;
  }
  to {
    opacity: 0.0;
    visibility: visible;
  }
}
@-webkit-keyframes fadeWindowIn {
  from {
    opacity: 0.0;
    visibility: visible;
  }
  to {
    opacity: 1.0;
    visibility: visible;
  }
}
.windowAnimHide {
  -webkit-animation-name: fadeWindowOut;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-out;
}
.windowAnimShow {
  -webkit-animation-name: fadeWindowIn;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-out;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
#windowcontent {
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding: 0;
  margin: 0;
}
body {
  margin: 0px;
  cursor: default;
  overflow: hidden;
  /* hide scrollbars */

  padding: 0;
  width: 100%;
  height: 100%;
  /* prevent text selection */

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  background: #ffffff;
  color: #000000;
  fill: #000000;
  font-size: 13px;
}
.textSelectable {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  cursor: auto;
}
p {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  cursor: auto;
}
/* Skin selection */
::selection {
  background-color: #3f51b5;
}
::-moz-selection {
  background-color: #3f51b5;
}
html {
  overflow: hidden;
}
[data-control-class=MainTabs] .tabsHeaderCaption {
  min-width: 2em;
}
/* Skin selection */
::selection {
  color: #ffffff;
  background-color: #3f51b5;
}
::-moz-selection {
  color: #ffffff;
  background-color: #3f51b5;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: #e6e6e6;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #b8b8b8;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
body {
  /* This is scrollbar fallback for IE and other non-WebKit browsers, where support for skinned scrollbars is limited*/

  scrollbar-face-color: #cfcfcf;
  scrollbar-arrow-color: #000000;
  scrollbar-track-color: rgba(0, 0, 0, 0);
  scrollbar-shadow-color: #cfcfcf;
  scrollbar-highlight-color: #cfcfcf;
  scrollbar-3dlight-color: #cfcfcf;
  scrollbar-darkshadow-color: #cfcfcf;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.toolbar {
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex-flow: row;
  overflow: hidden;
}
.toolbar .toolbar {
  padding-top: 0;
  padding-bottom: 0;
}
.toolbar > .verticalCenter {
  align-self: center;
}
.toolbar hr {
  border-color: rgba(26, 26, 26, 0);
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 0;
  margin-bottom: 0;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.animTabHide {
  -webkit-animation-name: hide;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease;
  /* ease is the default */

}
.animTabShow {
  -webkit-animation-name: show;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease;
  /* ease is the default */

}
.tabs {
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex-flow: column;
  max-width: 100%;
  overflow: visible;
}
.tabsHeaders {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex-flow: row;
  outline: none;
  white-space: nowrap;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
  overflow: visible;
}
.tabsHeader {
  flex: 0 1 auto;
  position: relative;
  min-width: 0px;
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex-flow: row;
  overflow: hidden;
  text-indent: 0px;
  text-overflow: ellipsis;
  min-height: 0px;
  align-items: center;
}
.tabsHeader.fixedWidth {
  flex: 0 1 auto;
  width: 117px;
}
.tabsHeaderCaption {
  flex: 1 1 auto;
  position: relative;
  min-width: 0px;
  display: block;
  overflow: hidden;
  text-indent: 0px;
  text-overflow: ellipsis;
  min-height: 0px;
  margin-right: 8px;
  margin-left: 3px;
}
.tabsHeaderCaption > .rating {
  max-height: 13px;
}
.tabsHeaderIcon {
  flex: 0 0 auto;
  position: relative;
}
.tabPanels {
  flex: 0 0 auto;
  position: relative;
}
.tabPanel {
  position: absolute;
  top: 0;
  left: 0;
}
/* Drag & Drop specific */
.tabsHeader[data-dropeffect] {
  transition: transform 0.4s;
}
.tabsHeader[data-dropafter] {
  transform: translate(-30%, 0%);
  z-index: 999;
}
.tabsHeader[data-dropbefore] {
  transform: translate(30%, 0%);
  z-index: 999;
}
.tabsHeader {
  opacity: 0.6;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
  transition: opacity 0.3s;
}
.tabsHeader:hover,
.tabsHeader:hover[data-selected] {
  background: #cfcfcf;
  opacity: 1;
}
.tabsHeader[data-selected] {
  color: #3f51b5;
  border-bottom: 1px solid #3f51b5;
  transition: opacity 0.3s;
  opacity: 1;
  z-index: 200;
}
.tabsHeaderCloseButton {
  flex: 0 0 auto;
  position: relative;
  width: 12px;
  height: 12px;
  width: 14px;
  height: 14px;
  margin-left: 7px;
  margin-right: -7px;
  border-radius: 3px;
}
.tabsHeaderCloseButton[data-showOnHover] {
  position: absolute;
  right: 0px;
  margin-right: 2px;
  opacity: 0;
  z-index: 5;
}
[data-selected] .tabsHeaderCloseButton[data-showOnHover]:hover {
  opacity: 1;
}
.switcher.tabs {
  display: inline-block;
}
.switcher .tabsHeader {
  border: 1px solid #3f51b5;
  margin: 0;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.switcher .tabsHeader:first-child {
  border-radius: 2px;
  border-radius: 0px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.switcher .tabsHeader:last-child {
  border-radius: 2px;
  border-radius: 0px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.switcher.blockTitleMargin {
  margin-top: 26px;
}
.tabs[data-mainTabs] {
  background-color: #3f51b5;
  color: #ffffff;
  fill: #ffffff;
}
.tabs[data-mainTabs] .tabsHeaders {
  background-color: #303f9f;
  border-bottom: 2px solid #3f51b5;
  height: 100%;
  align-items: stretch;
}
.tabs[data-mainTabs] .tabsHeader[data-selected] {
  background-color: #303f9f;
  color: #ffffff;
  fill: #ffffff;
  border-bottom: 2px solid #ffffff;
}
.tabsHeader[data-selected] {
  border-bottom: 2px solid #3f51b5;
}
.tabs[data-mainTabs] .tabsHeader:hover,
.tabs[data-mainTabs] .tabsHeader:hover[data-selected] {
  background: #303f9f;
  opacity: 1;
}
.tabs_container {
  background-color: #303f9f;
}
.switcher .tabsHeader {
  padding: 8px;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.listview {
  background-color: rgba(0, 0, 0, 0);
  color: #000000;
}
.transparentBackground .listview {
  background-color: transparent;
}
.listview .lassoLayer {
  position: absolute;
  border: 1px solid navy;
  opacity: 0.5;
  background-color: blue;
  z-index: 99999999;
}
.listview.viewControl {
  border-style: none;
  border-width: 0px;
  background-color: initial;
}
.listview.showInline {
  border-style: none;
  border-width: 0px;
  background-color: initial;
}
/*.listview .scrollingCanvas { // Just an example of a possible listview background
	background-color: Blue; 	
	background: linear-gradient(to right, #00ff00 0%,#ff0000 100%);
}*/
.listview .groupHeader {
  height: 48px;
  font-size: 39px;
  padding: 3px;
}
/* Listview Group Header that is drawn above/left of a group that starts off-screen*/
.listview .groupHeader[data-partial] {
  /*	-webkit-filter: opacity(0.5);	*/

}
.rowitem {
  overflow: hidden;
}
.rowitem[data-deleting] {
  transition: all 0.3s;
}
.rowitem[data-deleting][data-run] {
  transform: translate(105%, 0);
}
.rowitem[data-moving] {
  transition: all 0.3s ease 0.3s;
}
.rowitem[data-dropeffect] {
  transition: transform 0.2s;
}
.rowitem[data-dropafter] {
  transform: translate(0%, -50%);
  z-index: 999;
  border-color: #e6e6e6;
  border-width: 1px;
  border-bottom-style: solid;
}
.rowitem[data-dropbefore] {
  transform: translate(0%, 50%);
  z-index: 999;
  border-color: #e6e6e6;
  border-width: 1px;
  border-top-style: solid;
}
.transparentList .lvCanvas {
  background-color: transparent !important;
}
.groupSepHeader {
  min-height: 19px;
  padding-left: 5px;
  font-weight: bold;
}
div:focus .lvItem[data-selected] {
  background: #e6e6e6;
  color: #3f51b5;
  fill: #3f51b5;
}
.lvItem {
  height: 27px;
  line-height: 27px;
  padding: 0px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lvItem[data-hover]:not([data-disabled]) {
  background: #cfcfcf;
}
.lvItem[data-selected] {
  background: #ececec;
}
.lvItem[data-dropeffect] {
  transition: transform 0.2s;
}
.lvItem[data-dropbefore] {
  transform: translate(0%, 25%);
  z-index: 999;
  border-color: #e6e6e6;
  border-width: 1px;
  border-top-style: solid;
}
.lvItem[data-dropafter] {
  transform: translate(0%, -25%);
  z-index: 999;
  border-color: #e6e6e6;
  border-width: 1px;
  border-bottom-style: solid;
}
.lvItem.gridrow {
  /* padding inculded in cells, not needed for row */

  padding-left: 0;
  padding-right: 0;
}
.lvItem[data-icon] span {
  margin-left: 3px;
  padding-right: 4px;
  width: 13px;
  height: 13px;
  fill: #000000;
}
.lvItem[data-disabled] {
  fill: #989898;
  color: #989898;
}
.lvItem[data-hover]:not([data-disabled]) .lvHeaderIcon {
  width: 13px;
}
.lvHeaderItem {
  height: 27px;
  line-height: 27px;
  padding: 0px;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  border-width: 1px;
  border-style: outset;
  align-items: center;
  vertical-align: middle;
  font-weight: bold;
  overflow: visible;
}
.transparentBackground .lvHeaderItem {
  background-color: transparent;
  border-color: transparent;
}
.lvHeaderFillRest {
  background-color: #e6e6e6;
}
.lvHeaderItemContentRight {
  flex: 1 1 auto;
  position: relative;
  min-width: 0px;
  min-height: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lvHeaderItemContent {
  flex: 1 1 auto;
  position: relative;
  min-width: 0px;
  min-height: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.lvHeaderItemResize {
  cursor: ew-resize;
  width: 5px;
  right: -3px;
  top: 0px;
  bottom: 0px;
  position: absolute;
  overflow: visible;
  z-index: 2;
}
.lvHeaderSingleItem {
  height: 27px;
  line-height: 27px;
  padding: 0px;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  border-width: 1px;
  border-style: outset;
  align-items: center;
  vertical-align: middle;
  font-weight: bold;
  overflow: visible;
  border: 0px none;
  border-left: 1px solid #e6e6e6;
  padding-left: 3px;
  padding-right: 3px;
  height: inherit;
  text-align: center;
}
.transparentBackground .lvHeaderSingleItem {
  background-color: transparent;
  border-color: transparent;
}
.lvColumnItem {
  overflow: hidden;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
  padding-left: 2px;
  padding-right: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lvColumnItem[data-right-aligned] {
  margin-right: 5px;
}
.itemNowPlaying,
.itemNowPlaying label {
  font-weight: bold;
  color: #ff4081;
  fill: #ff4081;
}
.itemInaccessible,
.itemInaccessible label {
  color: #989898;
}
.griditem .unknownAA {
  fill: #9fa8da;
}
.lvHeaderItem[data-dropbefore]:not([data-dragging]) {
  transition: transform 0.2s;
  transform: translateX(10px);
  z-index: 999;
}
.lvHeaderItem[data-dropafter]:not([data-dragging]) {
  transition: transform 0.2s;
  transform: translateX(-10px);
  z-index: 999;
}
.lvHeaderItem[data-dragging] {
  opacity: 0.5;
}
.lvHeaderSort {
  fill: #000000;
  width: 0;
  height: 13px;
  margin-right: -2px;
}
.sortAsc {
  width: 13px;
  transform: rotate(180deg);
}
.sortDesc {
  width: 13px;
}
.lvHeaderItem[data-sortAsc] > .lvHeaderSort {
  width: 13px;
  transform: rotate(180deg);
}
.lvHeaderItem[data-sortDesc] > .lvHeaderSort {
  width: 13px;
}
.lvHeaderSort[data-sortAsc] {
  width: 13px;
  transform: rotate(180deg);
}
.lvHeaderSort[data-sortDesc] {
  width: 13px;
}
.lvHeaderItem.lvSimpleHeader {
  flex: 10 0 auto;
  border: 0;
  padding-left: 4px;
}
.lvHeaderItem.lvSimpleHeaderRightAligned {
  justify-content: flex-end;
  padding-right: 7px;
}
.lvHeaderSortLabel {
  fill: #000000;
  font-size: 70%;
  width: 0;
  height: 13px;
  margin-right: -2px;
  margin-top: -2px;
}
.lvHeaderItem[data-sort-label] > .lvHeaderSortLabel {
  width: auto;
}
.rowHeight1line {
  height: 27px !important;
  line-height: 27px !important;
}
.rowHeight2line {
  height: 54px !important;
  line-height: 27px !important;
}
.attributePopup {
  background-color: #f1f1f1;
  color: #000000;
  fill: #000000;
}
.attributePopup .hotlink:not(:hover) {
  color: #000000;
}
.attributePopup .toolbutton-background {
  fill: #000000;
}
.popupIndicator {
  fill: #f1f1f1;
}
.griditem[data-hover],
.gridItemSquare[data-hover] {
  background-color: #cfcfcf;
}
.griditem .gridItemInner {
  margin: 4px;
}
.lvItem.griditem.imageItem {
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 3px;
}
.lvItem.griditem.imageItem span {
  line-height: initial;
}
.griditem .imageSquare {
  position: absolute;
  top: 3px;
  left: 10px;
  height: 122px;
  width: 122px;
  border-width: 0px;
}
.imageSquare .artworkBg {
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 100;
}
.iconLarge img {
  pointer-events: none;
}
.griditem .imageInfo {
  position: absolute;
  top: 128px;
  width: 122px;
  left: 10px;
}
.griditem[data-selected],
.gridItemSquare[data-selected] {
  background-color: #f3f3f3;
}
div:focus .griditem[data-selected],
div:focus .gridItemSquare[data-selected] {
  background: #e6e6e6;
  color: #3f51b5;
  fill: #3f51b5;
}
.griditem[data-hover],
.gridItemSquare[data-hover] {
  overflow: visible;
  z-index: 9999;
}
.griditem[data-deleting] {
  transition: all 0.6s;
}
.griditem[data-deleting][data-run] {
  opacity: 0.0;
  transform: rotate(360deg) scale(0);
}
.griditem[data-moving] {
  transition: top 0.6s, left 0.6s;
}
.griditem[data-dropeffect] {
  transition: transform 0.2s;
}
.griditem[data-dropafter] {
  transform: translate(0%, -50%);
  z-index: 999;
  border-color: #e6e6e6;
  border-width: 1px;
  border-bottom-style: solid;
}
.griditem[data-dropbefore] {
  transform: translate(0%, 50%);
  z-index: 999;
  border-color: #e6e6e6;
  border-width: 1px;
  border-top-style: solid;
}
.griditemHeight,
.flex > .griditemHeight {
  height: 143px;
  max-height: 143px;
  min-height: 143px;
}
.griditemWidth,
.flex > .griditemWidth {
  width: 143px;
  max-width: 143px;
  min-width: 143px;
}
.gridItemSquare {
  height: 143px;
  max-height: 143px;
  min-height: 143px;
  width: 143px;
  max-width: 143px;
  min-width: 143px;
}
.griditemHeightWithText,
.flex > .griditemHeightWithText {
  height: 172px;
  max-height: 172px;
  min-height: 172px;
}
.griditemHeightWithScrollbar,
.flex > .griditemHeightWithScrollbar {
  height: 182px;
  max-height: 182px;
  min-height: 182px;
}
.imageItem:not(.smallItem) {
  height: 172px;
  max-height: 172px;
  min-height: 172px;
  width: 143px;
  max-width: 143px;
  min-width: 143px;
}
.imageItem:not(.smallItem):not(.twoLines) {
  height: 159px;
  max-height: 159px;
  min-height: 159px;
}
.gridViewSmallHeight {
  min-height: 88px;
}
.gridViewSmallOneRowHeight {
  min-height: 104px;
}
.imageItem.smallItem {
  width: 72px;
  max-width: 72px;
  min-width: 72px;
  height: 88px;
  max-height: 88px;
  min-height: 88px;
  font-size: 10px;
}
.griditem.smallItem .imageSquare {
  top: 2px;
  left: 7px;
  height: 57px;
  width: 57px;
}
.griditem.smallItem .imageSquare .padding {
  padding: 3px;
}
.griditem.smallItem .imageInfo {
  top: 67px;
  width: 64px;
  left: 3px;
  height: 13px;
}
.visibleOnHover {
  display: inline-block;
  opacity: 0 !important;
  width: 0px;
}
.lvItem[data-hover]:not([data-disabled]) .visibleOnHover {
  opacity: 1 !important;
  transition: width 0s, opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: 0.3s;
}
.lvInlineIcon {
  display: inline-block;
  width: 14px;
  height: 14px;
  width: 24px;
  height: 24px;
  opacity: 0.54;
  padding: 0px;
}
.lvInlineIcon .toolbutton {
  padding: 0;
  width: inherit;
  height: inherit;
}
.lvItem:not([data-selected]) .showWhenItemSelected {
  display: none !important;
}
.showWhenSelectionMode {
  display: none;
}
.listview[data-selection-mode] .showWhenSelectionMode {
  display: block;
}
.listview.showInline.canScrollHoriz,
.listview.showInline.canScrollHoriz .lvBody,
.listview.showInline.canScrollHoriz .lvFill,
.listview.showInline.canScrollHoriz .lvCanvas {
  display: inline-block;
}
.griditem .gridItemInner {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
.griditem[data-hover] .gridItemInner {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
.griditem[data-hover]:not([data-selected]),
.gridItemSquare[data-hover]:not([data-selected]) {
  background-color: inherit !important;
  background: inherit !important;
}
.lvHeaderSortLabel {
  margin-right: -3px;
  margin-top: -3px;
}
.lvItem .rowitem {
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  border: 1px solid #bdbdbd;
}
/* Alternate colors for listview lines */
.lvItem[data-even]:not([data-selected]) {
  background-color: #fcfcfc;
}
.transparentBackground .lvItem[data-even]:not([data-selected])[data-hover],
.lvItem[data-even]:not([data-selected])[data-hover] {
  background-color: #cfcfcf;
}
.transparentBackground .lvItem[data-even]:not([data-selected]) {
  background-color: transparent;
}
/* Selected listview item */
.lvItem[data-selected],
div:focus .lvItem[data-selected] {
  color: #000000;
  fill: #000000;
}
.lvItem[data-selected][data-hover],
div:focus .lvItem[data-selected][data-hover] {
  background-color: #b8b8b8;
}
.lvItem[data-selected] .clickable:hover,
div:focus .lvItem[data-selected] .clickable:hover {
  color: #cfcfcf;
}
.lvItem[data-selected] .showWhenItemSelected,
div:focus .lvItem[data-selected] .showWhenItemSelected {
  fill: #000000;
}
.lvItem.itemNowPlaying[data-selected],
.lvItem.itemNowPlaying[data-selected] label,
.lvItem[data-selected] .ratingStar,
.lvItem[data-selected] .itemNowPlaying,
.lvItem[data-selected] .itemNowPlaying label {
  color: #ffffff;
  fill: #ffffff;
}
.lvItem[data-selected] .ratingCanvas[data-hover] .ratingStar,
.lvItem.itemNowPlaying[data-selected] .ratingStar,
.lvItem[data-selected] .itemNowPlaying .ratingStar {
  fill: #eceef8;
}
.lvItem[data-selected] {
  fill: #000000;
  /* A temporary tweak, should be better designed once the hover button stabilize */

}
/* Main tree has slightly different selection - less prominent */
[data-control-class=MediaTree] .lvItem[data-selected] {
  color: #ff4081;
  fill: #ff4081;
  background-color: inherit;
}
[data-control-class=MediaTree] .lvItem[data-selected][data-hover] {
  background-color: #cfcfcf;
}
.lvHeaderItem {
  border: 0px none;
  border-left: 1px solid #e6e6e6;
  padding-left: 3px;
  padding-right: 3px;
}
.lvHeader:hover > .lvHeaderItems.resizeable > .lvHeaderItem {
  border-left: 1px solid #fcfcfc;
}
.lvHeader:hover > .lvHeaderItems.resizeable > .lvHeaderFillRest {
  border-left: 1px solid #fcfcfc;
}
.lvColumnItem {
  border: 0px none;
  border-left: 1px solid transparent;
  padding-left: 3px;
  padding-right: 3px;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.icnExpand {
  width: 14px;
  height: 14px;
  width: 24px;
  height: 24px;
  opacity: 0.54;
}
.treeRow > * {
  align-items: center;
  vertical-align: middle;
}
.treeLevelIndent,
.flex > .treeLevelIndent {
  min-width: 24px;
  max-width: 24px;
  width: 24px;
}
.treeRow {
  padding: 2px;
}
.treeRow .icon {
  width: 24px;
  height: 24px;
}
.icnExpand {
  width: 24px;
  height: 24px;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.button {
  display: inline-block;
  padding: 6px 24px;
  margin: 7px;
  align-self: center;
  white-space: nowrap;
  text-align: center;
}
.rowButton {
  padding: 2px 3px;
  margin: 0 3px;
  line-height: initial;
}
.button:not([data-no-button]) {
  background: rgba(0, 0, 0, 0);
  border-radius: 2px;
  border-radius: 0px;
  border: 1px solid #e6e6e6;
  display: inline-block;
  color: #000000;
  text-decoration: none;
}
.button:hover:not([data-disabled]):not([data-no-button]) {
  background: #cfcfcf;
}
.buttonPushEffect {
  -webkit-transform: translate(1px, 1px);
}
.button:active:not([data-disabled]):not([data-no-button]) {
  -webkit-transform: translate(1px, 1px);
}
.button[data-disabled] {
  color: #989898;
}
.button[data-disabled] label {
  color: #989898;
}
.button[data-default]:not([data-disabled]) {
  box-shadow: 0px 0px 13px #3f51b5;
}
.toolbuttonbase {
  padding: 7px;
  align-content: center;
  align-items: center;
}
.toolbuttonbase label {
  padding-left: 2px;
  padding-right: 2px;
}
.toolbuttonbase:hover:not([data-disabled]),
.toolbuttonbase:hover:not([data-disabled]) label,
.toolbuttonbase:hover .ratingStar {
  color: #3f51b5;
  fill: #3f51b5;
  -webkit-filter: drop-shadow(0px 0px 5px #3f51b5);
}
.toolbuttonbase:active:not([data-disabled]) {
  -webkit-transform: translate(1px, 1px);
}
.toolbuttonbase[data-disabled] {
  fill: #989898;
  color: #989898;
}
.toolbuttonbase:hover:not([data-disabled]) label[data-popuplabel] {
  box-shadow: 0px 0px 3px #3f51b5;
}
.toolbuttonbase[data-selected] {
  opacity: 1;
}
.toolbuttonbase:not([data-checked]).checkable {
  opacity: 0.75;
  fill: #989898;
  color: #989898;
}
.toolbuttonbase:not([data-checked]).checkable:hover:not([data-disabled]) {
  opacity: 1;
}
.toolbuttonbase.checkable[data-checked] {
  opacity: 1;
}
.toolButtonSize {
  width: 16px;
  height: 16px;
}
.toolButtonSizeLarger {
  width: 20px;
  height: 20px;
}
.toolbutton {
  padding: 7px;
  align-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  width: 24px;
  height: 24px;
}
.toolbutton label {
  padding-left: 2px;
  padding-right: 2px;
}
.toolbutton:hover:not([data-disabled]),
.toolbutton:hover:not([data-disabled]) label,
.toolbutton:hover .ratingStar {
  color: #3f51b5;
  fill: #3f51b5;
  -webkit-filter: drop-shadow(0px 0px 5px #3f51b5);
}
.toolbutton:active:not([data-disabled]) {
  -webkit-transform: translate(1px, 1px);
}
.toolbutton[data-disabled] {
  fill: #989898;
  color: #989898;
}
.toolbutton:hover:not([data-disabled]) label[data-popuplabel] {
  box-shadow: 0px 0px 3px #3f51b5;
}
.toolbutton[data-selected] {
  opacity: 1;
}
.toolbutton:not([data-checked]).checkable {
  opacity: 0.75;
  fill: #989898;
  color: #989898;
}
.toolbutton:not([data-checked]).checkable:hover:not([data-disabled]) {
  opacity: 1;
}
.toolbutton.checkable[data-checked] {
  opacity: 1;
}
.toolbutton:hover:not([data-disabled]),
.toolbutton:hover:not([data-disabled]) label,
.toolbutton:hover .ratingStar {
  color: inherit !important;
  fill: inherit !important;
  -webkit-filter: inherit;
  cursor: pointer;
}
.toolbar .toolbutton {
  width: 20px;
  height: 20px;
  width: 24px;
  height: 24px;
}
.lvHeaderSingleItem .toolbutton {
  padding: 2px;
  margin: -2px;
  width: 18px;
  height: 18px;
  background-color: rgba(230, 230, 230, 0.8);
}
.transparentBackground .lvHeaderSingleItem .toolbutton {
  background-color: transparent;
}
.lvHeaderSingleItem.menuButton {
  border-color: transparent;
  position: absolute;
  z-index: 1;
  background-color: transparent;
}
.lvHeaderSingleItem.menuButton .toolbutton {
  height: 27px;
}
.toolbutton-background {
  padding: 7px;
  align-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  opacity: 0.8;
  border-radius: 2px;
  border-radius: 0px;
  border-color: #e6e6e6;
  border-width: 1px;
  border-style: solid;
}
.toolbutton-background label {
  padding-left: 2px;
  padding-right: 2px;
}
.toolbutton-background:hover:not([data-disabled]),
.toolbutton-background:hover:not([data-disabled]) label,
.toolbutton-background:hover .ratingStar {
  color: #3f51b5;
  fill: #3f51b5;
  -webkit-filter: drop-shadow(0px 0px 5px #3f51b5);
}
.toolbutton-background:active:not([data-disabled]) {
  -webkit-transform: translate(1px, 1px);
}
.toolbutton-background[data-disabled] {
  fill: #989898;
  color: #989898;
}
.toolbutton-background:hover:not([data-disabled]) label[data-popuplabel] {
  box-shadow: 0px 0px 3px #3f51b5;
}
.toolbutton-background[data-selected] {
  opacity: 1;
}
.toolbutton-background:not([data-checked]).checkable {
  opacity: 0.75;
  fill: #989898;
  color: #989898;
}
.toolbutton-background:not([data-checked]).checkable:hover:not([data-disabled]) {
  opacity: 1;
}
.toolbutton-background.checkable[data-checked] {
  opacity: 1;
}
.toolbutton-background:hover:not([data-disabled]),
.toolbutton-background:hover:not([data-disabled]) label,
.toolbutton-background:hover .ratingStar {
  color: inherit !important;
  fill: inherit !important;
  -webkit-filter: inherit;
  cursor: pointer;
}
.expandableButton div[data-icon] {
  width: 16px;
  height: 16px;
  width: 24px;
  height: 24px;
}
.button:focus {
  box-shadow: none;
}
.buttons {
  display: flex;
  align-items: stretch;
  align-content: stretch;
}
.buttons.horizontal {
  flex-flow: row nowrap;
}
.buttons.vertical {
  flex-flow: column nowrap;
}
.buttons > .fill {
  flex: 10 10 auto;
  position: relative;
}
.buttons > .left,
.buttons > .top {
  display: flex;
  justify-content: flex-start;
  flex-flow: inherit;
}
.buttons > .right,
.buttons > .bottom {
  display: flex;
  justify-content: flex-end;
  flex-flow: inherit;
}
.buttons.center {
  justify-content: center;
}
.selectButtonBg {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
  margin: 0;
  border-left: 26px solid transparent;
  border-bottom: 26px solid transparent;
  border-right: 26px solid #e6e6e6;
  border-top: 26px solid #e6e6e6;
}
.selectButtonBg:hover:not([data-disabled]) {
  -webkit-filter: drop-shadow(0px 0px 5px #939cce);
  border-right: 26px solid #939cce;
  border-top: 26px solid #939cce;
}
.selectButtonBg:active:not([data-disabled]) {
  margin-top: 1px;
  margin-right: 1px;
}
.selectButtonIcon {
  position: absolute;
  width: 22px;
  height: 22px;
  margin-top: -22px;
}
.artworkSaveIcon,
div:focus .artworkSaveIcon {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0.8;
}
.artworkSaveIcon .toolbutton,
div:focus .artworkSaveIcon .toolbutton,
.artworkSaveIcon:focus .toolbutton,
div:focus .artworkSaveIcon:focus .toolbutton {
  color: #000000;
  fill: #000000;
  background-color: #ffffff;
  padding: 2px;
}
.artworkSaveIcon:hover:not([data-disabled]),
div:focus .artworkSaveIcon:hover:not([data-disabled]) {
  -webkit-filter: drop-shadow(0px 0px 3px #939cce);
  background-color: #939cce;
}
.artworkSaveIcon:active:not([data-disabled]),
div:focus .artworkSaveIcon:active:not([data-disabled]) {
  margin-top: 1px;
  margin-right: 1px;
  background-color: #939cce;
}
.rowitem.rowHeight2line > .selectButtonBg {
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid rgba(230, 230, 230, 0.85);
  border-top: 20px solid rgba(230, 230, 230, 0.85);
}
.rowitem.rowHeight2line > .selectButtonBg:hover:not([data-disabled]) {
  -webkit-filter: drop-shadow(0px 0px 4px #939cce);
  border-right: 20px solid #939cce;
  border-top: 20px solid #939cce;
}
.rowitem.rowHeight2line > .selectButtonBg > .selectButtonIcon {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: -20px;
}
.rowitem:not(.rowHeight2line) > .selectButtonBg,
.griditem.rowHeight1line > .selectButtonBg {
  border: 13px solid rgba(230, 230, 230, 0.85);
}
.rowitem:not(.rowHeight2line) > .selectButtonBg:hover:not([data-disabled]),
.griditem.rowHeight1line > .selectButtonBg:hover:not([data-disabled]) {
  -webkit-filter: drop-shadow(0px 0px 2px #939cce);
  border: 13px solid #939cce;
}
.rowitem:not(.rowHeight2line) > .selectButtonBg > .selectButtonIcon,
.griditem.rowHeight1line > .selectButtonBg > .selectButtonIcon {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: -12px;
  margin-left: -8px;
}
.button:not([data-no-button]) {
  background: #3f51b5;
  color: #ffffff;
  font-size: 13px;
  border-radius: 2px;
  border: 0px;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
.button:hover:not([data-disabled]):not([data-no-button]) {
  background: #3f51b5;
  color: #ffffff;
  cursor: pointer;
}
.buttons .button:hover:not([data-default]),
.buttons .button:not([data-default]) {
  background: #ffffff;
  color: #3f51b5;
}
.buttons .button:hover:not([data-disabled]) {
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
}
.buttons .button {
  padding: 0px 16px;
  line-height: 32px;
  min-width: 64px;
}
.toolButtonSize {
  width: 24px;
  height: 24px;
}
.toolButtonSizeLarger {
  width: 24px;
  height: 24px;
}
.toolbutton[data-disabled] {
  opacity: 0.54;
  fill: #989898;
}
.toolbuttonbase:hover:not([data-disabled]),
.toolbuttonbase:hover:not([data-disabled]) label,
.toolbuttonbase:hover .ratingStar {
  color: inherit !important;
  fill: inherit !important;
  -webkit-filter: inherit;
  cursor: pointer;
}
.lvHeaderSingleItem .toolbutton {
  padding: 0;
  margin: 0;
  width: 16px;
  height: 16px;
  width: 24px;
  height: 24px;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.ratingStar {
  fill: #000000;
}
.ratingStar[data-emptystar] {
  opacity: 0.2;
}
.rating {
  overflow: hidden;
}
.ratingFlex {
  display: flex;
  align-items: center;
}
.ratingCanvas.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.ratingCanvas.left {
  margin-right: auto;
  text-align: left;
}
.ratingCanvas.right {
  margin-right: auto;
  text-align: right;
}
.ratingCanvas:focus:not([data-disabled]):not([data-readonly]) {
  box-shadow: none;
}
.ratingStar[data-fullstar] {
  opacity: 1;
}
.ratingStar[data-halfstar] {
  -webkit-mask-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, #000000), color-stop(45%, #000000), color-stop(50%, rgba(0, 0, 0, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2)));
}
.ratingCanvas[data-hover] .ratingStar,
.itemNowPlaying .ratingStar {
  fill: #3f51b5;
}
.ratingCanvas[data-disabled] .ratingStar,
.itemInaccessible .ratingStar {
  fill: #989898;
}
.ratingPreview {
  width: 300px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.7);
  padding-top: 5px;
  padding-bottom: 5px;
  z-index: 2147483647;
}
.ratingPreview .ratingStar {
  width: 40px;
  height: 40px;
}
.ratingCanvas.flex {
  width: 100%;
  align-items: center;
}
.ratingCanvas.flex > .ratingStar {
  width: auto;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.icon {
  width: 14px;
  height: 14px;
}
.icon[data-disabled] {
  fill: #989898;
}
.iconHover:hover {
  fill: #3f51b5;
}
.iconHoverable {
  width: 14px;
  height: 14px;
  width: 24px;
  height: 24px;
  opacity: 0.54;
}
.closeButton {
  width: 12px;
  height: 12px;
}
.closeButton:hover {
  fill: #ff4081;
}
.iconLarger {
  width: 26px;
  height: 26px;
  fill: #000000;
}
.iconLarge {
  max-height: 91px;
  fill: #e6e6e6;
  fill: #000000;
  opacity: 0.54;
}
.iconLargeSize {
  height: 91px;
  width: 91px;
}
.iconLargeFixed {
  height: 91px;
  position: relative;
}
.largeIconColor {
  fill: #e6e6e6;
}
.iconLargest {
  height: 200;
  width: 200;
  fill: #e6e6e6;
  fill: #000000;
  opacity: 0.54;
}
.infoIcon {
  background-color: #ffffff;
  fill: #000000;
  opacity: 0.7;
  border-radius: 50%;
  padding: 3%;
  margin: 0px;
}
.userIcon {
  border-radius: 50%;
  width: 39px;
  height: 39px;
}
.icon {
  width: 24px;
  height: 24px;
  opacity: 0.54;
}
.closeButton {
  width: 14px;
  height: 14px;
}
.largeIconColor {
  fill: #000000;
  opacity: 0.54;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.editable-select {
  display: flex;
  overflow: hidden;
  align-items: stretch;
  align-content: stretch;
  flex-direction: row;
  flex-wrap: no-wrap;
  border: 0;
  height: auto;
  width: auto;
}
[data-editing] .editable-select {
  height: 100%;
  width: 100%;
}
.es-edit {
  order: 1;
  flex: 1 1 auto;
  margin: 0;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}
.es-edit:focus {
  outline: none;
}
.es-select,
.flex > .es-select {
  order: 2;
  display: flex;
  max-width: 20px;
  min-width: 20px;
  width: 20px;
  align-content: stretch;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #e6e6e6;
  border-left-width: 0px;
  fill: #000000;
}
.es-select:hover:not([data-disabled]),
.flex > .es-select:hover:not([data-disabled]) {
  fill: #3f51b5;
}
.es-select[data-disabled] {
  fill: #989898;
  color: #989898;
}
.es-select svg {
  position: absolute;
}
.editable-select[data-focused] {
  box-shadow: none;
}
.dropdownList .canvas {
  background-color: rgba(8, 8, 8, 0);
}
.dropdownitem {
  background-color: rgba(0, 0, 0, 0);
  color: #000000;
  border-color: #e6e6e6;
  min-height: 20px;
  white-space: nowrap;
  overflow: hidden;
}
.dropdownitem[data-focused],
.dropdownitem[data-selected] {
  background: #e6e6e6;
  color: #3f51b5;
  fill: #3f51b5;
}
.dropdowndata {
  padding: 2px;
  padding-left: 2px;
  padding-right: 2px;
}
.dropdownList {
  border: 1px solid #e6e6e6;
}
.dropdownMargin {
  margin-top: 2px;
  margin-bottom: 2px;
}
.noMargin.dropdownMargin {
  margin-top: 0;
  margin-bottom: 0;
}
.dropdown {
  display: inline-block;
  margin-top: 2px;
  margin-bottom: 2px;
}
.dropdownitem[data-focused],
.dropdownitem[data-selected] {
  color: #ffffff;
  fill: #ffffff;
}
.dropdownitem.lvItem:not([data-selected]) {
  background-color: rgba(255, 255, 255, 0.25);
}
.dropdownitem.lvItem:not([data-selected])[data-hover]:not([data-disabled]) {
  background-color: #dbdbdb;
}
.dropdownList {
  border: 2px solid #e6e6e6;
  border-top-style: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
.dropdownitem.lvItem[data-even]:not([data-selected]) {
  background-color: #fdfdfd;
}
.dropdownitem.lvItem[data-even]:not([data-selected])[data-hover]:not([data-disabled]) {
  background-color: #dbdbdb;
}
input[type="text"] {
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
}
.es-edit,
.es-select {
  border: 1px solid #e6e6e6;
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
}
.es-select svg {
  opacity: 0.54;
  margin-top: 1px;
}
.searchBox .es-edit,
.searchBox .es-select {
  color: #ffffff;
  fill: #ffffff;
  border: 0px;
}
.es-select:hover:not([data-disabled]),
.flex > .es-select:hover:not([data-disabled]) {
  fill: inherit;
  cursor: pointer;
}
.editable-select > input[data-readonly]:hover:not([data-disabled]) {
  cursor: pointer;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.progressContainer[data-grow] {
  flex-grow: 1;
}
.progressBar {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 27px;
  line-height: 27px;
  border: solid #e6e6e6 0px;
}
.progressBar .client {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}
.progressbar .label {
  font-size: 10px;
  color: #000000;
  align-items: center;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 7px;
  padding-right: 7px;
}
.progressBar .progress {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  font-size: 10px;
  color: #000000;
  top: 0px;
  left: 0px;
  background-color: #b8b8b8;
  height: 100%;
  opacity: 0.3;
}
.progressBar .transition {
  transition: width 0.1s ease;
}
.progressBar .label {
  color: #ffffff;
}
[data-id=innerbody] .progressBar .label {
  color: #000000;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.progressLine {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 2px;
}
.progressLine .backLine {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.6);
}
.progressLine .frontLine {
  position: absolute;
  overflow: hidden;
  top: 0px;
  left: 0px;
  height: 100%;
  background-color: #ff4081;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.maskedit {
  position: relative;
  align-items: center;
}
.maskedit .button {
  padding: 2px 3px;
  margin: 0 3px;
  line-height: initial;
}
.wizard_table {
  width: 100%;
}
.wizard_table tr td {
  text-align: right;
  vertical-align: middle;
}
.wizard_table td input {
  width: 100%;
}
.wizard_table .fixed {
  width: 130px;
}
.wizard_table .sampleData {
  text-align: right !important;
  vertical-align: top !important;
}
.wizard_table .leftAligned {
  text-align: left !important;
}
.wizard_table .sample {
  width: 100%;
  padding: 0px 5px 5px 5px;
  border: 1px solid black;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.animCheck {
  display: inline-block;
  white-space: nowrap;
}
.menuitem > .animCheck {
  display: inline-block;
}
.animCheck input[type="radio"] {
  border-radius: 50%;
  margin-top: -1px;
}
.animCheck input[type="checkbox"],
.animCheck input[type="radio"] {
  width: 13px;
  height: 13px;
  border: 1px solid #000000;
  -webkit-appearance: none;
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  position: relative;
}
.animCheck input[type="checkbox"]:disabled,
.animCheck input[type="radio"]:disabled {
  border: 1px solid #989898;
}
.animCheck span[data-icon] svg {
  height: 13px;
  width: 13px;
  fill: #000000;
}
.animCheck span[data-input_container] {
  padding: 0;
  margin: 0;
  margin-right: 3px;
  margin-left: 3px;
  align-items: center;
  display: inline-block;
}
.animCheck svg[svgchk] {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -12px;
  margin-top: 1px;
  pointer-events: none;
}
.animCheck svg[svgchk] path {
  stroke: #000000;
  stroke-width: 13px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: transparent;
}
.animCheck svg[data-disabled] path {
  stroke: #989898;
  fill: transparent;
}
.animCheck[data-disabled] label {
  color: #989898;
}
.animCheck input[type="radio"],
.animCheck input[type="checkbox"] {
  width: 15px;
  height: 15px;
  border: 2px solid #000000;
  opacity: 0.54;
}
.animCheck input[type="radio"]:hover,
.animCheck input[type="checkbox"]:hover {
  cursor: pointer;
}
.animCheck input[type="checkbox"] {
  border-radius: 2px;
}
.animCheck input[type="radio"] {
  border-radius: 50%;
}
.menuitem .animCheck input[type="checkbox"] {
  border: 0px;
}
.menuitem .animCheck {
  min-width: 24px;
}
.animCheck input[type="radio"]:disabled,
.animCheck input[type="checkbox"]:disabled {
  width: 15px;
  height: 15px;
  border: 2px solid #000000;
  opacity: 0.26;
}
.animCheck svg[svgchk] {
  width: 0px;
  height: 0px;
}
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background: #3f51b5;
  border-color: #3f51b5;
  opacity: 1;
}
input[type="radio"]:checked:disabled,
input[type="checkbox"]:checked:disabled {
  background: #3f51b5;
  border-color: #3f51b5;
  opacity: 0.26;
}
.menuitem input[type="checkbox"]:checked {
  background: inherit;
  border-color: inherit;
}
input[type="radio"]:before,
input[type="checkbox"]:before {
  content: "";
  position: absolute;
  left: 0;
  z-index: 1;
  width: 11px;
  height: 11px;
  top: -2px;
  left: -2px;
  border: 2px solid #000000;
}
input[type="checkbox"]:before {
  transition: all 0.3s ease-in-out;
  border-radius: 2px;
}
input[type="radio"]:before {
  border-radius: 50%;
}
.menuitem input[type="checkbox"]:before {
  border-color: #ffffff;
}
input[type="checkbox"]:checked:before {
  transform: rotate(-45deg);
  height: 3.6666666666666665px;
  width: 9.35px;
  top: 1.65px;
  left: 0;
  border-color: #ffffff;
  border-top-style: none;
  border-right-style: none;
}
.menuitem input[type="checkbox"]:checked:before {
  border-color: #b8b8b8;
  height: 5.5px;
  width: 11px;
}
input[type="radio"]:checked:before {
  height: 7px;
  width: 7px;
  top: 0;
  left: 0;
  border-color: #ffffff;
}
input[type="checkbox"]:indeterminate:before {
  top: -1px;
  height: 5.5px;
  left: 1.1px;
  width: 8.8px;
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  border-radius: 0px;
}
input[type="checkbox"]:after {
  content: "";
  position: absolute;
  left: 0;
  width: 11px;
  height: 11px;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
[data-id='player'] {
  min-width: 559px;
}
[data-id='playerMiddle'] {
  overflow: hidden;
  padding: 3px;
  padding-right: 6px;
  min-width: 204px;
}
[data-id='playerRightButtons'] {
  padding: 3px;
}
[data-id='player-volumebar'] {
  width: 46px;
  height: 56px;
}
[data-id='td_player-ltime'] {
  padding-left: 2px;
  width: 52px;
  white-space: nowrap;
  position: relative;
}
[data-id='player-rating'] {
  width: auto;
  padding-top: 2px;
  text-align: center;
  position: relative;
  z-index: 1;
}
[data-id='td_player-rtime'] {
  text-align: right;
  width: 52px;
  white-space: nowrap;
  position: relative;
}
.playerButtons {
  padding: 4px;
}
.playerButton {
  padding: 7px;
  align-content: center;
  align-items: center;
}
.playerButton label {
  padding-left: 2px;
  padding-right: 2px;
}
.playerButton:hover:not([data-disabled]),
.playerButton:hover:not([data-disabled]) label,
.playerButton:hover .ratingStar {
  color: #3f51b5;
  fill: #3f51b5;
  -webkit-filter: drop-shadow(0px 0px 5px #3f51b5);
}
.playerButton:active:not([data-disabled]) {
  -webkit-transform: translate(1px, 1px);
}
.playerButton[data-disabled] {
  fill: #989898;
  color: #989898;
}
.playerButton:hover:not([data-disabled]) label[data-popuplabel] {
  box-shadow: 0px 0px 3px #3f51b5;
}
.playerButton[data-selected] {
  opacity: 1;
}
.playerButton:not([data-checked]).checkable {
  opacity: 0.75;
  fill: #989898;
  color: #989898;
}
.playerButton:not([data-checked]).checkable:hover:not([data-disabled]) {
  opacity: 1;
}
.playerButton.checkable[data-checked] {
  opacity: 1;
}
.playerButton:hover:not([data-disabled]),
.playerButton:hover:not([data-disabled]) label,
.playerButton:hover .ratingStar {
  color: inherit !important;
  fill: inherit !important;
  -webkit-filter: inherit;
  cursor: pointer;
}
.playerBigButton {
  width: 56px;
  height: 56px;
}
.playerSmallButton {
  width: 37px;
  height: 37px;
}
.playerMicroButton {
  width: 20px;
  height: 20px;
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.playerMiniButton {
  width: 33px;
  height: 33px;
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.miniPlayerFrame {
  background-color: #ffffff;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  padding: 9px;
  border-radius: 20px;
  border: 1px solid black;
}
.miniPlayerFrame [data-id='player-volumebar'] {
  width: 46px;
  height: 114px;
}
[data-id='player-vis'] {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0.3;
}
[data-id='player-vis'] canvas {
  position: absolute;
  z-index: 0;
}
[data-id='player'] .progressContainer.flex {
  justify-content: center;
  padding-left: 2em;
  padding-right: 2em;
}
[data-id='player'] [data-control-class='ProgressBar'] {
  max-width: 30em;
  margin-left: 0.3em;
  margin-right: 0.3em;
}
[data-id='player'] .progressBar {
  height: 1em;
}
[data-id='player'] .progressBar .transition {
  background-color: white;
}
[data-id='player-volumebar'] {
  height: 10px;
  width: 52px;
}
.playerSmallButton {
  width: 33px;
  height: 33px;
}
.playerBigButton {
  width: 33px;
  height: 33px;
}
.playerLargeButton {
  width: 65px;
  height: 65px;
}
[data-id='player-ltime'] {
  margin-left: 4px;
}
[data-id='td_player-ltime'] {
  padding-top: 0;
  padding-left: 0;
}
[data-id='player-vis-cont'] {
  margin-right: 8px;
  margin-left: 4px;
}
[data-id='player-vis'] {
  position: relative;
  opacity: 1;
  height: 20px;
  margin-top: 7px;
}
[data-id='player'] {
  background-color: #3f51b5;
  color: #ffffff;
  fill: #ffffff;
}
[data-id='player'] .seekBar {
  background-color: #3f51b5;
}
[data-id='player'] .ratingCanvas[data-hover] .ratingStar {
  fill: #ff4081;
}
[data-id='player'] {
  z-index: 200;
  min-height: 80;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
[data-id='player'] .ticksOuter .tick {
  background-color: #b0b0b0;
}
.playerButton:hover:not([data-disabled]),
.playerButton:hover:not([data-disabled]) label,
.playerButton:hover .ratingStar {
  color: #ffffff;
  fill: #ffffff;
  background-color: #3f51b5;
}
[data-id='player'] .progressBar .label {
  color: #ffffff;
}
.videoContainer {
  border: 4px solid black;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
input,
textarea {
  border-radius: 2px;
  border-radius: 0px;
  background-color: rgba(0, 0, 0, 0);
  color: #000000;
  padding: 2px 3px;
  border: 1px solid #e6e6e6;
}
.focused {
  box-shadow: none;
}
*:focus {
  outline: none;
  box-shadow: none;
}
div:focus {
  box-shadow: none !important;
}
a {
  color: inherit;
}
.controlBase {
  background: rgba(0, 0, 0, 0);
}
.controlDisabledSelected {
  background: #ececec;
}
.controlSelected {
  background: #e6e6e6;
}
.controlHover {
  background: #cfcfcf;
}
.hoverHightlight:hover {
  background: #cfcfcf;
}
[contenteditable] {
  cursor: text;
}
[contenteditable]:focus {
  box-shadow: none;
  overflow: visible;
  border: 1px inset #e6e6e6;
  padding: 2px 3px;
  background-color: rgba(0, 0, 0, 0);
  min-width: 13px;
  display: inline-block;
  margin-top: 0px;
}
.inlineEdit {
  margin: 0px;
  padding: 0px;
}
input[class=inlineEdit] {
  padding: 0px 0px 1px 2px;
}
.inlineEdit input {
  padding: 0px 2px;
  vertical-align: baseline;
  min-width: 0px;
}
.scoreBar {
  border-radius: 2px;
  border-radius: 0px;
  background-color: #b8b8b8;
}
.controlInfo {
  padding-left: 10%;
  padding-right: 10%;
  text-align: center;
  font-style: italic;
}
.shadowedText {
  text-shadow: 0px 0px 13px #ffffff, 0px 0px 10px #ffffff, 0px 0px 7px #ffffff;
}
.largeShadowedText {
  text-shadow: 0px 0px 20px #ffffff, 0px 0px 16px #ffffff, 0px 0px 13px #ffffff, 0px 0px 7px #ffffff;
  font-size: 26px;
}
.veryLargeShadowedText {
  text-shadow: 0px 0px 16px #ffffff, 0px 0px 26px #ffffff, 0px 0px 20px #ffffff, 0px 0px 20px #ffffff, 0px 0px 13px #ffffff;
  font-size: 46px;
}
.controlSelected {
  color: #3f51b5;
  fill: #3f51b5;
}
.inlineEdit {
  background-color: #ffffff;
}
.scoreBar {
  background-color: #939cce;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.menu {
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex-flow: column;
  flex-wrap: nowrap;
  max-width: 442px;
  min-width: 130px;
  background-color: rgba(8, 8, 8, 0);
  position: relative;
  transition: top 0.3s linear;
}
.menuicon {
  order: 1;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: #000000;
  display: flex;
  align-items: stretch;
  align-content: stretch;
  align-content: center;
  align-items: center;
  margin-left: 2px;
  margin-right: 2px;
}
.menutext {
  order: 2;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  flex: 1 1 auto;
  padding-left: 3px;
  padding-right: 13px;
  text-overflow: ellipsis;
}
.submenuicon {
  order: 3;
  fill: #000000;
  width: 13px;
  height: 13px;
  justify-content: flex-end;
  cursor: pointer;
}
.submenuicon:hover {
  color: #3f51b5;
  fill: #3f51b5;
}
.submenuicon:hover {
  color: inherit !important;
  fill: inherit !important;
}
.menuitem {
  border-color: #e6e6e6;
  min-height: 20px;
  overflow: hidden;
  padding: 2px;
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex-flow: row;
  align-items: center;
  vertical-align: middle;
}
.menuitem .rating {
  max-height: 13px;
}
.mainmenu {
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex-flow: row;
  flex-wrap: no-wrap;
  height: 29px;
  background-color: transparent;
  box-shadow: none;
}
.mainmenuitem {
  border-color: #e6e6e6;
  min-height: 20px;
  overflow: hidden;
  padding: 2px;
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex-flow: row;
  align-items: center;
  vertical-align: middle;
  padding: 2px 7px 2px 7px;
  pointer-events: all;
}
.mainmenuitem:hover {
  background-color: #cfcfcf;
  pointer-events: all;
}
.menuitem.menuseparator {
  min-height: 3px;
  margin: 0px;
  padding: 0px;
}
.menuitem.menuseparator:not(.entitledseparator) {
  height: 3px;
}
.menuitem.menuseparator.entitledseparator hr {
  margin-top: 1px;
  margin-bottom: 0px;
}
.menuitem.menuseparator .separatorText {
  font-size: 10px;
  opacity: 0.8;
  text-align: center;
  background-color: rgba(230, 230, 230, 0.8200000000000001);
  text-transform: uppercase;
  padding-right: 2px;
  padding-bottom: 2px;
}
.menuitem.menuseparator hr {
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  border-color: #e6e6e6;
}
.menuitem[data-focused],
.menuitem[data-selected] {
  background-color: #cfcfcf;
}
.menuitem[data-checked] {
  border-color: #e6e6e6;
  border-width: 1px;
  border-style: solid;
  box-shadow: inset -1px -1px 1px #ffffff, inset 1px 1px 1px #ffffff;
  background-color: #e6e6e6;
}
.menuitem[data-disabled] > .menutext {
  color: #989898;
}
.menuViewport {
  position: relative;
  overflow: hidden;
  margin-top: 1px;
  margin-bottom: 1px;
}
.menuCanvas {
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex-flow: column;
  overflow: hidden;
  flex-wrap: nowrap;
  box-shadow: inset 1px 1px 0px 0px rgba(102, 102, 102, 0);
  border: 1px solid #e6e6e6;
  background-color: rgba(8, 8, 8, 0);
  padding: 1px;
}
.menuCanvas[data-keyfocused] {
  outline: none !important;
}
.menuScrollBtn {
  display: none;
  height: 10px;
  box-shadow: inset 1px 1px 0px 0px rgba(102, 102, 102, 0);
  border: 1px solid #e6e6e6;
  padding: 1px;
  background-color: rgba(8, 8, 8, 0);
  display: relative;
  transition: box-shadow 0.1s ease-out;
  fill: #000000;
}
.menuScrollBtn:hover {
  box-shadow: inset -1px -1px 0px 0px rgba(102, 102, 102, 0);
  background-color: rgba(0, 0, 0, 0);
}
.menuicon:not(.animCheck) {
  width: 24px;
  height: 24px;
  opacity: 0.54;
}
.submenuicon {
  width: 24px;
  height: 24px;
  opacity: 0.54;
}
.mainmenuitem[data-checked] .menutext {
  color: #ffffff;
  fill: #ffffff;
}
.menuitem[data-checked] {
  background-color: #ff4081;
}
.mainmenu .menuitem {
  color: #ffffff;
  padding-left: 13px;
  padding-right: 13px;
}
.menuitem[data-checked] .menutext {
  color: #ffffff;
  fill: #ffffff;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.seekBarOuter {
  position: relative;
  width: 100%;
  height: 12px;
  margin-top: auto;
  margin-bottom: auto;
  z-index: 9999;
}
.seekBarOuter:focus {
  box-shadow: none;
}
.seekBar {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  height: 2px;
  border-radius: 2px;
}
.seekBarBefore {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  height: 2px;
  border-radius: 2px;
  border-radius: 0px;
  top: 0px;
  background-color: #ff4081;
  width: 12px;
  z-index: 3;
}
.seekBarBefore[data-disabled] {
  opacity: 0;
}
.seekBarThumb {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: transparent;
  width: 6px;
  height: 6px;
  border-radius: 9px;
  border: 3px solid #000000;
  z-index: 5;
}
.seekBarThumb[data-disabled] {
  opacity: 0;
}
.seekBarThumb:hover,
.seekBarThumb:active,
.seekBarThumbVert:hover,
.seekBarThumbVert:active {
  border: 3px solid #3f51b5;
}
.ticksOuter {
  position: absolute;
  left: 6px;
  right: 6px;
  top: -5px;
  bottom: -5px;
}
.ticksOuter .tick {
  position: absolute;
  width: 1px;
  height: 5px;
  background-color: rgba(0, 0, 0, 0.6);
}
.ticksOuter .tick.topLeft {
  top: 0;
}
.ticksOuter .tick.bottomRight {
  bottom: 0;
}
.ticksOuter .tick.center {
  top: 0;
  bottom: 0;
  height: 10px;
  margin-top: auto;
  margin-bottom: auto;
}
.seekBarOuterVert {
  position: relative;
  height: 100%;
  width: 12px;
  margin-left: auto;
  margin-right: auto;
}
.seekBarOuterVert:focus {
  box-shadow: none;
}
.seekBarVert {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 2px;
  border-radius: 2px;
}
.seekBarThumbVert {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: transparent;
  width: 6px;
  height: 6px;
  border-radius: 9px;
  border: 3px solid #000000;
  z-index: 5;
  border: 6px solid #ff4081;
  top: -5px;
  margin-left: 0px;
  width: 0px;
  height: 0px;
}
.seekBarThumbVert[data-disabled] {
  opacity: 0;
}
.seekBarBeforeVert {
  position: absolute;
  bottom: 0px;
  left: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 2px;
  border-radius: 2px;
  border-radius: 0px;
  top: 0px;
  background-color: #ff4081;
  height: 12px;
  z-index: 3;
}
.ticksOuterVert {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: -5px;
  right: -5px;
}
.ticksOuterVert .tick {
  position: absolute;
  width: 5px;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.6);
}
.ticksOuterVert .tick.topLeft {
  left: 0;
}
.ticksOuterVert .tick.bottomRight {
  right: 0;
}
.ticksOuterVert .tick.center {
  left: 0;
  right: 0;
  width: 10px;
  margin-right: auto;
  margin-left: auto;
}
.seekBarThumb,
.seekBarThumbVert,
.seekBarThumb:hover,
.seekBarThumb:active,
.seekBarThumbVert:hover,
.seekBarThumbVert:active {
  border: 6px solid #ff4081;
  top: -5px;
  margin-left: 0px;
  width: 0px;
  height: 0px;
}
.seekBar,
.seekBarVert {
  border-radius: 0px;
  top: 0px;
}
.seekBarOuter:hover {
  cursor: pointer;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
[data-id=mainSearchEditorDiv] .fieldControl {
  padding-left: 4px;
  margin-right: 7px;
}
[data-id=mainSearchEditorDiv] .fieldEditControl {
  margin-right: 7px;
}
[data-id=mainSearchEditorDiv] .operatorControl {
  margin-right: 7px;
}
[data-id=mainSearchEditorDiv] .valueControl {
  margin-right: 7px;
}
[data-id=mainSearchEditorDiv] .matchCriteriaRow > * {
  font-weight: bold;
}
[data-id=mainSearchEditorDiv] .toolButton {
  padding-top: 0px;
  padding-bottom: 0px;
}
[data-id=mainSearchEditorDiv] .toolButton:hover {
  background-color: inherit;
  fill: #3f51b5;
  cursor: pointer;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.eqTrackBar {
  width: 26px;
  height: 130px;
}
.eqTable {
  height: 100%;
  width: 100%;
  text-align: center;
}
.eqBox {
  height: 169px;
  width: 520px;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.noArtText {
  text-align: center;
  color: white;
  font-size: 50px;
  padding-top: 33px;
}
.noArtText[data-color="0"] {
  background-color: #F49AC2;
}
.noArtText[data-color="1"] {
  background-color: #CB99C9;
}
.noArtText[data-color="2"] {
  background-color: #C23B22;
}
.noArtText[data-color="3"] {
  background-color: #CFCFC4;
}
.noArtText[data-color="4"] {
  background-color: #FF6961;
}
.noArtText[data-color="5"] {
  background-color: #779ECB;
}
.noArtText[data-color="6"] {
  background-color: #FFB347;
}
.noArtText[data-color="7"] {
  background-color: #77DD77;
}
.noArtText[data-color="8"] {
  background-color: #FFB347;
}
.noArtText[data-color="9"] {
  background-color: #836953;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.episodeRow {
  height: 54px !important;
  line-height: 27px !important;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.statusbar {
  padding: 2px;
  width: auto;
  height: 13px;
  font-size: 10px;
  word-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.statusbar .selectedPart {
  color: #000000;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.graphContainer[data-grow] {
  flex-grow: 1;
}
.compositeBar {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 16px;
}
.compositeBar .graphBar {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  color: white;
  text-align: center;
  top: 0px;
  left: 0px;
  height: 100%;
}
.compositeBar .transition {
  transition: width 0.3s, left 0.3s;
  transition-timing-function: ease;
}
.compositeBar .graphBar1 {
  background-color: #d87131;
  border: solid #bd5e24 1px;
}
.compositeBar .graphBar2 {
  background-color: #abb521;
  border: solid #8a921b 1px;
}
.compositeBar .graphBar3 {
  background-color: #865a89;
  border: solid #6e4a70 1px;
}
.compositeBar .graphBar4 {
  background-color: #807a71;
  border: solid #6a655e 1px;
}
.compositeBar .graphBar5 {
  background-color: #679858;
  border: solid #557e49 1px;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.tabs[data-mainTabs] .tabsHeader {
  padding-top: 0;
  padding-bottom: 0;
}
#innerBody {
  margin-left: 7px;
  margin-right: 7px;
  margin-bottom: 7px;
}
[data-id=mainview] {
  background-color: #ffffff;
}
.windowheader {
  height: 38px;
  align-items: center;
}
.windowheader .buttonsContainer {
  position: absolute;
  right: 0;
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex-flow: row;
  align-items: center;
  vertical-align: middle;
}
.windowHeaderOffset {
  top: 38px;
}
.sysbutton {
  margin: 0.5px 0.5em 0px 0.5em;
  fill: #000000;
  width: 1.2em;
  height: 1.2em;
  align-self: center;
}
.sysbutton:hover {
  fill: #3f51b5;
}
.sysbutton {
  color: #ffffff;
  fill: #ffffff;
  height: 24px;
  width: 24px;
}
.sysbutton:hover {
  fill: #ffffff;
  cursor: pointer;
}
.windowheader {
  background-color: #303f9f;
  color: #ffffff;
  fill: #ffffff;
  min-height: 24px;
}
.windowheader .icon {
  height: 24px;
  width: 24px;
}
html:not(.dialog) [data-id=titleElement] {
  display: none;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.navbar {
  vertical-align: baseline;
  white-space: nowrap;
  padding-left: 5px;
}
.navbar .button_container {
  width: auto;
  margin-top: 0;
  position: relative;
}
.navbar .button_container .toolbutton label[data-navbar-button-label] {
  padding-left: 7px;
  vertical-align: super;
}
.navbar .button_container .toolbutton label[data-navbar-button-label] > div.rating {
  margin-left: -7px;
}
.navbar .button_container .popupButton svg {
  pointer-events: none;
  padding-top: 3px;
}
.navbar .button_container .toolbutton {
  width: auto;
}
.noNavBarButtonMargin {
  margin-right: -4px;
}
.navbar .toolbutton[data-dummy-popup] {
  margin-right: -4px;
}
.navbar .toolbutton.popupButton:not([data-dummy-popup]) {
  margin-right: -4px;
  margin-left: -4px;
}
.navbar .toolbutton {
  margin-right: 1px;
  margin-left: 1px;
}
.navbar .appendix {
  margin-left: 0;
  padding-left: 0;
}
.navbar .toolbutton .icon,
.navbar .toolbutton svg {
  width: auto;
  height: 17px;
}
.navbar .toolbutton .rating .ratingStar svg {
  height: inherit;
  fill: inherit;
}
.navbar .toolbutton .rating {
  display: inline-block;
}
.navbar div .btn:hover {
  border-radius: 2px;
  border-radius: 0px;
}
.navbar .toolbutton .icon,
.navbar .toolbutton svg {
  width: 24px;
  height: 24px;
}
.navbar .icon {
  opacity: 1;
}
.navbar label {
  font-weight: 500;
}
.navbar .popupButton svg {
  padding-top: 0;
}
.navbar .button_container .popupButton svg {
  padding-top: 0;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.tooltipBase {
  border-radius: 2px;
  border-radius: 0px;
  background: #616161;
  color: #000000;
  box-shadow: 2px 2px 4px #cfcfcf;
  opacity: 0.9;
}
.toastContainer {
  padding: 7px;
  position: absolute;
  bottom: 7px;
  left: 13px;
  right: 13px;
  text-align: center;
  z-index: 2147483647;
  overflow: hidden;
  pointer-events: none;
}
.toast {
  border-radius: 0px;
  color: #000000;
  box-shadow: 2px 2px 4px #cfcfcf;
  border-radius: 2px;
  background: #616161;
  color: #ffffff;
  opacity: 0.9;
  box-shadow: 0px 0px 0px #cfcfcf;
  overflow: hidden;
  display: inline-flex;
}
.toast .button {
  pointer-events: auto;
}
.toast .closeButton {
  align-self: flex-start;
  width: 20px;
  height: 20px;
  pointer-events: auto;
}
.toast [data-id=toastText] {
  white-space: normal;
  word-wrap: break-word;
  max-width: 468px;
}
.tooltip {
  border-radius: 0px;
  color: #000000;
  box-shadow: 2px 2px 4px #cfcfcf;
  border-radius: 2px;
  background: #616161;
  color: #ffffff;
  opacity: 0.9;
  box-shadow: 0px 0px 0px #cfcfcf;
  position: absolute;
  display: block;
  z-index: 2147483647;
  padding: 7px 7px;
  max-width: 455px;
  white-space: normal;
  overflow: hidden;
  word-wrap: break-word;
  max-height: 96%;
}
.tooltip .hotlink,
.tooltip .hotlink:hover,
.tooltip .clickable,
.tooltip .clickable:hover {
  color: inherit;
  text-decoration: inherit;
  fill: inherit;
}
.tooltipBase {
  border-radius: 2px;
  background: #616161;
  color: #ffffff;
  opacity: 0.9;
  box-shadow: 0px 0px 0px #cfcfcf;
}
.tooltip {
  padding: 0px 8px 0px 8px;
  font-size: 12px;
  line-height: 22px;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.menuPanel {
  display: flex;
  align-items: stretch;
  align-content: stretch;
  position: absolute;
  z-index: 2147483649;
  overflow: hidden;
  background-color: #ffffff;
}
.griditem.verySmallItem {
  width: 39px;
}
.griditem.verySmallItem .imageSquare {
  top: 2px;
  left: 20px;
  height: 39px;
  width: 39px;
}
.griditem.verySmallItem .imageSquare .padding {
  padding: 3px;
}
.griditem.verySmallItem .imageInfo {
  top: 49px;
  width: 72px;
  left: 3px;
  height: 13px;
}
.menuPanel [data-id='playerRightButtons'] {
  padding: 3px;
  width: 129px;
}
.menuPanel [data-id='player-volumebar'] {
  position: absolute;
  top: 70%;
  right: 10px;
  height: 14px;
  width: 60px;
}
.menuPanel [data-id='player-seekbar'] {
  position: absolute;
  top: 20%;
  left: 0px;
  right: 10px;
}
.menuPanel [data-id='td_player-ltime'] {
  width: 52px;
  white-space: nowrap;
  position: relative;
  padding-left: 7px;
}
.menuPanel [data-id='player-rating'] {
  width: auto;
  padding-top: 2px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.menuPanel [data-id='td_player-rtime'] {
  text-align: right;
  width: 52px;
  white-space: nowrap;
  position: relative;
}
.menuPanel .playerButtons {
  padding: 4px;
}
.menuPanel .playerButton {
  padding: 7px;
  align-content: center;
  align-items: center;
  position: inherit;
}
.menuPanel .playerButton label {
  padding-left: 2px;
  padding-right: 2px;
}
.menuPanel .playerButton:hover:not([data-disabled]),
.menuPanel .playerButton:hover:not([data-disabled]) label,
.menuPanel .playerButton:hover .ratingStar {
  color: #3f51b5;
  fill: #3f51b5;
  -webkit-filter: drop-shadow(0px 0px 5px #3f51b5);
}
.menuPanel .playerButton:active:not([data-disabled]) {
  -webkit-transform: translate(1px, 1px);
}
.menuPanel .playerButton[data-disabled] {
  fill: #989898;
  color: #989898;
}
.menuPanel .playerButton:hover:not([data-disabled]) label[data-popuplabel] {
  box-shadow: 0px 0px 3px #3f51b5;
}
.menuPanel .playerButton[data-selected] {
  opacity: 1;
}
.menuPanel .playerButton:not([data-checked]).checkable {
  opacity: 0.75;
  fill: #989898;
  color: #989898;
}
.menuPanel .playerButton:not([data-checked]).checkable:hover:not([data-disabled]) {
  opacity: 1;
}
.menuPanel .playerButton.checkable[data-checked] {
  opacity: 1;
}
.menuPanel .playerButton:hover:not([data-disabled]),
.menuPanel .playerButton:hover:not([data-disabled]) label,
.menuPanel .playerButton:hover .ratingStar {
  color: inherit !important;
  fill: inherit !important;
  -webkit-filter: inherit;
  cursor: pointer;
}
.menuPanel .playerBigButton {
  width: 56px;
  height: 56px;
}
.menuPanel .playerSmallButton {
  width: 50px;
  height: 50px;
}
.menuPanel [data-id='player-prev'] {
  top: 0px;
  left: 0px;
}
.menuPanel [data-id='player-play'] {
  top: 0px;
  left: 0px;
}
.menuPanel [data-id='player-pause'] {
  top: 0px;
  left: 0px;
}
.menuPanel [data-id='player-next'] {
  top: 0px;
  left: 0px;
}
.menuPanel [data-id='player-np'] {
  top: 0px;
  left: 10px;
}
.menuPanel [data-id='player-ltime'] {
  left: 269px;
}
.menuPanel [data-id='player-rtime'] {
  position: inherit;
  top: auto;
  right: 0px;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
.nowPlayingContainer {
  min-width: 22em;
}
.nowPlayingCurrentTrackPanel .imageSquare {
  min-width: 22em;
  min-height: 20em;
}
.nowPlayingContainer .artwork {
  min-width: 20em;
  min-height: 20em;
}
.nowPlayingContainer .artwork[data-id=noaa] {
  max-height: 20em;
}
.nowPlayingContainer .multiline {
  white-space: normal;
}
/* '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' */
</style>    
    <meta http-equiv="cache-control" content="max-age=0">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
    <meta http-equiv="pragma" content="no-cache">
    
    <script src="mminit.js"></script>
    <script src="mainwindow.js"></script>
<style id="gridStyle"></style></head>

<body data-possavename="dlgMainWindow" data-defaultsize="90em,50em" data-shapename="noshape" data-framecolor="#303F9F" data-shapesize="2" data-addheader="" data-uniqueid="uniqueID_49">
  <div data-id="top-container" data-control-class="Control" data-store="" data-uniqueid="uniqueID_2"><div data-control-class="WindowTitle" data-id="windowheader" data-uniqueid="uniqueID_3" data-layoutlisten=""><!-- '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' -->

<div data-id="header" class="windowheader flex row verticalCenter">
    <div data-id="iconElement" class="sysbutton" data-icon="mediamonkey"><!--?xml version="1.0" standalone="no"?-->

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256.000000 208.000000" preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,208.000000) scale(0.100000,-0.100000)" stroke="none">
<path d="M1080 2026 c-148 -31 -266 -84 -376 -167 -96 -72 -132 -108 -200
-200 -32 -43 -62 -79 -66 -79 -5 0 -8 20 -8 44 0 77 -53 96 -145 52 -148 -70
-236 -232 -221 -404 17 -186 93 -309 243 -392 42 -23 48 -31 74 -103 116 -322
401 -556 737 -608 76 -12 84 -15 102 -44 45 -72 87 -97 135 -79 21 9 45 56 45
92 0 28 3 30 47 37 25 4 85 20 132 37 345 121 581 420 623 789 11 98 8 136
-19 327 -6 39 7 41 53 10 75 -51 83 -125 29 -258 -19 -47 -35 -95 -35 -108 -1
-104 114 -74 205 52 58 82 80 139 80 211 0 178 -203 369 -415 392 -55 5 -61 9
-86 44 -37 54 -157 166 -227 212 -80 53 -187 101 -282 127 -103 28 -328 36
-425 16z m333 -21 c145 -25 296 -88 391 -164 50 -40 22 -41 -37 -1 -257 173
-623 199 -905 65 -41 -19 -94 -49 -119 -65 -59 -40 -87 -39 -37 1 177 141 462
207 707 164z m90 -172 c113 -40 184 -83 269 -162 67 -63 80 -81 55 -81 -26 0
-160 -71 -254 -135 -53 -37 -99 -62 -101 -57 -2 6 1 28 7 49 6 21 11 56 11 77
0 34 -7 46 -47 85 -62 60 -127 97 -203 117 -67 17 -102 13 -163 -18 -83 -42
-170 -166 -183 -260 -8 -57 25 -138 73 -177 l35 -29 -53 -36 c-95 -64 -317
-135 -421 -136 l-38 0 0 54 c0 288 196 576 468 690 111 47 165 56 317 53 127
-3 148 -6 228 -34z m-1093 -320 c0 -9 -11 -44 -25 -78 -13 -34 -33 -103 -42
-154 -10 -52 -23 -91 -30 -91 -29 0 -44 136 -22 214 11 41 82 126 105 126 8 0
14 -8 14 -17z m1567 -146 c52 -114 56 -351 9 -492 -67 -199 -195 -350 -378
-445 -103 -54 -110 -53 -102 13 3 28 1 89 -4 135 -9 74 -8 88 11 135 16 41 21
84 26 207 7 170 7 173 78 251 50 55 162 136 251 181 42 21 82 38 88 38 6 0 16
-10 21 -23z m-947 -451 c0 -22 -20 -33 -104 -58 -95 -28 -128 -56 -125 -108 1
-19 1 -69 0 -112 -1 -75 -1 -76 -31 -86 -28 -10 -32 -8 -89 54 -55 60 -131
185 -131 215 0 10 19 15 68 16 76 3 192 30 278 66 67 28 134 35 134 13z m168
-363 c45 -27 47 -31 47 -73 0 -43 -2 -46 -62 -87 l-61 -42 -59 16 c-94 24 -96
27 -69 68 13 19 27 51 31 72 3 21 13 49 22 62 13 20 21 23 59 18 25 -2 66 -18
92 -34z"></path>
</g>
</svg>
</div>
    <label data-id="titleElement" data-no-localize="1">MediaMonkey</label>
    <div class="flex row" data-id="menuContainer">
        <div data-menu-container="" data-hideinfullwindowmode="" class="vSeparator" data-mainwindowonly="" style="display: none;"></div>
    </div>
    <div data-id="customContainer" class="stretchHeight dynamic">
        <div data-windowheader-custom-placeholder="">
        <div data-hideinfullwindowmode="" data-id="tabs_parent" data-mainwindowonly="" class="tabs_container animate" style=""><div data-id="tabs" data-control-class="MainTabs" data-init-params="{hideElement: &quot;tabs_parent&quot;}" data-maintabs="" data-animate-height="" class="animate tabs" data-uniqueid="uniqueID_5" data-layoutlisten="" tabindex="0"><ul class="tabsHeaders"><li class="tabsHeader" draggable="true" tabname="tab1523756456387" data-selected="1"><div class="tabsHeaderIcon icon" style=""><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="tabsHeaderCaption">Home</div><div class="tabsHeaderCloseButton closeButton" data-icon="close" data-showonhover="" style=""><svg height="100%" viewBox="0 0 24 24" width="100%">
    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
</svg></div></li><li class="tabsHeader newTabButton" draggable="false" tabname="tab1523756455239" data-no-localize="1"><div class="tabsHeaderIcon icon"><svg viewBox="0 0 24 24" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="tabsHeaderCaption" style="display: none;"></div><div class="tabsHeaderCloseButton closeButton" data-icon="close" data-showonhover="" style="display: none;"><svg height="100%" viewBox="0 0 24 24" width="100%">
    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
</svg></div></li></ul><div class="tabPanels" style="min-height: 0px; min-width: 0px;"><div class="tabPanel" data-hidebyvisibility="" style=""></div><div class="tabPanel" data-hidebyvisibility="" style="visibility: hidden;"></div></div></div></div></div>
    </div>
    <div data-id="buttonsContainer" class="buttonsContainer">
        <div data-id="switchBtn" class="sysbutton toolbutton animate" data-control-class="PlayerSwitch" data-uniqueid="uniqueID_4" title="Switch to mini/micro player"><svg height="100%" width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.4,8.6l4.6,4.6l4.6-4.6L18,10l-6,6l-6-6L7.4,8.6z"></path>
</svg>
</div>
        <div data-id="minimizeBtn" class="sysbutton" data-icon="minimize" title="Minimize window"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  <path d="M20,14H4V10H20"></path>
</svg>
</div>
        <div data-id="maximizeBtn" class="sysbutton" data-icon="maximize" title="Maximize window"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  <path d="M4,4H20V20H4V4M6,8V18H18V8H6Z"></path>
</svg>
</div>
        <div data-id="restoreBtn" class="sysbutton" data-icon="restore" title="Restore window" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  <path d="M4,8H8V4H20V16H16V20H4V8M16,8V14H18V6H10V8H16M6,12V18H14V12H6Z"></path>
</svg>
</div>
        <div data-id="closeBtn" class="sysbutton" data-icon="windowclose" title="Close window"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div>
    </div>
</div>
</div>
    <div class="fill windowHeaderOffset">
      <div id="windowcontent" data-uiblock="maincontent"><!-- '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' -->

<script src="maincontent.js"></script>
<script src="controls/internalplayer.js"></script>
<script src="controls/navigationBar.js"></script>
<script src="controls/maintabs.js"></script>
<script src="controls/embeddedWindow.js"></script>
<script src="controls/nowplayingList.js"></script>

<div data-id="mainContentDiv" class="fill flex column animate" data-control-class="Control" data-uniqueid="uniqueID_6">
    <div class="tabs_container flex row verticalCenter">
        <div data-menu-container="" data-hideinfullwindowmode="" class="vSeparator"></div>
        
    </div>

    <div class="fill flex column animate" style="min-height: 400px; min-width: 600px">
        <div data-id="toolbuttons" data-hideinfullwindowmode="" class="mainToolbar flex row" data-layoutlisten="">
            <div data-id="lefttoolbuttons" class="toolbar left dynamic vSeparator">
                <div data-id="showSidebarLeft" data-control-class="ToolButton" class="btnShowSidebar" data-uniqueid="uniqueID_7"><div class="toolbutton" data-icon="showSidebarLeft"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg></div></div>
                <div data-id="navigationBar" data-control-class="NavigationBar" data-navigation-bar="" data-uniqueid="uniqueID_8" class="flex row" data-layoutlisten="" data-actionchangelisten="1"><div class="flex row"><div data-icon="undo" data-control-class="Control" class="toolbutton" data-uniqueid="uniqueID_9"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"></path>
</svg></div><div data-icon="redo" data-control-class="Control" class="toolbutton" data-uniqueid="uniqueID_10" data-disabled="true"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"></path>
</svg></div><div class="flex row navbar"><div class="button_container flex row" style="order: 0;"><div style="padding-top: 0.4em; display: none;">...</div><div class="toolbutton flex row"><div data-id="iconSpan" class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div data-id="labelSpan"></div><div class="toolbutton popupButton" data-dummy-popup="1" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
    <path d="M0-.25h24v24H0z" fill="none"></path>
</svg></div></div><div data-popuplabel="1" class="toolbutton popupButton"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
    <path d="M0-.25h24v24H0z" fill="none"></path>
</svg></div></div><div class="button_container flex row" style="order: 1; display: none;"><div style="padding-top: 0.4em; display: none;">...</div><div class="toolbutton flex row"><div data-id="iconSpan" class="icon"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div data-id="labelSpan"><label data-navbar-button-label="1">Devices &amp; Services</label></div><div class="toolbutton popupButton" data-dummy-popup="1" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
    <path d="M0-.25h24v24H0z" fill="none"></path>
</svg></div></div><div data-popuplabel="1" class="toolbutton popupButton"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
    <path d="M0-.25h24v24H0z" fill="none"></path>
</svg></div></div><div class="button_container flex row" style="order: 2; display: none;"><div style="padding-top: 0.4em; display: none;">...</div><div class="toolbutton flex row"><div data-id="iconSpan" class="icon" style="display: none;"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div data-id="labelSpan"><label data-navbar-button-label="1">HONOR KIW-L24 - 8</label></div><div class="toolbutton popupButton" data-dummy-popup="1" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
    <path d="M0-.25h24v24H0z" fill="none"></path>
</svg></div></div><div data-popuplabel="1" class="toolbutton popupButton" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
    <path d="M0-.25h24v24H0z" fill="none"></path>
</svg></div></div></div><div class="btn navbar appendix flex row" style="display: none;"><div class="icon verticalCenter"></div><label class="verticalCenter hoverHighlight"></label></div></div></div>
            </div>
            <div data-id="viewtoolbuttons" class="right flex row" data-control-class="Toolbar" data-init-params="{rightElementID: 'righttoolbuttons', linkedElementID:'mainpanel'}" data-uniqueid="uniqueID_11">
            <div class="toolbar" data-id="general" style="order: 1; display: none;"><hr style="order: 999;"><div data-id="tbtn_47" class="toolbutton" data-group="general" data-tip="Save as AutoPlaylist..." data-actionchangelisten="1" style="order: 1; display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"></path>
</svg></div></div><div class="toolbar" data-id="view" style="order: 99999; display: none;"><hr style="order: 999;"><div data-id="tbtn_undefined" data-control-class="MenuToggleButton" data-group="view" data-uniqueid="uniqueID_157" class="flex row" data-tip="Browser view" style="order: 10; display: none;"><div class="inline toolbutton" data-id="btnToggle"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M0,0H24V24H0Z" fill="none"></path>
    <path d="M3,17H21V15H3m0-2H21V11H3Zm0,8H21V19H3"></path>
    <rect x="3" y="3" width="6" height="6"></rect>
    <rect x="11" y="3" width="10" height="6"></rect>
  </g>
</svg>
</div><div class="inline menuButton" data-id="btnSwitch" data-control-class="MenuButton" data-uniqueid="uniqueID_158"><div class="toolbutton" data-icon="downArrow"><svg height="100%" width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.4,8.6l4.6,4.6l4.6-4.6L18,10l-6,6l-6-6L7.4,8.6z"></path>
</svg>
</div></div></div><div data-id="tbtn_103" class="toolbutton" data-group="view" data-tip="View filter" data-actionchangelisten="1" style="order: 1; display: none;"><!--?xml version="1.0" encoding="UTF-8"?--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24"><path d="M3,2H21V2H21V4H20.92L14,10.92V22.91L10,18.91V10.91L3.09,4H3V2Z"></path></svg></div></div></div>
            <div data-id="righttoolbuttons" class="toolbar flex right" style="order: 999; min-width: 294px;">
                <div data-id="myTasksController" class="toolbutton animate taskControllerIndicator" data-control-class="TasksController" data-init-params="{details: 'progressContainer'}" data-uniqueid="uniqueID_12" style="opacity: 0; display: none;"><div></div></div>
                <div data-id="contexttoolbuttons" class="right flex row" data-control-class="Toolbar" data-uniqueid="uniqueID_13">
                </div>
                <div data-id="searchBar" data-control-class="SearchBar" class="flex row" data-uniqueid="uniqueID_14"><div class="animate verticalCenter searchBox dropdown" data-control-class="Dropdown" data-init-params="{multivalue: false, autoWidth: false}" data-uniqueid="uniqueID_15" style="flex-grow: 0; width: 0px; min-width: 0px; margin-left: 0px; margin-right: 0px; display: none;"><div class="editable-select"><div class="es-select"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <path id="svg_3" d="m24.0,24.0.0,-12.0-12.0,12.0"></path>
</svg></div><input type="text" class="es-edit" data-no-localize="1"></div></div><div data-control-class="IconButton" data-uniqueid="uniqueID_16"><div class="toolbutton icon-button"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div></div></div>
                <div data-id="switchButton" data-control-class="PlayerSwitch" data-uniqueid="uniqueID_17" class="toolbutton animate" title="Switch to mini/micro player" style="opacity: 0; display: none;"><svg height="100%" width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.4,8.6l4.6,4.6l4.6-4.6L18,10l-6,6l-6-6L7.4,8.6z"></path>
</svg>
</div>
                <div data-id="mainMenuButton" data-control-class="MenuButton" data-init-params="{menuArray: mainMenuItems}" data-uniqueid="uniqueID_18" class="menuButton"><div class="toolbutton" data-icon="menu"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path>
</svg></div></div>
                <div data-id="showSidebarRight" data-control-class="ToolButton" class="btnShowSidebar" style="order:999" data-uniqueid="uniqueID_19"><div class="toolbutton" data-icon="showSidebarRight"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg></div></div>
            </div>
        </div>
        <div data-id="innerbody" class="fill">
            <div data-id="innerbodyFlex" class="fill flex row hasSplitters" data-control-class="Control" data-layoutlisten="" data-uniqueid="uniqueID_20">
                <!--        <div class="fill flex column">-->
                <div data-id="mainpanel" data-hideinfullwindowmode="" data-mainpanelspot="" class="fill" style="flex-grow: 970; width: 0px; min-width: 364px;"><div class="fill animate" data-id="tab1523756455239"></div><div class="fill animate" data-id="tab1523756456387" data-control-class="MainTabContent" data-is-tab-panel="true" data-init-params="{withoutRestore: false}" data-uniqueid="uniqueID_51" style=""><!-- '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' -->

<div class="fill flex column">

    <div class="fill flex row hasSplitters" data-control-class="Control" data-uniqueid="uniqueID_52">
        <div data-id="sidebar" class="animate flex column allinside verticalPanelNarrow hasSplitters" data-control-class="Control" data-dock="" data-dock-left="" data-dock-title="Left panel" data-uniqueid="uniqueID_53">
            
        <div data-id="mediaTree" data-control-class="MediaTree" class="fill middleControl highControl listview flex column onlyVisible" data-control-default-focus="" data-dockable="" data-dock-title="Media tree" data-uniqueid="uniqueID_54" tabindex="0" data-layoutlisten="" style="overflow: hidden; height: 551px; width: 0px; flex-grow: 182;">
            <div class="lvHeader" data-header="1" data-uniqueid="uniqueID_55" data-headeritems="1" style="height: auto; overflow: hidden; display: none; top: 0px;"><div class="lvHeaderItems lvHeaderSingleItem" style="height: auto; overflow: hidden;"></div></div><div class="lvBody fill" style="overflow: hidden;"><div class="lvFill fill"><div class="lvCanvas" style="height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto;"><div class="lvViewport" style="overflow: hidden; position: absolute; height: 551px; width: 172px;"><div class="lassoLayer ignoreMouse" style="display: none;"></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; top: 0px; left: 0px; width: 168px; height: 27px;" data-even="1" data-selected="1" data-focused="1"><div style="display: inline-block; width: 0px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="inline">Home</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 31px; width: 168px; height: 27px;"><div style="display: inline-block; width: 0px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24"><path d="M12,1C7,1 3,5 3,10V17A3,3 0 0,0 6,20H9V12H5V10A7,7 0 0,1 12,3A7,7 0 0,1 19,10V12H15V20H18A3,3 0 0,0 21,17V10C21,5 16.97,1 12,1Z"></path></svg></div><div class="inline">Music</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 62px; width: 168px; height: 27px;" data-even="1"><div style="display: inline-block; width: 0px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24"><path d="M12,1C7,1 3,5 3,10V17A3,3 0 0,0 6,20H9V12H5V10A7,7 0 0,1 12,3A7,7 0 0,1 19,10V12H15V20H18A3,3 0 0,0 21,17V10C21,5 16.97,1 12,1Z"></path></svg></div><div class="inline">Classical Music</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 93px; width: 168px; height: 27px;"><div style="display: inline-block; width: 0px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M12,10.008a2,2,0,1,0,2,2A2,2,0,0,0,12,10.008Zm6.006,2a6.006,6.006,0,1,0-9.014,5.2L10,15.464A4.009,4.009,0,1,1,14,15.459L15.008,17.2A5.984,5.984,0,0,0,18.006,12.01ZM12,2A10,10,0,0,0,6.99,20.664l1-1.732a8,8,0,1,1,8.018,0l1,1.732A10.006,10.006,0,0,0,12,2Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div><div class="inline">Podcasts</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 124px; width: 168px; height: 27px;" data-even="1"><div style="display: inline-block; width: 0px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M18,22H6A2,2 0 0,1 4,20V4C4,2.89 4.9,2 6,2H7V9L9.5,7.5L12,9V2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22M13,15A2,2 0 0,0 11,17A2,2 0 0,0 13,19A2,2 0 0,0 15,17V12H18V10H14V15.27C13.71,15.1 13.36,15 13,15Z"></path>
</svg></div><div class="inline">Audiobooks</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 155px; width: 168px; height: 27px;"><div style="display: inline-block; width: 0px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="inline">Music Video</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 186px; width: 168px; height: 27px;" data-even="1"><div style="display: inline-block; width: 0px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="inline">Video</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 217px; width: 168px; height: 27px;"><div style="display: inline-block; width: 0px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"></path>
</svg></div><div class="inline">TV</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 248px; width: 168px; height: 27px;" data-even="1"><div style="display: inline-block; width: 0px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24"><path d="M12,1C7,1 3,5 3,10V17A3,3 0 0,0 6,20H9V12H5V10A7,7 0 0,1 12,3A7,7 0 0,1 19,10V12H15V20H18A3,3 0 0,0 21,17V10C21,5 16.97,1 12,1Z"></path></svg></div><div class="inline">Test collection</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 279px; width: 168px; height: 27px;"><div style="display: inline-block; width: 0px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M3,13H5V11H3Zm0,4H5V15H3ZM3,9H5V7H3Zm4,4H21V11H7Zm0,4H21V15H7ZM7,7V9H21V7Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div><div class="inline">Playlists</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 310px; width: 168px; height: 27px;" data-even="1"><div style="display: inline-block; width: 0px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="inline">Devices &amp; Services</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 341px; width: 168px; height: 27px;"><div style="display: inline-block; width: 24px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="inline">Local folder</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 372px; width: 168px; height: 27px;" data-even="1"><div style="display: inline-block; width: 24px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24"><path d="M7.71,3.5L1.15,15L4.58,21L11.13,9.5M9.73,15L6.3,21H19.42L22.85,15M22.28,14L15.42,2H8.58L8.57,2L15.43,14H22.28Z"></path></svg></div><div class="inline">Google Drive</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 403px; width: 168px; height: 27px;"><div style="display: inline-block; width: 24px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="inline">Rusty (Galaxy S5 Mini) - Phone</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 434px; width: 168px; height: 27px;" data-even="1"><div style="display: inline-block; width: 24px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="inline">Rusty (Galaxy S5 Mini) - Card</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 465px; width: 168px; height: 27px;"><div style="display: inline-block; width: 24px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="inline">HONOR KIW-L24 - sdcard1</div></div><div class="lvItem rowitem treeRow" draggable="true" data-even="1" style="position: absolute; left: 0px; top: 496px; width: 168px; height: 27px;"><div style="display: inline-block; width: 24px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="inline">Google Nexus 5X - Internal shared storage</div></div><div class="lvItem rowitem treeRow" draggable="true" style="position: absolute; left: 0px; top: 527px; width: 168px; height: 27px;"><div style="display: inline-block; width: 24px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="inline">Google Nexus 5X - Internal shared storage</div></div><div class="lvItem rowitem treeRow" draggable="true" data-even="1" style="position: absolute; left: 0px; top: -82px; width: 168px; height: 27px;"><div style="display: inline-block; width: 24px;"></div><div class="icnExpand" style="display: inline-block;"><div class="icon icnExpandExpanded" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="icon icnExpandCollapsed" style="position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M9.5,17l5-5-5-5Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div></div><div class="icon inline paddingColumnSmall"></div><div class="inline">HONOR KIW-L24 - 8</div></div></div><div class="lvScrollingCanvas" style="height: 1643px; width: 100%;"><div style="height: 1643px; width: 100%;"></div></div></div></div></div></div></div>
        <div data-control-class="Splitter" data-uniqueid="uniqueID_57" class="splitter" data-layoutlisten=""></div>
        <div data-id="mainview" class="dynamic flex column" style="flex-grow: 749; width: 0px; min-width: 182px;">
            <div class="fill flex row hasSplitters" data-control-class="Control" data-uniqueid="uniqueID_58">
                <div data-id="contentContainer" class="fill flex column" style="flex-grow: 445; width: 0px;">
                    <!-- e.g. Main content (views) are shown here-->
                    <div data-id="viewFilterEditor" data-control-class="FilterEditor" class="flex column animate hSeparatorTiny" data-uniqueid="uniqueID_59" style="flex-grow: 0; height: 0px; margin-bottom: 0px; min-height: 0px; margin-top: 0px; display: none;"><!-- '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' -->

<div data-id="mainSearchEditorDiv">
    <div class="flex column bgColorBase">
        <div data-id="vtRules" class="flex column" style="">
            <div data-id="boxCollection" class="flex row uiRow" style="display: none;">
                <label for="cbCollection" data-no-localize="1">Search:</label>
                <div data-id="cbCollection" data-control-class="Dropdown" class="middleControl dropdown" data-init-params="{dbFunc:'getStringList', dbFuncParams: {category: 'collection'}, readOnly: true, preload: true}" data-uniqueid="uniqueID_60"><div class="editable-select"><div class="es-select" data-readonly="1"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <path id="svg_3" d="m24.0,24.0.0,-12.0-12.0,12.0"></path>
</svg></div><input type="text" class="es-edit" readonly="" data-readonly="1" data-no-localize="1" style="width: 8px;"></div></div>
            </div>
            <div class="flex row uiRowCenter matchCriteriaRow">
                <label data-no-localize="1">Match</label>
                <div data-id="cbMatch" class="thinControl dropdown" data-control-class="Dropdown" data-init-params="{readOnly: true}" data-uniqueid="uniqueID_61">
                    
                    
                <div class="editable-select"><div class="es-select" data-readonly="1"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <path id="svg_3" d="m24.0,24.0.0,-12.0-12.0,12.0"></path>
</svg></div><input type="text" class="es-edit" readonly="" data-readonly="1" data-no-localize="1" style="width: 31.7969px;"></div></div>
                <label class="labelLeftPadding textEllipsis" data-no-localize="1">of the following criteria:</label>
                <div data-id="aAddRule" data-control-class="MenuButton" data-uniqueid="uniqueID_62" class="menuButton"><div class="toolbutton" data-icon="add"><svg viewBox="0 0 24 24" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div></div>
            </div>
            <div data-id="harbor" style="display:none">
                <div data-id="cbField" class="fieldEditControl dropdown" data-control-class="Dropdown" data-init-params="{readOnly: true}" data-uniqueid="uniqueID_63" style="display: none;"><div class="editable-select"><div class="es-select" data-readonly="1"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <path id="svg_3" d="m24.0,24.0.0,-12.0-12.0,12.0"></path>
</svg></div><input type="text" class="es-edit" readonly="" data-readonly="1" data-no-localize="1" style="width: 8px;"></div></div>
                <div data-id="cbOperator" class="operatorControl dropdown" data-control-class="Dropdown" data-init-params="{readOnly: true}" data-uniqueid="uniqueID_64" style="display: none;"><div class="editable-select"><div class="es-select" data-readonly="1"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <path id="svg_3" d="m24.0,24.0.0,-12.0-12.0,12.0"></path>
</svg></div><input type="text" class="es-edit" readonly="" data-readonly="1" data-no-localize="1"></div></div>
                <div data-id="cbValue" class="valueControl fill inline edit" data-control-class="Edit" data-uniqueid="uniqueID_65"><input type="text" class="stretchWidth" data-no-localize="1"></div>
                <div data-id="cbFrom" class="thinControl vSeparatorTiny inline edit" data-control-class="Edit" data-uniqueid="uniqueID_66"><input type="text" class="stretchWidth" data-no-localize="1"></div>
                <div data-id="cbTo" class="thinControl fill inline edit" data-control-class="Edit" data-uniqueid="uniqueID_67"><input type="text" class="stretchWidth" data-no-localize="1"></div>
                <div data-id="cbRating" class="valueControl fill rating ratingFlex" data-control-class="Rating" data-init-params="{starMargin: 1, paddingLeft: 0, position: 'left'}" data-uniqueid="uniqueID_68"><div class="ratingCanvas left" style="width: 120px; padding-left: 0px; padding-right: 12px;"><div class="ratingStar" style="display: inline-block; margin-left: 1px; margin-right: 1px; width: 22px; height: 22px;" data-emptystar="1"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="ratingStar" style="display: inline-block; margin-left: 1px; margin-right: 1px; width: 22px; height: 22px;" data-emptystar="1"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="ratingStar" style="display: inline-block; margin-left: 1px; margin-right: 1px; width: 22px; height: 22px;" data-emptystar="1"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="ratingStar" style="display: inline-block; margin-left: 1px; margin-right: 1px; width: 22px; height: 22px;" data-emptystar="1"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="ratingStar" style="display: inline-block; margin-left: 1px; margin-right: 1px; width: 22px; height: 22px;" data-emptystar="1"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div></div></div>
                <div data-id="cbCheckList" class="valueControl fill dropdown" data-control-class="Dropdown" data-init-params="{checkboxes: true, readOnly: true}" data-uniqueid="uniqueID_69"><div class="editable-select"><div class="es-select" data-readonly="1"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <path id="svg_3" d="m24.0,24.0.0,-12.0-12.0,12.0"></path>
</svg></div><input type="text" class="es-edit" readonly="" data-readonly="1" data-no-localize="1"></div></div>
            </div>
        </div>
        <div data-id="boxSearchLimits" class="uiRows" style="display: none;">
            <div data-id="chbLimit" data-control-class="Checkbox" data-uniqueid="uniqueID_70" class="animCheck"><span data-input_container=""><input id="checkbox_629" type="checkbox" data-layoutlisten="" data-no-localize="1"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" svgchk="1"></svg></span></div>
            <label data-no-localize="1">Limit to:</label>
            <div data-id="edtLimitCount" data-control-class="Edit" class="thinControl inline edit" data-init-params="{type: 'number'}" data-uniqueid="uniqueID_71"><input type="number" class="stretchWidth" data-no-localize="1"></div>
            <div data-id="cbLimitType" class="middleControl dropdown" data-control-class="Dropdown" data-init-params="{readOnly: true}" data-uniqueid="uniqueID_72">
                
                
                
            <div class="editable-select"><div class="es-select" data-readonly="1"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <path id="svg_3" d="m24.0,24.0.0,-12.0-12.0,12.0"></path>
</svg></div><input type="text" class="es-edit" readonly="" data-readonly="1" data-no-localize="1" style="width: 8px;"></div></div>
            <label data-no-localize="1">Selected by:</label>
            <div data-id="cbLimitOrder" class="middleControl dropdown" data-control-class="Dropdown" data-init-params="{readOnly: true}" data-uniqueid="uniqueID_73"> <div class="editable-select"><div class="es-select" data-readonly="1"><svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <path id="svg_3" d="m24.0,24.0.0,-12.0-12.0,12.0"></path>
</svg></div><input type="text" class="es-edit" readonly="" data-readonly="1" data-no-localize="1" style="width: 8px;"></div></div>
        </div>
        <div data-id="boxSortOrders" class="hSeparator" style="display: none;">
            <div class="flex row uiRowCenter">
                <label data-no-localize="1">Sort by:</label>
                <div data-id="vtSortRules" class="flex row"></div>
                <div data-id="aAddSortRule" class="toolButton floatRight" data-icon="add"><svg viewBox="0 0 24 24" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div>
            </div>
        </div>
    </div>
</div>
<div class="alignRight topmost menuButton" data-control-class="MenuButton" data-uniqueid="uniqueID_74"><div class="toolbutton" data-icon="menu"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path>
</svg></div></div></div>
                    <div data-id="multiview" data-control-class="Multiview" class="fill flex column middleControl nonTransparent" data-uniqueid="uniqueID_75"><div data-id="control-cache-harbour" style="display: none;"></div><div data-control-class="Control" data-uniqueid="uniqueID_601" class="fill layer"><div data-control-class="HomeView" data-init-params="{}" data-uniqueid="uniqueID_552" class="viewControl fill" data-id="viewControl_homeView"><!-- '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' -->

<div class="fill scrollable" data-control-class="Scroller" data-uniqueid="uniqueID_553">
    <div data-id="nodesGridView" class="showInline gridViewSmallOneRowHeight padding listview flex column" data-control-class="NodeListView" data-init-params="{isHorizontal: true, dynamicSize: false, smallItemSize: true, multiselect: false}" data-uniqueid="uniqueID_554" tabindex="0" data-layoutlisten="" style="overflow: hidden;"><div class="lvHeader" data-header="1" data-uniqueid="uniqueID_555" data-headeritems="1" style="height: auto; overflow: hidden; display: none; z-index: 100; top: 0px;"><div class="lvHeaderItems lvHeaderSingleItem" style="height: auto; overflow: hidden;"></div></div><div class="lvBody fill" style="overflow: hidden;"><div class="lvFill fill"><div class="lvCanvas" style="height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto;"><div class="lvViewport" style="overflow: hidden; position: absolute; height: 104px; width: 725px;"><div class="lassoLayer ignoreMouse" style="display: none;"></div><div class="lvItem griditem smallItem imageItem" draggable="true" data-uniqueid="uniqueID_567" style="position: absolute; top: 0px; left: 0px; width: 72px; height: 88px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.nodeItemImageFunc(div, item, div.itemIndex);" class="box ignoreMouse fill artworkBg"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse autosize">    <div data-id="unknownAA" class="fill largeIconColor emptyImage" data-bind="func: templates.nodeIconFunc(div, item);"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24"><path d="M12,1C7,1 3,5 3,10V17A3,3 0 0,0 6,20H9V12H5V10A7,7 0 0,1 12,3A7,7 0 0,1 19,10V12H15V20H18A3,3 0 0,0 21,17V10C21,5 16.97,1 12,1Z"></path></svg></div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: el.innerHTML = nodeUtils.getNodeTitle(item)">Music</span></div>  </div></div></div><div class="lvItem griditem smallItem imageItem" draggable="true" data-uniqueid="uniqueID_568" style="position: absolute; left: 78px; top: 0px; width: 72px; height: 88px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.nodeItemImageFunc(div, item, div.itemIndex);" class="box ignoreMouse fill artworkBg"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse autosize">    <div data-id="unknownAA" class="fill largeIconColor emptyImage" data-bind="func: templates.nodeIconFunc(div, item);"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24"><path d="M12,1C7,1 3,5 3,10V17A3,3 0 0,0 6,20H9V12H5V10A7,7 0 0,1 12,3A7,7 0 0,1 19,10V12H15V20H18A3,3 0 0,0 21,17V10C21,5 16.97,1 12,1Z"></path></svg></div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: el.innerHTML = nodeUtils.getNodeTitle(item)">Classical Music</span></div>  </div></div></div><div class="lvItem griditem smallItem imageItem" draggable="true" data-uniqueid="uniqueID_569" style="position: absolute; left: 156px; top: 0px; width: 72px; height: 88px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.nodeItemImageFunc(div, item, div.itemIndex);" class="box ignoreMouse fill artworkBg"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse autosize">    <div data-id="unknownAA" class="fill largeIconColor emptyImage" data-bind="func: templates.nodeIconFunc(div, item);"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M12,10.008a2,2,0,1,0,2,2A2,2,0,0,0,12,10.008Zm6.006,2a6.006,6.006,0,1,0-9.014,5.2L10,15.464A4.009,4.009,0,1,1,14,15.459L15.008,17.2A5.984,5.984,0,0,0,18.006,12.01ZM12,2A10,10,0,0,0,6.99,20.664l1-1.732a8,8,0,1,1,8.018,0l1,1.732A10.006,10.006,0,0,0,12,2Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: el.innerHTML = nodeUtils.getNodeTitle(item)">Podcasts</span></div>  </div></div></div><div class="lvItem griditem smallItem imageItem" draggable="true" data-uniqueid="uniqueID_570" style="position: absolute; left: 234px; top: 0px; width: 72px; height: 88px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.nodeItemImageFunc(div, item, div.itemIndex);" class="box ignoreMouse fill artworkBg"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse autosize">    <div data-id="unknownAA" class="fill largeIconColor emptyImage" data-bind="func: templates.nodeIconFunc(div, item);"><svg width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M18,22H6A2,2 0 0,1 4,20V4C4,2.89 4.9,2 6,2H7V9L9.5,7.5L12,9V2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22M13,15A2,2 0 0,0 11,17A2,2 0 0,0 13,19A2,2 0 0,0 15,17V12H18V10H14V15.27C13.71,15.1 13.36,15 13,15Z"></path>
</svg></div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: el.innerHTML = nodeUtils.getNodeTitle(item)">Audiobooks</span></div>  </div></div></div><div class="lvItem griditem smallItem imageItem" draggable="true" data-uniqueid="uniqueID_571" style="position: absolute; left: 312px; top: 0px; width: 72px; height: 88px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.nodeItemImageFunc(div, item, div.itemIndex);" class="box ignoreMouse fill artworkBg"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse autosize">    <div data-id="unknownAA" class="fill largeIconColor emptyImage" data-bind="func: templates.nodeIconFunc(div, item);"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: el.innerHTML = nodeUtils.getNodeTitle(item)">Music Video</span></div>  </div></div></div><div class="lvItem griditem smallItem imageItem" draggable="true" data-uniqueid="uniqueID_572" style="position: absolute; left: 390px; top: 0px; width: 72px; height: 88px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.nodeItemImageFunc(div, item, div.itemIndex);" class="box ignoreMouse fill artworkBg"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse autosize">    <div data-id="unknownAA" class="fill largeIconColor emptyImage" data-bind="func: templates.nodeIconFunc(div, item);"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: el.innerHTML = nodeUtils.getNodeTitle(item)">Video</span></div>  </div></div></div><div class="lvItem griditem smallItem imageItem" draggable="true" data-uniqueid="uniqueID_573" style="position: absolute; left: 468px; top: 0px; width: 72px; height: 88px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.nodeItemImageFunc(div, item, div.itemIndex);" class="box ignoreMouse fill artworkBg"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse autosize">    <div data-id="unknownAA" class="fill largeIconColor emptyImage" data-bind="func: templates.nodeIconFunc(div, item);"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"></path>
</svg></div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: el.innerHTML = nodeUtils.getNodeTitle(item)">TV</span></div>  </div></div></div><div class="lvItem griditem smallItem imageItem" draggable="true" data-uniqueid="uniqueID_574" style="position: absolute; left: 546px; top: 0px; width: 72px; height: 88px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.nodeItemImageFunc(div, item, div.itemIndex);" class="box ignoreMouse fill artworkBg"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse autosize">    <div data-id="unknownAA" class="fill largeIconColor emptyImage" data-bind="func: templates.nodeIconFunc(div, item);"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24"><path d="M12,1C7,1 3,5 3,10V17A3,3 0 0,0 6,20H9V12H5V10A7,7 0 0,1 12,3A7,7 0 0,1 19,10V12H15V20H18A3,3 0 0,0 21,17V10C21,5 16.97,1 12,1Z"></path></svg></div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: el.innerHTML = nodeUtils.getNodeTitle(item)">Test collection</span></div>  </div></div></div><div class="lvItem griditem smallItem imageItem" draggable="true" data-uniqueid="uniqueID_575" style="position: absolute; left: 624px; top: 0px; width: 72px; height: 88px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.nodeItemImageFunc(div, item, div.itemIndex);" class="box ignoreMouse fill artworkBg" style="display: none;"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse autosize" style="display: none;">    <div data-id="unknownAA" class="fill largeIconColor emptyImage" data-bind="func: templates.nodeIconFunc(div, item);"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M3,13H5V11H3Zm0,4H5V15H3ZM3,9H5V7H3Zm4,4H21V11H7Zm0,4H21V15H7ZM7,7V9H21V7Z"></path>
    <path d="M0,0H24V24H0Z" fill="none"></path>
  </g>
</svg>
</div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: el.innerHTML = nodeUtils.getNodeTitle(item)">Playlists</span></div>  </div></div></div><div class="lvItem griditem smallItem imageItem" draggable="true" data-uniqueid="uniqueID_576" style="position: absolute; left: 702px; top: 0px; width: 72px; height: 88px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.nodeItemImageFunc(div, item, div.itemIndex);" class="box ignoreMouse fill artworkBg"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse autosize">    <div data-id="unknownAA" class="fill largeIconColor emptyImage" data-bind="func: templates.nodeIconFunc(div, item);"><svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: el.innerHTML = nodeUtils.getNodeTitle(item)">Devices &amp; Services</span></div>  </div></div></div></div><div class="lvScrollingCanvas" style="height: 100%; width: 1092px;"><div style="height: 100%; width: 1092px;"></div></div></div></div></div></div>

    <!-- Artists -->
    <div data-id="artists" class="marginTop">
        <span data-id="artistsLabel" class="clickable left-indent-small" style="">
                <span class="largeText titleMargin">Artists</span> <span>(see all)</span>
        </span>
        <div data-id="artistsView" class="showInline marginBottomLarge listview flex column" data-control-class="ArtistGrid" data-init-params="{isHorizontal: false, dynamicSize: true}" data-uniqueid="uniqueID_556" tabindex="0" data-layoutlisten="" style="overflow: hidden;"><div class="lvHeader" data-header="1" data-uniqueid="uniqueID_557" data-headeritems="1" style="height: auto; overflow: hidden; display: none; z-index: 100; top: 0px;"><div class="lvHeaderItems lvHeaderSingleItem" style="height: auto; overflow: hidden;"></div></div><div class="lvBody fill" style="overflow: hidden;"><div class="lvFill"><div class="lvCanvas" style="overflow-x: hidden; overflow-y: auto;"><div class="lvViewport" style="overflow: hidden; position: absolute; height: 162px; width: 739px;"><div class="lassoLayer ignoreMouse" style="display: none;"></div><div class="lvItem griditem imageItem" draggable="true" data-uniqueid="uniqueID_562" style="position: absolute; top: 0px; left: 0px; width: 143px; height: 159px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.itemImageFunc(div, item, div.itemIndex, {useCoverImage: true, isAutoSearch: true, imgSearchFunc: searchTools.getArtistImage, uid: 'uniqueID_556'});" class="box ignoreMouse fill artworkBg" style="display: none;"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse coverImage" src="file:///temp/Thumbs/86/8NV3ZYXFJJJW4ET5-200px.jpg" style="">    <div data-id="unknownAA" class="fill noArtText" data-bind="func: templates.artistNameHash(el, item);" data-color="3" style="display: none;">St</div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: if (item.name === '') el.textContent = _('Unknown'); else el.textContent = item.name;">Sting</span></div>  </div></div><div data-id="selectButtonDiv" data-bind-undefined="func: if(div.hasAttribute('data-selected')) el.setAttribute('data-selected', 1); else el.removeAttribute('data-selected');" class="topmost selectButtonBg showWhenSelectionMode"><div data-id="btnSelectIcon" class="selectButtonIcon showWhenItemSelected showWhenSelectionMode" data-icon="check"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
</svg></div></div></div><div class="lvItem griditem imageItem" draggable="true" data-uniqueid="uniqueID_580" style="position: absolute; left: 185px; top: 0px; width: 143px; height: 159px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.itemImageFunc(div, item, div.itemIndex, {useCoverImage: true, isAutoSearch: true, imgSearchFunc: searchTools.getArtistImage, uid: 'uniqueID_556'});" class="box ignoreMouse fill artworkBg" style="display: none;"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse coverImage" src="file:///temp/Thumbs/65/41VJ8UT7WGQ1N4TV-200px.jpg" style="">    <div data-id="unknownAA" class="fill noArtText" data-bind="func: templates.artistNameHash(el, item);" data-color="0" style="display: none;">Al</div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: if (item.name === '') el.textContent = _('Unknown'); else el.textContent = item.name;">Alison Krauss &amp; Union Station</span></div>  </div></div><div data-id="selectButtonDiv" data-bind-undefined="func: if(div.hasAttribute('data-selected')) el.setAttribute('data-selected', 1); else el.removeAttribute('data-selected');" class="topmost selectButtonBg showWhenSelectionMode"><div data-id="btnSelectIcon" class="selectButtonIcon showWhenItemSelected showWhenSelectionMode" data-icon="check"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
</svg></div></div></div><div class="lvItem griditem imageItem" draggable="true" data-uniqueid="uniqueID_581" style="position: absolute; left: 370px; top: 0px; width: 143px; height: 159px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.itemImageFunc(div, item, div.itemIndex, {useCoverImage: true, isAutoSearch: true, imgSearchFunc: searchTools.getArtistImage, uid: 'uniqueID_556'});" class="box ignoreMouse fill artworkBg" style="display: none;"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse coverImage" src="file:///temp/Thumbs/9F/VI7EC1SHB9RE6UZP-200px.jpg" style="">    <div data-id="unknownAA" class="fill noArtText" data-bind="func: templates.artistNameHash(el, item);" data-color="2" style="display: none;">Ch</div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: if (item.name === '') el.textContent = _('Unknown'); else el.textContent = item.name;">Chris Isaak</span></div>  </div></div><div data-id="selectButtonDiv" data-bind-undefined="func: if(div.hasAttribute('data-selected')) el.setAttribute('data-selected', 1); else el.removeAttribute('data-selected');" class="topmost selectButtonBg showWhenSelectionMode"><div data-id="btnSelectIcon" class="selectButtonIcon showWhenItemSelected showWhenSelectionMode" data-icon="check"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
</svg></div></div></div><div class="lvItem griditem imageItem" draggable="true" data-uniqueid="uniqueID_582" style="position: absolute; left: 554px; top: 0px; width: 143px; height: 159px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.itemImageFunc(div, item, div.itemIndex, {useCoverImage: true, isAutoSearch: true, imgSearchFunc: searchTools.getArtistImage, uid: 'uniqueID_556'});" class="box ignoreMouse fill artworkBg" style="display: none;"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse coverImage" src="file:///temp/Thumbs/7C/8DR617DK34G776K3-200px.jpg" style="">    <div data-id="unknownAA" class="fill noArtText" data-bind="func: templates.artistNameHash(el, item);" data-color="0" style="display: none;">Di</div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: if (item.name === '') el.textContent = _('Unknown'); else el.textContent = item.name;">Dire Straits</span></div>  </div></div><div data-id="selectButtonDiv" data-bind-undefined="func: if(div.hasAttribute('data-selected')) el.setAttribute('data-selected', 1); else el.removeAttribute('data-selected');" class="topmost selectButtonBg showWhenSelectionMode"><div data-id="btnSelectIcon" class="selectButtonIcon showWhenItemSelected showWhenSelectionMode" data-icon="check"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
</svg></div></div></div><div class="lvItem griditem imageItem" draggable="true" data-uniqueid="uniqueID_583" style="position: absolute; left: 599px; top: -344px; width: 143px; height: 159px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.itemImageFunc(div, item, div.itemIndex, {useCoverImage: true, isAutoSearch: true, imgSearchFunc: searchTools.getArtistImage, uid: 'uniqueID_556'});" class="box ignoreMouse fill artworkBg" style="display: none;"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse coverImage" src="file:///temp/Thumbs/AA/PZQDQX9GIXB3CR48-200px.jpg" style="">    <div data-id="unknownAA" class="fill noArtText" data-bind="func: templates.artistNameHash(el, item);" data-color="7" style="display: none;">He</div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: if (item.name === '') el.textContent = _('Unknown'); else el.textContent = item.name;">Heather Nova</span></div>  </div></div><div data-id="selectButtonDiv" data-bind-undefined="func: if(div.hasAttribute('data-selected')) el.setAttribute('data-selected', 1); else el.removeAttribute('data-selected');" class="topmost selectButtonBg showWhenSelectionMode"><div data-id="btnSelectIcon" class="selectButtonIcon showWhenItemSelected showWhenSelectionMode" data-icon="check"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
</svg></div></div></div></div><div class="lvScrollingCanvas" style="height: 162px; width: 100%;"><div style="height: 162px; width: 100%;"></div></div></div></div></div></div>
    </div>

    <!-- Albums -->
    <div data-id="albums" class="marginTopLarge">
        <span data-id="albumsLabel" class="clickable left-indent-small" style="">
                <span class="largeText titleMargin">Albums</span> <span>(see all)</span>
        </span>
        <div data-id="albumsView" class="showInline listview flex column" data-control-class="AlbumListView" data-init-params="{isHorizontal: false, dynamicSize: true}" data-uniqueid="uniqueID_558" tabindex="0" data-layoutlisten="" style="overflow: hidden;"><div class="lvHeader" data-header="1" data-uniqueid="uniqueID_559" data-headeritems="1" style="height: auto; overflow: hidden; display: none; z-index: 100; top: 0px;"><div class="lvHeaderItems lvHeaderSingleItem" style="height: auto; overflow: hidden;"></div></div><div class="lvBody fill" style="overflow: hidden;"><div class="lvFill"><div class="lvCanvas" style="overflow-x: hidden; overflow-y: auto;"><div class="lvViewport" style="overflow: hidden; position: absolute; height: 175px; width: 739px;"><div class="lassoLayer ignoreMouse" style="display: none;"></div><div class="lvItem griditem imageItem twoLines" draggable="true" data-uniqueid="uniqueID_563" style="position: absolute; top: 0px; left: 0px; width: 143px; height: 172px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.itemImageFunc(div, item, div.itemIndex, {useCoverImage: true, isAutoSearch: true, updateWhenChanged: true, saveImageFunc: templates.saveImageToAlbum, imgSearchFunc: searchTools.getAAImage,                       canSave: app.utils.isRegistered(), uid: 'uniqueID_558'});" class="box ignoreMouse fill artworkBg" style="display: none;"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse coverImage" src="file:///temp/Thumbs/9D/GVQEWEA4DV1TFN3Z-200px.jpg" style="">    <div data-id="unknownAA" class="fill noArtText" data-bind="func: templates.albumTitleHash(el, item);" data-color="3" style="display: none;">Fi</div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: if (item.title === '') el.textContent = _('Unknown Album'); else el.textContent = item.title;">Five Days In July</span></div><div data-id="secondLine" class="smallText textEllipsis textCenter"><span data-id="secondLineText" class="clickable" data-bind="func: el.textContent = item.albumArtist">Blue Rodeo</span></div>  </div></div><div data-id="selectButtonDiv" data-bind-undefined="func: if(div.hasAttribute('data-selected')) el.setAttribute('data-selected', 1); else el.removeAttribute('data-selected');" class="topmost selectButtonBg showWhenSelectionMode"><div data-id="btnSelectIcon" class="selectButtonIcon showWhenItemSelected showWhenSelectionMode" data-icon="check"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
</svg></div></div></div><div class="lvItem griditem imageItem twoLines" draggable="true" data-uniqueid="uniqueID_586" style="position: absolute; left: 185px; top: 0px; width: 143px; height: 172px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.itemImageFunc(div, item, div.itemIndex, {useCoverImage: true, isAutoSearch: true, updateWhenChanged: true, saveImageFunc: templates.saveImageToAlbum, imgSearchFunc: searchTools.getAAImage,                       canSave: app.utils.isRegistered(), uid: 'uniqueID_558'});" class="box ignoreMouse fill artworkBg" style="display: none;"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse coverImage" src="file:///temp/Thumbs/8B/1Z4WF8ABK9FSUNG6-200px.jpg" style="">    <div data-id="unknownAA" class="fill noArtText" data-bind="func: templates.albumTitleHash(el, item);" data-color="5" style="display: none;">Th</div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: if (item.title === '') el.textContent = _('Unknown Album'); else el.textContent = item.title;">The Early Singles</span></div><div data-id="secondLine" class="smallText textEllipsis textCenter"><span data-id="secondLineText" class="clickable" data-bind="func: el.textContent = item.albumArtist">Pink Floyd</span></div>  </div></div><div data-id="selectButtonDiv" data-bind-undefined="func: if(div.hasAttribute('data-selected')) el.setAttribute('data-selected', 1); else el.removeAttribute('data-selected');" class="topmost selectButtonBg showWhenSelectionMode"><div data-id="btnSelectIcon" class="selectButtonIcon showWhenItemSelected showWhenSelectionMode" data-icon="check"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
</svg></div></div></div><div class="lvItem griditem imageItem twoLines" draggable="true" data-uniqueid="uniqueID_587" style="position: absolute; left: 370px; top: 0px; width: 143px; height: 172px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.itemImageFunc(div, item, div.itemIndex, {useCoverImage: true, isAutoSearch: true, updateWhenChanged: true, saveImageFunc: templates.saveImageToAlbum, imgSearchFunc: searchTools.getAAImage,                       canSave: app.utils.isRegistered(), uid: 'uniqueID_558'});" class="box ignoreMouse fill artworkBg" style="display: none;"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse coverImage" src="file:///temp/Thumbs/7C/K1D5FNPTNKVEQ6FE-200px.jpg" style="">    <div data-id="unknownAA" class="fill noArtText" data-bind="func: templates.albumTitleHash(el, item);" data-color="8" style="display: none;">He</div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: if (item.title === '') el.textContent = _('Unknown Album'); else el.textContent = item.title;">Help</span></div><div data-id="secondLine" class="smallText textEllipsis textCenter"><span data-id="secondLineText" class="clickable" data-bind="func: el.textContent = item.albumArtist">The Beatles</span></div>  </div></div><div data-id="selectButtonDiv" data-bind-undefined="func: if(div.hasAttribute('data-selected')) el.setAttribute('data-selected', 1); else el.removeAttribute('data-selected');" class="topmost selectButtonBg showWhenSelectionMode"><div data-id="btnSelectIcon" class="selectButtonIcon showWhenItemSelected showWhenSelectionMode" data-icon="check"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
</svg></div></div></div><div class="lvItem griditem imageItem twoLines" draggable="true" data-uniqueid="uniqueID_588" style="position: absolute; left: 554px; top: 0px; width: 143px; height: 172px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: templates.itemImageFunc(div, item, div.itemIndex, {useCoverImage: true, isAutoSearch: true, updateWhenChanged: true, saveImageFunc: templates.saveImageToAlbum, imgSearchFunc: searchTools.getAAImage,                       canSave: app.utils.isRegistered(), uid: 'uniqueID_558'});" class="box ignoreMouse fill artworkBg" style="display: none;"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse coverImage" src="file:///temp/Thumbs/88/BF5XHVD89E5S2QR4-200px.jpg" style="">    <div data-id="unknownAA" class="fill noArtText" data-bind="func: templates.albumTitleHash(el, item);" data-color="7" style="display: none;">Mo</div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: if (item.title === '') el.textContent = _('Unknown Album'); else el.textContent = item.title;">Moon Safari</span></div><div data-id="secondLine" class="smallText textEllipsis textCenter"><span data-id="secondLineText" class="clickable" data-bind="func: el.textContent = item.albumArtist">Air</span></div>  </div></div><div data-id="selectButtonDiv" data-bind-undefined="func: if(div.hasAttribute('data-selected')) el.setAttribute('data-selected', 1); else el.removeAttribute('data-selected');" class="topmost selectButtonBg showWhenSelectionMode" style=""><div data-id="btnSelectIcon" class="selectButtonIcon showWhenItemSelected showWhenSelectionMode" data-icon="check"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
</svg></div></div></div></div><div class="lvScrollingCanvas" style="height: 175px; width: 100%;"><div style="height: 175px; width: 100%;"></div></div></div></div></div></div>
    </div>

    <!-- Pinned items -->
    <div data-id="pinned" class="marginTopLarge" style="">
        <span data-id="pinnedLabel">
                <span class="largeText titleMargin left-indent-small">Pinned</span>
        </span>
        <div data-id="pinnedView" class="showInline listview flex column" data-control-class="PinnedListView" data-init-params="{isHorizontal: false, dynamicSize: true}" data-uniqueid="uniqueID_560" tabindex="0" data-layoutlisten="" style="overflow: hidden;"><div class="lvHeader" data-header="1" data-uniqueid="uniqueID_561" data-headeritems="1" style="height: auto; overflow: hidden; display: none; z-index: 100; top: 0px;"><div class="lvHeaderItems lvHeaderSingleItem" style="height: auto; overflow: hidden;"></div></div><div class="lvBody fill" style="overflow: hidden;"><div class="lvFill"><div class="lvCanvas" style="overflow-x: hidden; overflow-y: auto;"><div class="lvViewport" style="overflow: hidden; position: absolute; height: 175px; width: 739px;"><div class="lassoLayer ignoreMouse" style="display: none;"></div><div class="lvItem griditem imageItem twoLines" draggable="true" data-uniqueid="uniqueID_584" style="position: absolute; top: -370px;"><div class="fill gridItemInner">  <div class="imageSquare">    <div data-id="artworkDiv" data-bind="func: var currItem = item.dataSource ? item.dataSource : item; templates.itemImageFunc(div, currItem, div.itemIndex, {useCoverImage: true});" class="box ignoreMouse fill artworkBg"></div><img data-id="artworkImg" class="allinside box autoMargin ignoreMouse coverImage">    <div data-id="unknownAA" class="fill largeIconColor emptyImage" data-icon="unknownAA"><svg height="100%" width="100%" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"></path>
</svg></div>  </div>  <div class="imageInfo"><div data-id="firstLine" class="textEllipsis textCenter"><span data-id="firstLineText" class="clickable" data-bind="func: var currItem = item.dataSource ? item.dataSource : item; if (currItem['name'] !== undefined) { if (currItem.name === '') el.textContent = _('Unknown'); else el.textContent = currItem.name; } else if (currItem['title'] !== undefined) { if (currItem.title === '') el.textContent = _('Unknown'); else el.textContent = currItem.title; }"></span></div><div data-id="secondLine" class="smallText textEllipsis textCenter"><span data-id="secondLineText" data-bind="func: var currItem = item.dataSource ? item.dataSource : item; if (currItem.objectType === 'album') {   if (currItem.albumArtist === '')     el.textContent = '';   else     el.textContent = currItem.albumArtist;   } else if (currItem.objectType === 'track') {     el.textContent = currItem.album;     if (currItem.album !== '' &amp;&amp; currItem.albumArtist !== '')       el.textContent += ' ('+currItem.albumArtist+')';   } else el.textContent = '';"></span></div>  </div></div></div></div><div class="lvScrollingCanvas" style="height: 175px; width: 100%;"><div style="height: 175px; width: 100%;"></div></div></div></div></div></div>
    </div>
</div></div></div></div>
                    <div data-id="footerBar">
                        <div data-control-class="Statusbar" data-id="contentStatus" data-init-params="{listener: 'contentContainer'}" class="animate statusbar" data-uniqueid="uniqueID_76" style="opacity: 0; display: none;"></div>
                    </div>
                </div>
                <div data-control-class="Splitter" data-uniqueid="uniqueID_77" class="splitter" data-layoutlisten="" style="display: none;"></div>
                <div class="animate verticalPanel flex column middleControl listview" data-control-class="PlaylistEditor" data-plsteditspot="" data-uniqueid="uniqueID_78" style="width: 0px; flex-grow: 0; min-width: 0px; margin-left: 0px; margin-right: 0px; display: none;">
                    <!-- Playlist editor is shown here-->
                <div class="flex row lvHeader" style="z-index: 10;"><label class="fill  lvHeaderSingleItem" data-control-class="Editable" data-uniqueid="uniqueID_81" contenteditable="true" data-no-localize="1" style="cursor: auto;"></label><div class="closeButton hoverHeader animate" data-icon="close"><svg height="100%" viewBox="0 0 24 24" width="100%">
    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
</svg></div></div><p class="controlInfo" data-control-class="Control" data-uniqueid="uniqueID_82" data-no-localize="1">Drag and drop or Send tracks to the playlist to populate it.</p><div class="fill showInline listview flex column" data-control-class="SimpleTracklist" data-uniqueid="uniqueID_79" tabindex="0" data-layoutlisten="" style="overflow: hidden; min-height: 3.5em;"><div class="lvHeader" data-header="1" data-uniqueid="uniqueID_80" data-headeritems="1" style="height: auto; overflow: hidden; z-index: 100; display: none;"><div class="lvHeaderItems flex row lvSimpleHeader" style="height: auto; overflow: hidden;"><div class="lvHeaderFillRest fill flex column" style="order: 9999999; min-width: 10px; align-items: flex-start;"><div class="fill flex row" style="width: 100%;"><div class="lvHeaderItem lvSimpleHeader flex row"><div class="lvHeaderItem lvSimpleHeader lvSimpleHeaderRightAligned flex row fill" style="order: 999;"><div class="paddingColumnSmall flex row clickable" style="width: 90px;"><div>Rating</div><div class="lvHeaderSort"><svg height="100%" width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.4,8.6l4.6,4.6l4.6-4.6L18,10l-6,6l-6-6L7.4,8.6z"></path>
</svg>
</div><label class="lvHeaderSortLabel" data-no-localize="1" style="order: 3;"></label></div><div class="flex row clickable" style="margin-right: -0.5em;"><div>Length</div><div class="lvHeaderSort"><svg height="100%" width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.4,8.6l4.6,4.6l4.6-4.6L18,10l-6,6l-6-6L7.4,8.6z"></path>
</svg>
</div><label class="lvHeaderSortLabel" data-no-localize="1" style="order: 3;"></label></div></div><div class="flex row clickable"><div>#.&nbsp;</div><div class="lvHeaderSort"><svg height="100%" width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.4,8.6l4.6,4.6l4.6-4.6L18,10l-6,6l-6-6L7.4,8.6z"></path>
</svg>
</div><label class="lvHeaderSortLabel" data-no-localize="1" style="order: 3;"></label></div><div class="flex row clickable" data-sort-label="1"><div>Title</div><div class="lvHeaderSort" data-sortasc="1"><svg height="100%" width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.4,8.6l4.6,4.6l4.6-4.6L18,10l-6,6l-6-6L7.4,8.6z"></path>
</svg>
</div><label class="lvHeaderSortLabel" data-no-localize="1" style="order: 3;">2</label></div><div><div>&nbsp;(</div></div><div class="flex row clickable"><div>Artist</div><div class="lvHeaderSort"><svg height="100%" width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.4,8.6l4.6,4.6l4.6-4.6L18,10l-6,6l-6-6L7.4,8.6z"></path>
</svg>
</div><label class="lvHeaderSortLabel" data-no-localize="1" style="order: 3;"></label></div><div><div>&nbsp;-&nbsp;</div></div><div class="flex row clickable" data-sort-label="1"><div>Album</div><div class="lvHeaderSort" data-sortasc="1"><svg height="100%" width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.4,8.6l4.6,4.6l4.6-4.6L18,10l-6,6l-6-6L7.4,8.6z"></path>
</svg>
</div><label class="lvHeaderSortLabel" data-no-localize="1" style="order: 3;">1</label></div><div><div>?)</div></div></div></div></div></div></div><div class="lvBody fill" style="overflow: hidden;"><div class="lvFill fill"><div class="lvCanvas" style="height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto;"><div class="lvViewport" style="overflow: hidden; position: absolute;"><div class="lassoLayer ignoreMouse" style="display: none;"></div></div><div class="lvScrollingCanvas" style="height: 100%; width: 100%;"><div style="height: 100%; width: 100%;"></div></div></div></div></div></div></div>
                <div class="animate verticalPanel flex column middleControl" data-control-class="EmbeddedDialog" data-init-params="{closable: true}" data-id="embeddedDialog" data-uniqueid="uniqueID_83" style="width: 0px; flex-grow: 0; min-width: 0px; margin-left: 0px; margin-right: 0px; display: none;">
                <div class="hoverHeader animate closeButton" data-hideinfullwindowmode="1" data-tip="" style="opacity: 0; display: none;"><svg height="100%" viewBox="0 0 24 24" width="100%">
    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
</svg></div><div data-id="content"></div></div>
            </div>
            <div data-id="bottomDock" data-dock="" data-dock-bottom="" data-dock-title="Below tracklist" data-control-class="Control" data-uniqueid="uniqueID_84" style="display: none;"></div>
        </div>
    </div>
</div></div><div data-dock-storage="" style="display: none;"></div></div>
                <!--        </div>-->
                <div data-id="nowplayingVerticalSplitter" data-hideinfullwindowmode="" data-control-class="Splitter" data-uniqueid="uniqueID_21" class="splitter" data-layoutlisten=""></div>
                <div data-id="nowplaying" class="flex column animate noOverflow verticalPanel hasSplitters" data-control-class="Control" data-dock="" data-dock-right="" data-dock-title="Right panel" data-uniqueid="uniqueID_22" style="width: 306px;">
                    
                    
                    
                <div data-id="nowplayinglistContainer" data-control-class="NowplayingListView" data-init-params="{statusInHeader: true, makeInSync: true, closable: true, closeAction: actions.view.nowPlaying}" class="fill initialSize listview flex column" data-dockable="" data-dock-title="Now Playing panel" data-dock-support="left,right" data-hideinfullwindowmode="" data-uniqueid="uniqueID_23" tabindex="0" data-layoutlisten="" style="overflow: hidden; flex-grow: 220; height: 0px; min-height: 40px;">
                    <div class="hoverHeader animate closeButton" data-hideinfullwindowmode="1" data-tip="Close Now Playing" style="opacity: 0; display: none;"><svg height="100%" viewBox="0 0 24 24" width="100%">
    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
</svg></div><div class="lvHeader" data-header="1" data-uniqueid="uniqueID_24" data-headeritems="1" style="height: auto; overflow: hidden; top: 0px;"><div class="lvHeaderItems flex row" style="height: auto; overflow: hidden;"><div class="lvHeaderSingleItem menuButton" data-control-class="MenuButton" data-uniqueid="uniqueID_25"><div class="toolbutton" data-icon="menu"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path>
</svg></div></div><div class="lvHeaderSingleItem menuButton" data-control-class="MenuButton" data-uniqueid="uniqueID_26" tabindex="-1" data-disabled="1" style="position: relative; overflow: hidden; z-index: 0; width: 0px; border-left-width: 0px; padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px;"><div class="toolbutton" data-icon="menu" data-disabled="1"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path>
</svg></div></div><div class="lvHeaderSingleItem flex fill"><div class="fill textEllipsis clickable">Now Playing</div></div></div></div><div class="lvBody fill" style="overflow: hidden;"><div class="lvFill fill"><div class="lvCanvas" style="height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto;"><div class="lvViewport" style="overflow: hidden; position: absolute; height: 193px; width: 306px;"><div class="lassoLayer ignoreMouse" style="display: none;"></div><div class="lvItem rowitem rowHeight2line" draggable="true" data-item-height="[{toWidth: &quot;40em&quot;, className: &quot;rowHeight2line&quot;}, {fromWidth: &quot;40em&quot;, className: &quot;rowHeight1line&quot;}, {fromWidth: &quot;55em&quot;, className: &quot;fixedWidthColumns&quot;}]" style="position: absolute; top: -128px;"><div class="flex fill column marginLeftSmall">  <div class="flex fill row">    <div data-id="lblTrackNum" data-cond-width="[{fromWidth: '55em', width: '2.5em'}]" data-bind="func: el.textContent = ( div.itemIndex + 1) + '.';" class="textEllipsis semitransparent vSeparatorTiny"></div>    <div data-id="title1" class="textEllipsis fill" data-cond-width="[{toWidth:'55em', className:'fill'}, {fromWidth: '55em', width: '30%'}]">      <span data-id="lblTitle" data-bind="text: trackFormat.title"></span>&nbsp;      <span data-width-from="40em" data-width-to="55em" class="semitransparent" data-bind="func: el.textContent = templates.npItemText(cachedItem, item, {istracklist: false, brackets: true, hideArtists: false});" style="display: none;">      </span>    </div>    <div data-id="artistName" class="left-indent-small textEllipsis" data-width-from="55em" data-cond-width="[{fromWidth: '55em', width: '25%'}]" data-bind="func: el.textContent = templates.npItemText(cachedItem, item, {istracklist: false, artistOnly: true});" style="display: none;">    </div>    <div data-id="albumTitle" class="left-indent-small fill textEllipsis" data-width-from="55em" data-bind="func: el.textContent = templates.npItemText(cachedItem, item, {istracklist: false, albumOnly: true});" style="display: none;">    </div>    <div data-width-from="16em" data-bind="func: templates.ratingEditableFunc(div, item, el, {readOnlyPadding: 'right', paddingRight: '5px'});" style="">    </div>    <div data-width-from="40em" data-minwidth-pattern="88:88:88" data-bind="func: templates.bookmarkFunc(div, item, el);" style="min-width: 47.2344px; display: none;"></div>  </div>  <div data-width-to="40em" class="flex fill row right" style="">    <div class="flex row fill">      <div data-id="title2" class="textEllipsis semitransparent dynamicShrink" data-bind="func: el.textContent = templates.npItemText(cachedItem, item, {istracklist: false, brackets: false, hideArtists: false});">      </div>    </div>    <div data-bind="func: templates.bookmarkFunc(div, item, el);"></div>  </div></div><div data-id="selectButtonDiv" data-bind-undefined="func: if(div.hasAttribute('data-selected')) el.setAttribute('data-selected', 1); else el.removeAttribute('data-selected');" class="topmost selectButtonBg showWhenSelectionMode"><div data-id="btnSelectIcon" class="selectButtonIcon showWhenItemSelected showWhenSelectionMode" data-icon="check"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
</svg></div></div></div></div><div class="lvScrollingCanvas" style="height: 0px; width: 100%;"><div style="height: 0px; width: 100%;"></div></div></div></div></div></div><div data-control-class="Splitter" data-id="splitterForartWindow" data-uniqueid="uniqueID_195" class="splitter" data-layoutlisten=""></div><div data-id="artWindow" data-videowindowed="" data-control-class="ArtWindow" class="animate allinside initialSize" style="min-height: 120px; min-width: 140px; height: 331px;" data-init-params="{closable: true, closeAction: actions.view.artAndDetails}" data-dockable="" data-dock-support="left,right" data-dock-title="Art&amp;Details panel" data-uniqueid="uniqueID_28" data-layoutlisten="">
                    <div class="hoverHeader animate closeButton" data-hideinfullwindowmode="1" data-tip="Close Art &amp; Details" style="opacity: 0; display: none;"><svg height="100%" viewBox="0 0 24 24" width="100%">
    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
</svg></div><div class="flex column stretchHeight stretchWidth listview" data-hideinfullwindowmode="1">  <div data-id="header" class="flex row lvHeader">    <div data-id="btnMenu" class="lvHeaderSingleItem menuButton" data-control-class="MenuButton" data-uniqueid="uniqueID_29"><div class="toolbutton" data-icon="menu"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path>
</svg></div></div>    <div class="lvHeaderSingleItem fill flex">        <div data-id="lblMode" class="clickableLabel inline fill textEllipsis">Selected</div>    </div>  <div class="lvHeaderSingleItem menuButton" data-control-class="MenuButton" data-uniqueid="uniqueID_30" tabindex="-1" data-disabled="1" style="position: relative; overflow: hidden; z-index: 0; width: 0px; border-left-width: 0px; padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px;"><div class="toolbutton" data-icon="menu" data-disabled="1"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path>
</svg></div></div></div>  <div data-id="tabBox" class="fill">    <div data-id="artworkLayer" class="flex column bottom fill verticalCenter">      <img data-id="artwork" class="coverImage" style="max-width: 306px; max-height: 304px; display: none;" src="file:///temp/Thumbs/97/BU29ZM1B9R8UC3X3-500px.jpg">      <div data-id="unknownAA" class="largeIconColor" data-icon="unknownAA" style="max-width: 306px; max-height: 304px; width: 306px; height: 304px;"><svg height="100%" width="100%" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"></path>
</svg></div>    </div>    <div data-id="propsBase" class="fill scrollable">      <div data-id="propsLayer" class="transparentBackground padding" style="position: absolute; left: 0px; top: 0px; right: 0px; z-index: 2; max-height: inherit; display: none;"><div class="flex row" style="font-size: 1em">    <div class="fill flex column"><div><label data-id="h_S" class="inline noLeftPadding" data-no-localize="1">Title: </label><div data-id="S" tabindex="-1" data-control-class="Editable" data-init-params="{editable: false}" class="inline" data-uniqueid="uniqueID_185" style="cursor: default;">Marching Bands of Manhattan</div></div><div><label data-id="h_L" class="inline noLeftPadding" data-no-localize="1">Album: </label><div data-id="L" tabindex="-1" data-init-params="{editable: false}" data-bind="call: trackHyperlinks.album" class="inline" data-uniqueid="uniqueID_186" style="cursor: default;"><span data-uniqueid="uniqueID_192" class="hotlink trackInfoText multiline clickable">Plans</span></div></div></div>    <div class="fill flex column"><div><label data-id="h_A" class="inline noLeftPadding" data-no-localize="1">Artist: </label><div data-id="A" tabindex="-1" data-init-params="{editable: false}" data-bind="call: trackHyperlinks.artist" class="inline" data-uniqueid="uniqueID_187" style="cursor: default;"><span data-uniqueid="uniqueID_193" class="hotlink trackInfoText multiline clickable">Death Cab for Cutie</span></div></div><div><label data-id="h_T" class="inline noLeftPadding" data-no-localize="1">Track #: </label><div data-id="T" tabindex="-1" data-control-class="Editable" data-init-params="{editable: false}" class="inline" data-uniqueid="uniqueID_188" style="cursor: default;">1</div></div><div><label data-id="h_F" class="inline noLeftPadding" data-no-localize="1">Filename: </label><div data-id="F" tabindex="-1" data-control-class="Editable" data-init-params="{editable: false}" class="inline" data-uniqueid="uniqueID_189" style="cursor: default;">1 - Death Cab for Cutie - Marching Bands of Manhattan</div></div></div></div><div class="flex column" style="font-size: 1em"><div data-id="artworkTextRow" class="inline" style="display: none;">   <label class="inline noLeftPadding" data-no-localize="1">Artwork:</label>   <div data-id="artworkParagraph" class="inline" data-control-class="Control" data-uniqueid="uniqueID_190">       <a data-id="artworkSearchLink" class="hotlink" tabindex="-1" data-control-class="Control" data-uniqueid="uniqueID_191">Lookup</a>   </div></div><div><label data-id="h_ZZG" class="inline noLeftPadding" data-no-localize="1">Lyrics: </label><div data-id="lyricsParagraph" class="inline"><a data-id="lyricsSearchLink" tabindex="-1" class="hotlink">Lookup</a></div><br></div></div></div>    </div></div></div></div></div>
            </div>
            <div data-id="toastMessage" class="toastContainer" data-control-class="ToastMessage" style="display: none;" data-uniqueid="uniqueID_31"><!-- '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' -->

<div data-id="toastMessageContainer" class="toast padding row verticalCenter center">
    <div data-id="toastText">
    </div>
    <div data-id="undoButton" class="button">Undo</div>
    <div data-id="closeButton" class="closeButton" data-icon="close"><svg height="100%" viewBox="0 0 24 24" width="100%">
    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
</svg></div>
</div></div>
        </div>
        <!-- Innerbody -->
        <div data-id="mostBottomDock" data-hideinfullwindowmode="" data-dock="" data-dock-bottom="" data-dock-title="Bottom">
            
        <div data-id="mainPlayer" id="mainPlayer" data-mainplayer="" class="animate onlyVisible" data-control-class="Control" data-dockable="" data-dock-support="bottom,top" data-dock-title="Player" data-uniqueid="uniqueID_32"><!-- Player -->
<div data-id="player" data-control-class="Player" data-uniqueid="uniqueID_33" data-layoutlisten="">
    <div data-id="player-seekbar" class="stretchWidth" data-control-class="Slider" data-init-params="{orientation: 'horizontal', invert: false, min: 0, max: 0}" data-player-control="seek" data-uniqueid="uniqueID_34" data-layoutlisten="" data-tip="Seek bar" tabindex="-1" data-disabled="1"><div tabindex="0" class="seekBarOuter" data-disabled="1"><div class="ticksOuter" data-disabled="1"></div><div class="seekBar" data-disabled="1"></div><div class="seekBarBefore" data-disabled="1"></div><div class="seekBarThumb" data-disabled="1"></div></div></div>
    <div class="flex row">

        <div class="flex row">
            <label data-id="player-ltime" class="smallText vSeparatorTiny" data-player-control="time" data-no-localize="1" data-uniqueid="uniqueID_35" tabindex="-1" data-tip="Time">00:00:00</label>
            <div data-id="player-title" class="verticalCenter" data-player-control="titleArtist" data-optional="{group: 20, order: 10}" data-uniqueid="uniqueID_36" tabindex="-1" data-tip="Title and artist"></div>
        </div>


        <div class="dynamic fill flex flexcenter column vSeparatorTiny" style="position: absolute;">
            <div data-id="playerLeftButtons" class="playerButtons fill flex row static verticalCenter center">
                <div data-id="player-prev" class="playerButton playerSmallButton" data-icon="player_prev" data-player-control="previous" data-optional="{group: 10, order: 10}" data-uniqueid="uniqueID_37" data-tip="Previous file"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4C7.59,4 4,7.59 4,12C4,16.41 7.59,20 12,20C16.41,20 20,16.41 20,12C20,7.59 16.41,4 12,4M16,8V16L11,12M10,8V16H8V8"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div>
                <div data-id="player-play" class="playerButton playerLargeButton" data-icon="player_play" data-player-control="play" data-uniqueid="uniqueID_38" data-tip="Play"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div>
                <div data-id="player-pause" class="playerButton playerLargeButton" data-icon="player_pause" data-player-control="pause" data-uniqueid="uniqueID_39" data-tip="Pause" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M9 16h2V8H9v8zm3-14C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-4h2V8h-2v8z"></path>
</svg></div>
                <div data-id="player-stop" class="playerButton playerBigButton" data-icon="player_stop" data-player-control="stop" data-optional="{group: 10, order: 20}" style="display: none" data-uniqueid="uniqueID_40" data-tip="Stop"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4M9,9V15H15V9"></path>
</svg></div>
                <div data-id="player-next" class="playerButton playerSmallButton" data-icon="player_next" data-player-control="next" data-optional="{group: 10, order: 30}" data-uniqueid="uniqueID_41" data-tip="Next file"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4M8,8V16L13,12M14,8V16H16V8"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div>
            </div>
        </div>


        <div class="fill flex column" style="z-index: -1"></div>

        <div class="flex row">
            <div data-id="playerRightButtons" class="flex row static verticalCenter alignRight">
                <div data-id="player-repeat" class="playerButton playerSmallButton checkable" data-icon="repeat" data-player-control="repeat" data-optional="{group: 30, order: 10}" data-uniqueid="uniqueID_42" data-tip="Continuous"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"></path>
</svg></div>
                <div data-id="player-shuffle" class="playerButton playerSmallButton checkable" data-icon="shuffle" data-player-control="shuffle" data-optional="{group: 30, order: 20}" data-uniqueid="uniqueID_43" data-tip="Shuffle"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"></path>
</svg></div>
                <div data-id="player-playto" class="playerButton playerSmallButton" data-player-control="playTo" data-init-params="{noAddClasses: true}" data-control-class="MenuButton" data-optional="{group: 30, order: 30}" data-uniqueid="uniqueID_44" tabindex="-1" data-tip="Play to...">
                <div data-icon="cast"><!--?xml version="1.0" encoding="iso-8859-1"?-->
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 561 561" style="enable-background:new 0 0 561 561;" xml:space="preserve">
	<g>
		<path d="M510,51H51C22.95,51,0,73.95,0,102v76.5h51V102h459v357H331.5v51H510c28.05,0,51-22.95,51-51V102
			C561,73.95,538.05,51,510,51z M0,433.5V510h76.5C76.5,466.65,43.35,433.5,0,433.5z M0,331.5v51c71.4,0,127.5,56.1,127.5,127.5h51
			C178.5,410.55,99.45,331.5,0,331.5z M0,229.5v51c127.5,0,229.5,102,229.5,229.5h51C280.5,354.45,155.55,229.5,0,229.5z"></path>
	</g>
</svg>
</div></div>
                <div data-id="player-np" class="playerButton playerSmallButton checkable" data-icon="song" data-player-control="nowplaying" data-optional="{group: 30, order: 40}" style="display: none" data-uniqueid="uniqueID_45" tabindex="-1" data-checked="1" data-tip="Now Playing"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
  
  <g>
    <path d="M0,0H24V24H0Z" fill="none"></path>
    <path d="M8,4.5V15.418A4.981,4.981,0,0,0,6,15c-2.2,0-4,1.347-4,3s1.8,3,4,3,4-1.348,4-3h0V8.5l9-1.912v6.33a4.981,4.981,0,0,0-2-.418c-2.2,0-4,1.347-4,3s1.8,3,4,3,4-1.348,4-3h0V2Z"></path>
  </g>
</svg>
</div>
                <div data-tip="Volume bar" class="paddingSides" data-control-class="Slider" data-init-params="{orientation: 'horizontal', invert: false, min: 0, max:100, tickPlacement: 'bottomRight', tickInterval: 50, wheelStep: 5}" data-id="player-volumebar" data-player-control="volume" data-uniqueid="uniqueID_46" data-layoutlisten=""><div tabindex="0" class="seekBarOuter"><div class="ticksOuter"><div class="tick bottomRight" style="left: 0%;"></div><div class="tick bottomRight" style="left: 50%;"></div><div class="tick bottomRight" style="left: 100%;"></div></div><div class="seekBar"></div><div class="seekBarBefore" style="width: 32px;"></div><div class="seekBarThumb" style="left: 20px;"></div></div></div>
            </div>
            <div data-id="player-vis-cont" data-optional="{group: 20, order: 30, title: 'Visualizer'}">
                <label data-id="player-rtime" class="smallText" data-player-control="remainingTime" data-optional="{group: 20, order: 20}" data-no-localize="1" data-uniqueid="uniqueID_47" tabindex="-1" data-tip="Remaining time">-00:00:00</label>
                <div data-id="player-vis" data-control-class="Visualizer" data-player-control="visualizer" data-uniqueid="uniqueID_48" data-layoutlisten="" tabindex="-1" data-tip="Visualizer" style="display: none;"><canvas width="47" height="20" style="left: 0px;"></canvas></div>
            </div>
        </div>
    </div>
</div></div></div>

    </div>
</div></div>
    </div>
  <div data-id="ytController" data-control-class="YoutubePlayerController" data-uniqueid="uniqueID_88" data-layoutlisten="" style="display: none;"></div></div>


<div style="position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 10000; opacity: 0.5;"><div class="progressContainer flex row"></div></div><div data-control-class="TooltipController" data-uniqueid="uniqueID_50" class="tooltip animate ignoreMouse" style="top: 677px; left: 392px; opacity: 0; display: none;">Loading...</div><div class="ratingStar" data-id="ratingStarW22M1" style="display: none; margin-left: 1px; margin-right: 1px; width: 22px; height: 22px;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div><div class="ratingStar" data-id="ratingStarW16M1" style="display: none; margin-left: 1px; margin-right: 1px; width: 16px; height: 16px;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
    <path d="M0 0h24v24H0z" fill="none"></path>
</svg></div></body></html>
copy_outer_html_re_bug_14728.htm (208,853 bytes)   
Fixed in build2101

Activities

rusty

2018-04-12 17:01

administrator   ~0049933

Note: this issue occurs in other views as well--even when there's no track header! See attached.

jiri

2018-04-16 14:59

administrator   ~0049958

In case this ever occurs again, please:

1. Open DevTools (press Ctrl+Shift+Alt in MM5).
2. Open Elements tab there.
3. Right-click the first line (<html>)
4. Select Copy > Copy OuterHTML.
5. Paste the result to a file, save it and send it to me.

rusty

2018-04-16 18:59

administrator   ~0049967

Sent file via skype. Reopened.

jiri

2018-04-17 10:18

administrator   ~0049972

The tree has zero width and is visible only because of its min-width. Probably some problem in management of visibility of the component.

rusty

2018-04-17 17:56

administrator   ~0049980

Just so that this is clear:
https://www.screencast.com/t/8TjhGxjrZd

petr

2018-04-17 19:54

developer   ~0049986

Last edited: 2018-04-17 19:55

 Width property is the problem and shouldn't be used by media tree at all (and is stored in persistent so this problem persist after restart). Size of the media tree is defined by flexGrow so i need to find a code filled media tree's width style property.

michal

2018-04-21 12:21

developer   ~0050051

Fixed in build 2101.

peke

2018-04-23 22:59

developer   ~0050074

Verified 2101

rusty

2018-04-24 18:26

administrator   ~0050095

Verified 2101. Closing.