/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm3K8-C8QSw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
    /* Estilo para as classificações indicativas */
    .rating-square {
      display: inline-block;
      width: 24px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      border: 1px solid #000;
      color: #fff;
      font-size: 14px;
      font-weight: normal;
      font-family: "Anton", sans-serif;
      margin-right: 5px;
    }

    .rating-l { background-color: green; }
    .rating-a10 { background-color: #00ced1; } /* Azul Celeste */
    .rating-a12 { background-color: #ffd700; } /* Amarelo Ouro */
    .rating-a14 { background-color: orange; }
    .rating-a16 { background-color: red; }
    .rating-a18 { background-color: black; }
  /* Tamanho da fonte para o nome do canal/IDs */
  .program-info-container strong {
	display: none;
  }

  /* Tamanho da fonte para o nome do programa */
  .program-name {
    font-size: 18px;
    font-weight: bold;
  }

  /* Tamanho da fonte para as informações de início, fim e duração dos programas */
  .program-info-container span {
   font-size: 16px;
  }

  /* Estilo para a imagem do programa */
  .program-image {
     width:150%;
     max-width: 110px; /* Limitar a largura máxima da imagem */
     height: 75px; /* Ajustar a altura automaticamente de acordo com a largura */
     object-fit: cover;
     margin-right: 10px;
     float: left;
     border-radius: 10px; /* Adicionando bordas arredondadas */
     margin-bottom: 2px; /* Adicionando uma margem inferior */
 }

  /* Estilo para as informações do programa */
  .program-info {
     display: block;
     vertical-align: top;
     margin-top: 10px; /* Adicionar uma margem superior */
     flex: 1;
     margin: 0 10px; /* Adicionar margem aos lados para separar os elementos */
    }
   .program-info-container {
     display: flex;
     align-items: center;
     margin-bottom: 4px;
   }
/* Estilo para a lista */
   #epgList {
     list-style: none;
     padding: 0;
	 margin: 0; /* Remover a margem padrão da lista */
  }
    body {
      font-family: Arial, sans-serif;
    }
 #epgList li {
     display: flex;
     justify-content: space-between;
	 flex-direction: column;
	 align-items: stretch;
     margin-bottom: 10px; /* Adicionar espaço de 5 pixels entre os itens */
     border-radius: 15px; /* Cantos arredondados */
     padding: 10px; /* Espaçamento interno para afastar o conteúdo das bordas */
  }

  /* Estilo para o contêiner da barra de duração e tempo restante */
  .duration-info {
     display: block;
     margin-top: 2px;
  }

  /* Estilo para a barra de duração */
  .duration-bar {
     display: block;
     height: 6px;
     background-color: #ccc;
     margin-top: 2px;
  }

  .duration-progress {
     height: 100%;
     background-color: #00ced1; /* Azul Celeste */
  }

  /* Estilo para o tempo restante */
  .time-remaining {
     font-size: 14px;
     display: flex;
  }

    .rating-info {
      display: flex;
      align-items: center;
    }
	/* Estilo para a lista em telas pequenas */
@media screen and (max-width: 580px) {
  #epgList li {
    flex-direction: column; /* Alterar para direção de linha em telas pequenas */
    align-items: stretch; /* Centralizar os elementos horizontalmente */
  }

  .program-info {
    flex: 1;
    margin: 0 10px; /* Adicionar margem aos lados para separar os elementos */
  }

  .duration-info {
    margin-top: 10px; /* Aumentar a margem superior para separar os itens */
  }

  .program-image {
    /* Reduzir a largura máxima da imagem em telas pequenas */
    margin-right: 10px;
    margin-bottom: 0; /* Remover a margem inferior da imagem */
  }

  .time-remaining {
    margin-left: auto; /* Alinhar o tempo restante à direita */
  }

  .program-info-container strong {
    font-size: 10px; /* Reduzir o tamanho da fonte para o nome do canal/IDs */
  }

  .program-name {
    font-size: 14px; /* Reduzir o tamanho da fonte para o nome do programa */
  }

  .program-info-container span {
    font-size: 14px; /* Reduzir o tamanho da fonte para as informações de início, fim e duração dos programas */
  }
  }