:root {  
  --bs-font-sans-serif: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --elf-template-color-rgb: var(--bs-dark-rgb);
  --elf-template-color: var(--bs-dark);
  --elf-template-font-body: var(--bs-font-sans-serif);
  --elf-template-font-heading: var(--bs-font-sans-serif);
  --elf-template-heading-align: baseline;
  --elf-error-height: calc(0.25rem + 1.5 * 0.875em);
  --bs-body-color: #343a40;
  --bg-elf: #EFF4F3;
  --bg-elf-rgb: 239, 244, 243;
  --elf-callout-color: #E4DCE5;
  --elf-callout-color-rgb: 228, 220, 229;
  --bs-ext-link-color: #0d6efd;
  --bs-ext-link-color-rgb: 13, 110, 253;
  --bs-ext-link-decoration: none;
  --bs-ext-link-hover-color: #0a58ca;
  --bs-ext-link-hover-color-rgb: 10, 88, 202;
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --elf-color-100: #5C8E7F;
  --elf-color-80: #7DA599;
  --elf-color-40: #BED2CC;
  --elf-color-20: #DEE8E5;
  --elf-color-10: #EFF4F3;
  --elf-color-100-rgb: 92, 142, 127;
  --elf-color-80-rgb: 125, 165, 153;
  --elf-color-40-rgb: 190, 210, 204;
  --elf-color-20-rgb: 222, 232, 229;
  --elf-color-10-rgb:  239, 244, 243;
  --estimate-rgb: 87, 25, 135;
  --quote-rgb: 53, 57, 167;
  --invoice-rgb: 0, 122, 174;
  --receipt-rgb: 25, 135, 84;
  --contacts-rgb: 235, 176, 23;
  --items-rgb: 180, 62, 36;
  --apps-rgb: 49, 39, 255;
  --purchase-order-rgb: 191, 57, 124;
  --bill-of-sale-rgb: 150, 95, 95;
  --proposal-rgb: 210, 102, 102;
  --packing-list-rgb: 53, 165, 118;
  --work-order-rgb: 104, 117, 220;
  --bid-rgb: 196, 72, 40;
  --order-form-rgb: 195, 110, 40;
  --contract-rgb: 88, 172, 189;
  --letter-rgb: 126, 57, 121;
  --bill-of-materials-rgb: 180, 62, 36;
  --price-list-rgb: 176, 84, 24;
  --credit-note-rgb: 0, 120, 120;
  --proforma-invoice-rgb: 200, 180, 50;
  --vendors-rgb: 111, 78, 55;
}

/* || FIXES */
/* Chrome fix: Autofill input - override autofill defaults in Chrome */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:first-line {
  font-size: 1.25rem;
  line-height: 1.5;  
}

.was-validated .form-control:valid, .form-control.is-valid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

/* SVG in internet explorer fix, fixes the sixing og the svg images with .img-fluid class in Internet Explorer 10 */
.img-explorer {
  width: 100% \9;
}

.card-img {
  height: auto;
}

/* Form control fix for div */
div.form-control {
  height: auto;
}

.was-validated div.form-control:invalid, div.form-control.is-invalid {
  border-color: var(--bs-danger);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.j-signup, .j-pw-request, .j-login {
  display: none
}

/* END - FIXES */

/* || GENERAL */
/* External pages */
.external {
  font-size: 1.1rem;
}
.external .breadcrumb {
  font-size: 1rem !important; 
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .external {
    font-size: 1.2rem;
  }
  .external .breadcrumb {
    font-size: 1rem !important; 
  }
}

.ext-link {
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.ext-link:hover {
  text-decoration: none;
}

.wrapper-link,
.wrapper-link:hover {
  text-decoration: none;
  color: inherit;
}
.wrapper-link-shadow .card {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.wrapper-link-shadow:hover .card {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.bg-elf,
.bg-elf > *:not(button):not(.no-inherit) {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bg-elf-rgb), var(--bs-bg-opacity)) !important;
}
.elf-text {
  color: var(--elf-color-100);
}
.elf-color-100,
.elf-color-100 > *:not(button) {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--elf-color-100-rgb), var(--bs-bg-opacity)) !important;
}
.elf-border-color-100,
.elf-border-color-100 > *:not(button) {
  --bs-border-opacity: 1;
  border-color: rgba(var(--elf-color-100-rgb), var(--bs-border-opacity)) !important;
}
.elf-color-80,
.elf-color-80 > *:not(button) {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--elf-color-80-rgb), var(--bs-bg-opacity)) !important;
}
.elf-color-40,
.elf-color-40 > *:not(button) {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--elf-color-40-rgb), var(--bs-bg-opacity)) !important;
}
.elf-color-20,
.elf-color-20 > *:not(button) {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--elf-color-20-rgb), var(--bs-bg-opacity)) !important;
}
.elf-color-10,
.elf-color-10 > *:not(button) {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--elf-color-10-rgb), var(--bs-bg-opacity)) !important;
}
.border-color-elf {
  --bs-border-color: var(--elf-color-40);
}

.bg-callout {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--elf-callout-color-rgb), var(--bs-bg-opacity)) !important;
}

.btn-block {
  width: 100%;
}
/* lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
.btn-block-md-down {
  width: 100%;
}
}

.btn {
  border-radius: calc(0.5 * (1.5em + 0.375rem * 2));
}

.btn-lg {
  border-radius: calc(0.5 * (1.5em + 0.5rem * 2));
}

.btn-sm {
  border-radius: calc(0.5 * (1.5em + 0.25rem * 2));
}

a {
  text-decoration: none;
}

/* container-login */
.container-login {
  max-width: 400px;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

/* Fit table column width to content */
.table td.col-fit, 
.table th.col-fit {
  white-space: nowrap;
  width: 1%;
}

.tax-symbol-container {
  position: relative;
}
.tax-symbol {
  position: absolute;
  top: 0.85rem;
  left: calc(100% -0.25rem);
}

.btn-category {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  vertical-align: middle;
  text-decoration: none !important;
  background-color: var(--bs-light);
}
.btn-category:hover, .btn-category:active {
  background-color: var(--bs-dark);
}
.btn-category-text {
margin-right: auto;
}

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

/* container-half */
.container-half {
  max-width: 540px;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}


/* Status */
.status-draft,
.status-draft:hover {
  color: var(--bs-light-text-emphasis);
  background-color: var(--bs-light-bg-subtle);
  border-color: var(--bs-light-border-subtle) !important;
  cursor: text;
}
.status-sent,
.status-sent:hover {
  color: var(--bs-secondary-text-emphasis);
  background-color: var(--bs-secondary-bg-subtle);
  border-color: var(--bs-secondary-border-subtle) !important;
  cursor: text;
}
.status-delivered,
.status-delivered:hover {
  color: var(--bs-info-text-emphasis);
  background-color: var(--bs-info-bg-subtle);
  border-color: var(--bs-info-border-subtle) !important;
  cursor: text;
}
.status-viewed,
.status-viewed:hover {
  color: var(--bs-info-text-emphasis);
  background-color: var(--bs-info-bg-subtle);
  border-color: var(--bs-info-border-subtle) !important;
  cursor: text;
}
.status-paid,
.status-paid:hover,
.status-accepted,
.status-accepted:hover {
  color: var(--bs-primary-text-emphasis);
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle) !important;
  cursor: text;
}
.status-declined,
.status-declined:hover,
.status-write-off,
.status-write-off:hover {
  color: var(--bs-danger-text-emphasis);
  background-color: var(--bs-danger-bg-subtle);
  border-color: var(--bs-danger-border-subtle) !important;
  cursor: text;
  white-space: nowrap;
}
.status-partially-paid,
.status-partially-paid:hover {
  color: var(--bs-primary);
  background-color: var(--bs-light-bg-subtle);
  border-color: var(--bs-primary-border-subtle) !important;
  cursor: text;
  white-space: nowrap;
}
.status-overdue,
.status-overdue:hover {
  color: var(--bs-warning-text-emphasis);
  background-color: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning-border-subtle) !important;
  cursor: text;
}
.status-void,
.status-void:hover {
  color: var(--bs-white);
  background-color: var(--bs-dark);
  border-color: var(--bs-dark) !important;
  cursor: text;
}

/* END Status */

/* Large checkbox */
.checkbox-lg {
  display: inline-block;
  width: 24px!important;
  height: 24px!important;
  margin-top: 0 !important;
  vertical-align: top !important;
}

.label-checkbox-lg {
  display: inline-block;
  margin-left: 15px;
  vertical-align: bottom;
}


.narrow-fow {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}

.container-lg.beautify {
  --bs-gutter-x: 2.5rem;
}

/* Beautify */
/* Heading margins */
.beautify h2,
.beautify h3, 
.beautify h4,
.beautify h5 {
  margin-bottom: 1.25rem;
}

/* Padding before heading */
.beautify figure+h2, 
.beautify figure+h3, 
.beautify figure+h4, 
.beautify ol+h2, 
.beautify ol+h3, 
.beautify ol+h4, 
.beautify ol+h5, 
.beautify p+h2, 
.beautify p+h3, 
.beautify p+h4, 
.beautify p+h5,
.beautify ul+h2, 
.beautify ul+h3, 
.beautify ul+h4,
.beautify ul+h5,
.beautify ul+figure,
.beautify table+h2, 
.beautify table+h3, 
.beautify table+h4,
.beautify table+h5,
.beautify button+h2, 
.beautify button+h3, 
.beautify button+h4,
.beautify button+h5,
.beautify a.wrapper-link+h2,
.beautify a.wrapper-link+h3,
.beautify a.wrapper-link+h4,
.beautify a.wrapper-link+h5,
.beautify .card+h2, 
.beautify .card+h3, 
.beautify .card+h4,
.beautify .card+h5,
.beautify .template-sample+h2, 
.beautify .template-sample+h3, 
.beautify .template-sample+h4,
.beautify .template-sample+h5,
.beautify .table-container-blog+h2, 
.beautify .table-container-blog+h3, 
.beautify .table-container-blog+h4,
.beautify .table-container-blog+h5,
.beautify .equation-wrapper+h2, 
.beautify .equation-wrapper+h3, 
.beautify .equation-wrapper+h4,
.beautify .equation-wrapper+h5
 {
  padding-top: 2rem;
}
 
/* Margin below elements */
.beautify  figure,
.beautify ol, 
.beautify p, 
.beautify uL:not(.nav):not(.navbar-nav),
.beautify table,
.beautify .card,
.beautify a.wrapper-link,
.beautify .template-sample {
  margin-bottom: 2rem;
}

.beautify li>ul {
  margin-bottom: 0 !important;
  margin-top: 0.75rem !important;
}

/* Double margin on last paragraph */
.beautify  p:last-child {
  margin-bottom: 4rem;
}

.alert-elf {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--elf-color-10);
  --bs-alert-border-color: var(--elf-color-100);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.card-elf {
  border-color: var(--elf-color-100);
  --bs-card-bg: var(--elf-color-10);
  color: var(--bs-primary-text-emphasis);
}
.card-elf .card {
  border-color: var(--elf-color-40) !important;
}

.modal-elf {
  --bs-modal-bg: var(--elf-color-10);
  --bs-modal-header-border-color: var(--elf-color-40);
  --bs-modal-footer-border-color: var(--elf-color-40);
}
.modal-elf .form-control {
  border-color: var(--elf-color-40) !important;
}
.modal-elf .input-group-text {
  background-color: var(--elf-color-20);
  border-color: var(--elf-color-40);
  color: var(--bs-primary-text-emphasis);
}

/* Collapsable FAQ-list */
.faq-collapse p:last-child,
.faq-collapse h5 {
  margin-bottom: 0;
}
.faq-collapse .btn {
  position: relative;
  border-color: var(--elf-color-100);
  color: var(--bs-primary-text-emphasis);
  background-color: var(--elf-color-10);
  text-align: left;
  border-radius: var(--bs-card-border-radius);
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  vertical-align: middle;
  text-decoration: none !important;
  --bs-btn-padding-y: 1rem;
  --bs-btn-padding-x: 1.5rem;
}
.faq-collapse .card {
  position: relative;
  z-index: 0;
  border-color: var(--elf-color-100);
}
.faq-collapse .btn:hover,
.faq-collapse .btn:active {
  background-color: var(--elf-color-100);
  color: var(--bs-white);
}
.faq-collapse .card-body {
  padding-top: calc(var(--bs-card-spacer-y) + 0.5rem);
  border-radius: 0 0 var(--bs-card-border-radius) var(--bs-card-border-radius);
  margin-top: -0.5rem;
  z-index: 0;
  --bs-card-spacer-x: 1.5rem;
}
@media (max-width: 575.98px) {
  .faq-collapse .btn {
    --bs-btn-padding-y: 0.75rem !important;
    --bs-btn-padding-x: 1rem !important;
  }
  .faq-collapse .card-body {
    --bs-card-spacer-x: 1rem;
  }
}


.indent {
  margin-left: 1rem !important;
}
@media (min-width: 576px) { 
  .indent {
    margin-left: 3rem !important;
  }
  .indent-sm {
    margin-left: 3rem !important;
  }
}

/* Lists */
.beautify ol, 
.beautify ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* margin-left: 3rem; */
  margin-bottom: 1.5rem;
}
.beautify ul ul {
  margin-left: 3rem;
}

.beautify ol li {
  list-style: decimal;
  margin-bottom: 0.75rem;
  margin-left: 33px;
  display: list-item;
  text-align: inherit;
}

.beautify ul li {
  list-style: none;
  position: relative;
  padding: 0 0 0 33px;
  margin-bottom: 0.75rem;
}

.beautify ul li:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: var(--bs-primary);
  position: absolute;
  top: 0.55rem;
  left: 0;
  /* margin-top: -4px; */
}
.beautify ul ul li:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: var(--bs-primary);
  position: absolute;
  top: 0.55rem;
  left: 0;
  border-radius: 50%; /* Makes it a perfect circle */
}

.beautify ul.checklist li:before {
  background: transparent;
  content: "";
  display: block;
  transform: rotate(45deg);
  height: .975em;
  width: 0.55em;
  border-bottom: .25em solid var(--bs-primary);
  border-right: .25em solid var(--bs-primary);
  position: absolute;
  top: 0;
  left: 5px;
  margin-top: 0.1em;
}

/* END Beautify */



.btn-close-collapse {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1rem;
  border: none;
  background-color: transparent;
  color: var(--bs-secondary);
}
.btn-close-collapse:hover,
.btn-close-collapse:active {
  color: var(--bs-dark);
}
@media (min-width: 576px) {
  .collapse-dismissible .card-body {
    padding-top: 2rem;
  }
}

/* Autocomplete for select inputs */

.ac {
  /*the container must be positioned relative:*/
  position: relative;
  
}
.ac-list {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
}
.ac-list div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.ac-list div:hover {
  background-color: #e9e9e9;
}
.ac-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

/* End autocomplete */

.wrap-overflow {
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

ol.boldlist {
  margin:0 0 1.5em;
  padding:0;
  counter-reset:item;
}
 
ol.boldlist>li {
  margin:0;
  padding:0 0 0 2em;
  text-indent:-2em;
  list-style-type:none;
  counter-increment:item;
}
 
ol.boldlist>li:before {
  display:inline-block;
  width:1.5em;
  padding-right:0.5em;
  font-weight:bold;
  text-align:right;
  content:counter(item) ".";
}

.nowrap {
  white-space: nowrap;
}

/* Manual error messages */

.message-error {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}

.form-range::-webkit-slider-runnable-track {
  background-color: var(--bs-primary-bg-subtle);
}

.form-range::-moz-range-track {
  background-color: var(--bs-primary-bg-subtle);
}

/* || END GENERAL */

/* || FRONTPAGE */
h1.main-heading, .h1.main-heading {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1.main-heading, .h1.main-heading {
    font-size: 4rem;
  }
}
.section-fp:not(:last-child) {
  margin-bottom: 1.76rem;
}
@media (min-width: 992px) {
  .section-fp:not(:last-child) {
    margin-bottom: 3.34rem;
  }
}
.section-fp:not(:first-child) {
  padding-left: 7.5%;
  padding-right: 7.5%;
}

.section-fp:not(:first-child) .figure {
  padding-left: 7.5%;
  padding-right: 7.5%;
}

section.section-fp,
section.pricing-section {
  scroll-margin-top: 81px;
}
.section-fp:not(:first-child) .fp-text > * {
  padding-left: 7.5%;
  padding-right: 7.5%;
}
@media (max-width: 575.98px) {
  .section-fp:not(:first-child),
  .section-fp:not(:first-child) .fp-text > * {
    padding-left: 0;
    padding-right: 0;
  }
  section.section-fp,
  section.pricing-section {
    scroll-margin-top: 182px;
  }
}

.section-fp > .row > div {
  text-align: center;
}

@media (min-width: 768px) {
  .section-fp:first-child > .row > div:last-child,
  .section-fp:nth-child(2n+4) > .row > div:last-child,
  .section-fp:nth-child(2n+3) > .row > div:last-child {
    text-align: left;
  }

  /* Hero and even sections after hero */
  .section-fp:first-child > .row > div:first-child,
  .section-fp:nth-child(2n+4) > .row > div:first-child  {
    order: 2 !important;
  }

  .section-fp:first-child > .row > div:last-child,
  .section-fp:nth-child(2n+4) > .row > div:last-child  {
    order: 1 !important;
  }
}

/* || END FRONTPAGE */

/* || TEMPLATE PAGES */
.section-t {
  margin-bottom: 2.5rem;
}
.section-t h1,
.section-t h2,
.section-t h3:not(.card-title),
.section-t h4:not(.card-title),
.section-t h5:not(.card-title),
.section-hero *,
.section-t .btn {
  text-align: center;
} 
.section-t p:last-child {
  margin-bottom: 0 !important;
}
@media (min-width: 768px) {
  .section-t {
    margin-bottom: 4rem;
  }
  .section-t:not(.section-hero) {
    padding-left: 2.5%;
    padding-right: 2.5%;
  }
  .section-t:not(.section-hero) .figure:not(.complex-figure) {
    padding-left: 2.5%;
    padding-right: 2.5%;
  }
  .section-t h1,
  .section-t h2,
  .section-t h3,
  .section-t h4,
  .section-t h5,
  .section-hero * {
    text-align: left !important;
  }
}
@media (min-width: 992px) {
  .section-t.section-hero {
    padding-left: 2.5%;
    padding-right: 2.5%;
  }
  .section-t:not(.section-hero) {
    padding-left: 7.5%;
    padding-right: 7.5%;
  }
  .section-t:not(.section-hero) .figure:not(.complex-figure) {
    padding-left: 7.5%;
    padding-right: 7.5%;
  }
}

.figure-steps {
  position: relative;
}
.step-number {
  position: absolute;
  border: 2px solid var(--bs-primary);
  border-radius: .875rem;
  color: var(--bs-primary);
  font-weight: 600;
  font-size: 1rem;
  height: 1.75rem;
  width: 1.75rem;
  padding: 0;
  /* width: calc(1em + .5rem); */
  text-align: center;
  vertical-align: middle;
}
.step-heading {
  position: relative;
  padding-left: calc(1.75 * (1.3rem + 0.6vw));
  color: var(--bs-primary);
  text-align: left !important;
}
.step-heading .step-number {
  height: calc(1.2 * (1.3rem + 0.6vw));
  width: calc(1.2 * (1.3rem + 0.6vw));
  font-size: calc(0.875 * (1.3rem + 0.6vw));
  line-height: 1.25;
  font-weight: 600;
  border-radius: calc(0.6 * (1.3rem + 0.6vw));
  top:2rem;
  left:0;
}
.step-text {
 text-align: left !important;
}

ul.list-categories {
  list-style: none;
  margin: 0.5rem -1rem;
}
ul.list-categories li {
  display: inline-block;
  width: calc((100% - 4 * 2rem) / 3);
  /* text-transform: capitalize; */
  padding: 0;
  /* border: 1px solid var(--bs-primary); */
  /* border-radius: 0.5rem; */
  margin: 0.5rem 1rem;
}
ul.list-categories li:before {
  display: none !important;
}
ul.list-categories .btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  vertical-align: middle;
  text-decoration: none !important;
}
ul.list-categories .card {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
ul.list-categories .card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
} 
ul.list-categories .card .btn {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
ul.list-categories .card-title {
  text-align: center !important;
}
ul.list-categories li {
  width: calc(100% - 2rem);
}
@media (min-width: 620px) {
  ul.list-categories-3 li {
    width: calc((100% - 2 * 2rem - 1rem) / 2);
  }
}
@media (min-width: 900px) {
  ul.list-categories-2 li,
  ul.list-categories-4 li {
    width: calc((100% - 2 * 2rem - 1rem) / 2);
  }
}
@media (min-width: 1200px) {
  ul.list-categories-3 li {
    width: calc((100% - 3 * 2rem - 1rem) / 3);
  }
  ul.list-categories-4 li {
    width: calc((100% - 4 * 2rem - 1rem) / 4);
  }
}

.file-link:hover {
  font-weight: 700;
} 


/* || END TEMPLATE PAGES */



/* || NAVBAR */
.sticky-navbar-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
}

/* || ENDNAVBAR */

/* || FOOTER */
.footer-link-list {
  list-style-type: none;
  padding: 0;
  margin-bottom: 0;
}

.footer-link-list li {
  margin: .75rem 0;
  font-size: 1.1rem;
}

.footer-link-list li:first-child {
  margin-top: 0;
}

.footer-link-list li:last-child {
  margin-bottom: 0;
}

.footer-link {
  color: #6c757d;
}

.footer-link:hover {
  color: #343a40;
  text-decoration: none;
}

.social-media-links a {
  font-size: 30px;
  margin-left: .5rem;
  margin-right: .5rem;
}

/* Make columns same height */
.row-col-eq-height-footer {
  display: flex; /* equal height of the children */
}

.col-eq-height-footer .card { 
  height: 100%; /* height equal to that of parent */
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .row-col-eq-height-footer {
    margin: 20px 0 !important;
  }
}

/* Extra small devices (portrait phones, less than 576px) */
@media screen and (max-width: 575.98px) { /* below small device size */
  .row-col-eq-height-footer {
    display: block; /* no longer need equal height of the children */
    margin: 15px 0 !important;
  }
}

/* END FOOTER */

/* || HOME */
.menu-box {
  text-align: left;
  margin: 0 auto;
}
.menu-list {
  list-style: none;
  padding: 1rem 0 1rem 0;
}
.menu-list li {
  display: inline-block;
  width: calc(100% - 1rem);
  padding: 0;
  margin: 0.5rem;
}
.menu-list a {
  text-decoration: none !important;
  color: var(--bs-body-color);
}
.menu-item {
  --menu-item-color-rgb: var(--bs-primary-rgb);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  vertical-align: middle;
  text-decoration: none !important;
  padding: .5rem .75rem;
  background-color: rgba(var(--menu-item-color-rgb),0.1);
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius-xl);
  font-weight: 500;
  font-size: 1rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  
}

.menu-item:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.menu-item button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 62px;
  width: 62px;
  font-size: 30px;
  line-height: 30px;
  border: 1px solid var(--bs-border-color);
  color: rgb(var(--menu-item-color-rgb));
  border-radius: 50%; 
  background-color: #fff; 
  margin-right: 1rem;
}
.menu-item-button-group {
  display: flex;
  align-items: center;
  text-align: left;
  vertical-align: middle;
}
.menu-title-2 {
  display: none;
}
.menu-item-estimate {
  --menu-item-color-rgb: var(--estimate-rgb);
}
.menu-item-quote {
  --menu-item-color-rgb: var(--quote-rgb);
}
.menu-item-invoice {
  --menu-item-color-rgb:  var(--invoice-rgb);
}
.menu-item-receipt {
  --menu-item-color-rgb: var(--receipt-rgb);
}
.menu-item-contacts {
  --menu-item-color-rgb: var(--contacts-rgb);
}
.menu-item-items {
  --menu-item-color-rgb: var(--items-rgb);
}

.menu-item-purchase-order {
  --menu-item-color-rgb: var(--purchase-order-rgb);
}
.menu-item-bill-of-sale {
  --menu-item-color-rgb: var(--bill-of-sale-rgb);
}
.menu-item-proposal {
  --menu-item-color-rgb: var(--proposal-rgb);
}
.menu-item-packing-list {
  --menu-item-color-rgb: var(--packing-list-rgb);
}
.menu-item-work-order {
  --menu-item-color-rgb: var(--work-order-rgb);
}
.menu-item-bid {
  --menu-item-color-rgb: var(--bid-rgb);
}
.menu-item-order-form {
  --menu-item-color-rgb: var(--order-form-rgb);
}
.menu-item-contract {
  --menu-item-color-rgb: var(--contract-rgb);
}
.menu-item-letter {
  --menu-item-color-rgb: var(--letter-rgb);
}
.menu-item-bill-of-materials {
  --menu-item-color-rgb: var(--bill-of-materials-rgb);
}
.menu-item-price-list {
  --menu-item-color-rgb: var(--price-list-rgb);
}
.menu-item-credit-note {
  --menu-item-color-rgb: var(--credit-note-rgb);
}
.menu-item-proforma-invoice {
  --menu-item-color-rgb: var(--proforma-invoice-rgb);
}
.menu-item-vendors {
  --menu-item-color-rgb: var(--vendors-rgb);
}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .menu-box {
    max-width: calc(3 * (200px + 2rem));
  }
  .menu-list {
    display: inline-block;
    list-style: none;
    padding: 0;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin: -1rem auto;
  }
  .menu-list li {
    width: auto;
    margin: 1rem 1rem;
  }
  .menu-list .fa-chevron-right {
    display: none !important;
  }
  .menu-item-button-group {
    display: block;
    text-align: center;
  }
  .menu-item {
  
   padding: 0.75rem;
    width: 165px;
    min-height: 235px;  
    text-align: center;
    display: flex;
    flex-direction: column;
 
  }

  .menu-title-1 {
    display: none;
  }
  .menu-title-2 {
    display: block;
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 0.5rem 0;
    flex: 0 0 auto; /* ensures the title takes space as needed, but won't stretch */
  }
  .menu-item-button-group {
    flex: 1; /* occupies remaining space */
    display: flex;                   /* defines flexbox */
    justify-content: center;  /* item at center */
    align-items: center;
  }
  .menu-item button {
    height: 140px;
    width: 140px;
    font-size: 80px;
    line-height: 80px;
    margin-right: 0;
    margin-bottom: .5rem;
  }

}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .menu-box {
    max-width: calc(6 * (180px + 1.5rem));
  }
  .menu-item {
    width: 145px;
    min-height: 225px;
  }
  .menu-item button {
    height: 120px;
    width: 120px;
    font-size: 70px;
    line-height: 70px;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .menu-box {
    max-width: calc(6 * (200px + 2rem));
  }
  .menu-item {
    padding: 1rem;
    width: 180px;
    min-height: 250px;
  }
  .menu-item button {
    height: 140px;
    width: 140px;
    font-size: 80px;
    line-height: 80px;
  }
}




/* END - HOME */

/* APPS */
.app-box {
  text-align: center;
  margin: 0 auto;
}
.app-list {
  list-style: none;
  margin: -0.5rem 0;
  padding: 0;
}
ul.list-categories li {
  display: inline-block;
}
.app-list li {
  display: inline-block;
  width: calc(100% - 2px);
  margin: 0.5rem 0;
  max-width: 650px;
}
.app-card {
  padding: 0;
  border-radius: var(--bs-border-radius-xl);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);  
}
.app-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.col-app-item {
  flex: 0 0 auto;
  width: 33.33333333%;
  max-width: 120px;
}
.app-item {  
  min-height: 200px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius-xl) 0 0 var(--bs-border-radius-xl);
  background-color: rgba(var(--menu-item-color-rgb),0.1);
}
.app-title {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  flex: 0 0 auto; /* ensures the title takes space as needed, but won't stretch */
}
.app-button {
  flex: 1; /* occupies remaining space */
  display: flex;                   /* defines flexbox */
  justify-content: center;  /* item at center */
  align-items: center;
}
.app-item button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  background-color: #fff;
  font-size: 50px;
  color: rgb(var(--menu-item-color-rgb));
}
@supports (aspect-ratio: 1) {
  .app-item button {
    aspect-ratio: 1;
    width: 90px;  
    height: auto;
  }
}
.app-card:hover .btn-outline-primary {
  color: #fff;
  background-color: #198754;
}
.app-card:hover .btn-outline-danger {
  color: #fff;
  background-color: #dc3545;
}
.btn-app-item {
  width: 120px;
  margin-left: auto;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .app-item {  
    min-height: 220px;
  }
  .app-item button {
    height: 120px;
    width: 120px;
    font-size: 70px;
    line-height: 70px;
  }
  .col-app-item {
    max-width: 160px;
  }
  .app-title {
    font-size: 1.25rem;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .app-list {
    text-align: left;
    margin: -0.75rem;
  }
  .app-list li {
    text-align: center;
    margin: 0.75rem;
    width: calc((100% - 2 * 1.5rem) / 2 - 2px);
  }
}

/* END - APPS */
/* || TEMPLATES */

.form-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: right;
  white-space: normal !important;
}

.table {
  font-variant-numeric: tabular-nums;
}

/* Template color and font settings */
.template > *,
.template-line {
  font-family: var(--elf-template-font-body)!important;
}
.template-heading {
  color: var(--elf-template-color);
  font-family: var(--elf-template-font-heading);
}
/* Adjust font alignment */
.template-heading span.align-middle,
.template .payment-due td span.align-middle {
  vertical-align: var(--elf-template-heading-align) !important;
}
.template-heading th {
  border: none;
  vertical-align: middle !important;
}
.template-font-0 {
  --elf-template-font-heading: var(--bs-font-sans-serif);
  --elf-template-font-body: var(--bs-font-sans-serif);
}
.template-font-1 {
  --elf-template-font-heading: "Roboto Condensed",  var(--bs-font-sans-serif);
  --elf-template-font-body: "Roboto",  var(--bs-font-sans-serif);
}
.template-font-2 {
  --elf-template-font-heading: "Special Elite",  var(--bs-font-sans-serif);
  --elf-template-font-body: "Andika",  var(--bs-font-sans-serif);
  --elf-template-heading-align: -5px;
}
.template-font-3 {
  --elf-template-font-heading: "Copse",  var(--bs-font-sans-serif);
  --elf-template-font-body: "Copse",  var(--bs-font-sans-serif);
}
.template-font-4 {
  --elf-template-font-heading: "Courgette",  var(--bs-font-sans-serif);
  --elf-template-font-body: "Varela Round",  var(--bs-font-sans-serif);
}
.template-font-5 {
  --elf-template-font-heading: "Rubik",  var(--bs-font-sans-serif);
  --elf-template-font-body: "Rubik",  var(--bs-font-sans-serif);
}
.template .btn {
  font-family: var(--bs-font-sans-serif);
}

.dropdown-column {
  white-space: nowrap;
}
.dropdown-column a.btn {
  margin-bottom: 0.1rem !important;
} 

.template td {
  border: none;
}
.template-table-divider-first {
  border: none;
  border-top: calc(var(--bs-border-width) * 2) solid var(--elf-template-color) !important;
  /* border-bottom: calc(var(--bs-border-width) * 2) solid var(--elf-template-color) !important; */
}
.template-dm .template-table-divider-first {
  border-top: none !important;
}
.template-table-divider-second {
  border-bottom: none;
  border-top: calc(var(--bs-border-width) * 2) solid var(--elf-template-color) !important;
  /* border-bottom: calc(var(--bs-border-width) * 2) solid var(--elf-template-color) !important; */
}
.template-dm thead tr.template-heading {
  background-color: var(--elf-template-color) !important;
  color: #fff;
}
.template .payment-due td {
  border-top: calc(var(--bs-border-width) * 2) solid currentcolor !important;
  border-bottom: calc(var(--bs-border-width) * 2) solid currentcolor !important;
  border-color: var(--elf-template-color);
  font-weight: bold;
  color: var(--elf-template-color);
  font-family: var(--elf-template-font-heading);
}
.template-dm .payment-due td {
  background-color: rgba(var(--elf-template-color-rgb),0.075) !important;
}
.text-secondary-elf,
.text-secondary-elf > * {
  color: rgba(var(--elf-template-color-rgb),0.75) !important;
}
.btn-outline-elf-template-color {
  --bs-btn-color: var(--elf-template-color);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--elf-template-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--elf-template-color);
  --bs-btn-hover-border-color: var(--elf-template-color);
  --bs-btn-focus-shadow-rgb: var(--elf-template-color-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--elf-template-color);
  --bs-btn-active-border-color: var(--elf-template-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--elf-template-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--elf-template-color);
  --bs-gradient: none;
}
.btn-elf-template-color {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--elf-template-color);
  --bs-btn-border-color: var(--elf-template-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--elf-template-color);
  --bs-btn-hover-border-color: var(--elf-template-color);
  --bs-btn-focus-shadow-rgb: var(--elf-template-color-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--elf-template-color);
  --bs-btn-active-border-color: var(--elf-template-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--elf-template-color);
  --bs-btn-disabled-border-color: var(--elf-template-color);
} 
.btn-check:checked + .btn-elf-template-color,
.btn-check:checked + .btn-outline-elf-template-color {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  box-shadow: var(--bs-btn-focus-box-shadow);
}


/* END Template color and font settings */

.template {
  padding: 3.4rem;
}


.template .template-element:not(:last-child) {
  margin-bottom: 2rem;
}

.template .template-part:not(.template-table):not(:last-child) {
  margin-bottom: 2.5rem;
}

.template-info-small {
  width: 9rem;
  overflow: wrap;
}

/* Template settings */
.template-setting {
  position: relative;
  min-height: calc(1.5em + 0.375rem * 2 + 2 * var(--bs-border-width));
}

.template-setting .btn-setting {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.template-setting .collapse {
  z-index: -1;
  margin-top: 0 !important;
}

.template-setting .card {
  padding-top: calc(1.5em + 0.375rem * 2 + 2 * var(--bs-border-width));
  border-radius: calc(0.5 * (1.5em + 0.375rem * 2));
  border-color: var(--bs-dark);
}
/* END Template settings */

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
  /* correct marging when folded */
  .template .col-sm:not(:last-child) {
    margin-bottom: 1rem;
  }
}

/* x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
  .template {
    padding: 0.75rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }

  .template .template-element:not(:last-child),
  .template .col-md:not(:last-child) {
    margin-bottom: 2rem;
  }

  .template .template-part:not(:last-child) {
    margin-bottom: 2rem;
  }

  .form-title {
    font-size: 1.7rem;
  }

}

/* fixed width save button on forms */
#savebuttonspan,
#sendbuttonspan,
#paymentbuttonspan {
  display: inline-block;
  width: 2.5em;
}

/* Form menu on small screens */
/* Small devices (landscape phones, less than 768px) */
/* Menu fixed on bottom of screen */
@media screen and (max-width: 575.98px) { 
  
  .form-menu {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0.25rem 1rem 1rem 1rem;
    position: fixed;
    bottom: 0;
    z-index: 10;
    background-color: #fff !important;
    border-top: 1px solid #fff !important;
    box-shadow: 0 -.125rem .25rem rgba(0,0,0,.075)!important;
    margin-left: -0.75rem !important;
  }
  .form-menu-item {
    text-align: center;
  }
  /* one item */
  .form-menu-item:first-child:nth-last-child(1) {
  /* -or- li:only-child { */
      width: 100%;
  }
  /* two items */
  .form-menu-item:first-child:nth-last-child(2),
  .form-menu-item:first-child:nth-last-child(2) ~ .form-menu-item {
      width: 50%;
  }
  /* three items */
  .form-menu-item:first-child:nth-last-child(3),
  .form-menu-item:first-child:nth-last-child(3) ~ .form-menu-item {
      width: 33.3333%;
  }
  /* four items */
  .form-menu-item:first-child:nth-last-child(4),
  .form-menu-item:first-child:nth-last-child(4) ~ .form-menu-item {
      width: 25%;
  }
  /* five items */
  .form-menu-item:first-child:nth-last-child(5),
  .form-menu-item:first-child:nth-last-child(5) ~ .form-menu-item {
      width: 20%;
  }

  .form-menu .btn {
    width: auto;
    height: calc(16px + 26px + 2 * 0.375rem);
    padding: 0.375rem 0.1rem;
    box-shadow: none; 
    border: none;
    border-radius: calc(0.5 * (16px + 26px + 2 * 0.375rem));
    background-color: #fff;  
    font-weight: 600; 
  }
  .form-menu .btn-danger,
  .form-menu .btn-outline-danger {
    color: var(--bs-danger);
  }
  .form-menu .btn-primary,
  .form-menu .btn-outline-primary {
    color: var(--bs-primary);
  }

  .form-menu .btn:active,
  .form-menu .btn.active,
  .form-menu .btn:hover,
  .form-menu .btn.hover {
    color: var(--bs-primary-text-emphasis);  
    background-color: #fff;       
  }

  .form-menu a.max-height {
    color: #fff !important; 
    height: 100%;  
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  }

  .form-menu .btn i {
    font-size: 20px;
    line-height: 26px;
    vertical-align: bottom;
    margin-right: 0 !important;
  }

  .form-menu .btn span,
  .form-menu .btn span i {
    display: block;
    margin-left: 0;
    margin-top: 0;
    font-size: 13px;
    line-height: 16px;    
  }

  #savebuttonspan,
  #sendbuttonspan,
  #paymentbuttonspan  {
    display: block;
    width: auto;
  }

}



.logo-img {
  margin-left: auto;
  src: "\images\logo_placeholder_large.svg";
  cursor: pointer;
}

.logo-view {
  pointer-events: none;
}


.logo-small {
  height: 4rem;
}

.logo-medium {
  height: 6rem;
}

.logo-large {
  height: calc(121px -  var(--bs-border-width));
}

.card.logo-placeholder-small .card-body {
  height: 4rem;
  padding: 0;
  line-height: 4rem;
  font-size: 1.25rem;
  vertical-align: middle;
  cursor: pointer;
}

.card.logo-placeholder-medium .card-body {
  height: 6rem;
  padding: 0;
  line-height: 6rem;
  font-size: 1.25rem;
  vertical-align: middle;
  cursor: pointer;
}

.card.logo-placeholder-large .card-body {
  height: calc(121px -  var(--bs-border-width));
  padding: 0;
  line-height: calc(121px -  var(--bs-border-width));
  font-size: 1.25rem;
  vertical-align: middle;
  cursor: pointer;
}

.logo-placeholder-large i {
  font-size: 1.5rem !important;
}


.btn-upload-image-delete {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}

/* File input button styling */
.file-input-button {
position: relative;
}

.file-input-button input {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
filter: alpha(opacity=0);
opacity: 0;
cursor: pointer;
}

/* Template input */
.template-input {
  /* padding: 0.375rem 0.75rem; */
  margin: -0.1875rem 0 -0.1875rem 0;
}
 
.template-input:first-child {
  margin-top: 0 !important;
}

.template-input:last-child {
  margin-bottom: 0 !important;
}

.template .template-info:not(:last-child) {
  margin-bottom: 0.25rem !important;
}

.template .address-textarea,
.template-input textarea,
.template .notes-textarea,
.feedback-textarea {
  resize: none;
}

.template .address-textarea  {
  overflow: hidden;
}

/* Template lines */
.template-line {
  position: relative;
  transform: translate(0); /* Safari hack */
}

.delete-template-line {
  position: absolute;
  right: -2.5rem;
  top: 0;
}

.edit-template-line {
  position: absolute;
  left: -2.5rem;
  top: 0;
}

.btn-delete-template-line {
  padding: 0.25rem 0.4rem;
}

.table-hover > tbody > tr.template-line:hover > td.delete-template-line,
tr.template-line:hover td.delete-template-line,
tr.template-line:hover td.edit-template-line {
  --bs-table-accent-bg: transparent;
}

.edit-template-line > .btn,
.delete-template-line > .btn {
  padding: 0.25rem 0.4rem;
}

table.table-totals tr td:nth-last-child(2) {
  width: 50%;
}


.total-row td {
  height: calc(1.5 * 1em + 0.5rem * 2);
}


/* x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .total-row td {
    height: calc(1.5 * 0.875em + 0.25rem * 2);
  }

  .template-input {
    /*   padding: 0.25rem 0.5rem; */
    margin: -0.125rem 0 -0.125rem 0;
  }

  .template-input:first-child {
    margin-top: 0 !important;
  }
  
  .template-input:last-child {
    margin-bottom: 0 !important;
  }
  
  .template-table {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .delete-template-line {
    right: -1.75rem !important;
  }
  
  .edit-template-line {
    left: -1.75rem;
  }

}

/* Preview mode */
.template.template-view {
  padding: 3.4rem;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}
@media (max-width: 575.98px) { 
  .template.template-view {
    padding: 0.75rem 1.25rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }
  .template-view .template-table {
    padding-left: 0rem;
    padding-right: 0rem;
  }
}

.template-view textarea.address-textarea, 
.template-view textarea.notes-textarea {
  display: none !important;
}
.template-view div.address-textarea, 
.template-view div.notes-textarea {
  display: block !important;
}

.template-view .card,
.template-view .card-body,
.template-view .form-control {
  border: none !important;
  background-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


.template-view .logo-placeholder-small,
.template-view .logo-placeholder-medium,
.template-view .logo-placeholder-large {
  display: none !important;
}

.template-view button,
.template-view button:hover,
.template-view button:active {
  display: none;
}

.template-view .template-to-header,
.template-view .template-notes-header {
  margin-bottom: 0 !important;
}

.template-view .notes-textarea {
  resize: none;
  overflow: visible;
}

/* END Preview mode| */

/* Make columns same height */
.eq-height-wrapper-lg,
.eq-height-wrapper-md,
.eq-height-wrapper-sm {
  display: flex; /* equal height of the children */
}
.eq-height { 
  height: 100%; /* height equal to that of parent */
}
@media screen and (max-width: 991.98px) { /* below large device size */
  .eq-height-wrapper-lg {
    display: block; /* no logner need equal height of the children */
  }
}
@media screen and (max-width: 767.98px) { /* below medium device size */
  .eq-height-wrapper-md {
    display: block; /* no logner need equal height of the children */
  }
}
@media screen and (max-width: 575.98px) { /* below small device size */
  .eq-height-wrapper-sm {
    display: block; /* no logner need equal height of the children */
  }
}

/* Vertical space between items in column */
.vertical-space-between {
  height: 100%;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */  
}

.vertical-end {
  height: 100%;
  display: flex !important;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: flex-end;  /* item at end */
}

.vertical-middle {
  height: 100%;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: center;  /* item at center */
}

.margin-label {
  margin-top: 1.75rem;
}

@media (max-width: 575.98px) {
  .margin-label {
    margin-top: 1.56rem
  }
  .external .margin-label {
    margin-top: calc(1.1rem * 1.5 + 0.25rem)
  }
}

/* Table sort */

table.table-sort thead>tr>th.sorting_asc,
table.table-sort thead>tr>th.sorting_desc,
table.table-sort thead>tr>th.sorting,
table.table-sort thead>tr>td.sorting_asc,
table.table-sort thead>tr>td.sorting_desc,
table.table-sort thead>tr>td.sorting {
  padding-left: 30px;
}

table.table-sort thead>tr>th:active,
table.table-sort thead>tr>td:active {
  outline: none;
}

table.table-sort thead .sorting,
table.table-sort thead .sorting_asc,
table.table-sort thead .sorting_desc,
table.table-sort thead .sorting_asc_disabled,
table.table-sort thead .sorting_desc_disabled {
  position: relative;
  cursor: pointer;
}

table.table-sort thead .sorting:before,
table.table-sort thead .sorting:after,
table.table-sort thead .sorting_asc:before,
table.table-sort thead .sorting_asc:after,
table.table-sort thead .sorting_desc:before,
table.table-sort thead .sorting_desc:after,
table.table-sort thead .sorting_asc_disabled:before,
table.table-sort thead .sorting_asc_disabled:after,
table.table-sort thead .sorting_desc_disabled:before,
table.table-sort thead .sorting_desc_disabled:after {
  position: absolute;
  bottom: .65em;
  display: block;
  opacity: .3
}

table.table-sort thead .sorting:before,
table.table-sort thead .sorting_asc:before,
table.table-sort thead .sorting_desc:before,
table.table-sort thead .sorting_asc_disabled:before,
table.table-sort thead .sorting_desc_disabled:before {
  left: .5rem;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 1rem;
  font-weight: 900;
  content: "\f0de";
}

table.table-sort thead .sorting:after,
table.table-sort thead .sorting_asc:after,
table.table-sort thead .sorting_desc:after,
table.table-sort thead .sorting_asc_disabled:after,
table.table-sort thead .sorting_desc_disabled:after {
  left: .5rem;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 1rem;
  font-weight: 900;
  content: "\f0dd";
}

table.table-sort thead .sorting_asc:before,
table.table-sort thead .sorting_desc:after {
  opacity: 1
}

table.table-sort thead .sorting_asc_disabled:before,
table.table-sort thead .sorting_desc_disabled:after {
  opacity: 0
}

/* END Table sort */

/* Signature fields */
.signature {
  display: inline-block;
  width: 40%;
  margin-right: 20%;
  margin-left: 0;
}
.signature:last-child,
.signature:has(+ .d-none) {
  margin-right: 0 !important;
}
.signature-element + .signature-element {
 margin-top: 1.5rem;
}
.signature-date {
  display: inline-block;
  vertical-align: top;
  width: 32.5%;
  margin-right: 0;
  margin-left: 0;
}
.signature-signature {
  display: inline-block;
  vertical-align: top;
  width: 60%;
  margin-right: 7.5%;
  margin-left: 0;
}
.signature-line {
  border-top: 2px solid var(--elf-template-color);
  margin-top: 4rem;
  margin-bottom: 0.25rem;
  opacity: 1;
}
.signature-description {
  color: var(--elf-template-color);
  text-align: center;
  font-size: 0.875em;
}
.signature-add-on div {
  position: relative;
}
.signature-add-on .checkbox-lg {
  margin-top: 7px !important;
}
.signature-add-on .form-control {
  margin-left: 2rem;
  width: calc(100% - 2rem);
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 575.98px) { 
  .signature-add-on .checkbox-lg {
    margin-top: 3px !important;
  }
  .signature {
    width: 45%;
    margin-right: 10%;
  }
  .signature-line {
    margin-top: 2.5rem;
  }
}
/* END Signature fields */

/* END TEMPLATES */

/* || SUPPORTING PAGES */
/* FAQ */
ul.faq-question-list,
ul.faq-category-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

ul.faq-question-list li {
  margin: 2rem 0;
  padding: 0;
}

ul.faq-category-list li {
  margin-bottom: .25rem;
}

ul.faq-question-list li:before,
ul.faq-category-list li:before {
  display: none;
} 

.text-faq-alert {
  font-weight: 600;
}


/* FAQ category buttons */
.btn-faq-category {
  color: #343a40;
  border-color: transparent;
  text-align: left;
}

.btn-faq-category:hover {
  color: var(--bs-primary);
  font-weight: 700;
}

.btn-faq-category:focus, .btn-faq-category.focus {
  box-shadow: none;
  color: var(--bs-primary);
  font-weight: 700;
}


.btn-faq-category:not(:disabled):not(.disabled):active, .btn-faq-category:not(:disabled):not(.disabled).active,
.show > .btn-faq-category.dropdown-toggle {
  color: var(--bs-primary);
  font-weight: 700;
}

.btn-faq-category:not(:disabled):not(.disabled):active:focus, .btn-faq-category:not(:disabled):not(.disabled).active:focus,
.show > .btn-faq-category.dropdown-toggle:focus {
  box-shadow: none;
  font-weight: 700;
}
/* END FAQ category buttons */

/* CANCEL ACCOUNT */
.cancel-card-image {
  position: relative;
  width: 100%;
  height: 150px;
  margin:0%;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain; /* you change this to "contain" if you don't want the images to be cropped */
  border-radius: 0.25rem;
}
/* END CANCEL ACCOUNT */

/* PLANS */
@media (max-width: 575.98px) {
  .card-plan {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ribbon */
.ribbon-container {
  position:relative;
}

.ribbon {
  --f: 10px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 2rem; /* the top offset */

  position: absolute;
  background: #BD1550;
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
  font-size: 1.2rem;
  line-height: calc(1rem + 1.25em);
}
.ribbon-right {
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 10px var(--f) calc(10px + var(--r));
  -webkit-clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
          clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
}
.ribbon-left {
  inset: var(--t) auto auto calc(-1*var(--f));
  padding: 0 calc(1rem + var(--r)) var(--f) 1rem;
  -webkit-clip-path: 
    polygon(0 0,100% 0,calc(100% - var(--f)) calc(50% - var(--f)/2),100% calc(100% - var(--f)),
      100% calc(100% - var(--f)), var(--f) calc(100% - var(--f)), var(--f) 100%, 0 calc(100% - var(--f)));
          clip-path: 
    polygon(0 0,100% 0,calc(100% - var(--f)) calc(50% - var(--f)/2),100% calc(100% - var(--f)),
    100% calc(100% - var(--f)), var(--f) calc(100% - var(--f)), var(--f) 100%, 0 calc(100% - var(--f)));
}

/* END PLANS */

/* || END SUPPORTING PAGES */


/* || BLOG */


/* || END BLOG */

/* || CALCULATOR */
.calculator,
.blog-toc {
  margin-top: 0px;
  position: sticky;
  top: 0px;
  margin-bottom: 1.67em !important;
  max-width: 730px;
  margin-left: auto;
  margin-right: auto;
  --bs-border-color: #BED2CC;
}
.blog-toc {
  padding-top: 20px;
}

.directory-page .navbar,
.directory-page section {
  --bs-border-color: var(--elf-color-40);
}
.directory-page .card {
 --bs-card-border-color: #BED2CC !important;
 color: var(--bs-primary-text-emphasis);
}
.directory-page .card .card-header {
  background-color: var(--bg-elf);
}

.calculator {
  margin-top: 20px;
}
.article-content {
  margin-top: 20px;
}
.blog-content {
  margin-top: 20px;
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .calculator {
      margin-top: 40px;
      position: sticky;
      top: 40px;
  } 
  .article-content {
    margin-top: 40px;
  }
}

.calculator .card {
  background-color: var(--elf-color-10);
  border-color: var(--elf-color-100);
  color: var(--bs-info-text-emphasis);
}
.calculator .card .form-control {
  border-color: #BED2CC;
  color: var(--bs-info-text-emphasis);
}
.calculator .card .input-group-text {
  background-color: var(--elf-color-20);
}

.calculator label {
  font-weight: 500;
}

.calculator input {
  font-weight: 500;
  font-size: 18px;
}

.calculator input.result,
.calculator .input-group-text {
  font-weight: 700;
}


.calculator li {
  letter-spacing: normal;
}

ul.word-definitions li {
  margin: 2rem 0;
}
ul.word-definitions li:before {
  background: var(--elf-color-100);
}

.calculator .card,
.calculator-menu  {
  max-width:  450px;
  margin-left: auto;
  margin-right: auto;
}

.calculator-menu .btn {
  color: var(--bs-white);
  background-color: transparent;
  border-color: transparent;
}
.calculator-menu .btn:hover {
  color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
  border-color: transparent;
}
@media (max-width: 991.98px) {
  .calculator-menu .btn {
    color: var(--bs-primary);
  }
}

.btn-directory {
  background-color: var(--bs-white);
}
.btn-directory:hover, .btn-directory:active {
  background-color: var(--bs-dark);
}
.btn-directory-try {
  background-color: var(--bg-elf);
  border-color: var(--elf-color-100);
}
.btn-directory-try:hover, .btn-directory-try:active {
  background-color: var(--elf-color-100);
  border-color: var(--elf-color-100);
}

.table-container-blog {
  border: 1px solid #BED2CC;
  border-radius: var(--bs-border-radius-lg) !important;
  margin-bottom: 1rem;
  color: var(--elf-color-100);
  border-color: #BED2CC;
}
.table-container-blog .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--elf-color-10);
}
.table-container-blog table {
  margin-bottom: 0 !important;
}
.table-container-blog table thead tr:first-child th:first-child {
  border-radius: var(--bs-border-radius-lg) 0 0 0;
}
.table-container-blog table thead tr:first-child th:last-child {
  border-radius: 0 var(--bs-border-radius-lg) 0 0;
}
.table-container-blog table tbody tr:last-child td:last-child {
  border-radius: 0 0 var(--bs-border-radius-lg) 0;
}
.table-container-blog table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 var(--bs-border-radius-lg);
}
.table-container-blog table tbody tr:last-child td {
 border: none;
}

.table-blog tbody:first-child tr:last-child td {
  padding-bottom: 1.5rem;
}
.table-blog tbody:last-child tr:first-child td {
  padding-top: 1.5rem;
}
.table-blog input {
  text-align: right;
}
.table-blog {
  --bs-table-hover-bg: var(--bg-elf);
  border-color: #BED2CC;
}

.equation table {
  margin-bottom: 0 !important;
}
.equation-wrapper {
  text-align: center;
}
.equation {
  display: inline-block;
  border: 1px #BED2CC solid;
  background-color: var(--bg-elf);
  padding: 1rem;
  border-radius: var(--bs-border-radius);
}


/* background image */
body.directory-page {
  position: relative;
}

.bkgImage.calculator-bkg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 43%;
  height: 101vh;
}

.bkgSlab.calculator-bkg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 32.25%;
}

.image.calculator-bkg {
  background-color: var(--elf-color-100);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-blend-mode: color-burn;
}

.safari-hack-vertical.calculator-bkg {
  position: absolute;
  top: 6px;
  right: -1px;
  width: 2px;
  height: 100%;
  background: var(--bs-light);
}

.safari-hack-horizontal.calculator-bkg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--elf-color-100);
}

.triangle.calculator-bkg {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  height: 100%;
}

.Triangle.triangle-bkg {
  width: 100%;
  height: 100%;
}

.blog-title {
  margin-bottom: 0.8333333333333em;
}

/* Author and published */
p.author,
p.reading-time {
    color: #6c757d;
    font-size: 13px;
    margin-top: -.835em;
    margin-bottom: 2.45em !important;
}

p.reading-time {
    margin-top: -1.8em;
}

p.author span {
    margin: 0 .25rem;
}

p.author span:first-child {
    margin-left: 0;
}

p.author span:last-child {
    margin-right: 0;
}
/* END Author and published */

/* Blog widget */
.blog-widget {
  margin-top: 40px;
  margin-bottom: 50px;
}

.blog-widget:last-child {
  margin-bottom: 0;
}

.blog-widget .card-title {
  font-size: 36px;
  font-weight: 200;
  padding-top: .58333em;
  margin-bottom: .75em;
}

.blog-widget .card-title-bold {
  font-size: 32px;
  font-weight: 500;
  font-stretch: condensed;
}

.blog-widget .card-text {
  font-size: 1.1rem;
}

.border-deco-top-middle {
  position: relative;
}

.border-deco-top-middle:after {
  width: 40px;
  margin-left: -20px;
  top: 0;
  left: 50%;
  height: 2px;
  content: "";
  display: block;
  background: var(--bs-primary);
  position: absolute;
  bottom: 0;
}
/* END Blog widget */

/* END CALCULATOR */


/* || Cookies */
.body {
  position: relative;
}

div.cookie-consent {
  position: fixed;
  /* bottom: 30px;
  left: 50%;
  width: calc(100% - 40px);
  max-width: 1200px;
  transform: translateX(-50%);
  border-radius: .5rem; */
  width: 100%;
  bottom: 0;
  border: none;
  border-radius: 0;
  background-color: var(--elf-callout-color);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
  z-index: 1000;
}

#cookieConsent a {
  color: var(--bs-link-color);
  text-decoration: none;
  background-color: transparent;
}

#cookieConsent a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

div.cookie-consent .card {
  border-radius: 0;
  background-color: var(--elf-callout-color);
  border: none;
  max-width: 1200px;
}

i.fa-cookie {
  font-size: 2rem;
  color: #9d6b53;
}

i.fa-cookie-bite {
  font-size: 2rem;
  margin-left: -1.2rem;
  margin-right: .5rem;
  color: #d69f7e;
}

.cookie-text {
  display: inline-block;
  margin-left: 62px;
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  button.btn-cookies {
    display: block !important;
  }
}


/* || END Cookies */

/* || REVIEWS */
.img-review {
  max-height: 180px;
}

.star-container {
    display: flex;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    padding: 1.5rem 0;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.star-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.star-wrapper.with-label .star-label {
    position: absolute;
    top: 100%;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    width: max-content;
    text-align: center;
}

.star-icon {
    font-size: 2.5rem;
    cursor: pointer;
    color: #facc15;
    transition: color 0.2s ease;
}

.star-icon.far {
    color: #d1d5db;
}

/* Star states */
.star-icon.selected {
    color: #facc15;
}
.star-icon.unselected {
    color: #d1d5db;
}


/* || ENDREVIEWS */


/* || MOBILE STYLE */
/* x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  /* Headings */
  h5, .h5 {
    font-size: 1.05rem;
  }


  /* buttons */
  .btn:not(.not-responsive), 
  .btn-group > .btn {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size:0.875rem;
  }

  .btn + .dropdown-toggle-split, .btn-group > .btn + .dropdown-toggle-split {
    padding-right: 0.375rem;
    padding-left: 0.375rem;
  }

  .btn-lg:not(.not-responsive) {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 1rem;
  }

  .btn:not(.not-responsive) {
    border-radius: calc(0.5 * (1.5em + 0.25rem * 2));
  }
 
  /* Keep radio toogle button group behaviour */
  .btn-group > .btn:nth-child(n+3), .btn-group > :not(.btn-check) + .btn, .btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  .btn-lg:not(.not-responsive) {
    border-radius: calc(0.5 * (1.5em + 0.375rem * 2));
  }

  /* input group */
  .input-group > .form-control:not(.not-responsive),
  .input-group > .form-select:not(.not-responsive),
  .input-group > .input-group-text:not(.not-responsive),
  .input-group > .btn:not(.not-responsive) {
      padding: 0.25rem 0.5rem;
      font-size: 16px;
  }

  .input-group > .form-select:not(.not-responsive) {
    padding-right: 3rem;
  }

  .input-group-lg > .form-control:not(.not-responsive),
  .input-group-lg > .form-select:not(.not-responsive),
  .input-group-lg > .input-group-text:not(.not-responsive),
  .input-group-lg > .btn:not(.not-responsive) {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.5rem;
  }

  /* form control */
  .form-control:not(.not-responsive) {
    min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
    padding: 0.25rem 0.5rem;
    font-size: 16px;
    border-radius: 0.25rem;
  }

  /* Card */
  .card {
    border-radius: 0.25rem;
  }

  .card-body {
    padding: 0.85rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
  }
  .external .card-body {
    font-size: 1rem;
  }

  .app-item {
    border-radius: 0.25rem 0 0 0.25rem;
  }
  
  /* Table */
  .table > :not(caption) > * > * {
    padding: 0.25rem 0.35rem;
    font-size: 1rem;
  }

  .tax-symbol {
    top: 0.5rem;
    left: calc(100% - 0.25rem);
  }

  /* Pagination */
  .pagination {
    --bs-pagination-padding-x: 0.5rem;
    --bs-pagination-padding-y: 0.25rem;
    --bs-pagination-font-size: 0.875rem;
    --bs-pagination-border-radius: 0.25rem;
  }

  /* Font */
  body {
    font-size: 0.875rem;
  }

  /* Table sort */
  table.table-sort thead .sorting:before,
  table.table-sort thead .sorting_asc:before,
  table.table-sort thead .sorting_desc:before,
  table.table-sort thead .sorting_asc_disabled:before,
  table.table-sort thead .sorting_desc_disabled:before {
    right: .25rem;
    font-size: 0.875rem;
  }
  
  table.table-sort thead .sorting:after,
  table.table-sort thead .sorting_asc:after,
  table.table-sort thead .sorting_desc:after,
  table.table-sort thead .sorting_asc_disabled:after,
  table.table-sort thead .sorting_desc_disabled:after {
    right: .25rem;
    font-size: 0.875rem;
  }  

  table.table-sort thead>tr>th.sorting_asc,
  table.table-sort thead>tr>th.sorting_desc,
  table.table-sort thead>tr>th.sorting,
  table.table-sort thead>tr>td.sorting_asc,
  table.table-sort thead>tr>td.sorting_desc,
  table.table-sort thead>tr>td.sorting {
    padding-right: 20px
  }  

}

/* END MOBILE STYLE */