*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  white-item-shadowbottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  color: #eb8223;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* Embed */

iframe {
	width: 100%;
}
/* Responsive Grid */

.row-fluid {
	width: 100%;
	*zoom: 1;
}

.row-fluid:before, .row-fluid:after {
	display: table;
	content: "";
}

.row-fluid:after {
	clear: both;
}

.row-fluid [class*="span"] {
	display: block;
	float: left;
	width: 100%;
	min-height: 28px;
	margin-left: 2.127659574%;
	*margin-left: 2.0744680846382977%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.dnd_area-row-0-padding .row-fluid [class*="span"] {
	min-height: 0;
}

.row-fluid [class*="span"]:first-child {
	margin-left: 0;
}

.row-fluid .span12 {
	width: 99.99999998999999%;
	*width: 99.94680850063828%;
}

.row-fluid .span11 {
	width: 91.489361693%;
	*width: 91.4361702036383%;
}

.row-fluid .span10 {
	width: 82.97872339599999%;
	*width: 82.92553190663828%;
}

.row-fluid .span9 {
	width: 74.468085099%;
	*width: 74.4148936096383%;
}

.row-fluid .span8 {
	width: 65.95744680199999%;
	*width: 65.90425531263828%;
}

.row-fluid .span7 {
	width: 57.446808505%;
	*width: 57.3936170156383%;
}

.row-fluid .span6 {
	width: 48.93617020799999%;
	*width: 48.88297871863829%;
}

.row-fluid .span5 {
	width: 40.425531911%;
	*width: 40.3723404216383%;
}

.row-fluid .span4 {
	width: 31.914893614%;
	*width: 31.8617021246383%;
}

.row-fluid .span3 {
	width: 23.404255317%;
	*width: 23.3510638276383%;
}

.row-fluid .span2 {
	width: 14.89361702%;
	*width: 14.8404255306383%;
}

.row-fluid .span1 {
	width: 6.382978723%;
	*width: 6.329787233638298%;
}

.container-fluid {
	*zoom: 1;
}

.container-fluid:before, .container-fluid:after {
	display: table;
	content: "";
}

.container-fluid:after {
	clear: both;
}

@media (max-width: 767px) {
	.row-fluid {
		width: 100%;
	}

	.row-fluid [class*="span"] {
		display: block;
		float: none;
		width: auto;
		margin-left: 0;
	}
}

@media (min-width: 768px) and (max-width: 1139px) {
	.row-fluid {
		width: 100%;
		*zoom: 1;
	}

	.row-fluid:before, .row-fluid:after {
		display: table;
		content: "";
	}

	.row-fluid:after {
		clear: both;
	}

	.row-fluid [class*="span"] {
		display: block;
		float: left;
		width: 100%;
		min-height: 28px;
		margin-left: 2.762430939%;
		*margin-left: 2.709239449638298%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row-fluid [class*="span"]:first-child {
		margin-left: 0;
	}

	.row-fluid .span12 {
		width: 99.999999993%;
		*width: 99.9468085036383%;
	}

	.row-fluid .span11 {
		width: 91.436464082%;
		*width: 91.38327259263829%;
	}

	.row-fluid .span10 {
		width: 82.87292817100001%;
		*width: 82.8197366816383%;
	}

	.row-fluid .span9 {
		width: 74.30939226%;
		*width: 74.25620077063829%;
	}

	.row-fluid .span8 {
		width: 65.74585634900001%;
		*width: 65.6926648596383%;
	}

	.row-fluid .span7 {
		width: 57.182320438000005%;
		*width: 57.129128948638304%;
	}

	.row-fluid .span6 {
		width: 48.618784527%;
		*width: 48.5655930376383%;
	}

	.row-fluid .span5 {
		width: 40.055248616%;
		*width: 40.0020571266383%;
	}

	.row-fluid .span4 {
		width: 31.491712705%;
		*width: 31.4385212156383%;
	}

	.row-fluid .span3 {
		width: 22.928176794%;
		*width: 22.874985304638297%;
	}

	.row-fluid .span2 {
		width: 14.364640883%;
		*width: 14.311449393638298%;
	}

	.row-fluid .span1 {
		width: 5.801104972%;
		*width: 5.747913482638298%;
	}
}

@media (min-width: 1280px) {
	.row-fluid {
		width: 100%;
		*zoom: 1;
	}

	.row-fluid:before, .row-fluid:after {
		display: table;
		content: "";
	}

	.row-fluid:after {
		clear: both;
	}

	.row-fluid [class*="span"] {
		display: block;
		float: left;
		width: 100%;
		min-height: 28px;
		margin-left: 2.564102564%;
		*margin-left: 2.510911074638298%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row-fluid [class*="span"]:first-child {
		margin-left: 0;
	}

	.row-fluid .span12 {
		width: 100%;
		*width: 99.94680851063829%;
	}

	.row-fluid .span11 {
		width: 91.45299145300001%;
		*width: 91.3997999636383%;
	}

	.row-fluid .span10 {
		width: 82.905982906%;
		*width: 82.8527914166383%;
	}

	.row-fluid .span9 {
		width: 74.358974359%;
		*width: 74.30578286963829%;
	}

	.row-fluid .span8 {
		width: 65.81196581200001%;
		*width: 65.7587743226383%;
	}

	.row-fluid .span7 {
		width: 57.264957265%;
		*width: 57.2117657756383%;
	}

	.row-fluid .span6 {
		width: 48.717948718%;
		*width: 48.6647572286383%;
	}

	.row-fluid .span5 {
		width: 40.170940171000005%;
		*width: 40.117748681638304%;
	}

	.row-fluid .span4 {
		width: 31.623931624%;
		*width: 31.5707401346383%;
	}

	.row-fluid .span3 {
		width: 23.076923077%;
		*width: 23.0237315876383%;
	}

	.row-fluid .span2 {
		width: 14.529914530000001%;
		*width: 14.4767230406383%;
	}

	.row-fluid .span1 {
		width: 5.982905983%;
		*width: 5.929714493638298%;
	}
}


/* Maps */

.maps iframe,
.maps .hs-embed-wrapper,
.maps .hs-embed-content-wrapper > div {
	width: 100% !important;
  height: 640px !important;
	max-width: 100% !important;
	max-height: 640px !important;
}

/* Clearfix */

.clearfix {
	*zoom: 1;
}

.clearfix:before, .clearfix:after {
	display: table;
	content: "";
}

.clearfix:after {
	clear: both;
}

/* Visibilty Classes */

.hide {
	display: none;
}

.show {
	display: block;
}

.invisible {
	visibility: hidden;
}

.hidden {
	display: none;
	visibility: hidden;
}

/* Responsive Visibilty Classes */

.visible-phone {
	display: none !important;
}

.visible-tablet {
	display: none !important;
}

.hidden-desktop {
	display: none !important;
}

@media (max-width: 767px) {
	.visible-phone {
		display: inherit !important;
	}

	.hidden-phone {
		display: none !important;
	}

	.hidden-desktop {
		display: inherit !important;
	}

	.visible-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1139px) {
	.visible-tablet {
		display: inherit !important;
	}

	.hidden-tablet {
		display: none !important;
	}

	.hidden-desktop {
		display: inherit !important;
	}

	.visible-desktop {
		display: none !important;
	}
}















.content-wrapper {
  margin: 0 auto;
  max-width: 100%;
  padding: 0 20px;
	width: 100%;
}

.body-container-wrapper {
  overflow: hidden;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section {
  padding: ;
  position: relative;
}

@media (max-width: 767px) {
  .dnd-section {
    padding-bottom: 50px;
    padding-top: 50px;
  }
}

.dnd-section > .row-fluid, .centered {
  margin: 0 auto;
  max-width: 100%;
	position: relative;
	z-index: none;
}

.dnd-section .dnd-column {
  padding: 0 20px;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

.overlay-wrapper .row-fluid [class*="span"] {
  min-height: 0;
}

.menu {
  width: 17%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  padding: 15px;
  border-right: 1px solid #efefef;
  height: 100%;
  overflow: hidden; /* lets .header__menu scroll internally */
}

body {
  background:#f4f4f4;
}

.main {
  margin-left:17%;
  width:calc(100% - 17%);
}

.main__inner {
  margin:25px;
  background:#fff;
  padding:4%;
  border:1px solid #efefef;
}
h1, h2 {
  color: #333333;
}
  


.container-fluid.body-container {
	margin: 0;
	max-width: 4400px;
}
.hs-menu-wrapper ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
	line-height: 1.4;
}

.hs-mega-menu-item .hs-menu-wrapper ul {
  flex-direction: column;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

@media (min-width: 1200px) {
	.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
		left: -9999px;
		opacity: 0;
		position: absolute;
	}
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: inline-block;
  white-space: nowrap;
  width: 100%;
}

@media (min-width: 1200px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    display: block;
  }
  
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    top: 100%;
  }

  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 100%;
    opacity: 1;
    top: 0;
  }
	
	.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children.right-menu:hover > .hs-menu-children-wrapper {
    left: auto;
    opacity: 1;
    display: block;
		right: 0;
  }
}

.hs-menu-wrapper {
  display: inline-flex;
	transition: all 300ms ease-out;
}
/* ── Base .btn — override Bootstrap defaults ─────────────────────────── */
.btn {
  display: inline-flex !important;
  align-items: center;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  line-height: 1.5;
  transition: color .15s ease, background-color .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}

/* Replace Bootstrap's blue focus ring on every button */
.btn:focus,
.btn:focus-visible {
  outline: 2px solid var(--btn-primary-bg);
  outline-offset: 2px;
  box-shadow: none;
}

.btn span {
  display: inline-flex;
  width: 15px;
  margin-right: 5px;
}

.disable-button {
  opacity: 0.6;
  pointer-events: none;
}

/* ── Primary ─────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--btn-primary-bg);
  border-color:     var(--btn-primary-border);
  color:            var(--btn-primary-text);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--btn-primary-hover-bg);
  border-color:     var(--btn-primary-hover-bg);
  color:            var(--btn-primary-text);
}

.btn-primary:focus,
.btn-primary:focus-visible {
  background-color: var(--btn-primary-bg);
  border-color:     var(--btn-primary-border);
  color:            var(--btn-primary-text);
  outline: 2px solid var(--btn-primary-bg);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-primary svg { fill: var(--btn-primary-text); }

/* ── Secondary ───────────────────────────────────────────────────────── */
.btn-secondary {
  background-color: var(--btn-secondary-bg);
  border-color:     var(--btn-secondary-border);
  color:            var(--btn-secondary-text);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  background-color: var(--btn-secondary-hover-bg);
  border-color:     var(--btn-secondary-hover-bg);
  color:            var(--btn-secondary-text);
}

.btn-secondary:focus,
.btn-secondary:focus-visible {
  background-color: var(--btn-secondary-bg);
  border-color:     var(--btn-secondary-border);
  color:            var(--btn-secondary-text);
  outline: 2px solid var(--btn-secondary-bg);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-secondary svg { fill: var(--btn-secondary-text); }

/* ── Outline Primary ─────────────────────────────────────────────────── */
.btn-outline-primary {
  background-color: transparent;
  border: 1px solid var(--btn-outline-primary-color);
  color:            var(--btn-outline-primary-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: var(--btn-outline-primary-hover-bg);
  border-color:     var(--btn-outline-primary-hover-bg);
  color:            var(--btn-outline-primary-hover-text);
}

.btn-outline-primary:hover svg,
.btn-outline-primary:active svg {
  fill: var(--btn-outline-primary-hover-text);
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
  background-color: transparent;
  border-color: var(--btn-outline-primary-color);
  color:        var(--btn-outline-primary-color);
  outline: 2px solid var(--btn-outline-primary-color);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-outline-primary svg { fill: var(--btn-outline-primary-color); }
.btn-outline-primary i   { padding-right: 5px; }

/* ── Outline Secondary (White) ───────────────────────────────────────── */
.btn-outline-secondary {
  background-color: transparent;
  border: 1px solid var(--btn-outline-secondary-border);
  color:            var(--btn-outline-secondary-text);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show > .btn-outline-secondary.dropdown-toggle {
  background-color: var(--btn-outline-secondary-hover-bg);
  border-color:     var(--btn-outline-secondary-border);
  color:            var(--btn-outline-secondary-text);
}

.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible {
  background-color: transparent;
  border-color: var(--btn-outline-secondary-border);
  color:        var(--btn-outline-secondary-text);
  outline: 2px solid var(--btn-outline-secondary-border);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── Danger ──────────────────────────────────────────────────────────── */
.btn-danger {
  background-color: var(--btn-danger-bg);
  border-color:     var(--btn-danger-border);
  color:            var(--btn-danger-text);
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.show > .btn-danger.dropdown-toggle {
  background-color: var(--btn-danger-hover-bg);
  border-color:     var(--btn-danger-hover-bg);
  color:            var(--btn-danger-text);
}

.btn-danger:focus,
.btn-danger:focus-visible {
  background-color: var(--btn-danger-bg);
  border-color:     var(--btn-danger-border);
  color:            var(--btn-danger-text);
  outline: 2px solid var(--btn-danger-bg);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-danger svg { fill: var(--btn-danger-text); }

/* ── Dropdown ────────────────────────────────────────────────────────── */
.dropdown-item {
  color: var(--btn-outline-primary-color);
  font-size: var(--btn-font-size);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-hover-surface);
  color: var(--btn-outline-primary-color);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.dropdown-menu.show li {
  padding: 4px 8px;
}

/* ── Size variants ───────────────────────────────────────────────────── */
.button-large {
  padding: var(--btn-padding-y) calc(var(--btn-padding-x) * 2);
  font-size: var(--btn-font-size);
}

.button-medium {
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
}

.btn-sm {
  padding: calc(var(--btn-padding-y) - 2px) calc(var(--btn-padding-x) - 8px);
  font-size: var(--btn-font-size);
}

.btn-md {
  display: flex;
  align-items: center;
  font-size: var(--btn-font-size);
}

.btn-md i   { padding-right: 5px; }
.btn-sm svg { width: 21px; }
.home i {
  color: #BBBBBB;
}
.previous a {
  color: #68717A;
}
.current a {
  color: #BBBBBB;
}
.nav-underline {
  border-bottom:1px solid #BBBBBB;
}
.active {
  color: #5532F0; 
}
.rounded-pill {
  background-color: #BBBBBB;
}
.nav-link.active {
  color: #5532F0; 
}
.nav-underline .nav-link.active {
  color: #5532F0;
  border-bottom-color: #5532F0;
}
.valid {
  background-color:  #5532F0;
}
.nav-link {
  color: #333333;
}
.nav-underline .nav-link:hover {
  color: #5532F0; 
}
.nav-link:hover span {
  background-color:  #5532F0;
}
.form-check-input:checked {
  background-color:  #5532F0;
  border-color: #5532F0;
}
.btn-primary {
  background-color: #5532F0;
}
.btn-secondary {
  background-color: #FFFFFF;
  color: #333333;
  border-color: #BBBBBB;
}
.modal-footer {
  background-color: #F8FAFC;
}
.unpblished-button,
.unpblished-button:hover,
.unpblished-button:focus,
.unpblished-button:active {
  color: #fff !important;
  background-color: #949494;
  border-color: #949494;
  box-shadow: none;
}
.offers-button span {
  background-color: #E7EBF2;
  color: #68717A;
}
.card-title {
  color: #eb8223;
}
.card-text {
  color: #68717A;
}
.card-text-red {
  color: #DC3545;
}
.card {
  box-shadow: 0 0 0px 0 #F8FAFC;
}
.tabs-2 {
  box-shadow: 0 0 1px 0 #68717A;
}
.tabs-1 {
  box-shadow: 0 0 1px 0 #68717A;
}
.first-card {
  border-bottom: 4px solid #BBBBBB;
}
.card-text a {
  color: #5532F0;
}
.card-second {
  border-bottom: 4px solid #5532F0;
}
.fa-folder {
  color: #68717A;
}
.not-red {
  color: #5532F0;
}
.red-color {
  color: #DC3545;
}
.split {
  color: #BBBBBB;
}
.card-third {
  border-bottom: 4px solid #DC3545;
}
.fa-file-pdf {
  color: #68717A;
}
.card-fourth {
  border-bottom: 4px solid #198754;
}
.card-text-green {
  color: #198754;
}
.fa-film {
  color: #68717A;
}
.form-check-input {
  border: 1px solid #5532F0;
}
.card-fifth {
 border-bottom: 4px solid #5532F0; 
}
.fa-circle-check {
  color: #BBBBBB;
}
.fa-user {
  color: #BBBBBB;
}
.silver-text {
  color: #68717A;
}

.card {
	border-radius: var(--radius-base) !important;
	margin-bottom: 44px;
}  

.heading-color    { background-color: #333333; }
.border-color     { background-color: #BBBBBB; }
.body-color       { background-color: #68717A; }
.primary-color    { background-color: #5532F0; }
.secondary-color  { background-color: #eb8223; }
.error-color      { background-color: #DC3545; }
.light-grey-color { background-color: #C4CAD4; }
.success-color    { background-color: #198754; }
.table-color      { background-color: #E7EBF2; }
.warning-color    { background-color: #FFC107; }

.menu-background {
  background-color: #FFFFFF;
  border: 1px solid #E7EBF2;
}
.page-color {
  background-color: #F8FAFC;
  border: 1px solid #E7EBF2;
}


.card-text  { color: #68717A; }
.card-title { color: #333333; }
.card       { box-shadow: 0 0 6px 0 #F8FAFC; }

:root {
  /* Colors */
  --color-primary:        #5532F0;
  --color-secondary:      #eb8223;
  --color-heading:        #333333;
  --color-body:           #68717A;
  --color-muted:          #949494;
  --color-app-bg:         #EEF2F6;
  --color-page-bg:        #F8FAFC;
  --color-surface:        #FFFFFF;
  --color-hover-surface:  #F1F5F9;
  --color-border:         #BBBBBB;
  --color-divider:        #E5E7EB;
  --color-light-grey:     #C4CAD4;
  --color-table:          #E7EBF2;
  --color-success:        #198754;
  --color-warning:        #FFC107;
  --color-error:          #DC3545;

  /* Typography */
  --font-body:    Poppins, Arial, sans-serif;
  --font-heading: Poppins, Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* Layout */
  --radius-base:  5px;

  /* Buttons — base */
  --btn-font-size:    16px;
  --btn-font-weight:  400;
  --btn-radius:       6px;
  --btn-padding-y:    9px;
  --btn-padding-x:    20px;

  /* Buttons — primary */
  --btn-primary-bg:         #5532F0;
  --btn-primary-text:       #FFFFFF;
  --btn-primary-border:     #5532F0;
  --btn-primary-hover-bg:   #4424D6;

  /* Buttons — secondary */
  --btn-secondary-bg:       #eb8223;
  --btn-secondary-text:     #FFFFFF;
  --btn-secondary-border:   #eb8223;
  --btn-secondary-hover-bg: #c96d1b;

  /* Buttons — outline primary */
  --btn-outline-primary-color:      #5532F0;
  --btn-outline-primary-hover-bg:   #5532F0;
  --btn-outline-primary-hover-text: #FFFFFF;

  /* Buttons — outline secondary */
  --btn-outline-secondary-border:   #BBBBBB;
  --btn-outline-secondary-text:     #333333;
  --btn-outline-secondary-hover-bg: #F1F5F9;

  /* Buttons — danger */
  --btn-danger-bg:       #DC3545;
  --btn-danger-text:     #FFFFFF;
  --btn-danger-border:   #DC3545;
  --btn-danger-hover-bg: #b02a37;

  /* Tables */
  --table-header-bg:     #FFFFFF;
  --table-header-text:   #333333;
  --table-header-weight: 600;
  --table-cell-border:   #E7EBF2;
  --table-row-hover-bg:  #F1F5F9;
  --table-stripe-bg:     #F8FAFC;
  --table-radius:        6px;
  --table-font-size:     14px;
  --table-shadow:        none;
}


body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: #68717A;
  background-color: #EEF2F6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: #333333;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5em;
}

h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 26px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 14px; }

a {
  color: #5532F0;
  text-decoration: none;
}

small, .font--small {
  font-size: 12px;
}

.font--medium {
  font-size: 14px;
}

.color-text {
  color: #5532F0;
}

.silver-text {
  color: #68717A;
}
.hs-overlay {
  background: transparent;
}
.hs-search-panel {
  background: #FFFFFF;
  box-shadow: 0 20px 40px #BBBBBB;
}
.hs-panel-header {
  border-bottom: 1px solid #BBBBBB;
}
.btn-group>.btn {
  background-color: #5532F0;
}
.info--icon {
  box-shadow: 0 0 5px 0 #BBBBBB !important;
}
.rounded--circle {
  background-color: #BBBBBB;
  color: #FFFFFF;
}
.avatar {
  background: #5532F0;
  color: #FFFFFF;
}
.small-search {
  background-color: #F8FAFC;
}
.small-search-icon {
  color: #68717A;
}
.field-search {
  background-color: #F8FAFC;
}
.bottom-line {
  border-bottom: 1px solid #BBBBBB;
}
.search-back {
  background-color: #FFFFFF;
}
.search-back i {
  color: #68717A;
}
.large-search-field {
  background-color: #FFFFFF;
}
.col {
  color: #68717A;
}
.columns {
  color: #68717A;
}
.fa-user-group {
  color: #68717A;
}
.first-item {
  background: #F8FAFC !important; 
  color: #333333 !important;
}
.info--people p {
  color: #BBBBBB;
}
.grey input {
  background-color: #F8FAFC; 
}
.input-group span {
  border: 1px solid #E7EBF2;
}
.input-group span svg {
  fill: #68717A;
}
/* ── Trigger button ──────────────────────────────────────────────────── */
.select-color {
  background-color: #FFFFFF !important;
}

.show-button {
  color: #333333;
  border-color: #C4CAD4;
  background-color: #FFFFFF;
}

.show-button:hover {
  border-color: #C4CAD4;
  background-color: #F8FAFC;
  color: #68717A;
}

.btn.show {
  border-color: #C4CAD4;
  background-color: #F8FAFC;
  color: #68717A;
}

/* ── Count badge on the multi-select trigger ─────────────────────────── */
.select-badge {
  background-color: #5532F0;
  color: #fff;
}

/* ── Multi-select checkbox rows ──────────────────────────────────────── */
.select-check-item {
  color: #333333;
}

.select-check-item:hover {
  background-color: #F1F5F9;
}

/* Checked checkbox fill */
.form-check-input:checked {
  background-color: #5532F0;
  border-color: #5532F0;
}

/* ── Input-with-button variant ───────────────────────────────────────── */
.placeholder-color {
  background-color: #FFFFFF !important;
  border-color: #C4CAD4;
  color: #333333;
}

.placeholder-color:hover {
  border-color: #C4CAD4;
  color: #333333;
}
.user--link {
  color: #5532F0;
}
.user--link:hover {
  background-color: #F1F5F9;
}
.actions--link {
  color: #5532F0;
  background-color: #F8FAFC;
  border: 1px solid #C4CAD4;
}
.archive--link {
  color: #DC3545;
}
.actions--link:hover {
  border:1px solid #5532F0;
}
.circle {
  background-color: #198754;
}
.form-check-input:checked {
  background-color: #5532F0;
}
table.table tbody tr:hover > * {
  background-color: var(--table-row-hover-bg) !important;
}
.order {
  color: #333333 !important;
}
.user--link {
  color: #5532F0;
}
.blue-text {
  color: #5532F0;
}
.green-text {
  color: #198754 !important;
}
.silver-text {
  color: #BBBBBB !important;
}
.black-text {
  color: #333333 !important;
}
.text-danger {
  color: #DC3545 !important;
}
.text-success {
  color: #198754 !important;
}


.docs {
  max-width: 4400px;
  margin: 0 auto;
  padding: 48px 32px 96px;
  color: #68717A;
  font-family: var(--font-body);
}

/* Increase breathing room between every dnd_section on the docs page */
.docs .dnd-section {
  padding-top: 0;
  padding-bottom: 0;
}

.docs__intro {
  border-bottom: 1px solid #E5E7EB;
  padding-bottom: 24px;
  margin-bottom: 40px;
}

.docs__lede {
  font-size: 18px;
  color: #68717A;
  max-width: 70ch;
}

.docs__section {
  margin-top: 56px;
}

.docs__section > h2 {
  border-bottom: 2px solid #bbb;
  padding-bottom: 7px;
  margin-bottom: 16px;
}

.docs h2 {
  margin-top: 20px;
}

.docs h3 {
  margin-top: 15px;
}

.docs__section > h3 {
  margin-top: 40px;
}

.docs a {
  color: #5532F0;
  text-decoration: none;
}
.docs a:hover { text-decoration: none; }

.docs code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: #F8FAFC;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  padding: 1px 6px;
  color: #eb8223;
}

.docs__muted {
  color: #949494;
  font-size: 12px;
}

/* Token tables */
.docs__table-wrap {
  overflow-x: auto;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-base);
  margin: 16px 0 32px;
  background: #FFFFFF;
}

.docs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.docs__table thead th {
  background: #F8FAFC;
  color: #333333;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #E5E7EB;
  font-weight: 600;
  white-space: nowrap;
}

.docs__table td {
  padding: 12px;
  border-bottom: 1px solid #E5E7EB;
  vertical-align: middle;
}

.docs__table tr:last-child td {
  border-bottom: none;
}

.docs__table tbody tr:hover {
  background: #F1F5F9;
}

.docs__swatch {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
  vertical-align: middle;
}

/* Live preview block */
.docs__panel {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-base);
  padding: 24px;
  margin: 16px 0 32px;
}

/* Module cards */
.docs__module {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-left: 3px solid #5532F0;
  border-radius: var(--radius-base);
  padding: 20px 24px;
  margin: 16px 0;
}

.docs__module h3 {
  margin: 0 0 8px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 22px;
  color: #333333;
}

.docs__module h4 {
  margin-top: 16px;
  margin-bottom: 6px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #949494;
}

.docs__module ul {
  margin: 0 0 0 1.25em;
  padding: 0;
}

.docs__module li {
  margin-bottom: 4px;
}

.docs ol li,
.docs__intro p {
  line-height: 1.7;
}

/* ── Per-module template page layout ── */

.docs-intro {
  padding-bottom: 48px;
  border-bottom: 2px solid #5532F0;
  margin-bottom: 44px;
}

.docs-intro h1 {
  margin-bottom: 16px;
}

.docs-intro > p {
  font-size: 18px;
  max-width: unset;
  line-height: 1.7;
  margin-bottom: 44px;
}

.docs-intro table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #FFFFFF;
}

.docs-intro h2 {
  font-size: 22px;
  margin-bottom: 12px;
}

.docs-variant-header {
  padding-top: 55px !important;
  padding-bottom: 15px;
}

.docs-variant-header h2 {
  font-size: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E7EB;
  margin-bottom: 12px;
}

.docs-variant-header p {
  max-width: 72ch;
  line-height: 1.7;
  color: #68717A;
  margin: 0;
}

.docs-preview {
  padding: 36px 32px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-base);
}

/* ── Quick-nav pill strip ─────────────────────────────────────────────── */
.docs-quicknav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0 48px;
}

.docs-quicknav a {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  color: #68717A;
  text-decoration: none;
  background: #FFFFFF;
  transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.docs-quicknav a:hover {
  border-color: #5532F0;
  color: #5532F0;
  background: #F8FAFC;
  text-decoration: none;
}

/* ── Component index card grid ───────────────────────────────────────── */
.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin: 24px 0 56px;
}

/* Card is the <a> tag — fully clickable */
.component-card {
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-base);
  padding: 20px;
  background: #FFFFFF;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.18s ease,
              box-shadow 0.18s ease,
              transform 0.18s ease;
}

.component-card:hover {
  border-color: #5532F0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

/* Icon bubble */
.component-card__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #F8FAFC;
  color: #5532F0;
  font-size: 15px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.component-card__name {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}

.component-card__desc {
  font-size: 12px;
  color: #949494;
  line-height: 1.55;
  flex: 1;
}

/* "Open →" text — slides right on hover */
.component-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #5532F0;
  margin-top: 10px;
  transition: gap 0.18s ease;
}

.component-card:hover .component-card__arrow {
  gap: 8px;
}

/* Inline "Open ↗" link beside component reference h3 headings */
.docs__link-out {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: #5532F0;
  text-decoration: none;
  margin-left: 10px;
  vertical-align: middle;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.docs__link-out:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── Color token page ────────────────────────────────────────────────── */

.color-section {
  margin-bottom: 15px;
}

.color-section__intro {
  max-width: 72ch;
  color: #68717A;
  line-height: 1.65;
  margin: 0 0 24px;
}

/* Responsive auto-fill grid — wraps naturally at any container width */
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* Card shell */
.color-card {
  border-radius: var(--radius-base);
  border: 1px solid #E5E7EB;
  overflow: hidden;
  background: #FFFFFF;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

.color-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  transform: translateY(-3px);
}

/* Colour swatch — pure background, no content */
.color-card__swatch {
  display: block;
  height: 96px;
  flex-shrink: 0;
}

/* Card body */
.color-card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
}

/* Hex value — monospaced, muted, small */
.color-card__hex {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  color: #949494;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}

/* Human-readable label */
.color-card__label {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 8px;
}

/* CSS variable chip */
.color-card__var {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  background: #F8FAFC;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  padding: 2px 7px;
  color: #5532F0;
  margin-bottom: 12px;
  width: fit-content;
}

/* Hairline divider between meta and usage */
.color-card__divider {
  height: 1px;
  background: #E5E7EB;
  margin: 2px 0 10px;
}

/* Usage description */
.color-card__usage {
  font-size: 12px;
  color: #949494;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}