@bbn/bbn-css/dist/css/bbn-css-bbn-io.css

BBN CSS

/** Default configuration*/
: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;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  src: local("Montserrat"), url("../../fonts/Montserrat/Montserrat-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
}
@font-face {
  font-family: 'Montserrat';
  src: local("Montserrat"), url("../../fonts/Montserrat/Montserrat-BlackItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 900;
}
@font-face {
  font-family: 'Montserrat';
  src: local("Montserrat"), url("../../fonts/Montserrat/Montserrat-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'Montserrat';
  src: local("Montserrat"), url("../../fonts/Montserrat/Montserrat-BoldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
}
@font-face {
  font-family: 'Montserrat';
  src: local("Montserrat"), url("../../fonts/Montserrat/Montserrat-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Montserrat';
  src: local("Montserrat"), url("../../fonts/Montserrat/Montserrat-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: 'Montserrat';
  src: local("Montserrat"), url("../../fonts/Montserrat/Montserrat-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: 'Montserrat';
  src: local("Montserrat"), url("../../fonts/Montserrat/Montserrat-LightItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300;
}
:root {
  --mobile-limit: 700px;
  --font: 'Montserrat';
  --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;
  --effect: rgba(255, 255, 255, 0.2);
  --text-size: 13px;
  --link-color: #37d6d6;
  --shadow-text: #0008;
  --shadow-box: #0006;
  --default-text: #eee;
  --alt-text: #ccc;
  --primary-text: #fff;
  --secondary-text: #fff;
  --tertiary-text: #fff;
  --header-text: #eee;
  --default-background: #4d4d4d;
  --alt-background: #2a2a2a;
  --primary-background: #0078f0;
  --secondary-background: #C9351C;
  --tertiary-background: #1AABFF;
  --default-border: #666;
  --alt-border: #ccc;
  --primary-border: #0078f0;
  --secondary-border: #B22222;
  --tertiary-border: #0974B3;
  --button-text: #eee;
  --line-height: 1.7rem;
  --header-background: #000000;
  --hover-text: #fff;
  --hover-border: #2a2a2a;
  --hover-background: #292525;
  --active-text: #fff;
  --active-border: #2a2a2a;
  --active-background: #4d4d4d;
  --selected-text: #fff;
  --selected-background: #4d4d4d;
  --selected-border: #0078f0;
  --disabled-text: #574f4f;
  --disabled-background: #141312;
  --disabled-border: #574f4f;
  --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: #DDD;
  --error-background: #666;
  --error-border: #DDD;
  --header-alt-text: #999;
  --line-height-mobile: 2rem;
  --header-alt-background: #4d4d4d;
  --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: 4px;
  --alt-border-radius: 0.6rem;
}
:root {
  --vh: 1vh;
  --vw: 1vw;
  --tab-size: 2;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
::after,
::before {
  box-sizing: border-box;
}
html {
  -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;
}
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%;
}
button,
select {
  text-transform: none;
}
[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button;
}
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: 13px;
  height: 100%;
}
.bbn-reset {
  color: var(--default-text);
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--text-size);
  font-family: var(--font);
  font-style: normal;
  font-weight: 400;
  text-align: left;
  text-shadow: none;
}
body {
  transition: opacity 1s;
  color: var(--default-text);
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--text-size);
  font-family: var(--font);
  font-style: normal;
  font-weight: 400;
  text-align: left;
  text-shadow: none;
}
html,
body {
  font-family: var(--font);
}
a {
  outline-style: none;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
table {
  font-size: inherit;
}
td,
th {
  vertical-align: top;
  background-color: var(--default-background);
  border-color: var(--default-border);
  border-width: var(--default-border-width);
  border-style: var(--default-border-style);
  border-collapse: collapse;
}
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;
}
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 {
  box-shadow: inset 0px 0px 1000px 1000px rgba(0, 0, 0, 0.125) !important;
}
.bbn-alt-dark-internal {
  box-shadow: inset 0px 0px 1000px 1000px rgba(0, 0, 0, 0.125);
}
.bbn-alt-light {
  box-shadow: inset 0px 0px 1000px 1000px rgba(255, 255, 255, 0.125) !important;
}
.bbn-alt-light-internal {
  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;
}
.bbn-h,
.bbn-heavy {
  font-weight: 900;
}
/* italic */
.bbn-i,
.bbn-italic {
  font-style: italic;
}
.bbn-light {
  font-weight: 300;
}
/* underlined */
.bbn-u,
.bbn-underlined {
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
}
.bbn-lunderlined {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}
.bbn-xlunderlined {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
}
.bbn-struck {
  text-decoration-line: line-through;
  text-decoration-thickness: from-font;
}
.bbn-lstruck {
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
}
.bbn-xlstruck {
  text-decoration-line: line-through;
  text-decoration-thickness: 3px;
}
.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-base {
  box-sizing: border-box;
}
.bbn-noborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #666;
  border-width: calc(0 * 1px) !important;
}
.bbn-hnoborder {
  box-sizing: border-box;
  border-left-color: #666;
  border-right-color: #666;
  border-left-width: calc(0 * 1px) !important;
  border-right-width: calc(0 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-vnoborder {
  box-sizing: border-box;
  border-top-color: #666;
  border-bottom-color: #666;
  border-top-width: calc(0 * 1px) !important;
  border-bottom-width: calc(0 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-noborder-top {
  box-sizing: border-box;
  border-top-color: #666;
  border-top-width: calc(0 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-noborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #666;
  border-bottom-width: calc(0 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-noborder-left {
  box-sizing: border-box;
  border-left-color: #666;
  border-left-width: calc(0 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-noborder-right {
  box-sizing: border-box;
  border-right-color: #666;
  border-right-width: calc(0 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-border {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #666;
  border-width: calc(1 * 1px) !important;
}
.bbn-hborder {
  box-sizing: border-box;
  border-left-color: #666;
  border-right-color: #666;
  border-left-width: calc(1 * 1px) !important;
  border-right-width: calc(1 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-vborder {
  box-sizing: border-box;
  border-top-color: #666;
  border-bottom-color: #666;
  border-top-width: calc(1 * 1px) !important;
  border-bottom-width: calc(1 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-border-top {
  box-sizing: border-box;
  border-top-color: #666;
  border-top-width: calc(1 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-border-bottom {
  box-sizing: border-box;
  border-bottom-color: #666;
  border-bottom-width: calc(1 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-border-left {
  box-sizing: border-box;
  border-left-color: #666;
  border-left-width: calc(1 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-border-right {
  box-sizing: border-box;
  border-right-color: #666;
  border-right-width: calc(1 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-lborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #666;
  border-width: calc(2 * 1px) !important;
}
.bbn-hlborder {
  box-sizing: border-box;
  border-left-color: #666;
  border-right-color: #666;
  border-left-width: calc(2 * 1px) !important;
  border-right-width: calc(2 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-vlborder {
  box-sizing: border-box;
  border-top-color: #666;
  border-bottom-color: #666;
  border-top-width: calc(2 * 1px) !important;
  border-bottom-width: calc(2 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-lborder-top {
  box-sizing: border-box;
  border-top-color: #666;
  border-top-width: calc(2 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-lborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #666;
  border-bottom-width: calc(2 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-lborder-left {
  box-sizing: border-box;
  border-left-color: #666;
  border-left-width: calc(2 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-lborder-right {
  box-sizing: border-box;
  border-right-color: #666;
  border-right-width: calc(2 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-xlborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #666;
  border-width: calc(4 * 1px) !important;
}
.bbn-hxlborder {
  box-sizing: border-box;
  border-left-color: #666;
  border-right-color: #666;
  border-left-width: calc(4 * 1px) !important;
  border-right-width: calc(4 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-vxlborder {
  box-sizing: border-box;
  border-top-color: #666;
  border-bottom-color: #666;
  border-top-width: calc(4 * 1px) !important;
  border-bottom-width: calc(4 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-xlborder-top {
  box-sizing: border-box;
  border-top-color: #666;
  border-top-width: calc(4 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-xlborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #666;
  border-bottom-width: calc(4 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-xlborder-left {
  box-sizing: border-box;
  border-left-color: #666;
  border-left-width: calc(4 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-xlborder-right {
  box-sizing: border-box;
  border-right-color: #666;
  border-right-width: calc(4 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-sborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #666;
  border-width: calc(0.5 * 1px) !important;
}
.bbn-hsborder {
  box-sizing: border-box;
  border-left-color: #666;
  border-right-color: #666;
  border-left-width: calc(0.5 * 1px) !important;
  border-right-width: calc(0.5 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-vsborder {
  box-sizing: border-box;
  border-top-color: #666;
  border-bottom-color: #666;
  border-top-width: calc(0.5 * 1px) !important;
  border-bottom-width: calc(0.5 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-sborder-top {
  box-sizing: border-box;
  border-top-color: #666;
  border-top-width: calc(0.5 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-sborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #666;
  border-bottom-width: calc(0.5 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-sborder-left {
  box-sizing: border-box;
  border-left-color: #666;
  border-left-width: calc(0.5 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-sborder-right {
  box-sizing: border-box;
  border-right-color: #666;
  border-right-width: calc(0.5 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-alt-border {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #ccc;
  border-width: calc(1 * 1px) !important;
}
.bbn-alt-hborder {
  box-sizing: border-box;
  border-left-color: #ccc;
  border-right-color: #ccc;
  border-left-width: calc(1 * 1px) !important;
  border-right-width: calc(1 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-alt-vborder {
  box-sizing: border-box;
  border-top-color: #ccc;
  border-bottom-color: #ccc;
  border-top-width: calc(1 * 1px) !important;
  border-bottom-width: calc(1 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-alt-border-top {
  box-sizing: border-box;
  border-top-color: #ccc;
  border-top-width: calc(1 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-alt-border-bottom {
  box-sizing: border-box;
  border-bottom-color: #ccc;
  border-bottom-width: calc(1 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-alt-border-left {
  box-sizing: border-box;
  border-left-color: #ccc;
  border-left-width: calc(1 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-alt-border-right {
  box-sizing: border-box;
  border-right-color: #ccc;
  border-right-width: calc(1 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-alt-lborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #ccc;
  border-width: calc(2 * 1px) !important;
}
.bbn-alt-hlborder {
  box-sizing: border-box;
  border-left-color: #ccc;
  border-right-color: #ccc;
  border-left-width: calc(2 * 1px) !important;
  border-right-width: calc(2 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-alt-vlborder {
  box-sizing: border-box;
  border-top-color: #ccc;
  border-bottom-color: #ccc;
  border-top-width: calc(2 * 1px) !important;
  border-bottom-width: calc(2 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-alt-lborder-top {
  box-sizing: border-box;
  border-top-color: #ccc;
  border-top-width: calc(2 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-alt-lborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #ccc;
  border-bottom-width: calc(2 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-alt-lborder-left {
  box-sizing: border-box;
  border-left-color: #ccc;
  border-left-width: calc(2 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-alt-lborder-right {
  box-sizing: border-box;
  border-right-color: #ccc;
  border-right-width: calc(2 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-alt-xlborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #ccc;
  border-width: calc(4 * 1px) !important;
}
.bbn-alt-hxlborder {
  box-sizing: border-box;
  border-left-color: #ccc;
  border-right-color: #ccc;
  border-left-width: calc(4 * 1px) !important;
  border-right-width: calc(4 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-alt-vxlborder {
  box-sizing: border-box;
  border-top-color: #ccc;
  border-bottom-color: #ccc;
  border-top-width: calc(4 * 1px) !important;
  border-bottom-width: calc(4 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-alt-xlborder-top {
  box-sizing: border-box;
  border-top-color: #ccc;
  border-top-width: calc(4 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-alt-xlborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #ccc;
  border-bottom-width: calc(4 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-alt-xlborder-left {
  box-sizing: border-box;
  border-left-color: #ccc;
  border-left-width: calc(4 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-alt-xlborder-right {
  box-sizing: border-box;
  border-right-color: #ccc;
  border-right-width: calc(4 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-alt-sborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #ccc;
  border-width: calc(0.5 * 1px) !important;
}
.bbn-alt-hsborder {
  box-sizing: border-box;
  border-left-color: #ccc;
  border-right-color: #ccc;
  border-left-width: calc(0.5 * 1px) !important;
  border-right-width: calc(0.5 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-alt-vsborder {
  box-sizing: border-box;
  border-top-color: #ccc;
  border-bottom-color: #ccc;
  border-top-width: calc(0.5 * 1px) !important;
  border-bottom-width: calc(0.5 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-alt-sborder-top {
  box-sizing: border-box;
  border-top-color: #ccc;
  border-top-width: calc(0.5 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-alt-sborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #ccc;
  border-bottom-width: calc(0.5 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-alt-sborder-left {
  box-sizing: border-box;
  border-left-color: #ccc;
  border-left-width: calc(0.5 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-alt-sborder-right {
  box-sizing: border-box;
  border-right-color: #ccc;
  border-right-width: calc(0.5 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-selected-border {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #0078f0;
  border-width: calc(1 * 1px) !important;
}
.bbn-selected-hborder {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-right-color: #0078f0;
  border-left-width: calc(1 * 1px) !important;
  border-right-width: calc(1 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-selected-vborder {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-bottom-color: #0078f0;
  border-top-width: calc(1 * 1px) !important;
  border-bottom-width: calc(1 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-selected-border-top {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-top-width: calc(1 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-selected-border-bottom {
  box-sizing: border-box;
  border-bottom-color: #0078f0;
  border-bottom-width: calc(1 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-selected-border-left {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-left-width: calc(1 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-selected-border-right {
  box-sizing: border-box;
  border-right-color: #0078f0;
  border-right-width: calc(1 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-selected-lborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #0078f0;
  border-width: calc(2 * 1px) !important;
}
.bbn-selected-hlborder {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-right-color: #0078f0;
  border-left-width: calc(2 * 1px) !important;
  border-right-width: calc(2 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-selected-vlborder {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-bottom-color: #0078f0;
  border-top-width: calc(2 * 1px) !important;
  border-bottom-width: calc(2 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-selected-lborder-top {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-top-width: calc(2 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-selected-lborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #0078f0;
  border-bottom-width: calc(2 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-selected-lborder-left {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-left-width: calc(2 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-selected-lborder-right {
  box-sizing: border-box;
  border-right-color: #0078f0;
  border-right-width: calc(2 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-selected-xlborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #0078f0;
  border-width: calc(4 * 1px) !important;
}
.bbn-selected-hxlborder {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-right-color: #0078f0;
  border-left-width: calc(4 * 1px) !important;
  border-right-width: calc(4 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-selected-vxlborder {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-bottom-color: #0078f0;
  border-top-width: calc(4 * 1px) !important;
  border-bottom-width: calc(4 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-selected-xlborder-top {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-top-width: calc(4 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-selected-xlborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #0078f0;
  border-bottom-width: calc(4 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-selected-xlborder-left {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-left-width: calc(4 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-selected-xlborder-right {
  box-sizing: border-box;
  border-right-color: #0078f0;
  border-right-width: calc(4 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-selected-sborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #0078f0;
  border-width: calc(0.5 * 1px) !important;
}
.bbn-selected-hsborder {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-right-color: #0078f0;
  border-left-width: calc(0.5 * 1px) !important;
  border-right-width: calc(0.5 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-selected-vsborder {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-bottom-color: #0078f0;
  border-top-width: calc(0.5 * 1px) !important;
  border-bottom-width: calc(0.5 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-selected-sborder-top {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-top-width: calc(0.5 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-selected-sborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #0078f0;
  border-bottom-width: calc(0.5 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-selected-sborder-left {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-left-width: calc(0.5 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-selected-sborder-right {
  box-sizing: border-box;
  border-right-color: #0078f0;
  border-right-width: calc(0.5 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-primary-border {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #0078f0;
  border-width: calc(1 * 1px) !important;
}
.bbn-primary-hborder {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-right-color: #0078f0;
  border-left-width: calc(1 * 1px) !important;
  border-right-width: calc(1 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-primary-vborder {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-bottom-color: #0078f0;
  border-top-width: calc(1 * 1px) !important;
  border-bottom-width: calc(1 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-primary-border-top {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-top-width: calc(1 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-primary-border-bottom {
  box-sizing: border-box;
  border-bottom-color: #0078f0;
  border-bottom-width: calc(1 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-primary-border-left {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-left-width: calc(1 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-primary-border-right {
  box-sizing: border-box;
  border-right-color: #0078f0;
  border-right-width: calc(1 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-primary-lborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #0078f0;
  border-width: calc(2 * 1px) !important;
}
.bbn-primary-hlborder {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-right-color: #0078f0;
  border-left-width: calc(2 * 1px) !important;
  border-right-width: calc(2 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-primary-vlborder {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-bottom-color: #0078f0;
  border-top-width: calc(2 * 1px) !important;
  border-bottom-width: calc(2 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-primary-lborder-top {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-top-width: calc(2 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-primary-lborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #0078f0;
  border-bottom-width: calc(2 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-primary-lborder-left {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-left-width: calc(2 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-primary-lborder-right {
  box-sizing: border-box;
  border-right-color: #0078f0;
  border-right-width: calc(2 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-primary-xlborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #0078f0;
  border-width: calc(4 * 1px) !important;
}
.bbn-primary-hxlborder {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-right-color: #0078f0;
  border-left-width: calc(4 * 1px) !important;
  border-right-width: calc(4 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-primary-vxlborder {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-bottom-color: #0078f0;
  border-top-width: calc(4 * 1px) !important;
  border-bottom-width: calc(4 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-primary-xlborder-top {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-top-width: calc(4 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-primary-xlborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #0078f0;
  border-bottom-width: calc(4 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-primary-xlborder-left {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-left-width: calc(4 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-primary-xlborder-right {
  box-sizing: border-box;
  border-right-color: #0078f0;
  border-right-width: calc(4 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-primary-sborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #0078f0;
  border-width: calc(0.5 * 1px) !important;
}
.bbn-primary-hsborder {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-right-color: #0078f0;
  border-left-width: calc(0.5 * 1px) !important;
  border-right-width: calc(0.5 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-primary-vsborder {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-bottom-color: #0078f0;
  border-top-width: calc(0.5 * 1px) !important;
  border-bottom-width: calc(0.5 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-primary-sborder-top {
  box-sizing: border-box;
  border-top-color: #0078f0;
  border-top-width: calc(0.5 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-primary-sborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #0078f0;
  border-bottom-width: calc(0.5 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-primary-sborder-left {
  box-sizing: border-box;
  border-left-color: #0078f0;
  border-left-width: calc(0.5 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-primary-sborder-right {
  box-sizing: border-box;
  border-right-color: #0078f0;
  border-right-width: calc(0.5 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-secondary-border {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #B22222;
  border-width: calc(1 * 1px) !important;
}
.bbn-secondary-hborder {
  box-sizing: border-box;
  border-left-color: #B22222;
  border-right-color: #B22222;
  border-left-width: calc(1 * 1px) !important;
  border-right-width: calc(1 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-secondary-vborder {
  box-sizing: border-box;
  border-top-color: #B22222;
  border-bottom-color: #B22222;
  border-top-width: calc(1 * 1px) !important;
  border-bottom-width: calc(1 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-secondary-border-top {
  box-sizing: border-box;
  border-top-color: #B22222;
  border-top-width: calc(1 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-secondary-border-bottom {
  box-sizing: border-box;
  border-bottom-color: #B22222;
  border-bottom-width: calc(1 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-secondary-border-left {
  box-sizing: border-box;
  border-left-color: #B22222;
  border-left-width: calc(1 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-secondary-border-right {
  box-sizing: border-box;
  border-right-color: #B22222;
  border-right-width: calc(1 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-secondary-lborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #B22222;
  border-width: calc(2 * 1px) !important;
}
.bbn-secondary-hlborder {
  box-sizing: border-box;
  border-left-color: #B22222;
  border-right-color: #B22222;
  border-left-width: calc(2 * 1px) !important;
  border-right-width: calc(2 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-secondary-vlborder {
  box-sizing: border-box;
  border-top-color: #B22222;
  border-bottom-color: #B22222;
  border-top-width: calc(2 * 1px) !important;
  border-bottom-width: calc(2 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-secondary-lborder-top {
  box-sizing: border-box;
  border-top-color: #B22222;
  border-top-width: calc(2 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-secondary-lborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #B22222;
  border-bottom-width: calc(2 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-secondary-lborder-left {
  box-sizing: border-box;
  border-left-color: #B22222;
  border-left-width: calc(2 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-secondary-lborder-right {
  box-sizing: border-box;
  border-right-color: #B22222;
  border-right-width: calc(2 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-secondary-xlborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #B22222;
  border-width: calc(4 * 1px) !important;
}
.bbn-secondary-hxlborder {
  box-sizing: border-box;
  border-left-color: #B22222;
  border-right-color: #B22222;
  border-left-width: calc(4 * 1px) !important;
  border-right-width: calc(4 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-secondary-vxlborder {
  box-sizing: border-box;
  border-top-color: #B22222;
  border-bottom-color: #B22222;
  border-top-width: calc(4 * 1px) !important;
  border-bottom-width: calc(4 * 1px) !important;
  border-top-style: var(--default-border-style);
  border-bottom-style: var(--default-border-style);
}
.bbn-secondary-xlborder-top {
  box-sizing: border-box;
  border-top-color: #B22222;
  border-top-width: calc(4 * 1px) !important;
  border-top-style: var(--default-border-style);
}
.bbn-secondary-xlborder-bottom {
  box-sizing: border-box;
  border-bottom-color: #B22222;
  border-bottom-width: calc(4 * 1px) !important;
  border-bottom-style: var(--default-border-style);
}
.bbn-secondary-xlborder-left {
  box-sizing: border-box;
  border-left-color: #B22222;
  border-left-width: calc(4 * 1px) !important;
  border-left-style: var(--default-border-style);
}
.bbn-secondary-xlborder-right {
  box-sizing: border-box;
  border-right-color: #B22222;
  border-right-width: calc(4 * 1px) !important;
  border-right-style: var(--default-border-style);
}
.bbn-secondary-sborder {
  box-sizing: border-box;
  border-style: var(--default-border-style);
  border-color: #B22222;
  border-width: calc(0.5 * 1px) !important;
}
.bbn-secondary-hsborder {
  box-sizing: border-box;
  border-left-color: #B22222;
  border-right-color: #B22222;
  border-left-width: calc(0.5 * 1px) !important;
  border-right-width: calc(0.5 * 1px) !important;
  border-left-style: var(--default-border-style);
  border-right-style: var(--default-border-style);
}
.bbn-secondary-vsborder {
  box-sizing: border-box;
  border-to