/*CHANGE: ADDED BODY CODE TO GIVE IT A BACKGROUND.*/
.logo {
    display: flex;
    justify-content: center;
    background-color: white;
    border-radius: 450px;
    color: black;
    justify-content: center;
    position: relative;
    margin-top: 25px;
    height: 400px;
    border: 4px solid;
    align-items: center;
}

.btn-container {
    display: flex;
    justify-content: center;
    border-radius: 450px;
    color: black;
    justify-content: center;
    position: relative;
    align-items: center;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-image: url(../images/Suburbs.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
  margin-bottom: 0;
  border-radius: 0;
}

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}

/*CHANGE: ADDED MAINBODY PARAMETERS FOR BETTER FORMATTING OF THE SPACE CONTAINING THE TABLE*/
.mainbody {
  border-radius: 0px 0px 30px 30px;
  width:80%;
  padding-top:  15px;
  padding-bottom:  35px;
  background-color: rgba(220,220,220,1);
}

/*CHANGE: REMOVED ALL SIDENAV/SIDENAV MENTIONS TO CLEAN UP THE CODE*/

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  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 */

}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

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

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.remove {
  color: #B22222;
  font-size: 20px;
  font-weight: bold;
}

.remove:hover,
.remove:focus {
  color: #6b1b1b;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
  text-align: center;
}

.modal-body {padding: 5px 16px 20px 16px;}

.center {
  margin: auto;
  width: 60%;
  border: 3px solid green;
  padding: 10px;
  text-align: center;
}

#addform.form, #editform.form {
  display: table;
}
#addform.p, #editform.p {
  display: table-row;
}
#addform.input, #addform.label, #editform.input, #editform.label {
  display: table-cell;
}

#properties {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.listtable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table{
  padding-top: 10px;
  padding-bottom: 10px;
}

td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

tr:nth-child(odd){background-color: #ffffff;}

tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #04AA6D;
  color: white;
}
th.darkenhover:hover {background-color: #03613e;}
th.darkenhover {cursor:pointer}


#footer {
  position: fixed;
  bottom: -5px;
  padding-top: 10px;
  width: 100%;
  height: 4rem;
  background-color: #555;
  color: white ;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/*Button Appearance */
.button {
    display:  inline-block;
    background-color: darkseagreen;
    border-radius: 50px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    padding: 20px 40px;
    border: 3px solid;
    margin-left: 120px;
    margin-right: 120px;
}

/*Button Hover conditions */
.button:hover{
    animation: pulsate 10s ease-in-out;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes pulsate {
    0%{
        box-shadow:
        0 0 1px #f90000,
        0 0 1pc #00eeff;
    }
}