/* =============================================
   Bewerbungsformular – Stylesheet v1.2
   Vollständig theme-isoliert:
   Keine h2/p/label-Selektoren – nur eigene
   Klassen auf neutralen span/div-Elementen.
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=DM+Sans:wght@400;500&display=swap');

/* ── CSS-Variablen ─────────────────────────── */
.bf-wrapper {
  /* Button-Farben – überschrieben durch BF_Design inline CSS */
  --bf-btn-primary-bg:           #1a3a6b;
  --bf-btn-primary-text:         #ffffff;
  --bf-btn-primary-bg-hover:     #2554a3;
  --bf-btn-primary-text-hover:   #ffffff;
  --bf-btn-secondary-bg:         #f5f7fb;
  --bf-btn-secondary-text:       #6b7994;
  --bf-btn-secondary-border:     #dce3ef;
  --bf-btn-secondary-bg-hover:   #ffffff;
  --bf-btn-secondary-text-hover: #1a3a6b;
  --bf-btn-secondary-border-hover: #2554a3;
  --bf-btn-submit-bg:            #e8552a;
  --bf-btn-submit-bg2:           #f47c54;
  --bf-btn-submit-text:          #ffffff;
  --bf-btn-submit-text-hover:    #ffffff;
  /* Abstände & Schrift – überschrieben durch BF_Design inline CSS */
  --bf-space-field:  22px;
  --bf-space-grid:   19px;
  --bf-space-step:   40px;
  --bf-space-header: 32px;
  --bf-space-option: 14px;
  --bf-font-base:    16px;
  --bf-font-label:   14px;
  --bf-font-input:   15px;
  --bf-primary:       #1a3a6b;
  --bf-primary-light: #2554a3;
  --bf-accent:        #e8552a;
  --bf-accent-light:  #f47c54;
  --bf-bg:            #f5f7fb;
  --bf-surface:       #ffffff;
  --bf-border:        #dce3ef;
  --bf-text:          #1c2333;
  --bf-muted:         #6b7994;
  --bf-success:       #1a7a4a;
  --bf-error:         #c0392b;
  --bf-error-bg:      #fdecea;
  --bf-radius:        12px;
  --bf-radius-sm:     8px;
  --bf-shadow:        0 4px 24px rgba(26,58,107,.10);
  --bf-shadow-hover:  0 8px 32px rgba(26,58,107,.18);
  --bf-ease:          .22s ease;
  --bf-font:          'Sora', 'DM Sans', system-ui, sans-serif;
}

/* ── Wrapper ───────────────────────────────── */
.bf-wrapper {
  all:         initial; /* Kern-Reset gegen Theme-Inheritance */
  display:     block;
  font-family: var(--bf-font);
  font-size:   16px;
  line-height: 1.5;
  color:       var(--bf-text);
  max-width:   780px;
  margin:      2rem auto;
  padding:     0 1rem;
  box-sizing:  border-box;
}

/* all:initial setzt auch box-sizing zurück – explizit wiederherstellen */
.bf-wrapper *,
.bf-wrapper *::before,
.bf-wrapper *::after {
  box-sizing: border-box;
}

/* Inputs / Buttons bekommen durch all:initial manchmal komische Defaults */
.bf-wrapper input,
.bf-wrapper select,
.bf-wrapper textarea,
.bf-wrapper button {
  font-family: var(--bf-font);
  font-size:   1rem;
  color:       var(--bf-text);
}

.bf-wrapper .hidden {
  display: none !important;
}

/* ── Fortschrittsbalken ────────────────────── */
.bf-progress {
  display:       block;
  margin-bottom: 2.5rem;
}

.bf-progress-track {
  display:       block;
  height:        6px;
  background:    var(--bf-border);
  border-radius: 3px;
  overflow:      hidden;
  margin-bottom: 1.2rem;
}

.bf-progress-bar {
  display:       block;
  height:        100%;
  background:    linear-gradient(90deg, var(--bf-primary-light), var(--bf-accent));
  border-radius: 3px;
  width:         25%;
  transition:    width .5s cubic-bezier(.4,0,.2,1);
}

.bf-steps-indicator {
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
  align-items:     flex-start;
  list-style:      none;
  margin:          0;
  padding:         0;
}

.bf-step-dot {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .4rem;
  flex:           1;
  min-width:      0;
  cursor:         default;
}

.bf-dot-inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  flex-shrink:     0;
  border-radius:   50%;
  background:      var(--bf-surface);
  border:          2px solid var(--bf-border);
  font-size:       .85rem;
  font-weight:     600;
  color:           var(--bf-muted);
  transition:      all var(--bf-ease);
  line-height:     1;
}

.bf-step-dot.active   .bf-dot-inner {
  background:   var(--bf-primary);
  border-color: var(--bf-primary);
  color:        #fff;
  box-shadow:   0 0 0 4px rgba(26,58,107,.15);
}
.bf-step-dot.completed .bf-dot-inner {
  background:   var(--bf-success);
  border-color: var(--bf-success);
  color:        #fff;
}

.bf-dot-label {
  display:     block;
  font-size:   .75rem;
  font-weight: 500;
  color:       var(--bf-muted);
  text-align:  center;
  line-height: 1.2;
}
.bf-step-dot.active .bf-dot-label {
  color:       var(--bf-primary);
  font-weight: 600;
}

/* ── Schritte ──────────────────────────────── */
.bf-step {
  display:       block;
  background:    var(--bf-surface);
  border-radius: var(--bf-radius);
  padding:       var(--bf-space-step);
  box-shadow:    var(--bf-shadow);
  animation:     bf-fadein .3s ease;
}

@keyframes bf-fadein {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Step-Header ───────────────────────────── */
.bf-step-header {
  display:       flex;
  flex-direction: column;
  align-items:   center;
  text-align:    center;
  margin-bottom: var(--bf-space-header);
  gap:           .4rem;
}

.bf-step-icon {
  display:     block;
  font-size:   2.5rem;
  line-height: 1;
}

/* SPAN statt h2 – kein Theme kann das überschreiben */
.bf-step-title {
  display:        block;
  font-family:    var(--bf-font);
  font-size:      1.5rem;
  font-weight:    700;
  color:          var(--bf-primary);
  line-height:    1.3;
  margin:         0;
  padding:        0;
}

.bf-step-sub {
  display:     block;
  font-family: var(--bf-font);
  font-size:   .95rem;
  color:       var(--bf-muted);
  line-height: 1.5;
  margin:      0;
  padding:     0;
}

/* ── Berufsgitter ──────────────────────────── */
.bf-beruf-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   var(--bf-space-option);
  margin-bottom:         var(--bf-space-field);
}

/* DIV statt label – kein Theme-label-Override mehr */
.bf-beruf-card {
  display:        flex !important;
  flex-direction: row !important;
  align-items:    center !important;
  flex-wrap:      nowrap !important;
  gap:            calc(var(--bf-space-option) * 0.5);
  padding:        1rem 1.1rem;
  border:         2px solid var(--bf-border);
  border-radius:  var(--bf-radius);
  cursor:         pointer;
  transition:     border-color var(--bf-ease), box-shadow var(--bf-ease), transform var(--bf-ease), background var(--bf-ease);
  background:     var(--bf-surface);
  user-select:    none;
  position:       relative;
  overflow:       hidden;
  box-sizing:     border-box;
  width:          100%;
  min-height:     0;
}

.bf-beruf-card:hover {
  border-color: var(--bf-primary-light);
  box-shadow:   var(--bf-shadow-hover);
  transform:    translateY(-2px);
}

.bf-beruf-card.is-selected {
  border-color: var(--bf-primary);
  background:   rgba(26,58,107,.05);
  box-shadow:   0 0 0 1px var(--bf-primary), var(--bf-shadow);
}

/* Radio verstecken */
.bf-beruf-card input[type="radio"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
  margin:   0;
  padding:  0;
  pointer-events: none;
}

/* Checkkreis */
.bf-beruf-check {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  flex-shrink:     0;
  border-radius:   50%;
  border:          2px solid var(--bf-border);
  font-size:       .75rem;
  color:           transparent;
  background:      transparent;
  transition:      all var(--bf-ease);
  line-height:     1;
}

.bf-beruf-card.is-selected .bf-beruf-check {
  background:   var(--bf-primary);
  border-color: var(--bf-primary);
  color:        #fff;
}

/* Label innerhalb der Karte – nur Text, kein Block-Override nötig */
.bf-beruf-name {
  display:     block !important;
  font-family: var(--bf-font) !important;
  font-size:   var(--bf-font-input) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color:       var(--bf-text) !important;
  cursor:      pointer;
  margin:      0 !important;
  padding:     0 !important;
  width:       auto !important;
  max-width:   100%;
  flex:        1 1 auto;
  min-width:   0;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.bf-beruf-card.is-selected .bf-beruf-name {
  color:       var(--bf-primary);
  font-weight: 600;
}

/* ── 2-Spalten-Grid ────────────────────────── */
.bf-grid-2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--bf-space-grid);
}

/* ── Formularfeld-Block ────────────────────── */
.bf-field {
  display: block;
  margin-bottom: var(--bf-space-field);
}

/* SPAN statt label – vermeidet jegliche Theme-label-Styles */
.bf-label {
  display:        block;
  font-family:    var(--bf-font);
  font-size:      var(--bf-font-label);
  font-weight:    600;
  color:          var(--bf-text);
  line-height:    1.4;
  margin:         0 0 .45rem 0;
  padding:        0;
}

.bf-required { color: var(--bf-accent); }

.bf-input,
.bf-select,
.bf-textarea {
  display:     block;
  width:       100%;
  padding:     .75rem 1rem;
  border:      2px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  font-family: var(--bf-font);
  font-size:   var(--bf-font-input);
  line-height: 1.5;
  color:       var(--bf-text);
  background:  var(--bf-bg);
  outline:     none;
  box-shadow:  none;
  margin:      0;
  transition:  border-color var(--bf-ease), box-shadow var(--bf-ease), background var(--bf-ease);
  -webkit-appearance: none;
  appearance:  none;
}

.bf-input:focus,
.bf-select:focus,
.bf-textarea:focus {
  border-color: var(--bf-primary-light);
  box-shadow:   0 0 0 3px rgba(37,84,163,.15);
  background:   var(--bf-surface);
  outline:      none;
}

.bf-input.error,
.bf-select.error,
.bf-textarea.error {
  border-color: var(--bf-error);
  box-shadow:   0 0 0 3px rgba(192,57,43,.12);
}

.bf-textarea {
  min-height: 110px;
  resize:     vertical;
}

.bf-select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7994' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 1rem center;
  padding-right:       2.5rem;
  cursor:              pointer;
}

.bf-field-error {
  display:     block;
  font-size:   .8rem;
  font-weight: 500;
  color:       var(--bf-error);
  line-height: 1.3;
  margin-top:  .35rem;
  min-height:  0;
}

/* ── Checkbox ──────────────────────────────── */
.bf-checkbox-wrap {
  display:        flex !important;
  flex-direction: row !important;
  align-items:    flex-start !important;
  flex-wrap:      nowrap !important;
  gap:            .85rem;
  margin:         1.5rem 0 1rem;
  position:       relative;
  cursor:         pointer;
  width:          100%;
  box-sizing:     border-box;
}

.bf-checkbox-input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
  margin:   0;
  padding:  0;
  pointer-events: none;
}

.bf-checkmark {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           22px;
  height:          22px;
  border:          2px solid var(--bf-border);
  border-radius:   5px;
  margin-top:      2px;
  background:      var(--bf-bg);
  transition:      all var(--bf-ease);
  cursor:          pointer;
}

.bf-checkbox-input:checked ~ .bf-checkmark {
  background:   var(--bf-primary);
  border-color: var(--bf-primary);
}

.bf-checkbox-input:checked ~ .bf-checkmark::after {
  content:     '';
  display:     block;
  width:       5px;
  height:      10px;
  border:      2px solid #fff;
  border-top:  none;
  border-left: none;
  transform:   rotate(45deg) translateY(-1px);
}

.bf-checkbox-text {
  display:     block !important;
  font-family: var(--bf-font) !important;
  font-size:   .9rem !important;
  font-weight: normal !important;
  line-height: 1.5 !important;
  color:       var(--bf-text) !important;
  cursor:      pointer;
  margin:      0 !important;
  padding:     0 !important;
  width:       auto !important;
  flex:        1 1 auto;
  min-width:   0;
}

.bf-checkbox-text a {
  color:           var(--bf-primary-light);
  text-decoration: underline;
}

/* ── Navigation ────────────────────────────── */
.bf-nav {
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
  align-items:     center;
  gap:             1rem;
  margin-top:      2rem;
  padding-top:     1.5rem;
  border-top:      1px solid var(--bf-border);
}

.bf-btn {
  display:         inline-flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: center;
  gap:             .5rem;
  padding:         .8rem 2rem;
  border-radius:   var(--bf-radius-sm);
  font-family:     var(--bf-font);
  font-size:       .95rem;
  font-weight:     600;
  line-height:     1;
  white-space:     nowrap;
  cursor:          pointer;
  border:          none;
  outline:         none;
  text-decoration: none;
  transition:      all var(--bf-ease);
  -webkit-appearance: none;
  appearance:      none;
}

.bf-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(26,58,107,.3);
}

.bf-btn-primary {
  background: var(--bf-btn-primary-bg);
  color:      var(--bf-btn-primary-text);
}
.bf-btn-primary:hover {
  background: var(--bf-btn-primary-bg-hover);
  color:      var(--bf-btn-primary-text-hover);
  transform:  translateY(-1px);
  box-shadow: 0 4px 14px rgba(26,58,107,.3);
}

.bf-btn-secondary {
  background:  var(--bf-btn-secondary-bg);
  color:       var(--bf-btn-secondary-text);
  border:      2px solid var(--bf-btn-secondary-border);
}
.bf-btn-secondary:hover {
  background:   var(--bf-btn-secondary-bg-hover);
  border-color: var(--bf-btn-secondary-border-hover);
  color:        var(--bf-btn-secondary-text-hover);
}

.bf-btn-submit {
  background: linear-gradient(135deg, var(--bf-btn-submit-bg), var(--bf-btn-submit-bg2));
  color:      var(--bf-btn-submit-text);
  padding:    .85rem 2.5rem;
  font-size:  1rem;
}
.bf-btn-submit:hover:not(:disabled) {
  filter:     brightness(1.08);
  transform:  translateY(-1px);
  box-shadow: 0 6px 20px rgba(232,85,42,.35);
  color:      var(--bf-btn-submit-text-hover);
}
.bf-btn-submit:disabled {
  opacity: .6;
  cursor:  not-allowed;
}

.bf-btn-spinner {
  display:   inline-block;
  animation: bf-spin 1s linear infinite;
  font-size: 1.1rem;
  line-height: 1;
}
@keyframes bf-spin { to { transform: rotate(360deg); } }

/* ── Zusammenfassung ───────────────────────── */
.bf-summary {
  display:       block;
  background:    var(--bf-bg);
  border:        1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  padding:       1.4rem 1.6rem;
  margin-bottom: 1.5rem;
  font-size:     .9rem;
  line-height:   1.6;
}

.bf-summary-row {
  display:       flex;
  flex-direction: row;
  gap:           .6rem;
  padding:       .35rem 0;
  border-bottom: 1px solid var(--bf-border);
}
.bf-summary-row:last-child { border-bottom: none; }

.bf-summary-key {
  display:        block;
  min-width:      150px;
  flex-shrink:    0;
  font-weight:    600;
  font-size:      .82rem;
  color:          var(--bf-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-top:    2px;
}

.bf-summary-val {
  display: block;
  color:   var(--bf-text);
}

/* ── Erfolgsmeldung ────────────────────────── */
.bf-success {
  display:       block;
  background:    var(--bf-surface);
  border:        2px solid var(--bf-success);
  border-radius: var(--bf-radius);
  padding:       3rem 2.5rem;
  text-align:    center;
  box-shadow:    var(--bf-shadow);
  animation:     bf-fadein .4s ease;
}

.bf-success-icon {
  display:       block;
  font-size:     3.5rem;
  line-height:   1;
  margin-bottom: .8rem;
}

.bf-success-title {
  display:     block;
  font-family: var(--bf-font);
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--bf-success);
  line-height: 1.3;
  margin:      0 0 .8rem;
}

.bf-success-msg {
  display:     block;
  font-family: var(--bf-font);
  font-size:   1rem;
  color:       var(--bf-muted);
  line-height: 1.5;
}

/* ── Fehlerbox ─────────────────────────────── */
.bf-error-box {
  display:       block;
  background:    var(--bf-error-bg);
  border:        1px solid var(--bf-error);
  border-radius: var(--bf-radius-sm);
  padding:       1rem 1.4rem;
  color:         var(--bf-error);
  font-size:     .9rem;
  font-weight:   500;
  line-height:   1.5;
  margin-top:    1rem;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .bf-step            { padding: 1.6rem 1.2rem; }
  .bf-step-title      { font-size: 1.25rem; }
  .bf-beruf-grid      { grid-template-columns: 1fr 1fr; }
  .bf-grid-2          { grid-template-columns: 1fr; gap: var(--bf-space-field); }
  .bf-btn             { padding: .75rem 1.4rem; font-size: .88rem; }
  .bf-btn-submit      { padding: .8rem 1.6rem; }
  .bf-dot-label       { display: none; }
  .bf-nav             { gap: .5rem; }
}

@media (max-width: 400px) {
  .bf-beruf-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   OPTIONSAUSWAHL (Radio-Gruppe & Checkbox-Gruppe)
══════════════════════════════════════════════ */
.bf-option-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--bf-space-option);
  margin:         0;
  padding:        0;
}

.bf-option-item {
  display:        flex !important;
  flex-direction: row !important;
  align-items:    center !important;
  flex-wrap:      nowrap !important;
  gap:            calc(var(--bf-space-option) * 0.5);
  padding:        .65rem .9rem;
  border:         2px solid var(--bf-border);
  border-radius:  var(--bf-radius-sm);
  cursor:         pointer;
  background:     var(--bf-bg);
  transition:     border-color var(--bf-ease), background var(--bf-ease), box-shadow var(--bf-ease);
  user-select:    none;
  position:       relative;
  box-sizing:     border-box;
  width:          100%;
  min-height:     0;
  overflow:       hidden;
}

.bf-option-item:hover {
  border-color: var(--bf-primary-light);
  background:   var(--bf-surface);
}

.bf-option-item.is-selected {
  border-color: var(--bf-primary);
  background:   rgba(26,58,107,.05);
  box-shadow:   0 0 0 1px var(--bf-primary);
}

/* Natives Input verstecken */
.bf-option-item input[type="radio"],
.bf-option-item input[type="checkbox"] {
  position:       absolute !important;
  opacity:        0 !important;
  width:          0 !important;
  height:         0 !important;
  margin:         0 !important;
  padding:        0 !important;
  pointer-events: none;
}

/* Visueller Indikator – rund für Radio, eckig für Checkbox */
.bf-option-check {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0;
  width:           20px !important;
  height:          20px !important;
  border:          2px solid var(--bf-border) !important;
  background:      var(--bf-surface) !important;
  transition:      all var(--bf-ease);
  box-sizing:      border-box;
}

.bf-option-check--radio {
  border-radius: 50%;
}

.bf-option-check--checkbox {
  border-radius: 4px;
}

/* Gewählter Zustand */
.bf-option-item.is-selected .bf-option-check {
  background:   var(--bf-primary) !important;
  border-color: var(--bf-primary) !important;
}

/* Radio: ausgefüllter Punkt */
.bf-option-item.is-selected .bf-option-check--radio::after {
  content:       '';
  display:       block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    #fff;
}

/* Checkbox: Häkchen */
.bf-option-item.is-selected .bf-option-check--checkbox::after {
  content:     '';
  display:     block;
  width:       5px;
  height:      9px;
  border:      2px solid #fff;
  border-top:  none;
  border-left: none;
  transform:   rotate(45deg) translateY(-1px);
}

/* Optionstext – SPAN, kein label */
.bf-option-label {
  display:     block !important;
  font-family: var(--bf-font) !important;
  font-size:   .9rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color:       var(--bf-text) !important;
  cursor:      pointer;
  margin:      0 !important;
  padding:     0 !important;
  width:       auto !important;
  flex:        1 1 auto;
  min-width:   0;
}

.bf-option-item.is-selected .bf-option-label {
  color:       var(--bf-primary) !important;
  font-weight: 500 !important;
}

/* ══════════════════════════════════════════════
   DATEI-UPLOAD
══════════════════════════════════════════════ */
.bf-upload-section {
  display:        block;
  margin-bottom:  1.5rem;
}

.bf-upload-section-title {
  display:        block;
  font-family:    var(--bf-font);
  font-size:      1rem;
  font-weight:    600;
  color:          var(--bf-text);
  margin-bottom:  .2rem;
}

.bf-upload-section-hint {
  display:        block;
  font-family:    var(--bf-font);
  font-size:      .8rem;
  color:          var(--bf-muted);
  margin-bottom:  1rem;
}

.bf-upload-field {
  display:        block;
  margin-bottom:  var(--bf-space-option);
}

/* Drop-Zone */
.bf-upload-drop {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    center !important;
  justify-content: center !important;
  gap:            .4rem;
  padding:        1rem 1.2rem;
  border:         2px dashed var(--bf-border);
  border-radius:  var(--bf-radius-sm);
  background:     var(--bf-bg);
  cursor:         pointer;
  transition:     border-color var(--bf-ease), background var(--bf-ease);
  min-height:     80px;
  position:       relative;
  text-align:     center;
  width:          100%;
  box-sizing:     border-box;
}

.bf-upload-drop:hover,
.bf-upload-drop.bf-upload-dragover {
  border-color: var(--bf-primary-light);
  background:   rgba(37,84,163,.04);
}

.bf-upload-drop.bf-upload-has-file {
  border-style:  solid;
  border-color:  var(--bf-success);
  background:    rgba(26,122,74,.04);
}

.bf-upload-drop.bf-upload-error {
  border-color: var(--bf-error) !important;
  background:   var(--bf-error-bg) !important;
}

/* Natives Input unsichtbar, aber über ganzen Drop-Bereich */
.bf-upload-input {
  position:       absolute !important;
  inset:          0 !important;
  opacity:        0 !important;
  width:          100% !important;
  height:         100% !important;
  cursor:         pointer;
  margin:         0 !important;
  padding:        0 !important;
}

.bf-upload-icon {
  display:        block;
  font-size:      1.8rem;
  line-height:    1;
  pointer-events: none;
}

.bf-upload-text {
  display:        block !important;
  font-family:    var(--bf-font) !important;
  font-size:      .85rem !important;
  color:          var(--bf-muted) !important;
  pointer-events: none;
  margin:         0 !important;
}

.bf-upload-chosen {
  display:        block !important;
  font-family:    var(--bf-font) !important;
  font-size:      .85rem !important;
  font-weight:    600 !important;
  color:          var(--bf-success) !important;
  pointer-events: none;
  word-break:     break-all;
  margin:         0 !important;
}

.bf-upload-drop.bf-upload-error .bf-upload-chosen {
  color:          var(--bf-error) !important;
}