body.br-workspace-page .modal-dialog.modal-xl.br-channel-dialog {
  width: min(1240px, calc(100% - 32px));
  max-width: 1240px;
  margin: 4vh auto;
}
body.br-workspace-page .br-channel-modal .modal-content {
  max-height: 92vh;
  border: 1px solid #cfd5de;
  border-radius: 5px;
}
.br-channel-header { background: #f7f8fa; }
.br-channel-header .close {
  display: grid;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #687184;
  opacity: 1;
}
.br-channel-body { overflow: auto; }
.br-channel-alert {
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid #edc6c9;
  border-radius: 4px;
  background: #fcebed;
  color: #8f1d25;
  font-size: 12px;
}
.br-channel-alert.is-success {
  border-color: #b8d9ce;
  background: #e5f4f1;
  color: #0e685f;
}
.br-channel-source { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #e4e7ec; }
.br-channel-source-field { min-width: 0; }
.br-channel-source-field > label,
.br-channel-section-heading span,
.br-channel-filter-heading span {
  display: block;
  margin-bottom: 6px;
  color: #70798a;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.br-channel-select-wrap { position: relative; width: min(100%, 520px); }
.br-channel-select-wrap > i {
  position: absolute;
  top: 14px;
  left: 13px;
  color: #8b94a3;
  font-size: 12px;
  pointer-events: none;
}
.br-channel-select-wrap select,
.br-channel-select-wrap input {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 36px;
  border: 1px solid #ccd2dc;
  border-radius: 4px;
  background: #fff;
  color: #202632;
  font-size: 13px;
}
.br-channel-select-wrap select:focus,
.br-channel-select-wrap input:focus,
.br-channel-search input:focus,
.br-channel-filter-row select:focus,
.br-channel-filter-row input:focus {
  border-color: #147d72;
  box-shadow: 0 0 0 3px rgba(20, 125, 114, 0.1);
  outline: 0;
}
.br-channel-object-meta { display: block; min-height: 17px; margin-top: 5px; color: #7b8494; font-size: 11px; }
.br-channel-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  min-height: 350px;
  border-bottom: 1px solid #e4e7ec;
}
.br-channel-fields,
.br-channel-rules { min-width: 0; padding: 20px 0; }
.br-channel-fields { padding-right: 22px; border-right: 1px solid #e4e7ec; }
.br-channel-rules { padding-left: 22px; }
.br-channel-section-heading,
.br-channel-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.br-channel-section-heading h3,
.br-channel-filter-heading h3 { margin: 0; color: #202632; font-size: 14px; }
.br-channel-section-heading strong {
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 4px;
  background: #edf4f3;
  color: #126f67;
  font-size: 11px;
}
.br-channel-search { position: relative; display: block; margin: 14px 0 10px; }
.br-channel-search i { position: absolute; top: 11px; left: 11px; color: #8b94a3; font-size: 11px; }
.br-channel-search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 31px;
  border: 1px solid #d7dce4;
  border-radius: 4px;
  font-size: 12px;
}
.br-channel-field-list { height: 245px; overflow: auto; border-top: 1px solid #edf0f3; }
.br-channel-field {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  margin: 0;
  border-bottom: 1px solid #edf0f3;
  cursor: pointer;
}
.br-channel-field:hover { background: #fafbfc; }
.br-channel-field input { accent-color: #147d72; }
.br-channel-field strong,
.br-channel-field small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-channel-field strong { color: #2b3240; font-size: 12px; }
.br-channel-field small { margin-top: 2px; color: #8a93a2; font: 9px/1.2 "SFMono-Regular", Consolas, monospace; }
.br-channel-field > em { color: #8992a0; font-size: 9px; font-style: normal; text-transform: uppercase; }
.br-channel-field.is-fixed { cursor: default; }
.br-channel-placeholder { padding: 28px 10px; color: #8a93a2; font-size: 12px; text-align: center; }
.br-channel-operations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.br-channel-operations label { margin: 0; }
.br-channel-operations input { position: absolute; opacity: 0; pointer-events: none; }
.br-channel-operations span {
  display: flex;
  height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid #d7dce4;
  border-radius: 4px;
  color: #5d6676;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.br-channel-operations input:checked + span {
  border-color: #82bab4;
  background: #edf7f5;
  color: #126f67;
}
.br-channel-filter-heading { margin-top: 22px; padding-top: 17px; border-top: 1px solid #edf0f3; }
.br-channel-filters { margin-top: 10px; }
.br-channel-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 82px minmax(90px, 1fr) 30px;
  gap: 6px;
  margin-bottom: 7px;
}
.br-channel-filter-row select,
.br-channel-filter-row input {
  min-width: 0;
  height: 34px;
  border: 1px solid #d7dce4;
  border-radius: 4px;
  background: #fff;
  color: #343b48;
  font-size: 10px;
}
.br-channel-filter-row select,
.br-channel-filter-row input { padding: 0 8px; }
.br-channel-filter-row button {
  display: grid;
  width: 30px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #8b94a3;
}
.br-channel-filter-row button:hover { background: #fcebed; color: #b4232d; }
.br-channel-preview { padding-top: 18px; }
.br-channel-preview pre {
  min-height: 58px;
  max-height: 110px;
  margin: 12px 0 0;
  padding: 13px;
  overflow: auto;
  border: 1px solid #d9dee6;
  border-radius: 4px;
  background: #111722;
  color: #dce7e5;
  font: 11px/1.55 "SFMono-Regular", Consolas, monospace;
  white-space: pre-wrap;
}
.br-channel-validity { color: #8a93a2; font-size: 10px; font-weight: 700; }
.br-channel-validity i { margin-right: 5px; font-size: 6px; }
.br-channel-validity.is-ready { color: #147d72; }
.br-channel-footer { justify-content: space-between !important; }
.br-channel-footer > span { color: #6d7686; font-size: 11px; }
.br-channel-footer > div { display: flex; gap: 8px; }
.br-channel-footer .br-command { min-height: 38px; }
.br-channel-footer .br-command:not(.is-primary) { border: 1px solid #d1d6de; background: #fff; color: #4f5868; }
.br-channel-footer .br-command:disabled { cursor: not-allowed; opacity: .55; }

@media (max-width: 820px) {
  body.br-workspace-page .modal-dialog.modal-xl.br-channel-dialog { width: calc(100% - 18px); margin: 9px auto; }
  body.br-workspace-page .br-channel-modal .modal-content { max-height: calc(100vh - 18px); }
  .br-channel-object-meta { position: static; display: block; margin-top: 7px; }
  .br-channel-source { grid-template-columns: 1fr; }
  .br-channel-builder-grid { grid-template-columns: 1fr; }
  .br-channel-fields { padding-right: 0; border-right: 0; border-bottom: 1px solid #e4e7ec; }
  .br-channel-rules { padding-left: 0; }
  .br-channel-field-list { height: 210px; }
  .br-channel-filter-row { grid-template-columns: 1fr 82px; }
  .br-channel-filter-row input { grid-column: 1 / 2; }
}