@font-face {font-family:'helvetica_light'; src:url('fonts/helvetica_light.otf') format('truetype');}
@font-face {font-family:'helvetica_regular'; src:url('fonts/helvetica_regular.otf') format('truetype');}
@font-face {font-family:'helvetica_bold'; src:url('fonts/helvetica_bold.otf') format('truetype');}

body {
    margin: 0;
    color: white;
    font-family: "helvetica_regular";
    background-color: #2A2A3A;
    font-synthesis: none !important;
}

a {
    color: white;
    text-decoration: none !important;
}

.header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #1E1F29;
    padding: 10px 30px;
}

.logo {
    max-height: 50px;
}

.tabs {
    padding: 5px 0;
    padding-top: 20px;
}

.tbut {
    padding: 7px;
    margin-right: 20px;
    opacity: 0.5;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.tbut:hover {
    background-color: #4C4E9C;
    border-radius: 5px;
    opacity: 1 !important;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.tactive {
    background-color: #4C4E9C;
    border-radius: 5px;
    opacity: 1 !important;
}

.row {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.row2 {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.row3 {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

.sidebar {
    display: flex;
    flex-direction: column;
    width: 15em;
    padding: 20px;
}

.sh {
    opacity: 0.5;
}

.sbut {
    display: flex;
    flex-direction: row;
    padding: 15px;
    margin: 5px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    max-width: 90%;
    cursor: pointer;
}

.sbut:hover{
    background-color: #383A52;
    border-radius: 5px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    cursor: pointer;
}

.sbuticon {
    width: 20px;
    margin-right: 20px;
}

.sactive {
    background-color: #383A52;
    border-radius: 5px;
}

.sleft {
    width: 15em;
    padding: 15px;
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    margin-top: 2em;
    padding: 2em 0;
    background-color: #1E1F29;
    text-align: center;
}

.langs {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.langs a img {
    height: 1em;
}

.about {
    opacity: 0.5;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.about:hover {
    opacity: 1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.quickinfo {
    opacity: 0.5;
}

.ttabs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.search {
    display: flex;
    flex-direction: row;
    border: 3px solid #2A2A3A;
    border-radius: 20px;
}

.searchbox {
    width: 500px;
    height: 100%;
    background: none;
    border: none;
    outline: 0;
    color: white;
    font-size: 20px;
    padding-left: 20px;
}

.searchbut {
    height: 100%;
    background: #2A2A3A;
    border: none;
    border-radius: 15px;
    outline: 0;
    color: white;
    font-size: 20px;
    padding: 0 20px;
}

.loginbut {
    display: flex;
    flex-direction: row;
    height: 100%;
    background: #FFDA4D;
    border: none;
    border-radius: 20px;
    outline: 0;
    color: black;
    padding: 15px;
}

.header .login {
    display: flex;
    flex-direction: column;
}

.box {
    display: flex;
    flex-direction: row;
}

.content {
    width: 100%;
}

.error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    gap: 1em;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.tvplate {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 15em;
    width: 7.5em;
    padding: 20px;
    border-radius: 10px;
}

.tvch {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    gap: 1em;
    width: 15em;
}

.tvheader {
    display: flex;
    flex-direction: row;
    padding: 1em;
    border-radius: 1em;
    height: fit-content;
}

.tvlogo {
    height: 1em;
    width: fit-content;
}

.tventries {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.tventry a {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

#tventryimg {
    width: 6em;
    height: 100%;
    border-radius: 0.5em;
}

.tvtext {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.tvtextnext {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

#tvtitle {
    font-size: 20px;
}

#tvtime {
    opacity: 0.5;
}

.tvtime {
    opacity: 0.5;
}

.prlogo {
    display: flex;
    justify-content: center;
    height: 1em;
    width: 1em;
    padding: 0.1em;
}

#logo {
    width: 100%;
}

#prentries {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.more {
    display: flex; 
    opacity: 0.5; 
    padding: 1em; 
    background-color: #1E1F29;
}

.prentry a {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.prentryimg {
    width: 10em;
    height: 100%;
    border-radius: 0.5em;
}

.prtext {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.prtextnext {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

#prtitle {
    font-size: 20px;
}

#prtime {
    opacity: 0.5;
}

.prtime {
    opacity: 0.5;
}

#ch1 {
    background-color: #00387E;
}

#r1 {
    background-color: #C40000;
}

#ntv {
    background-color: #39A82A;
}

#cgtn {
    background-color: #D2BE68;
}

#m24 {
    background-color: #0CEFED;
}

#spb6 {
    background-color: #00B0C8;
}

#ont {
    background-color: #FFCC01;
}

#stv {
    background-color: #D80B22;
}

#fd {
    background-color: #182851;
}

#rt {
    background-color: #77BC1F;
    color: #000;
}

#cnn {
    background-color: #CC0000;
}

#fox {
    background-color: #003366;
}

#bbc {
    background-color: #B80000;
}

#eu {
    background-color: #0172F0;
}

#ard {
    background-color: #062650;
}

#alj {
    background-color: #FA9000;
}

#fr24 {
    background-color: #00B3F0;
}

#tnt {
    background-color: #00F3F4;
}

#viva {
    background-color: #FCF218;
}

#fmus {
    background-color: #FE740E;
}

#yle {
    background-color: #0099DB;
}

#yle2 {
    background-color: #A625AA;
}

#etv {
    background-color: #D60A62;
}

#etv2 {
    background-color: #0EAA81;
}

#etvplus {
    background-color: #DE10C5;
}

#lrt {
    background-color: #0A45BC;
}

#tvp {
    background-color: #00529F;
}

#tvp3 {
    background-color: #174891;
}

#jednotka {
    background-color: #ED245A;
}

#duna {
    background-color: #002691;
}

#mold1 {
    background-color: #1745B8;
}

#per {
    background-color: #D70B04;
}

#match {
    background-color: #C59F56;
}

#bel1 {
    background-color: #C00F0F;
}

#bel2 {
    background-color: #C00F0F;
}

#bel3 {
    background-color: #C00F0F;
}

#bel4 {
    background-color: #C00F0F;
}

#bel5 {
    background-color: #C00F0F;
}

#bel24 {
    background-color: #C00F0F;
}

#belsat {
    background-color: #033A58;
}

#ch1p1 {
    background-color: #C8183D;
}

#ch24 {
    background-color: #D11831;
}

#ch2p2 {
    background-color: #F15022;
}

#stb {
    background-color: #FF0143;
}

#mtv {
    background-color: #D42E42;
}

#his {
    background-color: #FCDB50;
}

#itv {
    background-color: #1CCBD4;
}

#ch4 {
    background-color: #AAFF89;
}

#zdf {
    background-color: #FA7D19;
}

#fr2 {
    background-color: #EB0032;
}

#orf {
    background-color: #E2001A;
}

#rtl {
    background-color: #FA0000;
}

#la1 {
    background-color: #433DCA;
}

#sic {
    background-color: #EC4F2C;
}

#rtb {
    background-color: #77BC1F;
}

#tvcg1 {
    background-color: #E12028;
}

#sar24 {
    background-color: #3FABE3;
}

#seim {
    background-color: #FF7B00;
}

#k24 {
    background-color: #224B83;
}

#chgtrk {
    background-color: #4FA63B;
}

#otv {
    background-color: #041947;
}

#aist {
    background-color: #000;
}

#tvk {
    background-color: #333333;
}

#otvprim {
    background-color: #9509EB;
}

#zahid {
    background-color: #4788C8;
}

#ch11 {
    background-color: #233253;
}

#mis {
    background-color: #04B2F2;
}

#tvrain {
    background-color: #CF3476;
}

#wdr {
    background-color: #00375A;
}

#br {
    background-color: #0069FF;
}

#rbb {
    background-color: #E0131A;
}

#swr {
    background-color: #17033E;
}

.vcontent {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 40px;
}

.vcolumn {
    display: flex;
    flex-direction: column;
    width: 800px;
}

.vmenu {
    display: flex;
    flex-direction: column;
    padding-top: 40px;
}

.vtitle {
    font-size: 50px;
    font-weight: 900;
}

.vdesc {
    padding-top: 20px;
    font-size: 20px;
}

.vmore {
    display: flex;
    flex-direction: column;
    padding-left: 40px;
    width: 410px;
}

.epg {
    display: flex;
    flex-direction: column;
    background: #1E1F29;
    padding: 1em;
    width: 100%;
    gap: 1em;
}

.entries {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.entry {
    display: flex;
    flex-direction: row;
}

#entryimg {
    width: 50%;
    height: fit-content;
}

.entrytext {
    display: flex;
    flex-direction: column;
    padding: 0 1em;
    gap: 0.5em;
}

#cover {
    width: 50%;
}

#timeentries {
    display: flex;
    flex-direction: row;
    background: #1E1F29;
    width: 50%;
}

.timeentry {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1em;
}

#timenow {
    background-color: #4C4E9C;
}

.timeentrytext {
    display: flex;
    flex-direction: column;
    padding: 0 1em;
    gap: 0.5em;
}

.timeentrytext #time {
    font-size: 20px;
}

.timeentrytext #date {
    font-size: 15px;
}

.mailit {
    height: 2em; 
    width: auto; 
    opacity: 0.5;
}

.social {
    height: 1em; 
    width: 1em;
}

.hidden {
    display: none !important;
}

@media screen and (max-width: 1120px) {
body {
    margin: 0;
    color: white;
    font-family: "helvetica_regular";
    background-color: #2A2A3A;
}

a {
    color: white;
    text-decoration: none !important;
}

.header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #1E1F29;
    padding: 30px 30px;
}

.logo {
    max-height: 150px;
}

.tabs {
    padding: 5px 0;
    padding-top: 20px;
}

.tbut {
    padding: 7px;
    margin-right: 20px;
    opacity: 0.5;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.tbut:hover {
    background-color: #4C4E9C;
    border-radius: 5px;
    opacity: 1 !important;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.tactive {
    background-color: #4C4E9C;
    border-radius: 5px;
    opacity: 1 !important;
}

.row {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.row2 {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.row3 {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.sidebar {
    display: none;
    flex-direction: column;
    width: 15em;
    padding: 20px;
}

.sh {
    opacity: 0.5;
}

.sbut {
    display: flex;
    flex-direction: row;
    padding: 15px;
    margin: 5px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    max-width: 90%;
    cursor: pointer;
}

.sbut:hover{
    background-color: #383A52;
    border-radius: 5px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    cursor: pointer;
}

.sbuticon {
    width: 20px;
    margin-right: 20px;
}

.sactive {
    background-color: #383A52;
    border-radius: 5px;
}

.sleft {
    width: 15em;
    padding: 15px;
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    margin-top: 2em;
    padding: 2em 0;
    background-color: #1E1F29;
    text-align: center;
    font-size: 50px;
}

.langs {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.langs a img {
    height: 1em;
}

.about {
    opacity: 0.5;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.about:hover {
    opacity: 1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.quickinfo {
    opacity: 0.5;
}

.ttabs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.search {
    display: flex;
    flex-direction: row;
    border: 3px solid #2A2A3A;
    border-radius: 20px;
}

.searchbox {
    width: 500px;
    height: 100%;
    background: none;
    border: none;
    outline: 0;
    color: white;
    font-size: 20px;
    padding-left: 20px;
}

.searchbut {
    height: 100%;
    background: #2A2A3A;
    border: none;
    border-radius: 15px;
    outline: 0;
    color: white;
    font-size: 20px;
    padding: 0 20px;
}

.loginbut {
    display: flex;
    flex-direction: row;
    height: 100%;
    background: #FFDA4D;
    border: none;
    border-radius: 20px;
    outline: 0;
    color: black;
    padding: 15px;
}

.header .login {
    display: flex;
    flex-direction: column;
}

.box {
    display: flex;
    flex-direction: column;
}

.content {
    width: unset;
    margin: 50px;
}

.error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    gap: 1em;
    font-size: 50px;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

h1 {
    font-size: 100px;
}

h2 {
    font-size: 75px;
}

.tvplate {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 400px;
    width: 400px;
    padding: 20px;
    border-radius: 10px;
}

.tvch {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    gap: 1em;
    width: 100%;
}

.tvheader {
    display: flex;
    flex-direction: row;
    padding: 3em;
    border-radius: 1em;
    height: fit-content;
}

.tvlogo {
    height: 4em;
    width: fit-content;
}

.tventries {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.tventry a {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

#tventryimg {
    width: 50%;
    height: 100%;
    border-radius: 0.5em;
}

.tvtext {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.tvtextnext {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

#tvtitle {
    font-size: 50px;
}

#tvtime {
    font-size: 35px;
    opacity: 0.5;
}

.tvtitle {
    font-size: 50px;
}

.tvtime {
    font-size: 50px;
    opacity: 0.5;
}

.prlogo {
    display: flex;
    justify-content: center;
    height: 4em;
    width: 100%;
    padding: 0.1em;
}

#logo {
    width: 50%;
}

#prentries {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.more {
    display: flex; 
    opacity: 0.5; 
    padding: 1em 0; 
    font-size: 50px;
    width: 100%;
    justify-content: center;
    background-color: #1E1F29;
}

.prentry a {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.prentryimg {
    width: 50%;
    height: 100%;
    border-radius: 0.5em;
}

.prtext {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.prtextnext {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

#prtitle {
    font-size: 50px;
}

#prtime {
    font-size: 30px;
    opacity: 0.5;
}

.prtitle {
    font-size: 50px;
}

.prtime {
    font-size: 50px;
    opacity: 0.5;
}

.vcontent {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: unset;
}

.vcolumn {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.vmenu {
    display: flex;
    flex-direction: column;
    padding: 40px;
}

.vtitle {
    font-size: 100px;
    font-weight: 900;
}

.vdesc {
    padding-top: 20px;
    font-size: 50px;
}

.vmore {
    display: flex;
    flex-direction: column;
    padding-left: 40px;
    width: 410px;
}

.tvplate img {
    width: 80%;
}

img[src="cdn/per.svg"] {
    height: 90% !important;
}

img[src="cdn/his.svg"] {
    height: 70% !important;
}

img[src="cdn/4.svg"] {
    height: 80% !important;
}

iframe {
    height: 550px;
    width: 100%;
}

.epg {
    display: flex;
    flex-direction: column;
    background: #1E1F29;
    padding: 1em 1em 1em 1em;
    width: 96.5%;
    gap: 2em;
}

.epg span {
    font-size: 50px;
}

.entries {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.entry {
    display: flex;
    flex-direction: row;
}

#entryimg {
    width: 50%;
    height: 100%;
}

.entrytext {
    display: flex;
    flex-direction: column;
    padding: 0 1em;
    gap: 0.5em;
}

#cover {
    width: 100%;
}


#timeentries {
    display: flex;
    flex-direction: row;
    background: #1E1F29;
    width: 100%;
}

.timeentry {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1em;
}

#timenow {
    background-color: #4C4E9C;
}

.timeentrytext {
    display: flex;
    flex-direction: column;
    padding: 0 1em;
    gap: 0.5em;
}

.timeentrytext .time {
    font-size: 40px;
}

.timeentrytext .date {
    font-size: 27.5px;
}

#title {
    font-size: 50px;
}

#time {
    font-size: 30px;
}
}