.container {
  padding-top: 10px;
}

.form-container,
.table-container 
{
  max-width: 700px;
  margin: 0 auto;
}

.form-container
{
    border:thin solid #aaaaaa;
    padding: 2%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    background: #f7f7f7;
}

.logout
{
    margin-bottom:30px;
}

/* link buttons */
.green-button,
.red-button,
.blue-button
{
  padding: 7px 10px;
  font-size: 0.875rem;
  line-height: normal;
  border-radius: 0.2rem;
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
  margin-right: 10px;
  position: relative;
  top: 1px;  
  text-decoration: none;
  cursor:pointer;
}

.green-button
{
    background-color: #28a745;
}

.red-button
{
    background-color: #dc3545;
}

.blue-button
{
    background-color: #3545dc;
}

.green-button:hover,
.red-button:hover,
.blue-button:hover
{
    text-decoration: none;
    color:#fff;
}

.green-button:hover
{
    background-color: #107020; 
}

.red-button:hover
{
  background-color: #a01020; 
}

.blue-button:hover
{
  background-color: #1020a0; 
}
/* end of link buttons */




input [type="button"] 
{
color:pink;
}






/* table of cars */
.table-container table
{
    width:100%;
    border-collapse:collapse;
}

.table-container thead
{
    background-color: #aaa;
    color:#fff;
    text-align: left;
    text-transform: capitalize;
}

.table-container tbody tr
{
    height:3em;
}

.table-container thead th,
.table-container tbody td
{
    padding:5px;
}
.table-container tbody tr:nth-child(odd) 
{
    background-color: #eee;
}

.table-container tbody tr:nth-child(even) 
{
    background-color: #ffa;
}

.add-new-car
{
    margin-top:1em;
}
/*end of table of cars */


/* Forms */    /* Based on react-bootstrap */
form label
{
    font-weight:700;  
    color:#444;
}

form input{
  display: block;
  width: 96%;
  padding: .375rem .75rem;
  margin-bottom: 1.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  transition:
    border-color .15s ease-in-out,
    box-shadow .15s ease-in-out;
}

form input:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

form input::placeholder {
  color: #6c757d;
  opacity: 1;
}

form input:disabled,
form input[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}
/* End of Forms */
/* logged in user's profile photo */
#profilePhoto
{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: thin solid #aaa;
    float:right;
    background-size:contain;
}
/* end of logged in user's profile photo */


.carPhotos
{
    overflow-x: auto;
    white-space: nowrap;
    min-width:18em;
    max-width:18em;
}

.carPhotos img
{
    width:5em;
    height:5em;
    padding:0em;
    margin:0em;
    margin-right:0.5em;
    border:thin solid #ccc;
}


.payPalMessage
{
    width:650px;    
    margin-top:20px;
    margin-left: auto;
    margin-right: auto;
    border:thin solid #666666;
    border-radius: 50px;
    padding:50px;    
}

#payPalPaymentIDButton
{
    margin-top:50px;
}

#payPalPaymentID
{
    font-weight: bold;
}