/* Timebinder Redesign Styles */
/* Reusable form field styles */

.tb-form-label {
  font-weight: 500;
  color: #3f4254;
}

.tb-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid #d8dbe8;
  border-radius: 6px;
  background-color: #ffffff;
  color: #181c32;
  font-size: 14px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tb-input::placeholder {
  color: #c7c9d7;
  opacity: 1;
  font-weight: 600;
}

.tb-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
  outline: none;
}

.tb-input-invalid,
.tb-input-invalid:focus {
  border-color: #f1416c;
}

.tb-input-invalid:focus {
  box-shadow: 0 0 0 3px rgba(241, 65, 108, 0.12);
}

.tb-link {
  color: var(--tb-color-primary) !important;
  text-decoration: none;
  font-weight: 700;
}

.tb-link:hover,
.tb-link:focus {
  color: var(--tb-link-hover-color) !important;
  text-decoration: none;
}

.tb-divider {
  color: #a1a5b7;
  font-size: 12px;
  font-weight: 600;
}

.tb-divider::before,
.tb-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid #e3e6ef;
}

.tb-divider::before {
  margin-right: 12px;
}

.tb-divider::after {
  margin-left: 12px;
}

/* button */

.tb-button {
  border-width: 1px;
  border-style: solid;
  min-height: 48px;
}

.tb-button-primary {
  color: var(--tb-color-primary) !important;
  border-color: var(--tb-color-primary) !important;
}

.tb-button-primary:hover,
.tb-button-primary:focus,
.tb-button-primary:active {
  color: var(--tb-color-primary) !important;
  border-color: var(--tb-color-primary) !important;
  background-color: rgba(var(--tb-color-primary-rgb), 0.08) !important;
}

.tb-btn-submit {
  background: linear-gradient(90deg, color-mix(in srgb, var(--tb-color-primary) 88%, white) 0%, var(--tb-color-primary) 100%);
  border: none;
  min-height: 48px;
}

.tb-btn-submit:hover,
.tb-btn-submit:focus {
  background: linear-gradient(90deg, color-mix(in srgb, var(--tb-link-hover-color) 88%, white) 0%, var(--tb-link-hover-color) 100%);
}