body{
  padding:0; 
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:#efefef;
}
main{
    margin:10px auto;
}
.content{
    padding:10px;
}
header{
    background:#107ea7;
}
header h1{
    text-align:center;
    padding:5px 0;
    color:#fff;
    margin:0;
}
.box{
    border: 1px solid #ccc;
    text-align: center;
    margin: 10px 5px;
    background: rgba(204, 204, 204, 0.51);
    color: #000;
    box-shadow: 1px 1px 2px rgb(175, 175, 175);
    border-radius: 5px;
}
a{
    text-decoration: none;
}
a:visited,a:link, a:visited,a:hover,a:active{
    color:#000;
}
.menu{
    padding:10px 0;
    background:#0d688a;
}
.menu a {
    color: #fff;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
}
.content{

    position:relative;
}
.content table{
    margin:0 auto;
}
#search-box{
    padding-top:10px;
    padding-bottom:10px;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.label-form{
    width:100px;
    display: block;
}
#updateTransaction #datepicker{
    width:120px
}
#updateTransaction #time{
    width:100px
}
.row-list{padding:5px;margin-top:7px;border-radius:5px;
    background: #fff;
    box-shadow: 1px 1px 2px rgb(175, 175, 175);
}
.row-list span{display:block;font-weight:400;}
.row-list .title{
    font-size: 20px;
font-weight: bold;}
.row-list .subtitle{font-size: 12px;}
.row-list span.btn {display: inline-block;
padding: 5px 10px;
background: #ccc;
color: #fff;
border-radius: 5px;
}
.row-list .delete-btn{
 float:right;
 display: inline-block;
padding: 5px 10px;
background: #ccc;
color: #fff;
border-radius: 5px;
}
.row-list a,.row-list a:visited{
    color:#111;
    text-decoration:none;
    font-weight:800;
}
.row-list a{
    width: 100%;
position: relative;
display: block;
padding: 5px;

}
.row-list a:hover{
    color:#1e658c;
    
}
.top-info{
text-align: center;
padding: 10px;
margin-bottom: 20px;
background: rgba(144, 199, 223, 0.54);
font-size: 22px;
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
background: #fff;
}
#login-form input{
padding:5px;
}
#login-form{
    background-color: #ccc;
width: 300px;
padding:10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.btn{
    padding: 5px 20px;
border: 1px solid #1e658c;
text-decoration: none;
color: #1e658c;
}
.content form label{
    display:inline-block;
    width:100px;
}
#back-btn{
    float:left;
}
#del-btn{
    float:right;
    font-size:15px;
    background-color: unset;
    cursor: pointer;
    color:#000;
    color: #f00;
    border-color: #f00;
}
#paid{
    background:#fbf5dd;
}
#unpaidLoans{
    height:1000px !important;
}
.latestPayments{
background: #ffffff;
margin: 10px;
padding: 10px;
text-align: left;
color: #000;
list-style: none;
height:200px;
overflow:scroll;
}
.latestPayments li{
margin-bottom:5px;
}
#loan-table tr td{
  padding:5px;
}
#loan-table tr th{
  padding:5px;
  background: #ccc;
}