:root {
  --bm-accent-train-start: #00bcd4;
  --bm-accent-train-end: #0097a7;
  --bm-accent-predict-start: #26c6da;
  --bm-accent-predict-end: #00acc1;
  --bm-shadow-train: 0 4px 15px rgba(0, 188, 212, 0.3);
  --bm-shadow-predict: 0 4px 15px rgba(38, 198, 218, 0.3);
}

.bm-half-width {
  width: 50%;
}

.bm-full-width {
  width: 100%;
}

.bm-upload-dropzone {
  width: 50%;
  border-width: 1px;
  border-style: dashed;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
}

.bm-card-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.bm-card-body-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
}

.bm-gradient-button {
  width: 50%;
  border: none !important;
  transition: all 0.3s ease;
}

.bm-gradient-button--train {
  background: linear-gradient(45deg, var(--bm-accent-train-start), var(--bm-accent-train-end)) !important;
  box-shadow: var(--bm-shadow-train);
}

.bm-gradient-button--predict {
  background: linear-gradient(45deg, var(--bm-accent-predict-start), var(--bm-accent-predict-end)) !important;
  box-shadow: var(--bm-shadow-predict);
}

.bm-collapse-fill {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.bm-panel-collapse {
  height: 100%;
  overflow: hidden;
}

.bm-split-stack {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bm-panel-box {
  padding: 0;
  transition: height 0.3s ease;
  overflow: hidden;
}

#split-wrapper .Resizer,
#split-wrapper .react-split__sash {
  background: #c8c8c8 !important;
  opacity: 1 !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  background-clip: padding-box !important;
}

#split-wrapper .Resizer.horizontal,
#split-wrapper .react-split__sash--horizontal {
  height: 8px !important;
  cursor: row-resize !important;
}

#split-wrapper .Resizer.vertical,
#split-wrapper .react-split__sash--vertical {
  width: 8px !important;
  cursor: col-resize !important;
}