.theme-dark {
  background: #2d3b49;
  /* Old browsers */
  background: -moz-radial-gradient(top, #2d3b49 0%, #101e2c 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, left top, left bottom, color-stop(0%, #2d3b49), color-stop(100%, #101e2c));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(top, #2d3b49 0%, #101e2c 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(top, #2d3b49 0%, #101e2c 100%);
  /* Opera 11.10+ */
  background: -ms-radial-gradient(top, #2d3b49 0%, #101e2c 100%);
  /* IE10+ */
  background: radial-gradient(to bottom, #2d3b49 0%, #101e2c 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
  /* IE6-9 */
  -webkit-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
  /* LG WebOS 3 */
  color: #fff;
  /*==============Button=================*/
  /*==============List Item=================*/
  /*==============Progress bar=================*/
  /*============== Keyboard =================*/
}

.theme-dark .ui-grid-container {
  -ms-overflow-style: none;
}

.theme-dark ::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.theme-dark .secondary-bg {
  background-color: #2f3237;
}

.theme-dark .highlight {
  background-color: #1d7be3;
  color: #fff;
}

.theme-dark .text-active {
  color: #1d7be3;
  font-size: 300%;
}

.theme-dark .text-inactive {
  color: #bebfc1;
}

.theme-dark a:hover,
.theme-dark a:active,
.theme-dark a:focus {
  color: #1d7be3;
  text-decoration: none;
}

.theme-dark button::selection {
  background-color: none;
}

.theme-dark .as-btn {
  font-size: 90%;
  width: 47%;
  background-color: #1A2531;
  color: white;
  padding: 1.5vh;
  outline: none !important;
}

.theme-dark .as-btn:disabled {
  color: #bebfc1;
}

.theme-dark .as-btn:hover:enabled, .theme-dark .btn:focus:enabled, .theme-dark .as-btn:active {
  color: #fff;
  background-color: #1d7be3;
}

.theme-dark .list-group {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.theme-dark .list-group-item:hover {
  background-color: transparent;
  color: #fff;
}

.theme-dark .list-group-item.active,
.theme-dark .list-group-item.focus {
  background-color: #1d7be3 !important;
  color: #fff;
}

.theme-dark .progress-bar {
  background-color: #1d7be3;
}

.theme-dark .as-keyboard {
  background-color: #2f3237;
  color: #fff;
}

.theme-dark .as-keyboard .key-primary {
  background-color: #43484e;
  color: #bebfc1;
}

.theme-dark .as-keyboard .key-focus, .theme-dark .as-keyboard .key-selected, .theme-dark .as-keyboard .key:active {
  background-color: #1d7be3;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 0px;
}

.theme-dark {
  background: #2d3b49;
  /* Old browsers */
  background: -moz-radial-gradient(top, #2d3b49 0%, #101e2c 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, left top, left bottom, color-stop(0%, #2d3b49), color-stop(100%, #101e2c));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(top, #2d3b49 0%, #101e2c 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(top, #2d3b49 0%, #101e2c 100%);
  /* Opera 11.10+ */
  background: -ms-radial-gradient(top, #2d3b49 0%, #101e2c 100%);
  /* IE10+ */
  background: radial-gradient(to bottom, #2d3b49 0%, #101e2c 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
  /* IE6-9 */
  -webkit-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
  /* LG WebOS 3 */
  color: #fff;
  /*==============Button=================*/
  /*==============List Item=================*/
  /*==============Progress bar=================*/
  /*============== Keyboard =================*/
}

.theme-dark .ui-grid-container {
  -ms-overflow-style: none;
}

.theme-dark ::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.theme-dark .secondary-bg {
  background-color: #2f3237;
}

.theme-dark .highlight {
  background-color: #1d7be3;
  color: #fff;
}

.theme-dark .text-active {
  color: #1d7be3;
  font-size: 300%;
}

.theme-dark .text-inactive {
  color: #bebfc1;
}

.theme-dark a:hover,
.theme-dark a:active,
.theme-dark a:focus {
  color: #1d7be3;
  text-decoration: none;
}

.theme-dark button::selection {
  background-color: none;
}

.theme-dark .as-btn {
  font-size: 90%;
  width: 47%;
  background-color: #1A2531;
  color: white;
  padding: 1.5vh;
  outline: none !important;
}

.theme-dark .as-btn:disabled {
  color: #bebfc1;
}

.theme-dark .as-btn:hover:enabled, .theme-dark .btn:focus:enabled, .theme-dark .as-btn:active {
  color: #fff;
  background-color: #1d7be3;
}

.theme-dark .list-group {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.theme-dark .list-group-item:hover {
  background-color: transparent;
  color: #fff;
}

.theme-dark .list-group-item.active,
.theme-dark .list-group-item.focus {
  background-color: #1d7be3 !important;
  color: #fff;
}

.theme-dark .progress-bar {
  background-color: #1d7be3;
}

.theme-dark .as-keyboard {
  background-color: #2f3237;
  color: #fff;
}

.theme-dark .as-keyboard .key-primary {
  background-color: #43484e;
  color: #bebfc1;
}

.theme-dark .as-keyboard .key-focus, .theme-dark .as-keyboard .key-selected, .theme-dark .as-keyboard .key:active {
  background-color: #1d7be3;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 0px;
}

sidebar, .sidebar {
  display: flex;
  color: white;
  background-color: #040b17;
  cursor: pointer;
  pointer-events: all;
  z-index: 3;
  position: relative;
}

sidebar .sidebar-container, .sidebar .sidebar-container {
  width: 4.5vmax;
}

sidebar .sidebar-container-open .icon-container-slide, .sidebar .sidebar-container-open .icon-container-slide {
  transform: translateX(0);
}

sidebar .icon-container, .sidebar .icon-container {
  display: flex;
  z-index: 2;
  position: relative;
  height: 100%;
  flex-direction: column;
  padding: 2vmin 0;
  align-content: center;
  overflow: hidden;
  background-color: #040b17;
}

sidebar .icon-container .menu-icon-container, .sidebar .icon-container .menu-icon-container {
  display: flex;
  flex-direction: column;
}

sidebar .icon-container .menu-icon-selected, .sidebar .icon-container .menu-icon-selected {
  position: relative;
}

sidebar .icon-container .menu-icon-selected .menu-selected-edge, .sidebar .icon-container .menu-icon-selected .menu-selected-edge {
  position: absolute;
  height: 80%;
  top: 10%;
  left: 0;
  width: 0.5vmin;
  background-color: #1d7be3;
}

sidebar .icon-container .menu-icon-selected i, .sidebar .icon-container .menu-icon-selected i {
  opacity: 1 !important;
}

sidebar .icon-container .menu-label-selected, .sidebar .icon-container .menu-label-selected {
  opacity: 1 !important;
}

sidebar .icon-container .menu-icon, .sidebar .icon-container .menu-icon {
  padding: 2vmin 0;
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 25vmax;
}

sidebar .icon-container .menu-icon i, .sidebar .icon-container .menu-icon i {
  opacity: 0.6;
  line-height: 0.9;
  width: 4.5vmax;
  font-size: 300%;
  text-align: center;
}

sidebar .icon-container .menu-icon .icon-recent, .sidebar .icon-container .menu-icon .icon-recent {
  font-size: 340%;
}

sidebar .icon-container .menu-icon .icon-search, .sidebar .icon-container .menu-icon .icon-search {
  font-size: 260%;
}

sidebar .icon-container .sub-menu-label-collection, .sidebar .icon-container .sub-menu-label-collection {
  display: block;
  flex-direction: column;
  width: 25vmax;
  max-height: 47vmin;
  overflow-y: scroll;
  margin-top: -1vmin;
  padding-bottom: 2vmin;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

sidebar .icon-container .sub-menu-label-collection ::-webkit-scrollbar, .sidebar .icon-container .sub-menu-label-collection ::-webkit-scrollbar {
  display: none;
}

@media screen and (orientation: portrait) {
  sidebar .icon-container .sub-menu-label-collection, .sidebar .icon-container .sub-menu-label-collection {
    max-height: calc(100vh - 55vmin);
  }
}

sidebar .icon-container .sub-menu-label-collection span, .sidebar .icon-container .sub-menu-label-collection span {
  display: block;
  min-width: 100%;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

sidebar .icon-container .menu-label, .sidebar .icon-container .menu-label {
  margin-left: 0.5vmax;
  margin: 1vmin 0;
  font-size: 170%;
  opacity: 0.6;
  font-family: Roboto-Medium;
}

sidebar .icon-container .sub-menu-label, .sidebar .icon-container .sub-menu-label {
  opacity: 0.6;
  margin: 0;
  padding: 2vmin 2.5vmin 2vmin 4.6vmax;
}

sidebar .icon-container-slide, .sidebar .icon-container-slide {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 25vmax;
  height: 100%;
  transform: translateX(-100%);
  background-color: #040b17;
  -webkit-transition: transform 0.5s;
  /* Safari */
  transition: transform 0.5s;
  z-index: 1 !important;
  flex-flow: row wrap;
  align-content: flex-start;
}

/*===================Layout===================*/
.epg {
  display: flex;
  height: 100vh;
  width: 100vw;
  /*===================Load Error===================*/
}

.epg .epg-back-text {
  color: #ffffff;
  text-align: center;
  font-size: 2.5vmax;
}

.epg .epg-back-text i {
  line-height: 3.5;
}

.epg .sidebar-bottom-align {
  align-items: flex-end;
}

.epg .epg-page {
  padding: 3vw;
  width: calc(100% - 4.5vmax);
  height: 100%;
}

.epg .container {
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  /*===================Selected Program===================*/
}

.epg .container .selected-program {
  height: 40vh;
  width: inherit;
}

.epg .container .selected-program .left {
  width: 35%;
  height: inherit;
  float: left;
  overflow: hidden;
  position: relative;
}

.epg .container .selected-program .left .left-content-holder {
  position: relative;
}

.epg .container .selected-program .left .left-content-holder loader {
  height: 100%;
  min-height: 100%;
}

.epg .container .selected-program .left .left-content-holder:before {
  background-color: #2f3237;
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}

.epg .container .selected-program .right {
  width: 60%;
  padding-right: 5%;
  height: inherit;
  float: right;
  overflow: hidden;
}

.epg .container .selected-program .right .title {
  font-size: 360%;
  padding-bottom: 10px;
}

.epg .container .selected-program .right .time {
  padding-bottom: 10px;
  font-size: 180%;
}

.epg .container .selected-program .right .desc {
  overflow: scroll;
  font-size: 180%;
  color: #bebfc1;
  word-wrap: break-word;
}

.epg .container .selected-program .right .instruction {
  padding-top: 2%;
  color: #1d7be3;
  font-size: 240%;
}

.epg .container .timetable {
  overflow: hidden;
  margin-top: 2vh;
  /*===================Header===================*/
}

.epg .container .timetable .cell-size {
  height: 6%;
  display: none;
  position: absolute;
}

.epg .container .timetable .header {
  width: 100%;
}

.epg .container .timetable .header .inner .header-cell {
  padding-left: 1vw;
  height: 100%;
  border: 2px solid transparent;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 170%;
  font-size: 170%;
}

.epg .container .timetable .content {
  width: 100%;
  height: 41vh;
  overflow: hidden;
}

.epg .container .timetable .content .epg-table {
  width: 100%;
}

.epg .container .timetable .left {
  width: 20%;
  float: left;
  overflow: hidden;
  height: inherit;
}

.epg .container .timetable .right {
  width: 80%;
  float: right;
  overflow: hidden;
  height: inherit;
}

.epg .epg-table {
  line-height: 260%;
  font-size: 170%;
  transform: translateZ(0px);
  /*===================Channel List===================*/
  /*===================Programs===================*/
}

.epg .epg-table .epg-channel {
  padding-left: 1vw;
  padding-right: 1vw;
  height: 100%;
  border: 4px solid transparent;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  background-color: #2f3237;
}

.epg .epg-table .epg-channel .channel-no {
  width: 20%;
  display: inline-block;
  vertical-align: top;
}

.epg .epg-table .epg-channel .name {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
  padding-left: 5%;
}

.epg .epg-table .epg-program {
  padding-left: 1vw;
  padding-right: 1vw;
  border: 4px solid transparent;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

.epg .epg-table .next {
  background-color: #2f3237;
}

.epg .epg-table .no-program {
  color: rgba(255, 255, 255, 0.4);
  background-color: #2f3237;
}

.epg .epg-table .now {
  background-color: #43484e;
}

.epg .epg-table .selected {
  color: #fff;
  background-color: #1d7be3;
}

@media screen and (orientation: portrait) {
  .epg .epg-back-holder {
    width: 4%;
  }
  .epg .container .selected-program {
    height: 20vh;
  }
  .epg .container .timetable .content {
    height: 61vh;
  }
  .epg .epg-table .epg-channel .channel-no {
    width: 30%;
  }
}

.epg .load-error {
  z-index: 10;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  top: 0;
}

.epg .load-error div {
  top: 50%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  position: relative;
  text-align: center;
}