html {
    font-family: 'Inter', sans-serif;
}

.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
    font-family: 'Inter', sans-serif;
}

.h1, h2, h3, h4, h5, h6 {
    font-family: 'PT Sans', sans-serif;
}

header {
    background: rgb(4, 36, 113);
    background: -moz-linear-gradient(90deg, rgba(4, 36, 113, 1) 0%, rgba(92, 0, 119, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(4, 36, 113, 1) 0%, rgba(92, 0, 119, 1) 100%);
    background: linear-gradient(90deg, rgba(4, 36, 113, 1) 0%, rgba(92, 0, 119, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#042471", endColorstr="#5c0077", GradientType=1);
    padding: 0 20px;
}

.uk-background-primary {
    background: rgb(4, 36, 113);
    background: -moz-linear-gradient(90deg, rgba(4, 36, 113, 1) 0%, rgba(92, 0, 119, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(4, 36, 113, 1) 0%, rgba(92, 0, 119, 1) 100%);
    background: linear-gradient(90deg, rgba(4, 36, 113, 1) 0%, rgba(92, 0, 119, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#042471", endColorstr="#5c0077", GradientType=1);
}

.uk-background-muted {
    background: linear-gradient(to right, #042471 0%, #5c0077 51%);
}

.uk-logo {
    max-width: 250px;
    max-height: 40px;
}



.epg-filter {
    color: #fff;
    padding: 20px;
    background: linear-gradient(to right, #042471 0%, #5c0077 51%);
}

.epg-list {
    height: calc(100vh - 160px);
}

.epg-item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.epg-item:hover {
    background: #ececec;
}

.epg-item-icon {
    width: 20px;
}

.epg-item-title {
    font-size: 16px;
}

.epg-item-time span {
    display: block;
}

.epg-item-time span:nth-child(2) {
    color: #ccc;
}

.epg-item-progress {
    height: 8px;
    margin: 0;
    border-radius: 0;
    margin-top: 0;
    transition: all 1s ease;
    
}

.epg-item-progress::-webkit-progress-bar {
    border-radius: 0;
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    
}

.epg-item-progress::-moz-progress-bar {
    border-radius: 0;
    background: linear-gradient(to right, #042471 0%, #5c0077 51%);

    
}

.epg-item-progress::-webkit-progress-value {
    border-radius: 0;
    background: linear-gradient(269deg, #042471 0%, #5c0077 51%);
}


@media only screen and (max-width: 600px) {
    .epg-list1 {
        height: calc(50vh - 160px);
    }
  }