.component.panelEx.right, .component.panelEx.left {
  background-color: transparent; }
  .component.panelEx.right .body, .component.panelEx.left .body {
    display: none; }
  .component.panelEx.right > .shadow, .component.panelEx.left > .shadow {
    display: none !important; }
  .component.panelEx.right > .overlay, .component.panelEx.left > .overlay {
    background: transparent; }
  .component.panelEx.right.expand, .component.panelEx.left.expand {
    background: rgba(56, 68, 82, 0.6); }
    .component.panelEx.right.expand .body, .component.panelEx.left.expand .body {
      display: block; }
    .component.panelEx.right.expand > .shadow, .component.panelEx.left.expand > .shadow {
      display: block !important; }

.component.panelEx.main.position-right {
  left: 260px !important; }

.component.panelEx.main.position-left {
  left: 98px !important; }

.component.panelEx.right {
  right: 25px !important; }

.component.panelEx.left {
  left: 55px !important; }

.theme-favorite-icon {
  color: rgba(255, 255, 255, 0.2); }

.theme-favorite-icon-active {
  color: #FEC500; }

.theme-active-filter {
  color: #FEC500; }

.osdPanel {
  background-color: #384452;
  color: #fff; }

.osdFocusItem {
  background-color: #2c60c6; }

.bgDarken {
  background-color: #2e3743 !important; }

body {
  background: url(./img/576/bg.jpg) no-repeat; }

.icon {
  font-family: icons; }
  .icon.menu:before {
    content: 'Q'; }
  .icon.info:before {
    content: 'P'; }
  .icon.f1, .icon.f2, .icon.f3, .icon.f4 {
    width: 25px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: center; }
  .icon.f1 {
    background-image: url("./img/576/f1.png"); }
  .icon.f2 {
    background-image: url("./img/576/f2.png"); }
  .icon.f3 {
    background-image: url("./img/576/f3.png"); }
  .icon.f4 {
    background-image: url("./img/576/f4.png"); }

.component.button {
  background: transparent;
  color: #ffffff; }
  .component.button.bottom {
    background-color: transparent;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAYAAABhYU3QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABpJREFUeNpiZGBg8GUgAjD+//9fjRiFAAEGAJJMA3OVnUxoAAAAAElFTkSuQmCC");
    background-repeat: repeat-x; }
  .component.button.focus {
    background: #2c60c6;
    color: #fff; }

.component.list {
  background: transparent; }
  .component.list .item {
    background: transparent;
    padding: 0; }
    .component.list .item.focus {
      background: transparent;
      color: #fff; }
      .component.list .item.focus .input .placeholder, .component.list .item.focus .input .char {
        color: #fff; }
  .component.list .item.focus {
    background: #2c60c6; }

.component.scrollBar {
  background: transparent; }
  .component.scrollBar .thumb {
    background: #A1A1A1; }

/*.component.panelEx, comment.list {
    background: $componentBgColor;
}*/
.component.panelEx {
  /*border-top: 1px solid #313131;
    border-bottom: 1px solid #313131;*/
  background: rgba(56, 68, 82, 0.6); }
  .component.panelEx .list .item.focus {
    background: rgba(44, 96, 198, 0.6); }
  .component.panelEx.active {
    background-color: rgba(56, 68, 82, 0.97) !important; }
    .component.panelEx.active .list .item.focus {
      background: #2c60c6; }
  .component.panelEx .component.layoutList > .body > .item, .component.panelEx .component.layoutList > .body > .item .component.input {
    font-size: 16px; }
  .component.panelEx .component.layoutList .icon {
    font-size: 22px !important; }
  .component.panelEx > .title {
    font-size: 16px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAYAAABhYU3QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABpJREFUeNpiZGBg8GUgAjD+//9fjRiFAAEGAJJMA3OVnUxoAAAAAElFTkSuQmCC") bottom;
    background-repeat: repeat-x; }
    .component.panelEx > .title .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 20px; }
    .component.panelEx > .title .amountContainer {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
      .component.panelEx > .title .amountContainer .amount {
        background-color: #ffffff;
        opacity: 0.4;
        color: #3a3a3a;
        text-align: center; }
  .component.panelEx.main .component.layoutList > .body > .item {
    font-size: 18px; }
  .component.panelEx.main > .title {
    font-size: 22px; }
  .component.panelEx.main .component.button.bottom {
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: transparent;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAYAAABhYU3QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABpJREFUeNpiZGBg8GUgAjD+//9fjRiFAAEGAJJMA3OVnUxoAAAAAElFTkSuQmCC");
    background-repeat: repeat-x; }
    .component.panelEx.main .component.button.bottom.focus {
      background: #2c60c6; }
  .component.panelEx.left.expand > .title, .component.panelEx.right.expand > .title {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAYAAABhYU3QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABpJREFUeNpiZGBg8GUgAjD+//9fjRiFAAEGAJJMA3OVnUxoAAAAAElFTkSuQmCC") bottom;
    background-repeat: repeat-x; }

.component.panelEx > .shadow.left {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAHACAQAAAAIWIALAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAFhSURBVHja7dxBeoIwFEXhQxLAqPvfZydttUA6IEHUfq2Tzg5v4CC/lxsW8DqgqxOJ9IyMHMgcOZLJjAwc+Uy0pyMQKx7InDlx5kRm5MTHHq44EOnp6Rlq9oET4QbZCiQSPT0jmcyRzPkGW89AJBBJDLXt2rTsE9nhWAuMjIxk5nCXB6FOK5BIDAwM4SGR7UotN60T6uH93anZkdh+7xP337T1rfMzfL4gv8Gy1eA3uL6ev+HDIxQKhUKhUCgUCoVCoVAoFAqFQqFQKBQKhUKhUCgUCoVCoVAoFAqFQqFQKBQKhUKhUCgUCoVCoVAoFAr/ARYWymuJHeuakfLaqwuFhSXs44FC147uJzz9u83CzMTMzML8CIEtY2Zm4qtNeEhaKp5r4sTEhQuX9FT9lnblyoUeSHxGqItk2rqbsC2SiSRCPd/gum+lrZBZ19PEuiWmEHi/wbagZuVdLTHxxZUrb9+Ij19Z7AmH/QAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNi0wMS0yNVQwOToxMDozNSswMDowMOujNaoAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTYtMDEtMjVUMDk6MTA6MzUrMDA6MDCa/o0WAAAAAElFTkSuQmCC");
  background-size: auto 100%; }

.component.panelEx > .shadow.right {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAHACAQAAAAIWIALAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAFxSURBVHja7dxBkpswFEXRK1k4LneG2WG2n6kBC4EysAxqO5V0ZXz5RRWDo6fHBn7gJ1duZGYmxvbO3LmzsLJSH5P4wZULmYkbiUhlZaVwYqOyUQEgceWDjQQU7pwZGMhEIgEIhAdNfOeDjROVQiYzkEicCA3tiReuFAIrmW8MJE4tLxCIT5q4cCGzkTnvaU/WPZGh9TqTdhYJO24HImnPSUQi7Ax4NoTYzXH+gfqrwzuMn7sdiX3tPu8NHuSP4BX2iV+AX04UCoVCoVAoFAqFQqFQKBQKhUKhUCgUCoVCoVAoFAqFQqFQKBQKhUKhUCgUCoVCoVAoFAqFQqFQKBQKhf8N67HN5B3WndS/Jz43wfwTbm0qtft+3NKVimysbWq/kKbdEI7EpU1h6ZIr9XX5S+ZOZmFhpezZ9SWZxEzat+FkCqWD3ZOYiEzMzMxkFgorhdJotxtnJDCSmfcKS5fZ7cb5xchIZmLkxo2p/drRFYDf9OW2uhEh76gAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTYtMDEtMjVUMDk6MTA6NDkrMDA6MDAmxlbHAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE2LTAxLTI1VDA5OjEwOjQ5KzAwOjAwV5vuewAAAABJRU5ErkJggg==");
  background-size: auto 100%; }

.component.panelEx > .overlay {
  background: rgba(0, 0, 0, 0.5); }

@-webkit-keyframes inputCursor {
  from {
    background-color: #fff; }
  to {
    background-color: transparent; } }

.themeFocusBg {
  background: #2c60c6; }

.component.focus.componentFocusBg {
  background: #2c60c6; }

.component.input {
  background: transparent;
  border: none;
  outline: none; }
  .component.input.italicPlaceholder > .line > .placeholder {
    font-style: italic;
    color: rgba(255, 255, 255, 0.2) !important; }
  .component.input .char {
    color: #fff; }
  .component.input > .line > .placeholder {
    color: #fff !important; }
  .component.input.focus {
    color: #fff; }
    .component.input.focus .char {
      color: #fff; }
    .component.input.focus .line > .caret {
      background-color: #fff;
      -webkit-animation: inputCursor 1s;
      -webkit-animation-iteration-count: infinite; }

.component.layoutList .item .layout > .input {
  display: inline-block;
  color: #ffffff; }

.component.modalMessage > div.alignBox > div {
  background: #384452;
  border-width: 10px;
  border-color: transparent;
  -webkit-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwZJREFUeNrs3VtvEzEQhmG7uzkphUogwQU38P9/FNxwARIVaVLlnGVcxs3EeA/ISIDyftLISbpJpHnq3c3V+KZpHPl34gEBhAACCAEEEALIFYJ4758fZtb0NdKdxqxN5rWfD4xBG4g3dZOUNys43Qgns9pqLFIfSApRS1Vy3JJeF5yKvH8hy1HqkMIMAQkQldRIayzHfaWtRSBvZNlJ7bWOEaUPxGKMpaZSMznuI20tAvkgy1pqY2CeUKxB3fL+iBJAZlIvaWlxYg9PChHrIjmQeMoa6e64lbqjn8W5MxgHLZ/bCW0gNTvkj++Qmfa0Tu5UO0EiSmV2yZx+FmeuvRxpb33btaJth8TT1kRlSVlm2stR8ptu8A6JF/ZaP4iUZRJ/07VhdIE4o1h13I2R4bEYN11Nb9sh6emLlCU9Tf32DiF/SY0AQgABhAACCAEEEAIIIAQQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIP8PSDqC+kSrimMnRNseD94h8QPiqFBSloM7T4hu/QfPTYsOgw/DEMQw//u11Fupd1LvdQ3PX7nzKNERvb5ImAIdpkI/SN1LfZH6LPVJ1/D8m9RSj9v3TYu2p6nw4Vt940q/ZGK+eOqYcZjbCRtt+Hft2Up7uNW+paevTpCIctQ3hw9/lFoYjK1+yQSQLMhWexZ3yUKfb9x5jnr2GtK1Q8IH78z2sxhLd558XGFwkaPp20ox7rWHa/3boW2H5K4hcShxHN091+vFna5zdx60W3PrnL0ZOphTfdwpC10fDczT6csatIFUBmWqALe6Tt2vg3bJJcjRoGzMblnr8505dfWC2EnRowRmbF7rnHp8xWkMyl5rl0DszS1wMwTEDiWuDU468Zjd0f0bzu6WvXls77J6QZyCpDB22nHv1OMr3yF2pzQJ0DNEPHYIiMs03INQhNNkXnMpyA8BBgDUZDIp6E/QeQAAAABJRU5ErkJggg==") 10 stretch;
  -webkit-background-clip: content; }
  .component.modalMessage > div.alignBox > div > div.header {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAYAAABhYU3QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABpJREFUeNpiZGBg8GUgAjD+//9fjRiFAAEGAJJMA3OVnUxoAAAAAElFTkSuQmCC") bottom;
    background-repeat: repeat-x;
    text-transform: uppercase; }
    .component.modalMessage > div.alignBox > div > div.header .icon {
      font-size: 20px; }
  .component.modalMessage > div.alignBox > div > div.body > .component.list .item .component.checkBox, .component.modalMessage > div.alignBox > div > div.body > .component.list .item .component.layout > div.icon {
    font-size: 20px; }
  .component.modalMessage > div.alignBox > div > div.overlay {
    background: rgba(9, 9, 9, 0.6); }

.component.modalMessage > .title {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAYAAABhYU3QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABpJREFUeNpiZGBg8GUgAjD+//9fjRiFAAEGAJJMA3OVnUxoAAAAAElFTkSuQmCC") bottom;
  background-repeat: repeat-x; }

.component.modalMessage .wrapper {
  background: #384452; }

.component.footer .icon {
  font-size: 20px; }

.component.footer .iconImg {
  background-repeat: no-repeat;
  background-position: center; }
  .component.footer .iconImg.f1 {
    background-image: url("./img/576/f1.png"); }
  .component.footer .iconImg.f2 {
    background-image: url("./img/576/f2.png"); }
  .component.footer .iconImg.f3 {
    background-image: url("./img/576/f3.png"); }
  .component.footer .iconImg.f4 {
    background-image: url("./img/576/f4.png"); }

.component.footer .central .wrapper > div.button {
  border-right: 1px solid rgba(255, 255, 255, 0.5); }
  .component.footer .central .wrapper > div.button:last-of-type {
    border-right: none; }
  .component.footer .central .wrapper > div.button:first-of-type {
    border-left: none; }

.component.footer .central .wrapper > div.right {
  margin-left: -1px;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.6);
  display: inline-block;
  height: inherit; }

.infoText {
  font-size: 17px; }

@font-face {
  font-family: 'icons';
  src: url("icons.ttf");
  font-weight: normal;
  font-style: normal; }

.osdPanel {
  background-color: #384452;
  color: #fff; }

.osdFocusItem {
  background-color: #2c60c6; }

.theme-favorite-icon {
  color: rgba(255, 255, 255, 0.2); }

.theme-favorite-icon-active {
  color: #FEC500; }

.theme-active-filter {
  color: #FEC500; }