:root {
  --primary: #3bbb9b;
  --text-color: #878787;
}

body {
  color: var(--text-color);
  margin-bottom: 32px;
}

.btn {
  background-color: var(--primary);
  color: #fff !important;
  border: none;
  padding: 6px 22px;
  border-radius: 0px;
  font-size: 13px;
}

.form-control {
  border-color: #f2f2f2 !important;
  background-color: #f8f8f8 !important;
  color: #919191 !important;
  border: 1px solid #e1e1e1;
  padding: 8px 6px;
  outline: none;
  font: 1em "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #777;
  margin: 0;
  width: 100%;
  display: block;
  border-radius: 0px;
}

.form-control:focus {
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
}

.form-control.is-invalid {
  border-color: #dc3545 !important;
}

.form-control.is-invalid:focus {
  box-shadow: 0px 0px 2px 0px rgb(220 53 69);
}

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

.card-main {
  width: min(900px, 90%);
  color: var(--text-color);
  border-radius: 0;
}

.form {
  max-width: 400px;
  margin: auto;
}

.alert {
  border-radius: 0;
}

.alert .btn-close {
  box-shadow: none !important;
  border-radius: 50%;
  transform: translate(-5px, 8.5px);
  padding: 12px;
}

.alert .btn-close:hover {
  background-color: rgb(0 0 0 / 15%);
}