body {
  /*background-color: #ccc;*/
  background-color: #fff;
}

.no-underline{
  text-decoration: none;
}

.agency-selected{
  background-color: var(--bs-success);
  color: #ffffff;
}

.form-label {
  font-weight: bolder;
  font-family: Helvetica, sans-serif;
  color: var(--bs-success);
  font-size: 18px;
  padding-top: 15px;
}

.form-nav-button{
  width: 120px;
}

.print-button{
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-radius: 7px !important;
    margin-right: 5px;
}

.excel-button{
    background-color: var(--bs-success) !important;
    color: white !important;
    border-radius: 7px !important;
    margin-right: 5px;
}

.pdf-button{
    background-color: var(--bs-danger) !important;
    color: white !important;
    border-radius: 7px !important;
    margin-right: 5px;
}

.rounded-corners{
  border-radius: 10px;
}

.login-card {
  min-width: 350px;
  padding: 10px;
  background-color: #f7fbfb;
  border-radius: 12px;
  border: 2px solid #556f44;
}

.login-button {
  margin-top: 20px;
}

.card-button {
  padding-left: 20px;
  padding-right: 20px;
  width: 100px;
  font-size: smaller;
}

.button-medium{
  width: 100px;
}

.button-medium-lg{
  width: 125px;
}

/* Payroll Taxes card: keep 941 / 940 / W2 narrow so the footer fits one row with Deposits */
.card-button.card-button-payroll-tax-compact {
  width: 72px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: smaller;
  white-space: nowrap;
}

.button-wide {
  width: 200px !important;
}

.centered-div {
  display: flex;
  justify-content: center;
}

.caps-lock-warning-on {
  display: block;
  color: var(--bs-danger);
}

.caps-lock-warning-off{
  display: none;
}

.simulated-button-primary {
  background-color: var(--bs-primary);
  color: #ffffff;
  font-size: medium;
}

.simulated-button-success {
  background-color: var(--bs-success);
  color: #ffffff;
  font-size: medium;
}

.simulated-button-secondary {
  background-color: var(--bs-secondary) !important;
  color: #ffffff;
  font-size: medium;
}

.simulated-button-danger {
  background-color: var(--bs-danger);
  color: #ffffff;
  font-size: medium;
}

.align-right{
  text-align: right;
}
.total-align-right{
  text-align: right;
}

.total-negative-amount{
  color: var(--bs-danger);
}

.table-div {
  background-color: #f2f2f2;
  border-radius:  15px;
}

.form-control:focus {
  box-shadow: none;
  border-color: #ba68c8;
}

.form-button {
  background: rgb(99, 39, 120);
  box-shadow: none;
  border: none;
}

.form-button:hover {
  background: #682773;
}

.form-button:focus {
  background: #682773;
  box-shadow: none;
}

.form-button:active {
  background: #682773;
  box-shadow: none;
}

.back:hover {
  color: #682773;
  cursor: pointer;
}

.labels {
  font-weight: bolder;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #032626;
}

.label-center {
  justify-items: center;
}

/* Tax Form CSS */
.tax-form-label{
  padding-left: 2em;
  text-indent: -1em;
  color: #000000;
  font-size: medium;
  font-weight: 600;
}

/* Card drop-shadow: medium gray shadow on right and bottom, with extra row spacing */
.card {
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.25), 3px 3px 10px rgba(0, 0, 0, 0.15);
  margin-bottom: 0.75rem;
}

/* Remove bottom margin on card titles when used as colored headers
   so there is no solid bar between the header and gradient body. */
.card > .card-title {
  margin-bottom: 0;
}

/* Dashboard card body gradient - used on dashboard-style pages
   Use explicit colors instead of --bs-card-bg/color-mix so that
   the gradient renders consistently and without a solid bar edge. */
.card-body-gradient {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
  background: linear-gradient(
    180deg,
    #3c5ca0 0%,
    #274689 50%,
    #1b2f5f 100%
  );
}

/* Form/content panels (new & edit templates across setup, personnel, agency, payroll, etc.): border and same drop-shadow as cards */
.form-panel {
  border: 1px solid #dee2e6;
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.25), 3px 3px 10px rgba(0, 0, 0, 0.15);
}

.agency-address{
  font-style: italic;
  font-weight: 600;
}

.agency-phone{
  color: var(--bs-success);
  font-style: normal;
}