/*
* Master Table for Elementor Style
*/
/* Start of Master Table for Elementor */

  .mtel-table th {
    background: #4b00e7;
    color: #fff;
    font-weight: bold;
  }
  .mtel-table td, .mtel-table th {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: left;
    font-size: 18px;
  }  
  /* 
  Max width before this PARTICULAR table gets nasty
  This query will take effect for any screen smaller than 760px
  and also iPads specifically.
  */
  @media only screen and (max-device-width: 768px) {
    .mtel-table {
      width: 100%;
    }  
    /* Force table to not be like tables anymore */
    .mtel-table, .mtel-table thead, .mtel-table tbody, .mtel-table th, .mtel-table td, .mtel-table tr {
      display: block;
    }
  
    /* Hide table headers (but not display: none;, for accessibility) */
    .mtel-table thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
  
    .mtel-table tr {
      border: 1px solid #ccc;
    }
  
    .mtel-table td {
      /* Behave  like a "row" */
      border: none;
      border-bottom: 1px solid #eee;
      position: relative;
      padding-left: 50%;
    }
  
    .mtel-table td:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 6px;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
      /* Label the data */
      content: attr(data-column);
      color: #000;
      font-weight: bold;
    }
}
/* End of Master Table for Elementor */