@media only screen and (max-width: 500px) 
{
  :root {
    --fixed-header-height: 60px;
    --fixed-footer-height: 40px;

    --round-button-size: 20px;
}

  /*/* start CSS_header font setting_settings */
  h1, 
  .h1, 
  .h1-title {
    font-size: 15px;
    font-weight: bold;
  }

  .responsive-table td {
    font-size: 12px;
  }

  .round-button {
    margin: 0px;
    padding: 0px;
    width: var(--round-button-size);
    height: var(--round-button-size);
    border: none;
    border-radius: 50%;
    background-color: #007bff;
    color: #fff;
    font-size: calc(var(--round-button-size) / 1.5); /* Adjust the font-size dynamically */
    font-weight: bolder;
    cursor: pointer;
  }
  
  /*/* end CSS_header font setting_settings */

  /*/* start CSS_table_settings */
  /* Add gap after every row in responsive mode */


  .responsive-table {
      border-collapse: separate;
      /* border-spacing: 0 10px; Add space between rows */
      width: 100%;
  }


  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td {
    display: block;
  }

  .responsive-table tbody {
    overflow-y: auto;
    max-height: calc(100vh - var(--fixed-header-height) - var(--fixed-footer-height));

  }

  .responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .responsive-table td {

    width: 97%;
    float: left;
    text-align: left;
    margin: 0;
    padding: 0 3px 0 0;
    border-spacing: 0;
  }

  .responsive-table td:before {
    float: left;
    content: attr(data-attr);
    display: inline;
    text-align: right;
    font-weight: bold;
    width: 40%;
    padding: 0 5px 0 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }

  /* Add gap after every row */
  .responsive-table tr {
    margin-bottom: 20px !important;
    border-spacing: 0 10px;
    border: 2px solid red;

  }

  /* Hover effect on responsive table rows */
  .responsive-table tr:hover {
    background-color: var(--inverse) ;
    color: var(--tertiary) ;
  }

  /* Active effect on responsive table rows */
  .responsive-table tr.active {
    background-color: var(--tertiary) ;
    color: var(--inverse);
  }

  /* Highlight effect on responsive table cells */
  .responsive-table tr.highlighted td {
    background-color: var(--semi-primary) ;
    color: var(--inverse);
  }

  /*/* end CSS_table_settings */

    /*/* start CSS_left_menu_toggle_settings */
    .right-menu{
      display: none;
    }

    .left-menu{
      display: none;
      background-color: var(--semi-primary);
      width: var(--fixed-left-menu);
      position: absolute;
      overflow: auto;
      height: calc(100vh - var(--fixed-header-height) - var(--fixed-footer-height) - 10px);
      z-index: 2;
    }

    .data-content{
      max-width: 100%;
    }
    /*/* end CSS_left_menu_toggle_settings */


    /*/* start CSS_hamburger_settings */
      /* Styling for the toggle switch */
      .hamburger input[type="checkbox"] {
        display: none;
      }

      /* Styling for the cross symbol container */
      .hamburger .cross {
          display: block;
          width: 20px;
          height: 20px;
          position: relative;
          cursor: pointer;
          transition: transform 0.3s ease-in-out;
      }

      /* The horizontal lines of the cross */
      .hamburger .cross::before,
      .hamburger .cross::after {
          content: '';
          position: absolute;
          height: 5px;
          width: 100%;
          background-color: var(--inverse);
          top: calc(50% - 6px);
          transition: transform 0.3s ease-in-out;
      }

      /* First horizontal line */
      .hamburger .cross::before {
          transform: translateY(0);
      }

      /* Second horizontal line */
      .hamburger .cross::after {
          transform: translateY(12px);
      }

      /* Animation for the cross effect */
      .hamburger input[type="checkbox"]:checked~.cross {
          transform: rotate(90deg);
      }

      .hamburger input[type="checkbox"]:checked~.cross::before {
          transform: translateY(6px) rotate(-45deg);
      }

      .hamburger input[type="checkbox"]:checked~.cross::after {
          transform: translateY(6px) rotate(45deg);
      }


    /*/* end CSS_hamburger_settings */

    /*/* start CSS_header strip wedget_settings */

    .header-strip {
      display: flex;
      flex-direction: column; /* Stack elements on top of each other */
      align-items: center;
      justify-content: center;
      padding: 10px;
    }
    /*/* end CSS_header strip wedget_settings */

    /*/* start CSS_column_settings */
    [class*="col-"] {
        width: 98%;
    }
    /*/* end CSS_column_settings */

}