.brand {
  position: relative;
}

.brand:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-image: url('../images/metallic-black-silver.jpeg');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

/* .brand-content is USED WITH .brand to apply transparency to the background-image */
.brand-content {
  position: relative;
}

.brand-header {
  /* background-color: rgba(54, 86, 191, 0.741); */
  /* background-color: rgba(97, 119, 192, 0.741); */
  background-color: rgb(0, 49, 128);
  color: black;
  font-size: larger;
  border: 1px solid black;
}

.brand-footer {
  /* background-color: rgba(183, 24, 9, 0.7411764706); */
  background-color: rgb(0, 49, 128);
  color: black;
  font-size: medium;
  border: 1px solid black;
  bottom: 0;
}

.content {
  position: relative;
  overflow: scroll;
  margin: 1px;
}



.save {
  background-color: black;
  color: white;
  font-size: larger;
  border-radius: 10px;
}

.save:hover {
  background-color: maroon;
  color: white;

  font-size: larger;
}

.btn-back {
  background-color: black;
  color: white;
  font-size: larger;
  border-radius: 5px;
}

.btn-back:hover {
  background-color: maroon;
  color: white;
  border: 1px solid green;
  font-size: larger;
}

.card {
  background-color: rgba(36, 31, 31, 0.056);
  /* height: 200px; */

}

.card:hover {
  background-color: white;
}

.wd-90 {
  width: 90%;
  padding-left: 10px;
  padding-right: 10px;
  text-align: start;
  margin: 10px;
}

.wd-80 {
  width: 80%;
  padding-left: 10px;
  padding-right: 10px;
  text-align: start;
  margin: 10px;
}

.wd-75 {
  width: 75%;
  padding-left: 10px;
  padding-right: 10px;
  text-align: start;
  margin: 10px;
}


.form {
  padding: 5px;
  background-color: rgba(215, 244, 192, 0.293);
  font-size: medium;
  text-align: start;
  border: 1px solid black;
}


* {
  box-sizing: border-box;
}


.btn-delete {
  background-color: red;
  color: white;
  font-size: larger;
}

.btn-add:hover {
  background-color: rgb(235, 135, 95);
  color: white;
  border: 1px solid green;
  font-size: larger;
}

.bg-delete {
  border: 1px solid red;
}

.bg-delete:hover {
  background-color: red;
  color: white;
  border: 1px solid red;
}

.bg-detail {
  border: 1px solid black;

}

.bg-detail:hover {
  background-color: darkslategray;
  color: white;
  /* border: 1px solid gray; */
}

.bg-update {
  border: 1px solid rgb(0, 106, 255);

}

.bg-update:hover {
  background-color: rgb(0, 106, 255);
  color: white;
}

input[type='checkbox'] {
  transform: scale(1.5);
  border-color: blue;
  cursor: pointer;
}

h1 {

  color: red;
  text-align: center;
  margin: 1px;
  padding: 1px;
  border: 2px solid white;

}

h2 {

  color: maroon;
  text-align: center;
  margin: 1px;
  padding: 1px;
  border: 2px solid white;

}

.d-row {
  display: flex;
  /* justify-content: space-between; */
  justify-content: center;
  align-items: center;
}

.bottom {
  position: absolute;
  bottom: 10px;
  align-items: center;
}