body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #fff;
}
#nav {
  width: 100%;
  float: left;
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
#nav li {
  float: left;
}
#nav li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #069;
  /* border-right: 1px solid #ccc;
  border-left: 1px solid #ccc; */
}
#nav li a:hover {
  color: #c00;
  background-color: #fff;
}

.container {
  padding: 2px 16px;
  content: "";
  display: table;
  clear: both;
}

.containerB {
  display: flex;
}

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

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

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

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

#tabledetail th {
  padding-top: 12px;
  padding-right: 18px;
  padding-bottom: 12px;
  text-align: left;
  background-color: rgb(90, 155, 187);
  color: white;
}

.detailButton {
  margin-left: 20px;
  box-shadow: inset 0px 39px 0px -24px #7388e6;
  background-color: #5d5fe4;
  border-radius: 4px;
  border: 1px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  padding: 6px 15px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #3735b2;
}
.detailButton:hover {
  background-color: #2a3c63;
}
.detailButton:active {
  position: relative;
  top: 1px;
}
.redButton {
  box-shadow: inset 0px 39px 0px -24px #e67a73;
  background-color: #e4685d;
  border-radius: 4px;
  border: 1px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  padding: 6px 15px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #b23e35;
}
.redButton:hover {
  background-color: #ad4f48;
}
.redButton:active {
  position: relative;
  top: 1px;
}
.editButton {
  margin-bottom: 10px;
  box-shadow: inset 0px 39px 0px -24px #44c767;
  background-color: #399652;
  border-radius: 4px;
  border: 1px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  padding: 6px 15px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2d7e42;
}
.editButton:hover {
  background-color: #266e39;
}
.editButton:active {
  position: relative;
  top: 1px;
}

/* Style inputs */
input[type="text"],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type="email"],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="date"],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="number"],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

/* Style the submit button */
input[type="submit"] {
  width: 100%;
  background-color: #e4685d;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Add a background color to the submit button on mouse-over */
input[type="submit"]:hover {
  background-color: #ad4f48;
}

/*alert*/
.alert {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  background-color: #04aa6d;
  color: white;
  text-align: center;
}

.closebtn {
  text-align: center;
  margin-left: 6px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.hidden {
  display: none;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 10px;
  border-radius: 5px;
}

img {
  border-radius: 5px 5px 0 0;
}

input[type="file"] {
  display: none;
}
.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}