:root {
  --taupe-bg: #fbf8f1;
  --hi-vis-green: #4de529;

    --bb-primary: #FFB81C;
    --bb-primary-hover: #e5a619;
    --btn-grey: #4b5563;
    --btn-grey-hover: #374151;
    --bb-dark: #111827;
    --bb-text: #6b7280;
    --bg-sidebar: #f8f9fa;
    --bg-body: #ffffff;
    --bg-panel: #ffffff;
    --border-color: #e5e7eb;
    --step-line-color: #d1d5db;
    --error-bg: #fef2f2;
    --error-text: #991b1b;
    --error-border: #fecaca;
    --warning-bg: #fef9c3;
    --warning-border: #fde68a;
    --success-bg: #dcfce7;
    --success-border: #a7f3d0;
    --warning-text: #92400e;
    --code-bg: #f3f4f6;
    --input-border: #d1d5db;
}
.breadbutter-wrap .error.notice.hidden{display:none; } 
body.toplevel_page_breadbutter_connect {
  background-color: #f1f5fb;
}
.breadbutter-wrap div.notice{
      background-color: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
}
.breadbutter-wrap .error.notice{
  margin-top: 10px;
    background-color: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}
.breadbutter-wrap .error.notice p, .notice p{
     font-size: 15px;
    color: var(--warning-text);
    margin: 0;
    line-height: 1.5;
    background: transparent;
}
.breadbutter-wrap .notice.notice-success{
  background-color: var(--success-bg);
    border: 1px solid var(--success-border);
   
}
.breadbutter-wrap .notice-dismiss{ top: auto;padding: 0;}
.breadbutter-wrap .notice.notice-success p{
  color: #064e3b;
   margin: 0;
    line-height: 1.5;
    background: transparent;
    font-size: 15px;
}



body.toplevel_page_breadbutter_connect .form-table,
body.toplevel_page_breadbutter_connect .form-table td,
body.toplevel_page_breadbutter_connect .form-table td p,
body.toplevel_page_breadbutter_connect .form-table th {
  color: #4b5563;
    font-size: 15px;
    font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  
  line-height: 1.4;
}

.content.preview-content .form-table th {
  width: 155px;
}
.breadbutter-wrap.wrap {
  background-color: #f1f5fb;
  /*margin: 0 0 0 -20px;*/
}
.breadbutter-tab.enforce-lines{    border-bottom: 1px solid #c3c4c7 !important;
    }
/* ── Container ─────────────────────────────────────────────── */
#breadbutter-webapp-container .bb-apps-view .bb-content-component {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    color: #1a1a1a;
}

/* ── Header row: title + Add Account button ─────────────────── */
.bb-apps-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
}

.bb-apps-header-left {
    flex: 1;
}

.bb-apps-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
}

.bb-apps-subtitle {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

/* Hide header when no apps */
.bb-apps-view[has-apps="0"] .bb-has-apps {
    display: none;
}

/* ── Add Account button (top right) ────────────────────────── */
.bb-add-account-btn {
    flex-shrink: 0;
    background-color: #f5a623;
    color: #1a1a1a;
    border: none;
    border-radius: 24px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.bb-add-account-btn:hover {
    background-color: #e09510;
}

/* ── Search bar ─────────────────────────────────────────────── */
.bb-apps-search {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 14px;
    margin-bottom: 20px;
    background: #fff;
    gap: 8px;
}

.bb-apps-search .bb-search-icon {
    display: flex;
    align-items: center;
    color: #aaa;
    flex-shrink: 0;
}

.bb-apps-search-input {
    border: none !important;
    outline: none;
    font-size: 14px;
    color: #333;
    width: 100%;
    background: transparent;
}

.bb-apps-search-input::placeholder {
    color: #aaa;
}

/* ── App cards ──────────────────────────────────────────────── */
.bb-apps-holder {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bb-apps-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 30px 20px;
    background: #fff;
    gap: 16px;
}
.bb-audit-view, .bb-assign-view{display: none;}
#breadbutter-webapp-container[data-view="audit"] .bb-audit-view { display: block; }
#breadbutter-webapp-container[data-view="assign"] .bb-assign-view { display: block; }
/* ── Left side: name + plan ─────────────────────────────────── */
.bb-app-info {
    flex: 1;
    min-width: 0;
}

.bb-app-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1a1a1a;
}

.bb-app-plan-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 2px;
    font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    margin-top: 31px;
}

.bb-app-plan-value {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

/* ── Right side: App ID + date + button ─────────────────────── */
.bb-app-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.bb-app-id-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bb-app-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 4px 8px 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.bb-app-id-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #888;
    line-height: 1;
    transition: color 0.15s;
}

.bb-app-id-copy:hover {
    color: #333;
}

.bb-app-created-date {
    font-size: 12px;
    color: #888;
}

/* ── Use this App button ────────────────────────────────────── */
.bb-app-use-btn {
    background-color: #2563eb;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.bb-app-use-btn:hover {
    background-color: #1d4ed8;
}

/* ── Fallback Create App button (no-apps state) ─────────────── */
.bb-no-apps {
    display: none;
}

.bb-apps-view[has-apps="0"] .bb-no-apps {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.bb-apps-view[has-apps="0"] .bb-apps-search,
.bb-apps-view[has-apps="0"] .bb-apps-header {
    display: none;
}

button.bb-create-app:not(.bb-add-account-btn) {
    background-color: #f5a623;
    color: #1a1a1a;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

button.bb-create-app:not(.bb-add-account-btn):hover {
    background-color: #e09510;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .bb-apps-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .bb-app-actions {
        align-items: flex-start;
        width: 100%;
    }

    .bb-apps-header {
        flex-direction: column;
    }

    .bb-add-account-btn {
        width: 100%;
        text-align: center;
    }
}
.breadbutter-wrap .flex-row {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}
.breadbutter-wrap
  .flex-row.breadbutter-gating-content-gating-preview-trigger-options {
  align-items: start;
}

.breadbutter-wrap .flex-col {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.breadbutter-wrap .flex-row input[type="radio"] {
  margin-right: 1rem;
}
.breadbutter_additional_settings_info th{display: none;}
.breadbutter-wrap .full-row {
  width: 100%;
}

/*.breadbutter-wrap .fixed-row {
  width: 30em;
  min-height: 40px;
  display: flex;
  align-items: center;
}*/

.breadbutter-wrap input.range-row {
  width: 23em;
}
.breadbutter-wrap input.number-row {
  width: 30em;
}

.breadbutter-wrap select.select-row {
  width: 30em;
  padding-right: 3.5em;
}

.breadbutter-wrap .target-copy {
  display: inline-block;
}

.breadbutter-wrap .copy {
  background: url(copy.svg) center center no-repeat;
  display: inline-block;
  background-size: 80%;
  margin-left: 1rem;
  cursor: pointer;

  height: 24px;
  vertical-align: top;
  background-color: #ebebeb;
  width: 24px;
  border-radius: 50px;
  margin-top: -4px;
}

.breadbutter-wrap .copy:hover {
  opacity: 0.5;
}

.breadbutter-wrap .copy:active {
  opacity: 1;
}

.breadbutter-wrap .guide {
  background: #14f2d7;
  color: #033630;
  font-weight: 600;
  padding: 1rem;
}

.breadbutter-wrap .guide a {
  font-weight: 100;
}

.breadbutter-wrap .url-title label {
  line-height: 1.3;
  font-weight: 600;
}

.breadbutter-admin-tab {
  display: none;
}

.breadbutter-admin-tab.active {
  /*display: flex;*/
  justify-content: center;
  flex-direction: column;
  padding: 48px 64px;
  max-width: 1100px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease;
}

.breadbutter-admin-tab .welcome {
  margin-bottom: 32px;
  margin-left: 32px;
}

.breadbutter-admin-tab .welcome h2 {
  padding-top: 0;
  font-size: 16px;
  font-weight: bold;
}

.breadbutter-admin-tab .welcome p {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.27;
}

.breadbutter-admin-tab .basic-task {
  display: flex;
  align-items: center;
  height: 135px;
  margin-bottom: 10px;
  padding: 0 21px;
  border-radius: 6px;
  background-color: var(--taupe-bg);
}

.breadbutter-admin-tab .basic-task .bullet {
  display: flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
  font-size: 20px;
  font-weight: bold;
  color: black;
}

.breadbutter-admin-tab .basic-task .hint {
  font-size: 12px;
  font-weight: bold;
}

.breadbutter-admin-tab .basic-task .task-button,
.bb-dashboard-top-content .task-button {
  display: flex;
  flex: 0 0 130px;
  align-items: center;
  justify-content: center;
  margin: -12px 0 0 30px;
  padding: 1px 0;
  border: solid 1px black;
  border-radius: 4px;
  font-size: 9px;
  font-weight: bold;
  color: black;
  text-transform: uppercase;
  text-decoration: none;
}

.bb-dashboard-top-content .task-button {
  padding: 6px 18px;
  font-size: 12px;
}

.bb-dashboard-top-content .task-button {
  margin: 0;
}

.breadbutter-admin-tab .basic-task.task1 img {
  width: 178px;
  height: auto;
  margin-top: -30px;
  margin-left: -22px;
}

.breadbutter-admin-tab .basic-task.task1 .hint {
  margin-left: -20px;
}

.breadbutter-admin-tab .basic-task.task2 img,
.breadbutter-admin-tab .basic-task.task3 img {
  width: 170px;
  height: auto;
  margin-top: 30px;
  margin-left: -18px;
}

.breadbutter-admin-tab .basic-task.task2 .hint,
.breadbutter-admin-tab .basic-task.task3 .hint {
  margin-left: -16px;
}
.breadbutter-wrap h2, .breadbutter-wrap h3{
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.breadbutter-wrap pre {
  padding: 0 1em;
}
.breadbutter-wrap pre code {
  background: transparent;
}

.breadbutter-wrap #dashboard-contactus .breadbutter-section {
  display: none;
}

.breadbutter-wrap :not(h2) + .breadbutter-section {
  margin-top: 10px;
}
.breadbutter-admin-tab a.how-to{
  padding: 11.6px 15px 11.4px;
  border-radius: 4px;
  background-color: #2ab846;
  font-size: 12px;
  font-weight: bold;
  margin-top: 20px;
  color: #fff;
  text-decoration: none;
  display:table;
  text-transform: uppercase;
}
.breadbutter-wrap .breadbutter-notices {
  margin: 0 20px 0;
}

.breadbutter-how-to-header {
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #1d2327;
  margin: 15px 0px;
  height: 40px;
  display: flex;
  vertical-align: middle;
  align-items: center;
}
#advance .breadbutter-how-to-header,
#advance .breadbutter-header,
#content-gating .breadbutter-how-to-header,
#content-preview .breadbutter-how-to-header,
#contactus .breadbutter-how-to-header,
#newsletter .breadbutter-how-to-header {
  margin-left: 0px;
}

.breadbutter-info-icon {
  height: 15px;
  width: 15px;
  margin: 15px 0;
  position: relative;
}
.breadbutter-info-hint {
  background: white;
  display: none;
  position: absolute;
  top: 25px;
  left: -80px;
  width: 160px;
  box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.25);
  padding: 10px;
  border-radius: 4px;
  z-index: 1000;
}
.breadbutter-info-arrow {
  background: white;
  top: -4px;
  right: 87px;
  width: 10px;
  height: 10px;
  position: absolute;
  transform: rotate(45deg);
}

.breadbutter-info-icon:hover .breadbutter-info-hint {
  display: block;
}

.breadbutter-wrap .refresh-icon {
  background-image: url(./refresh.svg);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  display: none;
  cursor: pointer;
  transition: transform 0.125s ease-in-out;
}

.breadbutter-wrap .refresh-icon:hover {
  opacity: 0.8;
  /*transform: rotate(-180deg);*/
}

.bb-howto {
  width: 160px;
  height: 40px;
  line-height: 40px;
  vertical-align: top;
  display: inline-block;
  border-radius: 4px;
  background-color: #1bb93f;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
  text-decoration: none;
  margin: 15px 15px;
  white-space: nowrap;
  padding: 0 12px;
}

.bb-content-gate-preview-additional-options .breadbutter-reverse {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: start;
}

body.toplevel_page_breadbutter_connect .form-table th {
  padding-right: 5px;
}
.content.preview-content .breadbutter-reverse th {
  width: 14.5%;
}
.form-table tr:has(th:empty):has(td:empty) {
  display: none;
}
.breadbutter-reverse {
  position: relative;
}
.breadbutter-reverse label {
  position: absolute;
  left: calc(4%);
  top: 50%;
  transform: translate(0, -50%);
  color: #4b5563;
  font-size: 15px;
  font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

.breadbutter-tab{
  
  padding: 0px;
  position: relative;
  
  max-width: 1090px;
}
.breadbutter-tab.no-top-margin{ margin-top: 0px;}
.breadbutter-tab p{color: #4b5563;
    font-size: 15px;
    font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;}
.breadbutter-tab.no-line {
  border-bottom: 0px;
}
.breadbutter-admin-tab>.breadbutter-tab:last-child {
  border-bottom: 0px;
}
.breadbutter-section-top.line {
  border-top: 1px solid #c3c4c7;
  padding-top: 30px;
  padding-bottom: 20px;
}
.breadbutter-tab .breadbutter-tab-header {
  justify-content: start;
  margin-bottom: 18px;
}
.toplevel_page_breadbutter_connect input[type="checkbox"]:checked:before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: #4de529 url(./BB_WHITE_CHECK.svg) 2px 4px no-repeat;
  background-size: 26px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 1px;
}
.breadbutter-content-gate-secure-image {
height: auto;
  max-width: 65%;
  box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.2);
  border-radius: 10px !important;
}
.breadbutter-content-gate-secure p {
  font-weight: 600;
}
.breadbutter-content-gate-secure {
  position: relative;
  margin-top: 80px;
  margin-bottom: 130px;
  display: flex;
    justify-content: end;
     width: 900px;
     max-width: 100%;
}
.breadbutter-content-gate-arrow-1 {
  width: 100px;
    position: absolute;
    height: auto;
    top: 43%;
    left: 21%;
}
.breadbutter-content-gate-arrow-2 {
  position: absolute;
  width: 3.5%;
  height: auto;
  bottom: -6%;
  left: 14%;
}
.breadbutter-content-gate-arrow-3 {
  position: absolute;
  width: 5.8%;
  height: auto;
  bottom: -3%;
  right: 28%;
}
.breadbutter-content-gate-text-1 {
      position: absolute;
    width: 140px;
    height: auto;
    top: 57%;
    left: 6%;
    font-size: 14px !important;
}
.breadbutter-content-gate-text-2 {
  position: absolute;
  width: 24.5%;
  height: auto;
  top: 106%;
  left: 5%;
}

.breadbutter-content-gate-text-3 {
  position: absolute;
  width: 210px;
  height: 78px;
  top: 106%;
  right: 3%;
}
h2.bb-content-gate-label {
  font-weight: bold;
  font-size: 20px;
}
.bb-content-gate-preview-bottom-row {
  display: flex;
}
.breadbutter-gating-content-gating-preview-trigger-options {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.bb-content-gate-preview-additional-options,
.bb-content-gate-preview-display-options {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bb-content-gate-preview-display-options th.row {
  display: none;
}
.bb-content-gate-preview-additional-options .breadbutter-reverse label {
  position: absolute;
  left: calc(9%);
  top: 41%;
  transform: translate(0, -52%);
}
.bb-instant-lead-capture-image{    max-width: 100%; margin-left: auto; margin-right: auto;
    height: auto;
    margin-bottom: 20px;
    display: block;}
.breadbutter-content-gate-classic p {
  font-weight: 600;
  font-size: 14px;
}
.breadbutter-content-gate-classic {
  display: flex;
  flex-direction: row;
  gap: 10px;
  position: relative;
  padding: 0;
}
.breadbutter-wrap .bb-module-config-colors .fixed-row {
  width: 90px;
}
.breadbutter-content-gate-classic-bubble-1 {
  margin: 0 auto;
}
.breadbutter-content-gate-classic-bubble-2 {
  margin: 0 auto;
}
.breadbutter-content-gate-classic-wrapper-1 {
  max-width: 45%;
  width: 100%;
}
.breadbutter-content-gate-classic-wrapper-2 {
  max-width: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
.breadbutter-content-gate-classic-wrapper-3 {
  max-width: 45%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.breadbutter-content-gate-classic-wrapper-1,
.breadbutter-content-gate-classic-wrapper-2,
.breadbutter-content-gate-classic-wrapper-3 {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 auto 50px;
}
.breadbutter-images-disclaimer{font-size: 12px;
    font-style: italic;
    line-height: 3.25;
    letter-spacing: normal;
    text-align: center;
    color: #000;
    position: absolute;
    bottom: 0;
    width: 100%;}
.breadbutter-content-gate-classic-wrapper-1 img {
  margin: 20px 0px 10px;
}
.breadbutter-content-gate-classic-wrapper-2 img {
  margin: 20px 0px 0px;
  position: absolute;
    z-index: 10;
    top: 25%;
}
.breadbutter-content-gate-classic-wrapper-3 img{
  margin: 20px 0px 0px;
}
.breadbutter-content-gate-classic-img-2,
.breadbutter-content-gate-classic-img-1 {
  max-width: 100%;
  border-radius: 10px !important;
  
  height: auto;
}
.breadbutter-gating-content-gating-with-image,
.breadbutter-opt-in-with-image{
  display: flex;
  align-items: center;
  gap: 10px;
}

.breadbutter-tab .breadbutter-tab-header > span,
.breadbutter-section-top {
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #1d2327;
}
.bb-classic-bubble span{background: #50aff5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 5px 10px;}
.bb-classic-bubble {
    /*background: url(./BB_CONTENT_CLASSIC_BUBBLE.png) no-repeat;*/
    background-position: center bottom;
    background-size: 24px;
    font-size: 12px;
    color: #fff;
    line-height: 1.88;
    font-weight: bold;
    width: auto;
    
    display: flex;
    justify-content: center;
    padding-top: 28px;
    padding-bottom: 16px;
}
.breadbutter-content-gate-classic-text-1 {
  position: absolute;
  width: 180px;
  height: auto;
  top: 16%;
  right: 42%;
}
.breadbutter-content-gate-classic-text-2 {
     position: absolute;
    width: 203px;
    height: auto;
    top: 89%;
    left: 20%;
}
.breadbutter-content-gate-classic-text-3 {
    position: absolute;
    width: 140px;
    height: auto;
    top: 80%;
    right: -74%;
}
.breadbutter-content-gate-classic-arrow-1 {
    position: absolute;
    height: auto;
    top: 67%;
    left: 25%;
    width: 6%;
}
.breadbutter-content-gate-classic-arrow-2 {
  position: absolute;

  height: auto;
  top: 6%;
  right: 70%;
  width: 6%;
}
.breadbutter-content-gate-classic-arrow-3 {
  position: absolute;
    height: auto;
    top: 32%;
    right: -30%;
    width: 41%;
}
.breadbutter-gating-content-gating-image-group,
.breadbutter-opt-in-image-group {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.breadbutter-content-gate-preview-text {
  position: absolute;
}
.breadbutter-content-gate-preview-text-1 {
  bottom: -41%;
    left: 43%;
    font-size: 14px !important;
    width: 150px;
}

.breadbutter-content-gate-preview p {
  font-weight: 600;
}
.breadbutter-content-gate-preview-text-2 {
      top: 122%;
    left: 83px;
    font-size: 14px !important;
}
.breadbutter-content-gate-preview-text-3 {
  top: 120%;
  left: 34%;
}
.breadbutter-content-gate-preview-text-4 {
  top: 103%;
  left: 71%;
}
.breadbutter-content-gate-preview-section-1,.breadbutter-content-gate-preview-section-2{
  position: relative;
}

.breadbutter-content-gate-preview-arrow_1 {
    position: absolute;
    top: 85%;
    left: 79%;
    transform: translate(-50%, -50%);
    z-index: 10;
    height: 82%;
}
.breadbutter-content-gate-preview-arrow_2 {
  position: absolute;
    top: 90%;
    right: 48%;
    transform: translate(-50%, -50%);
    z-index: 10;
    height: 82%;
}
.breadbutter-content-gate-preview-img {
  position: relative;
  max-width: 100%;
  height: auto;
  box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.2);
  border-radius: 10px !important;
}
.breadbutter-content-gate-preview {
  margin: 75px 0px 200px;
  position: relative;
  display: flex;
  gap:40px;
}

.content.preview-content > table:nth-child(2) > tbody > tr:first-of-type {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.bb-selection-group {
  display: flex;
  /*flex-direction: column;*/
  position: relative;
}
.bb-selection-options {
  display: flex;
  gap: 5px;
  justify-content: end;
  position: absolute;
  bottom: -18px;
  width: 100%;
}
.breadbutter-gating-content-gating-with-image .bb-selection-options{justify-content: start;}
.bb-radio-group {
  display: flex;
  align-items: end;
}
#content-gating-classic-holder,
#opt-in-holder {
  display: flex;
  gap: 40px;
  align-items: center;
}
.breadbutter-icon {
  background-image: url(./breadbutter.svg);
  height: 70px;
  width: 70px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.breadbutter-icon.inline-icon {
  display: inline-block;
  position: relative;
  top: 2px;
  height: 35px;
  width: 35px;
  margin-right: 2px;
}

.breadbutter-icon.inline-icon + p {
  display: inline-block;
  position: relative;
  margin: 0;
}

.breadbutter-wrap .top-row {
  display: flex;
}
.bb-columns-wrap table tbody tr {
  display: flex;
  flex-direction: column;
}
.content.preview-content .bb-columns-wrap .form-table th {
  width: 100%;
}
.breadbutter-header {
  flex: 1;
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #1d2327;
  margin: 0px 0px 20px;
}
.breadbutter-first-header {
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #1d2327;
  margin: 0 15px;

  line-height: 70px;
}

.breadbutter-wrap .form-table {
  margin-top: 10px;
  margin-bottom: 10px;
}
.select2-container .select2-selection--multiple {
  min-height: 120px !important;
  width: 100% !important;
}
.breadbutter-wrap .form-table th,
.breadbutter-wrap th,
.breadbutter-reverse td {
  vertical-align: middle;
  text-align: left;
  padding: 12px 0px;
  /*width: 280px;*/
  line-height: 16px;
  font-size: 16px;
  font-weight: 400;
  height: 30px;
}
/*table.form-table+input+input+p.submit, table.form-table+input+p.submit, table.form-table+p.submit{text-align: center;}*/
.breadbutter-wrap .content {
  margin: 0px 0px 50px 0px;
}

.bb-gating-config-text table.form-table > tbody,
.bb-preview-header-subheader table.form-table > tbody {
  display: flex;
  gap: 10px; /* optional spacing between columns */
  /*flex-wrap: wrap;*/
}

.bb-module-config-colors table.form-table > tbody {
  display: flex;
  gap: 20%;
  flex-wrap: wrap;
}

.bb-gating-config-text table.form-table > tbody > tr,
.bb-preview-header-subheader table.form-table > tbody > tr {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.bb-module-config-colors table.form-table > tbody > tr {
  display: flex;
  flex-direction: column-reverse;
  box-sizing: border-box;
  width: 20%;
  min-width: 140px;
}
.bb-module-config-colors table.form-table > tbody > tr > th {
  text-align: center;
}
.bb-module-config-colors table.form-table > tbody {
  flex-wrap: wrap;
}
.bb-module-config-colors table.form-table > tbody > tr > th,
.bb-module-config-colors table.form-table > tbody > tr > td {
  display: block;
  padding-left: 0;
}
.breadbutter-gating-content-gating-image-selection,
.breadbutter-opt-in-image-selection {
  margin-top: 20px;
}
.breadbutter-opt-in-image-selection {
  margin-bottom: 20px;
}
.bb-gating-config-text table.form-table > tbody > tr > th,
.bb-preview-header-subheader table.form-table > tbody > tr > th {
  display: block;
  width: 30%;
  min-width: 155px;
}
.bb-gating-config-text table.form-table > tbody > tr > td,
.bb-preview-header-subheader table.form-table > tbody > tr > td {
  display: block;
  width: 70%;
}


.breadbutter-wrap .form-table input.bb-error,
.breadbutter-wrap .form-table select.bb-error {
  border-color: red !important;
}

.breadbutter-wrap .form-table th input[type="checkbox"] {
  border-radius: 10px;
  border: solid 1px #707070;
  background-color: #fff;
  position: relative;
}

.breadbutter-wrap .form-table td input[type="checkbox"]:checked::before {
  height: 24px;
  width: 24px;
  margin-left: -5px;
  margin-top: -4px;
}

.breadbutter-wrap td .target-copy {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #1d2327;
}
input[type="radio"]:checked::before {
  content: "";
  border-radius: 100%;
  width: 0.55rem;
  height: 0.50rem;
  margin: 0.1879rem;
  background-color: #3582c4;
  line-height: 1.14285714;
}
.breadbutter-wrap .form-table td,
.breadbutter-wrap td {
  padding: 5px 0px;
  line-height: normal;
  margin: 0;
}
.breadbutter-wrap .form-table td .fixed-row{min-height: 32px;}

.breadbutter-tab .submit input {
  padding: 11px 26px;
  border-radius: 4px;
  background-color: #50aff5;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
  border: none;
}
#theme button.button {
    height: 40px;
    padding: 11px 26px;
    border-radius: 4px;
    border-color: #50aff5;
    background-color: #fff;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    color: #50aff5;
    border: 1px solid;
}
#theme button.button.button-primary {
    width: 85px;
    height: 40px;
    padding: 11px 26px;
    border-radius: 4px;
    background-color: #50aff5;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
    border: none;
}

.breadbutter-wrap .nav-tab {
  min-width: 120px;
  text-align: center;
}

.breadbutter-wrap .flex-1 {
  flex: 1;
}

.breadbutter-button-theme-choices {
  margin-bottom: 0;
  padding: 1rem 0;
}

.breadbutter-button-theme-choices .flex-col {
  height: 280px;
  width: 327px;
  background-color: #eeeeee;
}

.breadbutter-button-theme-choices .flex-col .flex-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.breadbutter-button-theme-choices input[type="radio"] {
  width: 20px;
  height: 20px;
  border: solid 1px #707070;
  background-color: #fff;
  margin: 1rem;
}

.breadbutter-button-theme-choices input[type="radio"]:checked::before {
  width: 18px;
  height: 18px;
  margin: 1px;
  background-color: #227aed;
}

.bb-spacer {
  height: 25px;
}

.bb-break {
  display: block;
}


.toggleWrapper {
  /*margin: auto;*/
  /*padding: 20px;*/
  /*width: 55px;*/
  /*border: 1px solid lightgray;*/
  /*margin-top: 20px;*/
  /*border-radius: 5px;*/
  /*background: white;*/
  margin: 0 9px;
}

.toggleWrapper input.mobileToggle {
  opacity: 0;
  position: absolute;
}
.toggleWrapper input.mobileToggle + label {
  position: relative;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: 0.4s ease;
  height: 22px;
  width: 50px;
  border: 1px solid #e4e4e4;
  border-radius: 60px;
}
.toggleWrapper input.mobileToggle + label:before {
  content: "";
  position: absolute;
  display: block;
  background: #1d2327;
  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
  height: 22px;
  width: 51px;
  top: 0;
  left: 0;
  border-radius: 30px;
}
.toggleWrapper input.mobileToggle + label:after {
  content: "";
  position: absolute;
  display: block;
  /*box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);*/
  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
  /*background: whitesmoke;*/
  background: white;
  height: 20px;
  width: 20px;
  top: 1px;
  left: 1px;
  border-radius: 60px;
}
.toggleWrapper input.mobileToggle:checked + label:before {
  background: #8aed5d;
  transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
}
.toggleWrapper input.mobileToggle:checked + label:after {
  left: 29px;
}

.breadbutter-tab .breadbutter-inline-box {
  margin: 50px 50px 50px 90px;
}

.breadbutter-inline-box {
  display: inline-block;
  margin-right: 10px;
  width: 388px;
  height: 165px;
  vertical-align: top;
  color: #1d2327;
  padding: 0;
}
.breadbutter-inline-box.breadbutter-tileset-side,
.breadbutter-inline-box.breadbutter-tileset {
  margin-top: 27px;
  padding-top: 12px;
  border-width: 0;
}

.breadbutter-inline-box.breadbutter-tileset-side {
  border-width: 0 1px 0 0;
}

.breadbutter-inline-box.breadbutter-tileset .breadbutter-tab {
  border-style: none;
}

.breadbutter-inline-box.js-breadbutter-tab-conversion,
.breadbutter-inline-box.js-breadbutter-tab-page-view-tracking {
  height: 190px;
}

.breadbutter-inline-box.agency-row {
  height: 230px;
}

.breadbutter-inline-box .flex-row {
  height: 100%;
  margin: 0;
}

.bb-dashboard-disabled .enable-text {
  color: #1d2327;
}

.bb-dashboard-enabled .enable-text,
.bb-dashboard-enabled-1 .enable-text,
.bb-dashboard-enabled-2 .enable-text,
.bb-dashboard-enabled-3 .enable-text {
  color: #1bb93f;
}

.bb-dashboard-top-content {
  margin: -50px -30px 0;
  padding: 48px 30px 30px;
  border-radius: 8px;
  background-color: var(--taupe-bg);
}

.bb-dashboard-top-content .bb-dashboard-option-conversion {
  width: 100%;
}

.bb-dashboard-tile-title {
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  padding: 0 0 4px;
  /*height: 17px;*/
}

.bb-dashboard-tile-content {
  font-size: 11px;
  text-align: left;
  margin: 6px 12px 6px 0;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.breadbutter-inline-box-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.bb-hidden-wrapper {
  display: none !important;
  height:0 !important
}
.bb-hidden-container, .bb-hidden {
  display: none !important;
}

.no-app-label {
  display: none;
}
.breadbutter-inline-box-container
  .bb-dashboard-tile-show-box
  .integration-logo {
  fill: #000;
}

.breadbutter-inline-box-container
  .breadbutter-inline-box-dynamic:not(
    .bb-dashboard-enabled,
    .bb-dashboard-enabled-1,
    .bb-dashboard-enabled-2,
    .bb-dashboard-enabled-3
  )
  .bb-dynamic-on {
  display: none;
}

.breadbutter-inline-box-container
  .breadbutter-inline-box-dynamic.bb-dashboard-enabled
  .bb-dynamic-off {
  display: none;
}
.breadbutter-inline-box-container
  .breadbutter-inline-box-dynamic.bb-dashboard-enabled-1
  .bb-dynamic-off {
  display: none;
}
.breadbutter-inline-box-container
  .breadbutter-inline-box-dynamic.bb-dashboard-enabled-2
  .bb-dynamic-off {
  display: none;
}
.breadbutter-inline-box-container
  .breadbutter-inline-box-dynamic.bb-dashboard-enabled-3
  .bb-dynamic-off {
  display: none;
}

.bb-dashboard-tile-content .bb-flex-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex: 1;
}

.bb-dashboard-tile-content .bb-flex-box .bb-spacer {
  width: 10px;
}
input[type="submit"][disabled="disabled"][value="SAVE"] {
  background: white !important;
}
.bb-ai-dashboard-section.dashboard-section,
.bb-dashboard-section.bb-gate-content-section.dashboard-section,
.breadbutter-tileset.dashboard-section,
.bb-dashboard-top-content.dashboard-section {
  display: none;
}
.setup_wizard_wrapper th{display: none;}
#partner-code {
  margin: 0 auto;
}
#partner-code .bb-flex-box {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: left;
  align-items: baseline;
}
.bb-dashboard-tile-content .bb-dashboard-tile-content-fill-button,
.bb-dashboard-tile-content-fill-button.get-your-code {
  display: flex;
  flex: 1;
  height: 40px;
  border-radius: 4px;
  background-color: #fac22d;
  text-decoration: none;
  justify-content: center;
  align-items: center;
}
.bb-dashboard-tile-content-fill-button.get-your-code {
  width: 200px;
  flex: none;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  text-transform: uppercase;
  color: #000;
}
.breadbutter-inline-box-container
  .bb-dashboard-tile-content
  .bb-dashboard-tile-content-fill-button {
  width: 170px;
  height: 40px;
  padding: 0;
  cursor: pointer;
}

.bb-dashboard-tile-content .bb-dashboard-tile-content-fill-button span {
  flex: 1;
  line-height: 15px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: #202833;
  text-decoration: none;
  text-transform: uppercase;
}

.bb-dashboard-tile-content > div {
  margin-bottom: 6px;
}

.breadbutter-tileset-side .bb-dashboard-tile-content {
  margin-top: 16px;
}

.breadbutter-tileset-side .bb-dashboard-tile-content > div {
  margin-bottom: 16px;
}

.breadbutter-inline-box .flex-row.bb-dashboard-tile-button {
  font-size: 12px;
  color: #707070;
  justify-content: center;
  padding: 0 0 18px;
  font-weight: bold;
  height: 24px;
}

.bb-dashboard-tile-button .toggleOFF {
  text-align: right;
}

.bb-dashboard-tile-button .toggleON {
  text-align: left;
}

.flex-col.bb-dashboard-tile-content-box {
  height: 100%;
  padding: 0px 11px;
  align-items: stretch;
  flex: 1;
}
.breadbutter-dashboard-tab .flex-row-parent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 1090px;
  width: 100%;
  margin: 0 auto;
}
.breadbutter-dashboard-tab .flex-row-parent > .flex-row:first-child {
  width: 40%;
  justify-content: start;
  align-items: start;
}
.breadbutter-dashboard-tab .flex-row-parent > .flex-row:first-child img {
  margin-right: 10px;
  position: absolute;
  left: -20px;
}

.breadbutter-dashboard-tab
  .flex-row-parent
  > .flex-row.welcome-flex-row:first-child {
  width: 100%;
  max-width: 700px;
}
.breadbutter-dashboard-tab
  .flex-row-parent
  > .flex-row.welcome-flex-row:first-child
  .bb-dashboard-title {
  padding-left: 30px;
  position: relative;
}
.breadbutter-dashboard-tab
  .flex-row-parent
  > .flex-row.welcome-flex-row:first-child
  img {
  position: absolute;
  left: 0;
}
#breadbutter-webapp-container[data-view="apps"]
  + div.breadbutter-welcome
  > .bb-dashboard-top-content {
  margin: 0 -30px 0;
}
.green-text {
  cursor: pointer;
  color: #20c60a;
  text-decoration: none;
}
.bb-recent-conversions {
  margin-top: 40px;
}
.bb-task-buttons{display: flex; gap: 20px;}
.bb-ai-dashboard-section .task-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px 0;
  border: solid 1px black;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  color: black;
  text-transform: uppercase;
  text-decoration: none;
  height: 36px;
  width: 150px;
  margin-top: 20px;
}
.bb-ai-dashboard-section .task-button.bb-add-team-member{display: none;}
.bb-ai-dashboard-section {
  display: flex;
  justify-content: left;
  width: 100%;
  padding-top: 20px;
  flex-direction: column;
  width: 100%;
  max-width: 1090px;
  margin: 0 auto;
}
.bb-gating-content-sections {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: space-between;
  width: 100%;
}
.bb-gating-content-section-title {
  font-size: 20px;
  font-weight: 500;
  color: #1d2327;
  padding: 20px 0 10px;
}
.bb-ai-dashboard-section .flex-row .bb-dashboard-subtitle {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.25;
  text-align: left;
  color: #1d2327;
}
.bb-temp-panel {
  box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.16);
  border-radius: 20px;
  margin: 20px 0;
  max-width: 100%;
}
.bb-ai-dashboard-section label {
  font-size: 14px;
  text-align: left;
  color: #4e5051;
}
.bb-ai-dashboard-section .flex-row img.ai {
  padding-left: 10px;
  padding-right: 10px;
}
.bb-ai-dashboard-section .flex-row {
  flex-direction: row;
  display: flex;
}

.bb-dashboard-title {
  font-size: 26px;
  font-weight: bold;
  line-height: 1.2;
  color: #1d2327;
  position: relative;
}
.bb-gating-content-section {
  border-radius: 12px;
  background-color: #fbf8f2;
  position: relative;
  width: 33.33%;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  box-sizing: border-box;
}
.bb-gating-content-section img {
  max-width: 100%;
  height: auto;
  box-shadow: 0px 10px 18px 0 rgba(0, 0, 0, 0.1);
}

.bb-dashboard-section .bb-dashboard-subtitle {
  color: #1d2327;
  margin-top: 20px;
  font-size: 17px;
  font-weight: 500;
}
.breadbutter-dashboard-tab .flex-row {
  justify-content: center;
  flex-wrap: wrap;
}
.breadbutter-dashboard-tab .flex-col.bb-dashboard-tile-content-box {
  flex-direction: row;
  align-items: center;
  padding: 0;
}

.breadbutter-tileset-side .flex-col.bb-dashboard-tile-content-box,
.flex-col.bb-dashboard-tile-content-box.service-content-box {
  height: auto;
}

.bb-dashboard-enabled .bb-dashboard-tile-show-box {
  background: url(./bb_wp_green_check.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.bb-dashboard-not-configured .bb-dashboard-tile-show-box {
  background: url(./bb_wp_orange_warning.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.bb-dashboard-disabled .bb-dashboard-tile-show-box {
  background: url(./bb_wp_black_cross.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.bb-dashboard-submit-flex-box {
  display: flex;
}

.bb-dashboard-submit-flex-box .bb-flex-box {
  font-size: 13px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border: none;
  padding: 0 0 1.5em;
  margin: 20px 0 5px 5px;
}

.bb-dashboard-submit-flex-box .bb-flex-box .bb-hash-button {
  height: 40px;
  padding: 11px 26px;
  border-radius: 4px;
  background-color: #50aff5;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
  border: none;
  box-sizing: border-box;
}

.bb-dashboard-submit-flex-box {
  display: flex;
}

.bb-dashboard-submit-flex-box {
  display: flex;
}

.bb-dashboard-not-set {
  display: none;
}
.bb-dashboard-not-set .bb-dashboard-tile-show-box {
  background: #a3a3a3;
}

.flex-col.bb-dashboard-tile-show-box {
  margin: 3px;
  width: 97px;
  height: 143px;
  justify-content: center;
  margin-left: 6px;
}

.flex-col.bb-dashboard-tile-show-box.service-icon-box {
  justify-content: flex-start;
  height: 120px;
  padding-top: 10px;
}

.bb-dashboard-tile-title.bb-inline-block {
  line-height: 41px;
  display: flex;
}

.bb-dashboard-tile-title.bb-inline-block > div {
  margin-right: 5px;
  display: inline-block;
}

.bb-dashboard-tile-title.bb-inline-block > span {
  margin-left: 5px;
  display: inline-block;
}

.bb-dashboard-tile-title.bb-inline-block .bb-dashboard-tile-show-box {
  display: inline-block;
  width: 35px;
  height: 35px;
}

.bb-switch {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 25px;
  cursor: pointer;
  margin-right: 10px;
}
.bb-switch input[type="radio"], .bb-switch input[type="checkbox"] {
  display: none;
}
.bb-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #777;
  transition: 0.4s;
  border-radius: 34px;
}
.bb-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px; 
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
input[type="radio"]:checked + .bb-slider {
  background-color: #4cd964;
}
input[type="radio"]:checked + .bb-slider:before {
  transform: translateX(30px);
}

input[type="checkbox"]:checked + .bb-slider {
  background-color: #4cd964;
}
input[type="checkbox"]:checked + .bb-slider:before {
  transform: translateX(30px);
}

.bb-on-label {
  position: absolute;
  left: 8px;
  top: 6px;
  font-size: 10px;
  color: white;
  opacity: 0;
  transition: 0.3s;
}
input[type="radio"]:checked + .bb-slider .bb-on-label {
  opacity: 1;
}
input[type="checkbox"]:checked + .bb-slider .bb-on-label {
  opacity: 1;
}

.flex-col.bb-dashboard-tile-show-box svg {
  width: 40px;
  fill: white;
}

.breadbutter-tab.bb-dashboard-providers {
  padding: 20px 30px 20px 20px;
  vertical-align: top;
  color: #1d2327;
}

.breadbutter-tab.bb-dashboard-providers .breadbutter-provider-header {
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #1d2327;
  padding-left: 10px;
}

.breadbutter-create-account-prompt {
  margin: -30px -20px;
  padding: 30px 20px;
  border-left: solid 4px #d63638;
}

.breadbutter-message {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.breadbutter-ui-sample {
  margin: 30px 0;
  padding: 15px;
  background-color: #f0f0f1;
}

.breadbutter-ui-sample .breadbutter-ui {
  box-shadow: none !important;
}

#breadbutter-ui-sample-holder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.breadbutter-inline-box-title {
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #1d2327;
}
.bb-dashboard-link {
  box-sizing: content-box !important;
  width: 200px;
  height: auto;
  padding: 20px 50px 40px;
  /* margin: auto; */
  margin-left: 7px;
  margin-right: 6px;
}

.bb-dashboard-link .breadbutter-inline-box-content {
  margin-top: 28px;
  width: 170px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  background-color: #fac22d;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: #202833;
  text-decoration: none;
  text-transform: uppercase;
}
.breadbutter-side-box-container
  .bb-dashboard-option-conversion
  .flex-col.bb-dashboard-tile-content-box {
  padding: 20px 50px;
  height: auto;
}

.breadbutter-side-box-container .bb-dashboard-link {
  margin-left: 7px;
  margin-right: 6px;
}

.bb-dashboard-button-only,
.bb-dashboard-option-conversion {
  box-sizing: border-box !important;
  width: 302px;
  padding: 0;
  border: none;
  background: none;
}

.bb-dashboard-button-only .breadbutter-inline-box-content {
  margin-top: 0px;
  width: 100%;
}

.bb-dashboard-option-conversion
  .breadbutter-tab.breadbutter-inline-box.js-breadbutter-tab-conversion,
.bb-dashboard-option-conversion
  .breadbutter-tab.breadbutter-inline-box.js-breadbutter-tab-page-view-tracking,
.bb-dashboard-option-conversion
  .breadbutter-tab.breadbutter-inline-box.js-breadbutter-web-forms,
.bb-dashboard-option-conversion
  .breadbutter-tab.breadbutter-inline-box.js-breadbutter-ai-campaigns {
  margin: 0px;
  width: 302px;
  height: auto;
}

.breadbutter-dashboard-tab.bb-dashboard-option-conversion
  .breadbutter-tab.breadbutter-inline-box.js-breadbutter-tab-conversion,
.breadbutter-dashboard-tab.bb-dashboard-option-conversion
  .breadbutter-tab.breadbutter-inline-box.js-breadbutter-tab-page-view-tracking,
.breadbutter-dashboard-tab.bb-dashboard-option-conversion
  .breadbutter-tab.breadbutter-inline-box.js-breadbutter-web-forms,
.breadbutter-dashboard-tab.bb-dashboard-option-conversion
  .breadbutter-tab.breadbutter-inline-box.js-breadbutter-ai-campaigns {
  width: 50%;
  padding-right: 24px;
  margin-bottom: 0;
  border-style: none;
  background-color: transparent;
  box-sizing: border-box;
  justify-items: flex-end;
}

.breadbutter-dashboard-tab .breadbutter-inline-box-title {
  margin-right: 8px;
  font-weight: bold;
}

.breadbutter-dashboard-tab.bb-dashboard-option-conversion
  .bb-dashboard-tile-content-box
  .bb-status-line {
  margin-left: 8px;
  font-size: 14px;
  color: var(--hi-vis-green);
  min-width: 60px;
}

.bb-green-circle-check {
  width: 21px;
  height: 21px;
}

.bb-alert-icon.small,
.bb-green-circle-check.small {
  width: 21px;
}

.breadbutter-dashboard-tab.bb-dashboard-option-conversion
  .bb-dashboard-not-configured
  .bb-status-line,
.breadbutter-dashboard-tab.bb-dashboard-option-conversion
  .bb-dashboard-disabled
  .bb-status-line {
  color: #000000;
}
.bb-dashboard-option-conversion .bb-dashboard-tile-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.bb-dashboard-option-conversion
  .bb-dashboard-tile-content
  .bb-dashboard-tile-show-box {
  width: 35px;
  height: 35px;
  margin: 0;
  margin-right: 5px;
}

.bb-dashboard-option-conversion .bb-dashboard-tile-content .bb-status-line {
  font-size: 9px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #1d2327;
  margin-bottom: 0;
}

.bb-dashboard-option-conversion
  .breadbutter-tab.breadbutter-inline-box.js-breadbutter-tab-conversion {
  margin-bottom: 21px;
}

.breadbutter-inline-box-description {
  margin: 8px -20px;
  font-size: 16px;
  text-align: center;
  line-height: 1.5;
}

.secret-update-button {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
  padding: 0px 8px;
  font-weight: bold;
  line-height: 12px;
  background-color: #50aff5;
  border: none;
  border-radius: 4px;
  width: 20em !important;
  min-height: 30px;
  line-height: 30px;
  box-sizing: content-box;
  cursor: pointer;
}

.breadbutter-full-content {
  display: flex;
  
}

.breadbutter-wrap.wrap{margin: 0;}
.breadbutter-wrap:has(div.notice) .breadbutter-full-content {
  padding-top: 0px;
}

.breadbutter-full-content .breadbutter-nav-content {
  width: 280px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 32px 24px;
    flex-shrink: 0;
    overflow-y: auto;
    padding-bottom: 100px;
}

.breadbutter-full-content .breadbutter-identity p{background: transparent}
.breadbutter-full-content .breadbutter-identity {
  position: relative;
  top: -11px;
  margin-left: 38px;
}

.breadbutter-full-content .breadbutter-identity img {
  width: 125px;
}

.breadbutter-full-content p {
  margin-top: 0;
  margin-bottom: 12px;
}

.breadbutter-full-content .breadbutter-nav-content p {
  font-size: 22px;
}

.breadbutter-nav-content hr {
  width: 75%;
  margin: 0 auto;
}

.breadbutter-full-content .breadbutter-primary-links > a {
  display: none;
}

.breadbutter-full-content .breadbutter-primary-links li a {
  display: flex;
  align-items: center;
  margin: 0 20px 8px;
  padding: 4px 18px;
  border: solid 1px #f1f5fb;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  background-color: transparent;
  color: black;
  text-decoration: none;
}

.breadbutter-full-content .breadbutter-primary-links a:hover {
  border-color: black;
}

.breadbutter-full-content .breadbutter-primary-links a.nav-tab-active {
  background-color: #22f3a7;
  border-color: #22f3a7;
}

.breadbutter-full-content .breadbutter-tools-links {
  margin-top: 28px;
  background-color: #e4ebf7;
}
.breadbutter-full-content li.tools-header {
  margin-bottom: 1px;
}
.breadbutter-full-content .breadbutter-tools-links.submenu {
  margin-top: 0px;
  padding-top: 0px;
  max-height: 0;
  overflow: hidden;

  transition: max-height 0.3s ease, padding-top 0.6s ease;
}
.breadbutter-full-content .breadbutter-tools-links.submenu.show {
  max-height: 500px;
  padding-top: 20px;
}
.breadbutter-full-content .breadbutter-tools-links > li.tools-header > span {
  margin: 0 0 9px;
  padding: 10px 0 10px 0px;
  background-color: #d7e2f3;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.breadbutter-full-content .breadbutter-tools-links li.tools-header > span {
  display: block;
  padding-left: 38px;
  margin-bottom: 0;
  cursor: pointer;
  position: relative;
}

.breadbutter-full-content
  .breadbutter-tools-links
  li.tools-header
  > span.active::after {
  content: "";
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20fill='%23666'%20transform='scale(1,-1)%20translate(0,-512)'%20d='M344%20195.4c8-9%2016-9%2025%200%209%207%209%2015%200%2024l-101%2098c-7%208-15%208-24%200l-101-98c-9-9-9-17%200-24%209-9%2017-9%2026%200l87%2079%2088-79'/%3E%3C/svg%3E")
    no-repeat center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
  position: absolute;
  top: 8px;
  right: 16px;
}

.breadbutter-full-content
  .breadbutter-tools-links
  li.tools-header
  > span::after {
  content: "";
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20fill='%23666'%20d='M344%20195.4c8-9%2016-9%2025%200%209%207%209%2015%200%2024l-101%2098c-7%208-15%208-24%200l-101-98c-9-9-9-17%200-24%209-9%2017-9%2026%200l87%2079%2088-79'/%3E%3C/svg%3E")
    no-repeat center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
  position: absolute;
  top: 8px;
  right: 16px;
}
.breadbutter-full-content .breadbutter-tools-links li.customfields-item {
  padding-bottom: 4px;
}

.breadbutter-full-content .breadbutter-tools-links a,
.breadbutter-full-content .breadbutter-advanced-links a {
  display: flex;
  align-items: flex-start;
  margin: 0 20px 11px;
  padding: 8px 10px;
  height: 16px;
  border: solid 1px #e4ebf7;
  border-radius: 4px;
  line-height: 1.1;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  color: black;
}

.breadbutter-full-content .breadbutter-advanced-links a {
  border-color: #f1f5fb;
}

/*.CodeMirror-wrap pre {*/
/*    margin-left: 31px !important;*/
/*}*/


.breadbutter-full-content .breadbutter-advanced-links a#advance-tab,
.breadbutter-full-content .breadbutter-advanced-links a#theme-tab{
  height: 26px;
}

.breadbutter-full-content .breadbutter-tools-links a:hover {
  border-color: black;
}

.breadbutter-full-content .breadbutter-advanced-links a:hover {
  border-color: black;
}

.breadbutter-full-content .breadbutter-tools-links a.nav-tab-active,
.breadbutter-full-content .breadbutter-advanced-links a.nav-tab-active {
  background-color: #22f3a7;
  border-color: #22f3a7;
}

.breadbutter-full-content .breadbutter-tools-links a > span,
.breadbutter-full-content .breadbutter-advanced-links a > span {
  display: block;
}

.breadbutter-full-content .breadbutter-advanced-links li span.hint {
  display: block;
  font-weight: normal;
  font-style: italic;
}

.breadbutter-full-content .breadbutter-primary-links img,
.breadbutter-full-content .breadbutter-tools-links img,
.breadbutter-full-content .breadbutter-advanced-links img {
  position: relative;
  width: 16px;
  margin-right: 10px;
}

.breadbutter-full-content .breadbutter-tools-links img.content-gate {
  top: -4px;
  width: 14px;
} 
.breadbutter-full-content .breadbutter-advanced-links img{
  width: 14px;
}

.breadbutter-full-content .breadbutter-tools-links img.content-preview {
  top: 3px;
}

.breadbutter-full-content .breadbutter-tools-links img.opt-in {
  top: -1px;
}

.breadbutter-full-content .breadbutter-tools-links img.contact {
  top: -3px;
}

.breadbutter-full-content .breadbutter-tools-links img.subscriber-profile {
  top: -2px;
}

.breadbutter-full-content .breadbutter-primary-links figure,
.breadbutter-full-content .breadbutter-tools-links figure,
.breadbutter-full-content .breadbutter-advanced-links figure {
  display: flex;
  align-items: center;
  width: 16px;
  margin: 0 10px 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 10px;
}

.breadbutter-full-content .breadbutter-additional-resources,
.breadbutter-full-content .breadbutter-need-help {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.breadbutter-full-content .breadbutter-additional-resources {
  margin-top: 40px;
  margin-bottom: 24px;
}

.breadbutter-full-content .breadbutter-need-help {
  margin-top: 20px;
}

.breadbutter-full-content .breadbutter-additional-resources h3,
.breadbutter-full-content .breadbutter-need-help h3 {
  font-size: 12px;
  font-weight: bold;
  margin: 0 0 4px;
}

.breadbutter-full-content .breadbutter-need-help h3 {
  align-self: flex-start;
  margin-left: 48px;
}

.breadbutter-full-content .breadbutter-additional-resources a,
.breadbutter-full-content .breadbutter-need-help a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 24px;
  margin-top: 8px;
  border-radius: 4px;
  border: 0;
  background-color: #50aff5;
  font-size: 10px;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
}

.breadbutter-full-content .breadbutter-additional-resources a:hover,
.breadbutter-full-content .breadbutter-need-help a:hover {
  text-decoration: underline;
}

.breadbutter-full-content .breadbutter-additional-resources a.how-to {
  background-color: #1bb93f;
}

.breadbutter-full-content .breadbutter-additional-resources a.articles {
  background-color: #fd5b46;
}

#contactus-tab img {
  margin-top: 4px;
}
.breadbutter-inline-box-container-wrap{
  background-color: white;
  border-radius: 16px;
  margin-top: 30px
}
.breadbutter-full-content .breadbutter-main-content {
  flex: 1;
  margin-right: 0px;
  background-color: #f9fafb;
  border-radius: 8px;
  position: relative;
}

.breadbutter-full-content .breadbutter-main-content h1 {
  padding: 0;
}

.breadbutter-full-content .breadbutter-side-content {
  display: none;
  width: 315px;
  padding-top: 9px;
  padding-left: 18px;
}
.breadbutter-full-content .breadbutter-side-content .breadbutter-divider-line {
  padding: 5px 10px;
  height: 25px;
  border-bottom: 1px solid #8223f3;
}

.url-row {
  display: flex;
  width: 30rem;
}

.breadbutter-wrap .select2 .select2-selection__choice {
  margin-bottom: 0;
}
.breadbutter-wrap .breadbutter-section-subtitle {
  margin-top: 14px;
  font-weight: 500;
}
.breadbutter-wrap .breadbutter-button-wizard {
  width: auto;
  text-align: center;
  border: none;
  border-radius: 4px;
  background-color: #fac22d;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: #202833;
  text-decoration: none;
  padding: 12px;
}
.breadbutter-wrap .breadbutter-button-wizard-wrapper {
  text-align: center;
}

.breadbutter-subheader {
  font-weight: 500;
    font-size: 15px;
    font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.4;
    margin-top: 8px;
    color: #4b5563;
}

.breadbutter-subheader.as-breadbutter-subheader {
  font-weight: 400;
  font-size: 15px;
  margin-top: 8px;
  max-width: 600px
}
.top-row.breadbutter-tab-header.top-space{
  margin-top: 40px;
}
.additional-settings{margin-bottom: 40px;}
.breadbutter-advance-settings>table.form-table:nth-child(2){
  margin-bottom: 0;
}

.breadbutter-advance-settings>table.form-table:nth-child(3){
  margin-top: 0;
}


.bb-dashboard-tile-continue-with {
  display: flex;
}
.bb-dashboard-tile-continue-with > table.form-table {
  margin: 0;
}
.bb-dashboard-tile-continue-with > table.form-table tbody tr > * {
  padding-top: 0;
  padding-bottom: 0;
}
.bb-dashboard-tile-continue-with > table.form-table tbody label {
  font-size: 14px;
}
.bb-dashboard-tile-continue-with .submit {
  margin: 0;
  padding: 0;
  margin-right: 20px;
}
.bb-dashboard-tile-continue-with .submit input[name="submit"] {
  width: unset;
  height: unset;
  padding: 10px 23px;
}
.breadbutter-wrap .bb-dashboard-tile-continue-with .form-table th {
  width: 245px;
}
.breadbutter-wrap .bb-loader {
  position: relative;
  width: 75px;
  height: 35.5px;
}

.breadbutter-wrap .bb-loader::after {
  content: "";
  width: 75px;
  height: 35.5px;
  /*animation: spin 2s linear infinite;*/
  background: url(bread_butter_loader.gif);
  display: inline-block;
  position: absolute;
  left: 3px;
  top: 10px;
  background-size: contain;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }


#bb-notification {
  width: 350px;
  height: auto;
  position: fixed;
  top: 100px;
  left: calc(50% - 200px);
  border: 2px solid #ccc;
  background: #f3f3f3;
  padding: 12px;
}
#bb-notification .close-btn{
  position: absolute;
   width: 24px;
  height: 24px;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6 L18 18 M6 18 L18 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  top: 8px;
  right: 8px;
  cursor: pointer;
}

#bb-notification ul {
  list-style: disc;
}

#bb-notification ul li {
  margin-left: 15px;
}

#bb-notification::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 5px;
  background: #1bb93f;
  bottom: 0;
  right: 0;
  animation: down 8s linear infinite;
}
#bb-notification.error::after {
  background: #ff2412;
}

.breadbutter-wrap p.submit {
  padding-top: 10px;
}

.bb-popups-aware-modal-body {
  font-size: 1rem;
  margin-top: 12px;
  text-align: center;
  display: block;
}
.bb-popups-aware-modal-title {
  border-bottom: none;
}
#bb-popups-aware-modal {
  padding-top: 0;
}

@keyframes down {
  0% {
    height: 100%;
  }
  100% {
    height: 0;
  }
}
a.btn-grey:active, a.btn-grey:focus{color: white; outline: none;}
.breadbutter-tab .submit input.btn-grey {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    background-color: var(--btn-grey);
    color: white;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 8px;
}
.breadbutter-wrap .bb-remove-action,
.bb-arrange-action {
  border: unset;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  margin-right: 3px;
}

.breadbutter-wrap table tbody tr:first-child .bb-up-action {
  display: none;
}
.breadbutter-wrap table tbody tr:last-child .bb-down-action {
  display: none;
}

.breadbutter-wrap code {
  background: none; 
}

.breadbutter-wrap > h1 {
  display: flex;
}
.breadbutter-wrap > h1 .breadbutter-icon {
  height: 32px;
  width: 32px;
  margin-left: 8px;
}

h2.bb-setup-is-working {
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 24px;
  margin: 20px 0 0;
  font-weight: 400;
}
h2.bb-setup-is-working:before {
  content: "";
  width: 35px;
  height: 35px;
  background: url(./bb_wp_green_check.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  margin-right: 0.5rem;
}

.breadbutter-wrap #newsletter form .vc-compact-colors {
  padding-top: 5px;
  padding-left: 5px;
  width: 240px;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.16);
  background-color: #fff;
  height: 60px;
}

.breadbutter-wrap #newsletter form .vc-compact-color-item {
  list-style: none;
  width: 15px;
  height: 15px;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  position: relative;
  cursor: pointer;
}
.breadbutter-wrap
  #newsletter
  form
  .vc-compact-color-item.vc-compact-color-item--white {
  box-shadow: inset 0 0 0 1px #ddd;
}

.breadbutter-wrap #newsletter form .event-name {
  color: #fff;
  border-radius: 4px;
  width: 86px;
  height: 20px;
  font-size: 10px;
  line-height: 2;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: bottom;
  text-overflow: ellipsis;
  padding: 0 3px;
}

.breadbutter-wrap
  #newsletter
  form
  .vc-compact-color-item[aria-selected="true"]
  .vc-compact-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 50%;
  opacity: 1;
  background: #fff;
}
.breadbutter-wrap
  #newsletter
  form
  .newsletter-integration
  .newsletter-integration-choices {
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  width: 280px;
  padding: 6px;
}

.breadbutter-wrap #newsletter form .newsletter-event input[type="text"] {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #000;
  padding: 0px 8px;
  line-height: 12px;
  background-color: #f0f0f1;
  border: 1px solid transparent;
  border-radius: 0;
  width: 98%;
}

.breadbutter-wrap #newsletter form .newsletter-event .bb-event-code-holder {
  display: flex;
}

.breadbutter-wrap #newsletter form .newsletter-event h2 {
  margin-top: 1em;
}

.breadbutter-wrap #newsletter form .newsletter-event .label-holder,
.breadbutter-wrap #newsletter form .newsletter-event .input-holder {
  padding-top: 6px;
  padding-bottom: 6px;
}
.breadbutter-wrap #newsletter form .newsletter-event .label-holder label {
  text-align: left;
  line-height: 16px;
  font-size: 16px;
  font-weight: 500;
}

.breadbutter-wrap
  #newsletter
  form
  .newsletter-event
  .bb-event-code-holder
  .left-holder {
  vertical-align: middle;
  width: 280px;
  padding: 6px;
}

.breadbutter-wrap
  #newsletter
  form
  .newsletter-event
  .bb-event-code-holder
  .right-holder {
  vertical-align: middle;
  /*padding: 6px;*/
  padding: 5px 10px;
  line-height: normal;
  margin: 0;
  flex: 1;
}
.breadbutter-wrap #newsletter form .newsletter-event {
  margin-bottom: 50px;
}

.breadbutter-wrap #newsletter form .newsletter-event .clear-settings {
  text-decoration: underline;
  margin: 45px 0 0;
  color: #909090;
  cursor: pointer;
}
.breadbutter-wrap #newsletter form .newsletter-integration {
  display: flex;
}

.breadbutter-wrap
  #newsletter
  form
  .newsletter-integration
  .newsletter-integration-choice {
  flex: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  vertical-align: middle;
  width: 280px;
  padding: 6px;
  max-height: 36px;
  box-sizing: border-box;
}

.breadbutter-wrap
  #newsletter
  form
  .newsletter-integration.lock-integration
  .newsletter-integration-choice {
  cursor: default;
}

.breadbutter-wrap
  #newsletter
  form
  .newsletter-integration
  .newsletter-integration-options {
  flex: 1;
}

.breadbutter-wrap
  #newsletter
  form
  .newsletter-integration
  .newsletter-integration-options
  .newsletter-integration-option {
  display: none;
}

.breadbutter-wrap
  #newsletter
  form
  .newsletter-integration[bbi-name="zapier"]
  .newsletter-integration-options
  .newsletter-integration-option[name="zapier"] {
  display: block;
}
.breadbutter-wrap
  #newsletter
  form
  .newsletter-integration[bbi-name="mailchimp"]
  .newsletter-integration-options
  .newsletter-integration-option[name="mailchimp"] {
  display: block;
}

.breadbutter-wrap
  #newsletter
  form
  .newsletter-integration
  .newsletter-integration-choice
  svg {
  height: 24px;
}

.breadbutter-wrap #newsletter form .newsletter-event .bb-hint {
  background-image: url(./info_64.png);
  width: 15px;
  height: 15px;
  display: inline-block;
  background-size: contain;
  margin-left: 10px;
  position: relative;
  vertical-align: middle;
}

.breadbutter-wrap #newsletter form .newsletter-event .bb-hint .bb-hover {
  display: none;
}

.breadbutter-wrap #newsletter form .newsletter-event .bb-hint:hover .bb-hover {
  display: block;
  position: absolute;
  width: 200px;
  top: 15px;
  left: 15px;
  background: white;
  color: black;
  border-radius: 5px;
  box-shadow: 2px 2px 5px 1px #6b6b6b3b;
  padding: 15px 20px;
  z-index: 1;
}
.breadbutter-wrap
  #newsletter
  form
  .newsletter-integration
  .newsletter-integration-choice
  .newsletter-checkmark {
  background: #fff;
  color: #50575e;
  clear: none;
  cursor: pointer;
  display: inline-block;
  line-height: 0;
  height: 1rem;
  margin: -0.25rem 0.25rem 0 0;
  outline: 0;
  padding: 0 !important;
  text-align: center;
  vertical-align: middle;
  width: 1rem;
  min-width: 1rem;
  -webkit-appearance: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: 0.05s border-color ease-in-out;
  border-radius: 2px;
  border: solid 1px #707070;
  background-color: #fff;
  margin-top: 1px;
}

.breadbutter-wrap
  #newsletter
  form
  .newsletter-integration
  .newsletter-integration-choice[bbi-selected="true"]
  .newsletter-checkmark::before {
  height: 24px;
  width: 24px;
  margin-left: -5px;
  margin-top: -4px;
  content: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E);
  float: left;
  
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}

#client .content table {
  margin: 0;
}
#client .content table#bb-custom-events-table,
#client .content table#bb-user-custom-data-table {
  margin-bottom: 30px;
  
}
table#bb-user-custom-data-table td{
  padding: 5px 10px;
}
table#bb-user-custom-data-table{margin-bottom: 40px;}
.bb-hidden-config {
  display: none !important;
}

.breadbutter-flex-1 {
  flex: 1;
  height: auto;
}

.bb-hash-button {
  text-decoration: none;
}
.bb-dashboard-section.bb-gate-content-section {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 40px;
}

.bb-container {
    display: flex;
    background: #F3F6FA;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    font-family: 'Open Sans', sans-serif;
    
}
.bb-pro-tip-header{
    background-color: #eef4fe;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;
}

.button-primary.bb-disabled{
  pointer-events: none;      /* Prevent clicking */
    opacity: 0.5;              /* Visual feedback */
    cursor: default;           /* Show normal cursor */
    text-decoration: none; 
}
.bb-pro-tip-content p{padding: 10px 20px;}
.bb-info-box{display:flex;}
.bb-pro-tip-box{
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);
    width: 230px;border-radius: 8px;
    overflow: hidden;
}
.bb-step-1, .bb-step-2,.bb-step-3, .bb-step-4,.bb-step-5, .bb-step-6{
transition: max-height .1s 
ease, opacity .35s 
ease, margin-top .45s 
ease, visibility .35s 
ease;
}
.bb-step-title-icon{display:flex;}
.bb-step-title-icon img{    width: 20px;
    margin-right: 5px;
    margin-left: -25px;}
.bb-step-1,.bb-step-2, .bb-step-3, .bb-step-4, .bb-step-5, .bb-step-6{visibility: hidden; max-height:0; opacity:0; margin-top:0;}
.bb-step-1.bb-active,.bb-step-2.bb-active, .bb-step-3.bb-active, .bb-step-4.bb-active, .bb-step-5.bb-active, .bb-step-6.bb-active{visibility: visible; max-height:700px; opacity:1; margin-top:0;}
.bb-container .bb-loader{margin-left: -26px;}

.bb-left {
    width: 25%;
    background: url(./BB_COLOUR_LINE.png) #fff;
    border-right: 1px solid #dde3ea;
    padding: 25px 30px 83px 30px;
    border-radius: 10px 0 0 10px;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    box-sizing: border-box;
    min-width: 326px;
}
.bb-content-box{
    padding: 0 40px 25px 40px;
}
.bb-right {
    width: 75%;
    background: #fff;
    border-radius: 0 10px 10px 0;
    position: relative;
    
}

/* LEFT SIDE */
.bb-left h3 {
    margin-top: 0;
}

.bb-leads-list {
    margin-top: 20px;
}

.bb-lead-item {
    height: 48px;
    color: #666;
    background: #EEF3F9;
    border-radius: 8px;
    margin-bottom: 2px;
    position: relative;
    padding-left: 30px;
    line-height: 48px;
    font-size: 15px;
}
:root {
    --brand-google: #0050ad;
    --brand-microsoft: #7eba00;
    --brand-facebook: #227aed;
    --brand-slack: #d31a69;
    --brand-twitter: #010202;
    --brand-quickbooks: #2ba11c;
    --brand-linkedin: #2867b2;
    --brand-dropbox: #0061ff;
    --brand-salesforce: #00a1e0;
    --brand-apple: #000000;
    --brand-planningcenter: #2166f7;
    --brand-twitch: #9146ff;
    --brand-github: #5f6060;
    --brand-basecamp: #1d2d35;
    --brand-okta: #017dc1;
    --brand-onelogin: #00a9e0;
    --brand-local: #0050ad;
    --brand-magic-link: #0050ad;
    --brand-identified: #f4bc2b;
}


.bb-lead-message {
    max-height: 140px;
    overflow: hidden;
    padding-left: 35px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #4e5051;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    white-space: pre-line;
    text-overflow: ellipsis;
    line-height: 14px;
}

.bb-lead-item .bb-user-icon {
    width: 48px;
    height: 48px;
    background-color: #dfe7f0;
    color: white;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    left: -20px;
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    align-items: center;
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.bb-lead-item .bb-user-name {
    width: 123px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 5px;
}

.bb-lead-item .bb-nurture-button {
    position: absolute;
    border-radius: 4px;
    border: 1px solid #4d4d4d;
    background-color: transparent;
    color: #4d4d4d;
    margin-right: 7.5px;
    padding: 7px 13px;
    height: 30px;
    text-decoration: none;
    /* right: 10px; */
    /* box-sizing: border-box; */
    line-height: 18px;
    height: 18px;
    margin-top: 8px;
    top: 0;
    right: 0;
}

@media(max-width: 1440px) {
    .bb-left {
        min-width: auto;
    }
    .bb-lead-item .bb-nurture-button {
        display: none;
    }
    .bb-lead-item .bb-user-name {
        width: auto;
    }
}

.bb-lead-item.google .bb-user-icon { background-color: var(--brand-google); }
.bb-lead-item.microsoft .bb-user-icon { background-color: var(--brand-microsoft); }
.bb-lead-item.facebook .bb-user-icon { background-color: var(--brand-facebook); }
.bb-lead-item.slack .bb-user-icon { background-color: var(--brand-slack); }
.bb-lead-item.twitter .bb-user-icon { background-color: var(--brand-twitter); }
.bb-lead-item.quickbooks .bb-user-icon { background-color: var(--brand-quickbooks); }
.bb-lead-item.linkedin .bb-user-icon { background-color: var(--brand-linkedin); }
.bb-lead-item.dropbox .bb-user-icon { background-color: var(--brand-dropbox); }
.bb-lead-item.salesforce .bb-user-icon { background-color: var(--brand-salesforce); }
.bb-lead-item.apple .bb-user-icon { background-color: var(--brand-apple); }
.bb-lead-item.planningcenter .bb-user-icon { background-color: var(--brand-planningcenter); }
.bb-lead-item.twitch .bb-user-icon { background-color: var(--brand-twitch); }
.bb-lead-item.github .bb-user-icon { background-color: var(--brand-github); }
.bb-lead-item.basecamp .bb-user-icon { background-color: var(--brand-basecamp); }
.bb-lead-item.okta .bb-user-icon { background-color: var(--brand-okta); }
.bb-lead-item.onelogin .bb-user-icon { background-color: var(--brand-onelogin); }
.bb-lead-item.local .bb-user-icon { background-color: var(--brand-local); }
.bb-lead-item.magic_link .bb-user-icon { background-color: var(--brand-magic-link); }
.bb-lead-item.identified .bb-user-icon { background-color: var(--brand-identified); }

p.bb-connect-info{
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #2c2c2c;
    line-height: 1.23;
}
/* TABS */
.bb-home-tab{
  position: absolute;
    top: -30px;
    background: #ffffff;
    padding: 8px 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    color: #2c2c2c;
    line-height: 1.23;
    font-weight: bold;
    text-transform: uppercase;
}
.bb-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 25px;
}

.bb-tab {
    padding: 18px 20px 18px 40px;
    text-align: left;
    background: #E9EFF6;
    font-size: 14px;
    border-right: 1px solid #d7dfe7;
    text-transform: uppercase;
    font-weight: 600;
    height: 190px;
}
.bb-tab a{text-decoration: none; color: #167ee6}
.bb-tab:last-child {
    border-right: none;
}

.bb-tab span {
    display: block;
    
    color: gray;
    font-weight: normal;
}
.bb-active span, span.bb-green, span.bb-blue{
margin-top: 5px;
}

/* Active tab */
.bb-tab.bb-active {
    background: #fff;
    
}
.bb-tab.bb-completed{
  background: #e9fae7;
}
.bb-green{color: #1fc609 !important;}
.bb-blue{color: #1f83e7 !important;}
/* CONTENT AREA */
.bb-content-box h4, .bb-container h4 {
    color: #4a4a4a;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: 11px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.82;
}
.bb-tabs .bb-tab span{font-family: 'Open Sans', sans-serif; font-weight: bold; background: transparent;line-height: 1.3; margin-bottom: 0;font-size: 11px;}

    
.bb-tabs .bb-tab p{font-size: 11px;
    font-family: 'Open Sans', sans-serif; font-weight: bold;color: #000; background: transparent;line-height: 1.82; margin-bottom: 0;}
.bb-content-box h2 {
    margin-top: 5px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.25;
    color: #1d2327;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
.bb-content-box p.bb-content-setup{
  width: 100%;
}
.bb-content-box p {
    margin-top: 15px;
    margin-bottom: 20px;
    line-height: 1.5;
    color: #2c2c2c;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
}
.bb-dashboard-service-setup-button.is-disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}
/* BUTTON */
.bb-connect-btn.bb-nurture-your-leads{position: absolute;
    bottom: 25px; width: 132px;
    left: 50%;
    transform: translate(-50%);}
.step.active .step-indicator svg, .step.pending .step-indicator svg{display:none;}

.bb-learn-more {
    margin-left: 20px;
    font-size: 13px;
    color: #167ee6;
    
    font-family: 'Open Sans', sans-serif;
    position: relative;
    
}
@media(max-width: 1600px) and (min-width: 1290px) {
  .bb-dashboard-tile-title{
    min-height: 36px;
  }
  .bb-dashboard-tile-content-box.service-content-box .bb-dashboard-tile-content{    min-height: 105px;
    justify-content: space-between;}
    .breadbutter-content-gate-classic-wrapper-2 img{
    max-height: 17%;
    width: auto;
  }
}

@media only screen and (max-width: 1291px) {
  
  .breadbutter-full-content {
    display: block;
  }
  
  .breadbutter-full-content .breadbutter-side-content {
    padding-left: 0;
    width: auto;
  }
 

  .breadbutter-full-content
    .breadbutter-side-content
    .breadbutter-side-box-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .bb-dashboard-link {
    margin-top: 21px;
    margin-left: 0;
    margin-right: 10px;
  }
}

@media screen and (max-width: 1028px) {
  .bb-gating-config-text table.form-table > tbody > tr,
  .bb-preview-header-subheader table.form-table > tbody > tr {
    flex-wrap: wrap;
  }
  .breadbutter-wrap .content table tr:not(.breadbutter-reverse) th {
    display: block;
    /*padding: 10px 0 0 0;*/
    border-bottom: 0;
    width: 60vw;
  }
  .bb-gating-config-text table.form-table > tbody > tr,
  .bb-gating-config-text table.form-table > tbody {
    display: flex;
    flex-direction: column;
  }
  .breadbutter-wrap
    .content
    .bb-module-config-colors
    table
    tr:not(.breadbutter-reverse)
    th {
    width: 155px;
  }
  .bb-preview-header-subheader table.form-table > tbody > tr {
    display: flex;
    flex-direction: column;
  }
  .breadbutter-wrap .content table tr:not(.breadbutter-reverse) td {
    display: block;
    width: auto;
  }
  .breadbutter-wrap #newsletter form .newsletter-event .newsletter-integration {
    flex-direction: column;
  }
  .breadbutter-wrap #newsletter form .newsletter-event .bb-event-code-holder {
    flex-direction: column;
  }
}

@media screen and (max-width: 835px) {
  .breadbutter-wrap .nav-tab-wrapper .nav-tab {
    min-width: auto;
  }
}
.breadbutter-section {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #1d2327;
  font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
#dashboard-gate-content .breadbutter-section {
  display: none;
}
#dashboard-newsletter .newsletter-event {
  display: none;
}


#newsletter-image::file-selector-button {
  margin-right: 20px;
  border: none;
  background: #084cdf;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}


#newsletter-image::file-selector-button:hover {
  background: #0d45a5;
}

#newsletter-image-button {
  box-sizing: border-box;
  width: 85px;
  height: 40px;
  padding: 11px 5px;
  border-radius: 4px;
  background-color: #50aff5;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
  border: none;
}

#newsletter-image-progress,
#contactus-image-progress {
  accent-color: #50aff5;
}

input[name="breadbutter_newsletter_custom_image"][disabled] {
  opacity: 0.5;
}
input[name="breadbutter_gating_content_gating_custom_image"][disabled] {
  opacity: 0.5;
}

#newsletter-image[disabled]::file-selector-button {
  background: #81899c;
}
#newsletter-image[disabled]::file-selector-button:hover {
  background: #81899c;
}

#breadbutter-launch-app {
  width: auto;
  text-align: center;
  border: none;
  border-radius: 4px;
  background-color: #fac22d;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: #202833;
  text-decoration: none;
  padding: 12px;
  cursor: pointer;
}

#breadbutter-launch-app.breadbutter-create-account {
  border: solid 2px;
  background-color: #fff;
  color: #000;
  text-transform: uppercase;
  padding: 8px 32px;
}

.breadbutter-wrap .breadbutter-button-launch-wrapper {
  text-align: center;
  margin-top: 40px;
}

#breadbutter-webapp-container .bb-loader-view,
#breadbutter-webapp-container .bb-loader-holder {
  display: flex;
  height: 48px;
  justify-content: center;
  align-items: center;
}
#breadbutter-webapp-container .bb-loader-holder {
  display: none;
}
#breadbutter-webapp-container .choice .bb-loader-holder {
  display: none;
  width: 75px;
  padding: 0;
  margin: 0;
  clear: both;
  vertical-align: middle;
  height: 35.5px;
  margin: 0.5rem;
}

#breadbutter-webapp-container .bb-apps-view.loading .bb-loader-holder {
  display: flex;
}
#breadbutter-webapp-container .bb-assign-view.loading .choice .bb-loader-holder {
  display: inline-block;
}

#breadbutter-webapp-container .bb-loader::after {
  top: 0;
  left: 0;
}

#breadbutter-webapp-container .choice .bb-loader::after {
  top: -0.15rem;
}

.breadbutter-tileset {
  margin-top: 21px;
  height: auto;
  width: 100%;
  margin-right: 0;
}
.breadbutter-tileset .flex-row {
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.breadbutter-tileset>.flex-row>.flex-col{
  flex: 0 0 33%;
}
.breadbutter-tileset .breadbutter-inline-box{
  width:100%;
}
.breadbutter-tileset > div {
  margin-top: 9px;
}

.breadbutter-tileset-side {
  height: 280px;
  width: 478px;
}

.breadbutter-tileset-side .bb-dashboard-tile-content-box {
  justify-content: center;
  align-items: center;
}

.breadbutter-tileset .breadbutter-grid-tileset {
  display: grid;
  grid-template-columns: 189px 189px;
  grid-template-rows: 189px 189px;
  column-gap: 12px;
  row-gap: 12px;
  height: 100%;
}
.breadbutter-tileset .breadbutter-grid-tileset .bb-grid-item {
  background: #fdfdfd;
  border: 1px solid #c3c4c7;
}

.breadbutter-dashboard-icon {
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
  margin: 6px 16px;
}

.breadbutter-dashboard-content-gate {
  background-image: url(./dashboard/content_gate.png);
}

.breadbutter-dashboard-content-preview {
  background-image: url(./dashboard/content_preview.png);
}

.breadbutter-dashboard-contact-us {
  background-image: url(./dashboard/contactus.png);
}

.breadbutter-dashboard-pop-up {
  background-image: url(./dashboard/pop_up.png);
}

.bb-tile-item {
  display: flex;
  align-items: center;
}

.bb-tile-item span {
  width: 155px;
  margin-left: 10px;
  margin-right: 5px;
  font-size: 12px;
  font-weight: bold;
}

a.bb-tileset-button {
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  background-color: #fac22d;
  font-size: 11px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: #202833;
  text-decoration: none;
  text-transform: uppercase;
  padding: 4px 25px;
  display: block;
}

a.bb-tileset-button.setup {
  line-height: 1;
  white-space: nowrap;
  background-color: transparent;
  border: solid 1px #50aff5;
  color: #50aff5;
}

a.bb-tileset-button span {
  margin: 0;
  font-size: 12px;
}

.bb-tile-enabled a.bb-tileset-button {
  display: none;
}

.breadbutter-tileset-side .bb-dashboard-tile-content-footer {
  margin-top: 19px;
  margin-bottom: 20px;
}

.bb-grid-item .bb-dashboard-tile-content {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.bb-grid-item .bb-dashboard-tile-content > span {
  font-size: 15px;
  margin-bottom: 8px;
}

.breadbutter-wrap .content.preview-content {
  display: flex;
  align-content: stretch;
  align-items: flex-start;
  justify-content: flex-start;
  /*flex-direction: row-reverse;*/
  flex-wrap: wrap;
  flex-direction: column;
}

.breadbutter-wrap .content form {
  flex: 1;
  min-width:100%;
  margin-right: 30px;
  max-width: 100%;
}

.content .bb-preview-image-box {
    background-size: contain;
    background-position: 0;
    background-repeat: no-repeat;
    min-height: 532px;
    min-width: 100%;
    flex: 1;
    display: block;
    margin-top: 0;
    margin-bottom: 50px;
}

.content.narrow-view .bb-preview-image-box {
  margin-top: 0;
}

.bb-preview-image-box[data="contact-us"] {
  background-image: url(./preview/contact_us_preview.png);
}

.bb-preview-image-box[data="blur-screen"] {
  background-image: url(./preview/blur_screen_preview.png);
}

.bb-preview-image-box[data="content-preview"] {
  background-image: url(./preview/content_preview_preview.png);
}

.bb-preview-image-box[data="content-gating"] {
  background-image: url(./preview/content_gating_preview.png);
}

.bb-preview-image-box[data="opt-in"] {
  background-image: url(./preview/opt_in_preview.png);
}


.bb-agency-code .bb-grid {
  display: grid;
  grid-template-columns: 30% 65%;
  grid-template-rows: 100%;
  column-gap: 10px;
  row-gap: 5px;
  margin-top: 6px;
}

.bb-agency-code .bb-grid label {
  line-height: 30px;
  font-size: 16px;
  font-weight: 500;
}
.bb-agency-code .bb-grid input[type="text"] {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #000;
  padding: 0px 8px;
  line-height: 12px;
  background-color: #f0f0f1;
  border: 1px solid transparent;
  border-radius: 0;
  height: 30px;
}
.bb-agency-code input[type="submit"] {
  width: 85px;
  height: 40px;
  padding: 11px 26px;
  border-radius: 4px;
  background-color: #50aff5;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
  border: none;
}
.bb-agency-code input[type="submit"]:hover {
  background: #135e96;
  border-color: #135e96;
  color: #fff;
}

.bb-tile-item .icon-img {
  display: inline-block;
  width: 33px;
  padding-left: 1.35rem;
}

.bb-dashboard-section {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 30px;
  border-bottom: 1px solid #c7c7c7;
}

.breadbutter_dashboard_actions_groups {
  width: 100%;
  max-width: 640px;
  background: #fdfdfd;
  margin-right: 10px;
  box-sizing: border-box;
  margin-top: 21px;
  padding: 0 15px 10px;
}

.breadbutter_dashboard_actions_groups p.submit {
  margin: 30px 0 6px 8px;
  padding-bottom: 0;
}

.breadbutter_dashboard_actions_groups p.submit input[type="submit"] {
  padding: 9px 20px;
  border-radius: 4px;
  background-color: #50aff5;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
  border: none;
}

.bb-dashboard-actions-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 15px;
  padding: 6px;
  height: 15px;
}

.bb-dashboard-actions-item input {
  border-radius: 50%;
  border: solid 1px #707070;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.25rem 0.9rem 0.25rem 2px;
  height: 20px;
  width: 20px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: 0.05s border-colorease-in-out;
}

.bb-dashboard-actions-item .bb-green-circle-check {
  margin-right: 15px;
  margin-left: 2px;
}

.breadbutter_dashboard_gating_groups {
  margin-top: 40px;
  width: 100%;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 4.125em;
  border-top: 1px solid #c7c7c7;
  padding-top: 40px;
}

.bb-dashboard-gating-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding-top: 15px;
}

.bb-dashboard-gating-content-title {
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  padding: 15px 0;
}

.breadbutter-wrap .bb-dashboard-gating-content select.select-row {
  width: 200px !important;
  padding-right: 10px;
  padding-left: 10px;
  box-sizing: border-box;
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
}
.bb-dashboard-gating-content .select2-container {
  width: 200px !important;
}
.bb-dashboard-gating-content .bb-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.bb-dashboard-gating-content .bb-dashboard-gating-content-category {
  flex: 1;
  width: 170px;
  margin-right: 25px;
  padding-bottom: 15px;

  display: flex;
  flex-direction: column;
}
.bb-dashboard-gating-content .bb-dashboard-gating-content-webpage {
  flex: 1;
  width: 350px;
  padding-left: 15px;
  border-left: 1px solid #c3c4c7;
  padding-bottom: 15px;

  display: flex;
  flex-direction: column;
}

.bb-dashboard-gating-content .bb-dashboard-gating-content-category label,
.bb-dashboard-gating-content .bb-dashboard-gating-content-webpage label {
  font-size: 10px;
}

.breadbutter-wrap .bb-dashboard-gating-content h2 {
  margin-top: 1em;
  font-size: 12px;
}

.bb-dashboard-gating-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
}

.bb-dashboard-gating-actions a {
  margin-right: 23px;
}

.breadbutter-wrap .breadbutter_dashboard_gating_groups a.bb-more {
  line-height: 2.5;
  text-align: center;
  border-radius: 4px;
  background-color: #fac22d;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: #202833;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 10px;
  display: block;
  margin: 0 23px 0 0;
}

.breadbutter-wrap .breadbutter_dashboard_gating_groups p.submit {
  margin-bottom: 0;
  padding-bottom: 0;
}
.breadbutter-wrap
  .breadbutter_dashboard_gating_groups
  p.submit
  input[type="submit"],
.button-primary.bb-dashboard-service-setup-button {
  width: 87px;
  height: 30px;
  min-height: 24px;
  border-radius: 4px;
  background-color: #50aff5;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border: none;
}

.button-primary.bb-dashboard-service-setup-button {
  margin-top: 16px;
}
.select2-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.select2-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: default;
  z-index: 10;
}

.bb-instructions {
  max-width: 820px;
  padding: 20px 0px 0px;
}

.bb-instructions .bb-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  padding-bottom: 32px;
}

/* Vertical connector line */
.bb-instructions .bb-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 40px;
  width: 2px;
  height: calc(100% - 44px);
  background: #e3e7ee;
}
.bb-step-content .images-wrap{margin-top: 20px;}
/* Number circle */
.bb-step-number {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: #50aff5; /* brand color */
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Content */
.bb-step-content h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.bb-step-content p {
  margin: 0;
  color: #5b6575;
  line-height: 1.5;
}
.bb-booster-image{
    height: auto;
    margin-bottom: 30px;
    max-width: 100%;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: table;
}
@media (min-width: 1291px){
.breadbutter-content-gate-classic-order_mobile{display: none;}
.bb-content-box{    padding: 0 40px 25px 40px;
    position: relative;
    bottom: 0px;}
}
@media (max-width: 1290px) {
  .bb-container{
    flex-direction: column;
    overflow: hidden;
  }
  .bb-left, .bb-right{width: 100%}
 .breadbutter-tileset>.flex-row>.flex-col {
    flex: 0 0 100%;
}
.breadbutter-tileset>.flex-row>.flex-col>.breadbutter-inline-box{
    max-width: 100%;
    width: 380px;
    margin: 0 auto !important;
    height: 185px !important;
}
.breadbutter-content-gate-classic-wrapper-1 img{    margin: 20px 0px 100px;}
.breadbutter-content-gate-preview-section-1{
      margin-bottom: 100px;
}
  .breadbutter-content-gate-preview{
    flex-direction: column;
    max-width: 430px;
  }
    .breadbutter-content-gate-classic-arrow-3
 {
    position: absolute;
    height: auto;
    top: 43%;
    right: -25%;
    width: 41%;
}
  .breadbutter-content-gate-classic-text-3{top: 99%}
  .breadbutter-content-gate-classic {
    flex-direction: column;
  }
.breadbutter-content-gate-classic-order.bb-desktop{display: none;}
  .breadbutter-content-gate-classic-wrapper-1{margin-bottom: 0px}
  .breadbutter-content-gate-classic-text-2 {
    right: 0%;
  }
  .breadbutter-content-gate-classic-wrapper-1{max-width: 100%; text-align: center;}
  .breadbutter-content-gate-classic-wrapper-1 img{margin-left: auto; margin-right: auto;}
  .breadbutter-content-gate-classic-wrapper-2 img{
position: absolute;
    z-index: 10;
    top: -129px;
  }
  .breadbutter-content-gate-classic-wrapper-3{max-width: 100%;}
  .breadbutter-dashboard-tab .flex-row-parent {
    flex-direction: column;
  }
  .breadbutter-dashboard-tab .flex-row-parent > .flex-row:first-child {
    width: 100%;
  }
  .breadbutter-dashboard-tab.bb-dashboard-option-conversion
    .breadbutter-tab.breadbutter-inline-box.js-breadbutter-tab-conversion,
  .breadbutter-dashboard-tab.bb-dashboard-option-conversion
    .breadbutter-tab.breadbutter-inline-box.js-breadbutter-tab-page-view-tracking,
  .breadbutter-dashboard-tab.bb-dashboard-option-conversion
    .breadbutter-tab.breadbutter-inline-box.js-breadbutter-web-forms,
  .breadbutter-dashboard-tab.bb-dashboard-option-conversion
    .breadbutter-tab.breadbutter-inline-box.js-breadbutter-ai-campaigns {
    width: 100%;
    justify-items: center;
  }
  .breadbutter-dashboard-tab .flex-row-parent > .flex-row:first-child {
    justify-content: center;
  }
  .breadbutter-full-content .breadbutter-main-content {
    margin-right: 0px;
  }
}


.bb-content-gate-conversion-row {
  display: flex;
  flex-direction: column;
}
.bb-content-gate-conversion-row .bb-content-gate-conversion-header {
  display: flex;
  flex-direction: column;
}

.bb-content-gate-conversion-row .bb-content-gate-conversion-header-text {
  display: flex;
  justify-content: space-between;
}
.bb-content-gate-conversion-row .bb-content-gate-conversion-header-text-2 {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
.bb-content-gate-conversion-row .bb-content-gate-text {
  color: #4b5563;
  font-size: 15px;
  line-height: 1.4;
  font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  
  
}
.bb-how-to-gating {
  margin-left: 15px;
  border-radius: 4px;
  background-color: #2ab846;
  border: none;
  text-align: center;
  padding: 11px 15px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  opacity: 1;
  cursor: pointer;
}
.bb-content-gate-conversion-row .bb-content-gate-conversion-header .bb-content-gate-conversion-header-tips{
  margin-top: 35px;
  margin-right: 24px;
}
.bb-content-gate-conversion-row .bb-content-gate-conversion-header .bb-content-gate-text {

}

.bb-content-gate-conversion-row .bb-content-gate-conversion-content {
  display: flex;
}


.bb-content-gate-conversion-row .bb-content-gate-conversion-content th,
.bb-content-gate-conversion-row .bb-content-gate-conversion-content td{
  padding: 0;
}

.bb-content-gate-conversion-row .bb-content-gate-conversion-content .bb-content-gate-email-options{
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background-color: #f2f1fb;
  padding: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.bb-content-gate-conversion-row .bb-content-gate-conversion-content .bb-content-gate-email-options
.breadbutter-gating-content-gating-conversion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0;
}

.bb-content-gate-conversion-row .bb-content-gate-conversion-content .bb-content-gate-email-options
.breadbutter-gating-content-gating-conversion .fixed-row{
  width: auto;
}

.bb-content-gate-conversion-row .bb-content-gate-conversion-content .bb-content-gate-provider-options{
  flex: 1;
  display: flex;
  border-radius: 12px;
  background-color: #effbff;
  padding: 20px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.bb-content-gate-conversion-row .bb-content-gate-conversion-content input[type=checkbox].bb-include-reverse {
  border-radius: 10px;
  border: solid 1px #707070;
  background-color: transparent;
  position: relative;
  margin: 0;
}
.bb-content-gate-conversion-row .bb-content-gate-conversion-content input[type=checkbox].bb-include-reverse:checked::before {
  margin-left: -4px;
  margin-top: -2px;
  height: 22px;
  width: 22px;
}
.bb-content-gate-conversion-row .bb-content-gate-conversion-content input[type=checkbox].bb-include-reverse:disabled {
  border-color: #b2b2b2;
  background: #d5d5d5;
  pointer-events: none;
}

.bb-content-gate-conversion-row .bb-content-gate-conversion-content input[type=checkbox].bb-include-reverse.always-on:disabled:checked{
  border: none;
  background: transparent;
}
.bb-content-gate-conversion-row .bb-content-gate-conversion-content input[type=checkbox].bb-include-reverse.always-on:disabled:checked:before{
  background: none;
  border: 3px solid #1d2327;
  border-radius: 0;
  transform: rotate(45deg);
  border-top: none;
  border-left: none;
  width: 7px;
  height: 13px;
  margin-left: 8px;
  margin-top: -3px;
}
.bb-content-gate-conversion-row .bb-content-gate-conversion-content input[type=checkbox].bb-include-reverse:disabled + .idp-content {
  opacity: 0.4;
}
.bb-content-gate-conversion-row .bb-content-gate-conversion-content .bb-include-reverse-label {
  margin-left: 1em;
}

@media (max-width: 991px) {
  
  .content .bb-preview-image-box{
        min-height: 400px;
        margin-bottom: 0;
  }
  .bb-content-gate-preview-bottom-row,
  .bb-gating-config-text table.form-table > tbody,
  .bb-preview-header-subheader table.form-table > tbody {
    flex-direction: column;
  }
  .bb-gating-config-text table.form-table > tbody input,
  .bb-preview-header-subheader table.form-table > tbody input {
    min-width: 98% !important;
  }
  .bb-gating-config-text table.form-table > tbody > tr > td,
  .bb-preview-header-subheader table.form-table > tbody > tr > td {
    width: 100%;
  }
  .breadbutter-reverse label {
    position: absolute;
    left: 40px;
    top: 20%;
    transform: translate(0, -50%);
  }
  .breadbutter-content-gate-classic-wrapper-1,
  .breadbutter-content-gate-classic-wrapper-2 {
    max-width: 100%;
    width: auto;
  }
  input[type="checkbox"],
  input[type="radio"] {
    height: 0.9924rem;
    width: 0.9924rem;
  }
  .bb-module-config-colors .bb-color-flex-box {
    min-width: 140px;
  }

  .breadbutter-wrap .content form {
    min-width: 100%;
    margin-right: 0;
  }
  .bb-gating-content-sections {
    flex-direction: column;
  }
  .bb-gating-content-section {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .breadbutter-content-gate-secure-image {
    max-width: 100%;
  }
  .breadbutter-content-gate-secure {
    justify-content: center;
  }
  .breadbutter-content-gate-preview-section-1{margin-bottom: 0px;}
      .content .bb-preview-image-box {
        min-height: 250px;
        
    }
  .breadbutter-content-gate-preview {
    margin: 40px auto;
  }
  .breadbutter-content-gate-classic {
    padding-bottom: 40px;
  }
  .bb-desktop {
    display: none;
  }
  .bb-selection-group {
    margin-bottom: 20px;
  }
  .breadbutter-gating-content-gating-with-image,
  .breadbutter-opt-in-with-image {
    display: flex;
    align-items: start;
    gap: 10px;
    flex-direction: column;
    width: 100%;
  }


  .bb-gating-config-text table.form-table > tbody > tr > td {
    min-width: 100%;
  }
  .bb-gating-config-text table.form-table > tbody > tr,
  .bb-gating-config-text table.form-table > tbody {
    flex-direction: column;
  }
  
  .breadbutter-content-gate-classic-wrapper-1,
  .breadbutter-content-gate-classic-wrapper-2 {
    margin: 0 auto;
  }
  .breadbutter-content-gate-secure {
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
   
  }
}

.bb-tile-iframe-holder {
  position:relative;
}
.bb-tile-iframe {
  width: 100%;
  min-height: 170px;
  border: none;
  display: none;
  border-radius: 5px;
}
.bb-tile-iframe-overlay {
  position: absolute; inset: 0; background: transparent; border: 0; cursor: pointer;
}

.bb-launch-session-placeholder {
  display: flex;
  border-radius: 16px;
  padding: 20px 40px;
  background-color: #e4ebf8;
  box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.16);
  margin: 20px 0;
  align-items: center;
}

.bb-launch-session-no-access {
  display: none;
  border-radius: 16px;
  padding: 20px 40px;
  background-color: #fbf8f2;
  box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.16);
  margin: 20px 0;
  align-items: center;
}

.bb-launch-session-content {
  flex: 1;
}

.bb-launch-session-title {
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #1d2327;
  margin-bottom: 5px;
}

.bb-launch-session-subtitle {
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #1d2327;
}

.bb-launch-session, .bb-launch-access {
  width: 160px;
  text-align: center;
  border: none;
  border-radius: 4px;
  background-color: #1cb93f;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: #fff;
  text-decoration: none;
  padding: 0 12px;
  height: 40px;
  cursor: pointer;
  line-height: 40px;
}

.bb-color-flex-box {
  display: flex;
  padding: 0px 5px;
  background-color: #f0f0f1;
  border-radius: 4px;
  align-items: center;
}

.bb-color-flex-box .bb-color-block {
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
}

.bb-color-flex-box input {
  text-transform: uppercase;
}

input[type="color"] {
  -webkit-appearance: none;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}

.form-table .flex-row.breadbutter-gating-content-gating-trigger-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 0;
}

.bb-hidden-title tr th[scope="row"] {
  display: none !important;
}

.bb-default-image-sample {
  color: #50aff5;
  text-decoration: underline;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin-right: 5px;
}


.bb-default-image-sample .bb-tooltip {
  visibility:hidden;
  width: 225px;
  height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  position: absolute;
  bottom: 30px;
  left: -95px;
  border: 5px solid white;
  border-radius: 6px;
  box-shadow: 10px 10px 13px 5px rgb(0 0 0 / 17%);
}
.bb-default-image-sample .bb-tooltip.bb-custom-opt-in {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bb-default-image-sample .bb-tooltip .bb-tooltip-custom-image {
  width: 225px;
  height: 270px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  border-radius: 6px;
}
#opt-in-custom-image {
  margin-top: 5px;
}

.bb-default-image-sample .bb-tooltip::after {
  content: " ";
  width: 0px;
  height: 0px;
  border-color: #fff;
  position: absolute;
  display: block;
  bottom: -15px;
  left: 50%;
  /* transform: rotate(45deg); */
  /* border-top: 20px solid black; */
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  margin-left: -5px;
}

.bb-default-image-sample:not(.bb-choose-from-image-library):hover .bb-tooltip {
  visibility: visible;
}

.bb-default-image-sample .bb-tooltip.bb-tooltip-a {
  background-image: url(BB_CONTENT_GATING_LEFT_A.svg);
}
.bb-default-image-sample .bb-tooltip.bb-tooltip-b {
  background-image: url(BB_CONTENT_GATING_LEFT_B.svg);
}
.bb-default-image-sample .bb-tooltip.bb-tooltip-c {
  background-image: url(BB_CONTENT_GATING_LEFT_C.svg);
}
.bb-default-image-sample .bb-tooltip.bb-tooltip-d {
  background-image: url(BB_CONTENT_GATING_LEFT_D.svg);
}
.bb-default-image-sample .bb-tooltip.bb-tooltip-e {
  background-image: url(BB_CONTENT_GATING_LEFT_E.svg);
}
.bb-default-image-sample .bb-tooltip.bb-tooltip-f {
  background-image: url(BB_CONTENT_GATING_LEFT_F.svg);
}

#content-gating-classic-image, #opt-in-image {
  width: 193.6px;
  height: 40px;
  padding: 0;
  margin-left: 6px;
}
#contactus-image{width: 193.6px;
    height: 40px;
    padding: 0;
    margin-left: 6px;}
#contactus-image::before,
#content-gating-classic-image::before,
#opt-in-image::before {
  content: "UPLOAD YOUR OWN";
  width: 193.6px;
  height: 40px;
  padding: 0px;
  border-radius: 4px;
  background-color: #f9c140;
  border: none;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.88;
  letter-spacing: normal;
  text-align: center;
  color: #030300;
  display: block;
  border-radius: 4px;
  box-sizing: border-box;
  line-height: 40px;
}

#content-gating-classic-image::-webkit-file-upload-button,
#opt-in-image::-webkit-file-upload-button {
  visibility: hidden;
}
#content-gating-classic-holder progress,
#opt-in-holder process {
  display: block;
}

@media (min-width: 768px) {
  .breadbutter-content-gate-classic-wrapper-2 {
    
    margin-bottom: 0px;
  }
  
}

@media (min-width: 961px) {
  body.toplevel_page_breadbutter_connect #wpcontent {
    margin-left: 140px;
  }
   #bb-notification {
    width: 600px;
    font-size: 18px;
    line-height: 1.4em;
    min-height: 200px;
  }
}

@media (min-width: 1029px) {

 
  label[for="breadbutter_gating_content_gating_text_subheader"] {
    text-align: center;
    width: 100%;
    display: inline-block;
  }
  
}
@media(min-width: 1200px){
  .breadbutter-wrap .content form {
    min-width: 900px;
  }
  
}

@media (min-width: 1400px) {
 
  .bb-module-config-colors {
    max-width: 740px;
  }
}


.breadbutter-gating-content-gating-with-image .bb-default-image-preview,
.breadbutter-opt-in-with-image .bb-default-image-preview {
  display: none;
}


.bb-tooltip-wrapper, .bb-tooltip-contact-wrapper{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
    background: rgba(0, 0, 0, 0.3);
    visibility: hidden;
}
.button-bar{
    top: 80%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    /*background: #ffffff;*/
    width: 560px;
    /*padding: 11px 5px;*/
    text-align: center;
}

.button-bar input {
  font-size: 13px !important;
  padding: 0 10px !important;
  min-height: 30px !important;
  height: 30px;
}
.bb-default-image-sample .bb-tooltip.bb-opt-in-image-holder {
    line-height: 1em !important;
}
.bb-default-image-sample .bb-tooltip.bb-opt-in-image-holder {
      width: 600px;
    height: 608px;
    left: 50%;
    top: 50%;
    overflow-y: scroll;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    transform: translate(-50%, -50%);
    position: absolute;
    bottom: unset;
    padding-bottom: 58px;
}

.bb-default-image-sample .bb-tooltip.bb-opt-in-image-holder::after {
  display: none;
}

.bb-image-opt-in {
  display: block;
  width: 128px;
  height: 170px;
  background-size: contain;
  border-radius: 6px;
}
.bb-opt-in-image-holder .bb-opt-in-image-item {
  margin: 5px 5px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.bb-opt-in-image-holder .bb-opt-in-image-item input[type=radio] {
  margin-top: 5px;
}

.idp-providers-holder {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 220px;
}
.idprovider {
  display: flex;
  align-items: center;
}

.idp-content {
  display: flex;
  margin-left: 10px;
  align-items: center;
}

.idprovider-icon-btn {
  width: 190px;
  margin: 5px 5px 15px 0;
}

.provider-logo-icon {
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.provider-logo-icon svg {
  width: 24px;
  height: 24px;
}

.bb-switch input[type="checkbox"]:disabled + .bb-slider {
  background-color: #e0e0e0;
}
.idp-providers-title {
  position: relative;
  margin-bottom: 15px;
}
.idp-providers-title button {
  position: absolute;
  right: 0;
  top: -17px;
  padding: 9px 13px;
  border-radius: 4px;
  background-color: #f9c140;
  border: none;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  text-align: center;
  color: #030300;
}

.bb-open-app {
  cursor: pointer;
}
.breadbutter-contact-img{max-width: 100%; width: 100%; height: auto;}
.breadbutter-contact-description{max-width: 100%;width: 850px;}
.breadbutter-content-contact-tab{position: relative;}
.breadbutter-welcome-icon-selection{display: flex; gap: 10px; flex-wrap: wrap; align-items: center;}
.form-table .breadbutter-welcome-icon-selection input[type=radio]{margin-top: 2px;}
.bb-icon-size{font-size: 14px;
  font-weight: 500;color: #707070;}
.bb-choose-contact-icon{cursor: pointer;
  text-decoration: underline;
  color: #50aff5;
  margin-left: 5px;}
.bb-tooltip-contact{
  width: 340px;
  height: 358px;
  left: 50%;
  top: 50%;
  overflow-y: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  transform: translate(-50%, -50%);
  position: absolute;
  bottom: unset;
  padding-bottom: 58px;
    gap: 10px;
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 10px 10px 13px 5px rgb(0 0 0 / 17%);
}
.bb-tooltip-contact .bb-contact-image-item{
      display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bb-tooltip-contact .bb-image-contact{
      display: block;
    width: 71px;
    height: 66px;
    background-size: contain;
    border-radius: 6px;
    margin-bottom: 10px;
}
.bb-contact-button-bar {
    bottom: 2%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}
.breadbutter-welcome-icon-selection img.bb-contact-us-custom-image-preview{
   display: inline-block;       
  border-radius: 50%;          
  overflow: visible;           
  box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.16);
}
.bb-contact-wrapper-custom tr:nth-child(2) > th {
  display: none;
}
@media(max-width: 1600px) and (min-width: 1048px){
  .idp-providers-holder {
    height: 350px;
  }
}
@media(max-width: 1048px) {
  .bb-content-gate-conversion-content {
    flex-direction: column;
  }
  .bb-content-gate-conversion-row .bb-content-gate-conversion-content .bb-content-gate-email-options {
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0;
  }
  .bb-content-gate-conversion-row .bb-content-gate-conversion-content .bb-content-gate-provider-options {
    border-top-right-radius: 0;
    border-bottom-left-radius: 12px;
  }
}

@media(max-width: 700px) {
  .idp-providers-holder {
    height: 350px;
  }
  .bb-tab{    height: 100px;}
  .bb-tabs{    flex-direction: column;
    display: flex;}
}

.bb-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bb-modal-overlay .components-modal__content {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    max-width: 400px;
}

.bb-modal-overlay .components-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.bb-disabled-select-wrapper {
    cursor: pointer;
}

body.bb-modal-open {
    overflow: hidden;
}

/* --- MAIN CONTENT & VIEWS --- */
.view-container { display: none; padding: 48px 64px; max-width: 1100px; margin: 0 auto; animation: fadeIn 0.3s ease; }
.view-container.active-view { display: block; }
.not-connected-overlay.view-container.active-view { display: flex; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

body .wrap h1 { font-size: 32px; font-weight: 700; margin: 0 0 12px 0; color: var(--bb-dark); }
.intro-text { font-size: 16px; color: var(--bb-text); line-height: 1.6; margin-bottom: 40px; max-width: 750px; }

.panel { background-color: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; padding: 32px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.panel-title { font-size: 18px; font-weight: 600; color: var(--bb-dark); margin: 0 0 24px 0; border-bottom: 1px solid var(--border-color); padding-bottom: 16px; }

.form-row { display: flex; gap: 32px; margin-bottom: 24px; flex-wrap: wrap; }
.form-group { flex: 1; min-width: 250px; }
.form-group.full { flex-basis: 100%; }

.input-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #374151; }
.input-desc { font-size: 13px; color: var(--bb-text); margin-bottom: 8px; display: block; line-height: 1.4; }

/* Reusable Pro Tip formatting */
.pro-tip-badge { font-size: 13px; color: #059669; background: #d1fae5; padding: 6px 12px; border-radius: 8px; font-weight: 600; display: inline-block; line-height: 1.4; }

.text-input, .select-input {
        padding: 10px 14px !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 6px !important;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--bb-dark) !important;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    line-height: 1.2 !important;
    width: 80%;
}
.text-input:focus, .select-input:focus { border-color: var(--bb-primary); box-shadow: 0 0 0 3px rgba(255, 184, 28, 0.2); }
textarea.text-input { resize: vertical; min-height: 80px; }

.btn-grey { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 32px; background-color: var(--btn-grey); color: white; font-weight: 600; font-size: 15px; text-decoration: none; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; margin-top: 8px; }
.btn-grey:hover { background-color: var(--btn-grey-hover); color: white; }
.btn-grey:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-google { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; background-color: #fff; color: #374151; font-weight: 600; font-size: 15px; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; margin-top: 8px; }
.btn-google:hover { background-color: #f9fafb; border-color: #9ca3af; }
.btn-google:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-green { display: inline-block; padding: 12px 32px; background-color: #10b981; color: white; font-weight: 600; font-size: 15px; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; margin-top: 8px; }
.btn-green:hover { background-color: #059669; }
.btn-green:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-yellow { display: inline-block; padding: 12px 32px; background-color: var(--bb-primary); color: #111827; font-weight: 600; font-size: 15px; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; margin-top: 8px; }
.btn-yellow:hover { background-color: var(--bb-primary-hover); }

.btn-save {text-decoration: none; background-color: #3b82f6; color: white; border: none; padding: 10px 24px; border-radius: 6px; font-weight: 600; cursor: pointer; margin-top: 16px; transition: background 0.2s; }
.btn-save:hover { background-color: #2563eb; color: white;}

/* --- WARNING BANNER --- */
.warning-banner {
    background-color: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
}
.warning-icon { width: 24px; height: 24px; color: #d97706; flex-shrink: 0; margin-top: 2px; }
.warning-text { font-size: 15px; color: var(--warning-text); margin: 0; line-height: 1.5; }
.warning-link { color: var(--warning-text); font-weight: 700; text-decoration: underline; cursor: pointer; }
.warning-link:hover { color: #78350f; }

/* --- TOGGLES & CHECKBOXES --- */
.toggle-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.toggle-switch { width: 44px; height: 24px; background-color: #d1d5db; border-radius: 12px; position: relative; cursor: pointer; flex-shrink: 0; transition: background-color 0.2s; }
.toggle-switch.on { background-color: #10b981; }
.toggle-switch::after { content: ''; top: 2px; left: 2px; width: 20px; height: 20px; background-color: white; border-radius: 50%; transition: transform 0.2s; position: absolute; }
.toggle-switch.on::after { transform: translateX(20px); }
.toggle-label { font-size: 14px; font-weight: 500; color: var(--bb-dark); }

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin-top: 12px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bb-dark); }
.checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

.social-section { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; }

/* --- STEPPER COMPONENTS --- */
.stepper { position: relative; padding-left: 10px; margin-top: 32px; }
.step { display: flex; gap: 24px; position: relative; padding-bottom: 48px; cursor: pointer; }
.step::before { content: ''; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background-color: var(--step-line-color); z-index: 0; }
.step:last-child::before { display: none; }
.step-indicator { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; border: 2px solid var(--step-line-color); display: flex; align-items: center; justify-content: center; z-index: 1; flex-shrink: 0; transition: all 0.2s; }

.step.completed .step-indicator { background-color: var(--bb-primary); border-color: var(--bb-primary); color: #fff; }
.step.active .step-indicator { border-color: var(--bb-primary); box-shadow: 0 0 0 4px rgba(255, 184, 28, 0.2); }
.step.active .step-indicator::after { content: ''; width: 18px; height: 18px; background-color: var(--bb-primary); border-radius: 50%; }

.step-content { flex-grow: 1; padding-top: 8px; width: 100%; }
.step-title { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; color: var(--bb-dark); transition: color 0.2s; line-height: 1.4; }
.step-title.with-subtitle { margin-bottom: 4px; }
.step-subtitle { font-size: 13px; color: #6b7280; margin-bottom: 16px; font-weight: 500; line-height: 1.4; }
.step.active .step-title, .step.expanded .step-title { color: #d99000; }
.step.pending .step-title { color: #9ca3af; font-weight: 600; }

.step:hover:not(.expanded) .step-title { color: var(--bb-dark); }
.step:hover:not(.expanded) .step-indicator { border-color: #9ca3af; }

.option-box { display: none; background-color: var(--bg-panel); border: 1px solid #e5e7eb; border-radius: 8px; padding: 24px; max-width: 650px; margin-bottom: 24px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
.option-box.active{display: block;    margin: 48px 64px;}

/* Interactive accordion logic */
.step.expanded .option-box { display: block; animation: slideDown 0.3s ease; }
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.option-box.disabled { opacity: 0.6; pointer-events: none; }
.box-title { font-size: 18px; font-weight: 700; margin-top: 0; margin-bottom: 12px; color: var(--bb-dark); }
.box-desc { font-size: 15px; color: #4b5563; margin-bottom: 20px; line-height: 1.5; }

.box-link { color: #3b82f6; font-weight: 500; text-decoration: none; transition: color 0.2s; }
.box-link:hover { color: #2563eb; text-decoration: underline; }
.manual-link { display: inline-block; font-size: 14px; color: #6b7280; text-decoration: underline; cursor: pointer; margin-bottom: 24px; }
.manual-link:hover { color: #d99000; }

.option-divider { display: flex; align-items: center; margin: 0 0 24px 0; color: #9ca3af; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; max-width: 650px; }
.option-divider::before, .option-divider::after { content: ''; flex: 1; height: 1px; background-color: #e5e7eb; }
.option-divider span { padding: 0 16px; }

/* Callback URL Fields */
.url-display-group { display: flex; gap: 0; margin-bottom: 24px; }
.url-input { width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-right: none; border-radius: 6px 0 0 6px; font-size: 14px; font-family: 'Monaco', 'Consolas', monospace; background: var(--code-bg); color: #374151; outline: none; }
.copy-btn { background-color: #e5e7eb; border: 1px solid #d1d5db; border-radius: 0 6px 6px 0; padding: 0 16px; cursor: pointer; font-weight: 600; font-size: 13px; color: #374151; transition: background 0.2s; }
.copy-btn:hover { background-color: #d1d5db; }

/* Error Alert Fields */
.bb-error-alert { background-color: var(--error-bg); border: 1px solid var(--error-border); border-radius: 6px; padding: 20px; margin-bottom: 24px; box-sizing: border-box; }
.error-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--error-text); font-weight: 700; font-size: 15px; }
.error-icon { width: 20px; height: 20px; flex-shrink: 0; }
.error-body { font-size: 14px; color: var(--error-text); line-height: 1.5; margin-left: 30px; }
.domain-copy-group { display: flex; margin-top: 12px; margin-bottom: 8px; width: 100%; }
.domain-input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid #f87171; border-right: none; border-radius: 4px 0 0 4px; font-size: 13px; font-family: 'Monaco', 'Consolas', monospace; background: var(--code-bg); color: #374151; outline: none; box-sizing: border-box; }
.copy-btn-error { background-color: #fff; border: 1px solid #f87171; border-radius: 0 4px 4px 0; padding: 0 12px; cursor: pointer; font-weight: 600; font-size: 12px; color: #991b1b; transition: background 0.2s; white-space: nowrap; }
.copy-btn-error:hover { background-color: #fef2f2; }
.text-input.input-error { border-color: #ef4444; background-color: #fef2f2; }

/* --- OVERVIEW GRID STYLES --- */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, 1fr); gap: 24px; margin-top: 32px; }
.tool-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; transition: box-shadow 0.2s, border-color 0.2s; }
.tool-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); border-color: #d1d5db; }
.tool-header { display: flex; gap: 16px; margin-bottom: 12px; }
.tool-icon-box { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; }

/* Icon Colors */
.icon-blue { background-color: #4285F4; }
.icon-purple { background-color: #8E24AA; }
.icon-green { background-color: #34A853; }
.icon-orange { background-color: #F59E0B; }
.icon-teal { background-color: #0D9488; }
.icon-red { background-color: #E11D48; }

.tool-title-wrapper { display: flex; flex-direction: column; justify-content: center; }
.tool-title { font-size: 18px; font-weight: 700; color: var(--bb-dark); margin: 0; display: flex; align-items: center; gap: 6px; }
.tool-desc { font-size: 14px; color: var(--bb-text); line-height: 1.5; margin: 0 0 24px 0; flex-grow: 1; }
.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-tag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; text-decoration: none; background-color: #f3f4f6; color: #4b5563; transition: background-color 0.2s; cursor: pointer; border: none; font-family: inherit; }
.tool-tag:hover { background-color: #e5e7eb; }
.tool-tag-help { background-color: #e0e7ff; color: #3730a3; }
.tool-tag-help:hover { background-color: #c7d2fe; }

/* --- INTEGRATION GRID STYLES --- */
.wp-integration-panel { background-color: #f8fafc; border: 1px solid var(--border-color); border-radius: 16px; padding: 32px 24px; margin-bottom: 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.wp-integration-info { display: flex; align-items: center; gap: 20px; }
.wp-logo { width: 56px; height: 56px; background: #2271b1; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.integration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; margin-top: 24px; }
.integration-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 16px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; color: var(--bb-dark); transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s; cursor: pointer; }
.integration-card:hover { box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05); border-color: #d1d5db; transform: translateY(-2px); }
.integration-icon { width: 56px; height: 56px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; }
.integration-name { font-size: 16px; font-weight: 500; margin: 0 0 20px 0; color: #374151; }
.status-circle { width: 22px; height: 22px; border: 2px solid var(--bb-dark); border-radius: 50%; background: transparent; transition: background 0.2s; }
.integration-card:hover .status-circle { background: #f3f4f6; }

/* --- LOCKED OVERLAY --- */
.not-connected-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); z-index: 10;  flex-direction: column; align-items: center; justify-content: flex-start; padding-bottom: 10vh; }
.lock-card { margin-top: 15vh; background: white; padding: 48px; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); border: 1px solid var(--border-color); text-align: center; max-width: 480px; }
.skip-link { color: #6b7280; font-size: 14px; text-decoration: underline; cursor: pointer; display: inline-block; margin-top: 16px; transition: color 0.2s; }
.skip-link:hover { color: var(--bb-dark); }
.content-wrapper { transition: opacity 0.3s, filter 0.3s; }

/* --- LOADING SPINNER OVERLAY --- */
#global-loading, #account-setup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 9999; }
.bb-loading-card { background: #ffffff; width: 100%; max-width: 440px; padding: 48px 32px; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); text-align: center; border: 1px solid #e5e7eb; }
.bb-spinner { width: 50px; height: 50px; border: 4px solid #e5e7eb; border-top: 4px solid var(--bb-primary); border-radius: 50%; margin: 0 auto 32px auto; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Placeholder specific styles */
.empty-state { text-align: center; padding: 60px 20px; background: #ffffff; border: 1px dashed #d1d5db; border-radius: 12px; margin-top: 40px; }


@media(min-width: 1024px){
  .tools-grid{
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
}

/* --- SUBDOMAIN TRACKING --- */
.logo-placeholder { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: white; margin-bottom: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }

.btn-copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; transition: all 0.2s; }
.btn-copy:hover { background: #f3f4f6; }
.btn-copy.copied { background: #10b981; color: white; border-color: #10b981; }

.ext-icon { margin-left: 4px; opacity: 0.6; font-size: 1em; line-height: 1; vertical-align: middle; }
.toplevel_page_breadbutter_connect #wpfooter{display: none;}
.toplevel_page_breadbutter_connect #wpbody-content {padding-bottom: 0;}
@media(max-width: 1299px){
 .breadbutter-full-content .breadbutter-nav-content{
  box-sizing: border-box;
  width: 100%;
 }
}
@media (min-width: 1300px) {
  .breadbutter-full-content {
    height: calc(100vh - 32px);
    /*height: 100%;*/
    overflow: hidden;
    position: relative;
  }
  .breadbutter-full-content .breadbutter-nav-content,
  .breadbutter-full-content .breadbutter-main-content {
    overflow-y: auto;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
  }
}

.bb-merge-popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: center;

    padding-top: 40px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(16.6px);
    background-color: rgba(28, 28, 28, 0.1);
    padding-bottom: 40px;
}

.bb-merge-popup.hidden {
    display: none;
}

.bb-merge-card {
    width: 420px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 24px;
    text-align: center;
}

.bb-merge-account {
    border: 1px solid #d0d7ff;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    background: #f9fafc;
    margin-top: 12px;
}

.bb-merge-account .bb-note {
    text-align: left;
    margin-bottom: 12px;
}

.bb-merge-account-card {
    border: 1px solid #4f81ee;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
}

.bb-merge-account-card .bb-check{
    color: #4f81ee;
}

.bb-contineue-separate {
    cursor: pointer;
}

.bb-merge-btn {
    margin-top: 20px;
    width: 100%;
    background: #4a6cf7;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 12px;
    max-width: 250px;
}

.bb-merge-name {
    font-size: 1.2em;
    font-weight: 600;
    text-align: left;
}
.bb-merge-domain {
    text-align: left;
}