:root {
    --bar-color: #6699ff;
    --trasaction-bar-color: #777;
}

.mobile-wrapper {
    width: 100%;
    max-width: 500px;
    margin: auto;
}

body {
  font-family: Gabarito, Roboto, sans-serif!important;
  font-weight: 400;
  font-style: normal;
  background-color: azure;
  margin: 0;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

button {
    font-family: Gabarito, Roboto, sans-serif!important;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.dashbord-info-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 48% 48%;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: auto;
  margin-top: 20px;
}

.info-cart {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: #fff;
}

.header-bar {
    background-color: #50B8BD;
    width: 100%;
    max-width: 500px;
    position: fixed;
    top: 0;
    z-index: 99; 
    padding: 10px;
    box-sizing: border-box;
}

.info-cart .heading {
  padding: 5px;
  margin: 0;
  background-color: var(--bar-color);
  font-size: 18px;
  color: #fff;
  text-align: center;
}

.info-cart .content {
  padding: 10px;
  margin: 0;
  text-align: center;
  font-weight: bold;
  font-size: 22px;
}

.custom-table {
  background-color: var(--bar-color);
  width: 100%;
  max-width: 500px; 
  margin: auto; 
  margin-top: 10px
}

.custom-table .heading th {
  padding: 5px;
}

.custom-table .row .cell {
  background-color: #fff;
  padding: 5px;
}

.transactions-list {
   background-color: #fff;
   border: 1px solid var(--trasaction-bar-color);
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
}

.transaction-card {
  margin: auto;
  padding: 5px;
  border-bottom: 1px solid var(--trasaction-bar-color);
}

.transaction-card a {
    text-decoration: none;
}

.transaction-card:last-child { 
    border-bottom: none; 
}

.transaction-card .row-1 {
  font-size: 18px ;
  font-weight: bold;
}
.transaction-card .row {
  display: flex;
  justify-content: space-between;
  /*background-color: #fff;*/
  padding: 5px;
}

.transaction-card.closed {
   color: #888;
}

.hidden {
    display: none;
}

/*.ui-accordion .ui-accordion-content {
    padding: 0;
    height: auto!important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background-color: var(--bar-color);
    border: none;
}*/

.collapsible {
  background-color: var(--trasaction-bar-color);
  color: white;
  padding: 10px;
  cursor: pointer;
  margin-bottom: 0px;
  font-size: 16px;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.collapsible-content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /*background-color: #f1f1f1;*/
}

.ui-datepicker td {
    font-size: 16px;
}

.ui-datepicker td span, .ui-datepicker td a {
    padding: 5px;
}

.ui-state-default {
    cursor: pointer;
}

.form-input {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.form-lable {
    margin-bottom: 10px;
}

.index-button {
    margin: auto;
    font-size: 22px;
    font-weight: bold;
    padding: 20px;
    margin: auto;
}

.loader {
    text-align: center;
    margin: 150px 0;
}

.view-details {
    color: #0000ff;
    cursor: pointer;
}

.ui-dialog {
    padding: 0;
}

.ui-dialog-titlebar {
    background-color: var(--trasaction-bar-color);
    color: #fff;
}

.payment-status-paid {
    background-color: green;
    padding: 5px;
    color: #fff;
    border-radius: 10px;
}


.payment-status-pending {
    background-color: yellow;
    padding: 5px;
    color: #000;
    border-radius: 10px;
    border: 1px solid #555;
}

.ui-widget-header, .ui-widget-content {
    border: none;
}

.ui-dialog .ui-dialog-buttonpane {
    border: 1px solid #ddd;
}


table.main-borrowing-list td.cell.center {
    text-align: center;
}

table.main-borrowing-list td.cell.right {
    text-align: right;
}

table.main-borrowing-list.closed td.cell.right,
table.main-borrowing-list.closed td.cell.center{
    background-color: lightgreen;
}