:root {
  --color-primary: #ed1c24;
  --color-secondary-blue: #3a5490;
  --color-secondary-blue-rgba: rgba(58, 84, 144, 0.8);
  --color-secondary-red: #c72030;
  --color-secondary-red-rgba: rgba(204, 21, 44, 0.8);
  --color-secondary-purple: #9e205e;
  --color-secondary-purple-rgba: rgba(158, 32, 94, 0.8);
  --color-gray: #6c757c;
  --font-primary: "Arial", sans-serif;
  --font-secondary: "Poppins", sans-serif;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

header {
  background: var(--color-secondary-blue);
  color: white;
  height: 100px;
  font-style: var(--font-primary);
}

main {
  margin-top: 150px;
  margin-bottom: 200px;
  font-family: var(--font-secondary) !important;
}

.logo {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  height: 150px;
}

.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: linear-gradient(var(--color-secondary-blue-rgba),
      var(--color-secondary-blue-rgba)), url(https://olymelensembleonredonne.blob.core.windows.net/public-common/people-happy-support-stacking-community.jpg);
}

.add,
.submit {
  background-color: var(--color-primary);
}

.add:hover,
.submit:hover {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.previous,
.facilities {
  background-color: var(--color-gray);
}

.previous:hover,
.facilities:hover {
  border: 2px solid var(--color-gray);
  color: var(--color-gray);
}

.cart,
.save,
.password,
.visualize {
  background-color: var(--color-secondary-purple);
}

.cart:hover,
.password:hover,
.visualize:hover {
  border: 2px solid var(--color-secondary-purple);
  color: var(--color-secondary-purple);
}

.save:hover {
  border: 2px solid var(--color-secondary-purple);
  color: var(--color-secondary-purple);
  background-color: white;
}


.delete,
.delete-cart {
  background-color: var(--color-secondary-red);
}

.delete:hover {
  border: 2px solid var(--color-secondary-red);
  color: var(--color-secondary-red);
}

.delete-cart:hover {
  border: 2px solid var(--color-secondary-red);
  color: var(--color-secondary-red);
  background-color: white;
}

.manage,
.edit {
  background-color: var(--color-secondary-blue);
}

.manage:hover,
.edit:hover {
  border: 2px solid var(--color-secondary-blue);
  color: var(--color-secondary-blue);
}

.primary:hover {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: bold;
  background-color: white;
}

.primary {
  background-color: var(--color-primary);
}


.btn {
  color: white;
}

.btn:hover {
  font-weight: bold;
}

.trash {
  color: var(--color-secondary-red);
}

.pencil,
.check,
.email-reminder {
  color: var(--color-secondary-blue);
}

a {
  text-decoration: none;
}

.view {
  background-color: var(--color-secondary-purple);
  color: white;
}

.check,
.email-reminder {
  background-color: var(--color-secondary-blue);
  color: white;
}

.del {
  background-color: var(--color-secondary-red);
  color: white;
}

.view:hover {
  border: 1px solid var(--color-secondary-purple);
  color: var(--color-secondary-purple);
}

.del:hover {
  border: 1px solid var(--color-secondary-red);
  color: var(--color-secondary-red);
}

.check:hover,
.email-reminder:hover {
  border: 1px solid var(--color-secondary-blue);
  color: var(--color-secondary-blue);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blue {
  background-color: var(--color-secondary-blue);
}