*{
    margin: 0px;
    padding: 0px;
}
html, body { 
    overflow-x: hidden;
}
html {
    height: 100%;
    background-color: white;
}
body {
    background-color: white;
}
footer{
    margin-top: auto;
}
a{
    color: white;

}
a:hover{
    color: white;

}
.channel-list{
    margin: 10px 0px 30px 0px;
}
.channel-logo{
    max-width: 90%;
    max-height:90%;
}
.lang-logo{
    margin: 10px 10px 10px 0px;
}
#player{
    height: 600px;
}

#search-input {
    background-image: url(/images/search.png); /* Add a search icon to input */
    background-size: 24px;
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    border-radius: 5px;
    outline-color: seagreen;
}

.channel-display {
border: 2px solid #ddd; /* Add a border to all links */
background-color: #f4F4F4; /* Grey background color */
padding: 12px; /* Add some padding */
text-decoration: none; /* Remove default text underline */
font-size: 18px; /* Increase the font-size */
color: black; /* Add a black text color */
border-radius: 5px;
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
justify-content: center;
text-align: center;
}
.channel-display img{
    padding: 10px;
    max-height: 100%;
}
.channel-display h5{
    font-size: 14px;
}

.channel-display:hover{
background-color: #eee; /* Add a hover effect to all links, except for headers */
}
.list-title{
    font-size: 24px;
    text-align: left;
    margin: 40px 0px 10px 0px;
}
@media screen and (max-width: 450px) {
    .list-title{
        font-size: 24px;
        text-align: left;
        margin: 20px 0px 10px 0px;
    }
  }

.list-title-reverse{
    font-size: 24px;
    text-align: right;
}
#paginationjs{
    margin-bottom: 20px;
}
#paginationjs ul, li {
    list-style: none;
    display: flex;
    font-size: 14px;
    justify-content: center;
    text-align: center;
}
#paginationjs ul {
    padding: 0;
    margin: 0;
    display: flex;
    text-align: center;
}

#paginationjs li {
    margin: 2px;
    border-radius: 5px;
    padding: 5px 10px;
    color: #666;
}
.paginationjs a{
    color: #666;
    text-decoration-line: none;
}

.paginationjs-page.active{
    background: seagreen;
}
.paginationjs-page.active a{
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
@media screen and (max-width: 450px) {
    #paginationjs{
        font-size: 14px;
        padding: 5px 7px;
    }
  }

.center {
position: absolute;
display: inline-block;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}

/** Custom Select **/
.custom-select-wrapper {
position: relative;
display: inline-block;
user-select: none;
width: 100%;
height: 100%;
}
.custom-select-wrapper select {
display: none;
}
.custom-select {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
.custom-select-trigger {
position: relative;
display: block;
width: 100%;
font-size: 18px;
font-weight: 300;
padding: 0 0 0 15px;
color: #fff;
line-height: 50px;
background: seagreen;
border-radius: 5px;
cursor: pointer;
max-height: 50px;
}
.custom-select-trigger:after {
position: absolute;
display: block;
content: '';
width: 10px; height: 10px;
top: 50%; right: 25px;
margin-top: -3px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg) translateY(-50%);
transition: all .4s ease-in-out;
transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
position: absolute;
display: block;
top: 100%; left: 0; right: 0;
min-width: 100%;
margin: 15px 0;
border: 1px solid #b5b5b5;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 2px 1px rgba(0,0,0,.07);
background: #fff;
transition: all .4s ease-in-out;
z-index: 999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-15px);
height: 170px;
overflow: scroll;
}
.custom-select.opened .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateY(0);
}
.custom-options:before {
position: absolute;
display: block;
content: '';
bottom: 100%; right: 25px;
width: 5px; height: 5px;
margin-bottom: -4px;
border-top: 1px solid #b5b5b5;
border-left: 1px solid #b5b5b5;
background: #fff;
transform: rotate(45deg);
transition: all .4s ease-in-out;
}
.option-hover:before {
background: #f9f9f9;
}
.custom-option {
position: relative;
display: block;
padding: 0 15px;
border-bottom: 1px solid #b5b5b5;
font-size: 18px;
font-weight: 300;
color: seagreen;
line-height: 47px;

cursor: pointer;
transition: all .4s ease-in-out;
}
.custom-option:first-of-type {
border-radius: 4px 4px 0 0;
}
.custom-option:last-of-type {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
.custom-option:hover,
.custom-option.selection {
background: #f9f9f9;
}
#search-trigger{
    height: 50px;
    width: 100%;
    outline:none;
    border-radius: 5px;
    border: none;
    background-color: seagreen;
    color: white;
    font-size: 18px;
    font-weight: 300;
}
.main{
    margin-top: 50px;
    background-color: white;
}
#filters-trigger{
    color: seagreen;
    background-color: white;
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
}
#top-search-row{
    margin-bottom: 15px;
}
#filter-button-wrapper{
    display: none;
}
#results-wrapper{
    overflow: hidden;
    background-color: white;
}
#loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid seagreen; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    margin: 100px 10px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.section{
    text-align: left;
    justify-content: left;
    background-color: white;
    z-index: 1000;
    padding: 0px 10px;
}
.section p{
    font-size: 18px;
    text-align: left;
    width: 100%;
}
.section h1{
    font-size: 18px;
}
.section ul{
    padding-left: 0px;
}
.section li{
    text-align: left;
    width: 100%;
}
#donate-info strong{
    color: black;
    text-decoration-line: underline;
}
.section #inverted{
    text-align: right;
    width: 100%;
}
.section #inverted p{
    text-align: right;
    width: 100%;
}