:root {
  --base-text-color: #212529;
  --header-bg: #007bff;
  --header-text-color: #fff;
  --default-btn-bg: #007bff;
  --default-btn-text-color: #fff;
  --default-btn-hover-bg: #0069d9;
  --default-btn-border-color: #0069d9;
  --danger-btn-bg: #dc3545;
  --danger-btn-text-color: #fff;
  --danger-btn-hover-bg: #bd2130;
  --danger-btn-border-color: #dc3545;
  --complete-btn-bg: #30bd30;
  --complete-btn-text-color: #fff;
  --complete-btn-hover-bg: #2e7d2e;
  --complete-btn-border-color: #2e7d2e;
  --restore-btn-bg: #6c757d;
  --restore-btn-text-color: #fff;
  --restore-btn-hover-bg: #494d51;
  --restore-btn-border-color: #494d51;
  --info-btn-bg: #17a2b8;
  --info-btn-text-color: #fff;
  --info-btn-hover-bg: #377a85;
  --info-btn-active-bg: #377a85;
  --info-btn-border-color: #377a85;
  --input-border-color: #ced4da;
  --input-bg-color: #fff;
  --input-text-color: #495057;
  --input-focus-bg-color: #fff;
  --input-focus-text-color: #495057;
  --input-focus-border-color: #80bdff;
  --input-focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

body {
  color: var(--base-text-color);
}

.navbar {
  background: var(--header-bg) !important;
}

.header .navbar-brand {
  color: var(--header-text-color) !important;
}

.btn {
  margin: 3px;
}

.btn.btn-primary, 
.btn-primary:not(:disabled):not(.disabled):active {
  color: var(--default-btn-text-color);
  background-color: var(--default-btn-bg);
  border-color: var(--default-btn-border-color);
}
.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: var(--default-btn-focus-box-shadow);
}
.btn.btn-primary:hover {
  color: var(--default-btn-text-color);
  background-color: var(--default-btn-hover-bg);
  border-color: var(--default-btn-border-color);
}

.btn.btn-danger,
.btn-danger:not(:disabled):not(.disabled):active {
  color: var(--danger-btn-text-color);
  background-color: var(--danger-btn-bg);
  border-color: var(--danger-btn-border-color);
}

.btn.btn-danger:not(:disabled):hover {
  color: var(--danger-btn-text-color);
  background-color: var(--danger-btn-hover-bg);
  border-color: var(--danger-btn-border-color);
}
/* success */
.btn.btn-success,
.btn-success:not(:disabled):not(.disabled):active {
  color: var(--complete-btn-text-color);
  background-color: var(--complete-btn-bg);
  border-color: var(--complete-btn-border-color);
}

.btn.btn-success:not(:disabled):hover {
  color: var(--complete-btn-text-color);
  background-color: var(--complete-btn-hover-bg);
  border-color: var(--complete-btn-border-color);
}
/* restore, return */
.btn.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled):active {
  color: var(--restore-btn-text-color);
  background-color: var(--restore-btn-bg);
  border-color: var(--restore-btn-border-color);
}

.btn.btn-secondary:not(:disabled):hover {
  color: var(--restore-btn-text-color);
  background-color: var(--restore-btn-hover-bg);
  border-color: var(--restore-btn-border-color);
}

/* info */
.btn.btn-info,
.btn-info:not(:disabled):not(.disabled):active {
  color: var(--info-btn-text-color);
  background-color: var(--info-btn-bg);
  border-color: var(--info-btn-border-color);
}

.btn.btn-info:hover {
  color: var(--info-btn-text-color);
  background-color: var(--info-btn-hover-bg);
  border-color: var(--info-btn-border-color);
}

.btn.btn-info.act {
  background-color: var(--info-btn-active-bg);
}

/* form */
.form-control {
  background: var(--input-bg-color);
  border-color: var(--input-border-color);
  color: var(--input-text-color);
}

.form-control:focus {
  color: var(--input-focus-text-color);
  background-color: var(--input-focus-bg-color);
  border-color: var(--input-focus-border-color);
  box-shadow: var(--input-focus-box-shadow);
}
.color-green {
  background-color: rgb(156, 214, 156);
}