/*
 Theme Name:     Divi Child Theme
 Theme URI:      https://dmg-network.com
 Description:    Divi Child Theme
 Author:         Bob
 Author URI:     https://dmg-network.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* ----------- Place your custom CSS below this line ------------------ */ 
/* Basic table styling */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

/* Style the header */
.responsive-table thead th {
  background-color: #ffcc00 !important;
  color: white;
  padding: 10px;
  text-align: center;
}

/* Style the table rows */
.responsive-table tbody tr {
  background-color: #f3f3c4 !important; /* light yellow */
}

.responsive-table tbody td {
  padding: 8px;
  border: 1px solid #ddd;
}

/* Make the table responsive on smaller screens */
.table-container {
  overflow-x: auto;
}

/* When the screen is smaller than 600px, the table will change layout */
@media screen and (max-width: 600px) {
  .responsive-table thead {
    display: none; /* Hide the main header */
  }

  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td {
    display: block; /* Make all table elements behave like block-level elements */
    width: 100%;
  }

  .responsive-table tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
  }

  .responsive-table td {
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding-left: 50%;
    text-align: right;
  }

  .responsive-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    color: orange; /* Label color */
  }
  
  /* Add data-label attributes to the HTML for mobile view */
  .responsive-table td:nth-of-type(1):before { content: "Column 1"; }
  .responsive-table td:nth-of-type(2):before { content: "Column 2"; }
}