@font-face {
  font-family: 'BROmny';
  src: url('https://educ.rec.br/educarecife/assets/fonts/BROmny-Regular.ttf');
}

/*ESTILO TABELAS*/
 .table {
  overflow: auto;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  padding: 15px;
  margin: 15px 200px auto 200px;
}
.th {
  background-color: #2f70b7;
  color: white;
  padding: 20px 15px;
  text-align: center;
}
.td {
  text-align: center;
  color: #6D7882;
  padding: 20px 15px;
  
}
.tr{
    padding: 8px;
    background-color: white;
}
.tr:nth-child(even) {
  background-color: #f2f2f2;
}

/*ESTILO BOTÕES*/
.filter_divs{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.warm_div{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.select_warn{
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column; 
}
.filter_buttons{
  color: white;
  margin: 5px;
  white-space: nowrap;
  font-family: 'BROmny';
  font-size: 20px;
  border-radius: 5px;
}
.filter_buttons:focus{
  background-color: #f27030;
}
.filter_buttons:hover{
  background-color: #f27030;
}
.grade_div{
  display: none;
}
.grade_image{
  padding-left: 20%;
  padding-right: 20%;
  margin-top: 10px;
}
/*CONTROLE RESPONSIVIDADE*/
@media screen and (max-width: 320px)  { 
  .table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      padding: 1px;
      margin: 0 0 0 0;
  }
  .th {
      background-color: #2f70b7;
      color: white;
      padding: 1px;
      text-align: center;
  }
  .td {
      text-align: center;
      padding: 1px;
  }
  .tr{
      padding: 1px;
      background-color: white;
  }
  .filter_divs{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  .filter_buttons{
      color: white;
      margin: 5px;
      white-space: normal;
      font-family: 'BROmny';
      font-size: 20px;
      width: 250px;
      border-radius: 5px;
  }
  .select_warn{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; 
  }
  .grade_image{
  padding-left: 0;
  padding-right: 0%;
  margin-top: 10px;
  width: 100%;
  height: 100%;
  }
}

@media screen and (max-width: 481px)  {
  .table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      padding: 1px;
      margin: 0 0 0 0;
  }
  .th {
      background-color: #2f70b7;
      color: white;
      padding: 1px;
      text-align: center;
  }
  .td {
      text-align: center;
      padding: 1px;
  }
  .tr{
      padding: 1px;
      background-color: white;
  }
  .filter_divs{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  .filter_buttons{
      color: white;
      margin: 5px;
      white-space: normal;
      font-family: 'BROmny';
      font-size: 20px;
      width: 250px;
      border-radius: 5px;
  }
  .select_warn{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; 
  }
  .grade_image{
  padding-left: 0;
  padding-right: 0%;
  margin-top: 10px;
  width: 100%;
  height: 100%;
  }
}

@media screen and (max-width: 641px) {
  .table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      padding: 1px;
      margin: 0 0 0 0;
  }
  .th {
      background-color: #2f70b7;
      color: white;
      padding: 1px;
      text-align: center;
  }
  .td {
      text-align: center;
      padding: 1px;
  }
  .tr{
      padding: 1px;
      background-color: white;
  }
  .filter_divs{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  .filter_buttons{
      color: white;
      margin: 5px;
      white-space: normal;
      font-family: 'BROmny';
      font-size: 20px;
      width: 250px;
      border-radius: 5px;
  }
  .select_warn{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; 
  }
  .grade_image{
  padding-left: 0;
  padding-right: 0%;
  margin-top: 10px;
  width: 100%;
  height: 100%;
  }
}

@media screen and (max-width: 823px)  { 
  .table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      padding: 1px;
      margin: 0 0 0 0;
  }
  .th {
      background-color: #2f70b7;
      color: white;
      padding: 1px;
      text-align: center;
  }
  .td {
      text-align: center;
      padding: 1px;
  }
  .tr{
      padding: 1px;
      background-color: white;
  }
  .filter_divs{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      }
  .filter_buttons{
      color: white;
      margin: 5px;
      white-space: normal;
      font-family: "Lucida Console", "Courier New", monospace;
      font-size: 20px;
      width: 250px;
      border-radius: 5px;
   }
  .select_warn{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; 
  }
  .grade_image{
  padding-left: 0;
  padding-right: 0%;
  margin-top: 10px;
  width: 100%;
  height: 100%;
  }
}