/* Main */

.btn {
  display: inline-block;
  padding: 0.25rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;

  text-decoration: underline;
  text-align: center;
  border: 2px solid;
  font-family: inherit;
  line-height: normal;
  appearance: none; 
}


/*  Containers */

.btn-row {
  display: flex;
  justify-content: space-between;
  gap: 0.2rem;

  padding: 0.5rem;
  width: 100%;
}

.btn-row > .btn-group-left,
.btn-row > .btn-group-right {
  display: flex;
  gap: 0.2rem;
}

.btn-row-left {
  display: flex;
  justify-content: flex-start;
  gap: 0.2rem;

  padding: 0.5rem;
  width: 100%;
}

.btn-row-center {
  display: flex;
  justify-content: center;
  gap: 0.2rem;

  padding: 0.5rem;
  width: 100%;
}

.btn-row-right {
  display: flex;
  justify-content: flex-end;
  gap: 0.2rem;

  padding: 0.5rem;
  width: 100%;
}


/* Navigation  */

.btn-back {
  background-color: #4A6FA5;
  color: #FFFFFF;
  border-color: #365480;
}

.btn-back:hover {
  background-color: #5B80BB;
  border-color: #2C4466;
}

.btn-continue {
  background-color: #D98E73;
  color: #FFFFFF;
  border-color:#B8725B;
}

.btn-continue:hover {
  background-color: #EB9F85;
  border-color: #A05F47;
}

/*  Standard action / Low risk  */

.btn-action {
  background-color: #333333;
  color: #FFFFFF;
  border-color: #555555;
}

.btn-action:hover {
  background-color: #444444;
  border-color: #666666;
}

.btn-confirm {
  background-color: #556B2F;
  color: #FFFFFF;
  border: 2px solid #3D4E22;
}

.btn-confirm:hover {
  background-color: #6B8E23;
  border-color: #556B2F;
}

/*  Secondary action / Neutral  */

.btn-neutral {
  background-color: #666666;
  color: #ffffff;
  border-color: #808080;
}

.btn-neutral:hover {
  background-color: #7a7a7a;
  border-color: #999999;
}

/*  Caution / High risk  */

.btn-logout {
  background-color: #8B3A2A;
  border-color: #6E2C1F;
  color: #FFFFFF;
}

.btn-logout:hover{
  background-color: #A64B38;
  border-color: #8B3A2A;
}

.btn-cancel {
  background-color: #8B3A2A;
  border-color: #6E2C1F;
  color: #FFFFFF;
}

.btn-cancel:hover {
  background-color: #A64B38;
  border-color: #8B3A2A;
}

.btn-danger {
  background-color: #753024;
  color: #FFFFFF;
  border-color: #5C241B;
}

.btn-danger:hover {
  background-color: #9D4030;
  border-color: #753024;
}