@import url('https://fonts.googleapis.com/css?family=Lato');

.body {
   padding: 0 15px;
   margin: 0 15px;
   font-family: lato, sans-serif, arial;
}
.ui-jqgrid-htable th,
.ui-jqgrid tr.jqgrow td{ 
    text-transform: capitalize; 
}
.ui-jqgrid-htable th div{
    font-weight: bold;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #3FC300;
}

.menu ul li {
    float: left;
}

.menu  ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.menu  ul li a:hover,
.menu .active {
    background-color: #ddd;
    color:black;
}
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
.ui-tabs-panel #subtitle{
  display:none;
}


  /* General Styles */
  .ui-jqgrid {
    font-family: Arial, sans-serif;
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
    overflow: hidden;
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  /* Table Header */
  .ui-jqgrid .ui-jqgrid-htable th {
    background-color: #f7f7f7;
    color: #333;
    text-align: left;
    font-weight: bold;
    padding: 10px;
    border: 1px solid #ddd;
  }

  /* Table Body */
  .ui-jqgrid .jqgbody td {
    padding: 12px 10px;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
  }

  /* Hover Effect */
  .ui-jqgrid .jqgbody tr:hover {
    background-color: #f9f9f9;
    cursor: pointer;
  }

  /* Pagination */
  .ui-jqgrid .ui-pager {
    font-size: 14px;
    text-align: right;
    padding: 10px;
    background-color: #f9f9f9;
    border-top: 1px solid #ddd;
  }

  /* Pagination Buttons */
  .ui-pager .ui-pager-nav, .ui-pager .ui-pager-control {
    background-color: #007bff;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }

  .ui-pager .ui-pager-nav:hover, .ui-pager .ui-pager-control:hover {
    background-color: #0056b3;
  }

  /* Row Selection */
  .ui-jqgrid .jqgfirstrow td {
    background-color: #f7f7f7;
    font-weight: bold;
  }

  /* Make grid more readable */
  .ui-jqgrid .jqgbody td {
    font-size: 13px;
  }

  /* Mobile Responsiveness */
  @media (max-width: 767px) {
    /* Stack columns vertically on small screens */
    .ui-jqgrid {
      font-size: 12px;
      width: 100% !important;
      display: block;
      overflow-x: auto;
    }

    .ui-jqgrid .ui-jqgrid-htable {
      display: none;
    }

    .ui-jqgrid .jqgbody {
      display: block;
      overflow: hidden;
    }

    /* Use a card-like display for each row */
    .ui-jqgrid .jqgbody tr {
      display: block;
      margin-bottom: 10px;
      background-color: #fff;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .ui-jqgrid .jqgbody td {
      display: block;
      width: 100%;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .ui-jqgrid .jqgbody td:nth-child(1):before {
      content: "Property: ";
      font-weight: bold;
    }

    .ui-jqgrid .jqgbody td:nth-child(2):before {
      content: "Bill Frequency: ";
      font-weight: bold;
    }

    .ui-jqgrid .jqgbody td:nth-child(3):before {
      content: "Item Name: ";
      font-weight: bold;
    }

    .ui-jqgrid .jqgbody td:nth-child(4):before {
      content: "Amount: ";
      font-weight: bold;
    }

    /* Hide specific columns on mobile if necessary */
    .ui-jqgrid .jqgbody td:nth-child(5),
    .ui-jqgrid .jqgbody td:nth-child(6) {
      display: none;
    }

    .ui-jqgrid .ui-pager {
      font-size: 12px;
      padding: 5px;
    }
  }

  /* Desktop Layout */
  @media (min-width: 768px) {
    .ui-jqgrid .jqgbody td {
      display: table-cell;
    }

    .ui-jqgrid .jqgbody tr {
      display: table-row;
    }

    /* Show columns normally */
    .ui-jqgrid .jqgbody td {
      display: table-cell;
      font-size: 14px;
      padding: 10px;
    }

    .ui-jqgrid .jqgbody td:nth-child(1):before,
    .ui-jqgrid .jqgbody td:nth-child(2):before,
    .ui-jqgrid .jqgbody td:nth-child(3):before,
    .ui-jqgrid .jqgbody td:nth-child(4):before {
      content: none;
    }
  }
#menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1590C2;
}

#menu ul li {
    float: left;
}

#menu  ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
#menu  ul li a:hover,
#menu .active {
    background-color: #ddd;
    color:black;
}
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
.ui-tabs-panel #subtitle{
  display:none;
}