/* Background restored close to the first app */
gradio-app,
.gradio-app,
.main,
#app,
[data-testid="app"] {
  background-color: rgb(15, 23, 42) !important;
  background-image:
    url("https://huggingface.co/spaces/XRachel/bc4/resolve/main/assets/BankChurn.png") !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  min-height: 100vh !important;
}

html, body {
  background-color: rgb(15, 23, 42) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}

.gradio-container {
  max-width: 1400px !important;
  width: 94vw !important;
  margin: 0 auto !important;
  padding-top: 220px !important;
  padding-bottom: 140px !important;
  background: transparent !important;
}

#escp_title h1 {
  color: rgb(242, 198, 55) !important;
  font-size: 3rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
}

#escp_title p,
#escp_title em {
  color: rgba(255, 255, 255, 0.9) !important;
  text-align: center !important;
}

.tabs > .tab-nav,
.tab-nav,
div[role="tablist"] {
  background: rgba(15, 23, 42, 0.60) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 4px !important;
}

.tabs > .tab-nav button,
.tab-nav button,
div[role="tablist"] button,
button[role="tab"] {
  color: #ffffff !important;
  font-weight: 600 !important;
  border: none !important;
  background: transparent !important;
  padding: 10px 20px !important;
  border-radius: 8px 8px 0 0 !important;
  opacity: 1 !important;
}

.tabs > .tab-nav button.selected,
.tab-nav button.selected,
button[role="tab"][aria-selected="true"],
div[role="tablist"] button[aria-selected="true"] {
  color: rgb(242, 198, 55) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.gradio-container .gr-block,
.gradio-container .gr-box,
.gradio-container .gr-panel,
.gradio-container .gr-group,
.tabitem {
  background: rgba(255, 255, 255, 0.97) !important;
  border-radius: 12px !important;
}

.tabitem {
  padding: 16px !important;
}

.gradio-container input,
.gradio-container textarea,
.gradio-container select {
  border-radius: 10px !important;
}

button:not([role="tab"]) {
  border-radius: 10px !important;
  font-weight: 700 !important;
}