@font-face{font-family:Montserrat;font-weight:100 900;font-display:swap;src:url(montserrat.311d352d.woff2) format("woff2")}
@font-face{font-family:Heebo;font-weight:100 900;font-display:swap;src:url(heebo.480b1d24.woff2) format("woff2")}
/* Colours, fonts and measures are those of the support site (Microgate.Support.Public.WebApp);
   the comments quote its Tailwind classes. */
:root{--accent:#c4d600;--primary:#3c3c3c;--secondary:#5a5955;--tertiary:#cbc8c3;--site:#abb3b9;--sand:#f1efeb;--heading:Montserrat,sans-serif;font:400 16px/1.5 Heebo,sans-serif;color:var(--primary);background:var(--sand);color-scheme:light}
*{box-sizing:border-box}
body{display:flex;flex-direction:column;min-height:100vh;margin:0}
main{flex:1}
p{margin:0}
a{color:inherit;text-decoration:none}
hr{height:0;margin:0;border:0;border-top:1px solid var(--tertiary)}
.sprite{display:none}
::selection{background:var(--accent);color:var(--primary)}

/* container px-6 md:px-10 lg:px-6 2xl:px-0 */
.container{width:100%;margin-inline:auto;padding-inline:1.5rem}
@media (min-width:40rem){.container{max-width:40rem}}
@media (min-width:48rem){.container{max-width:48rem;padding-inline:2.5rem}}
@media (min-width:64rem){.container{max-width:64rem;padding-inline:1.5rem}}
@media (min-width:80rem){.container{max-width:80rem}}
@media (min-width:96rem){.container{max-width:96rem;padding-inline:0}}

/* Tenant switches: the logo, the main-site link and the footer. */
[data-for]{display:none}
[data-tenant=microgate] [data-for=microgate],[data-tenant=alge] [data-for=alge]{display:revert}
[data-tenant=microgate]{--logo:url(logo-microgate.569aea1e.svg);--logo-ratio:402.11/69.67}
[data-tenant=alge]{--logo:url(logo-alge.b0982fb9.svg);--logo-ratio:608/140}

/* Header (MainHeader): fixed lg:static z-100, slid up by 120px while scrolling down on
   mobile; the sand row is hidden lg:block, the content below starts after an h-18 spacer. */
#site-header{position:fixed;top:0;z-index:100;width:100%;transition:transform .3s}
#site-header.header-hidden{transform:translateY(-120px)}
body{padding-top:4.5rem}
.topbar{display:none}
@media (min-width:64rem){
  #site-header{position:static}
  body{padding-top:0}
  .topbar{display:block}
  .mobile-menu{display:none}
}

/* Mobile menu: grid and close icons w-10 h-10, panel bg-white h-dvh fading in,
   language selector (CultureSelectorMobile) bg-sand p-6 h-18 opening to h-52,
   main website link h-18 bg-sand px-6 font-extralight text-xl. */
#mobile-menu-toggle{position:absolute;opacity:0;pointer-events:none}
.mobile-menu label{position:relative;z-index:50;display:block;cursor:pointer}
.mobile-menu label svg{display:block;width:2.5rem;height:2.5rem}
.mobile-menu .menu-close,#mobile-menu-toggle:checked~.menu-open{display:none}
#mobile-menu-toggle:checked~.menu-close{display:block}
.menu-panel{position:absolute;top:0;right:0;z-index:40;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;background:#fff;opacity:0;pointer-events:none;transition:opacity .3s}
#mobile-menu-toggle:checked~.menu-panel{opacity:1;pointer-events:auto}
.languages-mobile{flex-shrink:0;min-height:4.5rem;padding:1.5rem;background:var(--sand)}
.languages-mobile summary{display:flex;align-items:center;gap:.75rem;width:max-content;list-style:none;cursor:pointer}
.languages-mobile summary::-webkit-details-marker{display:none}
.languages-mobile summary,.languages-mobile a{font-size:1.25rem;font-weight:200;line-height:1.75rem}
.languages-mobile summary svg{width:1.25rem;height:1.25rem;color:var(--accent);transition:transform .3s}
.languages-mobile[open] summary svg{transform:rotate(180deg)}
#languages-mobile{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-top:1rem}
.menu-items{flex-grow:1}
.menu-site{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;height:4.5rem;padding-inline:1.5rem;background:var(--sand);font-size:1.25rem;font-weight:200}
.masthead .container{justify-content:space-between}

/* Header row 1: bg-sand, h-8.5, gap-6, main site link font-light text-base. */
.topbar .container{display:flex;justify-content:flex-end;align-items:center;gap:1.5rem;height:2.125rem}
@media (min-width:64rem){.topbar .container{padding-inline:0}}
.main-site{font-weight:300}

/* Language selector (CultureSelectorMenu): w-6 hover:w-[102px], current culture
   bg-primary, the others bg-accent hover:bg-white/50, all w-5.5 h-5.5 text-sm. */
#languages{display:flex;justify-content:flex-end;gap:.25rem;width:1.5rem;overflow:hidden;border:1px solid transparent;border-radius:9999px;cursor:pointer;transition:all .3s}
/* Support has four cultures and a fixed 102px; here the width follows the language count. */
#languages:hover,#languages:focus-within{width:calc(var(--count) * 1.625rem - .25rem + 2px);border-color:var(--accent);background:var(--accent)}
#languages a{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:1.375rem;height:1.375rem;padding:.125rem 0 0 1px;border-radius:9999px;background:var(--accent);font-size:.875rem;line-height:1.25rem;transition:background-color .3s}
#languages a:hover{background:rgb(255 255 255/.5)}
#languages a[aria-current]{order:1;background:var(--primary);color:#fff}

/* Header row 2: bg-white h-18 lg:h-21.5, logo h-5 lg:h-7, label font-heading font-bold
   text-site text-base lg:text-[1.375rem] uppercase. The tenant name stays for screen readers. */
.masthead{background:#fff}
.masthead .container{display:flex;align-items:center;height:4.5rem}
h1{display:flex;align-items:center;gap:.5rem;margin:0;font:700 1rem/1.5 var(--heading);text-transform:uppercase}
h1::after{content:"Manuals";color:var(--site);padding-top:1px}
/* The hidden name is still a flex item: the gap moves onto the logo so it is counted once. */
[data-tenant] h1{font-size:0;gap:0}
[data-tenant] h1::before{content:"";margin-right:.5rem;height:1.25rem;aspect-ratio:var(--logo-ratio);background:var(--logo) left center/contain no-repeat}
[data-tenant] h1::after{font-size:1rem}
@media (min-width:64rem){
  .masthead .container{height:5.375rem}
  [data-tenant] h1::before{height:1.75rem}
  [data-tenant] h1::after{font-size:1.375rem}
}

/* Product list: grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6, section mt-6 md:mt-10 lg:mt-15. */
main{padding-top:1.5rem}
#products{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:48rem){main{padding-top:2.5rem}#products{grid-template-columns:repeat(3,1fr)}}
@media (min-width:64rem){main{padding-top:3.75rem}#products{grid-template-columns:repeat(4,1fr)}}

/* CardProduct: bg-lightgrey/20 hover:bg-lightgrey/35 transition-colors duration-300, h-75 md:h-45 xl:h-75, p-4.5 xl:p-7, image w-48 md:w-27 xl:w-48,
   name font-heading font-semibold text-2xl md:text-base xl:text-2xl. */
.card{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:center;min-height:18.75rem;padding:1.125rem;background:rgb(221 221 221/.2);text-align:center;transition:background-color .3s}
.card .badge{position:absolute;top:.75rem;right:.75rem;padding:.25rem .625rem;background:var(--primary);color:#fff;font:600 .75rem/1rem var(--heading);text-transform:uppercase;letter-spacing:.05em}
.card:hover{background:rgb(221 221 221/.35)}
.card img{width:12rem;height:12rem;max-width:100%;object-fit:contain}
.card h2{margin:auto 0 0;font:600 1.5rem/2rem var(--heading)}
@media (min-width:48rem){
  .card{min-height:11.25rem}
  .card img{width:6.75rem;height:6.75rem}
  .card h2{font-size:1rem;line-height:1.5rem}
}
@media (min-width:80rem){
  .card{min-height:18.75rem;padding:1.75rem}
  .card img{width:12rem;height:12rem}
  .card h2{font-size:1.5rem;line-height:2rem}
}
.error{color:#f31238}
#retry{margin-top:1.5rem;padding:.75rem 2rem;border:0;background:var(--accent);color:var(--primary);font:600 1rem var(--heading);cursor:pointer}

/* MainFooterMicrogate / MainFooterAlge. */
/* footer px-0 md:px-10 lg:px-6 2xl:px-0 mt-6 md:mt-10 2xl:mt-21; its section px-6 md:px-0. */
footer{margin-top:1.5rem}
@media (max-width:47.99rem){footer.container{padding-inline:0}footer section{padding-inline:1.5rem}}
footer .contact{display:block;padding:1.125rem 1.875rem;background:#fff}
footer .contact-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:.625rem;border-bottom:1px solid var(--tertiary);font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-wrap:balance}
footer .contact svg{flex-shrink:0;width:1.25rem;height:.75rem;color:var(--accent);transform:rotate(-90deg)}
footer section{display:flex;flex-direction:column;gap:2rem;margin:1.5rem 0 6.25rem}
footer .block,footer .certification{display:flex;flex-direction:column;gap:2rem}
footer .block{flex-grow:1}
footer .company{display:flex;flex-direction:column;flex-grow:1;gap:1rem;min-width:14.5rem}
footer .company>*{margin-left:.5rem}
footer .company-name{font:600 1.125rem/1.75rem var(--heading)}
footer .company p:not(.company-name){font-size:.875rem;font-weight:300;line-height:1.5rem}
footer .social{display:flex;gap:.75rem}
footer .social a{color:var(--secondary);transition:color .3s}
footer .social a:hover{color:rgb(90 89 85/.8)}
footer .social svg{display:block;width:1.5rem;height:1.5rem}
footer .links{display:flex;flex-direction:column;gap:2rem}
footer .apps,footer .legal{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;width:12.75rem;margin-top:.25rem}
footer .apps p{font-size:.875rem;font-weight:300}
footer .multiply{mix-blend-mode:multiply}
footer .legal a{font-size:.875rem;font-weight:700;line-height:1.25rem;letter-spacing:.025em;border-bottom:1px solid var(--accent)}footer .iso{display:flex;flex-grow:1;flex-shrink:0;min-width:14.5rem}
footer .iso img{display:block;height:8rem}
footer .iso a:first-child img{margin-right:1rem}
footer .standard{display:flex;flex-direction:column;gap:.75rem;margin-top:.25rem;padding-right:1rem;font-size:.875rem}
footer .standard-title{font-weight:700;line-height:1rem;text-wrap:balance}
footer .standard p:not(.standard-title){font-weight:300}
@media (min-width:48rem){
  footer{margin-top:2.5rem}
  footer section{margin-top:2.5rem}
  footer .block,footer .certification{flex-direction:row;gap:5rem}
  footer .md-hidden{display:none}
}
@media (min-width:64rem){
  footer .links{flex-direction:row;gap:5rem}
  footer .iso{flex-grow:0;flex-shrink:1;min-width:max-content}
}
@media (min-width:96rem){
  footer{margin-top:5.25rem}
  footer section{flex-direction:row;gap:5rem;margin-top:3.5rem}
  footer .xxl-hidden{display:none}
  footer .company{min-width:12.75rem}
  footer .legal{gap:1rem}
  footer .standard{width:12.75rem}
}

/* Dark theme, following the system: the dark palette of the Microgate login pages
   (Microgate.Keycloak/shared/style/vars.scss), mapped as on the manual pages:
   white surfaces become #232323, sand ones #2e2e2e. Text on the accent stays dark. */
@media (prefers-color-scheme:dark){
  :root{--accent:#acbd00;--primary:#e8e8e8;--secondary:#ababab;--tertiary:#4a4a48;--sand:#2e2e2e;color-scheme:dark}
  .masthead,.menu-panel,footer .contact{background:#232323}
  ::selection,#retry,#languages a,.card .badge{color:#3c3c3c}
  #languages a[aria-current]{background:#3c3c3c;color:#fff}
  .card .badge{background:var(--primary)}
  [data-tenant=microgate] h1::before{filter:brightness(0) invert(1)}
  footer .multiply{mix-blend-mode:normal}
  footer .social a:hover{color:rgb(171 171 171/.8)}
}