@font-face {
  font-display: block;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("/webfonts/open-sans-v35-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: block;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 500;
  src: url("/webfonts/open-sans-v35-latin-500.woff2") format("woff2");
}
@font-face {
  font-display: block;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  src: url("/webfonts/open-sans-v35-latin-600.woff2") format("woff2");
}
@font-face {
  font-display: block;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: url("/webfonts/open-sans-v35-latin-700.woff2") format("woff2");
}
textarea,
input[type=text],
input[type=button],
input[type=submit] {
  -webkit-appearance: none;
  border-radius: 0;
  color: var(--color-black);
}

.editor-canvas [data-overlay],
.show--editor--tags [data-overlay] {
  position: relative;
  overflow: hidden;
}

.editor-canvas [data-overlay]:after,
.show--editor--tags [data-overlay]:after {
  position: absolute;
  content: attr(data-overlay);
  font-weight: bold;
  text-align: center;
  font-size: 10px;
  line-height: 20px;
  background-color: white;
  border-bottom: 3px solid var(--primary-color);
  padding: 0 8px;
  left: 15px;
  top: 15px;
}

/*.quotation-background-image {
	background: url("img/solarcloud.jpg");
	width: 100%;
	height: 100%;
}*/
:root {
  --header-height: 128px;
  --header-height-editor: 64px;
  --progress-bar-height: 8px;
  --footer-height: 156px;
  --button-bar-height: 84px;
  --editor-height: calc(100vh - calc(var(--header-height-editor) + var(--button-bar-height) + var(--progress-bar-height)));
  --editor-panel-top-height: 64px;
  --editor-panel-right-width: var(--menu-visible-width-open);
  --menu-width: var(--menu-visible-width);
  --menu-visible-width: 80px;
  --menu-visible-width-open: 292px;
  --header-offset: var(--menu-visible-width-open);
  --transition-time: 250ms;
  --color-white: #FFFFFF;
  --color-white5: rgba(255,255,255,0.05);
  --color-white80: rgba(255,255,255,0.8);
  --color-orange: #F99F34;
  --color-orange25: #F99F343F;
  --color-light-blue: #f2f4f8;
  --color-blue: rgba(37,65,142,1);
  --color-blue0: rgba(37,65,142,0);
  --color-blue3: rgba(37,65,142,0.03);
  --color-blue5: rgba(37,65,142,0.05);
  --color-blue10: rgba(37,65,142,0.1);
  --color-blue20: rgba(37,65,142,0.2);
  --color-blue15: rgba(37,65,142,0.15);
  --color-blue40: rgba(37,65,142,0.4);
  --color-blue80: rgba(37,65,142,0.8);
  --color-medium-blue: rgba(100, 149, 237, 1);
  --color-medium-blue3: rgba(100, 149, 237, 0.03);
  --color-medium-blue5: rgba(100, 149, 237, 0.05);
  --color-medium-blue10: rgba(100, 149, 237, 0.1);
  --color-medium-blue20: rgba(100, 149, 237, 0.2);
  --color-medium-blue15: rgba(100, 149, 237, 0.15);
  --color-medium-blue40: rgba(100, 149, 237, 0.4);
  --color-medium-blue80: rgba(100, 149, 237, 0.8);
  --color-black: #000000;
  --color-black5: rgba(0,0,0,0.05);
  --color-black10: rgba(0,0,0,0.1);
  --color-black20: rgba(0,0,0,0.2);
  --color-black30: rgba(0,0,0,0.5);
  --color-black40: rgba(0,0,0,0.4);
  --color-black50: rgba(0,0,0,0.5);
  --color-black60: rgba(0,0,0,0.6);
  --color-black80: rgba(0,0,0,0.8);
  --color-green: #37790C;
  --color-green3: rgba(55,121,12,0.03);
  --color-green5: rgba(55,121,12,0.05);
  --color-green1: rgba(142,207,4,1);
  --color-green10: rgba(142,207,4,0.1);
  --color-green15: rgba(55,121,12,0.15);
  --color-green20: rgba(55,121,12,0.20);
  --color-green40: rgba(142,207,4,0.4);
  --color-green50: rgba(142,207,4,0.5);
  --color-green60: rgba(142,207,4,0.6);
  --color-green70: rgba(142,207,4,0.7);
  --color-red: rgba(206,13,13,1);
  --color-red0: rgba(206,13,13,0);
  --color-red3: rgba(206,13,13,0.03);
  --color-red5: rgba(206,13,13,0.05);
  --color-red10: rgba(206,13,13,0.1);
  --color-red15: rgba(206,13,13,0.15);
  --color-red20: rgba(206,13,13,0.20);
  --color-red40: rgba(206,13,13,0.4);
  --color-red50: rgba(206,13,13,0.5);
  --color-red60: rgba(206,13,13,0.6);
  --color-red70: rgba(206,13,13,0.7);
  --color-pink: #CE0076;
  --color-pink3: rgba(206,0,118,0.03);
  --color-pink5: rgba(206,0,118,0.05);
  --color-pink15: rgba(206,0,118,0.15);
  --color-pink20: rgba(206,0,118,0.2);
  --color-pink40: rgba(206,0,118,0.4);
  --color-brown: #AC3800;
  --color-brown3: rgba(172,56,0,0.03);
  --color-brown5: rgba(172,56,0,0.05);
  --color-brown15: rgba(172,56,0,0.15);
  --color-brown20: rgba(172,56,0,0.20);
  --color-brown40: rgba(172,56,0,0.40);
  --color-turquoise: #007B93;
  --color-turquoise3: rgba(0,123,147,0.03);
  --color-turquoise5: rgba(0,123,147,0.05);
  --color-turquoise15: rgba(0,123,147,0.15);
  --color-turquoise20: rgba(0,123,147,0.20);
  --color-turquoise40: rgba(0,123,147,0.40);
  --color-purple: #86009B;
  --color-purple3: rgba(134,0,155,0.03);
  --color-purple5: rgba(134,0,155,0.05);
  --color-purple15: rgba(134,0,155,0.15);
  --color-purple20: rgba(134,0,155,0.20);
  --color-purple40: rgba(134,0,155,0.40);
  --color-semi-grey-dev1: rgba(125,125,125,0.3);
  --color-lighter-grey: #EFEFEF;
  --color-light-grey: #949494;
  --color-dark-grey: #494949;
  --color-darker-grey: #656565;
  --color-darkest-grey: #383838;
  --button-primary: var(--color-blue);
  --button-primary-border: var(--color-blue);
  --button-primary-hover: var(--color-orange);
  --button-primary-border-hover: var(--color-orange);
  --button-primary-text: var(--color-white);
  --button-primary-text-hover: var(--color-black);
  --button-secondary: var(--color-white);
  --button-secondary-border: var(--color-blue10);
  --button-secondary-hover: var(--color-white);
  --button-secondary-border-hover: var(--color-orange);
  --button-secondary-text: var(--color-black);
  --button-secondary-text-hover: var(--color-black);
  --button-tertiary: #6AAB14;
  --button-tertiary-border: #6AAB14;
  --button-tertiary-hover: #487E00;
  --button-tertiary-border-hover: #487E00;
  --button-tertiary-text: var(--color-white);
  --button-tertiary-text-hover: var(--color-white);
  --notification-succes-background: #F0F6E8;
  --notification-succes-border: #65A724;
  --notification-danger-background: #F8E6E6;
  --notification-danger-border: #CE0D0D;
  --notification-warning-background: #FEF5EA;
  --notification-warning-border: #F99F34;
  --notification-info-background: #E6F1FA;
  --notification-info-border: #0776CA;
  --ck-border-radius: 4px !important;
  --ck-inner-shadow: 2px 2px 3px var(--color-blue40) inset !important;
  --ck-focus-ring: 1px solid var(--color-blue) !important;
  --ck-color-button-default-hover-background: transparent !important;
  --ease-in-out-extreme: cubic-bezier(0.8, 0, 0.2, 1);
}

.hide-topbar {
  --header-height: 64px;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

[ng-click] {
  cursor: pointer;
}

html {
  height: 100%;
}

body {
  /* Start:theming */
  /* End:theming */
}
body:not(.empty) {
  height: 100%;
  line-height: 32px;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 400;
  padding: var(--progress-bar-height) 0 0 0;
}
body:not(.empty)::before {
  top: 0;
  right: 0;
  left: 0;
  height: var(--progress-bar-height);
  background-color: var(--color-white);
  content: "";
  position: fixed;
  z-index: 9999;
}
body:not(.is-customer) {
  background-color: var(--color-blue5);
}
body.is-customer {
  background-color: var(--color-orange25);
}
body.empty, body.no-menu {
  --menu-width: 0;
  line-height: 32px;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 400;
  /*
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: visible;
  */
}
body.menu-visible {
  --menu-width: var(--menu-visible-width);
  --header-offset: var(--menu-visible-width);
}
body.menu-visible #progress_bar {
  transition: all linear var(--transition-time);
}
body.menu-visible.is-over #progress_bar {
  min-width: var(--menu-visible-width-open);
}
body.menu-visible .menu-wrapper .logo .logo-wrapper {
  margin: 0 10px;
}
body.menu-visible .menu-wrapper .logo .logo-wrapper .text {
  left: 60px;
}
body.menu-visible .menu-wrapper .wrapper-placeholder nav ul li a span {
  opacity: 0;
}
body.menu-visible .menu-wrapper.is-hover .logo .logo-wrapper {
  margin: 0 47px;
}
body.menu-visible .menu-wrapper.is-hover .logo .logo-wrapper .text {
  right: 0;
}
body.menu-visible .menu-wrapper.is-hover .wrapper-placeholder nav ul li a span {
  opacity: 1;
}
body.menu-visible .menu-wrapper.is-hover #progress_bar {
  min-width: var(--menu-width);
}
body.menu-visible-open {
  --menu-width: var(--menu-visible-width-open);
}
body.menu-visible-open .menu-wrapper .logo .logo-wrapper {
  margin: 0 47px;
}
body.menu-visible-open .menu-wrapper .logo .logo-wrapper .text {
  left: 60px;
}
body.menu-visible .menu-wrapper:not(.is-hover) .wrapper-placeholder nav > ul > li.is-parent .child_toggler {
  opacity: 0;
}
body.menu-visible .menu-wrapper:not(.is-hover) .wrapper-placeholder nav > ul > li.is-parent ul {
  max-height: 0;
}
body.editor header {
  height: var(--header-height-editor);
}
body.editor header .header {
  height: var(--header-height-editor);
}
body.editor .body-wrapper .page-wrapper .wrapper-top .content-wrapper {
  top: var(--header-height-editor);
  height: calc(100svh - (var(--header-height-editor) - var(--progress-bar-height)));
  min-height: calc(100svh - var(--header-height-editor));
}
body.quotations.is-advice-quotation {
  background: var(--color-green15);
}
body.quotations header .header .header-bar.title {
  background-color: var(--color-blue);
  color: var(--color-white);
}
body.quotations header .header .header-bar .primary li {
  text-align: center;
  /*width: 100px;*/
}
body.quotations table tr.solar-hardware {
  font-weight: bold;
}
body.quotations table tr.highlighted {
  font-weight: bold;
}
body.quotations .responsive-table table thead tr th {
  background-color: var(--color-blue5);
  border-bottom: 1px solid var(--color-blue15);
  color: var(--color-blue);
}
body.quotations .responsive-table table tbody tr:hover {
  background-color: var(--color-blue20) !important;
}
body.quotations .responsive-table table tbody tr:hover td button.secondary {
  border-color: var(--color-blue40);
}
body.quotations button.secondary.icon:hover::after,
body.quotations button.secondary:hover::after {
  color: var(--color-black);
}
body.quotations button:disabled {
  opacity: 0.6;
}
body.quotations button:disabled:hover.icon::after,
body.quotations button:disabled:hover::after {
  color: var(--color-white);
}
body.energytool header .header .header-bar.title {
  background-color: var(--color-turquoise);
  color: var(--color-white);
}
body.templates header .header .header-bar.title {
  background-color: var(--color-pink);
  color: var(--color-white);
}
body.templates .responsive-table table thead tr th {
  background-color: var(--color-pink5);
  border-bottom: 1px solid var(--color-pink15);
  color: var(--color-pink);
}
body.templates .responsive-table table tbody tr:hover {
  background-color: var(--color-pink20);
}
body.templates .responsive-table table tbody tr:hover td button.secondary {
  border-color: var(--color-pink40);
}
body.templates button:hover.secondary {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
  color: var(--color-white);
}
body.templates button:hover.secondary.icon::after,
body.templates button:hover.secondary::after {
  color: var(--color-white);
}
body.consulting_module header .header .header-bar.title {
  background-color: var(--color-green);
  color: var(--color-white);
}
body.consulting_module .responsive-table table thead tr th {
  background-color: var(--color-green5);
  border-bottom: 1px solid var(--color-green15);
  color: var(--color-green);
}
body.consulting_module .responsive-table table tbody tr:hover {
  background-color: var(--color-green20);
}
body.consulting_module .responsive-table table tbody tr:hover td button.secondary {
  border-color: var(--color-green40);
}
body.consulting_module button:hover.secondary {
  background-color: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-white);
}
body.consulting_module button:hover.secondary.icon::after,
body.consulting_module button:hover.secondary::after {
  color: var(--color-white);
}
body.price_list header .header .header-bar.title {
  background-color: var(--color-brown);
  color: var(--color-white);
}
body.price_list .responsive-table table thead tr th {
  background-color: var(--color-brown5);
  border-bottom: 1px solid var(--color-brown15);
  color: var(--color-brown);
}
body.price_list .responsive-table table tbody tr:hover {
  background-color: var(--color-brown20);
}
body.price_list .responsive-table table tbody tr:hover td button.secondary {
  border-color: var(--color-brown40);
}
body.price_list button:hover.secondary {
  background-color: var(--color-brown);
  border-color: var(--color-brown);
  color: var(--color-white);
}
body.price_list button:hover.secondary.icon::after,
body.price_list button:hover.secondary::after {
  color: var(--color-white);
}
body.packages header .header .header-bar.title {
  background-color: var(--color-medium-blue);
  color: var(--color-white);
}
body.packages .responsive-table table thead tr th {
  background-color: var(--color-medium-blue5);
  border-bottom: 1px solid var(--color-medium-blue15);
  color: var(--color-medium-blue);
}
body.packages .responsive-table table tbody tr:hover {
  background-color: var(--color-medium-blue20);
}
body.packages .responsive-table table tbody tr:hover td button.secondary {
  border-color: var(--color-medium-blue40);
}
body.packages button:hover.secondary {
  background-color: var(--color-medium-blue);
  border-color: var(--color-medium-blue);
  color: var(--color-white);
}
body.packages button:hover.secondary.icon::after,
body.packages button:hover.secondary::after {
  color: var(--color-white);
}
body.subscriptions header .header .header-bar.title {
  background-color: var(--color-turquoise);
  color: var(--color-white);
}
body.subscriptions .responsive-table table thead tr th {
  background-color: var(--color-turquoise5);
  border-bottom: 1px solid var(--color-turquoise15);
  color: var(--color-turquoise);
}
body.subscriptions .responsive-table table tbody tr:hover {
  background-color: var(--color-turquoise20);
}
body.subscriptions .responsive-table table tbody tr:hover td button.secondary {
  border-color: var(--color-turquoise40);
}
body.subscriptions button:hover.secondary {
  background-color: var(--color-turquoise);
  border-color: var(--color-turquoise);
  color: var(--color-white);
}
body.subscriptions button:hover.secondary.icon::after,
body.subscriptions button:hover.secondary::after {
  color: var(--color-white);
}
body.gallery header .header .header-bar.title {
  background-color: var(--color-orange);
  color: var(--color-white);
}
body.gallery .responsive-table table thead tr th {
  background-color: var(--color-blue5);
  border-bottom: 1px solid var(--color-blue15);
  color: var(--color-blue);
}
body.gallery .responsive-table table tbody tr:hover {
  background-color: var(--color-blue20);
}
body.help header .header .header-bar.title {
  background-color: var(--color-purple);
  color: var(--color-white);
}
body.help .responsive-table table thead tr th {
  background-color: var(--color-purple5);
  border-bottom: 1px solid var(--color-purple15);
  color: var(--color-purple);
}
body.help .responsive-table table tbody tr:hover {
  background-color: var(--color-purple20);
}
body.help button:hover.secondary {
  background-color: var(--color-purple);
  border-color: var(--color-purple);
  color: var(--color-white);
}
body.help button:hover.secondary.icon::after,
body.help button:hover.secondary::after {
  color: var(--color-white);
}
body.admin header .header .header-bar.title {
  background-color: var(--color-red);
  color: var(--color-white);
}
body.admin .responsive-table table thead tr th {
  background-color: var(--color-red5);
  border-bottom: 1px solid var(--color-red15);
  color: var(--color-red);
}
body.admin .responsive-table table tbody tr:hover {
  background-color: var(--color-red20);
}
body.admin button:hover.secondary {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}
body.admin button:hover.secondary.icon::after,
body.admin button:hover.secondary::after {
  color: var(--color-white);
}
body.settings header .header .header-bar.title {
  background-color: var(--color-dark-grey);
  color: var(--color-white);
}
body h1, body .heading-1 {
  margin: 0;
  padding: 22px 0 0 0;
  line-height: 32px;
  font-size: 26px;
  font-weight: 700;
}
body h2, body .heading-2 {
  margin: 0;
  padding: 22px 0 0 0;
  line-height: 22px;
  font-size: 22px;
  font-weight: 700;
}
body h3, body .heading-3 {
  margin: 0;
  padding: 22px 0 0 0;
  line-height: 22px;
  font-size: 18px;
  font-weight: 700;
}
body h4, body .heading-4 {
  margin: 0;
  padding: 22px 0 0 0;
  line-height: 22px;
  font-size: 16px;
  font-weight: 700;
}
body p {
  margin: 0;
  padding: 22px 0 0 0;
}
body p.button {
  padding: 0;
}
body p.button a span.secondary {
  color: var(--color-black);
}
body p.link.icon a span::before, body p.link.icon a span::after, body p.link.icon a .blade-title::before, body p.link.icon a .blade-title::after {
  font-family: "Font Awesome 6 Pro";
  color: var(--color-blue);
}
body p.link.icon a span::before, body p.link.icon a .blade-title::before {
  margin-right: 16px;
}
body p.link.icon a span::after, body p.link.icon a .blade-title::after {
  margin-left: 16px;
}
body p.link.icon.logout a span::before {
  margin-right: 26px;
  font-weight: 900;
  content: "\f023";
}
body p.link.icon.edit a span::before {
  margin-right: 26px;
  font-weight: 900;
  content: "\f304";
}
body .email-list span span.remove {
  margin-left: 10px;
}
body .email-list span span.remove:after {
  content: "\f00d";
  font-family: "Font Awesome 6 Pro";
  opacity: 0.4;
}
body .email-list span span.remove:hover:after {
  opacity: 1;
}
body .help-blade {
  border-bottom: dotted #bbbbbb 2px;
}
body .help-blade * {
  cursor: help;
}

.icon::before, input[type=submit]::before,
input[type=button]::before,
input[type=reset]::before,
button::before,
blade-title::before,
.button a span::before, .icon::after, input[type=submit]::after,
input[type=button]::after,
input[type=reset]::after,
button::after,
blade-title::after,
.button a span::after {
  width: 14px;
  font-family: "Font Awesome 6 Pro";
  text-align: center;
  color: var(--color-blue);
  display: inline-block;
  transition: all linear var(--transition-time);
}
.icon::before, input[type=submit]::before,
input[type=button]::before,
input[type=reset]::before,
button::before,
blade-title::before,
.button a span::before {
  margin-right: 16px;
}
.icon::after, input[type=submit]::after,
input[type=button]::after,
input[type=reset]::after,
button::after,
blade-title::after,
.button a span::after {
  margin-left: 5px;
}
.icon.next::after, input.next[type=submit]::after,
input.next[type=button]::after,
input.next[type=reset]::after,
button.next::after,
blade-title.next::after,
.button a span.next::after {
  content: "\f054";
}
.icon.previous::before, input.previous[type=submit]::before,
input.previous[type=button]::before,
input.previous[type=reset]::before,
button.previous::before,
blade-title.previous::before,
.button a span.previous::before {
  content: "\f053";
}
.icon.update::after, input.update[type=submit]::after,
input.update[type=button]::after,
input.update[type=reset]::after,
button.update::after,
blade-title.update::after,
.button a span.update::after {
  content: "\f021";
}
.icon.download::after, input.download[type=submit]::after,
input.download[type=button]::after,
input.download[type=reset]::after,
button.download::after,
blade-title.download::after,
.button a span.download::after {
  content: "\f33d";
}
.icon.delete::after, input.delete[type=submit]::after,
input.delete[type=button]::after,
input.delete[type=reset]::after,
button.delete::after,
blade-title.delete::after,
.button a span.delete::after {
  font-weight: 900;
  content: "\f1f8";
}
.icon.pause::after, input.pause[type=submit]::after,
input.pause[type=button]::after,
input.pause[type=reset]::after,
button.pause::after,
blade-title.pause::after,
.button a span.pause::after {
  font-weight: 900;
  content: "\f28b";
}
.icon.duplicate::after, input.duplicate[type=submit]::after,
input.duplicate[type=button]::after,
input.duplicate[type=reset]::after,
button.duplicate::after,
blade-title.duplicate::after,
.button a span.duplicate::after {
  font-weight: 900;
  content: "\f0c5";
}
.icon.options::after, input.options[type=submit]::after,
input.options[type=button]::after,
input.options[type=reset]::after,
button.options::after,
blade-title.options::after,
.button a span.options::after {
  font-weight: 900;
  content: "\f142";
  margin: 0 !important;
}
.icon.import::after, input.import[type=submit]::after,
input.import[type=button]::after,
input.import[type=reset]::after,
button.import::after,
blade-title.import::after,
.button a span.import::after {
  font-weight: 900;
  content: "\f56f";
}
.icon.csv::after, input.csv[type=submit]::after,
input.csv[type=button]::after,
input.csv[type=reset]::after,
button.csv::after,
blade-title.csv::after,
.button a span.csv::after {
  font-weight: 900;
  content: "\f6dd";
}
.icon.spinner::after, input.spinner[type=submit]::after,
input.spinner[type=button]::after,
input.spinner[type=reset]::after,
button.spinner::after,
blade-title.spinner::after,
.button a span.spinner::after {
  font-weight: 900;
  content: "\f110";
}
.icon.inverter::after, input.inverter[type=submit]::after,
input.inverter[type=button]::after,
input.inverter[type=reset]::after,
button.inverter::after,
blade-title.inverter::after,
.button a span.inverter::after {
  font-weight: 900;
  content: "\e2a4";
  margin: 0 !important;
}
.icon.edit::after, input.edit[type=submit]::after,
input.edit[type=button]::after,
input.edit[type=reset]::after,
button.edit::after,
blade-title.edit::after,
.button a span.edit::after {
  font-weight: 900;
  content: "\f044";
}
.icon.add::after, input.add[type=submit]::after,
input.add[type=button]::after,
input.add[type=reset]::after,
button.add::after,
blade-title.add::after,
.button a span.add::after, .icon.plus::after, input.plus[type=submit]::after,
input.plus[type=button]::after,
input.plus[type=reset]::after,
button.plus::after,
blade-title.plus::after,
.button a span.plus::after {
  font-weight: 900;
  content: "\f067";
}
.icon.list::after, input.list[type=submit]::after,
input.list[type=button]::after,
input.list[type=reset]::after,
button.list::after,
blade-title.list::after,
.button a span.list::after {
  font-weight: 900;
  content: "\f03a";
}
.icon.brand::after, input.brand[type=submit]::after,
input.brand[type=button]::after,
input.brand[type=reset]::after,
button.brand::after,
blade-title.brand::after,
.button a span.brand::after {
  font-weight: 900;
  content: "\f288";
}
.icon.calculate::after, input.calculate[type=submit]::after,
input.calculate[type=button]::after,
input.calculate[type=reset]::after,
button.calculate::after,
blade-title.calculate::after,
.button a span.calculate::after {
  font-weight: 900;
  content: "\f1ec";
}
.icon.battey::after, input.battey[type=submit]::after,
input.battey[type=button]::after,
input.battey[type=reset]::after,
button.battey::after,
blade-title.battey::after,
.button a span.battey::after {
  font-weight: 900;
  content: "\f376";
}
.icon.energy-tool::after, input.energy-tool[type=submit]::after,
input.energy-tool[type=button]::after,
input.energy-tool[type=reset]::after,
button.energy-tool::after,
blade-title.energy-tool::after,
.button a span.energy-tool::after {
  font-weight: 900;
  content: "\f670";
}
.icon.save::after, input.save[type=submit]::after,
input.save[type=button]::after,
input.save[type=reset]::after,
button.save::after,
blade-title.save::after,
.button a span.save::after {
  font-weight: 900;
  content: "\f0c7";
}
.icon.product::after, input.product[type=submit]::after,
input.product[type=button]::after,
input.product[type=reset]::after,
button.product::after,
blade-title.product::after,
.button a span.product::after {
  font-weight: 900;
  content: "\f5ba";
}
.icon.package::after, input.package[type=submit]::after,
input.package[type=button]::after,
input.package[type=reset]::after,
button.package::after,
blade-title.package::after,
.button a span.package::after {
  font-weight: 900;
  content: "\f466";
}
.icon.percentage::after, input.percentage[type=submit]::after,
input.percentage[type=button]::after,
input.percentage[type=reset]::after,
button.percentage::after,
blade-title.percentage::after,
.button a span.percentage::after {
  font-weight: 900;
  content: "%";
}
.icon.date::after, input.date[type=submit]::after,
input.date[type=button]::after,
input.date[type=reset]::after,
button.date::after,
blade-title.date::after,
.button a span.date::after {
  font-weight: 900;
  content: "\f073";
}
.icon.login::after, input.login[type=submit]::after,
input.login[type=button]::after,
input.login[type=reset]::after,
button.login::after,
blade-title.login::after,
.button a span.login::after {
  font-weight: 900;
  content: "\f2f6";
}
.icon.register::after, input.register[type=submit]::after,
input.register[type=button]::after,
input.register[type=reset]::after,
button.register::after,
blade-title.register::after,
.button a span.register::after {
  font-weight: 900;
  content: "\f234";
}
.icon.send::after, input.send[type=submit]::after,
input.send[type=button]::after,
input.send[type=reset]::after,
button.send::after,
blade-title.send::after,
.button a span.send::after {
  font-weight: 900;
  content: "\f1d8";
}
.icon.print::after, input.print[type=submit]::after,
input.print[type=button]::after,
input.print[type=reset]::after,
button.print::after,
blade-title.print::after,
.button a span.print::after {
  font-weight: 900;
  content: "\f02f";
}
.icon.view::after, input.view[type=submit]::after,
input.view[type=button]::after,
input.view[type=reset]::after,
button.view::after,
blade-title.view::after,
.button a span.view::after {
  font-weight: 900;
  content: "\f06e";
  margin: 0 !important;
}
.icon.file::after, input.file[type=submit]::after,
input.file[type=button]::after,
input.file[type=reset]::after,
button.file::after,
blade-title.file::after,
.button a span.file::after {
  font-weight: 900;
  content: "\f15b";
}
.icon.info::after, input.info[type=submit]::after,
input.info[type=button]::after,
input.info[type=reset]::after,
button.info::after,
blade-title.info::after,
.button a span.info::after {
  font-weight: 900;
  content: "\f05a";
}
.icon.prices::after, input.prices[type=submit]::after,
input.prices[type=button]::after,
input.prices[type=reset]::after,
button.prices::after,
blade-title.prices::after,
.button a span.prices::after {
  font-weight: 900;
  content: "\e489";
}
.icon.test::after, input.test[type=submit]::after,
input.test[type=button]::after,
input.test[type=reset]::after,
button.test::after,
blade-title.test::after,
.button a span.test::after {
  font-weight: 900;
  content: "\e4f3";
}
.icon.check::after, input.check[type=submit]::after,
input.check[type=button]::after,
input.check[type=reset]::after,
button.check::after,
blade-title.check::after,
.button a span.check::after {
  font-weight: 900;
  content: "\f00c";
}

button:disabled {
  opacity: 0.6;
}
.input-button, input[type=submit],
input[type=button],
input[type=reset],
button,
.button a span {
  width: unset;
  margin: 0;
  padding: 0 16px;
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  font-weight: 500;
  display: inline-block;
  transition: all linear var(--transition-time);
}

input[type=submit].primary,
input[type=button].primary,
input[type=reset].primary,
button.primary,
.blade-title.primary,
.button a span.primary {
  background-color: var(--button-primary);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
}
input[type=submit].primary::after, input[type=submit].primary::before,
input[type=button].primary::after,
input[type=button].primary::before,
input[type=reset].primary::after,
input[type=reset].primary::before,
button.primary::after,
button.primary::before,
.blade-title.primary::after,
.blade-title.primary::before,
.button a span.primary::after,
.button a span.primary::before {
  color: var(--button-primary-text);
}
input[type=submit].primary.hover, input[type=submit].primary:hover,
input[type=button].primary.hover,
input[type=button].primary:hover,
input[type=reset].primary.hover,
input[type=reset].primary:hover,
button.primary.hover,
button.primary:hover,
.blade-title.primary.hover,
.blade-title.primary:hover,
.button a span.primary.hover,
.button a span.primary:hover {
  background-color: var(--button-primary-hover);
  border-color: var(--button-primary-border-hover);
  color: var(--button-primary-text-hover);
}
input[type=submit].primary.hover::after, input[type=submit].primary.hover::before, input[type=submit].primary:hover::after, input[type=submit].primary:hover::before,
input[type=button].primary.hover::after,
input[type=button].primary.hover::before,
input[type=button].primary:hover::after,
input[type=button].primary:hover::before,
input[type=reset].primary.hover::after,
input[type=reset].primary.hover::before,
input[type=reset].primary:hover::after,
input[type=reset].primary:hover::before,
button.primary.hover::after,
button.primary.hover::before,
button.primary:hover::after,
button.primary:hover::before,
.blade-title.primary.hover::after,
.blade-title.primary.hover::before,
.blade-title.primary:hover::after,
.blade-title.primary:hover::before,
.button a span.primary.hover::after,
.button a span.primary.hover::before,
.button a span.primary:hover::after,
.button a span.primary:hover::before {
  color: var(--button-primary-text-hover);
}
input[type=submit].primary.normal, input[type=submit].primary.normal:hover,
input[type=button].primary.normal,
input[type=button].primary.normal:hover,
input[type=reset].primary.normal,
input[type=reset].primary.normal:hover,
button.primary.normal,
button.primary.normal:hover,
.blade-title.primary.normal,
.blade-title.primary.normal:hover,
.button a span.primary.normal,
.button a span.primary.normal:hover {
  background-color: var(--button-primary);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
}
input[type=submit].primary:disabled, input[type=submit].primary:disabled:hover,
input[type=button].primary:disabled,
input[type=button].primary:disabled:hover,
input[type=reset].primary:disabled,
input[type=reset].primary:disabled:hover,
button.primary:disabled,
button.primary:disabled:hover,
.blade-title.primary:disabled,
.blade-title.primary:disabled:hover,
.button a span.primary:disabled,
.button a span.primary:disabled:hover {
  background-color: var(--button-primary);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
}
input[type=submit].secondary,
input[type=button].secondary,
input[type=reset].secondary,
button.secondary,
.blade-title.secondary,
.button a span.secondary {
  background-color: var(--button-secondary);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
}
input[type=submit].secondary.hover, input[type=submit].secondary:hover,
input[type=button].secondary.hover,
input[type=button].secondary:hover,
input[type=reset].secondary.hover,
input[type=reset].secondary:hover,
button.secondary.hover,
button.secondary:hover,
.blade-title.secondary.hover,
.blade-title.secondary:hover,
.button a span.secondary.hover,
.button a span.secondary:hover {
  background-color: var(--button-secondary-hover);
  border-color: var(--button-secondary-border-hover);
  color: var(--button-secondary-text-hover);
}
input[type=submit].secondary.normal, input[type=submit].secondary.normal:hover,
input[type=button].secondary.normal,
input[type=button].secondary.normal:hover,
input[type=reset].secondary.normal,
input[type=reset].secondary.normal:hover,
button.secondary.normal,
button.secondary.normal:hover,
.blade-title.secondary.normal,
.blade-title.secondary.normal:hover,
.button a span.secondary.normal,
.button a span.secondary.normal:hover {
  background-color: var(--button-secondary);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
}
input[type=submit].secondary:disabled, input[type=submit].secondary:disabled:hover,
input[type=button].secondary:disabled,
input[type=button].secondary:disabled:hover,
input[type=reset].secondary:disabled,
input[type=reset].secondary:disabled:hover,
button.secondary:disabled,
button.secondary:disabled:hover,
.blade-title.secondary:disabled,
.blade-title.secondary:disabled:hover,
.button a span.secondary:disabled,
.button a span.secondary:disabled:hover {
  background-color: var(--button-secondary);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
}
input[type=submit].tertiary,
input[type=button].tertiary,
input[type=reset].tertiary,
button.tertiary,
.blade-title.tertiary,
.button a span.tertiary {
  background-color: var(--button-tertiary);
  border-color: var(--button-tertiary-border);
  color: var(--button-tertiary-text);
}
input[type=submit].tertiary::after, input[type=submit].tertiary::before,
input[type=button].tertiary::after,
input[type=button].tertiary::before,
input[type=reset].tertiary::after,
input[type=reset].tertiary::before,
button.tertiary::after,
button.tertiary::before,
.blade-title.tertiary::after,
.blade-title.tertiary::before,
.button a span.tertiary::after,
.button a span.tertiary::before {
  color: var(--button-tertiary-text);
}
input[type=submit].tertiary.hover, input[type=submit].tertiary:hover,
input[type=button].tertiary.hover,
input[type=button].tertiary:hover,
input[type=reset].tertiary.hover,
input[type=reset].tertiary:hover,
button.tertiary.hover,
button.tertiary:hover,
.blade-title.tertiary.hover,
.blade-title.tertiary:hover,
.button a span.tertiary.hover,
.button a span.tertiary:hover {
  background-color: var(--button-tertiary-hover);
  border-color: var(--button-tertiary-border-hover);
  color: var(--button-tertiary-text-hover);
}
input[type=submit].tertiary.hover::after, input[type=submit].tertiary.hover::before, input[type=submit].tertiary:hover::after, input[type=submit].tertiary:hover::before,
input[type=button].tertiary.hover::after,
input[type=button].tertiary.hover::before,
input[type=button].tertiary:hover::after,
input[type=button].tertiary:hover::before,
input[type=reset].tertiary.hover::after,
input[type=reset].tertiary.hover::before,
input[type=reset].tertiary:hover::after,
input[type=reset].tertiary:hover::before,
button.tertiary.hover::after,
button.tertiary.hover::before,
button.tertiary:hover::after,
button.tertiary:hover::before,
.blade-title.tertiary.hover::after,
.blade-title.tertiary.hover::before,
.blade-title.tertiary:hover::after,
.blade-title.tertiary:hover::before,
.button a span.tertiary.hover::after,
.button a span.tertiary.hover::before,
.button a span.tertiary:hover::after,
.button a span.tertiary:hover::before {
  color: var(--button-tertiary-text-hover);
}
input[type=submit].tertiary.normal, input[type=submit].tertiary.normal:hover,
input[type=button].tertiary.normal,
input[type=button].tertiary.normal:hover,
input[type=reset].tertiary.normal,
input[type=reset].tertiary.normal:hover,
button.tertiary.normal,
button.tertiary.normal:hover,
.blade-title.tertiary.normal,
.blade-title.tertiary.normal:hover,
.button a span.tertiary.normal,
.button a span.tertiary.normal:hover {
  background-color: var(--button-tertiary);
  border-color: var(--button-tertiary-border);
  color: var(--button-tertiary-text);
}
input[type=submit].tertiary:disabled, input[type=submit].tertiary:disabled:hover,
input[type=button].tertiary:disabled,
input[type=button].tertiary:disabled:hover,
input[type=reset].tertiary:disabled,
input[type=reset].tertiary:disabled:hover,
button.tertiary:disabled,
button.tertiary:disabled:hover,
.blade-title.tertiary:disabled,
.blade-title.tertiary:disabled:hover,
.button a span.tertiary:disabled,
.button a span.tertiary:disabled:hover {
  background-color: var(--button-tertiary);
  border-color: var(--button-tertiary-border);
  color: var(--button-tertiary-text);
}
input[type=submit]:disabled, input[type=submit]:disabled:hover,
input[type=button]:disabled,
input[type=button]:disabled:hover,
input[type=reset]:disabled,
input[type=reset]:disabled:hover,
button:disabled,
button:disabled:hover,
.blade-title:disabled,
.blade-title:disabled:hover,
.button a span:disabled,
.button a span:disabled:hover {
  /*
  background-color: var(--color-blue5);
  border: 1px solid var(--color-blue10);
  */
  cursor: not-allowed;
  /*color: var(--color-light-grey);*/
  /*opacity: 0.5;*/
}

.heading-and-button {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/*.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;

	&:hover {
		.tooltiptext {
			visibility: visible;
		}
	}

	.tooltiptext {
		visibility: hidden;
		max-width: 300px; // Set maximum width for the tooltip
		background-color: var(--color-orange);
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 6px 12px;*/
/* Position the tooltip */
/*position: absolute;
		z-index: 1;
		bottom: calc(100% + 5px);
		left: 50%;
		transform: translateX(-50%); // Center the tooltip horizontally*/
/* Add arrow */
/*&::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: var(--color-orange) transparent transparent transparent;
		}
	}
}*/
input[type=text], input[type=date], input[type=email], input[type=image], input[type=month], input[type=number], input[type=password], input[type=range], input[type=search] {
  width: 100%;
  line-height: 32px;
  padding: 11px 19px;
  border: 1px solid var(--color-light-grey);
  border-radius: 4px;
  font-family: "Open Sans";
  font-weight: 600;
  font-size: 14px;
  outline: none;
  text-overflow: ellipsis;
}
input[type=text].ng-touched.ng-invalid, input[type=date].ng-touched.ng-invalid, input[type=email].ng-touched.ng-invalid, input[type=image].ng-touched.ng-invalid, input[type=month].ng-touched.ng-invalid, input[type=number].ng-touched.ng-invalid, input[type=password].ng-touched.ng-invalid, input[type=range].ng-touched.ng-invalid, input[type=search].ng-touched.ng-invalid {
  background-color: var(--color-red10);
  border-color: var(--color-red);
}
input[type=text].ng-touched.ng-invalid:focus, input[type=date].ng-touched.ng-invalid:focus, input[type=email].ng-touched.ng-invalid:focus, input[type=image].ng-touched.ng-invalid:focus, input[type=month].ng-touched.ng-invalid:focus, input[type=number].ng-touched.ng-invalid:focus, input[type=password].ng-touched.ng-invalid:focus, input[type=range].ng-touched.ng-invalid:focus, input[type=search].ng-touched.ng-invalid:focus {
  border-color: var(--color-red);
  box-shadow: inset 0px 0px 6px var(--color-red0), 0px 0px 6px var(--color-red40);
}
input:disabled {
  background-color: var(--color-blue5);
  border: 1px solid var(--color-light-blue);
  cursor: not-allowed;
}

select {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-light-grey);
  border-radius: 4px;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 600;
  height: 56px;
  line-height: 28px;
  outline: none;
  padding: 12px 54px 12px 20px;
  position: relative;
  resize: none;
  width: 100%;
  z-index: 1;
  cursor: pointer;
}
select:disabled {
  background-color: var(--color-blue5);
  cursor: not-allowed;
}

textarea {
  width: 100%;
  line-height: 32px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid var(--color-light-grey);
  border-radius: 4px;
  font-family: "Open Sans";
  font-weight: 600;
  font-size: 14px;
  display: block;
  outline: none;
}
textarea:not([data-chosen]) + label, textarea:not([data-chosen=""]) + label, textarea:focus + label {
  top: -9px;
  background-color: var(--color-white);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
}
textarea:disabled {
  background-color: var(--color-blue5);
  border: 0;
  cursor: not-allowed;
}

input[type=text]:focus, input[type=date]:focus, input[type=email]:focus, input[type=image]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=range]:focus, input[type=search]:focus {
  border-color: var(--color-blue);
  box-shadow: inset 0px 0px 6px var(--color-blue0), 0px 0px 6px var(--color-blue40);
}
input[type=text] + label, input[type=date] + label, input[type=email] + label, input[type=image] + label, input[type=month] + label, input[type=number] + label, input[type=password] + label, input[type=range] + label, input[type=search] + label {
  top: 19px;
  padding: 0 6px;
  left: 13px;
  line-height: 19px;
  font-family: "Open Sans";
  font-size: 14px;
  position: absolute;
  transition: all linear calc(var(--transition-time) / 2);
  pointer-events: none;
  text-overflow: ellipsis;
  z-index: 1;
}
input[type=text].fixed + label, input[type=text]:not(:placeholder-shown) + label, input[type=text]:focus + label, input[type=date].fixed + label, input[type=date]:not(:placeholder-shown) + label, input[type=date]:focus + label, input[type=email].fixed + label, input[type=email]:not(:placeholder-shown) + label, input[type=email]:focus + label, input[type=image].fixed + label, input[type=image]:not(:placeholder-shown) + label, input[type=image]:focus + label, input[type=month].fixed + label, input[type=month]:not(:placeholder-shown) + label, input[type=month]:focus + label, input[type=number].fixed + label, input[type=number]:not(:placeholder-shown) + label, input[type=number]:focus + label, input[type=password].fixed + label, input[type=password]:not(:placeholder-shown) + label, input[type=password]:focus + label, input[type=range].fixed + label, input[type=range]:not(:placeholder-shown) + label, input[type=range]:focus + label, input[type=search].fixed + label, input[type=search]:not(:placeholder-shown) + label, input[type=search]:focus + label {
  top: -9px;
  background-color: var(--color-white);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
}
input[type=file] + label {
  display: none;
  visibility: hidden;
}
input[type=file]::file-selector-button {
  border: 0;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: var(--color-blue5);
  transition: all linear calc(var(--transition-time) / 2);
  cursor: pointer;
}
input[type=file]::file-selector-button:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}
input[type=file]:disabled {
  background-color: transparent;
  border: 0;
}
input[type=file]:disabled::file-selector-button, input[type=file]:disabled::file-selector-button:hover {
  background-color: var(--button-secondary);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
  cursor: not-allowed;
}

label {
  cursor: pointer;
}

select:focus,
textarea:focus {
  border-color: var(--color-blue);
  box-shadow: inset 0px 0px 6px var(--color-blue0), 0px 0px 6px var(--color-blue40);
}
select + label,
textarea + label {
  top: 19px;
  padding: 0 6px;
  left: 13px;
  line-height: 19px;
  font-family: "Open Sans";
  font-size: 14px;
  position: absolute;
  transition: all linear calc(var(--transition-time) / 2);
  pointer-events: none;
  text-overflow: ellipsis;
  z-index: 1;
}

select:not([data-chosen]) + label, select:not([data-chosen=""]) + label, select:focus + label {
  top: -9px;
  background-color: var(--color-white);
  font-size: 12px;
}

.filter-bar {
  margin-left: auto;
  margin-right: 0px !important;
}

.filter-bar .dropdown-box, .filter-bar .filter-box {
  float: left;
}
.filter-bar .dropdown-box:not(:last-of-type), .filter-bar .filter-box:not(:last-of-type) {
  margin-right: 10px;
}
.filter-bar .dropdown-box .button, .filter-bar .filter-box .button {
  margin-right: 10px;
}
.filter-bar .dropdown-box > label {
  margin-right: 10px;
}

.filter-box {
  display: flex;
  flex-direction: row;
}
.filter-box input[type=search] {
  width: 100%;
  max-width: 200px;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--color-blue15);
  padding: 0 19px;
  margin: 0;
}
.filter-box input:focus {
  box-shadow: unset;
}
.filter-box select {
  width: 100%;
  max-width: 250px;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--color-blue15);
  padding: 0 19px;
  margin: 0;
  height: unset;
}
.filter-box button {
  border-color: var(--color-blue15);
  position: relative;
}
.filter-box button:hover {
  background-color: var(--color-blue5);
  color: var(--color-blue);
}
.filter-box .filter-box-dropdown-icon {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}
.filter-box .filter-box-dropdown-icon:before {
  content: "\f0d7";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.filter-box .filter-box-search-icon {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}
.filter-box .filter-box-search-icon:before {
  content: "\f002";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.filter-box + .buttons {
  margin-left: 18px;
}

.settings-filter {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
}

.settings .responsive-table table tbody tr td {
  padding: 3px 5px;
  white-space: nowrap;
  transition: var(--transition-time);
  font-size: 12px;
  line-height: 16px;
}

.dropdown-box {
  display: flex;
  flex-direction: row;
}
.dropdown-box select, .dropdown-box input {
  width: 100%;
  max-width: 250px;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--color-blue15);
  font-family: "Open Sans";
  font-weight: 600;
  font-size: 14px;
  line-height: 32px;
  padding: 0 19px;
  margin: 0;
  height: 32px;
}
.dropdown-box button {
  border-color: var(--color-blue15);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: relative;
  height: 32px;
  margin-top: 15px;
}
.dropdown-box button:hover {
  background-color: var(--color-blue5);
  color: var(--color-blue);
}
.dropdown-box .setting-dropdown-icon:before {
  content: "\f0d7";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dropdown-box .setting-search-icon:before {
  content: "\f002";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dropdown-box + .buttons {
  margin-left: 18px;
}

.date-filter > input {
  border-color: var(--color-blue15);
  height: 34px !important;
  padding: 0 19px;
}

.filter-reset {
  align-items: center;
  display: flex;
  height: 34px;
  justify-content: center;
}

.filter-box > label {
  margin-right: 10px;
}

fieldset {
  margin-top: 32px;
  padding: 22px 20px 20px 20px;
  background-color: var(--color-light-blue);
  border-radius: 4px;
  position: relative;
}
fieldset legend {
  top: -16px;
  left: 0;
  width: auto;
  line-height: 20px;
  padding: 12px 20px 0 20px;
  background-color: var(--color-light-blue);
  border-radius: 10px;
  font-size: 14px;
  position: absolute;
}
fieldset input:not(:placeholder-shown) + label, fieldset input:focus + label {
  background-color: var(--color-white);
}

.value-title {
  font-size: 16px;
  padding-top: 24px;
  align-items: center;
  display: flex;
}
.value-title span {
  font-size: 36px;
  font-weight: bold;
  margin-left: 12px;
}
.value-title span span.suffix {
  font-weight: normal;
  display: inline-block;
  font-size: 16px;
  opacity: 0.5;
  margin: 0;
}

.form .form-group {
  padding-top: 18px;
}
.form .form-group p.input-description {
  margin: 0;
  font-size: 10px;
  padding: 0;
  line-height: 18px;
  margin-left: 2px;
}
.form .form-group .input-wrapper {
  /*
  display: flex;
  flex-direction: column;
  */
  position: relative;
}
.form .form-group .input-wrapper.smartselect .smartselect-context {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  transform: translateY(100%);
  background: white;
  line-height: 32px;
  border: 1px solid var(--color-light-grey);
  border-radius: 4px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.15);
  z-index: 100000000000000000000;
}
.form .form-group .input-wrapper.smartselect .smartselect-context .smartselect-context-option-head {
  padding: 4px 19px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-light-grey);
  font-style: italic;
  font-weight: 600;
}
.form .form-group .input-wrapper.smartselect .smartselect-context .smartselect-context-option {
  padding: 4px 19px;
  cursor: pointer;
}
.form .form-group .input-wrapper.select {
  position: relative;
}
.form .form-group .input-wrapper.select::after {
  top: 22px;
  right: 21px;
  line-height: 19px;
  pointer-events: none;
  font-family: "Font Awesome 6 Pro";
  font-weight: 700;
  color: var(--color-blue);
  position: absolute;
  content: "\f078";
  z-index: 1;
}
.form .form-group .input-wrapper.radio {
  display: grid;
  grid-template-columns: 1em auto;
  gap: 16px;
  position: relative;
}
.form .form-group .input-wrapper.radio.boxed {
  padding: 10px 40px;
  background: #F4F5F9;
  border: 1px solid var(--color-light-grey);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.form .form-group .input-wrapper.radio.boxed .group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
}
.form .form-group .input-wrapper.radio.boxed .icons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.form .form-group .input-wrapper.radio.boxed .icons span {
  font-weight: bold;
  font-size: 32px;
  color: #F99F34;
}
.form .form-group .input-wrapper.radio.boxed:not(:last-of-type) {
  margin-bottom: 18px;
}
.form .form-group .input-wrapper.radio input {
  background-color: #fff;
  margin: 6px 0;
  font: inherit;
  color: var(--color-blue);
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-light-grey);
  border-radius: 10px;
  display: grid;
  place-content: center;
  vertical-align: top;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.form .form-group .input-wrapper.radio input::before {
  content: "";
  width: 13px;
  height: 13px;
  transform: scale(0);
  transition: calc(var(--transition-time) / 2) transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: var(--color-blue);
  border-radius: 7px;
  /*
  	transform-origin: bottom left;
  	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  */
}
.form .form-group .input-wrapper.radio input:checked::before {
  transform: scale(1);
}
.form .form-group .input-wrapper.radio input:focus {
  outline: none;
  outline-offset: unset;
  box-shadow: inset 0px 0px 6px var(--color-blue0), 0px 0px 6px var(--color-blue40);
}
.form .form-group .input-wrapper.radio input:disabled {
  background-color: var(--color-light-blue);
  border-color: var(--color-light-blue);
  color: var(--form-control-disabled);
  cursor: not-allowed;
}
.form .form-group .input-wrapper.checkbox {
  display: grid;
  grid-template-columns: 1em auto;
  gap: 16px;
  position: relative;
}
.form .form-group .input-wrapper.checkbox input {
  background-color: #fff;
  margin: 6px 0;
  font: inherit;
  color: var(--color-blue);
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-light-grey);
  border-radius: 4px;
  display: grid;
  place-content: center;
  vertical-align: top;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.form .form-group .input-wrapper.checkbox input::before {
  content: "";
  width: 14px;
  height: 14px;
  transform: scale(0);
  transition: calc(var(--transition-time) / 2) transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: var(--color-blue);
  border-radius: 2px;
  /*
  	transform-origin: bottom left;
  	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  */
}
.form .form-group .input-wrapper.checkbox input:checked::before {
  transform: scale(1);
}
.form .form-group .input-wrapper.checkbox input:focus {
  outline: none;
  outline-offset: unset;
  box-shadow: inset 0px 0px 6px var(--color-blue0), 0px 0px 6px var(--color-blue40);
}
.form .form-group .input-wrapper.checkbox input:disabled {
  background-color: var(--color-light-blue);
  border-color: var(--color-light-blue);
  color: var(--form-control-disabled);
  cursor: not-allowed;
}
.form .form-group .input-wrapper.file.invalid input[type=file]::file-selector-button, .form .form-group .input-wrapper.file.invalid input[type=file]::file-selector-button:hover {
  background-color: var(--color-red10);
  border-color: var(--color-red);
  color: var(--color-black);
}
.form .form-group .input-wrapper.prefix::after {
  top: 1px;
  left: 1px;
  width: 74px;
  height: 54px;
  line-height: 54px;
  background-color: var(--color-blue5);
  border-radius: 3px 0 0 3px;
  font-weight: 600;
  text-align: center;
  color: var(--color-black50);
  content: attr(data-prefix);
  position: absolute;
}
.form .form-group .input-wrapper.prefix input {
  padding-left: 94px;
}
.form .form-group .input-wrapper.prefix label {
  left: 88px;
  max-width: calc(100% - 86px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.form .form-group .input-wrapper.prefix.fa-icon::after {
  font-family: "Font Awesome 6 Pro";
}
.form .form-group .input-wrapper.suffix::after {
  top: 1px;
  right: 1px;
  width: 74px;
  height: 54px;
  line-height: 54px;
  background-color: var(--color-blue5);
  border-radius: 0 3px 3px 0;
  font-weight: 600;
  text-align: center;
  color: var(--color-black50);
  content: attr(data-suffix);
  position: absolute;
}
.form .form-group .input-wrapper.suffix input {
  padding-right: 94px;
}
.form .form-group .input-wrapper.suffix label {
  max-width: calc(100% - 86px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.form .form-group .input-wrapper.suffix.fa-icon::after {
  font-family: "Font Awesome 6 Pro";
}
.form .form-group .input-wrapper.prefilled input {
  background-color: var(--color-blue3);
}
.form .form-group .input-wrapper.prefilled input:focus {
  border-color: var(--color-blue);
  box-shadow: inset 0px 0px 6px var(--color-blue0), 0px 0px 6px var(--color-blue40);
}
.form .form-group .input-wrapper.prefilled input + label {
  top: 19px;
  padding: 0 6px;
  left: 13px;
  line-height: 19px;
  font-family: "Open Sans";
  font-size: 14px;
  position: absolute;
  transition: all linear calc(var(--transition-time) / 2);
  pointer-events: none;
  text-overflow: ellipsis;
  z-index: 1;
}
.form .form-group .input-wrapper.prefilled input:not(:placeholder-shown) + label, .form .form-group .input-wrapper.prefilled input:focus + label {
  top: -9px;
  background-color: var(--color-white);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
}
.form .form-group .input-wrapper.invalid, .form .form-group .input-wrapper.ng-invalid {
  position: relative;
}
.form .form-group .input-wrapper.invalid input[type=text],
.form .form-group .input-wrapper.invalid input[type=date],
.form .form-group .input-wrapper.invalid input[type=email],
.form .form-group .input-wrapper.invalid input[type=image],
.form .form-group .input-wrapper.invalid input[type=month],
.form .form-group .input-wrapper.invalid input[type=number],
.form .form-group .input-wrapper.invalid input[type=password],
.form .form-group .input-wrapper.invalid input[type=range],
.form .form-group .input-wrapper.invalid input[type=search],
.form .form-group .input-wrapper.invalid select,
.form .form-group .input-wrapper.invalid textarea, .form .form-group .input-wrapper.ng-invalid input[type=text],
.form .form-group .input-wrapper.ng-invalid input[type=date],
.form .form-group .input-wrapper.ng-invalid input[type=email],
.form .form-group .input-wrapper.ng-invalid input[type=image],
.form .form-group .input-wrapper.ng-invalid input[type=month],
.form .form-group .input-wrapper.ng-invalid input[type=number],
.form .form-group .input-wrapper.ng-invalid input[type=password],
.form .form-group .input-wrapper.ng-invalid input[type=range],
.form .form-group .input-wrapper.ng-invalid input[type=search],
.form .form-group .input-wrapper.ng-invalid select,
.form .form-group .input-wrapper.ng-invalid textarea {
  background-color: var(--color-red10);
  border-color: var(--color-red);
}
.form .form-group .input-wrapper.invalid input[type=text]:focus,
.form .form-group .input-wrapper.invalid input[type=date]:focus,
.form .form-group .input-wrapper.invalid input[type=email]:focus,
.form .form-group .input-wrapper.invalid input[type=image]:focus,
.form .form-group .input-wrapper.invalid input[type=month]:focus,
.form .form-group .input-wrapper.invalid input[type=number]:focus,
.form .form-group .input-wrapper.invalid input[type=password]:focus,
.form .form-group .input-wrapper.invalid input[type=range]:focus,
.form .form-group .input-wrapper.invalid input[type=search]:focus,
.form .form-group .input-wrapper.invalid select:focus,
.form .form-group .input-wrapper.invalid textarea:focus, .form .form-group .input-wrapper.ng-invalid input[type=text]:focus,
.form .form-group .input-wrapper.ng-invalid input[type=date]:focus,
.form .form-group .input-wrapper.ng-invalid input[type=email]:focus,
.form .form-group .input-wrapper.ng-invalid input[type=image]:focus,
.form .form-group .input-wrapper.ng-invalid input[type=month]:focus,
.form .form-group .input-wrapper.ng-invalid input[type=number]:focus,
.form .form-group .input-wrapper.ng-invalid input[type=password]:focus,
.form .form-group .input-wrapper.ng-invalid input[type=range]:focus,
.form .form-group .input-wrapper.ng-invalid input[type=search]:focus,
.form .form-group .input-wrapper.ng-invalid select:focus,
.form .form-group .input-wrapper.ng-invalid textarea:focus {
  border-color: var(--color-red);
  box-shadow: inset 0px 0px 6px var(--color-red0), 0px 0px 6px var(--color-red40);
}
.form .form-group .input-wrapper.invalid.prefix::after, .form .form-group .input-wrapper.invalid.suffix::after, .form .form-group .input-wrapper.ng-invalid.prefix::after, .form .form-group .input-wrapper.ng-invalid.suffix::after {
  background-color: var(--color-red10);
}
.form .form-group .input-wrapper.invalid .error-message, .form .form-group .input-wrapper.ng-invalid .error-message {
  color: var(--color-red);
}
.form .form-group .input-wrapper.buttons {
  display: flex;
  flex-direction: row;
}
.form .form-group .input-wrapper.buttons .select-wrapper {
  position: relative;
}
.form .form-group .input-wrapper.buttons .select-wrapper::after {
  top: 7px;
  right: 21px;
  line-height: 19px;
  pointer-events: none;
  font-family: "Font Awesome 6 Pro";
  font-weight: 700;
  font-style: normal;
  color: var(--color-blue);
  position: absolute;
  content: "\f078";
  z-index: 1;
}
.form .form-group .input-wrapper.buttons .select-wrapper select {
  line-height: 32px;
  height: 34px;
  padding: 0 54px 0 20px;
  border-radius: 4px 0 0 4px;
  border-color: var(--button-secondary-border);
  border-right: 0;
  transition: all linear var(--transition-time);
}
.form .form-group .input-wrapper.buttons .select-wrapper select:disabled {
  background-color: var(--color-blue5);
  border-color: var(--color-blue10);
  color: var(--color-black50);
}
.form .form-group .input-wrapper.buttons .select-wrapper select:hover {
  border-color: var(--color-orange);
}
.form .form-group .input-wrapper.buttons .select-wrapper select:hover:disabled {
  background-color: var(--color-blue5);
  border-color: var(--color-blue10);
  color: var(--color-black50);
}
.form .form-group .input-wrapper.buttons .select-wrapper select:focus {
  box-shadow: unset;
}
.form .form-group .input-wrapper.buttons input.secondary {
  border-radius: 0 4px 4px 0;
}
.form .form-group .input-wrapper.buttons input.secondary:disabled {
  background-color: var(--color-blue5);
  border-color: var(--color-blue10);
  color: var(--color-black50);
}
.form .form-group .input-wrapper.buttons a {
  margin-right: 24px;
  text-decoration: none;
  color: var(--color-light-grey);
}
.form .form-group .input-wrapper.buttons a:hover {
  text-decoration: underline;
}
.form .form-group .input-wrapper.buttons button {
  margin-left: 24px;
}
.form .form-group .input-wrapper.buttons button:first-of-type {
  margin-left: 0;
  margin-right: auto;
}
.form .form-group .input-wrapper.buttons button:only-of-type {
  margin-left: auto;
  margin-right: unset;
}
.form .form-group .input-wrapper.buttons:hover select:not(:disabled),
.form .form-group .input-wrapper.buttons:hover input[type=button]:not(:disabled) {
  border-color: var(--color-orange);
}
.form .form-group .input-wrapper.toggle {
  padding: 11px 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 100px auto;
  position: relative;
  /*
  label {
  	font-weight: 600;
  }
  */
}
.form .form-group .input-wrapper.toggle.label-after {
  grid-template-columns: 100px auto;
}
.form .form-group .input-wrapper.toggle.label-before {
  grid-template-columns: auto 100px;
}
.form .form-group .input-wrapper.toggle input {
  background-color: var(--color-white);
  margin: 0;
  font: inherit;
  color: var(--color-blue);
  width: 100px;
  height: 34px;
  border: 1px solid var(--color-darker-grey);
  border-radius: 17px;
  display: grid;
  place-content: center;
  vertical-align: top;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
}
.form .form-group .input-wrapper.toggle input::before {
  top: 2px;
  left: 2px;
  content: "";
  width: 45px;
  height: 28px;
  line-height: 28px;
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: var(--color-darker-grey);
  border-radius: 14px;
  position: absolute;
  text-align: center;
  color: var(--color-white);
  transition: left calc(var(--transition-time) / 2) linear;
  /*
  	transform-origin: bottom left;
  	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  */
}
.form .form-group .input-wrapper.toggle input::after {
  top: 0;
  right: 16px;
  color: var(--color-light-grey);
  position: absolute;
}
.form .form-group .input-wrapper.toggle input:checked::before {
  background-color: var(--color-orange);
  color: var(--color-black);
  left: 51px;
}
.form .form-group .input-wrapper.toggle input:checked::after {
  left: 16px;
  right: unset;
}
.form .form-group .input-wrapper.toggle input.on_off::before {
  content: "Uit";
}
.form .form-group .input-wrapper.toggle input.on_off::after {
  content: "Aan";
}
.form .form-group .input-wrapper.toggle input.on_off:checked::before {
  content: "Aan";
}
.form .form-group .input-wrapper.toggle input.on_off:checked::after {
  content: "Uit";
}
.form .form-group .input-wrapper.toggle input.yes_no::before {
  content: "Nee";
}
.form .form-group .input-wrapper.toggle input.yes_no::after {
  content: "Ja";
}
.form .form-group .input-wrapper.toggle input.yes_no:checked::before {
  content: "Ja";
}
.form .form-group .input-wrapper.toggle input.yes_no:checked::after {
  content: "Nee";
}
.form .form-group .input-wrapper.toggle input:focus {
  outline: none;
  outline-offset: unset;
  box-shadow: inset 0px 0px 6px var(--color-blue0), 0px 0px 6px var(--color-blue40);
}
.form .form-group .input-wrapper.toggle input:disabled {
  background-color: var(--color-white);
  border-color: var(--color-light-grey);
  color: var(--form-control-disabled);
  cursor: not-allowed;
}
.form .form-group .input-wrapper.toggle input:disabled::before, .form .form-group .input-wrapper.toggle input:disabled:checked::before {
  background-color: var(--color-light-grey);
  color: var(--color-white);
}
.form .form-group .input-wrapper.ckeditor .ck-editor .ck-editor__editable {
  min-height: 300px;
}
.form .form-group .input-wrapper.ckeditor .ck-editor .ck-toolbar {
  padding-top: 5px !important;
}
.form .form-group .input-wrapper.ckeditor .ck-editor + label {
  top: -9px;
  background-color: var(--color-white);
  font-size: 12px;
  padding: 0 6px;
  left: 13px;
  line-height: 19px;
  font-family: "Open Sans";
  position: absolute;
  transition: all linear calc(var(--transition-time) / 2);
  pointer-events: none;
  text-overflow: ellipsis;
  z-index: 1;
}
.form hr {
  margin: 24px 0 8px 0;
  padding: 0;
  background-color: transparent;
  border: 0;
  border-top: 2px solid var(--color-blue10);
  opacity: 1;
}

.data .data-group {
  padding-top: 6px;
}
.data .data-group .text-wrapper {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-blue15);
  display: flex;
  flex-direction: row;
}
.data .data-group .text-wrapper p {
  line-height: 24px;
  padding: 0;
}
.data .data-group .text-wrapper p span {
  line-height: 24px;
  font-weight: 600;
  font-size: 12px;
  display: block;
}
.data .data-group .text-wrapper .icon, .data .data-group .text-wrapper input[type=submit],
.data .data-group .text-wrapper input[type=button],
.data .data-group .text-wrapper input[type=reset],
.data .data-group .text-wrapper button,
.data .data-group .text-wrapper blade-title,
.data .data-group .text-wrapper .button a span,
.button a .data .data-group .text-wrapper span {
  width: 48px;
  height: 48px;
  margin-left: auto;
  border-radius: 4px;
  transition: background-color linear var(--transition-time);
  cursor: pointer;
  display: block;
}
.data .data-group .text-wrapper .icon::after, .data .data-group .text-wrapper input[type=submit]::after,
.data .data-group .text-wrapper input[type=button]::after,
.data .data-group .text-wrapper input[type=reset]::after,
.data .data-group .text-wrapper button::after,
.data .data-group .text-wrapper blade-title::after,
.data .data-group .text-wrapper .button a span::after,
.button a .data .data-group .text-wrapper span::after {
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-family: "Font Awesome 6 Pro";
  text-align: center;
  display: block;
}
.data .data-group .text-wrapper .icon:hover, .data .data-group .text-wrapper input[type=submit]:hover,
.data .data-group .text-wrapper input[type=button]:hover,
.data .data-group .text-wrapper input[type=reset]:hover,
.data .data-group .text-wrapper button:hover,
.data .data-group .text-wrapper blade-title:hover,
.data .data-group .text-wrapper .button a span:hover,
.button a .data .data-group .text-wrapper span:hover {
  background-color: var(--color-blue5);
}
.data .data-group .text-wrapper.editable .icon::after, .data .data-group .text-wrapper.editable input[type=submit]::after,
.data .data-group .text-wrapper.editable input[type=button]::after,
.data .data-group .text-wrapper.editable input[type=reset]::after,
.data .data-group .text-wrapper.editable button::after,
.data .data-group .text-wrapper.editable blade-title::after,
.data .data-group .text-wrapper.editable .button a span::after,
.button a .data .data-group .text-wrapper.editable span::after {
  content: "\f303";
}
.data .data-group .text-wrapper.add .icon::after, .data .data-group .text-wrapper.add input[type=submit]::after,
.data .data-group .text-wrapper.add input[type=button]::after,
.data .data-group .text-wrapper.add input[type=reset]::after,
.data .data-group .text-wrapper.add button::after,
.data .data-group .text-wrapper.add blade-title::after,
.data .data-group .text-wrapper.add .button a span::after,
.button a .data .data-group .text-wrapper.add span::after {
  font-weight: 900;
  content: "+";
}

.responsive-table {
  margin: 22px 0 0 0;
  border: 1px solid var(--color-lighter-grey);
  border-radius: 6px;
  box-shadow: 0px 3px 16px var(--color-black5);
  overflow-x: auto;
}
.responsive-table table {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: collapse;
}
.responsive-table table .cap-300 {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.responsive-table table .tags {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: 3px;
  max-width: 500px;
  flex-wrap: wrap;
}
.responsive-table table .tags li {
  display: inline-block;
  background: #2c418d;
  color: #fff;
  font-size: 12px;
  padding: 3px;
  margin: 0;
  line-height: 12px;
}
.responsive-table table thead tr {
  /*border-bottom: 1px solid var(--color-lighter-grey);*/
}
.responsive-table table thead tr th {
  background-color: var(--color-blue5);
  border-bottom: 1px solid var(--color-blue15);
  padding: 6px 12px;
  color: var(--color-blue);
  white-space: nowrap;
}
.responsive-table table thead tr th:after {
  content: "\f078";
  font-family: "Font Awesome 6 Pro";
  transition: all 0.3s;
  margin-left: 12px;
  display: inline-block;
  opacity: 0;
}
.responsive-table table thead tr th.sort-desc, .responsive-table table thead tr th.sort-asc {
  position: relative;
}
.responsive-table table thead tr th.sort-desc:after, .responsive-table table thead tr th.sort-asc:after {
  opacity: 1;
}
.responsive-table table thead tr th.sort-desc:after {
  transform: rotate(180deg);
}
.responsive-table table tbody tr {
  transition: all linear var(--transition-time);
}
.responsive-table table tbody tr:not(:last-of-type) {
  border-bottom: 1px solid var(--color-lighter-grey);
}
.responsive-table table tbody tr.invalid {
  color: var(--color-red);
}
.responsive-table table tbody tr td {
  padding: 6px 12px;
  white-space: nowrap;
  transition: var(--transition-time);
}
.responsive-table table tbody tr td .dummy-checkbox {
  width: 24px;
  height: 24px;
  margin: 5px;
  border: 1px solid var(--color-blue15);
  border-radius: 3px;
  position: relative;
}
.responsive-table table tbody tr td .dummy-checkbox.checked::before {
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: var(--color-blue);
  border-radius: 2px;
  content: "";
  position: absolute;
  z-index: 1;
}
.responsive-table table tbody tr td .dummy-checkbox.checked::after {
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-family: "Font Awesome 6 Pro";
  text-align: center;
  color: #FFFFFF;
  content: "\f00c";
  position: absolute;
  z-index: 2;
}
.responsive-table table tbody tr td .opacity-value {
  opacity: 0.4;
}
.responsive-table table tbody tr td.small-row {
  font-size: 14px;
  line-height: 20px;
}
.responsive-table table tbody tr td.buttons {
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 10px;
}
.responsive-table table tbody tr td a,
.responsive-table table tbody tr td a:hover {
  color: var(--color-black);
}
.responsive-table table tbody tr td a:hover {
  text-decoration: none;
}
.responsive-table table tbody tr:nth-child(even) {
  background-color: var(--color-blue3);
}
.responsive-table table tfoot tr td {
  border-top: 1px solid var(--color-blue15);
  padding: 6px 12px;
}
.responsive-table table tfoot tr td .form .form-group {
  padding: 0;
}
.responsive-table table .table-logo {
  margin: 20px;
  max-width: 200px;
}
.responsive-table table .price-list-price {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.375rem;
  width: 100%;
}
.responsive-table table .price-list-item {
  border-left: 1px solid var(--color-blue5);
  border-right: 1px solid var(--color-blue5);
}
.responsive-table table .preferred-supplier {
  background-color: var(--color-green20);
}
.responsive-table table .product-not-available {
  color: red;
}
.responsive-table table .product-not-orderable {
  background-color: var(--color-red10) !important;
}

.logo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-header > img {
  max-height: 50px;
}

.file-logo > img {
  max-width: 400px;
}

#preloader,
#hooked_preloader {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  /*visibility: hidden;*/
  z-index: 9999;
}

#preloader {
  background-color: var(--color-blue20);
  position: fixed;
}
#preloader::after {
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  background-image: url("/img/logo_icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  animation: rotation 2s infinite ease-in-out;
  content: "";
  position: absolute;
}

#hooked_preloader {
  background-color: var(--color-white80);
  position: absolute;
}
#hooked_preloader::after {
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  background-image: url("/img/logo_icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  animation: rotation-with-transform 2s infinite ease-in-out;
  content: "";
  position: absolute;
}

#dimming {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-blue20);
  display: none;
  /*visibility: hidden;*/
  position: fixed;
  z-index: 9999;
}

#progress_bar {
  top: 0;
  left: 0;
  height: var(--progress-bar-height);
  background: var(--color-orange);
  min-width: var(--menu-width);
  position: fixed;
  z-index: 9999;
}

.message {
  border-radius: 8px;
}
.message.warning {
  background-color: var(--notification-danger-background);
}

.notification.success, .notification.danger, .notification.warning, .notification.info, .alert.success, .alert.danger, .alert.warning, .alert.info {
  padding: 15px 24px;
  border-style: solid;
  border-width: 0 0 2px 0;
}
.notification.success p, .notification.danger p, .notification.warning p, .notification.info p, .alert.success p, .alert.danger p, .alert.warning p, .alert.info p {
  padding: 0;
}
.notification.success, .alert.success {
  background-color: var(--notification-succes-background);
  border-color: var(--notification-succes-border);
}
.notification.danger, .alert.danger {
  background-color: var(--notification-danger-background);
  border-color: var(--notification-danger-border);
}
.notification.warning, .alert.warning {
  background-color: var(--notification-warning-background);
  border-color: var(--notification-warning-border);
}
.notification.info, .alert.info {
  background-color: var(--notification-info-background);
  border-color: var(--notification-info-border);
}

.notification {
  top: 0;
  right: 0;
  left: 0;
  position: absolute;
  z-index: 2;
}
.notification.success, .notification.danger, .notification.warning, .notification.info {
  padding: 15px 88px 15px 24px;
  font-weight: 600;
}
.notification.success p, .notification.danger p, .notification.warning p, .notification.info p {
  padding: 0;
}
.notification::after {
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
  line-height: 64px;
  font-family: "Font Awesome 6 Pro";
  text-align: center;
  font-size: 20px;
  content: "\f00d";
  display: block;
  position: absolute;
  cursor: pointer;
}

.alert.success, .alert.danger, .alert.warning, .alert.info {
  margin: 22px 0 0 0;
}

.box {
  min-width: 320px;
  max-width: 768px;
  margin: 0 auto;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
}

.section {
  /*min-height: 224px;*/
  margin-top: 24px;
  padding: 10px 40px 32px 40px;
  background-color: var(--color-white);
  border-radius: 8px;
  position: relative;
}
.section .wrapper {
  padding: 22px 0 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 22px;
}
.section .wrapper h2 {
  padding: 0;
}
.section .wrapper .filter-box {
  margin-left: auto;
}
.section .wrapper .dropdown-box {
  margin-left: auto;
}
.section .wrapper .filters {
  margin-left: auto;
  margin-top: 0;
}
.section .wrapper .filters .form .inputs {
  display: flex;
  gap: 10px;
}
.section .actions {
  position: absolute;
  top: 32px;
  right: 40px;
  display: flex;
  gap: 10px;
}

.login-page-navigation nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.login-page-navigation nav ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.login-page-navigation nav ul li a {
  color: var(--color-light-grey);
  text-decoration: none;
}
.login-page-navigation nav ul li a:hover {
  text-decoration: underline;
}

.links {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.links a {
  text-decoration: none;
  color: var(--color-light-grey);
}
.links a:hover {
  text-decoration: underline;
}
.links a:not(:last-of-type) {
  margin-right: 24px;
}

header {
  height: var(--header-height);
  position: relative;
  z-index: 9997;
}
header .header {
  top: var(--progress-bar-height);
  right: 0;
  left: var(--header-offset);
  height: var(--header-height);
  background-color: var(--color-white);
  position: fixed;
  z-index: 9997;
}
header .header .header-bar {
  height: 64px;
}
header .header .header-bar.mobile {
  display: none;
  visibility: hidden;
}
header .header .header-bar.mobile .logo {
  margin: 12px 0 12px 24px;
}
header .header .header-bar.mobile .logo img {
  width: auto;
  height: 40px;
  display: block;
}
header .header .header-bar.mobile .hamburger {
  width: 18px;
  height: 12px;
  margin: 26px 20px 26px 0;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
header .header .header-bar.mobile .hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #000;
  border-radius: 8px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
header .header .header-bar.mobile .hamburger span:nth-child(1) {
  top: 0px;
}
header .header .header-bar.mobile .hamburger span:nth-child(2), header .header .header-bar.mobile .hamburger span:nth-child(3) {
  top: calc(50% - 1px);
}
header .header .header-bar.mobile .hamburger span:nth-child(4) {
  bottom: 0;
}
header .header .header-bar.mobile .hamburger.open span:nth-child(1) {
  top: calc(50% - 1px);
  width: 0%;
  left: 50%;
}
header .header .header-bar.mobile .hamburger.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
header .header .header-bar.mobile .hamburger.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
header .header .header-bar.mobile .hamburger.open span:nth-child(4) {
  bottom: calc(50% - 1px);
  width: 0%;
  left: 50%;
}
header .header .header-bar.mobile .logo {
  flex-grow: 1;
}
header .header .header-bar.title {
  display: flex;
  justify-content: space-between;
}
header .header .header-bar.title > p {
  line-height: 32px;
  padding: 17px 24px 15px 24px;
  font-size: 20px;
  font-weight: 700;
}
header .header .header-bar.navigation {
  border-bottom: 1px solid var(--color-blue15);
}
header .header .header-bar nav.profile {
  margin: 12px 24px 0 auto;
}
header .header .header-bar nav.profile > ul {
  margin: 0;
  padding: 0;
}
header .header .header-bar nav.profile > ul > li {
  margin: 0;
  padding: 0 0 12px 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
}
header .header .header-bar nav.profile > ul > li > p {
  line-height: 20px;
  padding: 0;
  font-size: 12px;
  text-align: right;
}
header .header .header-bar nav.profile > ul > li > p > span {
  display: block;
}
header .header .header-bar nav.profile > ul > li > p > span:first-child {
  font-weight: 700;
}
header .header .header-bar nav.profile > ul > li figure {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0 0 0 16px;
  background-color: var(--color-red);
  border: 2px solid var(--color-white);
  border-radius: 20px;
  text-align: center;
  display: block;
}
header .header .header-bar nav.profile > ul > li figure::before {
  width: 36px;
  height: 36px;
  line-height: 36px;
  content: attr(data-first-character);
  font-weight: 700;
  text-align: center;
  color: var(--color-white);
  display: block;
}
header .header .header-bar nav.profile > ul > li .company-logo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
  margin: 0 0 0 16px;
  border: 2px solid var(--color-white);
  border-radius: 20px;
  text-align: center;
  display: block;
  position: relative;
  overflow: hidden;
}
header .header .header-bar nav.profile > ul > li .company-logo img {
  width: 100%;
  height: 100%;
}
header .header .header-bar nav.profile > ul > li::after {
  width: 14px;
  margin-left: 16px;
  line-height: 40px;
  font-family: "Font Awesome 6 Pro";
  content: "\f078";
}
header .header .header-bar nav.profile > ul > li ul {
  margin: 0;
  padding: 0;
  top: 100%;
  right: 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear var(--transition-time), z-index 0s linear 0.01s;
  z-index: 0;
  min-width: 350px;
}
header .header .header-bar nav.profile > ul > li ul li {
  margin: 0;
  padding: 10px 40px 32px 40px;
  background-color: var(--color-white);
  border: 1px solid var(--color-lighter-grey);
  border-radius: 6px;
  list-style: none;
  color: var(--color-black80);
}
header .header .header-bar nav.profile > ul > li ul li .form .form-group {
  padding: 16px 0;
  border-top: 1px solid var(--color-blue10);
}
header .header .header-bar nav.profile > ul > li ul li .form .form-group .input-wrapper.toggle {
  grid-template-columns: auto 100px;
}
header .header .header-bar nav.profile > ul > li ul li .form .form-group .input-wrapper.toggle label {
  white-space: nowrap;
}
header .header .header-bar nav.profile > ul > li ul li .form .form-group .input-wrapper.toggle label::before {
  width: 18px;
  font-family: "Font Awesome 6 Pro";
  margin-right: 26px;
  font-weight: 900;
  text-align: center;
  content: "\f070";
  color: var(--color-orange);
  display: inline-block;
}
header .header .header-bar nav.profile > ul > li ul li .form .form-group .input-wrapper.toggle label i {
  margin-left: 6px;
  color: var(--color-black);
}
header .header .header-bar nav.profile > ul > li ul li .form .form-group p.link {
  padding: 0;
}
header .header .header-bar nav.profile > ul > li ul li .form .form-group p.link.icon a {
  color: var(--color-black80);
  display: inline-block;
}
header .header .header-bar nav.profile > ul > li ul li .form .form-group p.link.icon a span {
  display: inline-block;
}
header .header .header-bar nav.profile > ul > li ul li .form .form-group p.link.icon a span::before {
  width: 18px;
  text-align: center;
  color: var(--color-black60);
  display: inline-block;
}
header .header .header-bar nav.profile > ul > li ul li .form .form-group p.link.icon a:hover span {
  text-decoration: underline;
}
header .header .header-bar nav.profile > ul > li ul li .form .form-group:first-of-type {
  /*padding-top: 0;*/
  border-top: 0;
}
header .header .header-bar nav.profile > ul > li ul li .form .form-group:last-of-type {
  padding-bottom: 0;
}
header .header .header-bar nav.profile > ul > li:hover ul {
  top: calc(100% - 6px);
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition-delay: 0s, 0s, var(--transition-time);
}
header .header .header-bar nav.primary ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: start;
}
header .header .header-bar nav.primary ul li {
  margin: 0 0 0 40px;
  padding: 0;
  border-bottom: 2px solid transparent;
  list-style: none;
  transition: all linear var(--transition-time);
}
header .header .header-bar nav.primary ul li:first-child {
  margin-left: 24px;
}
header .header .header-bar nav.primary ul li a {
  text-decoration: none;
  color: var(--color-black);
  display: block;
}
header .header .header-bar nav.primary ul li a span {
  padding: 16px 0 14px 0;
  white-space: nowrap;
  display: block;
}
header .header .header-bar nav.primary ul li:hover, header .header .header-bar nav.primary ul li.is--selected {
  border-bottom: 2px solid var(--color-blue);
}
header .header .header-bar nav.primary ul li.is--selected a span {
  font-weight: 700;
  color: var(--color-blue);
}
header .header .header-bar nav.primary ul li.not--initialized {
  border-bottom: 0;
}
header .header .header-bar nav.primary ul li.not--initialized span {
  display: block;
  padding: 16px 0 14px 0;
  white-space: nowrap;
  cursor: default;
  font-style: italic;
  color: var(--color-dark-grey);
}
header .header .header-bar nav.primary ul li.is--disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
header .header .header-bar nav.primary ul li.is--disabled span {
  cursor: not-allowed;
}
header .header .header-bar-url {
  color: var(--color-white80);
  text-decoration: none;
  transition: all linear var(--transition-time);
}
header .header .header-bar-url:hover {
  text-decoration: underline;
}

.body-wrapper {
  max-width: 100%;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}
.body-wrapper .page-wrapper {
  min-height: 100%;
  height: 100%;
  margin: 0 auto;
}
.body-wrapper .page-wrapper .wrapper-top {
  min-height: 100%;
  height: 100%;
  position: relative;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--menu-width);
  height: 100vh;
  background-color: var(--color-white);
  border-right: 1px solid var(--color-blue15);
  position: absolute;
  transition: width var(--transition-time) var(--ease-in-out-extreme);
  z-index: 9998;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper::before {
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  background-color: var(--color-lighter-grey);
  position: absolute;
  content: "";
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper.is-hover {
  --menu-width: var(--menu-visible-width-open);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo {
  top: var(--progress-bar-height);
  left: 0;
  width: calc(var(--menu-width) - 1px);
  padding: 0;
  background-color: var(--color-white);
  transition: width var(--transition-time) var(--ease-in-out-extreme);
  position: fixed;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo a {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper {
  height: 64px;
  position: relative;
  transition: margin var(--transition-time) var(--ease-in-out-extreme);
  overflow: hidden;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper .icon, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper input[type=submit],
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper input[type=button],
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper input[type=reset],
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper button,
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper blade-title,
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper .button a span,
.button a .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper span {
  top: 0;
  left: 0;
  width: 70px;
  background: -moz-linear-gradient(left, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(left, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#00ffffff",GradientType=1 );
  position: absolute;
  z-index: 2;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper .icon img, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper input[type=submit] img,
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper input[type=button] img,
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper input[type=reset] img,
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper button img,
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper blade-title img,
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper .button a span img,
.button a .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper span img {
  width: 60px;
  height: 60px;
  display: block;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper .text {
  top: 0;
  position: absolute;
  transition: all var(--transition-time) var(--ease-in-out-extreme);
  z-index: 1;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo .logo-wrapper .text img {
  width: auto;
  height: 60px;
  display: block;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder {
  top: calc(64px + var(--progress-bar-height));
  bottom: 82px;
  width: calc(var(--menu-width) - 1px);
  position: fixed;
  transition: width var(--transition-time) var(--ease-in-out-extreme);
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder::-webkit-scrollbar {
  display: none;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul {
  margin: 0;
  padding: 0;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  border-left: 8px solid var(--color-blue);
  transition: background-color linear var(--transition-time);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li::before {
  top: 16px;
  left: 0;
  width: 71px;
  height: 64px;
  font-size: 22px;
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  transition: background-color linear var(--transition-time);
  position: absolute;
  pointer-events: none;
  pointer-events: none;
  content: "";
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li > a {
  text-decoration: none;
  display: block;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li > a > span {
  padding: 16px 24px 16px 72px;
  font-size: 16px;
  white-space: nowrap;
  color: var(--color-black);
  transition: all linear var(--transition-time);
  display: block;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li > span {
  padding: 16px 24px 16px 72px;
  font-size: 16px;
  white-space: nowrap;
  color: var(--color-black);
  transition: all linear var(--transition-time);
  display: block;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li:hover::before, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-active::before {
  color: var(--color-white) !important;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li:hover a, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-active a {
  text-decoration: none;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li:hover a span, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-active a span {
  color: var(--color-white);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li:hover span, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-active span {
  color: var(--color-white);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-active ul {
  display: block;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.quotations {
  border-left: 8px solid var(--color-blue);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.quotations::before {
  content: "\f15c";
  font-family: "Font Awesome 6 Pro";
  color: var(--color-dark-grey);
  display: inline-block;
  margin-right: 8px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.quotations:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.quotations.is-active {
  background-color: var(--color-blue);
  color: var(--color-white);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.energytool {
  border-left: 8px solid var(--color-turquoise);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.energytool::before {
  content: "\f670";
  font-family: "Font Awesome 6 Pro";
  color: var(--color-dark-grey);
  display: inline-block;
  margin-right: 8px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.energytool:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.energytool.is-active {
  background-color: var(--color-turquoise);
  color: var(--color-white);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.templates {
  border-left: 8px solid var(--color-pink);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.templates::before {
  content: "\f570";
  font-family: "Font Awesome 6 Pro";
  color: var(--color-dark-grey);
  display: inline-block;
  margin-right: 8px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.templates:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.templates.is-active {
  background-color: var(--color-pink);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.consulting_module {
  border-left: 8px solid var(--color-green);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.consulting_module::before {
  content: "\f657";
  font-family: "Font Awesome 6 Pro";
  color: var(--color-dark-grey);
  display: inline-block;
  margin-right: 8px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.consulting_module:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.consulting_module.is-active {
  background-color: var(--color-green);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.price_list {
  border-left: 8px solid var(--color-brown);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.price_list::before {
  content: "\f46d";
  font-family: "Font Awesome 6 Pro";
  color: var(--color-dark-grey);
  display: inline-block;
  margin-right: 8px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.price_list:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.price_list.is-active {
  background-color: var(--color-brown);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.subscriptions {
  border-left: 8px solid var(--color-turquoise);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.subscriptions::before {
  content: "\f2bb";
  font-family: "Font Awesome 6 Pro";
  color: var(--color-dark-grey);
  display: inline-block;
  margin-right: 8px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.subscriptions:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.subscriptions.is-active {
  background-color: var(--color-turquoise);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.gallery {
  border-left: 8px solid var(--color-orange);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.gallery::before {
  content: "\f03e";
  font-family: "Font Awesome 6 Pro";
  color: var(--color-dark-grey);
  display: inline-block;
  margin-right: 8px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.gallery:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.gallery.is-active {
  background-color: var(--color-orange);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.packages {
  border-left: 8px solid var(--color-medium-blue);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.packages::before {
  content: "\f49a";
  font-family: "Font Awesome 6 Pro";
  color: var(--color-dark-grey);
  display: inline-block;
  margin-right: 8px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.packages:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.packages.is-active {
  background-color: var(--color-medium-blue);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.help {
  border-left: 8px solid var(--color-purple);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.help::before {
  content: "\f05a";
  font-family: "Font Awesome 6 Pro";
  color: var(--color-dark-grey);
  display: inline-block;
  margin-right: 8px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.help:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.help.is-active {
  background-color: var(--color-purple);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.settings {
  border-left: 8px solid var(--color-dark-grey);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.settings::before {
  content: "\f013";
  font-family: "Font Awesome 6 Pro";
  color: var(--color-dark-grey);
  display: inline-block;
  margin-right: 8px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.settings:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.settings.is-active {
  background-color: var(--color-dark-grey);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.endimpersonation {
  border-left: 8px solid var(--color-dark-grey);
  background-color: var(--color-orange);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.endimpersonation::before {
  mask-image: url("/img/icon_settings.svg");
  -webkit-mask-image: url("/img/icon_settings.svg");
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.endimpersonation:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.endimpersonation.is-active {
  background-color: var(--color-dark-grey);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.admin {
  border-left: 8px solid var(--color-red);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.admin::before {
  content: "\f7d9";
  font-family: "Font Awesome 6 Pro";
  color: var(--color-dark-grey);
  display: inline-block;
  margin-right: 8px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.admin:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.admin.is-active {
  background-color: var(--color-red);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.admin li:hover > a {
  background-color: var(--color-red) !important;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.admin li.is-active > a {
  background-color: var(--color-red);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent {
  position: relative;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent > a > span {
  padding-right: 98px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent .child_toggler {
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
  margin: 0;
  padding: 0;
  /*background-color: var(--color-black5);*/
  display: block;
  position: absolute;
  z-index: 1;
  cursor: pointer;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent .child_toggler::after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 64px;
  font-family: "Font Awesome 6 Pro";
  text-align: center;
  color: var(--color-black);
  content: "\f078";
  position: absolute;
  transition: transform linear var(--transition-time);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent.is-expanded .child_toggler {
  background-color: var(--color-black5);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent.is-expanded .child_toggler::after {
  transform: rotate(-180deg);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent.is-active .child_toggler, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent:hover .child_toggler {
  background-color: var(--color-black20);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent.is-active .child_toggler::after, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent:hover .child_toggler::after {
  color: var(--color-white);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent.is-active ul, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent:hover ul {
  background-color: var(--color-black20);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent.is-active ul li a span::after, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li.is-parent:hover ul li a span::after {
  color: var(--color-white);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul {
  margin: 0;
  padding: 0;
  background-color: var(--color-black5);
  display: none;
  transition: max-height 0.3s ease-out;
  overflow: hidden;
  max-height: 1000px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul li a {
  text-decoration: none;
  color: var(--color-black);
  display: block;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul li a span {
  padding: 0 24px;
  font-size: 16px;
  display: block;
  /*
  &::before {
  	top: 0;
  	left: 0;
  	width: 71px;
  	height: 64px;
  	content: "";
  	position: absolute;
  }

  &::after {
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	width: 71px;
  	height: 64px;
  	line-height: 64px;
  	font-family: "Font Awesome 6 Pro";
  	font-weight: 900;
  	font-size: 18px;
  	text-align: center;
  	color: var(--color-black60);
  	content: "\f054";
  	position: absolute;
  }
  */
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul li a:hover {
  text-decoration: underline;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul li.is-active a, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul li:hover a {
  background-color: var(--color-dark-grey);
  text-decoration: none;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul li.is-active a span::after, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul li:hover a span::after {
  color: var(--color-white);
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul li.is-active a:hover, .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul li:hover a:hover {
  text-decoration: none;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul li a {
  text-decoration: none;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder nav > ul > li ul li a span {
  padding: 10px;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper #menu_toggler {
  bottom: 0;
  left: 8px;
  width: calc(var(--menu-width) - 8px);
  height: 82px;
  line-height: 82px;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  position: fixed;
  cursor: pointer;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper #menu_toggler::after {
  left: 0;
  width: 71px;
  height: 82px;
  font-family: "Font Awesome 6 Pro";
  content: "\f053";
  transform-origin: center center;
  transition: transform linear 250ms;
  position: absolute;
}
.body-wrapper .page-wrapper .wrapper-top .menu-wrapper #menu_toggler.menu-collapsed::after {
  transform: rotate(-180deg);
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper {
  top: var(--header-height);
  bottom: 0;
  width: calc(100vw - var(--menu-width));
  min-height: calc(100svh - var(--header-height) - var(--progress-bar-height));
  margin-left: var(--menu-width);
  background: inherit;
  box-sizing: border-box;
  position: absolute;
  overflow-y: auto;
  z-index: 9996;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content {
  max-width: 100%;
  min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--progress-bar-height));
  margin: 0 auto;
  padding: 0 12px 24px 12px;
  position: relative;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content .parsed--token {
  position: relative;
  cursor: pointer;
  display: inline-block;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content .parsed--token:hover:after {
  min-width: 200px;
  width: auto;
  height: auto;
  content: attr(data-token);
  border-radius: 3px;
  padding: 4px 6px;
  opacity: 1;
  text-align: center;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content .parsed--token:after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  background: var(--color-orange);
  color: black;
  font-weight: 400;
  border-radius: 100%;
  padding: 0;
  font-size: 14px;
  line-height: 14px;
  transform: translate(100%, -100%);
  top: 10px;
  right: -4px;
  opacity: 0.4;
  z-index: 10000;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content .function--token--touched,
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content .parsed--function--token {
  display: none;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content .function--token--block {
  border: dotted var(--color-orange) 2px;
  opacity: 0.4;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content .function--token--block:hover {
  opacity: 1;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content .function--token--block.parsed--token {
  display: block;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content .function--token--block.parsed--token:after {
  top: 3px;
  right: 3px;
  opacity: 1;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content.has-editor {
  padding: 0 !important;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content.has-editor + footer {
  display: none;
  visibility: hidden;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content.has-editor #button_bar {
  position: static;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content.has-buttons {
  padding-bottom: 106px;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content #button_bar {
  right: 0;
  bottom: 0;
  left: var(--menu-width);
  padding: 24px 64px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: fixed;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 10;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content #button_bar > * {
  margin-left: 24px;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper .content #button_bar > :first-child {
  margin-left: auto;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper footer {
  height: var(--footer-height);
  padding: 30px 64px 30px 64px;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-blue15);
  position: relative;
  z-index: 9999;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper footer p {
  padding: 0;
  text-align: center;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper footer p span {
  display: block;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper footer p span.copyright {
  color: var(--color-black);
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper footer p span.tag-line {
  color: var(--color-black30);
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper footer p span a {
  text-decoration: none;
  color: var(--color-black30);
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper footer p span a:hover {
  text-decoration: underline;
  color: var(--color-black30);
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper footer p a {
  text-decoration: none;
  color: var(--color-black);
  display: inline-flex;
  flex-direction: revert;
  vertical-align: top;
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper footer p a:hover {
  text-decoration: underline;
  color: var(--color-black);
}
.body-wrapper .page-wrapper .wrapper-top .content-wrapper footer::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 8px;
  background-color: var(--color-orange);
  content: "";
  position: absolute;
}

.timeline {
  position: relative;
  padding: 16px 0 16px 0;
  border-left: 2px solid var(--color-light-blue);
  margin-top: 24px;
  max-height: 500px;
  overflow: auto;
}
.timeline .event {
  position: relative;
  padding: 0 0 0 40px;
}
.timeline .event:not(:first-child) {
  margin-top: 16px;
}
.timeline .event:before {
  position: absolute;
  top: 16px;
  left: 0;
  width: 24px;
  height: 2px;
  background-color: var(--color-light-blue);
  content: "";
}
.timeline .event:after {
  position: absolute;
  top: 16px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-light-blue);
  content: "";
  transform: translate(-50%, -50%);
}
.timeline .event p {
  padding: 0 0 4px 0;
  line-height: 20px;
}
.timeline .event p.time {
  font-size: 11px;
  color: var(--color-black60);
  line-height: 12px;
}

.quotation-emails {
  margin: 22px 0 0 0;
  border: 1px solid var(--color-lighter-grey);
  border-radius: 6px;
  box-shadow: 0px 3px 16px var(--color-black5);
  padding: 0;
}
.quotation-emails li {
  list-style-type: none;
  position: relative;
  display: flex;
  padding: 12px 24px 12px 36px;
  gap: 10px;
}
.quotation-emails li .name {
  flex-grow: 1;
}
.quotation-emails li .status {
  color: var(--color-light-grey);
}
.quotation-emails li:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f1d8";
  position: absolute;
  left: 12px;
  top: 12px;
}
.quotation-emails li:not(:last-child) {
  border-bottom: 1px solid var(--color-lighter-grey);
}

.products .products-header {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subscription-detail {
  padding-bottom: 75px;
}

.subscription-detail,
.advice-result,
.quotation {
  --primary-color: orange;
  --secondary-color: darkblue;
}
.subscription-detail .sunned-logo,
.advice-result .sunned-logo,
.quotation .sunned-logo {
  position: fixed;
  opacity: 0.7;
  top: 65px;
  left: 50px;
}
.subscription-detail .sunned-logo img,
.advice-result .sunned-logo img,
.quotation .sunned-logo img {
  height: 70px;
}
.subscription-detail .sunned-logo.preview,
.advice-result .sunned-logo.preview,
.quotation .sunned-logo.preview {
  left: 300px;
  top: 200px;
}
.subscription-detail .button-bar,
.advice-result .button-bar,
.quotation .button-bar {
  background-color: white;
  width: 100%;
  height: 75px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5019607843);
  transition: 250ms ease-in opacity;
  z-index: 99;
}
.subscription-detail .button-bar p,
.advice-result .button-bar p,
.quotation .button-bar p {
  max-width: 350px;
  padding: 5px 0px 5px 15px;
  color: #a5a5a5;
  line-height: 18px;
}
.subscription-detail .button-bar div,
.advice-result .button-bar div,
.quotation .button-bar div {
  display: flex;
  gap: 15px;
  padding-right: 15px;
}
.subscription-detail .button-bar button,
.advice-result .button-bar button,
.quotation .button-bar button {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  margin-top: 0;
}
.subscription-detail .button-bar button:hover,
.advice-result .button-bar button:hover,
.quotation .button-bar button:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.subscription-detail .button-bar:hover,
.advice-result .button-bar:hover,
.quotation .button-bar:hover {
  opacity: 1;
}
.subscription-detail h1, .subscription-detail h2,
.advice-result h1,
.advice-result h2,
.quotation h1,
.quotation h2 {
  color: var(--primary-color);
}
.subscription-detail h3, .subscription-detail h4, .subscription-detail h5, .subscription-detail h6,
.advice-result h3,
.advice-result h4,
.advice-result h5,
.advice-result h6,
.quotation h3,
.quotation h4,
.quotation h5,
.quotation h6 {
  color: var(--secondary-color);
}
.subscription-detail p, .subscription-detail a, .subscription-detail li,
.advice-result p,
.advice-result a,
.advice-result li,
.quotation p,
.quotation a,
.quotation li {
  color: black;
}
.subscription-detail a,
.advice-result a,
.quotation a {
  text-decoration: none;
  font-weight: bold;
}
.subscription-detail a:hover,
.advice-result a:hover,
.quotation a:hover {
  text-decoration: underline;
}
.subscription-detail ul,
.advice-result ul,
.quotation ul {
  padding: 0;
}
.subscription-detail ul li,
.advice-result ul li,
.quotation ul li {
  list-style-type: none;
  position: relative;
  padding: 0 0 0 24px;
}
.subscription-detail ul li:before,
.advice-result ul li:before,
.quotation ul li:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f061";
  color: var(--primary-color);
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 300;
}
.subscription-detail button,
.advice-result button,
.quotation button {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #FFFFFF;
  margin-top: 22px;
}
.subscription-detail button:hover,
.advice-result button:hover,
.quotation button:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.subscription-detail .statistic,
.advice-result .statistic,
.quotation .statistic {
  position: relative;
  width: 150px;
  text-align: center;
  margin: 0 auto;
}
.subscription-detail .statistic .icon, .subscription-detail .statistic input[type=submit],
.subscription-detail .statistic input[type=button],
.subscription-detail .statistic input[type=reset],
.subscription-detail .statistic button,
.subscription-detail .statistic blade-title,
.subscription-detail .statistic .button a span,
.button a .subscription-detail .statistic span,
.advice-result .statistic .icon,
.advice-result .statistic input[type=submit],
.advice-result .statistic input[type=button],
.advice-result .statistic input[type=reset],
.advice-result .statistic button,
.advice-result .statistic blade-title,
.advice-result .statistic .button a span,
.button a .advice-result .statistic span,
.quotation .statistic .icon,
.quotation .statistic input[type=submit],
.quotation .statistic input[type=button],
.quotation .statistic input[type=reset],
.quotation .statistic button,
.quotation .statistic blade-title,
.quotation .statistic .button a span,
.button a .quotation .statistic span {
  width: 120px;
  height: 120px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  background-color: var(--primary-color);
  mask-position: center;
  mask-repeat: no-repeat;
}
.subscription-detail .statistic .icon.inverter, .subscription-detail .statistic input.inverter[type=submit],
.subscription-detail .statistic input.inverter[type=button],
.subscription-detail .statistic input.inverter[type=reset],
.subscription-detail .statistic button.inverter,
.subscription-detail .statistic blade-title.inverter,
.subscription-detail .statistic .button a span.inverter,
.button a .subscription-detail .statistic span.inverter,
.advice-result .statistic .icon.inverter,
.advice-result .statistic input.inverter[type=submit],
.advice-result .statistic input.inverter[type=button],
.advice-result .statistic input.inverter[type=reset],
.advice-result .statistic button.inverter,
.advice-result .statistic blade-title.inverter,
.advice-result .statistic .button a span.inverter,
.button a .advice-result .statistic span.inverter,
.quotation .statistic .icon.inverter,
.quotation .statistic input.inverter[type=submit],
.quotation .statistic input.inverter[type=button],
.quotation .statistic input.inverter[type=reset],
.quotation .statistic button.inverter,
.quotation .statistic blade-title.inverter,
.quotation .statistic .button a span.inverter,
.button a .quotation .statistic span.inverter {
  mask-image: url("/img/icon_quotation_optimizer.svg");
}
.subscription-detail .statistic .icon.solarpannel, .subscription-detail .statistic input.solarpannel[type=submit],
.subscription-detail .statistic input.solarpannel[type=button],
.subscription-detail .statistic input.solarpannel[type=reset],
.subscription-detail .statistic button.solarpannel,
.subscription-detail .statistic blade-title.solarpannel,
.subscription-detail .statistic .button a span.solarpannel,
.button a .subscription-detail .statistic span.solarpannel,
.advice-result .statistic .icon.solarpannel,
.advice-result .statistic input.solarpannel[type=submit],
.advice-result .statistic input.solarpannel[type=button],
.advice-result .statistic input.solarpannel[type=reset],
.advice-result .statistic button.solarpannel,
.advice-result .statistic blade-title.solarpannel,
.advice-result .statistic .button a span.solarpannel,
.button a .advice-result .statistic span.solarpannel,
.quotation .statistic .icon.solarpannel,
.quotation .statistic input.solarpannel[type=submit],
.quotation .statistic input.solarpannel[type=button],
.quotation .statistic input.solarpannel[type=reset],
.quotation .statistic button.solarpannel,
.quotation .statistic blade-title.solarpannel,
.quotation .statistic .button a span.solarpannel,
.button a .quotation .statistic span.solarpannel {
  mask-image: url("/img/icon_quotation_solar.svg");
}
.subscription-detail .statistic .icon.optimizer, .subscription-detail .statistic input.optimizer[type=submit],
.subscription-detail .statistic input.optimizer[type=button],
.subscription-detail .statistic input.optimizer[type=reset],
.subscription-detail .statistic button.optimizer,
.subscription-detail .statistic blade-title.optimizer,
.subscription-detail .statistic .button a span.optimizer,
.button a .subscription-detail .statistic span.optimizer,
.advice-result .statistic .icon.optimizer,
.advice-result .statistic input.optimizer[type=submit],
.advice-result .statistic input.optimizer[type=button],
.advice-result .statistic input.optimizer[type=reset],
.advice-result .statistic button.optimizer,
.advice-result .statistic blade-title.optimizer,
.advice-result .statistic .button a span.optimizer,
.button a .advice-result .statistic span.optimizer,
.quotation .statistic .icon.optimizer,
.quotation .statistic input.optimizer[type=submit],
.quotation .statistic input.optimizer[type=button],
.quotation .statistic input.optimizer[type=reset],
.quotation .statistic button.optimizer,
.quotation .statistic blade-title.optimizer,
.quotation .statistic .button a span.optimizer,
.button a .quotation .statistic span.optimizer {
  mask-image: url("/img/icon_quotation_inverter.svg");
}
.subscription-detail .statistic .icon.battery, .subscription-detail .statistic input.battery[type=submit],
.subscription-detail .statistic input.battery[type=button],
.subscription-detail .statistic input.battery[type=reset],
.subscription-detail .statistic button.battery,
.subscription-detail .statistic blade-title.battery,
.subscription-detail .statistic .button a span.battery,
.button a .subscription-detail .statistic span.battery,
.advice-result .statistic .icon.battery,
.advice-result .statistic input.battery[type=submit],
.advice-result .statistic input.battery[type=button],
.advice-result .statistic input.battery[type=reset],
.advice-result .statistic button.battery,
.advice-result .statistic blade-title.battery,
.advice-result .statistic .button a span.battery,
.button a .advice-result .statistic span.battery,
.quotation .statistic .icon.battery,
.quotation .statistic input.battery[type=submit],
.quotation .statistic input.battery[type=button],
.quotation .statistic input.battery[type=reset],
.quotation .statistic button.battery,
.quotation .statistic blade-title.battery,
.quotation .statistic .button a span.battery,
.button a .quotation .statistic span.battery {
  mask-image: url("/img/icon_quotation_battery_large.svg");
}
.subscription-detail .statistic .icon.sun, .subscription-detail .statistic input.sun[type=submit],
.subscription-detail .statistic input.sun[type=button],
.subscription-detail .statistic input.sun[type=reset],
.subscription-detail .statistic button.sun,
.subscription-detail .statistic blade-title.sun,
.subscription-detail .statistic .button a span.sun,
.button a .subscription-detail .statistic span.sun,
.advice-result .statistic .icon.sun,
.advice-result .statistic input.sun[type=submit],
.advice-result .statistic input.sun[type=button],
.advice-result .statistic input.sun[type=reset],
.advice-result .statistic button.sun,
.advice-result .statistic blade-title.sun,
.advice-result .statistic .button a span.sun,
.button a .advice-result .statistic span.sun,
.quotation .statistic .icon.sun,
.quotation .statistic input.sun[type=submit],
.quotation .statistic input.sun[type=button],
.quotation .statistic input.sun[type=reset],
.quotation .statistic button.sun,
.quotation .statistic blade-title.sun,
.quotation .statistic .button a span.sun,
.button a .quotation .statistic span.sun {
  mask-image: url("/img/icon_quotation_sun.svg");
}
.subscription-detail .statistic .icon.leaf, .subscription-detail .statistic input.leaf[type=submit],
.subscription-detail .statistic input.leaf[type=button],
.subscription-detail .statistic input.leaf[type=reset],
.subscription-detail .statistic button.leaf,
.subscription-detail .statistic blade-title.leaf,
.subscription-detail .statistic .button a span.leaf,
.button a .subscription-detail .statistic span.leaf,
.advice-result .statistic .icon.leaf,
.advice-result .statistic input.leaf[type=submit],
.advice-result .statistic input.leaf[type=button],
.advice-result .statistic input.leaf[type=reset],
.advice-result .statistic button.leaf,
.advice-result .statistic blade-title.leaf,
.advice-result .statistic .button a span.leaf,
.button a .advice-result .statistic span.leaf,
.quotation .statistic .icon.leaf,
.quotation .statistic input.leaf[type=submit],
.quotation .statistic input.leaf[type=button],
.quotation .statistic input.leaf[type=reset],
.quotation .statistic button.leaf,
.quotation .statistic blade-title.leaf,
.quotation .statistic .button a span.leaf,
.button a .quotation .statistic span.leaf {
  mask-image: url("/img/icon_quotation_leaf.svg");
}
.subscription-detail .statistic .icon.subscription, .subscription-detail .statistic input.subscription[type=submit],
.subscription-detail .statistic input.subscription[type=button],
.subscription-detail .statistic input.subscription[type=reset],
.subscription-detail .statistic button.subscription,
.subscription-detail .statistic blade-title.subscription,
.subscription-detail .statistic .button a span.subscription,
.button a .subscription-detail .statistic span.subscription,
.advice-result .statistic .icon.subscription,
.advice-result .statistic input.subscription[type=submit],
.advice-result .statistic input.subscription[type=button],
.advice-result .statistic input.subscription[type=reset],
.advice-result .statistic button.subscription,
.advice-result .statistic blade-title.subscription,
.advice-result .statistic .button a span.subscription,
.button a .advice-result .statistic span.subscription,
.quotation .statistic .icon.subscription,
.quotation .statistic input.subscription[type=submit],
.quotation .statistic input.subscription[type=button],
.quotation .statistic input.subscription[type=reset],
.quotation .statistic button.subscription,
.quotation .statistic blade-title.subscription,
.quotation .statistic .button a span.subscription,
.button a .quotation .statistic span.subscription {
  mask-image: url("/img/icon_quotation_subscription.svg");
}
.subscription-detail .statistic .amount,
.advice-result .statistic .amount,
.quotation .statistic .amount {
  height: 35px;
  background-color: var(--secondary-color);
  width: 35px;
  border-radius: 50%;
  position: absolute;
  font-size: 12px;
  line-height: 35px;
  top: -5px;
  right: 15px;
  z-index: 5;
  color: white;
  font-weight: 900;
}
.subscription-detail .statistic p,
.advice-result .statistic p,
.quotation .statistic p {
  color: var(--secondary-color);
  padding: 0;
  line-height: 16px;
}
.subscription-detail .statistic p.number,
.advice-result .statistic p.number,
.quotation .statistic p.number {
  color: var(--primary-color);
  font-weight: 900;
  font-size: 48px;
  line-height: 96px;
  display: flex;
  justify-content: center;
}
.subscription-detail .costs,
.advice-result .costs,
.quotation .costs {
  display: flex;
  justify-content: space-between;
}
.subscription-detail .costs .text,
.advice-result .costs .text,
.quotation .costs .text {
  max-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.subscription-detail .costs .text p,
.advice-result .costs .text p,
.quotation .costs .text p {
  padding: 0;
  font-size: 18px;
}
.subscription-detail .costs .statistic,
.advice-result .costs .statistic,
.quotation .costs .statistic {
  width: auto;
  margin: 0;
}
@media (max-width: 768px) {
  .subscription-detail .costs,
  .advice-result .costs,
  .quotation .costs {
    flex-direction: column;
  }
  .subscription-detail .costs .text,
  .advice-result .costs .text,
  .quotation .costs .text {
    max-width: unset;
  }
}
.subscription-detail .image-container,
.advice-result .image-container,
.quotation .image-container {
  width: 100%;
}
.subscription-detail .image-container img,
.advice-result .image-container img,
.quotation .image-container img {
  width: 100%;
  height: auto;
}
.subscription-detail .image-container.container-header-image,
.advice-result .image-container.container-header-image,
.quotation .image-container.container-header-image {
  margin: -26px -48px 26px -48px;
  width: calc(100% + 96px);
  padding-top: 50%;
  position: relative;
  margin-bottom: 26px;
}
.subscription-detail .image-container.container-header-image img,
.advice-result .image-container.container-header-image img,
.quotation .image-container.container-header-image img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  object-fit: cover;
}
.subscription-detail .background-container,
.advice-result .background-container,
.quotation .background-container {
  background-color: white;
  width: 100%;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.16);
  position: relative;
  padding: 26px 48px 48px 48px;
}
.subscription-detail .background-container.min-height,
.advice-result .background-container.min-height,
.quotation .background-container.min-height {
  min-height: 110vh;
}
.subscription-detail * + .background-container,
.advice-result * + .background-container,
.quotation * + .background-container {
  margin-top: 48px;
}
.subscription-detail hr,
.advice-result hr,
.quotation hr {
  background-color: var(--secondary-color);
  height: 2px;
}
.subscription-detail .dynamic-energy-suppliers-table,
.advice-result .dynamic-energy-suppliers-table,
.quotation .dynamic-energy-suppliers-table {
  /*width: 100% !important;*/
}
.subscription-detail .yearly-earnings .yearly-earnings-btn,
.advice-result .yearly-earnings .yearly-earnings-btn,
.quotation .yearly-earnings .yearly-earnings-btn {
  border: var(--primary-color) 2px solid;
  border-radius: 10px;
  background-color: transparent;
  color: var(--secondary-color);
  display: inline-block;
  font-weight: 900;
  padding: 2px 54px 2px 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin-top: 22px;
}
.subscription-detail .yearly-earnings .yearly-earnings-btn:before,
.advice-result .yearly-earnings .yearly-earnings-btn:before,
.quotation .yearly-earnings .yearly-earnings-btn:before {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 36px;
  background-color: var(--primary-color);
  content: "";
}
.subscription-detail .yearly-earnings .yearly-earnings-btn:after,
.advice-result .yearly-earnings .yearly-earnings-btn:after,
.quotation .yearly-earnings .yearly-earnings-btn:after {
  position: absolute;
  top: 50%;
  right: 11px;
  content: "\f063";
  font-family: "Font Awesome 6 Pro";
  color: #FFFFFF;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
}
.subscription-detail .yearly-earnings .yearly-earnings-popup .table-wrapper,
.advice-result .yearly-earnings .yearly-earnings-popup .table-wrapper,
.quotation .yearly-earnings .yearly-earnings-popup .table-wrapper {
  overflow-x: auto;
}
.subscription-detail .yearly-earnings .yearly-earnings-popup table,
.advice-result .yearly-earnings .yearly-earnings-popup table,
.quotation .yearly-earnings .yearly-earnings-popup table {
  color: var(--secondary-color);
  margin-top: 22px;
}
.subscription-detail .yearly-earnings .yearly-earnings-popup table tr:first-of-type td,
.advice-result .yearly-earnings .yearly-earnings-popup table tr:first-of-type td,
.quotation .yearly-earnings .yearly-earnings-popup table tr:first-of-type td {
  border-top: 0;
}
.subscription-detail .yearly-earnings .yearly-earnings-popup table tr:last-of-type td,
.advice-result .yearly-earnings .yearly-earnings-popup table tr:last-of-type td,
.quotation .yearly-earnings .yearly-earnings-popup table tr:last-of-type td {
  border-bottom: 0;
}
.subscription-detail .yearly-earnings .yearly-earnings-popup table tr td,
.advice-result .yearly-earnings .yearly-earnings-popup table tr td,
.quotation .yearly-earnings .yearly-earnings-popup table tr td {
  border: 1px solid lightgray;
  text-align: center;
  padding: 0px 7px 0px 7px;
}
.subscription-detail .yearly-earnings .yearly-earnings-popup table tr td:first-of-type,
.advice-result .yearly-earnings .yearly-earnings-popup table tr td:first-of-type,
.quotation .yearly-earnings .yearly-earnings-popup table tr td:first-of-type {
  border-left: 0;
  white-space: nowrap;
}
.subscription-detail .yearly-earnings .yearly-earnings-popup table tr td:last-of-type,
.advice-result .yearly-earnings .yearly-earnings-popup table tr td:last-of-type,
.quotation .yearly-earnings .yearly-earnings-popup table tr td:last-of-type {
  border-right: 0;
}
.subscription-detail .popup,
.advice-result .popup,
.quotation .popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 1640px;
  width: calc(100vw - 48px);
  z-index: 101;
  background-color: white;
  border: 2px solid var(--primary-color);
  border-radius: 20px 0px 20px 20px;
  padding: 30px 60px 30px 60px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease-in-out;
  z-index: 999999999999999;
}
.subscription-detail .popup.opened,
.advice-result .popup.opened,
.quotation .popup.opened {
  opacity: 1;
  pointer-events: all;
}
.subscription-detail .popup .close,
.advice-result .popup .close,
.quotation .popup .close {
  position: absolute;
  right: -2px;
  top: -2px;
  background-color: var(--primary-color);
  width: 45px;
  height: 45px;
  text-align: center;
  border-radius: 0px 0px 0px 15px;
}
.subscription-detail .popup .close:before,
.advice-result .popup .close:before,
.quotation .popup .close:before {
  content: "\f00d";
  font-family: "Font Awesome 6 Pro";
  color: #FFFFFF;
  font-size: 20px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.subscription-detail .calculations-popup,
.advice-result .calculations-popup,
.quotation .calculations-popup {
  height: 70% !important;
  max-width: 90% !important;
  overflow: hidden !important;
  padding: 25px !important;
  /*top: 45.8% !important;*/
}
.subscription-detail .calculations-popup h3,
.advice-result .calculations-popup h3,
.quotation .calculations-popup h3 {
  margin-bottom: 22px;
}
.subscription-detail .calculations-popup .calculations-popup-content,
.advice-result .calculations-popup .calculations-popup-content,
.quotation .calculations-popup .calculations-popup-content {
  box-sizing: border-box;
  height: 100%;
  overflow: auto !important;
}
.subscription-detail .calculations-popup .responsive-table,
.advice-result .calculations-popup .responsive-table,
.quotation .calculations-popup .responsive-table {
  display: inline-block;
  margin: 0 auto !important;
  overflow: hidden !important;
  width: auto;
}
.subscription-detail .calculations-popup .responsive-table tr:last-child,
.advice-result .calculations-popup .responsive-table tr:last-child,
.quotation .calculations-popup .responsive-table tr:last-child {
  font-weight: bold;
}
.subscription-detail .calculations-popup table .non-dynamic-td:nth-child(3n+4),
.subscription-detail .calculations-popup table .non-dynamic-td:nth-child(3n+4),
.subscription-detail .calculations-popup table .non-dynamic-td:first-child,
.subscription-detail .calculations-popup table .non-dynamic-td:first-child,
.advice-result .calculations-popup table .non-dynamic-td:nth-child(3n+4),
.advice-result .calculations-popup table .non-dynamic-td:nth-child(3n+4),
.advice-result .calculations-popup table .non-dynamic-td:first-child,
.advice-result .calculations-popup table .non-dynamic-td:first-child,
.quotation .calculations-popup table .non-dynamic-td:nth-child(3n+4),
.quotation .calculations-popup table .non-dynamic-td:nth-child(3n+4),
.quotation .calculations-popup table .non-dynamic-td:first-child,
.quotation .calculations-popup table .non-dynamic-td:first-child {
  border-right: 1px solid #ccc;
}
.subscription-detail .calculations-popup table td:last-child,
.subscription-detail .calculations-popup table th:last-child,
.advice-result .calculations-popup table td:last-child,
.advice-result .calculations-popup table th:last-child,
.quotation .calculations-popup table td:last-child,
.quotation .calculations-popup table th:last-child {
  border-right: none;
}
.subscription-detail .quotation-energy-prices,
.advice-result .quotation-energy-prices,
.quotation .quotation-energy-prices {
  left: 50% !important;
}
.subscription-detail .portal-energy-prices,
.advice-result .portal-energy-prices,
.quotation .portal-energy-prices {
  left: calc(50% + var(--menu-width) / 2) !important;
}
.subscription-detail .popup-backdrop,
.advice-result .popup-backdrop,
.quotation .popup-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  -webkit-filter: blur(10px) brightness(90%);
  -moz-filter: blur(10px) brightness(90%);
  -ms-filter: blur(10px) brightness(90%);
  filter: blur(10px) brightness(90%);
  backdrop-filter: blur(10px) brightness(90%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease-in-out;
}
.subscription-detail .popup-backdrop.opened,
.advice-result .popup-backdrop.opened,
.quotation .popup-backdrop.opened {
  opacity: 1;
  pointer-events: all;
}
.subscription-detail .resume-information,
.advice-result .resume-information,
.quotation .resume-information {
  margin-top: 0 !important;
  text-align: right;
  width: 100%;
}
.subscription-detail .resume-information button,
.advice-result .resume-information button,
.quotation .resume-information button {
  margin-top: 96px;
}
.subscription-detail .resume-information .background-container,
.advice-result .resume-information .background-container,
.quotation .resume-information .background-container {
  text-align: left;
}
.subscription-detail .resume-information table,
.advice-result .resume-information table,
.quotation .resume-information table {
  color: #B2B4B3;
}
.subscription-detail .resume-information table tr td:first-child,
.advice-result .resume-information table tr td:first-child,
.quotation .resume-information table tr td:first-child {
  padding-right: 24px;
}
.subscription-detail .resume-information .image-container,
.advice-result .resume-information .image-container,
.quotation .resume-information .image-container {
  display: flex;
  justify-content: flex-end;
}
.subscription-detail .resume-information .image-container img,
.advice-result .resume-information .image-container img,
.quotation .resume-information .image-container img {
  max-width: 184px;
}
.subscription-detail .resume-information .circle,
.advice-result .resume-information .circle,
.quotation .resume-information .circle {
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid var(--primary-color);
  position: absolute;
  right: 70px;
  bottom: -20px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 40px;
  cursor: pointer;
}
.subscription-detail .resume-information .circle:before,
.advice-result .resume-information .circle:before,
.quotation .resume-information .circle:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f063";
  color: var(--primary-color);
  font-size: 20px;
}
.subscription-detail .resume-information .company-logo,
.advice-result .resume-information .company-logo,
.quotation .resume-information .company-logo {
  margin-bottom: 20px;
}
.subscription-detail .resume-information + .image-container,
.advice-result .resume-information + .image-container,
.quotation .resume-information + .image-container {
  margin-top: 50px;
}
.subscription-detail .resume-information .accreditation-item,
.advice-result .resume-information .accreditation-item,
.quotation .resume-information .accreditation-item {
  float: left;
  margin-right: 15px;
}
.subscription-detail .resume-information .accreditation-img,
.advice-result .resume-information .accreditation-img,
.quotation .resume-information .accreditation-img {
  vertical-align: middle;
  width: 75px;
}
.subscription-detail .aiv-image,
.advice-result .aiv-image,
.quotation .aiv-image {
  margin-top: 25px;
}
.subscription-detail .service-subscription button,
.advice-result .service-subscription button,
.quotation .service-subscription button {
  position: absolute;
  bottom: -17px;
  right: 48px;
}
.subscription-detail .service-subscription .content-container,
.advice-result .service-subscription .content-container,
.quotation .service-subscription .content-container {
  width: 100%;
  display: flex;
  align-items: stretch;
  overflow: auto;
}
.subscription-detail .service-subscription .content-container table,
.advice-result .service-subscription .content-container table,
.quotation .service-subscription .content-container table {
  width: 100%;
  line-height: 15px;
}
.subscription-detail .service-subscription .content-container table tr,
.advice-result .service-subscription .content-container table tr,
.quotation .service-subscription .content-container table tr {
  color: var(--secondary-color);
}
.subscription-detail .service-subscription .content-container table tr th,
.advice-result .service-subscription .content-container table tr th,
.quotation .service-subscription .content-container table tr th {
  width: 50px;
  padding: 10px;
}
.subscription-detail .service-subscription .content-container table tr th span,
.advice-result .service-subscription .content-container table tr th span,
.quotation .service-subscription .content-container table tr th span {
  display: inline-block;
  font-size: 25px;
}
.subscription-detail .service-subscription .content-container table tr th span:nth-child(0),
.advice-result .service-subscription .content-container table tr th span:nth-child(0),
.quotation .service-subscription .content-container table tr th span:nth-child(0) {
  transform: translateY(-90px);
}
.subscription-detail .service-subscription .content-container table tr th span:nth-child(1),
.advice-result .service-subscription .content-container table tr th span:nth-child(1),
.quotation .service-subscription .content-container table tr th span:nth-child(1) {
  transform: translateY(-10px);
}
.subscription-detail .service-subscription .content-container table tr td,
.advice-result .service-subscription .content-container table tr td,
.quotation .service-subscription .content-container table tr td {
  text-align: center;
  padding: 10px;
  width: 100px;
}
.subscription-detail .service-subscription .content-container table tr td .check:before, .subscription-detail .service-subscription .content-container table tr td .cross:before,
.advice-result .service-subscription .content-container table tr td .check:before,
.advice-result .service-subscription .content-container table tr td .cross:before,
.quotation .service-subscription .content-container table tr td .check:before,
.quotation .service-subscription .content-container table tr td .cross:before {
  font-family: "Font Awesome 6 Pro";
  color: #8ECF04;
  font-size: 24px;
  content: "\f00c";
}
.subscription-detail .service-subscription .content-container table tr td .cross:before,
.advice-result .service-subscription .content-container table tr td .cross:before,
.quotation .service-subscription .content-container table tr td .cross:before {
  color: #FF0000;
  content: "\f00d";
}
.subscription-detail .service-subscription .content-container table tr td:first-child, .subscription-detail .service-subscription .content-container table tr td:last-child,
.advice-result .service-subscription .content-container table tr td:first-child,
.advice-result .service-subscription .content-container table tr td:last-child,
.quotation .service-subscription .content-container table tr td:first-child,
.quotation .service-subscription .content-container table tr td:last-child {
  font-weight: 900;
}
.subscription-detail .take-subscription,
.advice-result .take-subscription,
.quotation .take-subscription {
  margin-left: 10px;
  border-radius: 4px;
  background-color: var(--primary-color);
  width: 100%;
  max-width: 130px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 16px 8px;
  gap: 24px;
}
.subscription-detail .take-subscription p,
.advice-result .take-subscription p,
.quotation .take-subscription p {
  padding: 0;
  text-align: center;
  color: white;
  line-height: 18px;
  font-weight: 900;
}
.subscription-detail .take-subscription p span,
.advice-result .take-subscription p span,
.quotation .take-subscription p span {
  font-size: 10px;
  font-weight: 400;
}
.subscription-detail .switch,
.advice-result .switch,
.quotation .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 23px;
}
.subscription-detail .switch input,
.advice-result .switch input,
.quotation .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.subscription-detail .switch input:checked + .slider,
.advice-result .switch input:checked + .slider,
.quotation .switch input:checked + .slider {
  background-color: yellowgreen;
}
.subscription-detail .switch input:focus + .slider,
.advice-result .switch input:focus + .slider,
.quotation .switch input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
.subscription-detail .switch input:checked + .slider:before,
.advice-result .switch input:checked + .slider:before,
.quotation .switch input:checked + .slider:before {
  -webkit-transform: translateX(17px);
  -ms-transform: translateX(17px);
  transform: translateX(17px);
}
.subscription-detail .switch .slider,
.advice-result .switch .slider,
.quotation .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}
.subscription-detail .switch .slider:before,
.advice-result .switch .slider:before,
.quotation .switch .slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  border-radius: 50%;
  transition: 0.4s;
}
.subscription-detail .accept-quotation .button-wrapper,
.advice-result .accept-quotation .button-wrapper,
.quotation .accept-quotation .button-wrapper {
  text-align: right;
}
.subscription-detail .accept-quotation .button-wrapper button,
.advice-result .accept-quotation .button-wrapper button,
.quotation .accept-quotation .button-wrapper button {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.subscription-detail .accept-quotation .button-wrapper button:hover,
.advice-result .accept-quotation .button-wrapper button:hover,
.quotation .accept-quotation .button-wrapper button:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.subscription-detail .accept-quotation .logo,
.advice-result .accept-quotation .logo,
.quotation .accept-quotation .logo {
  display: flex;
  justify-content: flex-end;
}
.subscription-detail .accept-quotation .logo img,
.advice-result .accept-quotation .logo img,
.quotation .accept-quotation .logo img {
  height: 100px;
  width: auto;
}
.subscription-detail .accept-quotation .subscriptions,
.advice-result .accept-quotation .subscriptions,
.quotation .accept-quotation .subscriptions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
}
.subscription-detail .accept-quotation .subscriptions .take-subscription,
.advice-result .accept-quotation .subscriptions .take-subscription,
.quotation .accept-quotation .subscriptions .take-subscription {
  justify-content: unset;
}
.subscription-detail .accept-quotation .subscriptions .take-subscription p,
.advice-result .accept-quotation .subscriptions .take-subscription p,
.quotation .accept-quotation .subscriptions .take-subscription p {
  color: white;
}
.subscription-detail .accept-quotation .subscriptions .take-subscription p:first-of-type,
.advice-result .accept-quotation .subscriptions .take-subscription p:first-of-type,
.quotation .accept-quotation .subscriptions .take-subscription p:first-of-type {
  flex-grow: 1;
}
.subscription-detail .tabs,
.advice-result .tabs,
.quotation .tabs {
  display: block;
}
.subscription-detail .tabs .tab,
.advice-result .tabs .tab,
.quotation .tabs .tab {
  width: 100px;
  height: 100px;
  background-color: #FFFFFF;
  display: flex;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
  transition: width 0.2s ease-in-out, margin 0.2s ease-in-out;
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.subscription-detail .tabs .tab .icon, .subscription-detail .tabs .tab input[type=submit],
.subscription-detail .tabs .tab input[type=button],
.subscription-detail .tabs .tab input[type=reset],
.subscription-detail .tabs .tab button,
.subscription-detail .tabs .tab blade-title,
.subscription-detail .tabs .tab .button a span,
.button a .subscription-detail .tabs .tab span,
.advice-result .tabs .tab .icon,
.advice-result .tabs .tab input[type=submit],
.advice-result .tabs .tab input[type=button],
.advice-result .tabs .tab input[type=reset],
.advice-result .tabs .tab button,
.advice-result .tabs .tab blade-title,
.advice-result .tabs .tab .button a span,
.button a .advice-result .tabs .tab span,
.quotation .tabs .tab .icon,
.quotation .tabs .tab input[type=submit],
.quotation .tabs .tab input[type=button],
.quotation .tabs .tab input[type=reset],
.quotation .tabs .tab button,
.quotation .tabs .tab blade-title,
.quotation .tabs .tab .button a span,
.button a .quotation .tabs .tab span {
  width: 100px;
  height: 100px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  mask-image: var(--icon);
  background-color: var(--primary-color);
  mask-size: 55px;
  mask-position: center;
  mask-repeat: no-repeat;
}
.subscription-detail .tabs .tab p,
.advice-result .tabs .tab p,
.quotation .tabs .tab p {
  display: inline-block;
  white-space: nowrap;
  padding: 0 24px 0 10px;
  color: var(--primary-color);
  font-weight: 700;
  font-size: 24px;
  line-height: 100px;
}
.subscription-detail .tabs .tab:hover,
.advice-result .tabs .tab:hover,
.quotation .tabs .tab:hover {
  width: 425px;
}
.subscription-detail .tabs .tab.active,
.advice-result .tabs .tab.active,
.quotation .tabs .tab.active {
  background-color: var(--primary-color) !important;
  margin-left: 24px;
  border-radius: 20px;
}
.subscription-detail .tabs .tab.active .icon, .subscription-detail .tabs .tab.active input[type=submit],
.subscription-detail .tabs .tab.active input[type=button],
.subscription-detail .tabs .tab.active input[type=reset],
.subscription-detail .tabs .tab.active button,
.subscription-detail .tabs .tab.active blade-title,
.subscription-detail .tabs .tab.active .button a span,
.button a .subscription-detail .tabs .tab.active span,
.advice-result .tabs .tab.active .icon,
.advice-result .tabs .tab.active input[type=submit],
.advice-result .tabs .tab.active input[type=button],
.advice-result .tabs .tab.active input[type=reset],
.advice-result .tabs .tab.active button,
.advice-result .tabs .tab.active blade-title,
.advice-result .tabs .tab.active .button a span,
.button a .advice-result .tabs .tab.active span,
.quotation .tabs .tab.active .icon,
.quotation .tabs .tab.active input[type=submit],
.quotation .tabs .tab.active input[type=button],
.quotation .tabs .tab.active input[type=reset],
.quotation .tabs .tab.active button,
.quotation .tabs .tab.active blade-title,
.quotation .tabs .tab.active .button a span,
.button a .quotation .tabs .tab.active span {
  background-color: #FFFFFF;
}
.subscription-detail .tabs .tab.active p,
.advice-result .tabs .tab.active p,
.quotation .tabs .tab.active p {
  color: #FFFFFF;
}
.subscription-detail .tabs .tab.active:hover,
.advice-result .tabs .tab.active:hover,
.quotation .tabs .tab.active:hover {
  border-radius: 20px 0 0 20px;
}
.subscription-detail .tabs .tab:first-child:hover,
.advice-result .tabs .tab:first-child:hover,
.quotation .tabs .tab:first-child:hover {
  border-radius: 20px 20px 0 20px;
}
.subscription-detail .tabs .tab:last-child:hover,
.advice-result .tabs .tab:last-child:hover,
.quotation .tabs .tab:last-child:hover {
  border-radius: 20px 0 20px 20px;
}
.subscription-detail.detail,
.advice-result.detail,
.quotation.detail {
  max-width: 1640px;
  position: relative;
  margin: 0 auto;
  display: flex;
  padding: 0 24px 48px 24px;
}
.subscription-detail.detail.overview,
.advice-result.detail.overview,
.quotation.detail.overview {
  padding-bottom: 123px;
}
.subscription-detail.detail .tabcontainer,
.advice-result.detail .tabcontainer,
.quotation.detail .tabcontainer {
  max-width: 100px;
  position: relative;
  z-index: 10;
  min-height: 100vh;
}
.subscription-detail.detail .tabcontainer .tabs,
.advice-result.detail .tabcontainer .tabs,
.quotation.detail .tabcontainer .tabs {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
}
.subscription-detail.detail .tabcontainer + .content,
.advice-result.detail .tabcontainer + .content,
.quotation.detail .tabcontainer + .content {
  word-break: break-word;
}
.subscription-detail.detail .tabcontainer .quotation-icon-inactive,
.advice-result.detail .tabcontainer .quotation-icon-inactive,
.quotation.detail .tabcontainer .quotation-icon-inactive {
  background-color: white;
  color: var(--primary-color) !important;
  display: flex;
  --fa-primary-color: var(---primary-color);
  --fa-secondary-color: var(--secondary-color);
  font-size: 35px;
  justify-content: center;
  align-items: center;
}
.subscription-detail.detail .tabcontainer .quotation-icon-active,
.advice-result.detail .tabcontainer .quotation-icon-active,
.quotation.detail .tabcontainer .quotation-icon-active {
  background-color: var(--primary-color) !important;
  color: var(--color-white);
  display: flex;
  --fa-primary-color: var(--color-white);
  --fa-secondary-color: var(--secondary-color);
  font-size: 35px;
  justify-content: center;
  align-items: center;
}
.subscription-detail.detail .content,
.advice-result.detail .content,
.quotation.detail .content {
  min-height: 100dvh;
  width: 100%;
  padding: 0 !important;
}
.subscription-detail.detail .content .content-header,
.advice-result.detail .content .content-header,
.quotation.detail .content .content-header {
  margin: 64px;
}
.subscription-detail.detail .content .content-header img,
.advice-result.detail .content .content-header img,
.quotation.detail .content .content-header img {
  height: 70px;
  width: auto;
  margin: 0 auto;
  display: block;
}
.subscription-detail.detail .content .content-wrapper,
.advice-result.detail .content .content-wrapper,
.quotation.detail .content .content-wrapper {
  width: 100%;
}
.subscription-detail.detail .content .content-tab a,
.advice-result.detail .content .content-tab a,
.quotation.detail .content .content-tab a {
  text-decoration: underline !important;
}
.subscription-detail.template-wrapper,
.advice-result.template-wrapper,
.quotation.template-wrapper {
  display: flex;
  position: relative;
  justify-content: center;
}
.subscription-detail.template-wrapper .tabs-wrapper,
.advice-result.template-wrapper .tabs-wrapper,
.quotation.template-wrapper .tabs-wrapper {
  position: relative;
  width: 390px;
  z-index: 10;
}
.subscription-detail.template-wrapper .tabs,
.advice-result.template-wrapper .tabs,
.quotation.template-wrapper .tabs {
  margin-right: 24px;
  height: auto;
  position: sticky;
  top: 20%;
}
.subscription-detail.template-wrapper .tabs .tab,
.advice-result.template-wrapper .tabs .tab,
.quotation.template-wrapper .tabs .tab {
  width: calc(100% + 24px);
}
.subscription-detail.template-wrapper .tabs .tab:hover,
.advice-result.template-wrapper .tabs .tab:hover,
.quotation.template-wrapper .tabs .tab:hover {
  width: calc(100% + 24px);
}
.subscription-detail.template-wrapper .tabs .tab:first-child:hover,
.advice-result.template-wrapper .tabs .tab:first-child:hover,
.quotation.template-wrapper .tabs .tab:first-child:hover {
  border-radius: 20px 0 0 20px;
}
.subscription-detail.template-wrapper .tabs .tab:last-child:hover,
.advice-result.template-wrapper .tabs .tab:last-child:hover,
.quotation.template-wrapper .tabs .tab:last-child:hover {
  border-radius: 20px 0 0 20px;
}
.subscription-detail.template-wrapper .tabs .tab.active,
.advice-result.template-wrapper .tabs .tab.active,
.quotation.template-wrapper .tabs .tab.active {
  width: 100%;
  border-radius: 20px 0 0 20px;
}
.subscription-detail.template-wrapper .content,
.advice-result.template-wrapper .content,
.quotation.template-wrapper .content {
  margin: 0 !important;
  flex-grow: 1;
  max-width: 1640px !important;
  padding: 0 !important;
}
.subscription-detail.template-wrapper .content .content-header,
.advice-result.template-wrapper .content .content-header,
.quotation.template-wrapper .content .content-header {
  margin: 48px;
}
.subscription-detail.template-wrapper .content .content-header img,
.advice-result.template-wrapper .content .content-header img,
.quotation.template-wrapper .content .content-header img {
  height: 70px;
  width: auto;
  margin: 0 auto;
  display: block;
}
.subscription-detail.template-wrapper:not(.template-editor) > .sunned-editor .editor-row .editor-canvas #gjs,
.advice-result.template-wrapper:not(.template-editor) > .sunned-editor .editor-row .editor-canvas #gjs,
.quotation.template-wrapper:not(.template-editor) > .sunned-editor .editor-row .editor-canvas #gjs {
  padding-bottom: 62px;
}
.subscription-detail.template-wrapper:not(.template-editor) > .sunned-editor .editor-row .editor-panel-wrapper,
.advice-result.template-wrapper:not(.template-editor) > .sunned-editor .editor-row .editor-panel-wrapper,
.quotation.template-wrapper:not(.template-editor) > .sunned-editor .editor-row .editor-panel-wrapper {
  flex-basis: var(--editor-panel-right-width);
  padding-bottom: 62px;
  height: calc(var(--editor-height) - var(--editor-panel-top-height));
}
.subscription-detail.template-wrapper:not(.template-editor) > .sunned-editor .editor-row .editor-panel-right,
.advice-result.template-wrapper:not(.template-editor) > .sunned-editor .editor-row .editor-panel-right,
.quotation.template-wrapper:not(.template-editor) > .sunned-editor .editor-row .editor-panel-right {
  height: 100%;
  width: 100%;
}
.subscription-detail.template-wrapper.template-editor,
.advice-result.template-wrapper.template-editor,
.quotation.template-wrapper.template-editor {
  display: block;
}
.subscription-detail.template-wrapper.template-editor > .sunned-editor .editor-row .editor-panel-wrapper,
.advice-result.template-wrapper.template-editor > .sunned-editor .editor-row .editor-panel-wrapper,
.quotation.template-wrapper.template-editor > .sunned-editor .editor-row .editor-panel-wrapper {
  flex-basis: var(--editor-panel-right-width);
  height: calc(var(--editor-height) - var(--editor-panel-top-height));
}
.subscription-detail.template-wrapper.template-editor > .sunned-editor .editor-row .editor-panel-right,
.advice-result.template-wrapper.template-editor > .sunned-editor .editor-row .editor-panel-right,
.quotation.template-wrapper.template-editor > .sunned-editor .editor-row .editor-panel-right {
  height: 100%;
  width: 100%;
}

.tab-content .quotation.detail {
  max-width: 1640px;
  position: relative;
  margin: 0 auto;
  display: flex;
  padding: 0 24px 48px 24px;
}
.tab-content .quotation.detail.overview {
  padding-bottom: 123px;
}
.tab-content .quotation.detail .tabcontainer {
  max-width: 100px;
  position: relative;
  z-index: 4;
  min-height: 100vh;
}
.tab-content .quotation.detail .tabcontainer .tabs {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
}
.tab-content .quotation.detail .content {
  min-height: 100dvh;
  width: 100%;
  padding: 0 !important;
  position: relative;
  z-index: 3;
}
.tab-content .quotation.detail .content .content-header {
  display: none;
  margin: 64px;
}
.tab-content .quotation.detail .content .content-header img {
  height: 70px;
  width: auto;
  margin: 0 auto;
  display: block;
}
.tab-content .quotation.detail .content .content-wrapper {
  top: unset;
  width: 100%;
  margin: unset;
  position: relative;
}

.box-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}
.box-wrapper::before, .box-wrapper::after {
  content: "";
  display: block;
  -webkit-box-flex: 1;
  box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  height: 24px;
}

.blade-editors {
  background: var(--color-blue20);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  cursor: unset;
}
.blade-editors .blade-editor {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;
  background-color: var(--color-white);
  border-top: var(--progress-bar-height) solid var(--color-blue);
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3);
  transform: translateX(100%);
  min-height: 100%;
  height: 100vh;
  float: right;
}
.blade-editors .blade-editor .blade-editor-header {
  border-bottom: 1px solid var(--color-blue15);
  position: relative;
}
.blade-editors .blade-editor .blade-editor-header p {
  line-height: 32px;
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  padding: 16px 65px 15px 65px;
}
.blade-editors .blade-editor .blade-editor-header .close {
  display: none;
  visibility: hidden;
}
.blade-editors .blade-editor .blade-editor-container {
  flex: 1 0;
  background: var(--backgroundColor);
  overflow-y: auto;
  margin-bottom: 82px;
  padding: 10px 64px 32px 64px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.blade-editors .blade-editor .blade-editor-container::-webkit-scrollbar {
  display: none;
}
.blade-editors .blade-editor .blade-editor-container .content-block {
  margin: 12px;
}
.blade-editors .blade-editor .blade-editor-container .buttons {
  right: 0;
  bottom: 0;
  left: 0;
  padding: 23px 64px 24px 64px;
  position: fixed;
  background: var(--color-blue5);
  border-top: 1px solid var(--color-blue15);
  z-index: 1;
}
.blade-editors .blade-editor .blade-editor-container .buttons .input-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: end;
}
.blade-editors .blade-editor .blade-editor-container .buttons .input-wrapper button:not(:first-child) {
  margin-left: 16px;
}
.blade-editors .blade-editor .blade-editor-container .buttons .input-wrapper button:first-child {
  margin-right: auto;
}
.blade-editors .blade-editor .blade-editor-container .responsive-table table tbody tr td.buttons {
  padding: 6px 12px;
}
.blade-editors .blade-editor .blade-editor-container .responsive-table table tbody tr td .dummy-checkbox {
  width: 24px;
  height: 24px;
  margin: 5px;
  border: 1px solid var(--color-blue15);
  border-radius: 3px;
  position: relative;
}
.blade-editors .blade-editor .blade-editor-container .responsive-table table tbody tr td .dummy-checkbox.checked::before {
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: var(--color-blue);
  border-radius: 2px;
  content: "";
  position: absolute;
}
.blade-editors .blade-editor .blade-editor-container .responsive-table table tbody tr td .dummy-checkbox.checked::after {
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-family: "Font Awesome 6 Pro";
  text-align: center;
  color: #FFFFFF;
  content: "\f00c";
  position: absolute;
  z-index: 2;
}
.blade-editors .blade-editor .blade-editor-container .responsive-table table tbody tr td .dummy-checkbox.unchecked {
  position: relative;
}
.blade-editors .blade-editor .blade-editor-container .responsive-table table tbody tr td .dummy-checkbox.unchecked:hover::before {
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: var(--color-blue40);
  border-radius: 2px;
  content: "";
  position: absolute;
}
.blade-editors .blade-editor .blade-editor-container .responsive-table .buttons {
  right: unset;
  bottom: unset;
  left: unset;
  padding: unset;
  position: relative;
  background: unset;
  border-top: unset;
  z-index: 1;
}
.blade-editors .blade-editor .blade-editor-container .responsive-table .buttons .input-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: end;
}
.blade-editors .blade-editor .blade-editor-container .responsive-table .buttons .input-wrapper button:not(:first-child) {
  margin-left: 16px;
}
.blade-editors .blade-editor .blade-editor-container .responsive-table .buttons .input-wrapper button:first-child {
  margin-right: auto;
}
.blade-editors .blade-editor--blue .blade-editor-container {
  background-color: var(--color-blue5);
}
.blade-editors .blade-editor--small {
  width: calc(100% - var(--menu-visible-width-open) - var(--menu-visible-width));
  will-change: transform;
  left: auto;
}
.blade-editors .blade-editor--mini {
  width: 30%;
  min-width: 350px;
  will-change: transform;
  left: auto;
}
.blade-editors .blade-editor--big {
  width: 50%;
  will-change: transform;
  left: auto;
}
.blade-editors .blade-editor--slim {
  width: calc(70% - var(--menu-visible-width-open) - var(--menu-visible-width));
  will-change: transform;
  left: auto;
}
.blade-editors.expanded {
  opacity: 1;
  pointer-events: all;
}
.blade-editors.expanded .blade-editor {
  transform: translateX(0%);
}

.gallery .folders {
  padding-top: 22px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.gallery .folders .folder {
  background-color: var(--color-blue5);
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 10px;
}
.gallery .folders .folder span {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
}
.gallery .folders .folder span i {
  line-height: unset;
}
.gallery .folders .folder .action {
  visibility: hidden;
}
.gallery .folders .folder:hover .action {
  visibility: visible;
}

.drag-enter {
  background-color: var(--color-blue20) !important;
}
.drag-enter a > span {
  background-color: var(--color-blue20) !important;
}

.gallery-assets {
  padding-top: 22px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.gallery-assets.use-5-rows {
  grid-template-columns: repeat(5, 1fr);
}
.gallery-assets.use-4-rows {
  grid-template-columns: repeat(4, 1fr);
}
.gallery-assets.use-3-rows {
  grid-template-columns: repeat(3, 1fr);
}
.gallery-assets.use-2-rows {
  grid-template-columns: repeat(2, 1fr);
}
.gallery-assets.use-1-row {
  grid-template-columns: repeat(1, 1fr);
}
.gallery-assets .gallery-asset {
  background-color: var(--color-white);
  border: 1px solid var(--button-secondary-border);
  position: relative;
  cursor: pointer;
}
.gallery-assets .gallery-asset .file {
  position: relative;
  padding-top: 56.25%;
  background-color: var(--color-white);
  width: 100%;
}
.gallery-assets .gallery-asset .file img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gallery-assets .gallery-asset .file i {
  font-size: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gallery-assets .gallery-asset .file .text {
  padding: 50% 10px 10px 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.gallery-assets .gallery-asset .file .text:before {
  content: "\f15b";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 30px;
  color: var(--primary-color);
}
.gallery-assets .gallery-asset .file .text p {
  padding: 0 !important;
  text-align: center;
  word-break: break-word;
  font-size: 13px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gallery-assets .gallery-asset .file .remove-file {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: var(--baseColor);
  border-radius: 50%;
  color: var(--linkColor);
  cursor: pointer;
}
.gallery-assets .gallery-asset .file .remove-file:hover {
  background-color: var(--backgroundColor);
}
.gallery-assets .gallery-asset .gallery-asset-content {
  height: auto;
  text-align: center;
  font-weight: bold;
  padding: 10px;
  border-top: 1px solid var(--button-secondary-border);
  word-break: break-word;
  line-height: 18px;
}
.gallery-assets .gallery-asset .gallery-asset-icon {
  color: var(--color-black60);
  font-size: 100px;
  left: calc(50% - 50px);
  position: absolute;
  top: calc(50% - 50px);
}
.gallery-assets .gallery-asset:hover {
  background-color: var(--color-blue5);
}

@media (max-width: 1180px) {
  .gallery .folders {
    grid-template-columns: repeat(4, 1fr);
  }
  .gallery-assets {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 820px) {
  .gallery .folders {
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery-assets {
    grid-template-columns: repeat(3, 1fr);
  }
}
.userRowEditButton {
  display: none;
}

.userRow:hover .userRowEditButton {
  display: inline-block;
}

.userRow:hover .userRowUsername {
  display: none;
}

/*
.overview-row {
	cursor: pointer !important;

	&.action-required {
		background-color: #ffe3c8;

		&.action-for-you {
			background-color: #ffaf63;
		}
	}

	+ tr:not(.overview-row):last-child {
		background-color: unset;
	}
}

.overview-row:hover {
	background-color: var(--color-dark-grey) !important;
	color: white;
	transition: background-color linear var(--transition-time);
}
*/
.color-box {
  border: 1px solid var(--color-black);
  border-radius: var(--ck-border-radius);
  float: left;
  height: 20px;
  width: 20px;
}

.color-input-wrapper {
  display: flex;
  width: 100%;
}

.color-field {
  display: flex;
  align-items: center;
}

.color-field > label, input {
  margin-right: 5px;
}

.file-uploader {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.file-uploader .upload {
  position: relative;
  flex-basis: 20%;
}
.file-uploader .upload input {
  display: none;
}
.file-uploader .upload input:disabled + label {
  cursor: default;
}
.file-uploader .upload input:disabled + label:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.05);
}
.file-uploader .upload .dropzone {
  border: dashed rgba(0, 0, 0, 0.1019607843) 2px;
  padding: 10px 24px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  display: block;
  position: relative;
}
.file-uploader .upload .dropzone label {
  display: block;
  visibility: visible;
  background-color: unset;
}
.file-uploader .upload .dropzone * {
  pointer-events: none;
}
.file-uploader .upload .dropzone:hover {
  border-color: rgba(0, 0, 0, 0.1647058824);
}
.file-uploader .upload .dropzone.hovered {
  background-color: var(--secondaryColor);
  border-color: var(--secondaryColor);
}
.file-uploader .upload .dropzone.hovered * {
  color: #FFFFFF;
}
.file-uploader .upload .file {
  position: relative;
  padding-top: 100%;
  width: 100%;
  background-color: var(--backgroundColor50);
}
.file-uploader .upload .file img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-uploader .upload .file .text {
  padding: 50% 10px 10px 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.file-uploader .upload .file .text:before {
  content: "\f15b";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 30px;
  color: var(--primary-color);
}
.file-uploader .upload .file .text p {
  padding: 0 !important;
  text-align: center;
  word-break: break-word;
  font-size: 13px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.file-uploader .upload .file .remove-file {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: var(--baseColor);
  border-radius: 50%;
  color: var(--linkColor);
  cursor: pointer;
}
.file-uploader .upload .file .remove-file:hover {
  background-color: var(--backgroundColor);
}
.file-uploader .upload.new-upload {
  flex-basis: 100%;
}
.file-uploader .upload:not(.new-upload) {
  max-width: 200px;
}

.tabs {
  display: grid;
}
.tabs .tab-content {
  height: 100%;
}
.tabs .tab {
  height: 100%;
}
.tabs #aiv-container {
  height: calc(100vh - var(--header-height) - 82px);
}

.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--color-light-grey) !important;
}

.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
  border-color: var(--color-light-grey) !important;
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners {
  border-color: var(--color-light-grey) !important;
}

.ck.ck-editor__editable_inline > :first-child {
  padding: 0 !important;
}

.ck.ck-button, a.ck.ck-button {
  border: 1px solid var(--button-secondary-border) !important;
  transition: all linear var(--transition-time) !important;
  cursor: pointer !important;
}
.ck.ck-button:hover, a.ck.ck-button:hover {
  border-color: var(--button-primary-border-hover) !important;
}
.ck.ck-button.ck-on, a.ck.ck-button.ck-on {
  background-color: var(--color-blue) !important;
  border-color: var(--color-blue) !important;
  color: var(--color-white) !important;
}
.ck.ck-button.ck-on:hover, a.ck.ck-button.ck-on:hover {
  background-color: var(--color-orange) !important;
  border-color: var(--color-orange) !important;
  color: var(--color-black) !important;
}

.gjs-cv-canvas-bg {
  background-color: var(--color-blue5) !important;
}

.gjs-one-bg {
  background-color: var(--color-white) !important;
}

.gjs-two-color {
  color: var(--color-black60) !important;
}

.gjs-four-color {
  color: var(--color-blue) !important;
}

.gjs-blocks-c {
  margin-bottom: 18px;
}

.gjs-mdl-content {
  max-height: 60vh;
  overflow: auto;
}
.gjs-mdl-content button {
  margin-top: 10px;
  border: none;
  background-color: var(--button-primary);
  color: var(--button-secondary);
}
.gjs-mdl-content button:hover {
  background-color: var(--button-primary-hover);
}
.gjs-mdl-content .gallery-assets {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gjs-mdl-content .folders {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gjs-pn-panel {
  align-items: center;
}
.gjs-pn-panel .gjs-pn-buttons .gjs-pn-btn:last-of-type {
  margin-right: 0 !important;
}

.gjs-no-app {
  height: unset !important;
}

.sunned-editor {
  /*height: var(--editor-height);*/
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
}
.sunned-editor .editor-panel-top {
  padding: 0;
  width: 100%;
  height: var(--editor-panel-top-height);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-blue15);
  display: flex;
  position: initial;
  justify-content: center;
  justify-content: space-between;
}
.sunned-editor .editor-panel-top .panel-top-basic-actions {
  padding: 17px 24px 16px 24px;
  position: initial;
}
.sunned-editor .editor-panel-top .panel-top-devices {
  padding: 17px 24px 16px 24px;
  position: initial;
}
.sunned-editor .editor-panel-top .panel-top-switcher {
  padding: 17px 24px 16px 24px;
  position: initial;
}
.sunned-editor .editor-row {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
}
.sunned-editor .editor-row .editor-canvas {
  flex-grow: 1;
}
.sunned-editor .editor-row .editor-canvas #gjs {
  height: 100%;
}
.sunned-editor .editor-row .editor-canvas #gjs .gjs-cv-canvas {
  top: 0;
  width: 100%;
  height: 100%;
}
.sunned-editor .editor-row .editor-canvas #gjs .token-table table {
  table-layout: fixed;
  width: 100%;
}
.sunned-editor .editor-row .editor-canvas #gjs .token-table tr {
  cursor: pointer;
  width: 100%;
}
.sunned-editor .editor-row .editor-canvas #gjs .token-table td {
  max-width: 50%;
  white-space: pre-wrap !important;
  width: 50%;
}
.sunned-editor .editor-row .editor-canvas #gjs .tokens {
  padding: 0;
  margin: 0;
  grid-template-columns: 1fr 1fr 1fr;
}
.sunned-editor .editor-row .editor-canvas #gjs .tokens li {
  list-style-type: none;
  cursor: pointer;
  padding: 0 5px;
}
.sunned-editor .editor-row .editor-canvas #gjs .tokens li:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}
.sunned-editor .editor-row .editor-canvas #gjs .tokens img {
  max-width: 200px;
}
.sunned-editor .editor-row .editor-panel-wrapper {
  flex-basis: var(--editor-panel-right-width);
}
.sunned-editor .editor-row .editor-panel-wrapper .editor-panel-right {
  padding: 6px 24px 24px 24px;
  border-left: 1px solid var(--color-blue15);
  flex-basis: var(--editor-panel-right-width);
  height: calc(var(--editor-height) - var(--editor-panel-top-height));
  position: relative;
  overflow-y: auto;
}
.sunned-editor .editor-row .editor-panel-wrapper .editor-panel-right .gjs-block {
  width: 100%;
  line-height: 32px;
  margin: 18px 0 0 0;
  padding: 0 16px;
  min-height: unset;
  box-shadow: unset;
  border-color: var(--button-secondary-border);
  border-radius: 4px;
  transition: all linear var(--transition-time);
}
.sunned-editor .editor-row .editor-panel-wrapper .editor-panel-right .gjs-block .gjs-block-label {
  line-height: unset;
}
.sunned-editor .editor-row .editor-panel-wrapper .editor-panel-right .gjs-block:hover {
  border-color: var(--button-primary-border-hover);
  color: unset;
}

.columns {
  max-width: 1640px;
  margin: 0 auto;
  display: grid;
  box-sizing: content-box;
  gap: 50px;
}
.columns.columns_1 {
  grid-template-columns: minmax(0, 1fr);
}
.columns.columns_2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1366px) {
  .columns.columns_2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.columns.columns_2_main {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
@media (max-width: 1366px) {
  .columns.columns_2_main {
    grid-template-columns: minmax(0, 1fr);
  }
}
.columns.columns_3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1366px) {
  .columns.columns_3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.columns.columns_4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1366px) {
  .columns.columns_4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 992px) {
  .columns.columns_4 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.columns .column {
  min-height: 64px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 5px;
  margin-top: 5px;
  flex: 0 0 auto;
}

.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  border-radius: 8px;
  overflow: hidden;
}
.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.help-item > iframe {
  border-radius: 10px;
  display: block;
  width: 100%;
}

.help-item > ul {
  background-color: var(--color-light-blue);
  border-radius: 10px;
  display: inline-block;
  list-style-type: none;
  margin-top: 1.5rem !important;
  padding: 5px;
  width: 100%;
}

.print-view {
  display: none;
  visibility: hidden;
}

.overview-dropdown {
  margin-top: 15px !important;
}

.overview-aiv-images {
  display: flex;
  flex-wrap: wrap;
}

.overview-aiv-images .col-lg-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.overview-aiv-images .section {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.overview-aiv-images .overview-aiv-image > img {
  display: block;
  margin: 0 auto;
  width: 100%;
}

.fa-check {
  color: var(--color-green70);
}

.fa-xmark {
  color: var(--color-red);
}

.fa-triangle-exclamation {
  color: var(--color-red70);
}

.product-warning {
  background-color: var(--color-red);
  border-radius: 4px;
  color: var(--color-white);
  margin-left: 5px;
  padding: 5px;
}

.unique-style {
  /*REWRITE VARIABLES.*/
}
.unique-style * {
  --primary-color: var(--primary-us-color);
  --secondary-color: var(--secondary-us-color);
  --tertiary-color: var(--tertiary-us-color);
}
.unique-style.box-wrapper {
  background: linear-gradient(135deg, var(--tertiary-us-color) 0%, var(--secondary-us-color) 50%, var(--primary-us-color) 100%);
}
.unique-style.box-wrapper .button-bar {
  background-color: white;
  width: 100%;
  height: 75px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5019607843);
  transition: 250ms ease-in opacity;
}
.unique-style.box-wrapper .button-bar p {
  max-width: 350px;
  padding: 5px 0px 5px 15px;
  color: #a5a5a5;
  line-height: 18px;
}
.unique-style.box-wrapper .button-bar div {
  display: flex;
  gap: 15px;
  padding-right: 15px;
}
.unique-style.box-wrapper .button-bar button {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  margin-top: 0;
}
.unique-style.box-wrapper .button-bar button:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.unique-style.box-wrapper .button-bar:hover {
  opacity: 1;
}
.unique-style.box-wrapper .box.paper {
  width: 762px;
  max-width: unset;
  min-width: unset;
  background: #fff;
  padding: 32px 92px;
  margin: 32px auto;
  margin-bottom: 80px;
  border-radius: 4px;
}
.unique-style.box-wrapper .box.paper img {
  max-width: 100%;
}
.unique-style .image-section {
  margin: auto;
}
.unique-style .image-section img {
  max-width: 25%;
  margin: auto;
  display: block;
}
.unique-style .primary-us-color {
  color: var(--primary-us-color);
}
.unique-style .secondary-us-color {
  color: var(--secondary-us-color);
}
.unique-style .tertiary-us-color {
  color: var(--tertiary-us-color);
}
.unique-style input[type=submit] {
  border-color: var(--primary-us-color);
  background-color: var(--primary-us-color);
}
.unique-style input[type=submit]:hover {
  border-color: var(--secondary-us-color);
  background-color: var(--secondary-us-color);
}

.advice-page {
  /*REWRITE VARIABLES.*/
}
.advice-page.box-wrapper .button-bar {
  background-color: white;
  width: 100%;
  height: 75px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5019607843);
  transition: 250ms ease-in opacity;
}
.advice-page.box-wrapper .button-bar p {
  max-width: 350px;
  padding: 5px 0px 5px 15px;
  color: #a5a5a5;
  line-height: 18px;
}
.advice-page.box-wrapper .button-bar div {
  display: flex;
  gap: 15px;
  padding-right: 15px;
}
.advice-page.box-wrapper .button-bar:hover {
  opacity: 1;
}
.advice-page.box-wrapper .box.paper {
  width: 762px;
  max-width: unset;
  min-width: unset;
  background: #fff;
  padding: 32px 92px;
  margin: 32px auto;
  margin-bottom: 80px;
  border-radius: 4px;
}
.advice-page.box-wrapper .box.paper img {
  max-width: 100%;
}
.advice-page .image-section {
  margin: auto;
}
.advice-page .image-section img {
  max-width: 25%;
  margin: auto;
  display: block;
}
.advice-page .primary-us-color {
  color: var(--primary-us-color);
}
.advice-page .secondary-us-color {
  color: var(--secondary-us-color);
}
.advice-page .tertiary-us-color {
  color: var(--tertiary-us-color);
}
.advice-page input[type=submit] {
  border-color: var(--primary-us-color);
  background-color: var(--primary-us-color);
}
.advice-page input[type=submit]:hover {
  border-color: var(--secondary-us-color);
  background-color: var(--secondary-us-color);
}
.advice-page .advice-comment, .advice-page .advice-message {
  width: 822px;
  max-width: unset;
  min-width: unset;
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 4px;
}

.landingspage {
  background-color: var(--color-blue5);
  border-radius: 4px;
  padding: 10px;
}

.logo-section {
  background-color: white !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
}

.variable-editor .editable {
  border-bottom: dotted black 1px;
  cursor: pointer;
}
.variable-editor.blade-editor-content .conditional-wrapper {
  margin-bottom: 24px;
}
.variable-editor.blade-editor-content .conditional-wrapper .conditional-title {
  font-weight: bold;
  font-size: 24px;
}
.variable-editor.blade-editor-content .root-editor-wrap .editor-wrap {
  margin: 16px 0;
}
.variable-editor.blade-editor-content .root-editor-wrap .editor-wrap .form-group {
  padding-top: 0;
}
.variable-editor.blade-editor-content .rangevalueTableEditor input,
.variable-editor.blade-editor-content .keyvalueTableEditor input {
  height: unset;
  padding: 0;
  margin: 0;
  font-weight: normal;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper {
  display: flex;
  gap: 6px;
  flex-flow: wrap;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .add-node {
  border: dashed #c9c9c9 1px;
  border-radius: 4px;
  padding: 0 12px;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node {
  position: relative;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node .variable,
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node .expression,
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node .operator {
  padding: 0px;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node select {
  padding: 0px 14px;
  margin: 0;
  height: unset;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  font-weight: 500;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node:hover .expression-node-actions {
  opacity: 1;
  top: -5px;
  pointer-events: all;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node .undefined-node {
  display: flex;
  gap: 4px;
  padding: 2px;
  background: rgba(0, 0, 0, 0.0784313725);
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node .undefined-node .new-node-title {
  line-height: 26px;
  font-size: 11px;
  display: inline-block;
  margin: 0 4px;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node .undefined-node .new-node {
  cursor: pointer;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 5px;
  background: var(--button-primary-hover);
  border: solid rgba(0, 0, 0, 0.1450980392) 1px;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node .expression-node-actions {
  pointer-events: none;
  opacity: 0;
  position: absolute;
  top: 0px;
  right: 0;
  transform: translate(50%, -50%);
  background: #ffffff;
  border: solid rgba(0, 0, 0, 0.2588235294) 1px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1254901961);
  line-height: 0;
  display: flex;
  z-index: 11;
  border-radius: 20px;
  transition: all 0.3s;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node .expression-node-actions i {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node .expression-node-actions i:first-of-type {
  border-radius: 100% 0 0 100%;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node .expression-node-actions i:last-of-type {
  border-radius: 0 100% 100% 0;
}
.variable-editor.blade-editor-content .expressionEditor .expression-node-wrapper .expression-node .expression-node-actions i:hover {
  background-color: var(--button-primary-hover);
}
.variable-editor .responsive-table table tbody tr {
  position: relative;
}
.variable-editor .responsive-table table tbody tr:hover .variable-actions {
  opacity: 1;
}
.variable-editor .responsive-table table tbody tr:hover.input .variable-wrapper:after {
  opacity: 0.5;
}
.variable-editor .responsive-table table tbody tr .variable-input .form-group {
  margin: 0;
  padding: 0;
}
.variable-editor .responsive-table table tbody tr .variable-input .form-group input {
  padding: 0 16px;
  background: unset;
}
.variable-editor .responsive-table table tbody tr.input .variable-name-wrapper .variable-name, .variable-editor .responsive-table table tbody tr.shared_variable .variable-name-wrapper .variable-name, .variable-editor .responsive-table table tbody tr.output .variable-name-wrapper .variable-name {
  display: flex;
  flex-direction: column;
  line-height: 20px;
  font-weight: bold;
}
.variable-editor .responsive-table table tbody tr.input .variable-name-wrapper .variable-name .variable-description, .variable-editor .responsive-table table tbody tr.shared_variable .variable-name-wrapper .variable-name .variable-description, .variable-editor .responsive-table table tbody tr.output .variable-name-wrapper .variable-name .variable-description {
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: normal;
}
.variable-editor .responsive-table table tbody tr.output .variable-name-wrapper {
  border-left: solid lime 5px;
}
.variable-editor .responsive-table table tbody tr.shared_variable .variable-name-wrapper {
  border-left: solid #00c4ff 5px;
}
.variable-editor .responsive-table table tbody tr.shared_variable .shared-wrapper span {
  font-weight: bold;
}
.variable-editor .responsive-table table tbody tr.input .variable-wrapper {
  position: relative;
}
.variable-editor .responsive-table table tbody tr.input .variable-wrapper:after {
  content: "* Dit is een testwaarde";
  position: absolute;
  right: -8px;
  transform: translateX(100%);
  font-size: 10px;
  opacity: 0;
}
.variable-editor .responsive-table table tbody tr.input .variable-name-wrapper {
  border-left: solid red 5px;
}
.variable-editor .responsive-table table tbody tr.fakerow.total {
  color: #63903f;
  background: #ddeddb;
  border-left: solid 5px black;
  border-color: #ddeddb;
}
.variable-editor .variable-name-wrapper {
  width: 200px;
}
.variable-editor table tbody tr {
  background: unset;
}
.variable-editor .variable-wrapper,
.variable-editor .variable-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.variable-editor .variable-wrapper .variable-actions,
.variable-editor .variable-row .variable-actions {
  background: #ffffff;
  border: solid rgba(0, 0, 0, 0.2588235294) 1px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1254901961);
  line-height: 0;
  display: flex;
  z-index: 11;
  border-radius: 20px;
  transition: all 0.3s;
  opacity: 0;
}
.variable-editor .variable-wrapper .variable-actions i,
.variable-editor .variable-row .variable-actions i {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
}
.variable-editor .variable-wrapper .variable-actions i:first-of-type,
.variable-editor .variable-row .variable-actions i:first-of-type {
  border-radius: 100% 0 0 100%;
}
.variable-editor .variable-wrapper .variable-actions i:last-of-type,
.variable-editor .variable-row .variable-actions i:last-of-type {
  border-radius: 0 100% 100% 0;
}
.variable-editor .variable-wrapper .variable-actions i:hover,
.variable-editor .variable-row .variable-actions i:hover {
  background-color: var(--button-primary-hover);
}
.variable-editor .condition-line .condition {
  color: rgba(0, 0, 0, 0.5019607843);
  font-size: 12px;
  line-height: 12px;
}
.variable-editor .condition-line .variable-row {
  padding: 6px 0;
}
.variable-editor .variable-errors ul {
  margin-bottom: 0;
  list-style: none;
  padding: 0;
}
.variable-editor .variable-errors ul li {
  background: rgba(255, 0, 0, 0.1450980392);
  border-bottom: solid rgba(255, 0, 0, 0.3764705882) 2px;
  margin-top: 4px;
  padding: 2px 8px;
}
.variable-editor .variable-output {
  color: #63903f;
  font-size: 12px;
  font-family: consolas;
  display: inline-block;
  line-height: 12px;
  padding: 2px 6px;
  margin: 0;
  background: #ddeddb;
}
.variable-editor .variable-wrapper > div {
  flex: 1;
}
.variable-editor .variable-wrapper > .expression,
.variable-editor .variable-wrapper > .expressionEditor {
  display: flex;
  gap: 6px;
}
.variable-editor .variable-wrapper > .expression .keyword,
.variable-editor .variable-wrapper > .expression .constant,
.variable-editor .variable-wrapper > .expression .operator,
.variable-editor .variable-wrapper > .expression .expression,
.variable-editor .variable-wrapper > .expression .undefined,
.variable-editor .variable-wrapper > .expression .variable,
.variable-editor .variable-wrapper > .expressionEditor .keyword,
.variable-editor .variable-wrapper > .expressionEditor .constant,
.variable-editor .variable-wrapper > .expressionEditor .operator,
.variable-editor .variable-wrapper > .expressionEditor .expression,
.variable-editor .variable-wrapper > .expressionEditor .undefined,
.variable-editor .variable-wrapper > .expressionEditor .variable {
  padding: 0px 6px;
  border-bottom: solid #c8c8c8 2px;
  line-height: 24px;
  min-width: 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.062745098);
}
.variable-editor .variable-wrapper > .expression .variable,
.variable-editor .variable-wrapper > .expressionEditor .variable {
  border-color: #e2befa;
}
.variable-editor .variable-wrapper > .expression .expression,
.variable-editor .variable-wrapper > .expressionEditor .expression {
  border-color: #ffdd8f;
}
.variable-editor .variable-wrapper > .expression .undefined,
.variable-editor .variable-wrapper > .expressionEditor .undefined {
  border-color: rgba(255, 255, 255, 0.4392156863);
}
.variable-editor .field-editor {
  position: absolute;
  left: 50%;
  z-index: 10;
  padding: 12px;
  min-width: 250px;
  background: red;
  transform: translate(-50%, 16px);
}
.variable-editor .field-editor:after {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 6px 12px 6px;
  border-color: transparent transparent #FF4532 transparent;
  transform: rotate(0deg);
}

@keyframes rotation {
  from {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(2);
  }
  to {
    transform: rotate(359deg) scale(1);
  }
}
@keyframes rotation-with-transform {
  from {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(2);
  }
  to {
    transform: translate(-50%, -50%) rotate(359deg) scale(1);
  }
}
@media (max-width: 576px) {
  :root {
    --progress-bar-height: 4px;
  }
  #progress_bar {
    min-width: unset;
  }
  .quotation .statistic-container {
    min-height: 50px;
    flex-direction: column;
    align-items: center;
  }
  .quotation .statistic-container div {
    margin-bottom: 20px;
  }
  .quotation .accept-quotation {
    padding: 10px;
  }
  header .header {
    left: 0;
    top: 0;
  }
  header .header .header-bar {
    margin-bottom: var(--progress-bar-height);
  }
  header .header .header-bar.mobile {
    display: flex;
    visibility: visible;
  }
  header .header .header-bar.mobile nav.profile > ul > li > p {
    display: none;
    visibility: hidden;
  }
  header .header .header-bar.title nav.profile {
    display: none;
    visibility: hidden;
  }
  #progress_bar {
    top: 64px;
  }
  .body-wrapper .page-wrapper .wrapper-top .menu-wrapper {
    left: -80px;
    transition: all linear var(--transition-time);
    top: 64px;
  }
  .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .logo {
    display: none;
    visibility: hidden;
  }
  .body-wrapper .page-wrapper .wrapper-top .menu-wrapper .wrapper-placeholder {
    top: calc(var(--header-height-editor) + var(--progress-bar-height));
  }
  .body-wrapper .page-wrapper .wrapper-top .menu-wrapper #menu_toggler {
    display: none;
    visibility: hidden;
  }
  .body-wrapper .page-wrapper .wrapper-top .content-wrapper {
    margin-left: unset;
    width: 100vw;
  }
  .body-wrapper .page-wrapper .wrapper-top .content-wrapper footer {
    height: unset;
  }
  .section {
    padding: 10px 24px 24px 24px;
  }
  body.menu-visible-open .body-wrapper .page-wrapper .wrapper-top .menu-wrapper {
    left: 0;
  }
}
@media (max-width: 820px) {
  html .blade-editors .blade-editor--small,
  html .blade-editors .blade-editor--big,
  html .blade-editors .blade-editor--slim, body .blade-editors .blade-editor--small,
  body .blade-editors .blade-editor--big,
  body .blade-editors .blade-editor--slim {
    width: 100%;
    max-width: unset;
  }
  html .quotation .resume-information div, body .quotation .resume-information div {
    flex-direction: column;
    margin-bottom: 5px;
  }
  html .quotation .resume-information div span:nth-child(1), body .quotation .resume-information div span:nth-child(1) {
    font-weight: bold;
    line-height: 13px;
  }
  html .quotation.detail, body .quotation.detail {
    display: block;
    padding-bottom: 104px;
  }
  html .quotation.detail .tabcontainer, body .quotation.detail .tabcontainer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: unset;
  }
  html .quotation.detail .tabcontainer .tabs, body .quotation.detail .tabcontainer .tabs {
    display: flex;
    position: relative;
    top: unset;
    transform: unset;
    justify-content: center;
    background-color: #FFFFFF;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);
  }
  html .quotation.detail .tabcontainer .tabs .tab, body .quotation.detail .tabcontainer .tabs .tab {
    border-radius: 0 !important;
    box-shadow: unset;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    height: 80px;
    width: 80px;
  }
  html .quotation.detail .tabcontainer .tabs .tab:hover, body .quotation.detail .tabcontainer .tabs .tab:hover {
    width: 80px;
  }
  html .quotation.detail .tabcontainer .tabs .tab.active, body .quotation.detail .tabcontainer .tabs .tab.active {
    margin-left: 0;
  }
  html .quotation.detail .tabcontainer .tabs .tab .icon, html .quotation.detail .tabcontainer .tabs .tab input[type=submit],
  html .quotation.detail .tabcontainer .tabs .tab input[type=button],
  html .quotation.detail .tabcontainer .tabs .tab input[type=reset],
  html .quotation.detail .tabcontainer .tabs .tab button,
  html .quotation.detail .tabcontainer .tabs .tab blade-title,
  html .quotation.detail .tabcontainer .tabs .tab .button a span,
  .button a html .quotation.detail .tabcontainer .tabs .tab span, body .quotation.detail .tabcontainer .tabs .tab .icon, body .quotation.detail .tabcontainer .tabs .tab input[type=submit],
  body .quotation.detail .tabcontainer .tabs .tab input[type=button],
  body .quotation.detail .tabcontainer .tabs .tab input[type=reset],
  body .quotation.detail .tabcontainer .tabs .tab button,
  body .quotation.detail .tabcontainer .tabs .tab blade-title,
  body .quotation.detail .tabcontainer .tabs .tab .button a span,
  .button a body .quotation.detail .tabcontainer .tabs .tab span {
    width: 80px;
    height: 80px;
    mask-size: 45px;
  }
}
@media (max-width: 1024px) {
  .quotation .efficiency-resume .efficiency-resume-content .yearlyearnings-table-container {
    padding: 5px;
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
    left: 0;
  }
  .quotation .resume-information div span {
    color: lightgray;
    max-width: 115px;
  }
  .quotation .accept-quotation .btn-container {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
  .quotation .accept-quotation .top-information {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
  }
  .quotation .accept-quotation .top-information p {
    text-align: center;
  }
  .quotation .accept-quotation .bottom-form-container {
    justify-content: center;
    flex-direction: column;
  }
  .quotation .accept-quotation .bottom-form-container .form-container input {
    width: 100%;
  }
  .quotation .accept-quotation .bottom-form-container .subscription-cards {
    display: flex;
    justify-content: center;
  }
}
@media print {
  .print-view {
    display: flex;
    visibility: visible;
  }
  * {
    visibility: visible !important;
    overflow: visible !important;
  }
  .print-hide, header, .menu-wrapper, #button_bar, .debugWidget, footer, .notyf {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
  }
  body, html {
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    width: 100% !important;
  }
  .section {
    margin: 0 !important;
    padding: 0 !important;
    page-break-inside: avoid;
    overflow: visible !important;
  }
  .page-break {
    page-break-before: always;
    display: block;
    height: 0;
  }
  .print-subscription {
    width: 50% !important;
  }
  .col-6 {
    padding-left: 0 !important;
  }
  .col-lg-6, .col-12 {
    margin: 0 !important;
    padding-left: 0 !important;
    width: 100%;
    display: block;
  }
  .row {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
  }
  .tabs {
    display: block !important;
  }
  .timeline .event {
    page-break-inside: avoid;
  }
  .print-view .value-title {
    background-color: var(--color-white);
    font-size: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    text-align: center;
  }
  .print-view-value-title {
    font-weight: normal !important;
  }
  .print-view .value-title span {
    font-size: 15px;
    width: 100%;
  }
  .print-aiv-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .print-aiv-image {
    float: left;
    max-height: 350px;
    width: 50%;
  }
  .print-aiv-image > img {
    padding: 20px;
    width: 100%;
  }
  .print-logo {
    margin-top: 20px;
    width: 80px;
  }
  .print-products {
    font-size: 12px;
  }
  .print-products ul {
    list-style: none;
    padding: 0;
  }
  .print-products td, th {
    line-height: 25px;
    padding: 0 5px !important;
  }
  .signature-container {
    display: flex;
    justify-content: space-between;
    margin: 0px 20px;
    width: 100%;
  }
  .signature-block {
    margin-top: 150px;
    text-align: center;
    width: 50%;
  }
  .signature-line {
    border-top: 1px solid black;
    width: 200px;
    margin: 0 auto;
    padding-top: 5px;
  }
  .signature-text {
    margin-top: 5px;
  }
  .date-block {
    margin-left: 20px;
    margin-top: 50px;
  }
  .pdf-exclude {
    display: none !important;
  }
  .energy-supplier-savings-table {
    width: 100% !important;
  }
  .energy-supplier-savings-table .responsive-table {
    width: 100% !important;
  }
  .energy-supplier-tables-container {
    display: block !important;
  }
  .energy-supplier-table {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  table, th, td {
    border: none !important;
    border-collapse: collapse !important;
  }
  table {
    page-break-inside: avoid !important;
  }
  .energy-supplier-tables-container,
  .energy-supplier-savings-table-container {
    page-break-inside: avoid !important;
    page-break-before: auto !important;
    margin-bottom: 20px !important;
  }
  .energy-suppliers-yearly-table .responsive-table {
    width: 100% !important;
  }
  .background-container {
    box-shadow: none !important;
    width: 100% !important;
    max-width: 190mm !important;
    margin: 0 auto !important;
  }
  h3, h5 {
    page-break-after: avoid !important;
    margin-bottom: 10px !important;
  }
  .alert.warning {
    width: 100% !important;
    marbin-bottom: 50px !important;
    page-break-inside: avoid !important;
  }
  div[style*="text-align: center"] {
    page-break-inside: avoid !important;
    margin-top: 20px !important;
  }
}
.description {
  background-color: var(--color-blue5);
  border-radius: 4px;
  margin-top: 10px;
  padding: 10px;
}

.exclusion_label {
  border-radius: 4px;
}

.no-border {
  border: none !important;
}

.email-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.send-to-email {
  background-color: var(--color-light-blue);
  border-radius: 4px;
  margin-top: 5px;
  padding: 10px;
}

.price-section .form-group {
  padding: 0 !important;
}

.loading-button {
  line-height: 32px;
  height: 34px;
  padding: 0 54px 0 20px;
  border-radius: 4px 0 0 4px;
  border-color: var(--button-secondary-border);
  border-right: 0;
  transition: alllinear var(--transition-time);
}

.package-details {
  background-color: var(--color-blue5);
  border-radius: 4px;
  margin-top: 10px;
  padding: 10px;
}
.package-details table {
  background-color: white;
}

.package-item {
  display: inline-block;
  background: #2c418d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  padding: 3px;
  margin: 0;
  line-height: 12px;
}

.energy-suppliers-overview {
  text-align: center;
  width: 100%;
}

.energy-supplier-tables-container {
  display: inline-block;
  width: 100%;
}
.energy-supplier-tables-container h3 {
  margin-bottom: 24px;
  text-align: center;
}

.energy-suppliers-yearly-table tr:last-child {
  font-weight: normal !important;
}

.energy-supplier-table {
  float: left;
  width: 50%;
}
.energy-supplier-table .responsive-table {
  margin: 0 auto;
  width: 90%;
}
.energy-supplier-table tr:last-child {
  font-weight: bold;
}
.energy-supplier-table td:first-child {
  width: auto !important;
}

.energy-supplier-test-table thead tr:first-child th {
  background-color: var(--color-green20);
}

.energy-supplier-test-table td {
  width: 16.6666666667%;
}

.energy-supplier-test-table th:nth-child(5),
.energy-supplier-test-table td:nth-child(5) {
  border-left: 1px solid var(--color-blue20);
}

.energy-supplier-savings-table-container {
  float: left;
  width: 100%;
}
.energy-supplier-savings-table-container h3, .energy-supplier-savings-table-container h5 {
  margin-bottom: 24px;
  margin-top: 24px;
  text-align: center;
}
.energy-supplier-savings-table-container .energy-supplier-savings-table {
  margin: 0 auto;
  margin-bottom: 24px;
  width: 75%;
}
.energy-supplier-savings-table-container .energy-supplier-savings-table .responsive-table {
  margin: 0 auto;
  width: 90%;
}
.energy-supplier-savings-table-container .energy-supplier-savings-table .responsive-table tr:last-child {
  font-weight: bold;
}
.energy-supplier-savings-table-container .energy-supplier-savings {
  background-color: var(--color-green50);
  border-radius: 4px;
  display: inline-block;
  font-size: 20px;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
}

.energy-suppliers-totals-table table {
  width: auto !important;
}

.energy-tool-tab-container {
  margin-top: 15px;
  width: 100%;
}
.energy-tool-tab-container .energy-tool-tabs {
  display: inline-block;
  text-align: center;
  width: 100%;
}
.energy-tool-tab-container .tabs {
  width: 100%;
}
.energy-tool-tab-container .energy-tool-tab {
  background-color: var(--color-white5);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 25%;
}
.energy-tool-tab-container .energy-tool-tab.active {
  background-color: var(--color-white);
}

.ACCEPTED_ITEM {
  background-color: var(--color-green20) !important;
}

.NOT_YET_SENT_ITEM, .MODREQUEST_ITEM {
  background-color: var(--color-orange25) !important;
}

.ADVICE_ITEM {
  background-color: var(--color-green20) !important;
}

.fixed-buttons {
  position: sticky;
  right: 0;
  z-index: 1;
  min-width: 50px;
}

.material-list-input {
  line-height: 15px !important;
  max-height: 30px !important;
  max-width: 80px !important;
  padding: 5px !important;
  text-align: center !important;
}

.aiv-disabled {
  color: grey;
}

.three-tables .responsive-table {
  margin: 0 !important;
  width: 100% !important;
}

.input-button-group {
  display: flex;
}

.universal-margin-input {
  width: 150px;
  height: 34px;
}

.average-row {
  background-color: #f0f8ff;
  font-weight: bold;
  border-top: 2px solid #999;
}

.average-row td {
  font-weight: bold;
}

.dummy-checkbox.loading {
  width: 24px;
  height: 24px;
  display: inline-block;
  color: gray;
  font-size: 15px;
  line-height: 21px;
}

.primary.icon.percentage, input.primary.percentage[type=submit],
input.primary.percentage[type=button],
input.primary.percentage[type=reset],
button.primary.percentage,
blade-title.primary.percentage,
.button a span.primary.percentage {
  color: white;
  cursor: pointer;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.primary.icon.percentage:hover, input.primary.percentage[type=submit]:hover,
input.primary.percentage[type=button]:hover,
input.primary.percentage[type=reset]:hover,
button.primary.percentage:hover,
blade-title.primary.percentage:hover,
.button a span.primary.percentage:hover {
  color: black !important;
}

.blocks {
  margin: 22px 0 0 0;
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 20px;
}

.blocks .block {
  padding: 18px 40px 40px 40px;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
}

.blocks .block.price {
  align-content: center;
  justify-items: center;
}

.blocks .block p {
  padding: 20px 0 0 0;
}

.blocks .block p.title {
  font-size: 14px;
  color: #25418E;
}

.blocks .block p.price span {
  display: block;
}

.blocks .block p.price span:first-child {
  font-size: 22px;
  font-weight: 700;
  color: #F99F34;
}

.blocks .block ul {
  margin-top: 16px;
}

.blocks .block ul li:before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 700;
  content: "\f00c";
  color: rgb(142, 207, 4);
}

.price-block {
  margin: 22px 0 0 0;
  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 10px 10px;
}

.price-block .block-green {
  padding: 16px;
  background: rgba(142, 207, 4, 0.5);
  border-radius: 10px 10px 0px 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.price-block .block-green div p {
  line-height: 18px;
  padding: 0;
  font-size: 12px;
}

.price-block .block-green div p i {
  font-style: italic;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
}

.price-block .block-green div p i:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f05a";
  font-style: normal;
}

.price-block .block-green div p.price {
  font-size: 20px;
  font-weight: 700;
}

.price-block .block-green div:last-child {
  margin-left: auto;
  white-space: nowrap;
}

.price-block .block-white {
  padding: 26px 48px 48px 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  overflow: hidden;
}

.price-block .block-white .block-green {
  border-radius: 4px;
}

.price-block .block-white .inner-column h4 {
  margin-bottom: 12px;
}

.price-block .block-white .inner-column .block-green {
  margin-top: 8px;
}

.price-block .block-white .inner-column p {
  line-height: 18px;
  font-size: 12px;
}

.price-block .block-white .inner-column p i {
  font-style: italic;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
}

.price-block .block-white .inner-column p i:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f05a";
  font-style: normal;
}

img.chart {
  width: 100%;
  height: auto;
  display: block;
  margin: 22px 0 0 0;
}

@media (max-width: 1200px) {
  .blocks {
    grid-template-columns: 100%;
  }
  .price-block .block-white {
    grid-template-columns: repeat(1, 1fr);
  }
}