body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    border: 0;
    background-image: url("Gallery-Scotland-light-rays-over-ocean-01.jpg");
    font-size: large;
    color: rgb(245, 238, 220);
  }
  
h1 {
  text-align: center;
  margin-top: 50px;
}

/* Form style */
form {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  background-color: rgb(245, 238, 220);
}

form button {
  width: 100%;
  background-color: chocolate;
  color: rgb(245, 238, 220); 
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  /* box-sizing: border-box; */
}

a {
  color: chocolate;
  text-decoration: none;
}

#main-menu {
  text-align: right;
  margin: 5px;
}

.page {
  margin: 10px;
}

.center {
  text-align: center;
}

header {
  /* padding: 10px, 20px; */
  color: #ccc;
  display: flex;
  justify-content: right;
}

nav ul {
  background-color: #2c2c2c ;
  opacity: 75%;
  border-radius: 1em;
  display: flex;
  list-style-type: none;
  gap: 1em;
  padding: 0.4em 0.7em;
  margin: 0.5em;
}

nav a {
  color: antiquewhite;
  transition: all 0.3s;
}

nav a:hover {
  color: coral;
}

main {
  padding: auto;
  margin: 1em;
}

footer {
  padding: 0.7em;
  margin: 0.5em;
  text-align: right;
  font-size: x-small;

  background-color: #2c2c2c ;
  opacity: 50%;
  color: #ccc;

  position: fixed;
  bottom: 0;
  /* left: 0; */
  right: 0;
  /* z-index: 9999; */
  /* width: auto; */
  border-radius: 1.4em;
}

/* footer div {
  /* padding-right: 1em; * /
} */

.admin {
  color: #ff5f5f;
}

/* Table */
.table-wrapper {
  display: grid;
  justify-content: center;
  padding: 1em;
}

.styled-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  min-width: 400px;
  box-shadow: 0 0 20px rgb(68, 68, 68);
  background-color: #eeeeee;
  color: #0e0b08b5;
  text-align: right;
  margin: 0 auto;
}

.styled-table thead tr {
  background-color: chocolate;
  color: #ffffff;
  text-align: center;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table td input {
  padding: 0;
  margin: 0;
}

.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;

}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

/* .styled-table tbody tr:last-of-type {
  border-color: chocolate;
} */

.styled-table tbody tr.active-row {
  /* font-weight: bold; */
  color: rgb(99, 150, 11);
  background-color: rgb(242, 226, 214);
}

.styled-table tbody tr.bold-row {
  font-weight: bold;
}

.styled-table tbody tr:hover {
  background-color: rgb(239, 207, 184);
}

.table-nav {
  background-color: chocolate ;
  /* border-radius: 1em;  */
  justify-content: center;
  display: flex;
  list-style-type: none;
  gap: 1em;
  /* padding: 0.4em 0.7em; */
  margin: 0px;
  min-width: min-content;
  padding: 0px;
  width: 100%;
}

.table-nav ul {
  padding: 0;
  margin: 0;
  gap: 1px;
}

.table-nav li {
  display: inline;
  float: left;
  padding: 0;
}

.table-wrapper li:hover {
  background-color: rgb(142, 64, 9);
}

.table-wrapper button {
  padding: 0 5px;
  margin: 0;
  border: 0px solid /* rgb(142, 96, 63)*/; 
  color: white;
  display: inline-block;
}

.table-wrapper button:enabled {
  background-color: rgb(231, 106, 16);
}

.table-wrapper button:enabled.del{
  background-color: red;
}

.table-wrapper button:hover:enabled {
  background-color: rgb(142, 64, 9);
}

/* Floating notification */
.notif {
  z-index: 9;
  background-color: #ffffff;
  width: 250px;
  padding: 10px;
  position: absolute;
  /* right: 0px; */
  margin: 20px;
  color: black;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
}

.notif-green {
  border-left: 4px solid green;
  background-color: rgba(220, 246, 220, 0.85);
}

.notif-yellow {
  border-left: 4px solid yellow;
  background-color: rgba(246, 244, 220, 0.85);
}

.notif-red {
  border-left: 4px solid red;
  background-color: rgba(246, 220, 220, 0.85);
}