/* Circulate Frontend Styles */
.circulate-field-checkbox_group > label:first-child,
.circulate-field-multiple_choice_multi > label:first-child {
  display: block;
  margin-bottom: 6px;
}
.circulate-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
}
.circulate-table-wrapper th,
.circulate-table-wrapper td {
    border: 1px solid #ddd;
    padding: 8px;
}
.circulate-table-wrapper th {
    background: #f4f4f4;
}
.circulate-card {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    background: #fff;
}
.circulate-card-body {
    margin-top: 10px;
}
.circulate-pagination a {
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    text-decoration: none;
    display: inline-block;
}
.circulate-pagination a.active {
    background: #0073aa;
    color: #fff;
}
.circulate-flexrow > .circulate-flexibox {
   min-width: 600px;
   margin-left: 0;
   margin-right: auto;
}
/* --- FORCE PADDING + ONE-COLUMN ON FORM BLOCKS --- */
.circulate-form-wrap,
.circulate-flexi-form,
form.circulate-form {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 25px !important;   /* <- the padding you want */
  margin: 0 0 20px 0 !important;   /* <- same spacing as directory */
  background: transparent;         /* change later if you want color */
  border: 0;
  border-radius: 6px;
}

/* Make inner controls actually span the width */
.circulate-flexi-form form,
.circulate-form-wrap form,
form.circulate-form {
  max-width: 100% !important;
}
.circulate-flexi-form input[type="text"],
.circulate-flexi-form input[type="email"],
.circulate-flexi-form input[type="tel"],
.circulate-flexi-form input[type="url"],
.circulate-flexi-form input[type="number"],
.circulate-flexi-form input[type="date"],
.circulate-flexi-form textarea,
.circulate-flexi-form select,
.circulate-form-wrap input[type="text"],
.circulate-form-wrap input[type="email"],
.circulate-form-wrap input[type="tel"],
.circulate-form-wrap input[type="url"],
.circulate-form-wrap input[type="number"],
.circulate-form-wrap input[type="date"],
.circulate-form-wrap textarea,
.circulate-form-wrap select,
form.circulate-form input[type="text"],
form.circulate-form input[type="email"],
form.circulate-form input[type="tel"],
form.circulate-form input[type="url"],
form.circulate-form input[type="number"],
form.circulate-form input[type="date"],
form.circulate-form textarea,
form.circulate-form select {
  width: 100% !important;
  max-width: 100% !important;
}

/* Safety: kill any leftover two-column/flex behavior */
.circulate-flexrow > .circulate-form-wrap,
.circulate-flexrow > .circulate-flexi-form {
  flex: 0 1 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}