/* ---------------- start css all info which request api -------------------- */
.table-ports-container .table-head  table{
  max-height: 50vh; 
  overflow-y: auto; 
  overflow: scroll;
  text-align: center; 
  border: 2px solid black;
}
.table-ports-container .table-head{
  max-height: 70vh; 
  overflow-y: auto; 
  overflow: scroll;
}
.section-Point-Sale .table-ports-container .table tr:nth-child(even){
  background-color: #c5c7c9;
}
.services .payment-method .table-ports-container .table tr:nth-child(even){
  background-color: #c5c7c9;
}
.services .section-container-sevices .available-gates .table-ports-container .table tr:nth-child(even){
  background-color: #c5c7c9;
}
.tbody-api-font{
  text-align: center;
  font-weight: normal;
  }
 .tr-point-sale{
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-column: 5px;

}
.td-point-sale{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tr-payment{
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-column: 5px;
}
.td-paymeny{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.td-followOrder{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tr-availableGates{
  display: grid;
  grid-template-columns: 0.7fr 1fr 1fr;
  grid-column: 5px;
}
.td-availableGates{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#legend{
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
}
#legend img{
  width: 20px;
}

.tr-header td{
  text-align: center;
}
.tr-header td p{
  padding-top: 5px;
}
 .tr-header input{
width: 100%;
text-align: center;
padding: 10px 0;
border: 1px solid black;
border-radius: 5px;
font-size: 18px;
font-weight: normal;
}

.table-ports-container input:focus::-webkit-input-placeholder{
  opacity: 0;
  transition: 0.5s;
}
.table-ports-container input:focus::-ms-input-placeholder{
  opacity: 0;
  transition: 0.5s;
}

.table-ports-container input:focus::placeholder{
  opacity: 0;
  transition: 0.5s;
}
.tr-header button{
  width: 100%;
  margin-right: 5px;
  text-align: center;
  font-size: 18px;
  background-color:#4caf50 ;
padding: 10px 30px;
opacity: 0.7;
border-radius: 5px;
border:1px solid black;
font-weight: bold;
  }
  
.tr-header select{
width: 100%;
text-align: center;
padding: 14px 0;
border: 1px solid black;
  }
.thead-font tr{
  color: #4caf50;
  font-size: 18px;
  font-weight: bold; 
  background-color:#073b66 ;
}


  .tr-header span{
margin: 0 5px;
  }
.tr-table-header tr{
  font-size: 14px;
}
.thead-font tr td{
font-size: 16px;
}
.tbody-api-font tr td{
  font-size: 14px;
}
.table-ports-container button:hover{
  
    opacity: 1;
    }
.table-ports-container .tbody_class tr:hover{
  cursor: pointer;
  background-color: rgb(247, 239, 239);
}
.table-ports-container .tbody-api-font tr:hover{
    cursor: pointer;
    background-color: rgb(247, 239, 239);
}
/* ---------------- end css all info which request api -------------------- */


/* ---------------- start css media query all info which request api -------------------- */

@media(max-width:992px){
.tr-header{
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 5px;
  width: 100%;
}
.tr-header td{
  text-align: center;
}
 .tr-header input{
margin-bottom: 5px;
font-size: 14px;
}

.tr-header button{
margin-bottom: 5px;
font-size: 14px;
  }

.tr-header select{
margin-bottom: 5px;
 }
.tr-table-header tr{
  font-size: 12px;
}
.thead-font tr td{
font-size: 14px;
}
.tbody-api-font tr td{
  font-size: 12px;

}

  }
  
/* ---------------- end css media query all info which request api -------------------- */