.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: 258px !important; }

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

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

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

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

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

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

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

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

body {
  background: url(./img/480/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/480/f1.png"); }
  .icon.f2 {
    background-image: url("./img/480/f2.png"); }
  .icon.f3 {
    background-image: url("./img/480/f3.png"); }
  .icon.f4 {
    background-image: url("./img/480/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: 17px; }
  .component.panelEx .component.layoutList .icon {
    font-size: 22px !important; }
  .component.panelEx > .title {
    font-size: 20px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAYAAABhYU3QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABpJREFUeNpiZGBg8GUgAjD+//9fjRiFAAEGAJJMA3OVnUxoAAAAAElFTkSuQmCC") bottom;
    background-repeat: repeat-x; }
  .component.panelEx.main .component.layoutList > .body > .item {
    font-size: 20px; }
  .component.panelEx.main > .title {
    font-size: 24px; }
  .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; } }

.component.input {
  background: transparent;
  border: none;
  outline: none; }
  .component.input.themeBg > .line > .placeholder {
    font-style: italic;
    color: rgba(255, 255, 255, 0.2) !important; }
  .component.input.themeBg.focus {
    background: #2c60c6; }
  .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; }
  .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/480/f1.png"); }
  .component.footer .iconImg.f2 {
    background-image: url("./img/480/f2.png"); }
  .component.footer .iconImg.f3 {
    background-image: url("./img/480/f3.png"); }
  .component.footer .iconImg.f4 {
    background-image: url("./img/480/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: 22px; }

@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; }