@font-face {
    font-family: "Rubik";
    src: url(../fonts/Rubik/Rubik-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Rubik-Light";
    src: url(../fonts/Rubik/Rubik-Light.ttf) format("truetype");
}

@font-face {
    font-family: "Meteocons";
    src: url(../fonts/Meteocons/meteocons.ttf) format("truetype");
}

html, body {
    font-family: "Rubik-Light", sans-serif;
    background: transparent;
}

#main {
    /*background: url(../images/background.jpg);*/
}

#topMenuWrapper {
    background-image: linear-gradient(to bottom, rgba(20, 24, 26, 0.7), rgba(20, 24, 26, 0));
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

#weatherIcon {
    font-family: "Meteocons", sans-serif;
    color: #ffffff;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

#bottomMenuWrapper {
    background-image: linear-gradient(to right, rgba(20, 24, 26, 0.9), rgba(20, 24, 26, 0.9));
}

.bottomBottomItem .item_title {
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
}

.triangle {
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 10px solid #ffffff;
}

.bottomBottomItem {
    background: rgba(102, 119, 128, 0.3);
}

.bottomBottomItem.focus {
    background-color: #0958f4;
}

.bottomBottomItem.active {
    background-color: #ffffff;
}

#bottomBottomSliderItem_0.active .bottomBottomItemInner {
    background-image: url(../images/icons/e-icon-tv.png) !important;
}

#bottomBottomSliderItem_1.active .bottomBottomItemInner {
    background-image: url(../images/icons/e-icon-recommended.png) !important;
}

#bottomBottomSliderItem_2.active .bottomBottomItemInner {
    background-image: url(../images/icons/e-icon-apps.png) !important;
}

#bottomBottomSliderItem_3.active .bottomBottomItemInner {
    background-image: url(../images/icons/e-icon-source.png) !important;
}

#bottomBottomSliderItem_4.active .bottomBottomItemInner {
    background-image: url(../images/icons/e-icon-search.png) !important;
}

#bottomBottomSliderItem_5.active .bottomBottomItemInner {
    background-image: url(../images/icons/e-icon-settings.png) !important;
}

.seperator {
    background-color: #ffffff;
}

.installedAppsItem .focus_border, .tvProgramSliderItem .focus_border, .settingsSliderItem .focus_border, .sourceSliderItem .focus_border, .appsSliderItem .focus_border, .videoSliderItem .focus_border, .movieSliderItem .focus_border, .searchVideoSliderItem .focus_border, .searchMovieSliderItem .focus_border {
    background-image: linear-gradient(to right, rgba(20, 24, 26, 0.9), rgba(20, 24, 26, 0.9));
    box-shadow: 0px 7px 15px 0 rgba(0, 0, 0, 0.5);
    border: solid 5px #0055ff;
}

.bottomTopSlider {
    background-image: linear-gradient(to left, rgba(29, 35, 38, 0.9), rgba(36, 46, 51, 0.9) 50%, rgba(29, 35, 38, 0.9));
}

#favourites {
    color: #ffffff;
}

#epg {
    color: #ffffff;
}

.tvProgramSliderItem {
    background: rgba(102, 119, 128, 0.3);
}

/*.tvProgramSliderItem.focus {
    background: rgba(255, 255, 255, 0.3);
}*/

.channelNumber {
    color: #ffffff;
}

.channelName {
    color: #ffffff;
}

.programName {
    color: #ffffff;
}

.programDuration {
    color: #ffffff;
}

.fa-clock-o {
    background: url(../images/icons/icon-clock.png) no-repeat;
}

.progressWrapper {
    background: rgba(0, 0, 0, 0.5);
}

.progressBar {
    background: #fff;
}

.recommendationCategorySliderItem, .appsCategorySliderItem, .searchCategorySliderItem, .searchKeyboardItem {
    background-color: rgba(102, 119, 128, 0.3);
    color: #ffffff;
    border: solid 5px transparent;
}

.recommendationCategorySliderItem.focus, .appsCategorySliderItem.focus, .searchCategorySliderItem.focus, .searchKeyboardItem.focus {
    background-color: rgba(0, 59, 178, 0.2);
    box-shadow: 0px 7px 15px 0 rgba(0, 0, 0, 0.5);
    border: solid 5px #0055ff;
}

.recommendationTitle {
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
}

#recent {
    color: #ffffff;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.75);
}

.sourceSliderItem {
    background-color: rgba(102, 119, 128, 0.3);
}

.sourceName, .settingsName {
    font-family: Rubik-Light, "sans-serif";
    color: #ffffff;
}

#searchInput {
    color: #fff;
    background-color: rgba(102, 119, 128, 0.3);
    border: solid 2px #ffffff;
    background-image: url(../images/icons/icon-search-small.png);
}

.searchKeyboardItem {
    font-family: Rubik, "sans-serif";
    color: #fff;
    background: none;
}

.settingsSliderItem {
    background-color: rgba(102, 119, 128, 0.3);
}