/*--- HTML Reset - BLOK ---*/ body { overflow-y: scroll; } body.modal-open { overflow-y: auto; } html, body, p, .page_section p { font-size: var(--font-size-m); font-family: "Open Sans",sans-serif; font-weight: 400; font-style: normal; color: var(--font-text-color); } a, .a { font-size: inherit; font-family: inherit; line-height: inherit; } /*--- HTML Reset - EINDE VAN BLOK ---*/ /*--- Variables - BLOK ---*/ :root { --clr-primary-100: #F5FAEB; --clr-primary-200: #E5F2CC; --clr-primary-300: #D6EBAD; --clr-primary-400: #C7E38F; --clr-primary-500: #B8DB70; --clr-primary-600: #A8D452; --clr-primary-700: #99CC33; --clr-primary-800: #8EBD2F; --clr-primary-900: #99CC33; --clr-secondary-100: #F5F5F6; --clr-secondary-200: #EAECED; --clr-secondary-300: #CBCFD1; --clr-secondary-400: #ACB2B6; --clr-secondary-500: #8D959B; --clr-secondary-600: #6E7880; --clr-secondary-700: #4F5B64; --clr-secondary-800: #393E42; --clr-secondary-900: #2E3235; --clr-service-100: #EDF5F8; --clr-service-200: #CCE3EB; --clr-service-300: #A6CFDC; --clr-service-400: #80BACD; --clr-service-500: #4097B3; --clr-service-600: #1A83A4; --clr-service-700: #00759A; --clr-service-800: #00698B; --clr-service-900: #005E7B; --clr-academy-100: #F3F9FB; --clr-docs-100: #FDF3E5; --clr-lifecycle-100: #ECF8F7; --clr-plan-100: #EAF3FB; --clr-states-white: #ffffff; --clr-states-black: #000000; --clr-states-success: #82AD2B; --clr-states-success-background: #e5f2cc; --clr-states-focus: #2288ff; --clr-states-focus-background: #DEEDFF; --clr-states-warning: #ffcc00; --clr-states-problem: #ee8800; --clr-states-problem-background: #FCEDD9; --clr-states-alert: #dd0000; --box-shadow-standard: 0px 0px 12px 0px rgba(0, 0, 0, 0.15); --box-shadow-mobile-menu: 0 0 #0000, 0 0 #0000,-6px -6px 6px 0 rgba(0,0,0,.05); --base-size: 16; --menu-desktop-width: 68px; --font-size-4xl: 2.25rem; --font-size-3xl: 2rem; --font-size-2xl: 1.75rem; --font-size-xl: 1.5rem; --font-size-l: 1.25rem; --font-size-m: 1rem; --font-size-s: 0.875rem; --font-size-xs: 0.75rem; --font-size-2xs: 0.625rem; --font-text-color: var(--clr-secondary-800); --spacing-6xl: 8rem; --spacing-5xl: 6rem; --spacing-4xl: 4rem; --spacing-3xl: 3rem; --spacing-2xl: 2rem; --spacing-xl: 1.5rem; --spacing-l: 1rem; --spacing-m: 0.75rem; --spacing-s: 0.5rem; --spacing-xs: 0.25rem; --spacing-2xs: 0.125rem; --spacing-none: 0px; --spacing-navbar-desktop: 14px; --radius-2xl: 1.5rem; --radius-xl: 0.75rem; --radius-l: 0.5rem; --radius-m: 0.375rem; --radius-s: 0.25rem; --radius-none: 0px; --svg-size-3xl: 3.5rem; --svg-size-2xl: 2.375rem; --svg-size-xl: 1.875rem; --svg-size-l: 1.5rem; --svg-size-m: 1.25rem; --svg-size-s: 1.125rem; --svg-size-xs: 0.875rem; --svg-size-base: var(--svg-size-l); --svg-flag-germany: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23fc0' d='M0 320h640v160H0z'/%3E%3Cpath fill='%23000001' d='M0 0h640v160H0z'/%3E%3Cpath fill='red' d='M0 160h640v160H0z'/%3E%3C/svg%3E"); --svg-flag-england: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23012169' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23FFF' d='m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z'/%3E%3Cpath fill='%23C8102E' d='m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z'/%3E%3Cpath fill='%23FFF' d='M241 0v480h160V0zM0 160v160h640V160z'/%3E%3Cpath fill='%23C8102E' d='M0 193v96h640v-96zM273 0v480h96V0z'/%3E%3C/svg%3E"); --svg-apps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23393E42' d='M3.6 1.5a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm0 3.2c-.6 0-1-.5-1-1.1 0-.6.4-1.1 1-1.1s1.1.5 1.1 1.1c0 .6-.5 1.1-1 1.1ZM10 1.5a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm0 3.2c-.6 0-1-.5-1-1.1 0-.6.4-1.1 1-1.1s1.1.5 1.1 1.1c0 .6-.5 1.1-1 1.1Zm6.4-3.2a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm0 3.2c-.6 0-1-.5-1-1.1 0-.6.4-1.1 1-1.1s1.1.5 1.1 1.1c0 .6-.5 1.1-1 1.1ZM3.6 7.9a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm0 3.2c-.6 0-1-.5-1-1.1 0-.6.4-1.1 1-1.1s1.1.5 1.1 1.1c0 .6-.5 1.1-1 1.1ZM10 7.9a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm0 3.2c-.6 0-1-.5-1-1.1 0-.6.4-1.1 1-1.1s1.1.5 1.1 1.1c0 .6-.5 1.1-1 1.1Zm6.4-3.2a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm0 3.2c-.6 0-1-.5-1-1.1 0-.6.4-1.1 1-1.1s1.1.5 1.1 1.1c0 .6-.5 1.1-1 1.1ZM3.6 14.3a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm0 3.2c-.6 0-1-.5-1-1.1 0-.6.4-1.1 1-1.1s1.1.5 1.1 1.1c0 .6-.5 1.1-1 1.1Zm6.4-3.2a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm0 3.2c-.6 0-1-.5-1-1.1 0-.6.4-1.1 1-1.1s1.1.5 1.1 1.1c0 .6-.5 1.1-1 1.1Zm6.4-3.2a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm0 3.2c-.6 0-1-.5-1-1.1 0-.6.4-1.1 1-1.1s1.1.5 1.1 1.1c0 .6-.5 1.1-1 1.1Z'/%3E%3C/svg%3E"); --svg-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23393E42' d='M1.52 2v6.5c0 .28.22.5.5.5h6.5a.5.5 0 0 0 .5-.5V2a.5.5 0 0 0-.5-.5h-6.5a.5.5 0 0 0-.5.5Zm1 .5h5.5V8h-5.5V2.5Zm16-.5a.5.5 0 0 0-.5-.5h-6.5a.5.5 0 0 0-.5.5v6.5c0 .28.22.5.5.5h6.5a.5.5 0 0 0 .5-.5V2Zm-1 6h-5.5V2.5h5.5V8Zm-16 10c0 .28.22.5.5.5h6.5a.5.5 0 0 0 .5-.5v-6.5a.5.5 0 0 0-.5-.5h-6.5a.5.5 0 0 0-.5.5V18Zm1-6h5.5v5.5h-5.5V12Zm16-.5a.5.5 0 0 0-.5-.5h-6.5a.5.5 0 0 0-.5.5V18c0 .28.22.5.5.5h6.5a.5.5 0 0 0 .5-.5v-6.5Zm-1 6h-5.5V12h5.5v5.5Z'/%3E%3C/svg%3E"); --svg-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23393E42' d='M10 5.63c-2.44 0-4.43 1.99-4.43 4.43 0 1.46.71 2.77 2 3.71l.05.03c.17.1.54.39.54.64 0 .35 0 1.29 1.04 1.29h1.79c.17 0 .37-.05.55-.21.27-.22.4-.59.4-1.08 0-.01.03-.37.47-.68 1.28-.88 2.01-2.24 2.01-3.71 0-2.44-1.99-4.43-4.43-4.43l.01.01Zm1.85 7.32c-.88.6-.9 1.4-.9 1.49 0 .16-.02.25-.04.29l-1.72.05c-.02-.05-.02-.25-.02-.34 0-.85-.83-1.39-1.02-1.5-1.01-.74-1.57-1.76-1.57-2.88 0-1.89 1.54-3.43 3.43-3.43 1.89 0 3.43 1.54 3.43 3.43 0 1.14-.58 2.2-1.58 2.89h-.01ZM3.41 9.44H1.98c-.28 0-.5.22-.5.5s.22.5.5.5h1.43c.28 0 .5-.22.5-.5s-.22-.5-.5-.5Zm2.3-4.5L4.7 3.93c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71L5 5.65a.485.485 0 0 0 .7 0c.2-.2.2-.51 0-.71h.01Zm4.32-1.06c.28 0 .5-.22.5-.5V1.95c0-.28-.22-.5-.5-.5s-.5.22-.5.5v1.43c0 .28.22.5.5.5Zm6.02.08c-.2-.2-.51-.2-.71 0l-1.01 1.01c-.2.2-.2.51 0 .71a.485.485 0 0 0 .7 0l1.01-1.01c.2-.2.2-.51 0-.71h.01Zm1.97 5.54h-1.43c-.28 0-.5.22-.5.5s.22.5.5.5h1.43c.28 0 .5-.22.5-.5s-.22-.5-.5-.5Zm-6.98 6.97H9.08c-.28 0-.5.22-.5.5s.22.5.5.5h1.96c.28 0 .5-.22.5-.5s-.22-.5-.5-.5Zm0 1.56H9.08c-.28 0-.5.22-.5.5s.22.5.5.5h1.96c.28 0 .5-.22.5-.5s-.22-.5-.5-.5Z'/%3E%3C/svg%3E"); --svg-monitoring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23393E42' d='M1.02 15V2c0-.28.22-.5.5-.5h17c.28 0 .5.22.5.5v4.48c0 .28-.22.5-.5.5s-.5-.22-.5-.5V2.5h-16v12h8c.28 0 .5.22.5.5v2.5h2.14c.28 0 .5.22.5.5s-.22.5-.5.5H7.38c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h2.14v-2h-8c-.28 0-.5-.22-.5-.5Zm16.81-5.09c0 1.03-.37 1.97-.97 2.73l2.01 2.01c.2.2.2.51 0 .71a.485.485 0 0 1-.7 0l-2.01-2.01c-.75.6-1.69.97-2.73.97-2.43 0-4.41-1.98-4.41-4.41S11 5.5 13.43 5.5s4.41 1.98 4.41 4.41h-.01Zm-1 0c0-1.88-1.53-3.41-3.41-3.41-1.88 0-3.41 1.53-3.41 3.41 0 1.88 1.53 3.41 3.41 3.41 1.88 0 3.41-1.53 3.41-3.41Z'/%3E%3C/svg%3E"); --svg-partner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23393E42' d='M18 6.5h-7.5V2c0-.28-.22-.5-.5-.5H2c-.28 0-.5.22-.5.5v16c0 .28.22.5.5.5h16c.28 0 .5-.22.5-.5V7c0-.28-.22-.5-.5-.5Zm-15.5-4h7v15h-1V14c0-.28-.22-.5-.5-.5H4c-.28 0-.5.22-.5.5v3.5h-1v-15Zm2 15v-3h3v3h-3Zm13 0h-7v-10h7v10Z'/%3E%3Cpath fill='%23393E42' d='M4 7h4c.28 0 .5-.22.5-.5v-2c0-.28-.22-.5-.5-.5H4c-.28 0-.5.22-.5.5v2c0 .28.22.5.5.5Zm.5-2h3v1h-3V5ZM4 11.75h4c.28 0 .5-.22.5-.5v-2c0-.28-.22-.5-.5-.5H4c-.28 0-.5.22-.5.5v2c0 .28.22.5.5.5Zm.5-2h3v1h-3v-1ZM12 12h4c.28 0 .5-.22.5-.5v-2c0-.28-.22-.5-.5-.5h-4c-.28 0-.5.22-.5.5v2c0 .28.22.5.5.5Zm.5-2h3v1h-3v-1Zm-.5 6.5h4c.28 0 .5-.22.5-.5v-2c0-.28-.22-.5-.5-.5h-4c-.28 0-.5.22-.5.5v2c0 .28.22.5.5.5Zm.5-2h3v1h-3v-1Z'/%3E%3C/svg%3E"); --svg-load-forward: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23393E42' d='M19.57 7.4a.5.5 0 0 1 .09.7l-1.74 2.23a.5.5 0 0 1-.39.19c-.04 0-.08-.03-.12-.04-.04 0-.07-.02-.1-.03-.03-.01-.06 0-.08-.03L15 8.68a.5.5 0 0 1-.09-.7.5.5 0 0 1 .7-.09l1.34 1.04a7.49 7.49 0 1 0-7.41 8.58c.28 0 .5.22.5.5s-.22.5-.5.5a8.5 8.5 0 0 1 0-17 8.5 8.5 0 0 1 8.39 7.21l.96-1.22a.5.5 0 0 1 .7-.09l-.02-.01Z'/%3E%3C/svg%3E"); --svg-fleet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23393E42' d='M17.94 4.45V3.43a1.3 1.3 0 0 0-1.29-1.29h-1.58a1.3 1.3 0 0 0-1.29 1.3v1.03l-.12.03a1.98 1.98 0 0 0-1.29-.62V2.65c0-.78-.64-1.42-1.42-1.42H9.12c-.78 0-1.42.64-1.42 1.42v1.23c-.51.04-.96.27-1.29.62l-.12-.03V3.44A1.3 1.3 0 0 0 5 2.15H3.42a1.3 1.3 0 0 0-1.29 1.3v1.02A2 2 0 0 0 .55 6.43v10.3a1 1 0 0 0 1 1h4.33v.08a1 1 0 0 0 1 1h6.34a1 1 0 0 0 1-1v-.08h4.32a1 1 0 0 0 1-1V6.43a2 2 0 0 0-1.58-1.95l-.02-.03ZM3.4 3.13h1.58c.16 0 .29.13.29.29v.98H3.1v-.98c0-.16.13-.29.29-.29h.01ZM5.85 16.7H1.52v-2.49h4.33v2.49Zm0-10.86v7.37H1.52V6.4a1 1 0 0 1 1-1H5.9c-.03.14-.05.29-.05.44Zm3.26-3.63h1.83c.23 0 .42.19.42.42v1.21H8.69V2.63c0-.23.19-.42.42-.42Zm4.09 15.57H6.86v-2.82h6.35v2.82h-.01Zm0-3.82H6.85V5.84a1 1 0 0 1 1-1h4.35a1 1 0 0 1 1 1v8.12Zm1.87-10.83h1.58c.16 0 .29.13.29.29v.98h-2.17v-.98c0-.16.13-.29.29-.29h.01Zm3.45 13.57H14.2v-2.49h4.32v2.49Zm0-3.49H14.2V5.84c0-.15-.02-.29-.05-.43h3.38a1 1 0 0 1 1 1v6.81l-.01-.01Z'/%3E%3C/svg%3E"); --svg-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23393E42' d='M16.5 18c0 .28-.22.5-.5.5H4c-.28 0-.5-.22-.5-.5V2c0-.28.22-.5.5-.5h12c.28 0 .5.22.5.5s-.22.5-.5.5H4.5v15H16c.28 0 .5.22.5.5Zm-.15-8.35-4-4c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l3.15 3.15H7c-.28 0-.5.22-.5.5s.22.5.5.5h7.79l-3.15 3.15c-.2.2-.2.51 0 .71a.485.485 0 0 0 .7 0l4-4c.05-.05.08-.1.11-.16a.5.5 0 0 0 0-.38.27.27 0 0 0-.1-.18Z'/%3E%3C/svg%3E"); --svg-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1728 1728'%3E%3Cg clip-path='url(%23a)'%3E%3Ccircle cx='1592.5' cy='1417.5' r='1470.5' fill='%23EDF5F8'/%3E%3Ccircle cx='1592.5' cy='1417.5' r='1075.8' fill='%23CCE3EB'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h1728v1728H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); --svg-checkmark-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 18'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23fff' d='M14.63 5.36s-.06-.09-.1-.12a.88.88 0 0 0-1.22.03l-6.36 6.64-2.48-2.48a.86.86 0 0 0-1.22 0 .86.86 0 0 0 0 1.22l3.08 3.08a.84.84 0 0 0 1.24.02l6.99-7.29a.87.87 0 0 0 .24-.61.79.79 0 0 0-.17-.49Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M3 5h11.79v9H3z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); --svg-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M17.4 13.2c.2.2.2.5 0 .7l-.4.1-.3-.1L10 7.2 3.4 14c-.2.2-.5.2-.7 0a.5.5 0 0 1 0-.8l7-7h.7l7 7Z'/%3E%3C/svg%3E"); --svg-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23393E42' d='M17.37 6.15c.2.2.2.51 0 .71l-7 7a.485.485 0 0 1-.7 0l-7-7c-.2-.2-.2-.51 0-.71.2-.2.51-.2.71 0l6.65 6.65 6.65-6.65c.2-.2.51-.2.71 0h-.02Z'/%3E%3C/svg%3E"); --svg-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22'%3E%3Cpath fill='%23000000' d='m7.41 17.96 6.8-6.79-6.8-6.79a.5.5 0 0 1 0-.73.5.5 0 0 1 .73 0l7.15 7.15a.5.5 0 0 1 0 .73l-7.15 7.15a.5.5 0 0 1-.72 0 .5.5 0 0 1 0-.73v.01Z'/%3E%3C/svg%3E"); --svg-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 21 22'%3E%3Cpath fill='%23000000' d='m13.87 4.38-6.8 6.79 6.8 6.8a.5.5 0 0 1 0 .72.51.51 0 0 1-.36.15.5.5 0 0 1-.36-.15L6 11.54a.5.5 0 0 1 0-.73l7.15-7.15a.5.5 0 0 1 .72 0 .5.5 0 0 1 0 .73v-.01Z'/%3E%3C/svg%3E"); --svg-home-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'%3E%3Cpath fill='%23000000' d='M12.6 9.191h-.651v-6.37h.65c.197 0 .35-.154.35-.35a.347.347 0 0 0-.35-.35H7.35v-1.07A.347.347 0 0 0 7 .7a.347.347 0 0 0-.35.35v1.063H1.4a.347.347 0 0 0-.35.35c0 .196.155.35.35.35h.652v6.37H1.4a.347.347 0 0 0-.35.35c0 .196.154.35.35.35h5.25v1.148l-1.666 1.666a.347.347 0 0 0 0 .497c.14.14.357.14.497 0L7 11.676l1.519 1.52a.34.34 0 0 0 .49 0 .347.347 0 0 0 0-.498l-1.666-1.666V9.884H12.6c.196 0 .35-.154.35-.35a.34.34 0 0 0-.35-.343ZM2.75 2.814h8.499v6.37H2.75v-6.37Zm5.72 2.94L6.734 4.018a.344.344 0 0 0-.378-.07.342.342 0 0 0-.217.322v3.465c0 .14.084.266.217.322a.303.303 0 0 0 .133.028.328.328 0 0 0 .245-.105L8.47 6.244a.35.35 0 0 0 0-.49ZM6.839 6.888V5.11l.889.89-.89.888Z'/%3E%3C/svg%3E"); --svg-checkbox-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M15.29 18H4.71A2.71 2.71 0 0 1 2 15.29V4.71A2.72 2.72 0 0 1 4.71 2h8.77c.28 0 .5.22.5.5a.5.5 0 0 1-.5.5H4.71C3.77 3 3 3.77 3 4.71v10.57c0 .94.77 1.71 1.71 1.71h10.57c.94 0 1.71-.77 1.71-1.71V9.74c0-.28.22-.5.5-.5s.5.22.5.5v5.54c0 1.5-1.22 2.71-2.71 2.71l.01.01Zm-5.33-5.21 9.15-9.55a.51.51 0 0 0-.01-.71.5.5 0 0 0-.71.02l-8.8 9.17-3.7-3.71a.5.5 0 0 0-.71 0 .5.5 0 0 0 0 .71l4.06 4.07a.5.5 0 0 0 .35.15c.14.03.27-.06.36-.15h.01Z'/%3E%3C/svg%3E"); --svg-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 17a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm.5-9.8v6c0 .3-.2.6-.5.6a.5.5 0 0 1-.5-.6v-6c0-.2.2-.4.5-.4s.5.2.5.5Zm.3-2.2c0 .4-.4.8-.8.8a.8.8 0 0 1-.8-.8c0-.4.4-.8.8-.8s.8.4.8.8Z'/%3E%3C/svg%3E"); --svg-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M17.37 4.58c.2.19.21.51.02.71L7.69 15.4a.5.5 0 0 1-.36.15.47.47 0 0 1-.35-.15l-4.3-4.31a.5.5 0 0 1 0-.71c.2-.2.51-.2.71 0l3.94 3.95 9.34-9.74a.5.5 0 0 1 .71-.02l-.01.01Z'/%3E%3C/svg%3E"); --svg-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M12.2 3.08a2.5 2.5 0 0 0-4.33 0L1.63 13.87a2.48 2.48 0 0 0 0 2.5 2.48 2.48 0 0 0 2.17 1.25h12.46a2.5 2.5 0 0 0 2.17-3.75L12.2 3.08Zm5.36 12.79c-.27.47-.76.75-1.3.75H3.8c-.54 0-1.03-.28-1.3-.75a1.49 1.49 0 0 1 0-1.5L8.73 3.58c.27-.47.76-.75 1.3-.75s1.03.28 1.3.75l6.23 10.79c.27.47.27 1.03 0 1.5Zm-8.03-3.62v-6c0-.28.22-.5.5-.5s.5.22.5.5v6a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5Zm1.25 2.25c0 .41-.34.75-.75.75a.76.76 0 0 1-.75-.75c0-.41.34-.75.75-.75.4 0 .75.34.75.75Z'/%3E%3C/svg%3E"); --svg-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M17.52 10C17.52 10.28 17.3 10.5 17.02 10.5H10.52V17C10.52 17.28 10.3 17.5 10.02 17.5C9.73998 17.5 9.51999 17.28 9.51999 17V10.5H3.01999C2.73999 10.5 2.51999 10.28 2.51999 10C2.51999 9.72 2.73999 9.5 3.01999 9.5H9.51999V3C9.51999 2.72 9.73998 2.5 10.02 2.5C10.3 2.5 10.52 2.72 10.52 3V9.5H17.02C17.3 9.5 17.52 9.72 17.52 10Z' fill='%23000000'/%3E%3C/svg%3E"); --svg-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18.5 5.2c0 .3-.2.5-.5.5H2c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h16c.3 0 .5.2.5.5ZM18 9.5H2c-.3 0-.5.2-.5.5s.2.5.5.5h16c.3 0 .5-.2.5-.5s-.2-.5-.5-.5Zm0 4.8H2c-.3 0-.5.2-.5.5s.2.5.5.5h16c.3 0 .5-.2.5-.5s-.2-.5-.5-.5Z'/%3E%3C/svg%3E"); --svg-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M8.96 1.44c-4.14 0-7.5 3.36-7.5 7.5 0 4.14 3.36 7.5 7.5 7.5 1.89 0 3.61-.71 4.93-1.86l3.85 3.85a.485.485 0 0 0 .7 0c.2-.2.2-.51 0-.71l-3.85-3.85a7.433 7.433 0 0 0 1.86-4.93c0-4.14-3.36-7.5-7.5-7.5h.01Zm0 14c-3.58 0-6.5-2.92-6.5-6.5s2.92-6.5 6.5-6.5 6.5 2.92 6.5 6.5-2.92 6.5-6.5 6.5Z'/%3E%3C/svg%3E"); --svg-profile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23393E42' d='M10 11a3.3 3.3 0 0 0 0-6.7 3.3 3.3 0 0 0 0 6.7Zm0-5.7a2.3 2.3 0 1 1 0 4.7 2.3 2.3 0 0 1 0-4.7ZM4.5 17.1l.2.2A9 9 0 0 0 10 19a9 9 0 0 0 5.3-1.7.5.5 0 0 0 .2-.2 9 9 0 1 0-11 0Zm10.1-.6a8 8 0 0 1-9.2 0v-.7a3 3 0 0 1 3-3h3.2a3 3 0 0 1 3 3v.7ZM10 2a8 8 0 0 1 5.6 13.7 4 4 0 0 0-4-4H8.4a4 4 0 0 0-4 4A8 8 0 0 1 2 10a8 8 0 0 1 8-8Z'/%3E%3C/svg%3E"); --svg-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M18 17.5v-15c0-.3-.2-.5-.5-.5h-2V1c0-.3-.2-.5-.5-.5s-.5.2-.5.5v1h-9V1c0-.3-.2-.5-.5-.5s-.5.2-.5.5v1h-2c-.3 0-.5.2-.5.5v15c0 .3.2.5.5.5h15c.3 0 .5-.2.5-.5Zm-1-.5H3V6.5h14V17Zm0-11.5H3V3h1.5v1c0 .3.2.5.5.5s.5-.2.5-.5V3h9v1c0 .3.2.5.5.5s.5-.2.5-.5V3H17v2.5ZM6.2 11.8a.5.5 0 0 1-.2-.3c0-.1 0-.3.2-.3.2-.2.5-.2.7 0l.1.3-.1.3a.5.5 0 0 1-.7 0Zm3.5 0a.5.5 0 0 1-.2-.3v-.2l.2-.2h.1a.5.5 0 0 1 .7.4l-.1.4-.4.1a.5.5 0 0 1-.3-.1Zm3.5 0a.5.5 0 0 1-.2-.3.5.5 0 0 1 .3-.5.5.5 0 0 1 .7.5l-.1.3-.4.2h-.2a.4.4 0 0 1-.1-.1Z'/%3E%3C/svg%3E"); --svg-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M17.5 10c0 .3-.2.5-.5.5h-6.5V17c0 .3-.2.5-.5.5s-.5-.2-.5-.5v-6.5H3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h6.5V3c0-.3.2-.5.5-.5s.5.2.5.5v6.5H17c.3 0 .5.2.5.5Z'/%3E%3C/svg%3E"); --svg-question-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M12.1 11.2c-.5.4-1.2.6-1.9.7v1.6c0 .3-.2.5-.5.5a.5.5 0 0 1-.5-.5v-2c0-.4.2-.6.5-.6A3.7 3.7 0 1 0 6 7.4c0 .3-.2.6-.5.6S5 7.8 5 7.5a4.7 4.7 0 1 1 7.1 3.7ZM9 16.7c0 .4.3.7.7.7.4 0 .8-.3.8-.7 0-.4-.4-.8-.8-.8s-.7.4-.7.8Z'/%3E%3C/svg%3E"); --svg-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 21 24'%3E%3Cpath fill='%23000000' d='M10.41 11.86a5.58 5.58 0 0 1-4.87-2.8c-1-1.71-1-3.86 0-5.62C6.55 1.73 8.4.64 10.41.64a5.59 5.59 0 0 1 4.83 8.42 5.57 5.57 0 0 1-4.83 2.8ZM8.4 13.97h3.99a7.85 7.85 0 0 1 7.85 7.86c0 .7-.61 1.27-1.31 1.27H1.86c-.7 0-1.28-.57-1.28-1.27a7.8 7.8 0 0 1 7.82-7.86Z'/%3E%3C/svg%3E"); --svg-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M2.5 15.5V13c0-.3-.2-.5-.5-.5s-.5.2-.5.5v3c0 .3.2.5.5.5h16c.3 0 .5-.2.5-.5v-3c0-.3-.2-.5-.5-.5s-.5.2-.5.5v2.5h-15Z'/%3E%3Cpath fill='%23000000' d='M10 13.5a.5.5 0 0 1-.5-.5V5.2L6.4 8.4c-.2.2-.6.2-.8 0a.5.5 0 0 1 0-.8l4-4h.2l.2-.1h.2l.2.1 4 4c.2.3.2.6 0 .8-.3.2-.6.2-.8 0l-3.1-3.2V13c0 .3-.2.5-.5.5Z'/%3E%3C/svg%3E"); --svg-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.49 2.31H10.82V0.5C10.82 0.22 10.6 0 10.32 0H4.67001C4.39001 0 4.17001 0.22 4.17001 0.5V2.31H0.5C0.22 2.31 0 2.53 0 2.81C0 3.09 0.22 3.31 0.5 3.31H1.04001L1.98999 15.85C2.00999 16.11 2.22999 16.31 2.48999 16.31H12.52C12.78 16.31 13 16.11 13.02 15.85L13.97 3.31H14.51C14.79 3.31 15.01 3.09 15.01 2.81C15.01 2.53 14.79 2.31 14.51 2.31H14.49ZM5.16 1H9.81V2.31H5.16V1ZM12.04 15.31H2.94L2.03 3.31H12.95L12.04 15.31ZM4.98999 13.31V5.31C4.98999 5.03 5.20999 4.81 5.48999 4.81C5.76999 4.81 5.98999 5.03 5.98999 5.31V13.31C5.98999 13.59 5.76999 13.81 5.48999 13.81C5.20999 13.81 4.98999 13.59 4.98999 13.31ZM8.98999 13.31V5.31C8.98999 5.03 9.20999 4.81 9.48999 4.81C9.76999 4.81 9.98999 5.03 9.98999 5.31V13.31C9.98999 13.59 9.76999 13.81 9.48999 13.81C9.20999 13.81 8.98999 13.59 8.98999 13.31Z' fill='%23393E42'/%3E%3C/svg%3E"); --filter-clr-primary-700: invert(28%) sepia(70%) saturate(1772%) hue-rotate(168deg) brightness(94%) contrast(101%); --filter-clr-secondary-400: invert(64%) sepia(5%) saturate(495%) hue-rotate(163deg) brightness(92%) contrast(85%); --filter-clr-secondary-600: invert(47%) sepia(4%) saturate(989%) hue-rotate(164deg) brightness(96%) contrast(92%); --filter-clr-secondary-800: invert(21%) sepia(7%) saturate(686%) hue-rotate(165deg) brightness(92%) contrast(85%); --filter-clr-secondary-900: invert(12%) sepia(3%) saturate(2042%) hue-rotate(163deg) brightness(100%) contrast(80%); --filter-states-white: invert(100%) sepia(6%) saturate(7474%) hue-rotate(256deg) brightness(116%) contrast(115%); --filter-states-success: invert(56%) sepia(84%) saturate(351%) hue-rotate(38deg) brightness(93%) contrast(95%); --filter-states-focus: invert(42%) sepia(87%) saturate(2566%) hue-rotate(197deg) brightness(101%) contrast(101%); --filter-states-problem: invert(72%) sepia(65%) saturate(5022%) hue-rotate(4deg) brightness(97%) contrast(101%); } /*--- Variables - EINDE VAN BLOK ---*/ /*--- Text styling - BLOK ---*/ @font-face { font-family: "Open Sans"; font-weight: 400; src: url("OpenSans-Regular.ttf") format("truetype"); } @font-face { font-family: "Open Sans"; font-weight: 600; src: url("OpenSans-SemiBold.ttf") format("truetype"); } small, .small { font-family: "Open Sans",sans-serif; font-size: var(--font-size-s); font-style: normal; font-weight: 400; line-height: normal; } .text-muted { color: var(--clr-secondary-400); } label, .label { font-family: "Open Sans",sans-serif; font-size: var(--font-size-xs); font-style: normal; font-weight: 400; line-height: normal; /* padding: var(--spacing-2xs) var(--spacing-xs); */ } button, .button, .btn, [class*="btn"] { font-family: "Open Sans",sans-serif; font-size: var(--font-size-m); font-style: normal; font-weight: 600; line-height: normal; } .h1, .h2, .h3,.h,.h5,.h6, h1, h2, h3, h4, h5, h6 { margin: unset; } h1,h2,h3,h4 { font-family: "Open Sans",sans-serif; font-style: normal; font-weight: 600; line-height: normal; } h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-l); } /*--- Text styling - EINDE VAN BLOK ---*/ /*--- Utilities - BLOK ---*/ @media (min-width: 480px) { .hidden-desktop { display: none; } .hidden-mobile { display: block; } } @media (max-width: 480px) { .hidden-desktop { display: block; } .hidden-mobile { display: none; } } .text-muted\:600 { color: var(--clr-secondary-600); } .section--with-shadow { box-shadow: var(--box-shadow-standard); border-radius: var(--radius-xl); } .section--with-padding { padding: var(--spacing-xl); } .text-muted\:600 { color: var(--clr-secondary-600); } .disabled { cursor: not-allowed; } .f\:xs { font-size: var(--font-size-xs); } .f\:2xs { font-size: var(--font-size-2xs); } hr { border-top-color: var(--clr-secondary-300); margin-top: unset; margin-bottom: var(--spacing-2xl); } .pva-container { display: none; } /*--- Utilities - EINDE VAN BLOK ---*/ /*--- Body reset - BLOK ---*/ body.modal-open { margin-right: -17px; } /*--- Body reset - EINDE VAN BLOK ---*/ /*--- Body background - BLOK ---*/ body { max-width: 1920px; margin: 0 auto; } body.modal-open { margin-right: auto; } body[data-sitemap-state="/"]::before { content: ""; position: fixed; background: var(--svg-background) no-repeat top; background-size: cover; height: 100%; max-width: 1920px; z-index: -1; margin: 0 auto; left: 0; right: 0; } /* body::before { content: ""; position: fixed; background: var(--svg-background) no-repeat top; background-size: cover; height: 100%; z-index: -1; top: 0; left: 0; right: 0; max-width: 1920px; margin: 0 auto; } */ /*--- Body background - EINDE VAN BLOK ---*/ /*--- Login element - BLOK ---*/ .login-block-wrapper { display: flex; justify-content: center; position: fixed; inset: 0; } .login-block { max-width: 528px; padding: 32px; background-color: white; flex-grow: 1; display: flex; flex-direction: column; row-gap: 2rem; align-self: center; } .login-block__header { max-width: 284px; width: 100%; align-self: center; } /*--- Login element - EINDE VAN BLOK ---*/ /*--- Menu Generic - BLOK ---*/ .navbar--desktop, .navbar--mobile { background-color: var(--clr-service-100); z-index: 99; } .navbar__list { list-style: none; /* Remove any default styling */ padding: 0; /* Remove default padding */ text-align: center; /* Center align text */ min-height: 50px; padding-top: var(--spacing-navbar-desktop); } /*--- Menu Generic - EINDE VAN BLOK ---*/ /*--- Menu Desktop Apps overlay - BLOK ---*/ .navbar__apps-wrapper { position: fixed; height: 100vh; width: 20.125rem; z-index: 100; box-shadow: 0 0 12px 0 rgb(0 0 0 / .15); background-color: white; } .navbar__hamburger { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 3.625rem; width: 4.25rem; margin-bottom: -1rem; margin-top: .875rem; } .navbar__hamburger .icon { width: 1.5rem; height: 1.5rem; margin-bottom: 15px; } .navbar__apps { margin-top: 2rem; margin-left: 3rem; margin-right: 3rem; } .navbar__app { display: flex; justify-content: center; padding-top: var(--spacing-m); padding-bottom: var(--spacing-m); } .navbar__app { border: 2px solid transparent; } .navbar__app.navbar__app--home-application { margin-bottom: var(--spacing-2xl); } .navbar__app.navbar__app--home-application img { width: 12rem; height: 4rem; } .navbar__app--child-application { justify-content: flex-start; padding-left: var(--spacing-l); } .navbar__app.navbar__app--child-application img { max-width: 11.8rem; max-height: 3rem; } .navbar__app--beta { position: relative; } .navbar__app--beta::after { content: "BETA"; position: absolute; height: 1.25rem; right: 0; font-size: var(--font-size-xs); color: var(--clr-states-white); border-radius: var(--radius-s); padding: var(--spacing-2xs) .375rem; margin-top: var(--spacing-xs); background-color: var(--clr-secondary-800); } .navbar__app--world:hover { background-color: var(--clr-primary-100); } .navbar__app--analytics:hover { background-color: var(--clr-primary-100); } .navbar__app--academy:hover { background-color: var(--clr-academy-100); } .navbar__app--docs:hover { background-color: var(--clr-docs-100); } .navbar__app--lifecycle:hover { background-color: var(--clr-lifecycle-100); } .navbar__app--plan:hover { background-color: var(--clr-plan-100); } .navbar__app--current, .navbar__app--current:hover { background-color: var(--clr-service-100); } /*--- Menu Desktop Apps overlay - EINDE VAN BLOK ---*/ /*--- Menu Desktop | Base - BLOK ---*/ .navbar--desktop { position: fixed; display: flex; flex-direction: column; justify-content: space-between; height: 100vh; width: var(--menu-desktop-width); padding-top: var(--spacing-navbar-desktop); font-size: 10px; line-height: 110%; text-align: center; overflow-y: auto; overflow-x: hidden; } .navbar--desktop .navbar__link { height: 3.625rem; display: flex; row-gap: var(--spacing-xs); padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); flex-direction: column; justify-content: center; transition: background-color 300ms ease; text-decoration: none; } .navbar--desktop .navbar__link.navbar__link--active { background-color: var(--clr-service-200); } .navbar--desktop .navbar__link:hover { background-color: var(--clr-service-300); } .navbar--desktop .navbar__footer { margin-top: auto; } /*--- Menu Desktop | Base - EINDE VAN BLOK ---*/ /*--- Menu Desktop | Responsiveness - BLOK ---*/ @media (min-width: 480px) { .page-wrapper { margin-left: var(--menu-desktop-width); } .navbar--visible-desktop { display: flex; } .navbar--visible-mobile { display: none; } } @media (max-width: 480px) { .page-wrapper { padding: var(--spacing-l) var(--spacing-l) var(--spacing-l) 0; } .page-wrapper.page-wrapper--home-full-background::before { content: unset; } .navbar--visible-desktop { display: none; } .navbar--visible-mobile { display: block; } .breadcrumb { font-size: var(--font-size-xs); } } /*--- Menu Desktop | Responsiveness - EINDE VAN BLOK ---*/ /*--- Menu Mobile | Base - BLOK ---*/ .navbar { margin-bottom: unset; border: unset; overflow-wrap: break-word; hyphens: auto; } .navbar--mobile { position: fixed; bottom: 0; border-radius: var(--radius-none); transition: border-radius 200ms ease; } .navbar--mobile:has(.collapse.in,.collapsing) { border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl); } .navbar--mobile .navbar__list { padding-top:unset ; } .navbar--mobile .navbar__list, .navbar--mobile .navbar__list.collapse.in { display: flex; justify-content: center; width: 100vw; } .navbar--mobile .navbar__list--dropdown { flex-direction: column; align-items: flex-start; gap: var(--spacing-l); max-height: 80vh; overflow-y: scroll; margin-bottom: unset; padding: var(--spacing-2xl) var(--spacing-3xl); box-shadow: var(--box-shadow-mobile-menu); border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl); } .navbar--mobile .navbar__list--dropdown .navbar__item { padding: var(--spacing-s); } .navbar--mobile .navbar__list--dropdown .navbar__link[aria-expanded="true"], .navbar--mobile .navbar__list--dropdown .navbar__link:focus, .navbar--mobile .navbar__list--dropdown .navbar__link:target { background-color: var(--clr-service-200); } .navbar--mobile .navbar__list--buttons { margin: unset; min-height: 58px; } .navbar--mobile .navbar__list--buttons .navbar__link { display: flex; align-items: center; justify-content: center; width: 4.25rem; min-height: 58px; margin-left: .75rem; margin-right: .75rem; } .navbar--mobile .navbar__list--buttons .navbar__link .icon { --icon-spacing--top: var(--spacing-xs); } /*--- Menu Mobile | Base - EINDE VAN BLOK ---*/ /*--- Page wrapper - BLOK ---*/ .page-wrapper { padding: var(--spacing-2xl); } .page-wrapper.page-wrapper--home-full-background::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; background: var(--svg-background) no-repeat top; background-size: cover; } /*--- Page wrapper - EINDE VAN BLOK ---*/ /*--- Header - BLOK ---*/ header { margin-bottom: var(--spacing-xl); } header.header--white-full-background::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 108px; background: var(--clr-states-white); z-index: -1; } .page-header { padding: unset; margin: unset; border-bottom: unset; } .breadcrumb { margin-bottom: var(--spacing-xl); } .breadcrumb + .page-header { margin-top: unset; padding-bottom: unset; margin-bottom: var(--spacing-xl); } .breadcrumb + .page-header h1 { margin-top: unset; margin-bottom: unset; font-size: 2rem; } /*--- Header - EINDE VAN BLOK ---*/ /*--- Column - BLOK ---*/ .col--size-auto { width: auto; height:auto; padding: 1rem; } /*--- Column /*--- /*--- Bootstrap row spacing - BLOK ---*/ .row + .row { margin-top: var(--spacing-xl); } .row--height { height: 40%; display: flex; align-items: start; } /*--- Bootstrap row spacing - EINDE VAN BLOK ---*/ /*--- Breadcrumb - BLOK ---*/ .breadcrumb { font-size: var(--font-size-s); font-weight: 600; } .breadcrumb a, .breadcrumb li { color: var(--clr-secondary-600); } .breadcrumb li { margin-right: var(--spacing-2xs); } .breadcrumb li.active { color: var(--clr-secondary-800); } .breadcrumb > li + li { position: relative; padding-left: calc(var(--spacing-2xs) + var(--spacing-2xs) + var(--svg-size-xs)); } .breadcrumb > li + li::before { content: var(--svg-arrow-right); filter: var(--filter-clr-secondary-600); position: absolute; width: var(--svg-size-xs); height: var(--svg-size-xs); padding: unset; top: 50%; left: 0; transform: translateY(-50%); } /*--- Breadcrumb - EINDE VAN BLOK ---*/ /*--- Entitylist reset - BLOK ---*/ .entitylist { border: unset; } .entitylist .grid-actions { border-bottom: unset; padding-bottom: unset; margin-bottom: var(--spacing-s); } /*--- Entitylist reset - EINDE VAN BLOK ---*/ /*--- Entitylist - BLOK ---*/ /*--- Entitylist searchbar - BLOK ---*/ .entitylist-search { --input-height: 40px; } .entitylist-search input.query::-moz-placeholder, .entitylist-search input.query::-ms-input-placeholder, .entitylist-search input.query::-webkit-input-placeholder, .entitylist-search input.query::placeholder { color: var(--clr-secondary-300); font-family: Verdana, Geneva, Tahoma, sans-serif; } .entitylist-search input.query { height: var(--input-height); padding: 0.3125rem 0.75rem; border: 1px solid var(--clr-secondary-300); border-right: transparent; border-top-left-radius: var(--radius-s); border-bottom-left-radius: var(--radius-s); box-shadow: none; -webkit-box-shadow: none; } .entitylist-search button { height: var(--input-height); border: 1px solid var(--clr-secondary-300); border-left: transparent; background: var(--clr-neutral--0); border-top-right-radius: var(--radius-s); border-bottom-right-radius: var(--radius-s); color: var(--clr-secondary-800); } .entitylist-search button:hover { background-color: unset; } .entitylist-search input:focus { border-color: var(--clr-service-500); } .entitylist-search input ~ .input-group-btn button { outline: unset; border-width: 1px 1px 1px 0px; border-color: var(--clr-secondary-300); color: var(--clr-secondary-300); transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s, color ease-in-out .15s; } /* .entitylist-search input:focus ~ .input-group-btn button { border-color: var(--clr-states-focus); outline: 0; color: var(--clr-states-focus); } */ .entitylist-search input:focus ~ .input-group-btn button { border-color: var(--clr-service-500); color: unset; outline: 0; } /*--- Entitylist searchbar - EINDE VAN BLOK ---*/ @media (max-width: 480px) { .entitylist a.details-link { text-decoration: underline; } } /*--- Entitylist - EINDE VAN BLOK ---*/ /*--- Bootstrap Table - BLOK ---*/ .lookup-modal .view-grid tr:nth-of-type(even), .table-striped > tbody > tr:nth-of-type(even) { background-color: var(--clr-service-100); } .lookup-modal thead th:first-child .fa-check { display: none; } .lookup-modal tbody tr td:first-child .fa { width: 1.25rem; height: 1.25rem; border-radius: var(--radius-xl); background-color: var(--clr-states-white); border-color: var(--clr-secondary-800); } .lookup-modal tbody tr:hover td:first-child .fa { border-color: black; } .lookup-modal tbody tr td:first-child .fa[aria-checked="true"] { box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,1), inset 0px 0px 0px 50px var(--clr-secondary-800); } .lookup-modal tbody tr:hover td:first-child .fa[aria-checked="true"] { box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,1), inset 0px 0px 0px 50px #000000; } .lookup-modal tbody tr td:first-child .fa[aria-checked="true"]::before { content: unset; } table thead { background-color: var(--clr-service-300); } .entity-grid .view-grid>table>tbody>tr.info>td, .entity-grid .view-grid>.table-hover>tbody>tr.info:hover>td { background-color: initial; } .entity-grid .view-empty.message .alert { background-color: transparent; border-color: transparent; text-align: center; } .lookup-modal .grid-actions { border-bottom: unset; } .lookup-modal .table-hover>tbody>tr:hover, .table-hover>tbody>tr:hover { background-color: var(--clr-service-300); } .lookup-modal .modal-footer { display: flex; } .lookup-modal .modal-footer .primary { order: 1; } .lookup-modal .modal-footer .remove-value { order: 2; } .lookup-modal .modal-footer .cancel { order: 3; } thead th { font-weight: 400; background-color: #a6cfdc; } .fa-search::before { content: var(--svg-search); display: block; width: var(--svg-size-s); height: var(--svg-size-s); filter:var(--filter-clr-secondary-800); } .table .fa-arrow-down::before { content: var(--svg-arrow-down); display: inline-block; width: var(--svg-size-s); height: var(--svg-size-s); } .table .fa-arrow-up::before { content: var(--svg-arrow-up); display: inline-block; width: var(--svg-size-s); height: var(--svg-size-s); } .table .sort > a { display: flex; column-gap: .5rem; align-items: center; } /*--- Bootstrap Table - EINDE VAN BLOK ---*/ /*--- Pagnination - BLOK ---*/ ul.pagination { display: inline-flex; flex-wrap: wrap; gap: var(--spacing-xs); } ul.pagination li a { width: 2.5rem; height: 2.5rem; font-size: var(--font-size-s); display: flex; justify-content: center; align-items: center; margin-left: unset; color: var(--clr-secondary-800); border: 1px solid transparent; border-radius: var(--radius-s); } /* ul.pagination li a:hover { border-color: var(--clr-secondary-800); } */ ul.pagination [class*="entity-pager"], ul.pagination [class*="entity-pager"]:hover { color: transparent; } ul.pagination [class*="entity-pager"]::before { position: absolute; width: 24px; height: 24px; filter: var(--filter-clr-secondary-800); } ul.pagination [class="entity-pager-prev-link"]::before { content: var(--svg-arrow-left); } ul.pagination [class="entity-pager-next-link"]::before { content: var(--svg-arrow-right); } ul.pagination [class*="entity-pager"]:hover::before { filter: var(--filter-wit); } /* ul.pagination li a[aria-disabled="true"], ul.pagination li a[aria-disabled="true"]:hover { background: var(--clr-neutral--5); } */ ul.pagination li a[aria-disabled="true"][class*="entity-pager"]::before { filter: var(--filter-clr-secondary-400); } ul.pagination .active a, ul.pagination .active a:hover, ul.pagination .active a:focus { background-color: var(--clr-service-600) !important; color: var(--clr-states-white); } /*--- Pagnination - EINDE VAN BLOK ---*/ /*--- Entityform reset - BLOK ---*/ .crmEntityFormView .tab { margin-bottom: unset; } .crmEntityFormView .tab-title, .tab-title { border-bottom: unset; } .crmEntityFormView .actions { border-top: unset; margin-top: unset !important; } .entity-form .cell { padding: unset; } .entity-form tr:has(:not(td.zero-cell)) + tr td:not(.crmquickform-cell) { padding-top: 1rem; } .entity-form .subgrid .grid-actions { border-bottom: unset; } .agx__entityform > [class*="col-"] { padding-left: unset; padding-right: unset; } .agx__entityform .crmEntityFormView { border: unset; } .agx__entityform .tab-title { border-bottom: unset; margin-bottom: var(--spacing-l); } .agx__entityform:not(.agx__entityform--attachment-section) fieldset, .agx__entityform:not(.agx__entityform--attachment-section) .tab fieldset[aria-label]:last-child { margin-bottom: var(--spacing-xl); } /*.agx__entityform fieldset:has(iframe.quickform:not([src="about:blank"])) { margin-bottom: unset; } */ .agx__entityform fieldset h3 { margin-top: unset; } .agx__entityform .section { background-color: unset; } .agx__entityform .checkbox-cell { display: flex; } .agx__entityform .checkbox-cell .info { padding: unset; order: 2; margin-left: var(--spacing-s); } .agx__entityform .checkbox-cell .control { order: 1; } /*Reset from the MSFT Preform.css bundle*/ html[dir=ltr] .crmEntityFormView .cell.checkbox-cell div.info { padding-left: unset;; } .agx__entityform .checkbox-cell input[type="checkbox"] { position: revert; width: 1.25rem; height: 1.25rem; } .agx__entityform .notes { clear: both; } .agx__entityform .actions { border-top: unset; } /*--- Entityform reset - EINDE VAN BLOK ---*/ /*--- Main - BLOK ---*/ main .container-fluid .row { padding-top: 12px; padding-bottom: 12px; } /*--- Main - EINDE VAN BLOK ---*/ /*--- Entityform modal iFrame - BLOK ---*/ .modal-header { padding: 1.25rem 1.25rem 0 1.25rem; } .modal-body { padding: 1rem 1.25rem 1.25rem 1.25rem; } #content-container:has(form[action*="/_portal/modal-form-template-path/"]) { margin: unset; padding: unset; overflow: hidden; } form[action*="/_portal/modal-form-template-path/"] .tab-title { display: none; } form[action*="/_portal/modal-form-template-path/"] .section tr:not(:nth-child(-n + 2)) td { padding-top: 1rem; } /*--- Entityform modal iFrame - EINDE VAN BLOK ---*/ /*--- Entityform - BLOK ---*/ /* Active state */ .agx__entityform .crmEntityFormView { counter-reset: sectie; border: unset; } .agx__entityform.agx__entityform--hide-tab-title .tab-title { display: none; } .agx__entityform fieldset { counter-increment: sectie; } .agx__entityform fieldset .section-title { margin-bottom: var(--spacing-l); } .agx__entityform fieldset h3 { position: relative; margin-top: unset; line-height: 2.5rem; } /*Used to hide the 'created by' field in the comment section*/ .agx__entityform.agx__entityform--comment-createdby-hidden .notes-cell .entity-timeline .attachment-outer-border:has(#attachment-load-more[style*="display:none"]) { display: none; } .agx__entityform .entity-form:not(.form-readonly) fieldset h3 { padding-left: calc(2.5rem + 1rem); } .agx__entityform .entity-form:not(.form-readonly) fieldset h3::before { content: counter(sectie); position: absolute; left: 0; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; background: var(--clr-service-900); color: white; border-radius: 50%; } .agx__entityform .cell .input-group-btn button, form[action*="/_portal/modal-form-template-path/"] .cell .input-group-btn button { height: 40px; } .agx__entityform .form-control, form[action*="/_portal/modal-form-template-path/"] .form-control { height: 40px; padding: unset; padding-left: var(--spacing-s); padding-right: var(--spacing-s); border-color: var(--clr-secondary-300); border-radius: var(--radius-s); box-shadow: inset 0 1px 0px rgba(0,0,0,.075); } .agx__entityform .form-control:focus, form[action*="/_portal/modal-form-template-path/"] .form-control:focus { border-color: var(--clr-states-focus); } .agx__entityform .picklist-cell .form-control.lookup, form[action*="/_portal/modal-form-template-path/"] .picklist-cell .form-control.lookup { border-right: unset ; } .agx__entityform .picklist-cell .form-control.picklist:focus, form[action*="/_portal/modal-form-template-path/"] .picklist-cell .form-control.picklist:focus { border-color: var(--clr-states-focus); } .agx__entityform .picklist-cell .input-group-btn button, form[action*="/_portal/modal-form-template-path/"] .picklist-cell .input-group-btn button { height: 40px; } .cell.picklist-cell[role="radiogroup"] .control, .cell.boolean-radio-cell[role="radiogroup"] .control, form[action*="/_portal/modal-form-template-path/"] .cell.picklist-cell[role="radiogroup"] .control { padding-left: var(--spacing-s); } .cell.picklist-cell[role="radiogroup"] .control input[type="radio"], form[action*="/_portal/modal-form-template-path/"] .cell.picklist-cell[role="radiogroup"] .control input[type="radio"] { margin: unset; } .cell.picklist-cell[role="radiogroup"] .control label, form[action*="/_portal/modal-form-template-path/"] .cell.picklist-cell[role="radiogroup"] .control label, .cell.checkbox-cell .info label, form[action*="/_portal/modal-form-template-path/"] .cell.checkbox-cell .info label { font-size: 1rem; color: var(--clr-secondary-800); margin-bottom: unset; } .cell.picklist-cell[role="radiogroup"] .control .picklist.vertical.aspNetDisabled, form[action*="/_portal/modal-form-template-path/"] .cell.picklist-cell[role="radiogroup"] .control .picklist.vertical.aspNetDisabled { display: grid; row-gap: .5rem; } .cell.picklist-cell[role="radiogroup"] .control .picklist.vertical:not(.aspNetDisabled), .cell.picklist-cell[role="radiogroup"] .control .picklist.vertical.aspNetDisabled > span, form[action*="/_portal/modal-form-template-path/"] .cell.picklist-cell[role="radiogroup"] .control .picklist.vertical:not(.aspNetDisabled), form[action*="/_portal/modal-form-template-path/"] .cell.picklist-cell[role="radiogroup"] .control .picklist.vertical.aspNetDisabled > span { display: grid; grid-template-columns: 1.25rem 1fr; column-gap: .5rem; row-gap: .5rem; align-items: center; } .cell.picklist-cell[role="radiogroup"] .control .picklist.vertical br, form[action*="/_portal/modal-form-template-path/"] .cell.picklist-cell[role="radiogroup"] .control .picklist.vertical br { display: none; } .cell.boolean-radio-cell input[type="radio"], .cell.picklist-cell[role="radiogroup"] input[type="radio"], form[action*="/_portal/modal-form-template-path/"] .cell.picklist-cell[role="radiogroup"] input[type="radio"] { width: 1.25rem; height: 1.2rem; accent-color: var(--clr-secondary-800); } .cell.checkbox-cell .control input[type="checkbox"], form[action*="/_portal/modal-form-template-path/"] .cell.checkbox-cell .control input[type="checkbox"] { appearance: none; border: 1px solid var(--clr-secondary-800); width: 1.125rem; height: 1.125rem; } .checkbox-cell .control span:has(input[type="checkbox"]), form[action*="/_portal/modal-form-template-path/"] .checkbox-cell .control span:has(input[type="checkbox"]) { position: relative; display: flex; } .checkbox-cell .control span:has(input[type="checkbox"]) input[type="checkbox"] , form[action*="/_portal/modal-form-template-path/"] .checkbox-cell .control span:has(input[type="checkbox"]) input[type="checkbox"] { appearance: none; width: 1.125rem !important; height: 1.125rem !important; margin-top: unset; border: 1px solid var(--clr-secondary-800); background-color: white; border-radius: .25rem; outline-offset: 0; } .checkbox-cell .control span:has(input[type="checkbox"]:checked) input[type="checkbox"]:focus , form[action*="/_portal/modal-form-template-path/"] .checkbox-cell .control span:has(input[type="checkbox"]) input[type="checkbox"]:focus { outline: 1.5px solid white; outline-offset: -2.5px; } .checkbox-cell .control span:has(input[type="checkbox"]) input[type="checkbox"]:hover , form[action*="/_portal/modal-form-template-path/"] .checkbox-cell .control span:has(input[type="checkbox"]) input[type="checkbox"]:hover { border-color: black } .checkbox-cell .control span:has(input[type="checkbox"])::after , form[action*="/_portal/modal-form-template-path/"] .checkbox-cell .control span:has(input[type="checkbox"])::after { content:var(--svg-checkmark-white); position: absolute; width: 1.125rem; height: 1.125rem; top: 0px; left: 0px; opacity: 0; pointer-events:none; } .checkbox-cell .control span:has(input[type="checkbox"]):has(input[type="checkbox"]:checked) input[type="checkbox"], form[action*="/_portal/modal-form-template-path/"] .checkbox-cell .control span:has(input[type="checkbox"]):has(input[type="checkbox"]:checked) input[type="checkbox"] { background-color: black; border-color: black; } .checkbox-cell .control span:has(input[type="checkbox"]):has(input[type="checkbox"]:checked)::after, form[action*="/_portal/modal-form-template-path/"] .checkbox-cell .control span:has(input[type="checkbox"]):has(input[type="checkbox"]:checked)::after { opacity: 1; } .cell.picklist-cell[role="radiogroup"] input[type="radio"]:hover, form[action*="/_portal/modal-form-template-path/"] .cell.picklist-cell[role="radiogroup"] input[type="radio"]:hover { accent-color: black; } .cell.textarea textarea, form[action*="/_portal/modal-form-template-path/"] .cell.textarea textarea { min-height: 120px; padding: var(--spacing-s) var(--spacing-m); } .agx__entityform--attachment-section .tab, .agx__entityform--attachment-section fieldset:last-of-type { margin-bottom: unset; } .agx__entityform--attachment-section .file-info { margin-bottom: var(--spacing-xl); } .agx__entityform--attachment-section .actions { margin-top: unset; } .agx__entityform .control .text-muted { padding-left: var(--spacing-s); } .container.quickform .crmEntityFormView .cell, .crmEntityFormView .cell { margin-bottom: unset; } /* Lookup + one-click-lookup - START */ .agx__entityform .portal--one-click-lookup, .portal--one-click-lookup, .portal--one-click-lookup[readonly] { border-right: unset; background-color: var(--clr-states-white); cursor: pointer; transition: unset; } .agx__entityform .portal--one-click-lookup:focus, .portal--one-click-lookup:focus, .portal--one-click-lookup[readonly]:focus { box-shadow: unset; border-color: var(--clr-states-focus); } /* !important needed because default portal script adds 'inline' */ .agx__entityform .cell.lookup .input-group-btn .clearlookupfield, .cell.lookup .input-group-btn .clearlookupfield { display: none !important; } .agx__entityform .portal--one-click-lookup ~ .input-group-btn button.launchentitylookup, .portal--one-click-lookup ~ .input-group-btn button.launchentitylookup, .portal--one-click-lookup[readonly] ~ .input-group-btn button.launchentitylookup { background-color: var(--clr-states-white); border-width: 1px; border-left: unset; border-color: var(--clr-secondary-300); box-shadow: inset 0 1px 0px rgba(0,0,0,.075); color: var(--clr-secondary-300); } .agx__entityform .portal--one-click-lookup ~ .input-group-btn button.launchentitylookup:hover, .portal--one-click-lookup ~ .input-group-btn button.launchentitylookup:hover, .portal--one-click-lookup[readonly] ~ .input-group-btn button.launchentitylookup:hover { color: var(--clr-secondary-300); } .agx__entityform .portal--one-click-lookup:focus ~ .input-group-btn button.launchentitylookup, .portal--one-click-lookup:focus ~ .input-group-btn button.launchentitylookup, .portal--one-click-lookup[readonly]:focus ~ .input-group-btn button.launchentitylookup { border-color: var(--clr-states-focus); border-left: unset; } /* Lookup + one-click-lookup - EIND */ /* Read Only state - START */ .agx__entityform .form-readonly .form-control[readonly], form[action*="/_portal/modal-form-template-path/"] .form-readonly .form-control[readonly] { background-color: var(--clr-secondary-100); color: var(--clr-secondary-400); padding: unset; padding-left: var(--spacing-s); padding-right: var(--spacing-s); border: 1px solid; border-color: var(--clr-secondary-300); border-radius: var(--radius-s); box-shadow: inset 0 1px 0px rgba(0,0,0,.075); } .agx__entityform .form-readonly fieldset h3 { font-size: var(--font-size-l); } .agx__entityform .form-control.picklist.readonly, form[action*="/_portal/modal-form-template-path/"] .form-control.picklist.readonly { background-color: var(--clr-secondary-100); border: 1px solid var(--clr-secondary-300); border-radius: var(--radius-s); color: var(--clr-secondary-400); padding-left: var(--spacing-m); } /* Read Only state - END */ /* Timeline - Generic - START */ .entity-timeline { padding: unset; } .entity-timeline .postedon { color: var(--clr-secondary-400); font-weight: 600; } .entity-timeline .buttoncontainer i.icon::before { filter: var(--filter-states-white); } .entity-timeline .addnote .fa::before { position: absolute; top: var(--icon-placement--top); right: var(--icon-placement--right); bottom: var(--icon-placement--bottom); left: var(--icon-placement--left); transform: var(--icon-transform); width: var(--svg-width); height: var(--svg-height); } .entity-timeline .addnote .fa { --svg-width: var(--svg-size-base); --svg-height: var(--svg-size-base); --svg-max-size: max(var(--svg-width), var(--svg-height)); --icon-placement--top: 50%; --icon-placement--right: 0; --icon-placement--bottom: 0; --icon-placement--left: 0; --icon-transform: translateY(-50%); --icon-spacing--top: 0; --icon-spacing--right: 0; --icon-spacing--bottom: 0; --icon-spacing--left: var(--spacing-s); padding-top: calc(var(--svg-max-size) + var(--icon-spacing--top)); padding-right: calc(var(--svg-max-size) + var(--icon-spacing--right)); padding-bottom: calc(var(--svg-max-size) + var(--icon-spacing--bottom)); padding-left: calc(var(--svg-max-size) + var(--icon-spacing--left)); position: relative; } .entity-timeline .glyphicon.glyphicon-user::before { content: var(--svg-user); display: inline-block; width: var(--svg-size-l); height: var(--svg-size-l); filter: var(--filter-clr-secondary-900); } .entity-timeline .note .row .header .metadata .postedon { padding-bottom: 5px; } .entity-timeline .from h5 { color: var(--clr-secondary-400); font-size: var(--font-size-s); font-weight: 700; } .entity-timeline .description p { font-family: "Open Sans"; color: var(--clr-secondary-400); font-size: var(--font-size-s); } /* Timeline - Generic - END */ /* Timeline - Custom layout - START */ .entity-timeline--addnote-above-title-on-mobile .entity-timeline .notes-empty.message { padding-top: unset; } .entity-timeline--addnote-above-title-on-mobile .entity-timeline { display: grid; grid-auto-rows: max-content; grid-template-columns: 1fr 1fr; flex-direction: column; } .entity-timeline--addnote-above-title-on-mobile .entity-timeline .page-header { width: 100%; } .entity-timeline--addnote-above-title-on-mobile .entity-timeline .timelineheader { width: 100%; } .entity-timeline--addnote-above-title-on-mobile .entity-timeline .notes { grid-column-start: 1; grid-column-end: -1; /* grid-row-start: 2; */ } .entity-timeline--addnote-above-title-on-mobile .entity-timeline .notes-empty.message[style="display: block;"] { grid-column-start: 1; grid-column-end: -1; } @media (max-width: 480px) { .entity-timeline--addnote-above-title-on-mobile .entity-timeline { grid-template-rows: 40px 40px 40px 100%; } .entity-timeline--addnote-above-title-on-mobile .entity-timeline .page-header { grid-row-start: 2; grid-column-start: 1; grid-column-end: -1; } .entity-timeline--addnote-above-title-on-mobile .entity-timeline .timelineheader { grid-row-start: 1; grid-column-start: 1; grid-column-end: -1; width: 100%; } .entity-timeline--addnote-above-title-on-mobile .entity-timeline .timelineheader .buttoncontainer { width: 100%; padding: unset; } .entity-timeline--addnote-above-title-on-mobile .entity-timeline .timelineheader .addnote { width: 100% } .entity-timeline--addnote-above-title-on-mobile .entity-timeline .notes-empty.message[style="display: block;"] + .notes { display: none; } .entity-timeline--addnote-above-title-on-mobile .entity-timeline .notes-empty.message[style="display: none;"] ~ .notes { grid-row-start: 3; grid-row-end: -1; } } /* Timeline - Custom layout - END */ /* Notes - START */ .notes-cell .info label[for="notescontrol"] { display: none !important; } /* Notes - END */ /*--- Entityform - EINDE VAN BLOK ---*/ /*--- multistep form - BLOK ---*/ .agx__webform.agx__webform--hide-progressbar div[id*="_ProgressIndicator"] { display: none; } /*--- multistep form - EINDE VAN BLOK ---*/ /*--- Entity & Multistep form - BLOK ---*/ #UploadButton .fa-arrow-up { --svg-size: 16px; width: var(--svg-size); } #UploadButton .fa-arrow-up::before { content: var(--svg-upload); filter: var(--filter-clr-primary-700); position: absolute; left: 0; width: var(--svg-size); height: var(--svg-size); } #UploadButton:hover .fa-arrow-up::before { filter: var(--filter-states-white); } #UploadButton[disabled]:hover .fa-arrow-up::before { filter: var(--filter-primary-700); } #UploadButton:focus .fa-arrow-up::before { filter: var(--filter-primary-700); } .fa-trash-o::before { content: var(--svg-trash); } .fa-calendar::before { content: var(--svg-icon-calendar); } .fa-trash-o::before { height: auto !important; } .fa-trash-o::before, .icon-calendar::before { position: absolute; top: var(--icon-placement--top); right: var(--icon-placement--right); bottom: var(--icon-placement--bottom); left: var(--icon-placement--left); transform: var(--icon-transform); width: var(--svg-width); height: var(--svg-height); filter: var(--filter-clr-secondary-800); } .fa-trash-o, .icon-calendar{ --svg-width: var(--svg-size-m); --svg-height: var(--svg-size-m); --svg-max-size: max(var(--svg-width), var(--svg-height)); --icon-placement--top: 50%; --icon-placement--right: 0; --icon-placement--bottom: 0; --icon-placement--left: 0; --icon-transform: translateY(-50%); --icon-spacing--top: 0; --icon-spacing--right: 0; --icon-spacing--bottom: 0; --icon-spacing--left: var(--spacing-s); padding-top: calc(var(--svg-max-size) + var(--icon-spacing--top)); padding-right: calc(var(--svg-max-size) + var(--icon-spacing--right)); padding-bottom: calc(var(--svg-max-size) + var(--icon-spacing--bottom)); padding-left: calc(var(--svg-max-size) + var(--icon-spacing--left)); position: relative; width: var(--svg-width); height: var(--svg-height); display: inline-block; } .input-group-addon { min-width: 40px; border-left: unset; padding: unset; } .input-group-addon:not(:first-child):not(:last-child) { border-top-right-radius: var(--radius-s); border-bottom-right-radius: var(--radius-s); } .bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th { border-radius: 0px; } /*--- Entity & Multistep form - EINDE VAN BLOK ---*/ /*--- Validation summary - BLOK ---*/ .validation-summary{ background-color: var(--clr-states-problem-background) !important; border-color: var(--clr-states-problem); padding: 9px 12px; } .validation-summary:focus-visible { outline: none; } .validation-summary h2.validation-header { margin: 0; font-size: 1rem; font-weight: normal; } .validation-summary a { color: var(--clr-secondary-800) !important; } .validation-summary .fa-info-circle { --svg-width: var(--svg-size-base); --svg-height: var(--svg-size-base); --svg-max-size: max(var(--svg-width), var(--svg-height)); --icon-placement--top: 50%; --icon-placement--right: 0; --icon-placement--bottom: 0; --icon-placement--left: 0; --icon-transform: translateY(-50%); --icon-spacing--top: 0; --icon-spacing--right: 0; --icon-spacing--bottom: 0; --icon-spacing--left: var(--spacing-s); padding-top: calc(var(--svg-max-size) + var(--icon-spacing--top)); padding-right: calc(var(--svg-max-size) + var(--icon-spacing--right)); padding-bottom: calc(var(--svg-max-size) + var(--icon-spacing--bottom)); padding-left: calc(var(--svg-max-size) + var(--icon-spacing--left)); position: relative; } .validation-summary .fa-info-circle::before{ content: var(--svg-warning); filter: var(--filter-states-problem); position: absolute; top: var(--icon-placement--top); left: var(--icon-placement--left); transform: var(--icon-transform); width: var(--svg-width); height: var(--svg-height); } /*--- Validation summary - EINDE VAN BLOK ---*/ /*--- image - BLOK ---*/ .img--full-width { width: 100%; height: 100%; object-fit: contain; } /*--- image - EINDE VAN BLOK ---*/ /*--- Quickview - BLOK ---*/ .crmEntityFormView table[data-name*="__hide_qv_title"] .crmquickform-cell .info { display: none; } body .crmEntityFormView .entity-form .cell.crmquickform-cell:first-child { border-right: unset; } body .container.quickform .cell input:not([style="display: none;"]) { height: 40px; padding: unset; padding-left: var(--spacing-s); padding-right: var(--spacing-s); border: 1px solid var(--clr-secondary-300); border-radius: var(--radius-s); box-shadow: inset 0 1px 0px rgba(0,0,0,.075); background-color: #f4f5f6; } body .container.quickform .cell input:not([style="display: none;"]) + .text-muted { padding-left: var(--spacing-s); } body .container.quickform .cell input:not([style="display: none;"])[readonly] { background-color: var(--clr-secondary-100); color: var(--clr-secondary-400); } /* styling for within the iFrame */ body:has(.container.quickform) { overflow-y: auto; } body .container.quickform { width: 100%; } body .container.quickform fieldset { margin-bottom: unset; } body .container.quickform .cell { padding-left: unset; padding-right: unset; } /*--- Quickview - EINDE VAN BLOK ---*/ /*--- Case detail page - BLOK ---*/ .case-header { display: flex; flex-wrap: wrap; column-gap: calc( var(--spacing-2xl) + var(--spacing-s)); row-gap: var(--spacing-l); padding-top: var(--spacing-l); padding-bottom: var(--spacing-l); } .case-header--resolved { padding: var(--spacing-xl); border-radius: var(--radius-s); background-color: var(--clr-secondary-200); border: 1px solid var(--clr-secondary-300); } .case-header p { margin-bottom: unset; } .case-header > div { display: flex; flex-direction: column; justify-content: space-between; } /* .case-header__information { display: flex; flex-direction: column; gap: var(--spacing-s); } */ .case-information__status .label--resolved .icon::before { filter: var(--filter-states-white); } .case-information__status .label--inProgress .icon::before { filter: var(--clr-secondary-800); } .case-information__last-update-owner { width: max(300px, calc(100% - 230px)); } .case-information__last-update-owner [data-name="tab_portal"] { margin-bottom: unset; } .case-information__last-update-owner [data-name="tab_portal"] fieldset { margin-bottom: unset; } .case-information__last-update-owner table { background-color: unset; } .case-information__last-update-owner tbody { display: flex; flex-wrap: wrap; } .case-information__last-update-owner .entity-form .cell { padding: unset; } .case-information__last-update-owner .info { padding-bottom: unset; padding-top: .5rem; } .case-information__last-update-owner .info label { padding-left: unset; } .case-information__last-update-owner .cell div.info.required label::after { content: ""; } .case-information__last-update-owner .form-control { padding: unset; height: auto; } .case-information__last-update-owner .form-control-cell { display: flex; flex-direction: column; justify-content: space-between; height: 100%; margin-bottom: unset;; } .case-information__last-update-owner table td.info { padding-top: unset; } .case-details { --case-shadow: var(--box-shadow-standard); --case-padding: var(--spacing-xl); display: flex; gap: var(--spacing-xl); } .case-details > div { width: calc(50% - var(--spacing-m)); } .case-details__form { display: flex; flex-direction: column; gap: var(--spacing-l); box-shadow: var(--case-shadow); padding: var(--case-padding); border-radius: var(--radius-xl); } .case-form__header { display: flex; justify-content: space-between; } .case-details__workorders { box-shadow: var(--case-shadow); padding: var(--case-padding); border-radius: var(--radius-xl); } .case-details__communication { padding: var(--case-padding); } .case-details__communication .notes-cell { padding: unset; } /* .case-details__communication .notes-cell > :first-child { display: none !important; } */ .case-details__communication .notes-cell .entity-timeline { padding: unset; } .case-details__communication .notes-cell .entity-timeline div:nth-of-type(even).note { background-color: var(--clr-service-100); } .case-details__communication .notes-cell .entity-timeline .page-header h3 { font-size: 1rem; } .case-details__communication .notes-cell .entity-timeline .note .subject { padding: unset; } @media (max-width:480px){ .case-details { --case-shadow: unset; --case-padding: unset; } .case-form__header { flex-direction: column; gap: 1rem; } .case-information__status { order: 2; } .case-information__casenumber { order:1; } .case-details__form button.workflow-link { width: 100%; } } @media (max-width: 768px) { .case-details { flex-direction: column; } .case-details > div { width: 100%; } } /*--- Case detail page - EINDE VAN BLOK ---*/ /*--- Case Overview - BLOK ---*/ .page-header--with-cta { display: flex; flex-wrap: wrap; gap: var(--spacing-xl); align-items: center; } /*--- Case Overview - EINDE VAN BLOK ---*/ /*--- Workorder - BLOK ---*/ .workorder-closure__header { margin-bottom: var(--spacing-xl); } .workorder-header { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: var(--spacing-xl); } .workorder-header > div { min-width: 170px; } /*--- Workorder - EINDE VAN BLOK ---*/ /*--- Success page - BLOK ---*/ .success__body { margin-top: 1.5rem; } .success__body--lg-bold { font-size: var(--font-size-xl); font-weight: 600; } .success__cta { margin-top: 1rem; } /*--- Success page - EINDE VAN BLOK ---*/ /*--- Tabs - BLOK ---*/ .tabs--custom { border: unset; padding: unset; font-family:"Open Sans"; font-size: 1rem; } .tabs--custom .ui-tabs-nav { display: flex; flex-wrap: wrap; padding: unset; border: unset; } .tabs--custom .ui-tabs-tab { background-color: var(--clr-service-100); border-radius: unset; border: unset; flex: 1 0 0; font-weight: 600; } .tabs--custom li.ui-tabs-tab { margin: unset; } .entitylist-filter{ display: none; } .tabs--custom .ui-tabs-tab a { color: var(--clr-neutral--0); align-self: center; width: 100%; min-width: 170px; text-align: center; } .tabs--custom .ui-tabs-tab:not(.ui-tabs-active) a:hover { background-color: var(--clr-service-200); } .tabs--custom .ui-tabs-active { background-color: var(--clr-service-300); color: var(--clr-neutral--0); } .tabs--custom .ui-tabs-panel { padding: unset; margin-top: 1rem; } /*--- Tabs - EINDE VAN BLOK ---*/ /*--- Asset Details - BLOK ---*/ .asset--header { display: flex; gap: var(--spacing-l); } .asset--header-image { max-width: 400px; min-width: 300px; margin-left: calc(var(--spacing-l) * -1); } @media (max-width:480px){ .section--mobile-no-shadow-and-padding { box-shadow: unset; } } @media (max-width:768px){ .section--mobile-flex-direction { flex-direction: column; } } @media (max-width:768px){ .section--mobile-margin-left { margin-left: unset; } } /*--- Asset Details - EINDE VAN BLOK ---*/ /*--- Buttons - BLOK ---*/ .btn { --btn-font-size: var(--font-size-s); --btn-padding: var(--spacing-s); font-size: var(--btn-font-size); padding: var(--btn-padding); border-radius: var(--radius-s); } .btn:has(.fa, .icon):not(.btn-default, .btn-secondary) { padding-right: var(--spacing-l); } .btn--small { --btn-padding: var(--spacing-xs); min-height: 28px; } .btn--medium, .btn--large { --btn-padding: var(--spacing-s); } .btn--medium { min-height: 36px; } .btn--large { --btn-font-size: var(--font-size-m); min-height: 40px; } .btn.btn-primary { color: var(--clr-states-white); } .btn-primary:hover, .btn-default:hover { background-color: var(--clr-service-900); color: var(--clr-states-white); } .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus { background-color: var(--clr-secondary-100); border-color: var(--clr-secondary-100); color: var(--clr-secondary-400); } .btn-default[disabled], .btn-default:hover[disabled] { border-color: var(--clr-secondary-400); color: var(--clr-secondary-400); } .btn-danger .icon::before { filter: var(--filter-states-white); } .btn-link, .btn-default.cancel { color: var(--clr-service-700); border: unset; background-color: transparent; text-decoration: none; } .btn-link:hover, .btn-link:focus, .btn-default.cancel:hover, .btn-default.cancel:focus { color: var(--clr-service-900); background-color: transparent; text-decoration: none; } .btn-link[disabled], .btn-default.cancel[disabled] { color: var(--clr-secondary-800); background-color: transparent; border-color: var(--clr-secondary-800); } /*--- Buttons - EINDE VAN BLOK ---*/ /*--- Custom buttons - BLOK ---*/ .custom-buttons-container .btn ~ .btn { margin-left: var(--spacing-s); } /*--- Custom buttons - EINDE VAN BLOK ---*/ /*--- Labels - BLOK ---*/ .label.icon, .label.icon--left { --icon-placement--left: var(--spacing-xs); padding-top: var(--spacing-2xs); padding-right: var(--spacing-xs); padding-bottom: var(--spacing-2xs); } .label-warning { color: var(--clr-secondary-800); } .label-default { background-color: var(--clr-secondary-800) !important; } .field-label { color: var(--clr-secondary-600); } /*--- Labels - EINDE VAN BLOK ---*/ /*--- Alerts - BLOCK ---*/ /*-- generic - start --*/ .alert__block { --margin-top: var(--spacing-l); --margin-right: var(--spacing-none); --margin-bottom: var(--spacing-l); --margin-left: var(--spacing-none); display: flex; gap: var(--spacing-s); padding: 9px 12px; border-radius: var(--radius-s); margin-top: var(--margin-top); margin-right: var(--margin-right); margin-bottom: var(--margin-bottom); margin-left: var(--margin-left); } .alert__block:last-of-type { --margin-bottom: var(--spacing-l); } .alert__icon [class*="icon"] { width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .alert__content { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .alert__cta a { font-size: 1rem; text-decoration: underline; color: var(--link-color, var(--font-text-color)); } /*-- generic - end --*/ .alert--success { border: 1px solid var(--clr-states-success); background: var(--clr-states-success-background); } .alert--success .icon--success::before { content: var(--svg-success); filter: var(--filter-states-success); } .alert--info { border: 1px solid var(--clr-states-focus); background: var(--clr-states-focus-background); } .alert--info .icon--info::before { content: var(--svg-focus); filter: var(--filter-states-focus); } /* .alert--warning { border: 1px solid var(--clr-warning); background: var(--clr-warning--light); } .alert--warning .icon--warning::before { content: var(--svg-warning); filter: var(--filter-neutral--9); } */ .alert--error { border: 1px solid var(--clr-states-problem); background: var(--clr-states-problem-background); } .alert--error .icon--error::before { content: var(--svg-warning); filter: var(--filter-states-problem); } /*--- Alerts - END OF BLOCK ---*/ /*--- Cards component - BLOK ---*/ .card-grid { display: grid; gap: var(--spacing-xl); } .card-grid--4-columns { /* it defines that every columns should be automatically fitted, which means: * When there is space, an extra column will be added * Each column will be minimally 250px wide and maximally 1fr wide * 1fr = 1 fraction which refers to the total width divide by the amount of columns * --> This means each column will be minimally 250px + 12px gap (0.75rem) = 262px and at maximum 511px as from 512px 2 coumns can fit: 250px + 12px gap + 250px column = 512px */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* The template-columns has repeat auto-fit, so it will try to fit as many columns as possible in the container The max-width dictactes that the container has a maximal width through which we can limit the max amount of columns * 4 columns of 380px + 3 gaps of 12px = 1520px + 36px = 1556px */ max-width: calc(4 * 380px + 3 * var(--spacing-xl)); } /* .card-grid--2-columns { grid-template-columns: repeat(auto-fit, minmax(calc(2 * 380px + var(--spacing-xl)), 1fr)); max-width: calc(calc(2 * (2 * 380px + var(--spacing-xl))) + var(--spacing-xl)); // 2 * 750px } */ .card-grid--2-columns { display: grid; gap: var(--spacing-xl); grid-template-columns: 1fr; max-width: 1591px; } @media (min-width: 930px) { .card-grid--2-columns { grid-template-columns: repeat(2, minmax(380px, 1fr)); /* 2 columns max */ } } .card-grid__item { --item--padding: 0; display: flex; flex-direction: column; max-width: 100%; width: 100%; padding: var(--item--padding); background-color: var(--clr-states-white); box-shadow: var(--box-shadow-standard); border-radius: var(--radius-xl); overflow: hidden; } .card-grid__item--padding\:xl { --item--padding: var(--spacing-xl); } .card-grid__item img { max-height: 132px; width: 50%; padding-top: 2%; padding-bottom: 2%; height: 70%; align-self: center; } .card-grid__content { --content--height: 8.25rem; --content--background-color: var(--clr-secondary-100); --content--padding: var(--spacing-xl); display: flex; flex-direction: column; padding: var(--content--padding); height: var(--content--height); justify-content: space-between; background-color: var(--clr-service-100); } .card-grid__content--auto-height { --content--height: auto; } .card-grid__content--background\:white { background-color: white; } .card-grid__content--padding\:0 { --content--padding: 0; } .card-grid__actions { display: flex; justify-content: space-between; gap: var(--spacing-s); } .card-grid__action { flex-grow: 1; flex-shrink: 0; } .card-grid__action .btn { width: 100%; white-space: normal; } .card-grid__actions--assets { display: flex; justify-content: flex-start; gap: 8px; } .card-grid__action--assets { flex: 1; display: flex; justify-content: end; } /*--- Asset Cards - BLOK ---*/ .card-grid__action--assets a { display: block; width: 80px; } .card-grid__action--assets a.btn { padding: 8px; width: 100%; } .card-grid__item--assets-img-fw img { width:100%; height: 100%; object-fit: cover; padding: unset; } .card-grid__item--assets { max-width: 300px; min-height: 200px; } .card-grid__content--assets { height: 300px; display: flex; gap: 8px; justify-content: space-between; flex-direction: column; } .card-grid__text--assets { line-height: 20px; align-self: flex-start; flex-grow: 1; } .card-grid__action--assets-btn-align-right .btn { display: inline-block; } .card-grid__actions--assets-btn-placement { justify-content: flex-end; } /*--- Asset Cards - EINDE VAN BLOK ---*/ .card-grid--max-fit-columns { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, max-content)) !important; gap: 20px !important; align-items: start !important; justify-content: start !important; } /*--- Cards component - EINDE VAN BLOK ---*/ /*--- Profile page - BLOK ---*/ /*--- Profile page - EINDE VAN BLOK ---*/ html[dir=ltr] li a { margin-left: unset; } /*--- Icons - BLOK ---*/ .icon { --svg-width: var(--svg-size-base); --svg-height: var(--svg-size-base); --svg-max-size: max(var(--svg-width), var(--svg-height)); --icon-placement--top: 50%; --icon-placement--right: 0; --icon-placement--bottom: 0; --icon-placement--left: 0; --icon-transform: translateY(-50%); --icon-spacing--top: 0; --icon-spacing--right: 0; --icon-spacing--bottom: 0; --icon-spacing--left: var(--spacing-s); padding-top: calc(var(--svg-max-size) + var(--icon-spacing--top)); padding-right: calc(var(--svg-max-size) + var(--icon-spacing--right)); padding-bottom: calc(var(--svg-max-size) + var(--icon-spacing--bottom)); padding-left: calc(var(--svg-max-size) + var(--icon-spacing--left)); position: relative; } .icon::before { content: ''; position: absolute; top: var(--icon-placement--top); right: var(--icon-placement--right); bottom: var(--icon-placement--bottom); left: var(--icon-placement--left); transform: var(--icon-transform); width: var(--svg-width); height: var(--svg-height); } .icon--small { --svg-width: var(--svg-size-xs); --svg-height: var(--svg-size-xs); } .icon--top { --icon-spacing--left: 0; --icon-spacing--top: var(--spacing-s); --icon-placement--top: 0; --icon-placement--left: 50%; --icon-transform: translateX(-50%); } .icon--right { --icon-spacing--right: 0; --icon-spacing--top: 0; --icon-placement--top: 50%; --icon-placement--right: 0; --icon-transform: translateY(-50%); --icon-spacing-left: 0; --icon-spacing--right: var(--spacing-s); } .icon--bottom { --icon-spacing--left: 0; --icon-spacing--bottom: var(--spacing-s); --icon-placement--bottom: 0; --icon-placement--left: 50%; --icon-transform: translateX(-50%); } .icon--left { --icon-spacing--left: var(--spacing-s); --icon-spacing--top: 0; --icon-placement--top: 50%; --icon-placement--left: 0; --icon-transform: translateY(-50%); } .icon--spacing-top\:none { --icon-spacing--top: var(--spacing-none); } .icon--spacing-right\:none { --icon-spacing--right: var(--spacing-none); } .icon--spacing-bottom\:none { --icon-spacing--bottom: var(--spacing-none); } .icon--spacing-left\:none { --icon-spacing--left: var(--spacing-none); } .icon--home::before { content: var(--svg-home-icon); filter: var(--filter-clr-secondary-600); } .icon--apps::before { content: var(--svg-apps); } .icon--dashboard::before { content: var(--svg-dashboard); } .icon--service-request::before { content: var(--svg-lightbulb); } .icon--case-in-progress::before { content: var(--svg-lightbulb); } .icon--case-resolved::before { content: var(--svg-checkbox-checked); } .icon--spare-parts::before { content: var(--svg-monitoring); } .icon--training::before { content: var(--svg-partner); } .icon--returns::before { content: var(--svg-load-forward); } .icon--assets::before { content: var(--svg-fleet); } .icon--logout::before { content: var(--svg-logout); } .icon--warning::before { content: var(--svg-warning); } .icon--plus::before { content: var(--svg-plus); } .icon--menu::before { content: var(--svg-menu); } .icon--arrow-down::before{ content: var(--svg-arrow-down); } .icon--search::before{ content: var(--svg-search); } .icon--profile::before{ content: var(--svg-profile); } .icon--plus:before { content: var(--svg-icon-plus); } .icon--plus{ filter: var(--filter-states-white); } .icon--flag-english::before { content: var(--svg-flag-england); } .icon--flag-deutsch::before { content: var(--svg-flag-germany); } .icon--question-mark::before { content: var(--svg-question-mark); } /*--- Icons - EINDE VAN BLOK ---*/