@bbn/bbn-css/dist/css/bbn-css-flat.css

BBN CSS

/** Default configuration*/
:root {
  --mobile-limit: 700px;
  --text-size: 13px;
  --bold: 600;
  --font: 'Helvetica', 'Arial', sans-serif;
  --link-color: #3f51b5;
  --shadow-text: #0008;
  --shadow-box: #0006;
  --default-text: #2e2e2e;
  --alt-text: #2e2e2e;
  --primary-text: #fff;
  --secondary-text: #fff;
  --tertiary-text: #fff;
  --header-alt-text: #fff;
  --header-text: #2e2e2e;
  --default-background: #fff;
  --alt-background: #f7f9f9;
  --primary-background: #ff6b18;
  --secondary-background: #53798f;
  --tertiary-background: #adbb8c;
  --header-background: #eaeded;
  --header-alt-background: #B8B6B6;
  --default-border: #d5d5d5;
  --alt-border: #d5d5d5;
  --primary-border: #ff6b18;
  --secondary-border: #0974B3;
  --tertiary-border: #829766;
  --button-text: #2e2e2e;
  --effect: rgba(255, 255, 255, 0.4);
  --line-height: 1.7rem;
  --line-height-mobile: 2rem;
  --hover-text: #2e2e2e;
  --hover-border: #b6b6b6;
  --hover-background: #bcb4b0;
  --active-text: #2e2e2e;
  --active-border: #b6b6b6;
  --active-background: #C9C1B3;
  --selected-text: #fff;
  --selected-background: #ff6b18;
  --selected-border: #ff6b18;
  --disabled-text: #c3c3c3;
  --disabled-background: #edebea;
  --disabled-border: #cacaca;
  --success-text: #00a03e;
  --success-background: #cacaca;
  --success-border: #00a03e;
  --info-text: #3d67dd;
  --info-background: #cacaca;
  --info-border: #3d67dd;
  --warning-text: #ff6b18;
  --warning-background: #cacaca;
  --warning-border: #ff6b18;
  --error-text: #db3340;
  --error-background: #fff;
  --error-border: #db3340;
  --success-alt-text: #00a03e;
  --success-atl-background: #fff;
  --success-alt-border: #00a03e;
  --error-alt-text: #db3340;
  --error-alt-border: #db3340;
  --default-border-style: solid;
  --alt-border-style: solid;
  --default-border-width: 1px;
  --alt-border-width: 1px;
  --default-border-radius: 0.4rem;
  --alt-border-radius: 0.6rem;
  --nospace: 0px;
  --space: 1rem;
  --lspace: 2rem;
  --xlspace: 4rem;
  --xxlspace: 8rem;
  --sspace: 0.5rem;
  --xsspace: 0.25rem;
  --xxsspace: 0.125rem;
  --radius: 0.8rem;
  --lradius: 1.2rem;
  --sradius: 0.4rem;
  --noradius: 0;
}
:root {
  --black: #000000;
  --anthracite: #454545;
  --orange: #ff9900;
  --red: #db3340;
  --green: #00a03e;
  --blue: #6e9ecf;
  --yellow: #fdf200;
  --beige: #fdfdfd;
  --white: #ffffff;
  --purple: #a333c8;
  --grey: #d3d3d3;
  --brown: #8c6954;
  --olive: #92b06a;
  --pink: #eb65a0;
  --turquoise: #1fda9a;
  --cyan: #00c8f8;
  --navy: #354458;
  --darkgrey: #5a6a62;
  --lightgrey: #dcdcdc;
  --teal: #009688;
  --indigo: #3f51b5;
  --palegreen: #ccffcc;
  --pastelgreen: #e2efda;
  --pastelorange: #fff2cc;
  --pastelblue: #ddebf6;
  --webblue: #2196f3;
}
:root {
  --default-text: #878c99;
  --default-border: #dbdbdb;
  --alt-background: #76C4B2;
  --default-border-style: solid;
  --default-border-width: 1px;
  --default-border-radius: 3px;
  --alt-text: #fff;
  --alt-border: #363940;
  --default-background: #363940;
  --alt-border-style: solid;
  --alt-border-width: 1px;
  --alt-border-radius: 6px;
  --hover-background: #2eb3a6;
  --hover-border: #dbdbdb;
  --hover-text: #fff;
  --active-text: #fff;
  --active-border: #dbdbdb;
  --active-background: #10c4b2;
  --primary-background: #10c4b2;
  --primary-border: #10c4b2;
  --selected-border: #2eb3a6;
  --selected-background: #2eb3a6;
  --button-text: #fff;
  --header-background: #363940;
  --header-alt-background: #93c7df;
  --header-text: #fff;
  --header-alt-text: #999;
  --effect: rgba(255, 255, 255, 0.6);
  --font: 'Open Sans', sans-serif;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk5hkaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk_RkaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkyFjaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4n.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0C4n.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4n.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1y4n.ttf) format('truetype');
}
:root {
  --vh: 1vh;
  --vw: 1vw;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
::after,
::before {
  box-sizing: border-box;
}
:root {
  -moz-tab-size: 4;
  tab-size: 4;
}
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}
hr {
  height: 0;
}
abbr[title] {
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: var(--bold);
}
code,
kbd,
pre,
samp {
  font-family: FiraCode, monospace;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25rem;
}
sup {
  top: -0.5rem;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  color: inherit;
  background-color: inherit;
}
button,
select {
  text-transform: none;
}
[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button;
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted var(--button-text);
}
fieldset {
  padding: 0.35rem 0.75rem 0.625rem;
}
legend {
  padding: 0;
}
progress {
  vertical-align: baseline;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
html {
  width: 100%;
  font-size: var(--text-size);
  height: 100%;
}
.bbn-reset {
  color: var(--default-text);
  margin: 0;
  padding: 0;
  border: 0;
  line-height: unset;
  font-variant: unset;
  text-transform: unset;
  font-size: var(--text-size);
  font-family: var(--font);
  font-style: normal;
  font-weight: 400;
  text-align: left;
  text-shadow: none;
  /*! modern-normalize v0.6.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
  /*
  *,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1rem}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25rem}sup{top:-.5rem}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35rem .75rem .625rem}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
  */
}
body {
  transition: opacity 1s;
  color: var(--default-text);
  margin: 0;
  padding: 0;
  border: 0;
  line-height: unset;
  font-variant: unset;
  text-transform: unset;
  font-size: var(--text-size);
  font-family: var(--font);
  font-style: normal;
  font-weight: 400;
  text-align: left;
  text-shadow: none;
  /*! modern-normalize v0.6.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
  /*
  *,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1rem}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25rem}sup{top:-.5rem}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35rem .75rem .625rem}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
  */
}
html,
body {
  font-family: var(--font);
}
a {
  outline-style: none;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
table {
  font-size: inherit;
}
td {
  vertical-align: top;
}
input,
select,
textarea {
  font-size: 100%;
}
hr {
  clear: both;
}
.bbn-no-reset {
  font-size: 1rem;
}
.bbn-no-reset p {
  padding: 0.5rem;
}
.bbn-no-reset ul {
  margin: 0.5rem 3rem;
}
.bbn-no-reset li {
  list-style: disc;
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: var(--bold);
}
fieldset {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  border-radius: var(--default-border-radius);
}
::placeholder {
  opacity: 0.65;
  color: var(--button-text);
}
ul.bbn-reset {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  text-align: inherit;
}
ul.bbn-reset li {
  padding: 0;
  margin: 0;
}
.bbn-mono {
  font-family: FiraCode, monospace;
}
.bbn-background-effect {
  background: none, linear-gradient(to bottom, var(--effect) 0%, rgba(255, 255, 255, 0) 100%) 50% 50% repeat var(--default-background);
}
.bbn-background-effect-internal {
  background: none, linear-gradient(to bottom, var(--effect) 0%, rgba(255, 255, 255, 0) 100%) 50% 50% repeat var(--default-background);
}
.bbn-alt-background {
  background-color: var(--alt-background);
}
.bbn-alt-background-internal {
  background-color: var(--alt-background);
}
.bbn-alt-background-effect {
  background: none, linear-gradient(to bottom, var(--effect) 0%, rgba(255, 255, 255, 0) 100%) 50% 50% repeat var(--alt-background);
}
.bbn-alt-background-effect-internal {
  background: none, linear-gradient(to bottom, var(--effect) 0%, rgba(255, 255, 255, 0) 100%) 50% 50% repeat var(--alt-background);
}
.bbn-background-primary {
  background-color: var(--primary-background) !important;
}
.bbn-background-primary-internal {
  background-color: var(--primary-background);
}
.bbn-background-effect-primary {
  background: none, linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%) 50% 50% repeat var(--primary-background) !important;
}
.bbn-background-effect-primary-internal {
  background: none, linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%) 50% 50% repeat var(--primary-background);
}
.bbn-background-secondary {
  background-color: var(--secondary-background) !important;
}
.bbn-background-secondary-internal {
  background-color: var(--secondary-background);
}
.bbn-background-effect-secondary {
  background: none, linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%) 50% 50% repeat var(--secondary-background);
}
.bbn-background-effect-secondary-internal {
  background: none, linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%) 50% 50% repeat var(--secondary-background);
}
.bbn-background-tertiary {
  background-color: var(--tertiary-background) !important;
}
.bbn-background-tertiary-internal {
  background-color: var(--tertiary-background);
}
.bbn-background-effect-hover {
  background: none, linear-gradient(to bottom, var(--effect) 0%, rgba(255, 255, 255, 0.2) 100%) 50% 50% repeat var(--hover-background) !important;
}
.bbn-background-effect-hover-internal {
  background: none, linear-gradient(to bottom, var(--effect) 0%, rgba(255, 255, 255, 0.2) 100%) 50% 50% repeat var(--hover-background);
}
.bbn-background-effect-dark-hover {
  background: none, linear-gradient(to bottom, var(--effect) 0%, rgba(0, 0, 0, 0.2) 100%) 50% 50% repeat var(--hover-background) !important;
}
.bbn-background-effect-dark-hover-internal {
  background: none, linear-gradient(to bottom, var(--effect) 0%, rgba(0, 0, 0, 0.2) 100%) 50% 50% repeat var(--hover-background);
}
.bbn-background-header-alt {
  background: none, linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%) 50% 50% repeat var(--header-alt-background) !important;
}
.bbn-background-header-alt-internal {
  background: none, linear-gradient(to bottom, var(--effect) 0%, rgba(255, 255, 255, 0) 100%) 50% 50% repeat var(--header-alt-background);
}
.bbn-background-header {
  background: none, linear-gradient(to bottom, var(--effect) 0%, rgba(255, 255, 255, 0) 100%) 50% 50% repeat var(--header-background) !important;
}
.bbn-background-header-internal {
  background: none, linear-gradient(to bottom, var(--effect) 0%, rgba(255, 255, 255, 0) 100%) 50% 50% repeat var(--header-background);
}
.bbn-background {
  background-color: var(--default-background) !important;
}
.bbn-background-internal {
  background-color: var(--default-background);
}
.bbn-hover-background {
  background-color: var(--hover-background) !important;
}
.bbn-hover-background-internal {
  background-color: var(--hover-background);
}
.bbn-active-background {
  background-color: var(--active-background) !important;
}
.bbn-active-background-internal {
  background-color: var(--active-background);
}
.bbn-selected-background {
  background-color: var(--selected-background) !important;
}
.bbn-selected-background-internal {
  background-color: var(--selected-background);
}
.bbn-disabled-background {
  background-color: var(--disabled-background) !important;
}
.bbn-disabled-background-internal {
  background-color: var(--disabled-background);
}
.bbn-success-background {
  background-color: var(--success-background) !important;
}
.bbn-success-background-internal {
  background-color: var(--success-background);
}
.bbn-error-background {
  background-color: var(--error-background) !important;
}
.bbn-error-background-internal {
  background-color: var(--error-background);
}
.bbn-info-background {
  background-color: var(--info-background) !important;
}
.bbn-info-background-internal {
  background-color: var(--info-background);
}
.bbn-warning-background {
  background-color: var(--warning-background) !important;
}
.bbn-warning-background-internal {
  background-color: var(--warning-background);
}
.bbn-alt-dark {
  -moz-box-shadow: inset 0px 0px 1000px 1000px rgba(0, 0, 0, 0.125) !important;
  -webkit-box-shadow: inset 0px 0px 1000px 1000px rgba(0, 0, 0, 0.125) !important;
  box-shadow: inset 0px 0px 1000px 1000px rgba(0, 0, 0, 0.125) !important;
}
.bbn-alt-dark-internal {
  -moz-box-shadow: inset 0px 0px 1000px 1000px rgba(0, 0, 0, 0.125);
  -webkit-box-shadow: inset 0px 0px 1000px 1000px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0px 0px 1000px 1000px rgba(0, 0, 0, 0.125);
}
.bbn-alt-light {
  -moz-box-shadow: inset 0px 0px 1000px 1000px rgba(255, 255, 255, 0.125) !important;
  -webkit-box-shadow: inset 0px 0px 1000px 1000px rgba(255, 255, 255, 0.125) !important;
  box-shadow: inset 0px 0px 1000px 1000px rgba(255, 255, 255, 0.125) !important;
}
.bbn-alt-light-internal {
  -moz-box-shadow: inset 0px 0px 1000px 1000px rgba(255, 255, 255, 0.125);
  -webkit-box-shadow: inset 0px 0px 1000px 1000px rgba(255, 255, 255, 0.125);
  box-shadow: inset 0px 0px 1000px 1000px rgba(255, 255, 255, 0.125);
}
.bbn-modal {
  background-color: rgba(0, 0, 0, 0.4) !important;
}
.bbn-modal-internal {
  background-color: rgba(0, 0, 0, 0.4);
}
.bbn-background-transparent {
  background-color: transparent !important;
}
.bbn-background-transparent-internal {
  background-color: transparent;
}
.bbn-xxxxl,
.bbn-xxxxlarge {
  font-size: 4rem;
}
.bbn-xxxl,
.bbn-xxxlarge {
  font-size: 2.5rem;
}
.bbn-xxl,
.bbn-xxlarge {
  font-size: 1.8rem;
}
.bbn-xl,
.bbn-xlarge {
  font-size: 1.5rem;
}
.bbn-lg,
.bbn-large {
  font-size: 1.3rem;
}
.bbn-m,
.bbn-medium {
  font-size: 1.1rem;
}
.bbn-s,
.bbn-small {
  font-size: 0.85rem;
}
.bbn-xs,
.bbn-xsmall {
  font-size: 0.75rem;
}
.bbn-xxs,
.bbn-xxsmall {
  font-size: 0.66rem;
}
.bbn-alt-text {
  color: var(--alt-text) !important;
}
.bbn-alt-textsvg,
.bbn-alt-text svg {
  fill: var(--alt-text);
}
.bbn-alt-text-internal {
  color: var(--alt-text);
}
.bbn-alt-text-internalsvg,
.bbn-alt-text-internal svg {
  fill: var(--alt-text);
}
.bbn-text {
  color: var(--default-text) !important;
}
.bbn-textsvg,
.bbn-text svg {
  fill: var(--default-text);
}
.bbn-text-internal {
  color: var(--default-text);
}
.bbn-text-internalsvg,
.bbn-text-internal svg {
  fill: var(--default-text);
}
.bbn-hover-text {
  color: var(--hover-text) !important;
}
.bbn-hover-textsvg,
.bbn-hover-text svg {
  fill: var(--hover-text);
}
.bbn-hover-text-internal {
  color: var(--hover-text);
}
.bbn-hover-text-internalsvg,
.bbn-hover-text-internal svg {
  fill: var(--hover-text);
}
i.nf:before {
  text-rendering: optimizeLegibility;
}
.bbn-capital {
  text-transform: capitalize;
}
.bbn-small-caps {
  font-variant: small-caps;
}
.bbn-upper {
  text-transform: uppercase;
}
.bbn-lower {
  text-transform: lowercase;
}
.bbn-b,
.bbn-bold {
  font-weight: 600;
}
.bbn-bolder {
  font-weight: 800;
}
/* italic */
.bbn-i,
.bbn-italic {
  font-style: italic;
}
.bbn-light {
  font-weight: 300;
}
/* underlined */
.bbn-u,
.bbn-underlined {
  text-decoration: underline;
}
.bbn-struck {
  text-decoration: line-through;
}
.bbn-number {
  font-variant-numeric: tabular-nums;
}
.bbn-link {
  outline-style: none;
  text-decoration: none;
  color: var(--link-color);
  cursor: pointer;
}
.bbn-link:hover {
  text-decoration: underline;
}
.bbn-link i,
.bbn-link i:hover {
  text-decoration: none !important;
}
.bbn-no-wrap,
.bbn-nowrap {
  white-space: nowrap;
}
.bbn-no-wrap *,
.bbn-nowrap * {
  white-space: nowrap;
}
.bbn-wrap {
  white-space: normal;
}
.bbn-wrap * {
  white-space: normal;
}
.bbn-pre {
  white-space: pre;
}
.bbn-primary-text-alt {
  color: var(--primary-background) !important;
}
.bbn-primary-text-altsvg,
.bbn-primary-text-alt svg {
  fill: var(--primary-background);
}
.bbn-primary-text-internal {
  color: var(--primary-text);
}
.bbn-primary-text-internalsvg,
.bbn-primary-text-internal svg {
  fill: var(--primary-text);
}
.bbn-primary-text {
  color: var(--primary-text) !important;
}
.bbn-primary-textsvg,
.bbn-primary-text svg {
  fill: var(--primary-text);
}
.bbn-secondary-text-alt {
  color: var(--secondary-background) !important;
}
.bbn-secondary-text-altsvg,
.bbn-secondary-text-alt svg {
  fill: var(--secondary-background);
}
.bbn-secondary-text-alt-internal {
  color: var(--secondary-background);
}
.bbn-secondary-text-alt-internalsvg,
.bbn-secondary-text-alt-internal svg {
  fill: var(--secondary-background);
}
.bbn-secondary-text {
  color: var(--secondary-text) !important;
}
.bbn-secondary-textsvg,
.bbn-secondary-text svg {
  fill: var(--secondary-text);
}
.bbn-secondary-text-internal {
  color: var(--secondary-text);
}
.bbn-secondary-text-internalsvg,
.bbn-secondary-text-internal svg {
  fill: var(--secondary-text);
}
.bbn-tertiary-text-alt {
  color: var(--tertiary-background) !important;
}
.bbn-tertiary-text-altsvg,
.bbn-tertiary-text-alt svg {
  fill: var(--tertiary-background);
}
.bbn-tertiary-text-alt-internal {
  color: var(--tertiary-background);
}
.bbn-tertiary-text-alt-internalsvg,
.bbn-tertiary-text-alt-internal svg {
  fill: var(--tertiary-background);
}
.bbn-tertiary-text {
  color: var(--tertiary-text) !important;
}
.bbn-tertiary-textsvg,
.bbn-tertiary-text svg {
  fill: var(--tertiary-text);
}
.bbn-tertiary-text-internal {
  color: var(--tertiary-text);
}
.bbn-tertiary-text-internalsvg,
.bbn-tertiary-text-internal svg {
  fill: var(--tertiary-text);
}
.bbn-line-height {
  line-height: var(--line-height) !important;
}
.bbn-mobile .bbn-line-height {
  line-height: var(--line-height-mobile) !important;
}
.bbn-line-height-internal {
  line-height: var(--line-height);
}
.bbn-mobile .bbn-line-height-internal {
  line-height: var(--line-height-mobile);
}
.bbn-active-text {
  color: var(--active-text) !important;
}
.bbn-active-text-internal {
  color: var(--active-text);
}
.bbn-selected-text {
  color: var(--selected-text) !important;
}
.bbn-selected-text-internal {
  color: var(--selected-text);
}
.bbn-disabled-text {
  color: var(--disabled-text) !important;
}
.bbn-disabled-text-internal {
  color: var(--disabled-text);
}
.bbn-error-text {
  color: var(--error-text) !important;
}
.bbn-error-text-internal {
  color: var(--error-text);
}
.bbn-error-alt-text {
  color: var(--error-alt-text) !important;
}
.bbn-error-alt-text-internal {
  color: var(--error-alt-text);
}
.bbn-success-text {
  color: var(--success-text) !important;
}
.bbn-success-text-internal {
  color: var(--success-text);
}
.bbn-success-text {
  color: var(--success-text) !important;
}
.bbn-success-text-internal {
  color: var(--success-text);
}
.bbn-success-alt-text {
  color: var(--success-alt-text) !important;
}
.bbn-success-alt-text-internal {
  color: var(--success-alt-text);
}
.bbn-info-text {
  color: var(--info-text) !important;
}
.bbn-info-text-internal {
  color: var(--info-text);
}
.bbn-warning-text {
  color: var(--warning-text) !important;
}
.bbn-warning-text-internal {
  color: var(--warning-text);
}
.bbn-text-border {
  text-shadow: -1px 0 var(--default-border), 0 1px var(--default-border), 1px 0 var(--default-border), 0 -1px var(--default-border);
}
.bbn-text-border-alt {
  text-shadow: -1px 0 var(--default-text), 0 1px var(--default-text), 1px 0 var(--default-text), 0 -1px var(--default-text);
}
.bbn-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* no border */
.bbn-border-color {
  border-color: var(--default-border) !important;
}
.bbn-border-color-internal {
  border-color: var(--default-border);
}
.bbn-border-text {
  border-color: var(--default-text) !important;
}
.bbn-border-text-internal {
  border-color: var(--default-text);
}
.bbn-border-background {
  border-color: var(--default-background) !important;
}
.bbn-border-background-internal {
  border-color: var(--default-background);
}
.bbn-border-color-alt {
  border-color: var(--alt-border) !important;
}
.bbn-border-color-alt-internal {
  border-color: var(--alt-border);
}
.bbn-border-text-alt {
  border-color: var(--alt-text) !important;
}
.bbn-border-text-alt-internal {
  border-color: var(--alt-text);
}
.bbn-border-background-alt {
  border-color: var(--alt-background) !important;
}
.bbn-border-background-alt-internal {
  border-color: var(--alt-background);
}
.bbn-border {
  border-color: var(--default-border);
  border-width: var(--default-border-width) !important;
  border-style: var(--default-border-style);
  box-sizing: border-box;
}
.bbn-lborder {
  border-color: var(--default-border);
  border-width: var(--default-border-width) !important;
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-width: -webkit-calc(var(--default-border-width) * 2) !important;
  border-width: -moz-calc(var(--default-border-width) * 2) !important;
  border-width: calc(var(--default-border-width) * 2) !important;
}
.bbn-sborder {
  border-color: var(--default-border);
  border-width: var(--default-border-width) !important;
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-width: -webkit-calc(var(--default-border-width) / 2) !important;
  border-width: -moz-calc(var(--default-border-width) / 2) !important;
  border-width: calc(var(--default-border-width) / 2) !important;
}
.bbn-xlborder {
  border-color: var(--default-border);
  border-width: var(--default-border-width) !important;
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-width: -webkit-calc(var(--default-border-width) * 4) !important;
  border-width: -moz-calc(var(--default-border-width) * 4) !important;
  border-width: calc(var(--default-border-width) * 4) !important;
}
.bbn-border-internal {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
}
.bbn-alt-border {
  border: var(--alt-border) var(--alt-border-width) var(--alt-border-style) !important;
  box-sizing: border-box;
}
.bbn-alt-border-internal {
  border: var(--alt-border) var(--alt-border-width) var(--alt-border-style);
  box-sizing: border-box;
}
.bbn-selected-border {
  border: var(--selected-border) var(--default-border-width) var(--default-border-style) !important;
}
.bbn-primary-border {
  border-color: var(--primary-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
}
.bbn-secondary-border {
  border-color: var(--secondary-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
}
.bbn-tertiary-border {
  border-color: var(--tertiary-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
}
.bbn-border-background-primary {
  border-color: var(--primary-background) !important;
}
.bbn-border-background-primary-internal {
  border-color: var(--primary-background);
}
.bbn-border-background-secondary {
  border-color: var(--secondary-background) !important;
}
.bbn-border-background-secondary-internal {
  border-color: var(--secondary-background);
}
.bbn-border-background-tertiary {
  border-color: var(--tertiary-background) !important;
}
.bbn-border-background-tertiary-internal {
  border-color: var(--tertiary-background);
}
.bbn-border-top {
  border-top: var(--default-border-width) var(--default-border-style) var(--default-border) !important;
}
.bbn-alt-border-top {
  border-top: var(--alt-border-width) var(--alt-border-style) var(--alt-border) !important;
}
.bbn-border-bottom {
  border-bottom: var(--default-border-width) var(--default-border-style) var(--default-border) !important;
}
.bbn-alt-border-bottom {
  border-bottom: var(--alt-border-width) var(--alt-border-style) var(--alt-border) !important;
}
.bbn-border-left {
  border-left: var(--default-border-width) var(--default-border-style) var(--default-border) !important;
}
.bbn-alt-border-left {
  border-left: var(--alt-border-width) var(--alt-border-style) var(--alt-border) !important;
}
.bbn-border-right {
  border-right: var(--default-border-width) var(--default-border-style) var(--default-border) !important;
}
.bbn-alt-border-right {
  border-right: var(--alt-border-width) var(--alt-border-style) var(--alt-border) !important;
}
.bbn-border-notop {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-width: 0 var(--default-border-width) var(--default-border-width) var(--default-border-width) !important;
}
.bbn-border-nobottom {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-width: var(--default-border-width) var(--default-border-width) 0 var(--default-border-width) !important;
}
.bbn-border-noleft {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-width: var(--default-border-width) var(--default-border-width) var(--default-border-width) 0 !important;
}
.bbn-border-noright {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-width: var(--default-border-width) 0 var(--default-border-width) var(--default-border-width) !important;
}
.bbn-hover-border {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--hover-border) !important;
}
.bbn-hover-border-internal {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--hover-border);
}
.bbn-active-border {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--active-border) !important;
}
.bbn-active-border-internal {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--active-border);
}
.bbn-disabled-border {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--disabled-border) !important;
}
.bbn-disabled-border-internal {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--disabled-border);
}
.bbn-success-border {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--success-border) !important;
}
.bbn-success-border-internal {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--success-border);
}
.bbn-error-border {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--error-border) !important;
}
.bbn-error-border-internal {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--error-border);
}
.bbn-warning-border {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--warning-border) !important;
}
.bbn-warning-border-internal {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--warning-border);
}
.bbn-info-border {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--info-border) !important;
}
.bbn-info-border-internal {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--info-border);
}
.bbn-success-border {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--success-border) !important;
}
.bbn-success-border-internal {
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  box-sizing: border-box;
  border-color: var(--success-border);
}
.bbn-o,
.bbn-no-border {
  border-width: 0px !important;
  outline: 0;
}
.bbn-o-internal,
.bbn-no-border-internal {
  border-width: 0px !important;
  outline: 0;
}
.bbn-no-border-top {
  border-top-width: 0px !important;
}
.bbn-no-border-bottom {
  border-bottom-width: 0px !important;
}
.bbn-no-border-left {
  border-left-width: 0px !important;
}
.bbn-no-border-right {
  border-right-width: 0px !important;
}
.bbn-no-hborder {
  border-left-width: 0px !important;
  border-right-width: 0px !important;
}
.bbn-no-vborder {
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
}
.bbn-shadow-bottom {
  box-shadow: 0px var(--sspace) var(--sspace) var(--shadow-box);
}
.bbn-shadow-top {
  box-shadow: 0px calc(var(--sspace)*-1) var(--sspace) var(--shadow-box);
}
.bbn-shadow-left {
  box-shadow: calc(var(--sspace)*-1) 0px var(--sspace) var(--shadow-box);
}
.bbn-shadow-right {
  box-shadow: var(--sspace) 0px var(--sspace) var(--shadow-box);
}
.bbn-shadow-bottom-right {
  box-shadow: var(--sspace) var(--sspace) var(--sspace) var(--shadow-box);
}
.bbn-shadow-bottom-left {
  box-shadow: calc(var(--sspace)*-1) var(--sspace) var(--sspace) var(--shadow-box);
}
.bbn-shadow-top-right {
  box-shadow: var(--sspace) calc(var(--sspace)*-1) var(--sspace) var(--shadow-box);
}
.bbn-shadow-top-left {
  box-shadow: calc(var(--sspace)*-1) calc(var(--sspace)*-1) var(--sspace) var(--shadow-box);
}
.bbn-shadow {
  box-shadow: var(--sspace) var(--sspace) var(--sspace) var(--shadow-box);
}
.bbn-sshadow-bottom {
  box-shadow: 0px var(--xsspace) var(--xsspace) var(--shadow-box);
}
.bbn-sshadow-top {
  box-shadow: 0px calc(var(--xsspace)*-1) var(--xsspace) var(--shadow-box);
}
.bbn-sshadow-left {
  box-shadow: calc(var(--xsspace)*-1) 0px var(--xsspace) var(--shadow-box);
}
.bbn-sshadow-right {
  box-shadow: var(--xsspace) 0px var(--xsspace) var(--shadow-box);
}
.bbn-sshadow-bottom-right {
  box-shadow: var(--xsspace) var(--xsspace) var(--xsspace) var(--shadow-box);
}
.bbn-sshadow-bottom-left {
  box-shadow: calc(var(--xsspace)*-1) var(--xsspace) var(--xsspace) var(--shadow-box);
}
.bbn-sshadow-top-right {
  box-shadow: var(--xsspace) calc(var(--xsspace)*-1) var(--xsspace) var(--shadow-box);
}
.bbn-sshadow-top-left {
  box-shadow: calc(var(--xsspace)*-1) calc(var(--xsspace)*-1) var(--xsspace) var(--shadow-box);
}
.bbn-sshadow {
  box-shadow: var(--xsspace) var(--xsspace) var(--xsspace) var(--shadow-box);
}
.bbn-lshadow-bottom {
  box-shadow: 0px var(--space) var(--space) var(--shadow-box);
}
.bbn-lshadow-top {
  box-shadow: 0px calc(var(--space)*-1) var(--space) var(--shadow-box);
}
.bbn-lshadow-left {
  box-shadow: calc(var(--space)*-1) 0px var(--space) var(--shadow-box);
}
.bbn-lshadow-right {
  box-shadow: var(--space) 0px var(--space) var(--shadow-box);
}
.bbn-lshadow-bottom-right {
  box-shadow: var(--space) var(--space) var(--space) var(--shadow-box);
}
.bbn-lshadow-bottom-left {
  box-shadow: calc(var(--space)*-1) var(--space) var(--space) var(--shadow-box);
}
.bbn-lshadow-top-right {
  box-shadow: var(--space) calc(var(--space)*-1) var(--space) var(--shadow-box);
}
.bbn-lshadow-top-left {
  box-shadow: calc(var(--space)*-1) calc(var(--space)*-1) var(--space) var(--shadow-box);
}
.bbn-lshadow {
  box-shadow: var(--space) var(--space) var(--space) var(--shadow-box);
}
.bbn-dotted {
  border-style: dotted;
}
.bbn-dashed {
  border-style: dashed;
}
.bbn-ridge {
  border-style: ridge;
}
.bbn-groove {
  border-style: groove;
}
.bbn-border2 {
  border-width: calc(var(--default-border-width) * 2);
}
.bbn-border3 {
  border-width: calc(var(--default-border-width) * 3);
}
.bbn-border4 {
  border-width: calc(var(--default-border-width) * 4);
}
.bbn-no-padding {
  padding: 0 !important;
}
.bbn-no-hpadding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.bbn-no-vpadding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.bbn-nopadding {
  padding: var(--nospace);
}
.bbn-hnopadding {
  padding-left: var(--nospace);
  padding-right: var(--nospace);
}
.bbn-vnopadding {
  padding-top: var(--nospace);
  padding-bottom: var(--nospace);
}
.bbn-top-nopadding {
  padding-top: var(--nospace);
}
.bbn-bottom-nopadding {
  padding-bottom: var(--nospace);
}
.bbn-left-nopadding {
  padding-left: var(--nospace);
}
.bbn-right-nopadding {
  padding-right: var(--nospace);
}
.bbn-nopadding-important {
  padding: var(--nospace) !important;
}
.bbn-hnopadding-important {
  padding-left: var(--nospace) !important;
  padding-right: var(--nospace) !important;
}
.bbn-vnopadding-important {
  padding-top: var(--nospace) !important;
  padding-bottom: var(--nospace) !important;
}
.bbn-top-nopadding-important {
  padding-top: var(--nospace) !important;
}
.bbn-bottom-nopadding-important {
  padding-bottom: var(--nospace) !important;
}
.bbn-left-nopadding-important {
  padding-left: var(--nospace) !important;
}
.bbn-right-nopadding-important {
  padding-right: var(--nospace) !important;
}
.bbn-padding {
  padding: var(--space);
}
.bbn-hpadding {
  padding-left: var(--space);
  padding-right: var(--space);
}
.bbn-vpadding {
  padding-top: var(--space);
  padding-bottom: var(--space);
}
.bbn-top-padding {
  padding-top: var(--space);
}
.bbn-bottom-padding {
  padding-bottom: var(--space);
}
.bbn-left-padding {
  padding-left: var(--space);
}
.bbn-right-padding {
  padding-right: var(--space);
}
.bbn-padding-important {
  padding: var(--space) !important;
}
.bbn-hpadding-important {
  padding-left: var(--space) !important;
  padding-right: var(--space) !important;
}
.bbn-vpadding-important {
  padding-top: var(--space) !important;
  padding-bottom: var(--space) !important;
}
.bbn-top-padding-important {
  padding-top: var(--space) !important;
}
.bbn-bottom-padding-important {
  padding-bottom: var(--space) !important;
}
.bbn-left-padding-important {
  padding-left: var(--space) !important;
}
.bbn-right-padding-important {
  padding-right: var(--space) !important;
}
.bbn-lpadding {
  padding: var(--lspace);
}
.bbn-hlpadding {
  padding-left: var(--lspace);
  padding-right: var(--lspace);
}
.bbn-vlpadding {
  padding-top: var(--lspace);
  padding-bottom: var(--lspace);
}
.bbn-top-lpadding {
  padding-top: var(--lspace);
}
.bbn-bottom-lpadding {
  padding-bottom: var(--lspace);
}
.bbn-left-lpadding {
  padding-left: var(--lspace);
}
.bbn-right-lpadding {
  padding-right: var(--lspace);
}
.bbn-lpadding-important {
  padding: var(--lspace) !important;
}
.bbn-hlpadding-important {
  padding-left: var(--lspace) !important;
  padding-right: var(--lspace) !important;
}
.bbn-vlpadding-important {
  padding-top: var(--lspace) !important;
  padding-bottom: var(--lspace) !important;
}
.bbn-top-lpadding-important {
  padding-top: var(--lspace) !important;
}
.bbn-bottom-lpadding-important {
  padding-bottom: var(--lspace) !important;
}
.bbn-left-lpadding-important {
  padding-left: var(--lspace) !important;
}
.bbn-right-lpadding-important {
  padding-right: var(--lspace) !important;
}
.bbn-xlpadding {
  padding: var(--xlspace);
}
.bbn-hxlpadding {
  padding-left: var(--xlspace);
  padding-right: var(--xlspace);
}
.bbn-vxlpadding {
  padding-top: var(--xlspace);
  padding-bottom: var(--xlspace);
}
.bbn-top-xlpadding {
  padding-top: var(--xlspace);
}
.bbn-bottom-xlpadding {
  padding-bottom: var(--xlspace);
}
.bbn-left-xlpadding {
  padding-left: var(--xlspace);
}
.bbn-right-xlpadding {
  padding-right: var(--xlspace);
}
.bbn-xlpadding-important {
  padding: var(--xlspace) !important;
}
.bbn-hxlpadding-important {
  padding-left: var(--xlspace) !important;
  padding-right: var(--xlspace) !important;
}
.bbn-vxlpadding-important {
  padding-top: var(--xlspace) !important;
  padding-bottom: var(--xlspace) !important;
}
.bbn-top-xlpadding-important {
  padding-top: var(--xlspace) !important;
}
.bbn-bottom-xlpadding-important {
  padding-bottom: var(--xlspace) !important;
}
.bbn-left-xlpadding-important {
  padding-left: var(--xlspace) !important;
}
.bbn-right-xlpadding-important {
  padding-right: var(--xlspace) !important;
}
.bbn-xxlpadding {
  padding: var(--xxlspace);
}
.bbn-hxxlpadding {
  padding-left: var(--xxlspace);
  padding-right: var(--xxlspace);
}
.bbn-vxxlpadding {
  padding-top: var(--xxlspace);
  padding-bottom: var(--xxlspace);
}
.bbn-top-xxlpadding {
  padding-top: var(--xxlspace);
}
.bbn-bottom-xxlpadding {
  padding-bottom: var(--xxlspace);
}
.bbn-left-xxlpadding {
  padding-left: var(--xxlspace);
}
.bbn-right-xxlpadding {
  padding-right: var(--xxlspace);
}
.bbn-xxlpadding-important {
  padding: var(--xxlspace) !important;
}
.bbn-hxxlpadding-important {
  padding-left: var(--xxlspace) !important;
  padding-right: var(--xxlspace) !important;
}
.bbn-vxxlpadding-important {
  padding-top: var(--xxlspace) !important;
  padding-bottom: var(--xxlspace) !important;
}
.bbn-top-xxlpadding-important {
  padding-top: var(--xxlspace) !important;
}
.bbn-bottom-xxlpadding-important {
  padding-bottom: var(--xxlspace) !important;
}
.bbn-left-xxlpadding-important {
  padding-left: var(--xxlspace) !important;
}
.bbn-right-xxlpadding-important {
  padding-right: var(--xxlspace) !important;
}
.bbn-spadding {
  padding: var(--sspace);
}
.bbn-hspadding {
  padding-left: var(--sspace);
  padding-right: var(--sspace);
}
.bbn-vspadding {
  padding-top: var(--sspace);
  padding-bottom: var(--sspace);
}
.bbn-top-spadding {
  padding-top: var(--sspace);
}
.bbn-bottom-spadding {
  padding-bottom: var(--sspace);
}
.bbn-left-spadding {
  padding-left: var(--sspace);
}
.bbn-right-spadding {
  padding-right: var(--sspace);
}
.bbn-spadding-important {
  padding: var(--sspace) !important;
}
.bbn-hspadding-important {
  padding-left: var(--sspace) !important;
  padding-right: var(--sspace) !important;
}
.bbn-vspadding-important {
  padding-top: var(--sspace) !important;
  padding-bottom: var(--sspace) !important;
}
.bbn-top-spadding-important {
  padding-top: var(--sspace) !important;
}
.bbn-bottom-spadding-important {
  padding-bottom: var(--sspace) !important;
}
.bbn-left-spadding-important {
  padding-left: var(--sspace) !important;
}
.bbn-right-spadding-important {
  padding-right: var(--sspace) !important;
}
.bbn-xspadding {
  padding: var(--xsspace);
}
.bbn-hxspadding {
  padding-left: var(--xsspace);
  padding-right: var(--xsspace);
}
.bbn-vxspadding {
  padding-top: var(--xsspace);
  padding-bottom: var(--xsspace);
}
.bbn-top-xspadding {
  padding-top: var(--xsspace);
}
.bbn-bottom-xspadding {
  padding-bottom: var(--xsspace);
}
.bbn-left-xspadding {
  padding-left: var(--xsspace);
}
.bbn-right-xspadding {
  padding-right: var(--xsspace);
}
.bbn-xspadding-important {
  padding: var(--xsspace) !important;
}
.bbn-hxspadding-important {
  padding-left: var(--xsspace) !important;
  padding-right: var(--xsspace) !important;
}
.bbn-vxspadding-important {
  padding-top: var(--xsspace) !important;
  padding-bottom: var(--xsspace) !important;
}
.bbn-top-xspadding-important {
  padding-top: var(--xsspace) !important;
}
.bbn-bottom-xspadding-important {
  padding-bottom: var(--xsspace) !important;
}
.bbn-left-xspadding-important {
  padding-left: var(--xsspace) !important;
}
.bbn-right-xspadding-important {
  padding-right: var(--xsspace) !important;
}
.bbn-xxspadding {
  padding: var(--xxsspace);
}
.bbn-hxxspadding {
  padding-left: var(--xxsspace);
  padding-right: var(--xxsspace);
}
.bbn-vxxspadding {
  padding-top: var(--xxsspace);
  padding-bottom: var(--xxsspace);
}
.bbn-top-xxspadding {
  padding-top: var(--xxsspace);
}
.bbn-bottom-xxspadding {
  padding-bottom: var(--xxsspace);
}
.bbn-left-xxspadding {
  padding-left: var(--xxsspace);
}
.bbn-right-xxspadding {
  padding-right: var(--xxsspace);
}
.bbn-xxspadding-important {
  padding: var(--xxsspace) !important;
}
.bbn-hxxspadding-important {
  padding-left: var(--xxsspace) !important;
  padding-right: var(--xxsspace) !important;
}
.bbn-vxxspadding-important {
  padding-top: var(--xxsspace) !important;
  padding-bottom: var(--xxsspace) !important;
}
.bbn-top-xxspadding-important {
  padding-top: var(--xxsspace) !important;
}
.bbn-bottom-xxspadding-important {
  padding-bottom: var(--xxsspace) !important;
}
.bbn-left-xxspadding-important {
  padding-left: var(--xxsspace) !important;
}
.bbn-right-xxspadding-important {
  padding-right: var(--xxsspace) !important;
}
.bbn-no-margin {
  margin: 0 !important;
}
.bbn-no-hmargin {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.bbn-no-vmargin {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.bbn-hlmargin {
  margin-left: 2rem;
  margin-right: 2rem;
}
.bbn-vlmargin {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.bbn-lmargin {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-left: var(--lspace) !important;
  margin-right: var(--lspace) !important;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-top: var(--lspace) !important;
  margin-bottom: var(--lspace) !important;
}
.bbn-hmargin {
  margin-left: 1rem;
  margin-right: 1rem;
}
.bbn-vmargin {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.bbn-margin {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-left: var(--space) !important;
  margin-right: var(--space) !important;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-top: var(--space) !important;
  margin-bottom: var(--space) !important;
}
.bbn-hsmargin {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.bbn-vsmargin {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.bbn-smargin {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  margin-left: var(--sspace) !important;
  margin-right: var(--sspace) !important;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-top: var(--sspace) !important;
  margin-bottom: var(--sspace) !important;
}
.bbn-hxsmargin {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.bbn-vxsmargin {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.bbn-xsmargin {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  margin-left: var(--xsspace) !important;
  margin-right: var(--xsspace) !important;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  margin-top: var(--xsspace) !important;
  margin-bottom: var(--xsspace) !important;
}
.bbn-nomargin-internal {
  margin: var(--nospace);
}
.bbn-hnomargin-internal {
  margin-left: var(--nospace);
  margin-right: var(--nospace);
}
.bbn-vnomargin-internal {
  margin-top: var(--nospace);
  margin-bottom: var(--nospace);
}
.bbn-top-nomargin-internal {
  margin-top: var(--nospace);
}
.bbn-bottom-nomargin-internal {
  margin-bottom: var(--nospace);
}
.bbn-left-nomargin-internal {
  margin-left: var(--nospace);
}
.bbn-right-nomargin-internal {
  margin-right: var(--nospace);
}
.bbn-nomargin {
  margin: var(--nospace) !important;
}
.bbn-hnomargin {
  margin-left: var(--nospace) !important;
  margin-right: var(--nospace) !important;
}
.bbn-vnomargin {
  margin-top: var