/* Load this AFTER bootstrap.min.css so it wins the cascade without !important */
/* Block versions (stack vertically, same as default form-control behavior) */
.form-sm-1  { width: 4.5rem;  }
.form-sm-2  { width: 6rem;	}
.form-sm-3  { width: 7.5rem;  }
.form-sm-4  { width: 9rem;	}
.form-sm-5  { width: 10.5rem; }
.form-sm-6  { width: 12rem;   }
.form-sm-7  { width: 14rem;   }
.form-sm-8  { width: 16rem;   }
.form-sm-9  { width: 18rem;   }
.form-sm-10 { width: 20rem;   }
.form-sm-11 { width: 22rem;   }
.form-sm-12 { width: 100%;	}
/* Inline versions (sit side-by-side, with a small gutter so they don't touch) */
.form-sm-1-inline  { width: 4.5rem;  display: inline-block; margin-right: 0.5rem; }
.form-sm-2-inline  { width: 6rem;	display: inline-block; margin-right: 0.5rem; }
.form-sm-3-inline  { width: 7.5rem;  display: inline-block; margin-right: 0.5rem; }
.form-sm-4-inline  { width: 9rem;	display: inline-block; margin-right: 0.5rem; }
.form-sm-5-inline  { width: 10.5rem; display: inline-block; margin-right: 0.5rem; }
.form-sm-6-inline  { width: 12rem;   display: inline-block; margin-right: 0.5rem; }
.form-sm-7-inline  { width: 14rem;   display: inline-block; margin-right: 0.5rem; }
.form-sm-8-inline  { width: 16rem;   display: inline-block; margin-right: 0.5rem; }
.form-sm-9-inline  { width: 18rem;   display: inline-block; margin-right: 0.5rem; }
.form-sm-10-inline { width: 20rem;   display: inline-block; margin-right: 0.5rem; }
.form-sm-11-inline { width: 22rem;   display: inline-block; margin-right: 0.5rem; }
.form-sm-12-inline { width: 100%;	display: inline-block; margin-right: 0.5rem; }

@media (max-width: 575.98px) {
  .form-sm-1,
  .form-sm-2,
  .form-sm-3,
  .form-sm-4,
  .form-sm-5,
  .form-sm-6,
  .form-sm-7,
  .form-sm-8,
  .form-sm-9,
  .form-sm-10,
  .form-sm-11,
  .form-sm-1-inline,
  .form-sm-2-inline,
  .form-sm-3-inline,
  .form-sm-4-inline,
  .form-sm-5-inline,
  .form-sm-6-inline,
  .form-sm-7-inline,
  .form-sm-8-inline,
  .form-sm-9-inline,
  .form-sm-10-inline,
  .form-sm-11-inline {
	width: 100% !important;
	display: block !important;
	margin-right: 0 !important;
  }
}