:root {
  --black: #0D1821;
  --white: #FFFAFB;
  --gold: #FFD700;
  --blue: #1B98E0;
  --dark: 50%;
  --clean: rgba(137, 220, 130);
  --danger: rgb(232, 89, 89);
  --default: rgb(77, 75, 165);
  --information: rgb(98, 191, 220);
  --warning: rgb(250, 191, 109);
  --largeHeight: 50px;
  --largeWidth: 200px;
}

button{
  border: none;
  color: black;
  cursor: pointer;
  width: fit-content;
  padding: 5px 25px;
  transition-duration: 0.4s;
  text-align: center;
}

 button.default,
 button.clean,
 button.information,
 button.warning,
 button.danger,
 form > .action > input {
  border: none;
  color: white;
  cursor: pointer;
  font-size: 15px;
  min-width: 100px;
  padding: 5px 25px;
  transition-duration: 0.4s;
  text-align: center;
}

button.image{
  padding: 0px;
  margin: 0px;
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}

/* fixed class if you want fixed size buttons */
 button.fixed {
  width: 120px;
  padding-left: 0px;
  padding-right: 0px;
}

 button.large,
 form > .action > input.large {
  min-height: var(--largeHeight);
  min-width: var(--largeWidth);
  padding: 10px 35px;
}

 button:hover {
  filter: brightness(var(--dark));
}
/* overide for table buttons */
 td > button {
  margin: 2px;
  /* min-width: 70px; */
}


/* button design based on function */
 button.default,
 form > .action > input.default {
  background-color: var(--white);
  color: var(--black);
}

button.black,
 form > .action > input.black {
  border: var(--white) 2px solid;
  background-color: var(--black);
  color: var(--white);
}

 button.clean,
 form > .action > input.clean {
  background-color: var(--clean);
}

 button.information,
 form > .action > input.information {
  background-color: var(--information);
}

 button.warning,
 form > .action > input.warning {
  background-color: var(--warning);
}

 button.danger,
 form > .action > input.danger {
  background-color: var(--danger);
}

 button.icon {
  padding: 0px;
  cursor: pointer;
  margin: 0px;
  background-color: transparent;
  border: none;
}