/* @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    */
/*****************************************/


/* Variables*/
* {
    --mobile-fontscaling-factor: 0.45;
    --mobile-marginscaling-factor: 0.5;
    --mobile-spacingscaling-factor: 0.90;
    --tablet-fontscaling-factor: 0.50;
    --tablet-marginscaling-factor: 0.8;
    --tablet-spacingscaling-factor: 0.9;
    --laptop-fontscaling-factor: 0.70;
    --laptop-marginscaling-factor: 0.75;
    --laptop-spacingscaling-factor: 0.95;
}
/* Mobile devices */
@media (max-width: 599px) {
    body {
        line-height: 1.5;
    }
    body .visma-module-wrapper {
        --title-xxlarge-size: calc(3.25rem / 0.621);
        --title-xlarge-size: calc(2.5rem / 0.621);
        --title-large-size: calc(2rem / 0.621);
        --title-medium-size: calc(1.75rem / 0.621);
        --title-small-size: calc(1.35rem / 0.621);
        --title-xsmall-size: calc(1.25rem / 0.621);
        
        /*Calculation done to take into acount the html font scaling */
        --text-large-size:  calc(1.125rem / 0.621);
        --text-medium-size: calc(1rem / 0.621);
        --text-small-size: calc(0.875rem / 0.621);
        --body-font-size: calc(0.875rem / 0.621);
        --title-dropdown-line-height: calc(1.5 * var(--mobile-fontscaling-factor));;
        --block-padding-vertical: calc(var(--space-128) * var(--mobile-marginscaling-factor));
        --slim-block-padding-vertical: calc(var(--space-96) * var(--mobile-marginscaling-factor));
        --medium-block-padding-vertical: calc(var(--space-96) * var(--mobile-marginscaling-factor));
        --radius-5: calc(0.5rem * var(--tablet-spacingscaling-factor));
        --radius-6: calc(0.6rem * var(--tablet-spacingscaling-factor));
        --radius-8: calc(0.8rem * var(--tablet-spacingscaling-factor));
        --radius-10: calc(1rem * var(--tablet-spacingscaling-factor));
        --radius-12: calc(1.2rem * var(--tablet-spacingscaling-factor));
        --radius-16: calc(1.6rem * var(--tablet-spacingscaling-factor));
        --radius-24: calc(2.4rem * var(--tablet-spacingscaling-factor));
        --radius-32: calc(3.2rem * var(--tablet-spacingscaling-factor));
        --radius-small: calc(var(--radius-8) * var(--tablet-spacingscaling-factor));
        --radius-medium: calc(var(--radius-24) * var(--tablet-spacingscaling-factor));
        --radius-large: calc(var(--radius-32) * var(--tablet-spacingscaling-factor));
        --space-4: calc(0.4rem * var(--tablet-spacingscaling-factor));
        --space-6: calc(0.6rem * var(--tablet-spacingscaling-factor));
        --space-8: calc(0.8rem * var(--tablet-spacingscaling-factor));
        --space-12: calc(1.2rem * var(--tablet-spacingscaling-factor));
        --space-16: calc(1.6rem * var(--tablet-spacingscaling-factor));
        --space-24: calc(2.4rem * var(--tablet-spacingscaling-factor));
        --space-32: calc(3.2rem * var(--tablet-spacingscaling-factor));
        --space-48: calc(4.8rem * var(--tablet-spacingscaling-factor));
        --space-64: calc(6.4rem * var(--tablet-spacingscaling-factor));
        --space-96: calc(9.6rem * var(--tablet-spacingscaling-factor));
        --space-128: calc(12.8rem * var(--tablet-spacingscaling-factor));
        --space-256: calc(25.6rem * var(--tablet-spacingscaling-factor));
        /* Mobile specific overrides for lineheight */
        --title-xxlarge-line-height: 1.25 !important;
        --title-xlarge-line-height: 1.20 !important;
        --title-large-line-height: 1.20 !important;
        --title-medium-line-height: 1.5 !important;
        --title-small-line-height: 1.2 !important;
        --title-xsmall-line-height: 1.2 !important;
        --title-dropdown-line-height: 1.5 !important;
  
    }
}
/* Tablet and laptop devices */
@media (min-width: 600px) and (max-width: 1599px) {
    body {
        line-height: 1.5;
    }
    body .visma-module-wrapper {
        /*
        --title-xxlarge-size: calc(3.75rem / 0.621);
        --title-xlarge-size: calc(3.5rem / 0.621);
        --title-large-size: calc(2.5rem / 0.621);
        --title-medium-size: calc(1.5rem / 0.621);
        --title-small-size: calc(1.25rem / 0.621);
        --title-xsmall-size: calc(1.25rem / 0.621);
        */        
       
        --title-xxlarge-size: 7.5rem;
      
        --title-xlarge-size: 6.25rem;
        --title-large-size: 4.5rem;
        --title-medium-size: 3.84rem;
        --title-small-size: 2.56rem;
        --title-xsmall-size: 1.92rem;
      
        /*Calculation done to take into acount the html font scaling */
        --text-large-size:  calc(1.125rem / 0.621);
        --text-medium-size: calc(1rem / 0.621);
        --text-small-size: calc(0.875rem / 0.621);
        --body-font-size: calc(0.875rem / 0.621);
        --title-dropdown-line-height: calc(1.5 * var(--mobile-fontscaling-factor));;
        --block-padding-vertical: calc(var(--space-128) * var(--mobile-marginscaling-factor));
        --slim-block-padding-vertical: calc(var(--space-96) * var(--mobile-marginscaling-factor));
        --medium-block-padding-vertical: calc(var(--space-96) * var(--mobile-marginscaling-factor));
        --radius-5: calc(0.5rem * var(--mobile-spacingscaling-factor));
        --radius-6: calc(0.6rem * var(--mobile-spacingscaling-factor));
        --radius-8: calc(0.8rem * var(--mobile-spacingscaling-factor));
        --radius-10: calc(1rem * var(--mobile-spacingscaling-factor));
        --radius-12: calc(1.2rem * var(--mobile-spacingscaling-factor));
        --radius-16: calc(1.6rem * var(--mobile-spacingscaling-factor));
        --radius-24: calc(2.4rem * var(--mobile-spacingscaling-factor));
        --radius-32: calc(3.2rem * var(--mobile-spacingscaling-factor));
        --radius-small: calc(var(--radius-8) * var(--mobile-spacingscaling-factor));
        --radius-medium: calc(var(--radius-24) * var(--mobile-spacingscaling-factor));
        --radius-large: calc(var(--radius-32) * var(--mobile-spacingscaling-factor));
        --space-4: calc(0.4rem * var(--mobile-spacingscaling-factor));
        --space-6: calc(0.6rem * var(--mobile-spacingscaling-factor));
        --space-8: calc(0.8rem * var(--mobile-spacingscaling-factor));
        --space-12: calc(1.2rem * var(--mobile-spacingscaling-factor));
        --space-16: calc(1.6rem * var(--mobile-spacingscaling-factor));
        --space-24: calc(2.4rem * var(--mobile-spacingscaling-factor));
        --space-32: calc(3.2rem * var(--mobile-spacingscaling-factor));
        --space-48: calc(4.8rem * var(--mobile-spacingscaling-factor));
        --space-64: calc(6.4rem * var(--mobile-spacingscaling-factor));
        --space-96: calc(9.6rem * var(--mobile-spacingscaling-factor));
        --space-128: calc(12.8rem * var(--mobile-spacingscaling-factor));
        --space-256: calc(25.6rem * var(--mobile-spacingscaling-factor));
      
        /* Mobile specific overrides for lineheight */
        --title-xxlarge-line-height: 1.15 !important;
      
        --title-xlarge-line-height: 1.15 !important;
        --title-large-line-height: 1.20 !important;
        --title-medium-line-height: 1.35 !important;
        --title-small-line-height: 1.5 !important;
        --title-xsmall-line-height: 1.5 !important;
      
        --title-dropdown-line-height: 1.5 !important;
    }
}
/* Tablet and laptop devices */
@media (min-width: 1600px) {
    body .visma-module-wrapper {
        --title-xxlarge-size: calc(12.8rem * 0.9) !important;
        --title-xlarge-size calc(9.6rem * 0.85) !important;
        --title-large-size: calc(6.4rem * 0.85) !important;
        --title-medium-size: calc(4.8rem * 0.9) !important;
        --title-small-size: calc(3.2rem * 0.9) !important;
        --title-xsmall-size: calc(2.4rem * 0.9) !important;
    }
}
/* End of font overrides */





/* --------------   Menu redesign  ------------------- */
@media (max-width: 1199px) {  
	  .site-navigation{
			  justify-content: start;
	  }
	  .menu-list {
			  width: 100%;
			  align-items: start;
	  }
	  .menu-item__submenu-button {
			  padding-left: unset;
	  }
	  .menu-item.has-submenu .submenu-column-wrapper {
			  padding-left: 0 !important;
	  }
	  
}
@media (min-width: 1200px) {
    
    /* Wouter: specific code for Unless chatbot integration, is injected INTO the img element of a two column part */
    #unless-header div.two-column-block__image unless-inline-conversation-center {
      width: 100%;
      display: flow;
      height: 650px;
    }
  
    #unless-header {
      /*padding-bottom: 300px;*/
    }
    
  
    .header-wrapper.-sticky.-transparent.-scroll {
			--menu-background-color: rgba(255, 227, 115, 0.48);
      background-color: transparent;
    }

    /*Remove the white background on the links*/
    .site-navigation-wrapper.background.background-default {
        background: none;
    }
    .header-wrapper.-sticky.-transparent .header:not(.submenu-list):not(.site-search):not(.lang_list_class) {
        background: var(--menu-background-color) !important;
			  transition: 1s all ease-in-out;
    }
    header {
        background: rgba(255, 227, 115, 0.48);
        backdrop-filter: blur(24px);
        --header-height: 6rem !important;
        border-radius: 6rem !important;
        padding: 1rem 3rem 1rem 3rem !important;
        margin-top: 3rem !important;
    }
	  .header-wrapper.-sticky:not(.-scroll) .is-relative.background-image .header {
        --menu-background-color: rgba(255, 227, 115, 0.85);
	  }
	  .header-wrapper .visma-module .header {
				--site-text-color: var(--site-text-dark);
				--link-color: var(--site-text-dark);
				--cta-text-color: var(--site-text-light);
				--cta-background-color: var(--site-brand-dark-color);
				--cta-border-color: var(--site-brand-dark-color);
				--cta-hover-text-color: var(--site-text-light);
				--cta-hover-background-color: var(--site-brand-dark-color);
				--cta-overlay-intensity: 20%;
				--cta-overlay-color: var(--black);
				--cta-focus-background-color: var(--site-brand-dark-color);
				--cta-focus-text-color: var(--site-text-light);
				--cta-focus-border-color: var(--site-light-color);
				--cta-secondary-hover-background-color: var(--site-dark-color);
				--cta-secondary-hover-text-color: var(--site-light-color);
	  }
	  .header-wrapper.-sticky.-transparent.-scroll .background-image .cta.-small.-primary {
			  background-color: var(--site-brand-dark-color);
        border-color: var(--site-brand-dark-color);
	  
	  }
    .header-wrapper.-sticky {
        padding-top: 1px;
    }
    .header-wrapper.-sticky > div > div {
        background-color: transparent;
        padding-left: 32px;
        padding-right: 32px;

    }

    .site-search.background.background-default {
        padding: 0.25rem 3rem 3rem 3rem;
        margin-top: 1rem;
        border: none;
        border-radius: 2rem;
        overflow: hidden;
        filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.2));
    }
	  
	

    .hs-search-field__suggestions .results-for, .hs-search-field__suggestions a {
        padding: 0;
    }
    #autocomplete-results {
        padding-top: 0 !important;
    }
    ul#autocomplete-results li {
        margin-top: 32px;
    }

    /* Restyle secondary menu */
    ul.un-list.submenu-list {
        border-radius: 2.5rem;
        margin-top: 1rem;
        padding: 3rem;
        filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.2));
    }
	  ul.submenu-column-list .submenu-item:has(.custom-button-road-to-djuma) {
				padding-bottom: 3rem;
		}

    /* Additional styling for the nested div */
    ul.submenu-list > div.submenu-column-wrapper {
        padding: 0; /* Remove all padding */
    }
    /*Tweak expanded state for menu item*/
    .menu-item__submenu-button[aria-expanded=true] {
        background-color: white; 
        border-radius: 3rem;
			  --site-text-color: #000000;
			  
    }
}    


/* Menu tiles */
.submenu-column:has(.menu-tile) {
	  background-color: #FFF0B2;
	  border-radius: var(--space-8);
	  padding: var(--space-24);
}
.submenu-column:has(.menu-tile) .submenu-column-header {
	  display: none;
}
.submenu-column:has(.menu-tile) a:has(.menu-tile-headline),
.submenu-column:has(.menu-tile) p:has(.menu-tile-headline) {
	  margin-bottom: 0;
}
.submenu-column:has(.menu-tile) .menu-tile-headline {
	  font-size: var(--title-xsmall-size);
}
.submenu-column:has(.menu-tile) .menu-tile-description {
	  font-size: var(--body-font-size);
	  line-height: 1.5;
	  font-style: normal;
    font-weight: 300;
}
ul.submenu-column-list:has(.custom-button-road-to-djuma) {
	  height: 100%;
}
ul.submenu-column-list .submenu-item:has(.custom-button-road-to-djuma) {
    height: 100%;
	  display: flex;
    justify-content: start;
    align-items: flex-end;
}
.submenu-column-header:has(.hide-menu-item) {
	  display: none;
}

/* --------------   Endo of redesign  ------------------- *

/* --------------   Helper classes  ------------------- *
  
/* Add folder to bottom right of the module right */
.folder-overlap-a {
    background-image: url(https://4238094.fs1.hubspotusercontent-eu1.net/hubfs/4238094/raw_assets/public/product-pages-theme-DJUMA/Assets/Brand%20elements/Folder%20overlap%201%20-%20A.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 90%;
}

/* Add folder to top right of module */
.folder-overlap-b {
	  position: relative;
	
	  padding-top: 0;
  	margin-top: -1px;
	  
	  overflow-x: visible !important;
}
.folder-overlap-b .visma-module {
	  z-index: 2;
}
.folder-overlap-b::before {
	  z-index: 1;
	  background-color: var(--background-light-1);
	
	  position: absolute;
	  content: "";
	  width: 50%;
	  height: auto;
	  aspect-ratio: 1279 / 167;
	  top: 0;
	  right: 0;
}

/* Remove top padding in product module with class injection "remove-top-padding" */
.remove-top-padding .product__media-container:first-of-type {
    position: static;
}
.remove-top-padding .product__lower-section {
    padding-top: 1rem;
}


/* --------------  End of helper classes  ------------------- *

/* --------------  Global overrides for modules  ------------------- *

/* Tweak tile blocks */

.tile-block > .tile[data-size="60"] .tile__image-container {
    border-radius: var(--radius-24);
    overflow: hidden;
}
/* Add folder to the ones that have Dark background 4 and 100% */
.tile.background-dark-4[data-size="100"] {
    position: relative;
}
.tile[data-size="100"] {
    aspect-ratio: 16/9;
}
.tile.background-dark-4[data-size="100"]:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0px;
    width: 100%;
    height: 100%;
    background: url(https://4238094.fs1.hubspotusercontent-eu1.net/hubfs/4238094/raw_assets/public/product-pages-theme-DJUMA/Assets/Brand%20elements/Folder%20cutout.svg);
    background-repeat: no-repeat;
}
.tile {
    filter: drop-shadow(2px 4px 6px transparent) !important;
}
  	
/* Add folder to footer */
.brandFolder {
    background-image: url(https://4238094.fs1.hubspotusercontent-eu1.net/hubfs/4238094/raw_assets/public/product-pages-theme-DJUMA/Assets/Brand%20elements/Folder%20footer.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100%;
    padding-bottom: 34rem; /* Default padding */
}



.visma-module-wrapper.footer .visma-footer {
  position: relative;
  z-index: 1;
}

/* The Main Tab (50% width) */
.visma-module-wrapper.footer .visma-footer::before {
  content: '';
  position: absolute;
  bottom: calc(100% + var(--block-padding-vertical));
  left: 0;
  z-index: 10;
  
  width: 50%;
  height: 64px;
  
  background-image: url(https://4238094.fs1.hubspotusercontent-eu1.net/hubfs/4238094/raw_assets/public/product-pages-theme-DJUMA/Assets/Brand%20elements/folder-footer-v2.svg);
  background-size: auto 100%; 
  background-position: right bottom;
  background-repeat: no-repeat;
}
.visma-module-wrapper.footer .visma-footer::after {
  content: '';
  display: block;
  position: absolute;
  bottom: calc(100% + var(--block-padding-vertical));
  
  right: 100%;
  margin-right: -1px;
  
  width: 100vw;
  height: 64px;
  
  background-color: #FFCC00;
  background-image: none;
  pointer-events: none;
  z-index: 5;
}
.module-last {
	  padding-bottom: calc(var(--block-padding-vertical) + 57px) !important;
}

@media (min-width: 1200px) {
  .visma-module-wrapper.footer .visma-footer::before,
  .visma-module-wrapper.footer .visma-footer::after {
    height: 96px;
  }
	.module-last {
	    padding-bottom: calc(var(--block-padding-vertical) + 80px) !important;
  }
}

@media (min-width: 1600px) {
  .visma-module-wrapper.footer .visma-footer::before,
  .visma-module-wrapper.footer .visma-footer::after {
    height: 128px;
  }
	.module-last {
	    padding-bottom: calc(var(--block-padding-vertical) + 105px) !important;
  }
}



/* Make screenshots on product pages stand out on the yellow background */

#hero-application .branded-banner__image-container img {
  border-radius: 1rem;
  border: white 4px solid;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .2));
  margin-top: 1rem;
}

/* Media queries for different screen sizes */
@media (max-width: 1999px) {
    .brandFolder {
        padding-bottom: 20rem; /* Adjust padding for screens between 768px and 1999px */
    }
}

@media (max-width: 767px) {
    .brandFolder {
        padding-bottom: 16rem; /* Adjust padding for screens below 768px */
    }
}

.submenu-item i {
    background-color: #ffcc00;
    border-radius: 5px;
    padding: 8px 24px 6px 6px;
    margin: 0px 12px 0px 0px;
}

.submenu-column-header {
    color: #00000070;
    margin-bottom: var(--space-12);
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.5px ! Important;

}



/* Restyle menu */
.submenu-item__link:has(i) {
	  font-size: var(--title-xsmall-size);
}
.submenu-item i {
    background-color: #fc0;
    border-radius: 5px;
    margin: 0 12px 0 0;
    padding: 8px 24px 6px 6px;
    width: fit-content;
    padding: 0;
    height: 41px;
    width: auto;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
	  margin-right: var(--space-16);
}

@media screen and (min-width: 1200px) and (max-width: 1599px) { 
    .background.visma-module-wrapper.-transparent:not(.visma-module-full-height-wrapper) {
	  margin-top: -108px !important;
    }
}

    


/* Multistep form restyle */
.visma-module .hsfc-Step__Content .hsfc-RichText, 
.visma-module .hsfc-Step__Content .hsfc-FieldLabel {
	  font-family: Lexend, sans-serif !important;
	  --hsf-global__font-family: Lexend, sans-serif !important;
    --hsf-heading__font-family: Lexend, sans-serif !important;
}
.visma-module .hsfc-Step__Content .hsfc-RichText p {
	  font-weight: 300;
}
.visma-module .hsfc-Step__Content .hsfc-FieldLabel {
	  font-weight: 300;
}