.bb-wk-wrap,
.bb-wk-form,
.bb-wk-predictions,
.bb-wk-leaderboard,
.bb-wk-rules-wrap {
  --blackColor:#000;
  --whiteColor:#fff;
  --backgroundColor:#fff;
  --baseColor:#b8b8b8;
  --baseDarkColor:#999;
  --baseDarkerColor:#7a7a7a;
  --baseDarkestColor:#525252;
  --baseLightColor:#dcdcdc;
  --baseLighterColor:#f0f0f0;
  --baseLightestColor:#f9f9f9;
  --navColor:#333;
  --primaryColor:#812580;
  --primaryDarkColor:#812580;
  --primaryDarkerColor:#812580;
  --primaryDarkestColor:#812580;
  --primaryLightColor:#bd2384;
  --primaryLighterColor:#bd2384;
  --primaryLightestColor:#bd2384;
  --secondaryColor:#6fac25;
  --secondaryDarkColor:#6fac25;
  --secondaryDarkerColor:#6fac25;
  --secondaryDarkestColor:#6fac25;
  --secondaryLightColor:#6fac25;
  --secondaryLighterColor:#6fac25;
  --secondaryLightestColor:#ebf4f2;
  --accentColor:#000;
  --textThemeDark:#4a4a49;
  --textThemeLight:#fff;
  --textThemeColor:#812580;
  --neutralColor:#2196f3;
  --neutralLightColor:#1565c0;
  --neutralDarkColor:#e3f2fd;
  --alertColor:#f44336;
  --alertLightColor:#ffebee;
  --alertDarkColor:#c62828;
  --positiveColor:#4caf50;
  --positiveLightColor:#2e7d32;
  --positiveDarkColor:#e8f5e9;
  --statementColor:#ff9800;
  --statementLightColor:#ef6c00;
  --statementDarkColor:#fff3e0;
  --headerFont:sans-serif;
  --headerWeight:700;
  --defaultFont:sans-serif;
  --defaultWeight:400;
  --defaultBoldWeight:700;
  --buttonFont:sans-serif;
  --buttonWeight:500;
  --default-Radius:0;
  --default-Radius-Small:0;
  --default-Radius-Medium:0;
  --default-Radius-Large:0;
  --elementBg-Radius:0;
  --button-Radius:0;
  --input-Radius:0;
  background:var(--backgroundColor);
  color:var(--textThemeDark);
  font-family:var(--defaultFont);
  font-weight:var(--defaultWeight);
  font-size:14px;
  line-height:1.6;
  box-sizing:border-box;
  width:100%;
}

.bb-wk-wrap *,
.bb-wk-form *,
.bb-wk-predictions *,
.bb-wk-leaderboard *,
.bb-wk-rules-wrap * { box-sizing:border-box; }

.bb-wk-wrap a,
.bb-wk-form a,
.bb-wk-predictions a,
.bb-wk-leaderboard a,
.bb-wk-rules-wrap a { color:var(--primaryDarkColor); transition:.3s; }

.bb-wk-wrap h1,
.bb-wk-wrap h2,
.bb-wk-wrap h3,
.bb-wk-wrap h4,
.bb-wk-form h3,
.bb-wk-predictions h3,
.bb-wk-leaderboard h3,
.bb-wk-rules-wrap h3 {
  font-family:var(--headerFont);
  font-weight:var(--headerWeight);
  color:var(--textThemeColor);
  line-height:1.25;
  margin:0 0 8px;
  padding:0;
}

.bb-wk-wrap h2 { font-size:30px; }
.bb-wk-wrap h3,
.bb-wk-form h3,
.bb-wk-predictions h3,
.bb-wk-leaderboard h3,
.bb-wk-rules-wrap h3 { font-size:20px; }

.bb-wk-form,
.bb-wk-phase,
.bb-wk-summary {
  border:1px solid var(--baseLighterColor);
  border-radius:var(--elementBg-Radius);
  padding:20px;
  margin:0 0 20px;
  background:var(--whiteColor);
}

.bb-wk-form label,
.bb-wk-predictions label { display:block; margin:0 0 12px; font-size:14px; }

.bb-wk-form input,
.bb-wk-form select,
.bb-wk-predictions input,
.bb-wk-predictions select {
  width:100%;
  min-height:40px;
  border:1px solid var(--baseLightColor);
  border-radius:var(--input-Radius);
  padding:8px 10px;
  background:var(--whiteColor);
  color:var(--textThemeDark);
  font-family:var(--defaultFont);
  font-size:14px;
}

.bb-wk-form input:focus,
.bb-wk-form select:focus,
.bb-wk-predictions input:focus,
.bb-wk-predictions select:focus {
  outline:0;
  border-color:var(--primaryColor);
  box-shadow:0 0 0 2px rgba(129,37,128,.12);
}

.bb-wk-form button,
.bb-wk-predictions button,
.bb-wk-button {
  display:inline-block;
  background:var(--primaryDarkColor);
  color:var(--textThemeLight)!important;
  font-family:var(--buttonFont);
  font-weight:var(--buttonWeight);
  font-size:14px;
  border:0;
  border-radius:var(--button-Radius);
  padding:10px 18px;
  min-height:40px;
  text-decoration:none;
  cursor:pointer;
  transition:.3s;
}

.bb-wk-form button:hover,
.bb-wk-form button:focus,
.bb-wk-predictions button:hover,
.bb-wk-predictions button:focus,
.bb-wk-button:hover,
.bb-wk-button:focus { background:var(--primaryLightColor); color:var(--textThemeLight)!important; }

.bb-wk-deadline { font-size:14px; font-weight:400; margin:-4px 0 12px; color:var(--baseDarkestColor); }

.bb-wk-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.bb-wk-summary div { border-radius:var(--elementBg-Radius); background:var(--secondaryLightestColor); padding:14px; }
.bb-wk-summary strong { display:block; font-family:var(--headerFont); font-weight:var(--headerWeight); color:var(--textThemeColor); }
.bb-wk-summary span { display:block; margin-top:5px; }

.bb-wk-match { display:grid; grid-template-columns:76px minmax(140px,1fr) 58px 10px 58px minmax(140px,1fr); gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--baseLighterColor); }
.bb-wk-date { font-family:var(--headerFont); font-weight:var(--headerWeight); color:var(--baseDarkestColor); }
.bb-wk-team { display:flex; align-items:center; gap:8px; }
.bb-wk-away { justify-content:flex-start; }
.bb-wk-flag { display:inline-flex; width:32px; height:32px; border-radius:50%; overflow:hidden; flex:0 0 32px; border:1px solid var(--baseLightColor); background:var(--baseLightestColor); }
.bb-wk-flag img { width:100%; height:100%; object-fit:cover; }
.bb-wk-match input { min-height:32px; text-align:center; padding:4px; }

.bb-wk-table { width:100%; border-collapse:collapse; font-size:14px; }
.bb-wk-table th,
.bb-wk-table td { border-bottom:1px solid var(--baseLighterColor); padding:10px 8px; text-align:left; }
.bb-wk-table th { font-family:var(--headerFont); font-weight:var(--headerWeight); color:var(--textThemeColor); }

.bb-wk-rules { padding-left:20px; }
.bb-wk-rules li { margin:0 0 6px; }
.bb-wk-notice { padding:10px 12px; border-radius:var(--default-Radius); margin:0 0 12px; font-size:14px; }
.bb-wk-success { background:var(--positiveDarkColor); color:var(--positiveLightColor); }
.bb-wk-error { background:var(--alertLightColor); color:var(--alertDarkColor); }
.bb-wk-save-result { margin-top:10px; }

@media (max-width:760px) {
  .bb-wk-wrap,
  .bb-wk-form,
  .bb-wk-predictions,
  .bb-wk-leaderboard,
  .bb-wk-rules-wrap { font-size:14px; }
  .bb-wk-wrap h2 { font-size:26px; }
  .bb-wk-summary { grid-template-columns:1fr; }
  .bb-wk-match { grid-template-columns:1fr 48px 10px 48px; gap:7px; }
  .bb-wk-date,
  .bb-wk-team,
  .bb-wk-away { grid-column:1/-1; }
  .bb-wk-match input { width:48px; }
  .bb-wk-table { display:block; overflow-x:auto; }
}