/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/* Reduce site spacing & add color variables for button overides */
:root {
/*     --angle: 0deg;
    --cta-brand-red: #f01245;
    --cta-brand-teal: #005254;
    --cta-brand-drak-red: #7e0228;
    --cta-brand-pink: #F9B6B4;
    --cta-brand-green: #a9ded8;
    --cta-brand-blue-dark: #003253; */
    --cta-brand-teal: #2ac8a5;
    --cta-brand-blue-dark: #0e5a67;
}
/* Module padding class injection */
body {
/*   --block-padding-vertical: var(--space-16);
  --block-padding-horizontal: var(--space-12); */
  --block-padding-vertical: var(--space-64);
}

/* class injection */
.visma-module-wrapper.small-padding {
  --block-padding-vertical: var(--space-32);
}
.visma-module-wrapper.medium-padding {
  --block-padding-vertical: var(--space-96);
}
.visma-module-wrapper.large-padding {
  --block-padding-vertical: var(--space-128);
}
.visma-module-wrapper.no-padding {
  --block-padding-vertical: 0;
}

/* .visma-module{
  --header-margin: var(--space-16);
} */
/*laptop 1200 - 1600*/
/* @media screen and (min-width: 1200px) {
  body {
    --block-padding-vertical: var(--space-24);
    --block-padding-horizontal: var(--space-24);
  }
  .visma-module{
    --header-margin: var(--space-24);
  }
} */

/*Desktop > 1600*/
/* @media screen and (min-width: 1600px) {
  body {
    --block-padding-vertical: var(--space-32);
    --block-padding-horizontal: 0;
  }
  .visma-module{
    --header-margin: var(--space-32);
  }
}
 */
/* Dark background 4 live gradient */
/* .background.background-dark-4 {
  background-image: linear-gradient(var(--angle),#f01245,#9879e1);
  background-size: 100% 100%;
  animation: rotate 7.25s ease infinite;
}
 */

/* @keyframes rotate {
  to {
    --angle: 360deg;
  }
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
} */

/* Button Color Schemes Overrides */
/* Default & light-1 bg */
/* .background.background-default .cta.-secondary,
.background.background-light-1 .cta.-secondary {
  --border-color: var(--cta-border-color);
  --text-color: var(--site-text-color);
}
.background.background-default .cta.-secondary:hover,
.background.background-light-1 .cta.-secondary:hover {
  --background-color: var(--cta-background-color);
  --text-color: var(--cta-secondary-hover-text-color);
} */

/* Light-2 & light-4 bg */
/* .background.background-light-2 .cta.-primary,
.background.background-light-4 .cta.-primary,
.background.background-light-2 .hs-button.primary,
.background.background-light-4 .hs-button.primary {
  --background-color: var(--cta-brand-teal);
  --cta-border-color: var(--cta-brand-teal);
} */

/* .background.background-light-2 .cta.-secondary,
.background.background-light-4 .cta.-secondary,
.background.background-light-2 .cta.-tertiary,
.background.background-light-4 .cta.-tertiary {
  --text-color: var(--cta-brand-teal);
} */

/* .background.background-light-2 .cta.-secondary,
.background.background-light-4 .cta.-secondary, {
  --border-color: var(--cta-brand-teal);
} */

/* .background.background-light-2 .cta.-secondary:hover,
.background.background-light-4 .cta.-secondary:hover {
  --background-color: var(--cta-brand-teal);
  --text-color: var(--cta-secondary-hover-text-color);
} */

/* Light-2 */
/* .background.background-light-2 .cta.-primary, 
.background.background-light-2 .hs-button.primary {
  --background-color: var(--cta-brand-teal);
  --cta-border-color: var(--cta-brand-teal);
}

.background.background-light-2 .cta.-secondary,
.background.background-light-2 .cta.-tertiary {
  --text-color: var(--cta-brand-teal);
}

.background.background-light-2 .cta.-secondary {
  --border-color: var(--cta-brand-teal);
}

.background.background-light-2 .cta.-secondary:hover {
  --background-color: var(--cta-brand-teal);
  --text-color: var(--cta-secondary-hover-text-color);
} */

/* Light-4 */
/* .background.background-light-4 .cta.-primary, 
.background.background-light-4 .hs-button.primary {
    --cta-background-color: var(--site-brand-dark-color);
    --background-color: var(--cta-background-color);
    --border-color: var(--cta-background-color);
}

.background.background-light-4 .cta.-primary:hover,
.background.background-light-4 .hs-button.primary:hover {
  --cta-overlay-intensity: 20%;
  --cta-overlay-color: var(--black);
  --cta-overlay: linear-gradient(
    rgb(var(--cta-overlay-color) / var(--cta-overlay-intensity)),
    rgb(var(--cta-overlay-color) / var(--cta-overlay-intensity))
  );
  --cta-hover-overlay: var(--cta-overlay);
}

.background.background-light-4 .cta.-secondary,
.background.background-light-4 .cta.-tertiary {
  --text-color: var(--site-text-color);
}

.background.background-light-4 .cta.-secondary, {
  --cta-border-color: var(--site-brand-dark-color);
  --border-color: var(--cta-border-color);
}

.background.background-light-4 .cta.-secondary:hover {
  --cta-background-color: var(--site-brand-dark-color);
  --background-color: var(--cta-background-color);
  --border-color: var(--cta-background-color);
  --text-color: var(--cta-secondary-hover-text-color);
}

.background.background-light-4 .cta.-tertiary {
  --site-text-color: var(--site-brand-dark-color);
  --text-color: var(--site-text-color);
}
 */
/* Light-3 bg */
/* .background.background-light-3 .cta.-primary,
.background.background-light-3 .hs-button.primary {
  --background-color: var(--cta-brand-drak-red);
  --cta-border-color: var(--cta-brand-drak-red);
}
.background.background-light-3 .cta.-secondary {
  --border-color: var(--cta-brand-drak-red);
}
.background.background-light-3 .cta.-secondary,
.background.background-light-3 .cta.-tertiary {
  --text-color: var(--cta-brand-drak-red);
}
.background.background-light-3 .cta.-secondary:hover {
  --background-color: var(--cta-brand-drak-red);
  --text-color: var(--cta-secondary-hover-text-color);
}

/* Dark-1 & dark-2 bg */
.background.background-dark-1 .cta.-secondary,
.background.background-dark-2 .cta.-secondary {
  --border-color: var(--cta-brand-pink);
  --text-color: var(--cta-brand-pink);
}
.background.background-dark-1 .cta.-secondary:hover,
.background.background-dark-2 .cta.-secondary:hover {
  --background-color: var(--cta-brand-pink);
  --text-color: var(--cta-secondary-hover-text-color);
}
 */
/* Dark-3 bg */
/* .background.background-dark-3 .cta.-primary,
.background.background-dark-3 .hs-button.primary {
  --background-color: var(--cta-brand-green);
  --cta-border-color: var(--cta-brand-green);
}
.background.background-dark-3 .cta.-secondary {
  --border-color: var(--cta-brand-green);
}
.background.background-dark-3 .cta.-secondary,
.background.background-dark-3 .cta.-tertiary {
  --text-color: var(--cta-brand-green);
}
.background.background-dark-3 .cta.-secondary:hover {
  --background-color: var(--cta-brand-green);
  --text-color: var(--cta-secondary-hover-text-color);
}

/* Dark-4 bg gradient override */
.background.background-dark-4 .cta.-primary,
.background.background-dark-4 .hs-button.primary  {
  --background-color: var(--cta-brand-blue-dark);
  --cta-border-color: var(--cta-brand-blue-dark);
  --cta-text-color: var(--site-text-light); 
}

.background.background-dark-4 .cta.-primary:hover,
.background.background-dark-4 .hs-button.primary:hover {
  --text-color: var(--site-text-light);
} */

/* Image bg */
/* .background.background-image .cta.-primary {
  --background-color: var(--cta-brand-red);
  --cta-border-color: var(--cta-brand-red);
  --cta-text-color: var(--site-text-light);
} */

/* .background.background-image .cta.-primary {
  --background-color: var(--site-light-color);
  --cta-border-color: var(--site-light-color);
}

.background.background-image .cta.-primary:hover {
    --text-color: var(--cta-secondary-hover-text-color);
    --cta-border-color: var(--site-light-color);
}

.background.background-image .cta.-secondary {
  --border-color: var(--site-light-color);
  --text-color: var(--site-light-color);
}
.background.background-image .cta.-secondary:hover {
  --background-color: var(--site-light-color);
  --text-color: var(--cta-secondary-hover-text-color);
} */

/* New CVI Colors */


/* Light-3 bg */
.background.background-light-3 .cta.-primary,
.background.background-light-3 .hs-button.primary {
  --background-color: var(--cta-brand-teal);
  --cta-border-color: var(--cta-brand-teal);
}
.background.background-light-3 .cta.-secondary {
  --border-color: var(--cta-brand-teal);
}

.background.background-light-3 .cta.-secondary:hover {
  --background-color: var(--cta-brand-teal);
  --text-color: var(--cta-secondary-hover-text-color);
}

/* Light-4 */
.background.background-light-4 .cta.-primary,
.background.background-light-4 .hs-button.primary {
  --background-color: var(--cta-brand-blue-dark);
  --cta-border-color: var(--cta-brand-blue-dark);
}
.background.background-light-4 .cta.-secondary {
  --border-color: var(--cta-brand-blue-dark);
}

.background.background-light-4 .cta.-secondary:hover {
  --background-color: var(--cta-brand-blue-dark);
  --text-color: var(--cta-secondary-hover-text-color);
}

/* Dark-1 & dark-2 bg */
.background.background-dark-1 .cta.-primary,
.background.background-dark-2 .cta.-primary {
  --text-color: var(--site-text-light);
}
.background.background-dark-1 .cta.-secondary,
.background.background-dark-2 .cta.-secondary {
  --border-color: var(--cta-hover-background-color);
}

.background.background-dark-1 .cta.-secondary:hover,
.background.background-dark-2 .cta.-secondary:hover {
  --background-color: var(--cta-hover-background-color);
  --text-color: var(--site-text-light);
}

.background.background-dark-1 .cta.-tertiary,
.background.background-dark-2 .cta.-tertiary {
  --text-color: var(--site-text-light);
}

/* Dark-3 & Dark-4 bg */
.background.background-dark-3 .cta.-primary,
.background.background-dark-3 .hs-button.primary,
.background.background-dark-4 .cta.-primary,
.background.background-dark-4 .hs-button.primary {
  --background-color: var(--background-dark-2);
  --cta-border-color: var(--background-dark-2);
  --text-color: var(--site-text-light);
}

.background.background-dark-3 .cta.-secondary,
.background.background-dark-3 .hs-button.secondary,
.background.background-dark-4 .cta.-secondary,
.background.background-dark-4 .hs-button.secondary {
  --border-color: var(--background-dark-2);
}

.background.background-dark-3 .cta.-secondary:hover,
.background.background-dark-3 .hs-button.secondary:hover,
.background.background-dark-4 .cta.-secondary:hover,
.background.background-dark-4 .hs-button.secondary:hover{
  --background-color: var(--background-dark-2);
  --text-color: var(--site-text-light);
}

/* Image backgrounds */
/* brand light */
.background.text-brand-light:has(.branded-banner-block) .cta.-primary {
  --background-color: var(--cta-brand-teal);
  --border-color: var(--cta-brand-teal);
  --text-color: var(--site-text-light);
}
.background.text-brand-light:has(.branded-banner-block) .cta.-primary:hover{
  --border-color: transparent !important;
}
.background.text-brand-light:has(.branded-banner-block) .cta.-secondary {
  --border-color: var(--cta-brand-teal);
}
.background.text-brand-light:has(.branded-banner-block) .cta.-secondary:hover {
  --border-color: var(--cta-brand-teal);
  --background-color: var(--cta-brand-teal);
  --text-color: var(--site-text-light);
}
.background.text-brand-light:has(.branded-banner-block) .kicker-text {
  color: var(--cta-brand-teal);
}
/* brand dark */
.background.text-brand-dark:has(.branded-banner-block) .cta.-primary {
  --background-color: var(--background-dark-2);
  --border-color: var(--background-dark-2);
  --text-color: var(--site-text-dark);
}
.background.text-brand-dark:has(.branded-banner-block) .cta.-primary:hover {
  --border-color: transparent !important;
}

.background.text-brand-dark:has(.branded-banner-block) .cta.-secondary {
  --border-color: var(--background-dark-2);
}
.background.text-brand-dark:has(.branded-banner-block) .cta.-secondary:hover {
  --border-color: var(--background-dark-2);
  --background-color: var(--background-dark-2);
  --text-color: var(--site-text-dark);
}


/* Hide CTA primary & secondary arrows */
a[class*="cta"]:not(.-tertiary)::after {
  display: none;
}
/* Animate CTA tertiary arrow */
.cta.-tertiary {
  gap: 1rem;
}
.cta.-tertiary::after {
  transition: transform .5s cubic-bezier(.58,0,.29,.845),mask-image .5s cubic-bezier(.58,0,.29,.845);
}
.cta.-tertiary:hover::after {
  transform: translate(.5em, 0);
  transition: transform .5s cubic-bezier(.58,0,.29,.845),mask-image .5s cubic-bezier(.58,0,.29,.845);
}

/* Tiles, columns & Product finder hover effect */
/* .tile-block .tile__image-container,
.columns__card-container:not(.-round-image-shape) .columns__image-container,
.product-finder__cards-wrapper .product-finder__card-image-container {
  overflow: hidden;
}
.tile-block img,
.columns__card-container img,
.product-finder__cards-wrapper img{
  transition: transform .5s cubic-bezier(.33,0,.2,1);
}
.tile-block .tile:hover img,
.columns__card-container .columns__card:hover img,
.product-finder__cards-wrapper .product-finder__card:hover img {
  transform: scale(1.125);
} */


/* .tile-block .tile:hover .cta.-tertiary::after,
.columns__card-container .columns__card:hover .cta.-tertiary::after,
.product-finder__cards-wrapper .product-finder__card:hover .cta.-tertiary::after {
  transform: translate(.5em, 0);
  transition: transform .5s cubic-bezier(.58,0,.29,.845),mask-image .5s cubic-bezier(.58,0,.29,.845);
} */

.tile-block .tile,
.columns__card-container .columns__card:not(.--standard-style),
.product-finder__cards-wrapper .product-finder__card {
  transition: transform .3s cubic-bezier(.33,0,.2,1), box-shadow .3s cubic-bezier(.33,0,.2,1);
}

.tile-block .tile:hover,
.columns__card-container .columns__card:not(.--standard-style):hover,
.product-finder__cards-wrapper .product-finder__card:hover {
  transform: scale(1.01);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

/* Columns no card variant */
.columns__card-container:has(.--standard-style) .columns__image-container {
  overflow: hidden;
}
.columns__card-container:has(.--standard-style) img {
  transition: transform .3s cubic-bezier(.33,0,.2,1);
}
.columns__card-container .columns__card.--standard-style:hover img {
  transform: scale(1.125);
}

/* Overide large CTA padding */
.cta.-large:not(.-tertiary) {
  --inner-space: var(--space-16) var(--space-48);
}

/* @media screen and (min-width: 1200px) {
  .cta.-large {
    --font-size: 2rem;
  }
} */

/* MultiSelect dropdown styles - custom checkboxes & pills variant */
/* Style the dropdown button */
.hs-fieldtype-checkbox:has(.dropdown-btn) {
  position: relative;
}

.hs-fieldtype-checkbox .dropdown-btn {
  padding: var(--space-12) var(--space-24);
  background-color: #fff;
  border: var(--border);
  border-radius: var(--space-8);
  display: inline-block;
  width: 100%;
  text-align: left;
  line-height: 22px;
  position: relative;
}

.hs-fieldtype-checkbox .dropdown-btn.pills-variant:has(.pill) {
  padding: 9px var(--space-24);
}
/* Add an SVG chevron icon to the end of the dropdown button */
.hs-fieldtype-checkbox .dropdown-btn::after {
    content: "";
    background-image: url(https://143977628.fs1.hubspotusercontent-eu1.net/hubfs/143977628/raw_assets/public/product-pages-theme/images/icons/select-chevron.svg); 
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: 94%;
    width: 12px; 
    height: 12px; 
    position: absolute;
    right: var(--space-32); 
    top: 50%;
    transform: translateY(-50%); 
}
.hs-fieldtype-checkbox .dropdown-btn.active::after {
    transform: translateY(-50%) rotate(180deg); /* Rotate chevron */
}

/* Style the dropdown list container */
.hs-fieldtype-checkbox .dropdown-list {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: var(--space-4);
  padding: var(--space-12);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1;
  width: 100%;
  position: absolute;
  display: none;
}

.hs-fieldtype-checkbox:has(.dropdown-btn.active) .dropdown-list {
  display: block;
}

.hs-fieldtype-checkbox .dropdown-item label {
  display: flex;
  position: relative;
  margin-bottom: var(--space-16)
}

.hs-fieldtype-checkbox .dropdown-item label span {
  width: 100%;
  align-self: center;
  display: inline-block;
  line-height: 2.4rem;
  margin-left: 4rem;
}

/* Custom checkbox for multiselect dropdown */
.hs-fieldtype-checkbox .dropdown-item label span:before {
  border: 2px solid var(--site-text-color);
  border-radius: var(--space-4);
  content: "";
  display: inline-block;
  height: var(--label-height);
  left: 0;
  position: absolute;
  top: 0;
  width: var(--label-width);
}

.hs-fieldtype-checkbox .dropdown-item label span:after {
  border: 2px solid;
  border-color: var(--background-color);
  border-left: 0;
  border-top: 0;
  color: var(--color-default);
  content: "";
  height: var(--space-16);
  left: var(--space-8);
  opacity: 0;
  position: absolute;
  top: 2px;
  transform: rotate(45deg);
  transition: opacity .2s ease-in-out;
  width: var(--space-8);
}
.hs-fieldtype-checkbox .dropdown-item label input:checked + span:before {
  background-color: var(--site-brand-color);
  border: 2px solid transparent;
}
.hs-fieldtype-checkbox .dropdown-item label input:checked + span:after {
  opacity: 1;
}

/* Dropdown pills variant */
.hs-fieldtype-checkbox .pills-variant {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.hs-fieldtype-checkbox .pills-variant .pill {
  display: flex;
  padding: 3px var(--space-8);
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  margin-bottom: 0;
  position: relative;
}
.hs-fieldtype-checkbox:has(.pills-variant) .dropdown-item label,
.hs-fieldtype-checkbox:has(.pills-variant) span.remove-icon {
  cursor: pointer;
}
.hs-fieldtype-checkbox .pills-variant .pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--site-text-dark);
  opacity: 0.05;
  pointer-events: none;
  border-radius: 5px;
}

@media screen and (min-width: 1050px) {
  .hs-fieldtype-checkbox .dropdown-btn {
    padding: var(--space-16) var(--space-32);
  }
  .hs-fieldtype-checkbox .dropdown-btn.pills-variant:has(.pill) {
    padding: 13px var(--space-32);
  }
}
/* End MultiSelect dropdown styles - custom checkboxes & pills variant */

/* Email subscription page */
@media screen and (max-width: 1050px) {
  .visma-subscription-block h1 {
    font-size: var(--title-medium-size);
  }
}

.visma-subscription-block .checkbox-row span,
.visma-subscription-block .subscribe-options span {
  font-weight: bold;
}

.visma-subscription-block .item-inner {
  margin-bottom: var(--space-32);
}

.visma-subscription-block .checkbox-row::after {
  display: none;
}

/* Apply form checkbox & dropdown elements */
.visma-subscription-block .checkbox-row span.fakelabel,
.visma-subscription-block .subscribe-options label {
  position: relative;
}
.visma-subscription-block .checkbox-row input,
.visma-subscription-block .subscribe-options input {
  --label-height: 24px;
  --label-width: 24px;
  height: var(--label-height);
  width: var(--label-width);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}

.visma-subscription-block .checkbox-row span:not(.fakelabel),
.visma-subscription-block .subscribe-options span:not(.fakelabel) {
  margin-left: 4rem;
}

.visma-subscription-block .checkbox-row span:not(.fakelabel)::before,
.visma-subscription-block .subscribe-options span:not(.fakelabel)::before {
  --label-height: 24px;
  --label-width: 24px;
  border: 2px solid var(--site-text-color);
  border-radius: 4px;
  content: "";
  height: var(--label-height);
  left: 0;
  position: absolute;
  top: 0;
  width: var(--label-width);
}

.visma-subscription-block .checkbox-row span:not(.fakelabel)::after,
.visma-subscription-block .subscribe-options span:not(.fakelabel)::after {
  border: 2px solid;
  border-color: var(--background-color);
  border-left: 0;
  border-top: 0;
  color: var(--color-default);
  content: "";
  height: 16px;
  left: 8px;
  opacity: 0;
  position: absolute;
  top: 2px;
  transform: rotate(45deg);
  transition: opacity .2s ease-in-out;
  width: 8px;
}
.visma-subscription-block .checkbox-row span.fakelabel input:checked + span:not(.fakelabel)::before,
.visma-subscription-block .subscribe-options label input:checked + span:not(.fakelabel)::before {
  background-color: var(--site-brand-color);
  border: 2px solid transparent;
}

.visma-subscription-block .checkbox-row input:checked + span:not(.fakelabel)::after,
.visma-subscription-block .subscribe-options input:checked + span:not(.fakelabel)::after {
  opacity: 1;
}

@media screen and (min-width: 1050px) {
  .wide-form .hs_cos_wrapper_type_form {
    width: 65%;
  }

  .wide-form .form__module-header-container {
    width: 35%;
  }

  .wide-form:has(.form__module-header-container) form {
    max-width: 100% !important;
  }

  .wide-form:not(:has(.form__module-header-container)) form {
    max-width: 65% !important;
  }
}