body {
	font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial;
	background: #185486;
  font-size: 10pt;
}

html,
body {
  height: 100%;
  margin-bottom: 0px;
  margin-top: 0px;
}

.channelframe {
  width: 501px;
  height: 298px;
  background: #191919;
  border-radius: 12px;
  top: 40px;
  position: absolute;
  left: 94px;
  /*! box-shadow: inset 7px 7px 8px 0px rgba(255,255,255,0.75), inset -7px -7px 8px 0px rgba(0,0,0,0.75); */
}

#IPTVd {
  width: 460px;
  height: 259px;
  margin-left: 17px;
  margin-right: 21px;
}

.channel {
  width: 460px;
  height: 259px;
  background: black;
  margin-left: 17px;
  margin-right: 21px;
  top: 16.5px;
  position: absolute;
}

.framelogo {
	position: absolute;
	/*! top: 254px; */
	/*! left: 216px; */
	display: none;
}

.channelinfoframe {
  position: absolute;
  right: 74px;
  top: 41px;
  height: 298px;
  width: 489px;
  background: #b1b2b5;
  border-radius: 12px;
  box-shadow: inset 7px 7px 8px 0px rgba(255,255,255,0.75), inset -7px -7px 8px 0px rgba(0,0,0,0.75);
}

.channelinfo {
  position: inherit;
  right: 15px;
  top: 28px;
  width: 458px;
  background: #b1b2b5;
  border-radius: 12px;
  box-shadow: inset 7px 7px 8px 0px rgba(255,255,255,0.75), inset -7px -7px 8px 0px rgba(0,0,0,0.75);
}

.channelinfotext {
  margin-right: 25px;
  text-align: right;
}

#osd .channelinfotext {
	text-align: left;
	font-size: 18pt;
	position: absolute;
	top: -4px;
	left: 54px;
	margin-right: 0px;
	text-align: left;
}

#timeinfo {
  margin-right: 20px;
  text-align: right;
  margin: 25px;
}

.channelinfo.name {
  margin-top: 54px;
  height: 105px;
}


.channelinfo.time {
  margin-top: 171px;
}

.EPG {
  position: absolute;
  left: 94px;
  bottom: 28px;
  height: 335px;
  width: -webkit-calc(100% - 16px);
  width: -moz-calc(100% - 16px);
  width: calc(100% - 168px);
  background: #b1b2b5;
  border-radius: 12px;
  box-shadow: inset 7px 7px 8px 0px rgba(255,255,255,0.75), inset -7px -7px 8px 0px rgba(0,0,0,0.75);
}
.channelEPG {
  width: 314px;
  height: 46px;
  background: #2a4b8e;
  margin: 6px;
  border-radius: 12px;
  border: 0px;
  display: block;
  margin-left: 16px;
}

.channelEPGA {
    margin: 8px;
    left: 351px;
    margin-top: -54px;
    position: relative;
    width: 314px;
    height: 46px;
    background: #2a4b8e;
    border-radius: 12px;
    border: 0px;
    display: block;
}
.channelEPGA.active {
    background: #ffc75c;
}

.contentEPG {
  width: 310px;
  height: 46px;
  background: #2f52bf;
  margin: 27px;
  position: inherit;
  left: 333px;
  margin-top: -53px;
  border-radius: 10px;
  border: 0px;
  position: absolute;
}


.EPGtext {
  text-align: center;
  width: 324px;
  color: white;
  margin: -13px;
  font-size: 14pt;
}

.contentEPGtext {
  text-align: center;
  position: absolute;
  width: calc(100% - 25px);
  color: white;
  margin: 12.5px;
  font-size: 14pt;
}

.channelEPG.active, .contentEPG.active {
	background: #ffc75c;
}

.EPGtext.active, .contentEPGtext.active {
	color: black;
}

.incompatibleimage {
	bottom: 0px;
	position: absolute;
}

.error {
  position: absolute;
  left: 8px;
  top: 8px;
  width: -webkit-calc(100% - 16px);
  width: -moz-calc(100% - 16px);
  width: calc(100% - 16px);
  background: #b1b2b5;
  border-radius: 20px;
  box-shadow: inset 7px 7px 8px 0px rgba(255,255,255,0.75), inset -7px -7px 8px 0px rgba(0,0,0,0.75);
}

#incompatible {
  margin: 20px;	
}

.EPGcontent {
  height: 265px;
  margin-top: 61px;
}

.channelEPG.\32 {
  left: 344px;
  margin-top: -52px;
  position: relative;
  border-radius: 0px;
}

.EPGcontent {
  overflow: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.EPGcontent::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

@media (max-width: 867px) {
	.channelEPG.\32 {
	    display: none;
	}
	.channelEPG {
	    width: calc(100% - 32px);
	}
	.EPGtext {
	    width: calc(100% + 26px);
	}
	.channelframe{
		width: calc(100% - 76px);
		height: calc(100% - 409px);
	}
	.channel, #IPTVd{
		width: calc(100% - 34px);
		height: calc(100% - 25px);
	}
	.EPG {
	    left: 38px;
	    width: calc(100% - 76px);
	}
	.channelframe {
	    left: 38px;
	}
}

@media (max-width: 1130px) {
  .channelinfoframe {
	  display: none;
  }
}

@media (max-width: 687px) {
	.channelframe{
		width: calc(100% - 76px);
		height: revert;
		aspect-ratio: 16 / 9;
	}
	.channel, #IPTVd{
		width: calc(100% - 38px);
		height: revert;
		aspect-ratio: 16 / 9;
		margin-top: -6px;
	}
}


.theme1 .channelinfoframe {
  display: block !important;
}

.theme1 .channelframe {
    width: 242px;
    height: 185px;
    background: #191919;
    border-radius: 12px;
    top: 39px;
    position: absolute;
    left: 60px;
}

.theme1 .channelinfoframe {
    position: absolute;
    right: 52px;
    top: 39px;
    height: 185px;
    width: 281px;
    background: #b1b2b5;
    border-radius: 7px;
    box-shadow: inset 3px 3px 3px 0px rgba(255,255,255,0.75), inset -3px -3px 3px 0px rgba(0,0,0,0.75);
}

.theme1 #timeinfo {
	text-align: left;
	padding-left: 47px;
	padding-top: 6px;
}

.theme1 h1 {
    font-size: 14pt;
}

.theme1 .channelinfo {
    position: inherit;
    right: 8px;
    top: -1px;
    width: 268px;
    background: #b1b2b5;
    border-radius: 7px;
    box-shadow: inset 3px 3px 3px 0px rgba(255,255,255,0.75), inset -3px -3px 3px 0px rgba(0,0,0,0.75);
}

.theme1 .channelinfo.time {
    margin-top: 127px;
}
.theme1 .channelinfo.name {
    margin-top: 54px;
    height: 63px;
}

.theme1 .channel {
    width: 213px;
    height: 163px;
    background: black;
    margin-left: 17px;
    margin-right: 12px;
    top: 16.5px;
    position: absolute;
}

.theme1 .EPG {
    position: absolute;
    left: 58px;
    bottom: 32px;
    height: 209px;
    width: -webkit-calc(100% - 16px);
    width: -moz-calc(100% - 16px);
    width: calc(100% - 109px);
    background: #b1b2b5;
    border-radius: 12px;
    box-shadow: inset 3px 3px 3px 0px rgba(255,255,255,0.75), inset -3px -3px 3px 0px rgba(0,0,0,0.75);
}

.theme1 .channelEPG.\32 {
    left: 196px;
    margin-top: -37px;
    position: relative;
    border-radius: 0px;
}

.theme1 .channelEPG {
    width: 182px;
    height: 30px;
    background: #2a4b8e;
    margin: 6px;
    border-radius: 6px;
    border: 0px;
    display: block;
    margin-left: 8px;
    margin-top: 2px;
}

.theme1 .EPGcontent {
    height: 200px;
    padding-top: 9px;
}

.theme1 .contentEPGtext {
    text-align: center;
    position: absolute;
    width: 172px;
    color: white;
    margin: 5px;
    font-size: 10pt;
  padding-top: 3px;
}

.theme1 .EPGtext {
  padding-top: 5px;
  font-size: 10pt;
}

#osd {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
	z-index: 99999999999999999999;
	text-transform: uppercase;
}

.hidden {
    display: none;
}

.rectangle1 {
	background-color: rgba(29, 59, 120, 0.7599999904632568);
	height: 57px;
	width: 319px;
	border-radius: 0px 0px 40px 0px;
	width: 864px;
	height: 146px;
	border: 1px solid #000000;
}

.rectangle2 {
	background: linear-gradient(180deg, rgb(226, 226, 226) 0%, rgb(226, 226, 226) 35%, rgb(140, 140, 140) 65%, rgb(82, 82, 82) 100%);
	width: 459px;
	height: 52px;
	left: 0px;
	position: absolute;
	top: -28px;
	border: 1px solid #000000;
	border-radius: 0px 10000000000000000px 10000000000000000px 0px;
}

#ellipse1 {
	width: 90px;
	height: 90px;
	top: -47px;
	position: absolute;
	left: -46px;
	background: radial-gradient(farthest-corner at 29px 29px, rgba(238,238,238,1) 0%, rgba(95,95,95,1) 80%);
	border: 1px solid #000000;
	border-radius: 10000000000000000px 10000000000000000px 10000000000000000px 10000000000000000px;
}

.focused .EPGtext {
	color: black;
}

.focused {
	background: #ffc75c;
}

.channelEPG.\32 .\33 {
  left: 665px;
}
.channelEPG.\32 .\34 {
  left: 984px;
  width: 114px;
}


.channelEPG.\32 .\34 .\35 {
  width: 314px;
  left: 344px;
  display: flex;
  top: 61px;
}
.channelEPG.\32 .\33 .\34 {
  width: 314px;
  left: 665px;
  display: flex;
  top: 61px;
}
.channelEPG.\32 .\34 .\37{
  top: 61px;
}


#epgd {
  position: inherit;
  text-align: center;
  color: black;
  font-size: 14pt;
  width: 314px;
  margin: 6px;
  border-radius: 12px;
  border: 0px;
  display: block;
  margin-left: 16px;
  margin-top: 23px;
}


.tvicon {
  width: 66px;
  padding-left: 13px;
  padding-top: 23px;
}


.infoicon {
  height: 53px;
  padding: 7px;
  position: absolute;
}

.infoicon.infoinfoicon {
  padding: 26px;
  padding-left: 7px;
  padding-right: 7px;
}
.infoicon.tvinfoicon {
  height: initial;
  width: 53px;
  padding: 22px;
}