/* @import url('https://fonts.googleapis.com/css2?family=Fragment+Mono&display=swap'); */ /* OUDE KLEUREN */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Fragment+Mono&display=swap"); @import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"); :root { --color-prim: 0, 180, 227; --color-sec: 0, 11, 128; /* --color-red: 235, 61, 99; --color-orange: 255, 171, 29; --color-green: 40, 199, 111; --color-yellow: 255, 194, 0; */ --color-red: 244, 67, 54; /* Rood */ --color-pink: 232, 30, 99; /* Roze */ --color-purple: 156, 39, 176; /* Paars */ --color-deep_purple: 103, 58, 183; /* Diep paars */ --color-indigo: 63, 81, 181; /* Indigo */ --color-blue: 33, 150, 243; /* Blauw */ --color-light_blue: 3, 169, 244; /* Licht blauw */ --color-cyan: 0, 188, 212; /* Cyaan */ --color-teal: 0, 150, 136; /* Blauwgroen */ --color-green: 76, 175, 100; /* Groen */ --color-light_green: 139, 195, 74; /* Light groen */ --color-lime: 205, 220, 57; /* Limoen */ --color-yellow: 255, 235, 59; /* Geel */ --color-amber: 255, 193, 7; /* Amber */ --color-feestdag: 255, 111, 0; --color-orange: 255, 152, 0; /* Oranje */ --color-deep_orange: 255, 87, 34; /* Diep oranje */ --color-brown: 121, 85, 72; /* Bruin */ --color-grey: 158, 158, 158; /* Grijs */ --color-blue_grey: 96, 125, 139; /* Blauw grijs */ --color-black: 51, 51, 51; /* Zwart */ --color-text: 51, 51, 51; --color-text-light: 80, 80, 100; --color-text-lighter: 126, 122, 138; --color-info: 135, 136, 138; --color-border: 219, 219, 219; --bs-btn-disabled-bg: rgba(var(--color-prim), 0.5); --bs-btn-disabled-border-color: #fff; --bs-btn-disabled-color: #fff; --color-icon: var(--color-prim); --opacity-initials: 0.1; --color-toast: var(--color-prim); --color-lasso: var(--color-prim); --color: var(--color-prim); --color-ho-prim: 34, 185, 252; --color-ho-sec: 0, 11, 128; } .hello-interior { --color-prim: 248, 179, 88; --color-ho-prim: 215, 111, 57; --color-ho-sec: 248, 179, 88; } @font-face {font-family: "Sofia Pro";src:url("/assets/fonts/SofiaProRegular.woff2") format("woff2"),url("/assets/fonts/SofiaProRegular.ttf") format("truetype");font-weight: 400;font-style: normal;font-display: swap;} @font-face {font-family: "Sofia Pro";src:url("/assets/fonts/SofiaProBold.woff2") format("woff2"),url("/assets/fonts/SofiaProBold.ttf") format("truetype");font-weight: 600;font-style: normal;font-display: swap;} @font-face {font-family: "Sofia Pro";src:url("/assets/fonts/SofiaProBoldItalic.woff2") format("woff2"),url("/assets/fonts/SofiaProBoldItalic.ttf") format("truetype");font-weight: 600;font-style: italic;font-display: swap;} @font-face {font-family: "Sofia Pro";src:url("/assets/fonts/SofiaProItalic.woff2") format("woff2"),url("/assets/fonts/SofiaProRegular.ttf") format("truetype");font-weight: 400;font-style: italic;font-display: swap;} @font-face {font-family: "Sfizia";src:url("/assets/fonts/Sfizia-Regular.woff2") format("woff2"),url("/assets/fonts/Sfizia-Regular.ttf") format("truetype");font-weight: 400;font-style: normal;font-display: swap;} @font-face {font-family: "Sfizia";src:url("/assets/fonts/Sfizia-Bold.woff2") format("woff2"),url("/assets/fonts/Sfizia-Bold.ttf") format("truetype");font-weight: 600;font-style: normal;font-display: swap;} @font-face {font-family: "Sfizia";src:url("/assets/fonts/Sfizia-RegularItalic.woff2") format("woff2"),url("/assets/fonts/Sfizia-RegularItalic.ttf") format("truetype");font-weight: 400;font-style: italic;font-display: swap;} @font-face {font-family: "Calibri";src:url("/assets/fonts/Calibri.woff2") format("woff2"),url("/assets/fonts/Calibri.ttf") format("truetype");font-weight: 400;font-style: normal;font-display: swap;} @font-face {font-family: "Calibri";src:url("/assets/fonts/Calibribold.woff2") format("woff2"),url("/assets/fonts/Calibribold.ttf") format("truetype");font-weight: 600;font-style: normal;font-display: swap;} @font-face {font-family: "Calibri";src:url("/assets/fonts/Calibribolditalic.woff2") format("woff2"),url("/assets/fonts/Calibribolditalic.ttf") format("truetype");font-weight: 600;font-style: italic;font-display: swap;} @font-face {font-family: "Calibri";src:url("/assets/fonts/Calibriitalic.woff2") format("woff2"),url("/assets/fonts/Calibriitalic.ttf") format("truetype");font-weight: 400;font-style: italic;font-display: swap;} @font-face {font-family: "PassionOne";src:url("/assets/fonts/PassionOne.ttf") format("truetype");font-weight: 400;font-style: normal;font-display: swap;} @font-face {font-family: "PassionOne";src:url("/assets/fonts/PassionOnebold.ttf") format("truetype");font-weight: 600;font-style: normal;font-display: swap;} @font-face {font-family: "Montserrat";src:url("/assets/fonts/Montserrat.ttf") format("truetype");font-weight: 400;font-style: normal;font-display: swap;} @font-face {font-family: "Montserrat";src:url("/assets/fonts/Montserratbold.ttf") format("truetype");font-weight: 600;font-style: normal;font-display: swap;} @font-face {font-family: "Montserrat";src:url("/assets/fonts/Montserratbolditalic.ttf") format("truetype");font-weight: 600;font-style: italic;font-display: swap;} @font-face {font-family: "Montserrat";src:url("/assets/fonts/Montserratitalic.ttf") format("truetype");font-weight: 400;font-style: italic;font-display: swap;} .white { --color: 255, 255, 255; } .prim { --color: var(--color-prim); } .sec { --color: var(--color-sec); } .red { --color: var(--color-red); } .pink { --color: var(--color-pink); } .purple { --color: var(--color-purple); } .deep_purple { --color: var(--color-deep_purple); } .indigo { --color: var(--color-indigo); } .blue { --color: var(--color-blue); } .light_blue { --color: var(--color-light_blue); } .cyan { --color: var(--color-cyan); } .teal { --color: var(--color-teal); } .green { --color: var(--color-green); } .light_green { --color: var(--color-light_green); } .lime { --color: var(--color-lime); } .yellow { --color: var(--color-yellow); } .amber { --color: var(--color-amber); } /* .feestdag { --color: var(--color-feestdag) } */ .orange { --color: var(--color-orange); } .deep_orange { --color: var(--color-deep_orange); } .brown { --color: var(--color-brown); } .grey { --color: var(--color-grey); } .blue_grey { --color: var(--color-blue_grey); } .black { --color: var(--color-black); } .text { --color: var(--color-text); } .text-light { --color: var(--color-text-light); } .text-lighter { --color: var(--color-text-lighter); } .info { --color: var(--color-info); } .border-color { --color: var(--color-border); } .filter-black-white { filter: grayscale(100%); } .grayscale { filter: grayscale(100%) brightness(150%); } /* DEFAULT STYLES */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { scroll-behavior: smooth !important; } body { background: #f8f7fa; font-size: 12px; color: rgb(var(--color-text-light)); font-family: Poppins; cursor: default; transition: 0.2s ease; } a { color: rgb(var(--color-text-light)); text-decoration: none; } a:hover { color: rgb(var(--color-text-light)); } /* TEXT */ strong { font-weight: 600; } script { display: none !important; } span { } p { margin-bottom: 0px; } .link { border-radius: 18px; padding: 6px 9px; margin-left: -9px; width: -moz-fit-content; width: fit-content; text-decoration: none; line-height: 1; display: flex; align-items: center; gap: 6px; border: 1px solid transparent; min-height: 30px; } .link i { font-size: 15px; } .link:hover { color: rgb(var(--color)) !important; cursor: pointer; background-color: rgba(var(--color), 0.1); border: 1px solid rgb(var(--color)); } .link:hover p { color: rgb(var(--color)) !important; } .link-with-initials { border-radius: 18px; padding: 6px 15px 6px 12px; margin-left: -12px; width: -moz-fit-content; width: fit-content; display: flex; align-items: center; min-height: 32px; gap: 9px; } .link-with-initials .initials { transition: none; box-sizing: content-box; border: 4px solid var(--bg-theme); background-image: linear-gradient( rgba(var(--color), var(--opacity-initials)), rgba(var(--color), var(--opacity-initials)) ), linear-gradient(#fff, #fff); margin: -12px -6px; } .link-with-initials:hover { color: rgb(var(--color-prim)); cursor: pointer; background-color: rgba(var(--color-prim), 0.1); } .link-with-initials:hover p { color: rgb(var(--color-prim)); } .light { font-size: 12px; font-weight: 400; color: rgb(var(--color-text-lighter)); } .small { font-size: 11px; } .center { text-align: center; } .bold { font-weight: 700; } .semi-bold { font-weight: 500; } .lh-1 { line-height: 1; } .font-Arial { font-family: "Arial" !important; } .font-Courier { font-family: "Courier New" !important; } .font-Open { font-family: "Open Sans" !important; } .font-DM { font-family: "DM Sans" !important; } .font-Raleway { font-family: "Raleway" !important; } .font-Roboto { font-family: "Roboto" !important; } .font-Poppins { font-family: "Poppins" !important; } .font-Sofia { font-family: "Sofia Pro" !important; } .font-Sfizia { font-family: "Sfizia" !important; } .font-Calibri { font-family: "Calibri" !important; } .font-PassionOne { font-family: "PassionOne" !important; } .font-Montserrat { font-family: "Montserrat" !important; } h1 { margin-bottom: 0; font-size: 38px; font-weight: 500; } h2 { margin-bottom: 0; font-size: 32px; font-weight: 500; } h3 { margin-bottom: 0; font-size: 26px; font-weight: 500; } h4 { margin-bottom: 0; font-size: 22px; font-weight: 500; } h5 { margin-bottom: 0; font-size: 18px; font-weight: 500; } h6 { margin-bottom: 0; font-size: 15px; font-weight: 500; } hr { margin: 6px 0; } /* PADDING */ .p-0-3 { padding: 0 3px !important; } .p-0-4 { padding: 0 4px !important; } .p-3-0 { padding: 3px 0 !important; } .p-3 { padding: 3px !important; } .p-3-6 { padding: 3px 6px !important; } .p-3-9 { padding: 3px 9px !important; } .p-3-12 { padding: 3px 12px !important; } .p-6 { padding: 6px !important; } .p-6-0 { padding: 6px 0 !important; } .p-12-0 { padding: 12px 0px !important; } .p-12-6 { padding: 12px 6px !important; } .p-6-9 { padding: 6px 9px !important; } .p-6-12 { padding: 6px 12px !important; } .p-6-15 { padding: 6px 15px !important; } .p-12-18 { padding: 12px 18px !important; } .p-15-12 { padding: 15px 12px !important; } .p-6-18 { padding: 6px 18px !important; } .p-6-24 { padding: 6px 24px !important; } .p-7 { padding: 7px !important; } .p-8 { padding: 8px !important; } .p-9 { padding: 9px !important; } .p-9-18 { padding: 9px 18px !important; } .p-24 { padding: 24px !important; } .p-48 { padding: 48px !important; } .p-24-12 { padding: 24px 12px !important; } .p-24-0 { padding: 24px 0 !important; } .p-0-30 { padding: 0 30px !important; } .p-0-24 { padding: 0 24px !important; } .p-0-10 { padding: 0 10px !important; } .p-0-12 { padding: 0 12px !important; } .p-0-9 { padding: 0 9px !important; } .p-0-6 { padding: 0 6px !important; } .pl-0 { padding-left: 0px !important; } .pl-3 { padding-left: 3px !important; } .pl-9 { padding-left: 9px !important; } .pl-10 { padding-left: 10px !important; } .pl-12 { padding-left: 12px !important; } .pl-18 { padding-left: 18px !important; } .pl-24 { padding-left: 24px !important; } .pr-2 { padding-right: 2px !important; } .pr-3 { padding-right: 3px !important; } .pr-6 { padding-right: 6px !important; } .pr-9 { padding-right: 9px !important; } .pr-10 { padding-right: 10px !important; } .pr-12 { padding-right: 12px !important; } .pr-15 { padding-right: 15px !important; } .pl-15 { padding-left: 15px !important; } .pr-18 { padding-right: 18px !important; } .pr-25 { padding-right: 25px !important; } .pr-48 { padding-right: 48px !important; } .pr-50 { padding-right: 50px !important; } .pr-38 { padding-right: 38px !important; } .pl-6 { padding-left: 6px !important; } .pl-30 { padding-left: 30px !important; } .pl-40 { padding-left: 40px !important; } .pl-48 { padding-left: 48px !important; } .pt-3 { padding-top: 3px !important; } .pt-6 { padding-top: 6px !important; } .pb-1 { padding-bottom: 1px !important; } .pb-2 { padding-bottom: 2px !important; } .pb-3 { padding-bottom: 3px !important; } .pb-6 { padding-bottom: 6px !important; } .pb-9 { padding-bottom: 9px !important; } .pt-12 { padding-top: 12px !important; } .pt-15 { padding-top: 15px !important; } .pt-18 { padding-top: 18px !important; } .pb-10 { padding-bottom: 10px !important; } .pb-12 { padding-bottom: 12px !important; } .pb-20 { padding-bottom: 20px !important; } .pb-24 { padding-bottom: 24px !important; } .pb-35 { padding-bottom: 35px !important; } .pb-36 { padding-bottom: 36px !important; } .pb-60 { padding-bottom: 60px !important; } .pb-72 { padding-bottom: 72px !important; } .pt-24 { padding-top: 24px !important; } .pt-120 { padding-top: 120px !important; } /* GAP */ .g-0 { gap: 0 !important; } .g-1 { gap: 1px !important; } .g-3 { gap: 3px !important; } .g-8 { gap: 8px !important; } .g-6-12 { gap: 6px 12px !important; } .g-9 { gap: 9px !important; } .g-12 { gap: 12px !important; } .g-24-12 { gap: 24px 12px; } .g-20 { gap: 20px; } .g-24 { gap: 24px; } .g-28 { gap: 28px; } .g-40 { gap: 40px; } .g-48 { gap: 48px; } .g-50 { gap: 50px; } .g-120 { gap: 120px; } /* MARGIN */ .mt-0 { margin-top: 0 !important; } .m-3 { margin: 3px; } .m-6 { margin: 6px; } .m-6-12 { margin: 6px 12px; } .m-12 { margin: 12px; } .m-24 { margin: 24px; } .m-24-0 { margin: 24px 0; } .mt-3 { margin-top: 3px !important; } .mt-6 { margin-top: 6px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-15 { margin-top: 15px; } .mt-18 { margin-top: 18px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px !important; } .mt-32 { margin-top: 32px; } .mt-36 { margin-top: 36px; } .mt-40 { margin-top: 40px; } .mt-48 { margin-top: 48px} .mt-100 { margin-top: 100px; } .mb-3 { margin-bottom: 3px !important; } .mb-6 { margin-bottom: 6px !important; } .mb-5px { margin-bottom: 5px !important; } .mb-10 { margin-bottom: 10px !important; } .mb-12 { margin-bottom: 12px !important; } .mb-24 { margin-bottom: 24px !important; } .mb-32 { margin-bottom: 32px; } .mr-3 { margin-right: 3px !important; } .mr-6 { margin-right: 6px !important; } .mr-9 { margin-right: 9px !important; } .mr--9 { margin-right: -9px !important; } .mr-10 { margin-right: 12px; } .mr-12 { margin-right: 12px; } .mr-24 { margin-right: 24px; } .ml-3 { margin-left: 3px; } .ml-6 { margin-left: 6px; } .ml-8 { margin-left: 8px; } .ml-12 { margin-left: 12px; } .ml-24 { margin-left: 24px; } .ml-32 { margin-left: 32px; } .ml-36 { margin-left: 36px; } .ml-50 { margin-left: 50px; } .ml--6 { margin-left: -6px; } .ml--12 { margin-left: -12px; } .mt--3 { margin-top: -3px; } .mt--6 { margin-top: -6px; } .mt--12 { margin-top: -12px; } .mt--24 { margin-top: -24px; } .br-55 { border-right: 55px solid #fff !important; } .tag.radius-0 { border-radius: 0 !important; } .radius-0 { border-radius: 0 !important; } .radius-3 { border-radius: 18px !important; } .radius-4 { border-radius: 18px !important; } .radius-6 { border-radius: 18px !important; } .radius-top-4 { border-radius: 12px 12px 0 0 !important; } .radius-top-6 { border-radius: 18px 18px 0 0 !important; } /* WIDTH / HEIGHT */ .fit-content { width: -moz-fit-content !important; width: fit-content !important; } .w-0 { width: 0 !important; min-width: 0 !important; } .w-5 { width: 5% !important; } .w-6 { width: 6% !important; } .w-7 { width: 7% !important; } .w-8 { width: 8% !important; } .w-9 { width: 9% !important; } .w-10 { width: 10% !important; min-width: 10%; } .w-11 { width: 11% !important; } .w-12-5 { width: 12.5% !important; } .w-16-5 { width: 16.5% !important; } .w-15 { width: 15% !important; } .w-20 { width: 20% !important; } .w-25 { width: 25% !important; } .w-30 { width: 30% !important; } .w-33 { width: 33.33% !important; } .w-35 { width: 35% !important; } .w-40 { width: 40% !important; } .w-45 { width: 45% !important; } .w-50 { width: 50% !important; } .w-55 { width: 55% !important; } .w-60 { width: 60% !important; } .w-65 { width: 65% !important; } .w-66 { width: 66.66% !important; } .w-70 { width: 70% !important; } .w-80 { width: 80% !important; } .w-90 { width: 90% !important; } .w-95 { width: 95% !important; } .w-100 { width: 100% !important; } .w-50-18 { width: calc(50% - 12px); } .w-5px { width: 5px !important; } .w-6px { width: 6px !important; } .w-12px { width: 12px !important; } .w-15px { width: 15px !important; } .w-17px { width: 17px !important; min-width: 17px; } .w-18px { width: 18px !important; min-width: 18px !important; max-width: 18px !important; } .w-24px { width: 24px !important; min-width: 24px; } .w-30px { width: 30px !important; min-width: 30px !important; max-width: 30px !important; } .w-36px { width: 36px !important; min-width: 36px !important; max-width: 36px !important; } .w-39px { width: 39px !important; min-width: 39px !important; max-width: 39px !important; } .w-40px { width: 40px !important; min-width: 40px !important; max-width: 40px !important; } .w-42px { width: 42px !important; min-width: 42px !important; max-width: 42px !important; } .w-48px { width: 48px !important; min-width: 48px; } .w-50px { width: 50px !important; } .w-54px { width: 54px !important; min-width: 54px !important; } .w-60px { width: 60px !important; max-width: 60px !important; min-width: 60px; } .w-72px { width: 72px !important; min-width: 72px; } .w-75px { width: 75px !important; min-width: 75px; } .w-80px { width: 80px !important; min-width: 80px !important; max-width: 80px !important; } .w-84px { width: 84px !important; min-width: 84px !important; max-width: 84px !important; } .w-90px { width: 90px !important; min-width: 90px !important; } .w-96px { width: 96px !important; min-width: 96px !important; } .w-100px { width: 100px !important; max-width: 100px !important; min-width: 100px; } .w-105px { width: 105px !important; max-width: 105px !important; min-width: 105px; } .w-112px { width: 112px !important; min-width: 112px; } .w-115px { width: 115px !important; min-width: 115px; } .w-120px { width: 120px !important; min-width: 120px !important;} .w-135px {width: 135px !important;min-width: 135px !important;max-width: 135px !important;} .w-150px { width: 150px !important; min-width: 150px !important; } .w-165px { width: 165px !important; min-width: 165px !important; } .w-180px { min-width: 180px; width: 180px !important; } .maxw-100px { max-width: 100px; width: -moz-fit-content !important; width: fit-content !important; } .mw-180px { min-width: 180px; width: 100% !important; } .w-200px { width: 200px !important; min-width: 200px !important; max-width: 200px !important; } .w-210px { width: 210px !important; min-width: 210px !important; max-width: 210px !important; } .w-220px { width: 220px !important; } .w-240px { width: 240px !important; max-width: 240px !important; } .mw-240px { min-width: 240px !important; width: 100% !important; } .w-260px { min-width: 260px; max-width: 260px; width: 260px !important; } .w-270px { width: 270px !important; } .w-300px { width: 300px !important; min-width: 300px; } .w-330px { width: 330px !important; min-width: 330px; max-width: 330px; } .w-350px { width: 350px !important; min-width: 350px; } .w-360px { width: 360px !important; min-width: 360px; } .maxw-410px { max-width: 410px !important; } .w-410px { width: 410px !important; min-width: 410px !important; } .w-420px { width: 420px !important; min-width: 420px !important; } .w-480px { width: 480px !important; min-width: 480px; } .w-500px { width: 500px !important; min-width: 500px; } .w-540px { width: 540px !important; min-width: 540px; } /* OffCanvas */ .w-600px { width: 600px !important; max-width: 600px; min-width: 600px; } .w-660px { width: 660px !important; max-width: 660px; min-width: 660px; } .w-665px { width: 665px !important; } /* OffCanvas */ .w-800px { width: 800px !important; } /* OffCanvas */ .w-880px { width: 880px !important; } /* OffCanvas */ .w-900px { width: 900px !important; } .w-920px { width: 920px !important; } /* OffCanvas */ .w-1000px { width: 1000px !important; } /* OffCanvas */ .w-1310px { width: 1310px !important; } /* OffCanvas */ .w-fc { width: -moz-fit-content !important; width: fit-content !important; } .mw-0 { min-width: 0 !important; } .min-50 { min-width: 50px; } .min-120 { min-width: 120px; } .min-400 { min-width: 400px; } .min-500 { min-width: 500px; } .max-500 { max-width: 500px; } .max-600 { max-width: 600px; } .max-100 { max-width: 100px; } form > .w-75 { width: calc(75% - 3px) !important; } form > .w-85 { width: 85% !important; } form > .w-66 { width: calc(66% - 2px) !important; } form > .w-50 { width: calc(50% - 6px) !important; } form > .w-25 { width: calc(25% - 9px) !important; } form > .w-12-5 { width: calc(12.5% - 11px) !important; } form > .w-15 { width: calc(15% - 12px) !important; } form > .w-20 { width: calc(20% - 6px) !important; } form > .w-30 { width: calc(30% - 6px) !important; } form > .w-35 { width: calc(35% - 6px) !important; } form > .w-33 { width: calc(33% - 7px) !important; } form > .w-40 { width: calc(40% - 4px) !important; } form > .w-10 { width: calc(10% - 6px) !important; } .g-3 > .w-33 { width: calc(33.33% - 2px) !important; } .g-3 > .w-50 { width: calc(50% - 1.5px) !important; } .g-6 > .w-25 { width: calc(25% - 4.5px) !important; } .g-12 > .w-87-5 { width: calc(87.5% - 1.5px) !important; } .g-12 > .w-75 { width: calc(75% - 3px) !important; } .g-12 > .w-70 { width: calc(70% - 2.4px) !important; } .g-12 > .w-66 { width: calc(66.66% - 4px) !important; } .g-12 > .w-60 { width: calc(60% - 4.8px) !important; } .g-12 > .w-50 { width: calc(50% - 6px) !important; } .g-12 > .w-40 { width: calc(40% - 7.2px) !important; } .g-12 > .w-35 { width: calc(35% - 8px) !important; } .g-12 > .w-33 { width: calc(33.33% - 8px) !important; } .g-12 > .w-30 { width: calc(30% - 9.6px) !important; } .g-12 > .w-25 { width: calc(25% - 9px) !important; } .g-12 > .w-20 { width: calc(20% - 9.6px) !important; } .g-12 > .w-15 { width: calc(15% - 10px) !important; } .g-12 > .w-12-5 { width: calc(12.5% - 10.5px) !important; } .g-24 > .w-87-5 { width: calc(87.5% - 3px) !important; } .g-24 > .w-75 { width: calc(75% - 6px) !important; } .g-24 > .w-66 { width: calc(66.66% - 8px) !important; } .g-24 > .w-50 { width: calc(50% - 12px) !important; } .g-24 > .w-40 { width: calc(40% - 14.4px) !important; } .g-24 > .w-33 { width: calc(33.33% - 16px) !important; } .g-24 > .w-25 { width: calc(25% - 18px) !important; } .g-24 > .w-20 { width: calc(20% - 19.2px) !important; } .g-24 > .w-12-5 { width: calc(12.5% - 21px) !important; } .g-48 > .w-50 { width: calc(50% - 24px) !important; } .g-60 > .w-50 { width: calc(50% - 30px) !important; } .mh-80 { max-height: 80%; } .h-100 { height: 100%; } .h-auto { height: auto !important;} .h-12px { height: 12px !important; min-height: 12px !important; } .h-15px { height: 15px !important; min-height: 15px !important; } .h-18px { height: 18px !important; min-height: 18px !important; } .h-24px { height: 24px !important; } .h-25px { height: 25px !important; } .h-27px { height: 27px !important; } .h-28px { height: 28px !important; } .h-30px { height: 30px !important; } .h-35px { height: 35px !important; } .h-36px { height: 36px !important; min-height: 36px !important; } .h-40px { height: 40px !important; } .h-42px { height: 42px; } .h-48px { height: 48px !important; } .h-60px { height: 60px !important; } .h-72px { height: 72px !important; min-height: 72px !important; } .h-90px { height: 90px !important; } .h-96px { height: 96px !important; min-height: 96px !important; max-height: 96px !important; } .h-100px { height: 100px !important; } .h-112px { height: 112px !important; } .h-120px { height: 120px !important; } .h-150px { height: 150px !important; min-height: 150px !important; max-height: 150px !important; } .h-180px { height: 180px !important; } .h-200px { height: 200px !important; } .h-210px { height: 210px !important; } .h-240px { height: 240px !important; } .h-300px { height: 300px !important; min-height: 300px !important; } .h-350px { height: 350px !important; } .h-360px { height: 360px !important; } .h-480px { height: 480px !important; } .h-600px { height: 600px !important; } .h-fc { height: -moz-fit-content !important; height: fit-content !important; } .h-mc { height: -moz-max-content !important; height: max-content !important; } .flex-grow { flex-grow: 1; } .flex-center { display: flex; align-items: center; justify-content: center; } .h-stretch { flex: 1 1 auto; } .minh-630px {min-height: 630px} .mh-200px { max-height: 200px; } .mh-350px { max-height: 350px; } .mh-0 { max-height: 0px; overflow: hidden; } .full-height { height: calc(100vh - 108px); } .full-tab-height { height: calc(100vh - 86px); } .cursor-pointer { cursor: pointer !important; } .cursor-default { cursor: default !important; } .top-0 { top: 0 !important; } .top-40 { top: 40px !important; } .right-0 { right: 0 !important; left: auto !important; } .opac-0 { opacity: 0; } .opac-2 { opacity: 0.2;} .opac-5 { opacity: 0.5; } .opac-75 { opacity: 0.75; } .opac-1 { opacity: 1 !important;} .hover-opac-1 { transition: .2s ease; } .hover-opac-1:hover { opacity: 1; } .zi-2 { position: relative; z-index: 2 !important; } .zi-5 { z-index: 5 !important; } .zi-10 { z-index: 10 !important; } .zi-20 { z-index: 20 !important; } .zi-100 { z-index: 100 !important; } .zi-1000 { z-index: 1000 !important; } .table > :not(caption) > * > * { padding: 0; background-color: transparent; box-shadow: none; color: var(--color-theme); } th { color: rgb(from var(--color-theme) r g b / 0.75) !important; border-bottom: 1px solid rgba(var(--color-border), 0.5); border-top: 1px solid rgba(var(--color-border), 0.5); } tr.tr { transition: 0.2s ease; } tr.tr.hide_row { height: 0px !important; pointer-events: none; } tr.tr.hide_row td { height: 0px !important; min-height: 0px; border: none !important; } tr.tr.hide_row td > * { height: 0px !important; min-height: 0px !important; position: absolute; bottom: 0; opacity: 0; } .disable { pointer-events: none !important; opacity: 0.2 !important; } .disable-inkoop { pointer-events: none !important; opacity: 1 !important; } /* COLORS */ .bg-prim { background-color: rgba(var(--color-prim)) !important; color: #fff; } .bg-prim > p, .bg-prim > div > .d-flex > p { color: #fff; } .bg-color { background-color: rgba(var(--color)) !important; color: #fff !important; } .bg-sec { background-color: rgba(var(--color-sec)) !important; color: #fff; } .bg-red { background-color: rgba(var(--color-red)) !important; color: #fff; } .bg-orange { background-color: rgba(var(--color-orange)) !important; color: #fff; } .bg-green { background-color: rgba(var(--color-green)) !important; color: #fff; } .bg-text { background-color: rgba(var(--color-text)) !important; color: #fff; } .bg-text-light { background-color: rgba(var(--color-text-light)) !important; color: #fff; } .bg-text-lighter { background-color: rgba(var(--color-text-lighter)) !important; color: #fff; } .bg-info { background-color: rgba(var(--color-info)) !important; color: #fff; } .bg-border { background-color: rgba(var(--color-border)) !important; color: #fff; } .bg-border-50 { background-color: rgba(var(--color-border), 0.5) !important; color: #fff; } .bg-yellow { background-color: rgba(var(--color-yellow)) !important; color: #fff; } .bg-light.bg-prim { background-color: rgba(var(--color-prim), 0.1) !important; color: rgb(var(--color-text)); } .bg-light.bg-sec { background-color: rgba(var(--color-sec), 0.1) !important; color: rgb(var(--color-text)); } .bg-light.bg-red { background-color: rgba(var(--color-red), 0.1) !important; color: rgb(var(--color-text)); } .bg-light.bg-orange { background-color: rgba(var(--color-orange), 0.1) !important; color: rgb(var(--color-text)); } .bg-light.bg-green { background-color: rgba(var(--color-green), 0.1) !important; color: rgb(var(--color-text)); } .bg-light.bg-text { background-color: rgba(var(--color-text), 0.1) !important; color: rgb(var(--color-text)); } .bg-light.bg-text-light { background-color: rgba(var(--color-text-light), 0.1) !important; color: rgb(var(--color-text)); } .bg-light.bg-text-lighter { background-color: rgba(var(--color-text-lighter), 0.1) !important; color: rgb(var(--color-text)); } .bg-light.bg-info { background-color: rgba(var(--color-info), 0.1) !important; color: rgb(var(--color-text)); } .bg-light.bg-border { background-color: rgba(var(--color-border), 0.1) !important; color: rgb(var(--color-text)); } .bg-light.bg-yellow { background-color: rgba(var(--color-yellow), 0.1) !important; color: rgb(var(--color-text)); } .bg-light.bg-color { background-color: rgba(var(--color), 0.1) !important; color: rgb(var(--color-text)) !important; } .bg-lighter.bg-color { background-color: rgba(var(--color), 0.02) !important; color: rgb(var(--color-text)) !important; } .bg-transparent { background-color: transparent !important; } .color-white { color: #ffffff !important; } .color-color { color: rgba(var(--color)) !important; } .color-prim { color: rgba(var(--color-prim)) !important; } .color-sec { color: rgba(var(--color-sec)) !important; } .color-red { color: rgba(var(--color-red)) !important; } .color-orange { color: rgba(var(--color-orange)) !important; } .color-green { color: rgba(var(--color-green)) !important; } .color-yellow { color: rgba(var(--color-yellow)) !important; } .color-brown { color: rgba(var(--color-brown)) !important; } .color-teal { color: rgba(var(--color-teal)) !important; } .color-text { color: rgba(var(--color-text)) !important; } .color-text-light { color: rgba(var(--color-text-light)) !important; } .color-text-lighter { color: rgba(var(--color-text-lighter)) !important; } .color-info { color: rgba(var(--color-info)) !important; } .color-border { color: rgba(var(--color-border)) !important; } .color-theme { color: var(--color-theme) !important; } .color-transparent { color: transparent !important; } .border.white { border-color: #FFFFFF !important; } .border.color { border-color: rgba(var(--color)) !important; } .border.prim { border-color: rgba(var(--color-prim)) !important; } .border.sec { border-color: rgba(var(--color-sec)) !important; } .border.red { border-color: rgba(var(--color-red)) !important; } .border.blue { border-color: rgba(var(--color-blue)) !important; } .border.orange { border-color: rgba(var(--color-orange)) !important; } .border.amber { border-color: rgba(var(--color-amber)) !important; } .border.green { border-color:rgba(var(--color-green)) !important } .border.yellow { border-color:rgba(var(--color-yellow)) !important } .border.text { border-color: rgba(var(--color-text)) !important; } .border.text-light { border-color: rgba(var(--color-text-light)) !important; } .border.text-lighter { border-color: rgba(var(--color-text-lighter)) !important; } .border.info { border-color: rgba(var(--color-info)) !important; } .border.theme { border-color: var(--color-theme) !important; } .border.transparent { border-color: transparent !important; } dmx-serverconnect, dmx-value { position: absolute; } /* BUTTONS */ button { outline: none !important; } .btn, .cancelBtn, .applyBtn { font-size: 14px !important; border-radius: 18px !important; transition: 0.2s ease !important; outline: none !important; line-height: 1 !important; padding: 0px 18px !important; height: 36px !important; font-weight: 400 !important; } a.btn { line-height: 36px; display: flex; align-items: center; } .btn.disabled { opacity: 0.25; pointer-events: none; box-shadow: 0 0 0 transparent; --color: var(--color-info); } .prim-btn, .applyBtn, .btn-success, .btn-primary, .btn-danger, .btn-warning { background: linear-gradient( 60deg, rgb(var(--color)), rgba(var(--color), 0.8) ), #fff !important; border: none !important; color: #fff !important; box-shadow: 0px 2px 6px rgba(var(--color), 0.3); } .btn-success { --color: var(--color-green); } .modal:has(.btn-success) { --color: var(--color-green); } .modal:has(.btn-danger) { --color: var(--color-red); } .modal:has(.btn-warning) { --color: var(--color-orange); } .modal-dialog:has(.btn-success), .modal-dialog:has(.btn-secondary) { width: 480px; min-width: 480px; } .prim-btn:hover { box-shadow: 0px 2px 6px rgba(var(--color), 0.5); color: #fff; filter: brightness(0.97); } .outline-btn, .cancelBtn, .btn-secondary { border: 1px solid rgb(var(--color)) !important; color: rgb(var(--color)) !important; background-color: transparent !important; } .outline-btn:hover { background-color: rgba(var(--color), 0.05) !important; color: rgb(var(--color)); border-color: rgb(var(--color)); } .cancelBtn, .btn-secondary { --color: var(--color-info); } .btn i { margin-right: 6px; } .btn-small, .cancelBtn, .applyBtn { font-size: 12px !important; padding: 6px 15px !important; height: 30px !important; } .btn.smaller{ font-size: 10px !important; padding: 3px 6px !important; height: 24px !important; } .icon-btn { min-width: 30px; height: 30px; border-radius: 18px !important; display: flex; justify-content: center; align-items: center; transition: 0.2s ease; position: relative; border: 0; background-color: transparent; cursor: pointer; } .icon-btn input { opacity: 0; position: absolute; pointer-events: none; } /* .icon-btn input { visibility: hidden; opacity: 0; position: absolute; } */ .icon-btn > i { font-size: 18px; color: rgb(var(--color-text-lighter)); transition: 0.2s ease; pointer-events: none; } .icon-btn > p { font-size: 10px; color: rgb(var(--color-text-lighter)); transition: 0.2s ease; } .icon-btn:hover > i { color: rgb(var(--color)); } .icon-btn:hover > p { color: rgb(var(--color)); } .icon-btn:hover { background-color: rgba(var(--color), 0.1); } .icon-btn.large > i { font-size: 22px; } .icon-btn.small { min-width: 24px; height: 24px; min-width: 24px; } .icon-btn.small > i { font-size: 15px; } .icon-btn.disabled { background-color: rgba(var(--color-border), 0); pointer-events: none; opacity: 0.5; } .icon-btn.disabled i { color: rgba(var(--color-border)) !important; } .icon-btn.round { border-radius: 50px; } .icon-btn.round i { font-size: 14px; } .icon-btn.filled i { color: #fff !important; } .icon-btn.filled:hover i { color: #fff !important; } .icon-btn.filled { background-color: rgb(var(--color)); } /* BADGES */ .badge { background-color: rgb(var(--color-red)); color: #fff !important; position: absolute; right: 0; top: 0 !important; padding: 3px 6px; border-radius: 9px; display: flex; justify-content: center; align-items: center; font-size: 10px; font-weight: 600; pointer-events: none; line-height: 12px; transform: scale(0.9); font-family: "Fragment Mono", monospace; } .large .badge { transform: scale(1); } .small .badge { padding: 1px 3.5px; border-radius: 18px; } .monospace { font-family: "DM Mono", monospace !important; letter-spacing: 1px; } .disabled_button { opacity: 0.5; box-shadow: none !important; cursor: default; } .tab.activiteiten .activiteiten-container .th { background-color: #f2f3f7; } /* INPUTS */ /* TEXT INPUT */ input, textarea, .contenteditable_input { border: 1px solid rgb(var(--color-border)); border-radius: 6px; transition: 0.2s ease; outline: none; padding: 0 12px; color: var(--color-theme); position: relative; z-index: 1; background-color: transparent; caret-color: var(--color-theme); } textarea { padding: 8px 12px; resize: none; display: block; transition: border 0.2s ease, padding-left 0.2s ease; } input { line-height: 1; text-overflow: ellipsis; } .round-input input { border-radius: 18px !important; } .contenteditable_input { min-height: 24px; line-height: 24px; width: 100%; background-color: #fff; white-space: nowrap; padding-right: 12px; } input[type="number"] { -moz-appearance: textfield; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input.bg-color::-moz-placeholder { color: #fff !important; } input.bg-color::placeholder { color: #fff !important; } label:has(.display) input::-moz-placeholder, .label:has(.display) input::-moz-placeholder { color: transparent !important; } label:has(.display) input::placeholder, .label:has(.display) input::placeholder { color: transparent !important; } input:hover, textarea:hover { box-shadow: 3px 1px 6px 0px rgba(var(--color-text), 0.125); } input:focus, textarea:focus { border-color: rgb(var(--color-prim)) !important; box-shadow: 3px 1px 6px 0px rgba(var(--color-text), 0.125); } .tabel_cell input.bg-color:focus, textarea.bg-color:focus { border-color: #fff !important; } input:focus ~ .icon, .label:focus-within > .icon { border-color: rgb(var(--color-prim)) !important; } input[type="text"]:focus, textarea:focus { border-color: rgb(var(--color-prim)); box-shadow: 3px 1px 6px 0px rgba(var(--color-text), 0.125); } input.invalid, textarea:invalid { border-color: rgb(var(--color-red)); } input.invalid ~ .icon { border-color: rgb(var(--color-red)); } .aangepast { color: rgb(var(--color-light_blue)) !important; font-weight: 400; } input.large { height: 36px; font-size: 18px; font-weight: 500; } input.is-invalid { border-color: rgb(var(--color-red)); } input.is-invalid ~ .icon { border-color: rgb(var(--color-red)); } .invalid-feedback { position: absolute; top: -6px; right: 0; width: -moz-fit-content; width: fit-content; font-size: 9px; color: rgb(var(--color-red)); background-color: var(--bg-theme); border-radius: 18px; padding: 6px; height: 18px; white-space: nowrap; line-height: 1; } .invalid-tooltip-message .invalid-feedback { pointer-events: none; top: auto; bottom: calc(100% + 3px); left: 50%; transform: translate(-50%); z-index: 999; background-color: #333; color: #fff; padding: 6px 9px; height: -moz-fit-content; height: fit-content; opacity: 0; transition: .2s ease; width: 210px; text-align: center; line-height: 1.4; white-space: inherit; } .invalid-tooltip-message:hover .invalid-feedback, .invalid-tooltip-message input:focus ~ .invalid-feedback { opacity: 1} .tagify ~ .invalid-feedback { top: -24px; } .tagify.is-invalid { border-color: rgb(var(--color-red)); } .tagify.is-invalid ~ .icon { border-color: rgb(var(--color-red)); } textarea:hover:disabled { box-shadow: none; } .input-container { position: relative; } /* LABEL */ label, .label { position: relative; } /* LABEL P */ label p:first-child, .label p:first-child { position: relative; /*height: 18px; display: flex; align-items: center;*/ } label:has(input:required) > p:nth-child(1)::after, .label:has(input:required) > p:nth-child(1)::after { content: "*"; color: rgb(var(--color-red)); margin-left: 3px; } /* INPUT */ label input, .label input, label textarea { min-height: 36px; width: 100%; } /* ICON */ label .icon, .label .icon { position: absolute; height: 24px; right: 6px; bottom: 6px; display: flex; justify-content: center; align-items: center; z-index: 2; transition: 0.2s ease; min-width: 24px; background-color: transparent; border-radius: 18px; pointer-events: none; } label .icon.h-100, .label .icon.h-100 { height: calc(100% - 12px) !important; } label .icon p, .label .icon p { line-height: 1.4; font-size: 12px; padding: 0 6px; } label .icon i, .label .icon i { color: rgb(var(--color-info)); pointer-events: none; transition: 0.2s ease; font-size: 12px; } label .icon.pointer, .label .icon.pointer { pointer-events: all !important; cursor: pointer; } label .icon.pointer:hover, .label .icon.pointer:hover { background-color: rgba(var(--color-prim), 0.1); border-color: rgba(var(--color-prim)); color: rgb(var(--color-prim)); } label .icon.pointer:hover i, .label .icon.pointer:hover i { color: rgb(var(--color-prim)); } /* ICON START */ label .icon.start, .label .icon.start { right: auto; left: 6px; border-radius: 18px; } label:has(> .icon.start) > input, .label:has(> .icon.start) > input { padding-left: 36px !important; padding-right: 12px; text-align: end; } label.small:has(> .icon.start) > input, .label.small:has(> .icon.start) > input { padding-left: 30px !important; padding-right: 9px; text-align: end; } /* LABEL INPUT SMALL */ label input.small ~ .icon, .label input.small ~ .icon { height: 100%; } /*CHECKEN*/ label.small input, .label.small input { min-height: 30px; padding-left: 12px; } label.small > .icon, .label.small > .icon { bottom: 3px; right: 3px; } label.small > .icon.start, .label.small > .icon.start { width: 24px; left: 3px; } label.small > .icon.start i, .label.small > .icon.start i { font-size: 10px; } label.smaller:has(> .icon.start) > input, .label.smaller:has(> .icon.start) > input { padding-left: 30px !important; padding-right: 6px; text-align: end; } /* LABEL INPUT SMALL */ label input.smaller ~ .icon, .label input.smaller ~ .icon { height: 100%; } /*CHECKEN*/ label.smaller input, .label.smaller input { min-height: 24px; padding-left: 9px; } label.smaller .icon, .label.smaller .icon { height: 24px; min-width: 24px; right: 0; bottom: 0; } label.smaller .icon i, .label.smaller .icon i { font-size: 10px; } label.smaller .icon.start, .label.smaller .icon.start { height: 24px; border-radius: 4px; } label.smaller .display { padding: 0 9px; } /* INPUT DISABLED */ label.disabled, .label.disabled { pointer-events: none; } label.disabled input, .label.disabled input { background-color: var(--header-theme); pointer-events: none !important; } label.disabled .icon, .label.disabled .icon, label .icon.disabled { background-color: var(--header-theme); pointer-events: none; } input[type="time"]::-webkit-datetime-edit-hour-field, input[type="time"]::-webkit-datetime-edit-minute-field { padding: 0 3px; } input[type="time"]::-webkit-calendar-picker-indicator { background: none; height: 34px; width: 16px; padding: 0; } .hide-on-blur input { background-color: transparent; color: transparent; transition: padding 0.2s ease, border 0.2s ease; } .hide-on-blur input:focus { background-color: #fff; color: rgb(var(--color-text)); } .hide-on-blur p { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); } label .icon i.focus { display: none; } label input:focus ~ .icon i.blur { display: none; } label input:focus ~ .icon i.focus { display: block; } .gallery{display: flex;flex-direction: column;padding: 12px;} .gallery > div{width:calc(33% - 9px);} .gallery img{width:100%;height:220px; -o-object-fit: cover; object-fit: cover;} .gallery .tag{position: relative;margin-top: -33px;opacity: 0.85;} /* SUMMERNOTE NOTE EDITOR */ .w-100 .note-editor { width: 100%; } body .note-editor.note-airframe .note-editing-area .note-editable { padding: 12px; } .note-editor.note-frame { width: 100%; border-radius: 6px !important; font-family: inherit; transition: 0.2s ease; color: var(--color-theme); border-bottom: solid rgb(var(--color-border)) !important; border: solid rgb(var(--color-border)) !important; border-width: 1px 1px 3px !important; } .note-editor.note-frame .note-toolbar { background-color: transparent; border-bottom: 1px solid rgb(var(--color-border)); padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 6px; } .note-editor .note-toolbar .note-btn-group { margin-top: 0 !important; margin-right: 0 !important; display: flex; width: -moz-fit-content; width: fit-content; } .note-btn-group { display: flex; justify-content: center; align-items: center; } .note-btn-group button.note-btn, .note-btn-group button.note-btn.dropdown-toggle { display: flex; justify-content: center; align-items: center; min-width: 36px; height: 30px; background-color: transparent; border: 1px solid rgba(var(--color-info), 0.5); padding: 0 !important; overflow: hidden; } .note-btn-group .note-btn i { margin: 0; color: rgb(from var(--color-theme) r g b / 0.75); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .note-btn-group .note-btn:hover { border: 1px solid rgba(var(--color), 0.8); background-color: rgba(var(--color), 0.1); } .note-btn-group .note-btn:hover i { color: rgb(var(--color)); } .note-btn-group .note-btn.active, .note-btn-group .note-btn:active { box-shadow: none; border: 1px solid rgb(var(--color)); background-color: rgba(var(--color), 0.2); } .note-btn-group .note-btn:first-of-type { border-radius: 18px 0 0 18px !important; padding-left: 3px !important; width: 39px; } .note-btn-group .note-btn:last-of-type { border-radius: 0 18px 18px 0 !important; padding-right: 3px !important; width: 39px; } .note-btn-group .note-btn:last-of-type:first-of-type { border-radius: 18px !important; padding: 0 3px !important; width: 42px; } .dropdown-toggle::after, .note-icon-caret { display: none !important; margin: 0 !important; } .note-current-color-button { display: none !important; } .note-color-all button.note-btn.dropdown-toggle { border-radius: 18px !important; position: relative; } .note-color-all button.note-btn.dropdown-toggle .note-icon-caret { display: flex !important; } .note-color-all button.note-btn.dropdown-toggle .note-icon-caret::before { display: none !important; } .note-color-all button.note-btn.dropdown-toggle .note-icon-caret::after { content: "A"; position: absolute; left: 50%; top: 50%; font-weight: 600; font-size: 18px; transform: translate(-50%, -50%); } .note-editable { cursor: text !important; } .note-editable p { text-align: left; } .note-editor.note-airframe .note-statusbar, .note-editor.note-frame .note-statusbar { border-radius: 0 0 18px 18px !important; border-top: none !important; border-bottom: 3px solid rgb(var(--color-border)); background-color: transparent !important; height: 3px; opacity: 0; } .note-editor.note-airframe .note-statusbar .note-resizebar .note-icon-bar, .note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar { display: none !important; } .note-editor:has(:focus) { border-color: rgb(var(--color-prim)) !important; } .note-editor:has(:focus) .note-toolbar { border-color: rgb(var(--color-prim)) !important; } .note-editor.note-airframe:has(:focus) .note-statusbar, .note-editor.note-frame:has(:focus) .note-statusbar { border-color: rgb(var(--color-prim)) !important; } .note-editor .dropdown-toggle { padding-left: 9px !important; color: rgb(var(--color-text)); } .no-summernote-border .note-editor.note-frame { border: none !important; } .no-summernote-border .note-display, .summernote-hover-border .note-display { border: none !important; height: calc(100% - 67px); justify-content: start; position: absolute; left: 12px; right: 12px; bottom: 12px; pointer-events: none; word-wrap: break-word; } .no-summernote-border .note-display .fw-500, .summernote-hover-border .note-display .fw-500 { font-weight: 400; } .no-summernote-border:has(.note-display) .note-editable, .summernote-hover-border:has(.note-display) .note-editable { color: transparent !important; caret-color: #333; background: none !important; } .no-summernote-border:has(.note-display) .note-editor .note-editing-area .note-editable:focus-within, .summernote-hover-border:has(.note-display) .note-editor .note-editing-area .note-editable:focus-within { border-color: transparent !important; } .summernote-hover-border .note-editor.note-frame { border-color: transparent !important; transition: 0; } .summernote-hover-border .note-toolbar { opacity: 0; transition: .2s ease; padding: 3px 6px !important; } .summernote-hover-border .note-btn-group button.note-btn, .summernote-hover-border .note-btn-group button.note-btn.dropdown-toggle { height: 24px !important; } .summernote-hover-border .note-editable { padding: 3px 11px !important; } .summernote-hover-border .note-placeholder { top: 3px; padding: 0 11px !important; color: rgb(var(--color-prim)) !important; font-weight: 400; } .summernote-hover-border:hover .note-editor.note-frame { border-color: rgb(var(--color)) !important; } .summernote-hover-border:focus-within .note-editor.note-frame { border-color: rgb(var(--color)) !important; } .summernote-hover-border:hover .note-toolbar, .summernote-hover-border:focus-within .note-toolbar { opacity: 1; } .summernote-pdf .note-editor.note-frame { border-radius: 0 !important; } .summernote-pdf .note-editable { padding: 3px 61px !important; } .summernote-pdf .note-placeholder { padding: 0px 61px !important; } .summernote-pdf .note-toolbar { padding: 3px 61px !important; } .summernote-pdf .note-resizebar { display: none !important; } .summernote-pdf .note-statusbar { display: none !important; } .note-tooltip-content { border-radius: 18px; } .note-dropdown-menu { border: 1px solid rgb(var(--color-border)); border-radius: 18px; padding: 0 !important; display: flex; min-width: 308px !important; box-shadow: 0 2px 6px rgba(var(--color-text), 0.125) !important; } .note-dropdown-menu:has(.note-btn-group.note-align) { min-width: 264px !important; overflow: hidden; } .note-dropdown-menu .note-btn-group.note-align, .note-dropdown-menu .note-btn-group.note-list { width: 100%; border-bottom: 1px solid rgb(var(--color-border)); padding: 9px 12px; margin: 0 !important; display: flex; overflow: hidden; } .note-dropdown-menu .note-palette { padding: 0 !important; margin: 0 !important; width: 50% !important; } .note-dropdown-menu .note-palette:first-child { border-right: 1px solid rgb(var(--color-border)); } .note-dropdown-menu .note-palette .note-palette-title { width: 100%; border-bottom: 1px solid rgb(var(--color-border)); padding: 9px 12px; margin: 0 !important; background-color: rgba(var(--color-info), 0.02); } .note-dropdown-menu .note-palette div:has(.note-color-reset), .note-dropdown-menu .note-palette div:has(.note-color-select) { width: 100%; border-bottom: 1px solid rgb(var(--color-border)); padding: 9px 12px; margin: 0 !important; } .note-dropdown-menu .note-palette .note-color-reset, .note-dropdown-menu .note-palette .note-color-select { width: 100%; border: 1px solid rgba(var(--color-info)) !important; font-size: 10px !important; padding: 3px 6px; margin: 0 !important; background-color: transparent !important; border-radius: 18px !important; height: 24px !important; } .note-dropdown-menu .note-palette .note-color-palette { width: 100%; padding: 3px 6px; margin: 0 !important; display: flex; flex-direction: column; gap: 3px; } .note-dropdown-menu .note-palette .note-color-palette .note-color-row { width: 100%; margin: 0 !important; display: flex; gap: 3px; height: 15px !important; } .note-dropdown-menu .note-palette .note-color-palette .note-color-btn { width: 15px !important; min-width: 15px !important; height: 15px !important; margin: 0 !important; border-radius: 18px !important; } /* SUMMERNOTE POPOVER */ .note-editor.note-airframe .popover-content { border: none; } .popover-content .btn-group.note-color { display: none !important; } .popover-content .btn-group.note-para { display: none !important; } .popover-content .btn-group.note-table { display: none !important; } .popover-content .btn-group.note-insert { display: none !important; } .popover-content .btn-group.note-view { display: none !important; } .popover-content span { display: none; } /*.popover-content .btn-group.note-font button:nth-child(3){display: none;}*/ .note-popover { padding: 0 !important; margin-top: -5px !important; background-color: transparent !important; border: none !important; border-radius: 18px; } .note-popover.bottom .note-popover-arrow { display: none !important; } /* .note-air-popover{ background-color: #fff !important; } */ .note-popover .popover-content { padding: 0 !important; } .note-popover .popover-content > .note-btn-group { margin-right: 0 !important; margin-top: 0 !important; display: block; } -content .btn-group .note-btn { background-color: #444; color: #fff; } .note-popover .popover-content .note-btn-group .note-btn { min-width: 40px; border-color: transparent; } .note-popover .popover-content .note-btn-group .note-btn i { color: #fff; } .note-popover .note-children-container > .note-btn-group { display: none !important; } .note-popover .note-children-container > .note-btn-group.note-font { display: flex !important; } /* DATE PICKER */ label.datepicker { position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; } label.datepicker input, label.datepicker:has(.display) input:focus, .label.datepicker:has(.display) input:focus { width: 100%; color: transparent !important; -webkit-user-select: none; -moz-user-select: none; user-select: none; caret-color: transparent; } label.datepicker .display { justify-content: start !important; } label.datepicker input:focus ~ .display { display: flex; } label.datepicker.small .display { height: 30px; font-size: 11px; } label .display, .label .display { height: 34px; max-height: 100%; position: absolute; left: 1px; right: 1px; bottom: 1px; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: end; padding: 0 12px; background-color: transparent; border-radius: 6px; } /* label.disabled .display { background-color: var(--header-theme); } */ label input:focus ~ .display, .label input:focus ~ .display { display: none; } label:has(.display) input, .label:has(.display) input { color: transparent !important; transition: color 0s ease;} label:has(.display) input:focus, .label:has(.display) input:focus { color: var(--color-theme) !important;} label .forget { position: absolute; right: 0; top: 0; color: rgb(var(--color-prim)); font-size: 10px; cursor: pointer; } label .forget:hover { cursor: pointer; text-decoration: underline; } /* CHECKBOX */ .checkbox { height: 24px; font-size: 12px; color: rgb(from var(--color-theme) r g b / 0.75); position: relative; cursor: pointer; display: flex; align-items: center; } .checkbox input { opacity: 0 !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 0; height: 0; margin: 0; padding: 0 !important; border: 0; position: absolute; } .checkbox i { min-width: 18px; min-height: 18px; background-color: #fff; border: 1px solid rgb(var(--color-border)); border-radius: 3px; display: flex; justify-content: center; align-items: center; margin-right: 12px; font-size: 12px; color: transparent; position: relative; transition: 0.2s ease; z-index: 1; } .checkbox.round i { border-radius: 18px; font-size: 10px; } .checkbox input:checked ~ i { background: linear-gradient( 60deg, rgb(var(--color)), rgba(var(--color), 0.6) ), #ffffff !important; border-color: transparent; color: #fff; } .checkbox i.checked { background-color: rgb(var(--color)); border-color: rgb(var(--color)); color: #fff; } .checkbox i::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; transition: 0.2s ease; border-radius: 50px; z-index: -2; } .checkbox:hover i::after { background-color: rgba(var(--color-border), 0.1); } .checkbox:active i::after { background-color: rgba(var(--color), 0.2); } .checkbox.checked i { background: linear-gradient( 60deg, rgb(var(--color)), rgba(var(--color), 0.6) ), #ffffff; border-color: transparent; color: #fff; } .checkbox.disabled { pointer-events: none; } .checkbox.disabled i { background-color: var(--header-theme) !important; opacity: 0.5; color: transparent; } /* RADIO BUTTONS */ .radio-buttons { display: flex; } .radio-buttons label { display: flex; align-items: center; position: relative; } .radio-buttons label input { opacity: 0; position: absolute; cursor: pointer; } .radio-buttons label span { padding: 0 12px 0 30px; font-size: 12px; } .radio-buttons label span::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 100px; border: 1px solid rgb(var(--color-border)); width: 18px; height: 18px; transition: 0.1s ease; } .radio-buttons label:hover span::after { box-shadow: 0 0 0 12px rgba(var(--color), 0.05); } .radio-buttons label:active span::after { box-shadow: 0 0 0 12px rgba(var(--color-border), 0.5); } .radio-buttons label input:checked ~ span::after { border: 5px solid rgb(var(--color)); } .radio-buttons label input:checked:hover ~ span::after { box-shadow: 0 0 0 12px rgba(var(--color), 0.05); border: 5px solid rgb(var(--color)); } .radio-buttons label input:checked:active ~ span::after { box-shadow: 0 0 0 12px rgba(var(--color-border), 0.5); border: 5px solid rgb(var(--color)); } /* DROPDOWN SELECT */ .dropdown { position: relative; } .dropdown input:-moz-read-only { cursor: pointer !important; } .dropdown input:read-only { cursor: pointer !important; } .dropdown.readonly > input { caret-color: transparent; cursor: pointer; } .dropdown:focus-within { z-index: 150; } .dropdown > input { caret-color: transparent; } .dropdown input:focus ~ .dropdown-container { grid-template-rows: 1fr; border: 1px solid rgb(var(--color-border)); transition-delay: 0s; } .dropdown:has(input:focus) .dropdown-container { grid-template-rows: 1fr; border: 1px solid rgb(var(--color-border)); } .dropdown .dropdown-container:has(input:focus) { grid-template-rows: 1fr; border: 1px solid rgb(var(--color-border)); } .dropdown:has(input:focus) .arrow { opacity: 1; } .dropdown .icon i.fa-angle-down { font-size: 18px; } .dropdown > input:focus ~ .icon i.fa-angle-down { transform: rotate(-180deg); } .dropdown .dropdown-container { position: absolute; top: 100%; width: 100%; display: grid !important; grid-template-rows: 0fr; transition: 0.2s ease; transition-delay: 0.25s; z-index: 1050; border: 0px solid transparent; left: 0; border-radius: 12px; } .dropdown .dropdown-container .arrow { pointer-events: none; opacity: 0; position: absolute; left: 50%; transform: translate(-50%) rotate(45deg); top: -6px; width: 12px; height: 12px; border-top: 1px solid rgba(var(--color-border)); border-left: 1px solid rgba(var(--color-border)); background-color: #fff; transition: 0.2s ease; } .dropdown .dropdown-container:has(input:focus) .arrow { opacity: 1; } .dropdown .dropdown-container .container-inner { overflow: hidden; } .dropdown .dropdown-container .container-inner-inner { padding: 6px; max-height: 210px; overflow-y: auto; flex-direction: column; } /*transition: .1s ease;*/ .dropdown .dropdown-container .item { padding: 6px 12px; width: 100%; cursor: pointer; flex-direction: column; justify-content: center; border-radius: 12px; } .dropdown .dropdown-container .item p { height: -moz-fit-content; height: fit-content; } .dropdown .dropdown-container .item.selected { background-color: rgba(var(--color), 0.1); color: rgba(var(--color)); } .dropdown .dropdown-container .item:hover { background-color: rgba(var(--color), 0.1); color: var(--color-theme); border-color: rgba(var(--color), 1) !important; } .dropdown .dropdown-container .item:hover p { color: rgba(var(--color), 1); } .item:hover .naam { color: rgba(var(--color-prim), 1); } .subtext { color: rgba(var(--color-text-lighter), 0.6); font-size: 10px !important; } .dropdown .dropdown-container .item.active { background-color: rgb(var(--color)); color: #fff !important; border-color: rgb(var(--color-prim)) !important; } .dropdown .dropdown-container .item.active p { color: #fff !important; } .dropdown .dropdown-container .item.active i { color: #fff !important; } .dropdown .dropdown-container .item h5 { color: rgb(var(--color-text)); } .dropdown .dropdown-container .item.product-row { display: flex; flex-direction: row !important ; } .dropdown_item { border-bottom: 1px solid rgba(var(--color-border), 0.5) !important; border: 1px solid transparent; border-left-width: 3px; display: flex; height: 36px; cursor: pointer; } .dropdown_item:hover { background-color: rgba(var(--color), 0.05); color: rgb(var(--color)); } .dropdown_item.active { background-color: rgba(var(--color), 0.1); color: rgb(var(--color)); border-color: rgb(var(--color)) !important; } .dropdown .item.keyboard-active { background: #f1f1f1; } .dropdown.ontop .dropdown-container { top: auto; bottom: 36px; } .dropdown.dropdown-search input { caret-color: rgba(var(--color-text)); } .caret { caret-color: var(--color-border) !important; } .context-group { padding: 6px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid rgb(var(--color-border)); } .context-group:last-of-type { border-bottom: none; } .context-item { width: 100%; padding: 3px 6px; border-radius: 18px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 500; } .context-item.colored-border { padding: 2px 5px; background-color: rgb(var(--color), .1)} .context-item.colored-border i { color: rgb(var(--color)); font-weight: 900; } .context-item i { font-size: 14px; } .context-item:hover { background-color: rgba(var(--color), 0.2); color: rgb(var(--color)); } .context-item.disabled { opacity: 0.2; pointer-events: none; } /* DROPDOWN MENU */ .dropdownmenu-btn { position: relative; width: 36px; height: 36px; align-items: center; justify-content: center; } .dropdownmenu-btn > i { font-size: 24px; color: rgb(var(--color-info)); transition: 0.2s 0.3s ease; pointer-events: none; position: absolute; z-index: 1; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .dropdownmenu-btn > p { font-size: 24px; color: rgb(var(--color-info)); transition: 0.2s 0.3s ease; pointer-events: none; position: absolute; z-index: 1; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .dropdownmenu-btn input { width: 100%; height: 100%; position: absolute; left: 0; top: 0; cursor: pointer; border: 1px solid rgb(var(--color-border)); border-radius: 18px; background-color: var(--bg-theme); transition: 0.2s 0.3s ease; padding: 0 !important; } .dropdownmenu-btn > input:focus { transition-delay: 0s; } .dropdownmenu-btn > input:focus ~ .dropdownmenu { opacity: 1; transform: scale(1); transition-delay: 0s; } .dropdownmenu:focus-within { opacity: 1; transform: scale(1); transition-delay: 0s; } .dropdownmenu-btn:has(> input:focus) > i { transform: rotate(180deg); pointer-events: all; cursor: pointer; transition-delay: 0s; } .dropdownmenu-btn:has(> input:focus) > p { transform: rotate(360deg); pointer-events: all; cursor: pointer; transition-delay: 0s; } .dropdownmenu { position: absolute !important; top: 100%; right: 0; overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform-origin: top right; transform: scale(0); transition: 0.2s 0.3s ease-out !important; z-index: 1000; border: 1px solid rgb(var(--color-border)); } .dropdownmenu .menu-container { width: 100%; padding: 6px; display: flex; flex-direction: column; gap: 0px; } .dropdownmenu-btn.small { width: 30px; min-width: 30px; height: 30px; } /* .dropdownmenu-btn.small input { border-radius: 4px; } */ .offerteregel .dropdownmenu .menu-container { width: 100%; padding: 6px; display: flex; flex-direction: row; gap: 3px; } .edit_regel { width: 100%; display: flex; justify-content: space-between; align-items: center; border-radius: 18px; transition: 0.2s ease; position: relative; outline: 1px solid transparent; padding-right: 12px; padding-top: 3px; border: 1px solid transparent; } .edit_regel:hover { background-color: rgba(var(--color-prim), 0.05) !important; outline: 1px solid rgba(var(--color), 0.5); } .edit_regel .drag { cursor: grab; opacity: 0.1; transition: 0.2s ease; } .edit_regel:hover .drag { opacity: 0.75; } .edit_regel:hover .drag:hover { opacity: 1; } .product_regel { display: flex; align-items: end; width: 100%; gap: 6px; } /* .notitie { height: fit-content; min-height: 35px; display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 8px; } */ .notitie { height: -moz-fit-content; height: fit-content; min-height: 18px; display: flex; flex-direction: column; justify-content: center; } .notitie p { display: flex; align-items: center; height: -moz-fit-content; height: fit-content; } .notitie p.text-center, .notitie p.text-end { padding-right: 12px; } .scheidingslijn textarea { border-bottom: 2px solid rgb(var(--color-info)) !important; overflow: hidden; } .scheidingslijn .notitie { position: relative; } .scheidingslijn .notitie::after { content: ""; position: absolute; left: 0; bottom: 0; width: calc(100% - 12px); height: 1px; background: rgb(var(--color-info)); } .scheidingslijn .notitie:last-child:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: rgb(var(--color-info)); } /* REGELS TABEL */ .regels_tabel > .column { border-left: 1px solid rgba(var(--color-border), 0.5); border-right: 1px solid rgba(var(--color-border), 0.5); border-bottom: 1px solid rgba(var(--color-border), 0.5); overflow: hidden; padding: 0 10px; } .offerteregel_form .regels_tabel > .column { border: 1px solid rgb(var(--color-border)); border-radius: 6px; margin-bottom: 3px; min-height: 36px; justify-content: center; } .witregel { border: none !important; } .witregel + .column { border-top: 1px solid rgba(var(--color-border), 0.5); border-top-left-radius: 6px; border-top-right-radius: 6px; } .column:has(+ .witregel) { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .regels_tabel .bg-header { border-bottom: 1px solid rgba(var(--color-border), 0.5); } .regels_tabel > .column:first-of-type { border-top-left-radius: 12px; border-top-right-radius: 12px; border-top: 1px solid rgba(var(--color-border), 0.5); } .regels_tabel > .column:nth-last-child(2) { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .dropdownmenu .menu-item { display: flex; height: 30px; min-height: 30px; width: 100%; padding: 0px 12px; align-items: center; border-radius: 18px; cursor: pointer; } .dropdownmenu .menu-item i { font-size: 15px; margin-right: 12px; } .dropdownmenu .menu-item p { font-size: 12px; white-space: nowrap; } .dropdownmenu .menu-item:hover { background: rgba(var(--color), 0.1); } .dropdownmenu .menu-item:hover i, .dropdownmenu .menu-item:hover p { color: rgb(var(--color)); } .dropdownmenu .menu-item.active { pointer-events: none; background-color: rgb(var(--color)) !important; color: white !important; } /* DROPDOWN MENU SMALL */ .dropdownmenu-btn-small { position: relative; min-width: 25px; width: 25px; height: 25px; align-items: center; justify-content: center; } .dropdownmenu-btn-small i { font-size: 17px; color: rgb(var(--color-info)); transition: 0.2s ease; line-height: 0; } .dropdownmenu-btn-small input { width: 100%; height: 100%; position: absolute; left: 0; top: 0; cursor: pointer; border: 1px solid rgb(var(--color-border)); border-radius: 18px; background-color: transparent; } .dropdownmenu-btn-small input:focus ~ .dropdownmenu-small { opacity: 1; transform: scale(1); transition-delay: 0s; z-index: 2; } .dropdownmenu-btm-small input:focus ~ .fal { transform: rotate(80deg); } .dropdownmenu-small { position: absolute !important; top: 100%; right: 0; overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform-origin: top right; transform: scale(0); transition: 0.2s 0.1s ease-out; z-index: 2; gap: 3px; } .dropdownmenu-small .menu-item { z-index: 1; width: 100%; align-items: center; background-color: transparent; transition: 0.2s ease; cursor: pointer; padding: 6px 12px; border-radius: 6px; } .dropdownmenu-small .menu-item i { font-size: 15px; margin-right: 12px; } .dropdownmenu-small .menu-item p { font-size: 12px; white-space: nowrap; } .dropdownmenu-small .menu-item:hover { background-color: rgba(var(--color-prim), 0.1); } .dropdownmenu-small .menu-item i, .dropdownmenu-small .menu-item p { transition: 0.2s ease; } .dropdownmenu-small .menu-item:hover i, .dropdownmenu-small .menu-item:hover p { color: rgb(var(--color-prim)); } .dropdownmenu-visible { display: none; } .focus-icon-2 { right: 30px !important; } .focus-icon-2:hover { z-index: 10 !important; } .disabled .focus-icon-2 { display: none; } /* DROPDOWN MENU ICON_BTN */ .dropdownmenu-btn-inline { position: relative; min-width: 30px; width: 30px; height: 30px; align-items: center; justify-content: center; border: none; border-radius: 18px; } .dropdownmenu-btn-inline:hover { background-color: rgba(var(--color-prim), 0.1); } .dropdownmenu-btn-inline:hover i { color: rgb(var(--color-prim)); } .dropdownmenu-btn-inline i { font-size: 18px; color: rgb(var(--color-info)); transition: 0.2s ease; line-height: 0; } .dropdownmenu-btn-inline input { width: 100%; height: 100%; position: absolute; left: 0; top: 0; cursor: pointer; border: none !important; box-shadow: none !important; border-radius: 18px; background-color: transparent; } .dropdownmenu-btn-inline input:focus ~ .dropdownmenu-small { opacity: 1; transform: scale(1); transition-delay: 0s; z-index: 2; } .dropdownmenu-btm-inline input:focus ~ .fal { transform: rotate(80deg); } .dropdownmenu-inline { position: absolute !important; top: 100%; right: 0; overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform-origin: top right; transform: scale(0); transition: 0.2s 0.1s ease-out; z-index: 2; } .dropdownmenu-inline .divider { width: 100%; min-height: 1px; background-color: rgb(var(--color-border)); } .dropdownmenu-inline .menu-container { min-width: 100%; height: 36px; padding: 0px; } .dropdownmenu-inline .menu-item { z-index: 1; height: 36px; width: 100%; align-items: center; background-color: transparent; transition: 0.2s ease; cursor: pointer; padding: 12px; } .dropdownmenu-inline .menu-item i { font-size: 15px; margin-right: 12px; } .dropdownmenu-inline .menu-item p { font-size: 12px; white-space: nowrap; } .dropdownmenu-inline .menu-item:hover { background-color: rgba(var(--color-prim), 0.1); } .dropdownmenu-inline .menu-item i, .dropdownmenu-small .menu-item p { transition: 0.2s ease; } .dropdownmenu-inline .menu-item:hover i, .dropdownmenu-small .menu-item:hover p { color: rgb(var(--color-prim)); } /* TOOLTIP */ .tooltip.show { opacity: 1; z-index: 9999; pointer-events: none; } .tooltip .tooltip-inner { padding: 6px 15px; background-color: rgb(var(--color-black)); border-radius: 18px; font-size: 12px; opacity: 1; font-family: Poppins; max-width: 300px; } .tooltip .tooltip-inner .w-240px.justify-content-between { padding: 3px; border-bottom: 1px solid #fff2; min-width: 240px !important; width: 100% !important; } .tooltip .tooltip-inner .w-240px.justify-content-between:not(:has(+ .w-240px.justify-content-between)) { border-bottom: none; } .tooltip .tooltip-inner .w-240px.justify-content-between b { text-align: end; } .tooltip .kv { display: flex; align-items: center; justify-content: space-between; min-width: 240px; width: 100%; } .tooltip .kv span { font-weight: 500; } .tooltip-arrow { pointer-events: none; } .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: rgb(var(--color-black)); border-width: 6px; } .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: rgb(var(--color-black)); border-width: 6px; } .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: rgb(var(--color-black)); border-width: 6px; } .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: rgb(var(--color-black)); border-width: 6px; } .apexcharts-tooltip{ background-color: rgb(var(--color-black)) !important; border-radius: 18px !important; font-size: 12px !important; font-family: Poppins; max-width: 300px; border: none !important; color: #fff; z-index: 100 !important; } .apexcharts-tooltip .apexcharts-tooltip-series-group { padding: 0px 12px 0px 9px !important; } .apexcharts-tooltip .apexcharts-tooltip-series-group p { font-weight: 500 !important; } .loading-screen { position: fixed; z-index: 99999999; background-color: #f8f7fa; background-image: linear-gradient( 60deg, rgba(var(--color-light_blue), 0.2) 0%, var(--base-theme) 50%, rgba(var(--color-light_blue), 0.2) 100% ); width: 100vw; height: 100vh; top: 0; left: 0; } .loading-screen.hide { opacity: 0; pointer-events: none; transition: 0.75s 0.5s ease; } /* SCROLLBARS */ ::-webkit-scrollbar { width: 6px; height: 6px; border-left: 1px solid rgba(var(--color-border), 0.5); border-top: 1px solid rgba(var(--color-border), 0.5); } ::-webkit-scrollbar-track { background: transparent; border: none; overflow: auto; } ::-webkit-scrollbar-thumb { background: rgba(var(--color-text-light), 0.6); border-radius: 18px; overflow: auto; -webkit-transition: 0.2s ease; transition: 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-text-light)); cursor: grab !important; } .big-scrollbar::-webkit-scrollbar { width: 9px; height: 12px; } .no-scrollbar::-webkit-scrollbar { width: 0px; height: 0px; border: none !important; } /* PAGE STYLING */ .main { position: absolute; width: 100vw; height: 100vh; top: 0px; left: 0; border-left: 230px solid transparent; overflow: visible; transition: 0.3s ease; transition-delay: 0s; overflow-x: hidden; } .main.collapsed { border-left: 80px solid transparent; } .main.hide { opacity: 0; pointer-events: none; transition-delay: 0.2s; } /* .page { animation: fadeInAnimation ease 300ms; } */ @keyframes fadeInAnimation { 0% { opacity: 0; } 33% { opacity: 0; } 100% { opacity: 1; } } @keyframes widthAnimation { 0% { width: 0%; } 100% { width: 100%; } } .page { width: 100%; height: 100vh; transition: 0.2s 0.4s ease; position: absolute; top: 0; overflow-y: scroll; overflow-x: hidden; padding: 90px 12px 12px 24px; } .pdf-header { padding-bottom: 12px; justify-content: space-between; align-items: baseline; } .pdf-header img { height: 60px; max-width: 90%; -o-object-fit: contain; object-fit: contain; } .pdf { /* font-size: 12px !important; line-height: 20px !important; */ color: #000 ; } .pdf h5 { font-size: 10px; color: #000000; font-weight: 700; } .pdf .top hr { margin: 24px 0; } .pdf .details { min-height: 80px; padding: 0px 0 20px 0px; justify-content: space-between; } /*margin-top: 24px;*/ /*margin:12px;*/ .pdf .regels_tabel { padding: 0px; } .pdf .regels_tabel > * { border-left: none; border-right: none; border-bottom: none; border-radius: 0 !important; } .pdf .regels_tabel > .notitieregel { padding: 0 10px; } .pdf .regels_tabel > .notitieregel:has(.witregel) + *:not(.notitieregel:has(.witregel)) { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .pdf .regels_tabel .bg-header { background-color: transparent; position: relative; border: none !important; } .pdf .regels_tabel .bg-header::after { background-color: #333; content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; } /* .pdf .regels_tabel .bg-header:first-child::after { left: 10px; } */ .pdf .regels_tabel .column-count-last.bg-header::after { width: calc(100% - 20px); } .pdf .regels_tabel .scheidingslijn .notitie::after { background-color: #333; } .pdf .notitie p.text-center, .pdf .notitie p.text-end { padding-right: 10px; } .pdf .bg-header p { color: #000000; } .pdf .regels_tabel .column-count-0 { padding-left: 10px; } .pdf .regels_tabel .column-count-last { padding-right: 10px; } .pdf .regels_tabel > .w-100:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; } .pdf .regels_tabel > .w-100:last-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /*margin-left:-12px;margin-right:-12px;width:calc(100% + 24px) !important;*/ .pdf .regels_tabel .offerteregel .has-header { } /* .pdf .column{display: flex;padding-left: 12px;height: 27px;justify-content: center;flex-direction: column;} */ /* .pdf .regels_tabel .factuurregel > div > div:nth-child(2) .column, .pdf .regels_tabel .offerteregel > div > div:nth-child(2) .column{margin-left:10px;} */ /* .pdf .regels_tabel .factuurregel > div > div:nth-last-child(1) .column, .pdf .regels_tabel .offerteregel > div > div:nth-last-child(1) .column{margin-right:10px;} */ .pdf .details-totals { padding: 42px 0 0; } .pdf .details-totals .bedrag-row { width: 220px; } .pdf .footer { padding: 0; width: calc(100% - 64px); } .pdf .footer .footertext { display: block; text-align: center; } .page.hide { pointer-events: none; opacity: 0; } .contactgegevens { display: flex; flex-direction: column; gap: 12px; } .pdf .contactgegevens { gap: 6px; } .pdf .bedrag-row { display: flex; min-height: 30px; align-items: center; } .pdf .details-totals .bedrag-row.border-top { border-top: 1px solid #000000 !important; } .a4 { position: relative; margin: 0; -moz-column-break-inside: avoid; break-inside: avoid; } .a4 .h-36px { position: relative; margin: 0; -moz-column-break-inside: avoid; break-inside: avoid; } .page_break { -moz-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; page-break-before: auto; } .end_page { page-break-after: always; } .a4-9-12 { position: relative; margin: 0; width: calc(210mm - 18mm); height: calc(297mm - 24mm); } /* .a4.page_break { page-break-after: always; } */ .pdf_page pre{margin-bottom: 0;} .box { position: relative; border-radius: 12px; background-color: #FFFFFF; box-shadow: 0 2px 6px rgba(var(--color-text), .125); transition: .2s ease; } /* .box { position: relative; border-radius: 6px; background-color: #FFFFFF; border: 1px solid rgba(var(--color-border), 1); } */ .box-title { padding: 9px 18px; text-align: center; border-bottom: 1px solid rgb(var(--color-border), .5); } .box-container { padding: 9px 18px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid rgb(var(--color-border), .5); } .box-container:last-of-type { border-bottom: none; } .box.loading { pointer-events: none; position: relative; } .box.loading::after { content: attr(data-message); text-align: center; color: rgb(var(--color-text)); font-size: 10px !important; font-weight: 500; padding-top: 72px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 18px; background-color: #fff; z-index: 200; } .box.loading::before { content: "\f110"; position: absolute; left: calc(50% - 12px); top: 24px; z-index: 201; color: rgb(var(--color)); font-size: 18px; line-height: 1; animation: rotate 1s linear infinite; font-weight: 400; font-family: "Font Awesome 5 Pro"; } .tab.loading { pointer-events: none; } .tab.loading::after { content: attr(data-message); text-align: center; color: rgb(var(--color-text)); font-size: 14px; font-weight: 500; padding-top: 60px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 18px; background-color: #fff; z-index: 200; } .tab.loading::before { content: "\f110"; position: absolute; left: calc(50% - 12px); top: 24px; z-index: 201; font-family: "Font Awesome 5 Pro"; color: rgb(var(--color-prim)); font-size: 24px; line-height: 1; animation: rotate 1s linear infinite; } .border-bottom-red { border-bottom: 3px solid rgb(var(--color-red)); } /* SIDEBAR */ .sidebar-form { display: flex; flex-wrap: wrap; padding: 24px 12px 98px; gap: 12px; } .sidebar { transition: 0.2s ease; width: 230px; height: 100vh; background-color: #ffffff; box-shadow: 0 2px 6px rgba(var(--color-info), 0.25); position: fixed; top: 0px; left: 0px; padding: 0 6px; z-index: 1052; } .sidebar-image-container { position: relative; z-index: 1; background-image: linear-gradient(#fff, #fff, transparent); transition: 0.2s ease; padding: 18px 12px; height: 100px; margin-bottom: -100px; display: flex !important; align-items: center; justify-content: center; } .sidebar.collapsed .sidebar-image-container { padding: 0; } .sidebar-image-container img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .nav-scroll-container { width: 100%; height: 100vh; overflow-y: scroll; overflow-x: hidden; scrollbar-width: none; padding: 100px 6px 24px; display: flex; flex-direction: column; align-items: center; } .nav-scroll-container::-webkit-scrollbar { width: 0px; } .sidebar .bottom-fade { position: absolute; left: 0; bottom: 0; height: 50px; width: 100%; background-image: linear-gradient(transparent, #fff); z-index: 1; pointer-events: none; } .sidebar .divider { opacity: 0; min-height: 0; height: 0; transition: 0.2s ease; } .sidebar.collapsed .divider { opacity: 1; height: 36px; min-height: 36px; padding-left: 3px; } .nav-heading { height: 36px; width: 100%; padding: 24px 18px 6px; font-size: 10px; color: rgb(var(--color-text), .5); margin: 0; font-weight: 600; line-height: 1; transition: 0.2s ease; } .sidebar.collapsed .nav-heading { height: 0; opacity: 0; padding: 0; } .offcanvas-ho { position: fixed; bottom: 0; top: 0; right: 0; display: flex; flex-direction: column; max-width: 100%; overscroll-behavior: contain; background-color: var(--bg-theme); background-clip: padding-box; outline: 0; transform: translateX(100%); transition: transform 0.3s ease 0s; z-index: 1060; } .offcanvas-ho.show { transform: none; } /* .offcanvas-ho::after { content: "\f141"; font-weight: 900; font-size: 24px; color: rgb(var(--color-black)); font-family: 'Font Awesome 5 Pro'; position: absolute; display: flex; align-items: center; justify-content: center; left: 0; top: 0; width: 100%; height: 100vh; background: var(--header-theme); z-index: 999; pointer-events: none; transition: .2s .25s ease; opacity: 0; } */ .offcanvas-ho::after { content: "laden..."; font-size: 10px; color: rgb(var(--color-info)); position: absolute; display: flex; align-items: center; justify-content: center; left: 0; top: 0; width: 100%; height: 100vh; background: var(--header-theme); z-index: 999; pointer-events: none; transition: 0.2s 0.25s ease; opacity: 0; } .offcanvas-ho.loading::after { opacity: 1; pointer-events: all; transition: 0s 0s ease; } /* MOBILE SIDEBAR */ .header .open-menu { display: none !important; } .show-mobile .sidebar { transform: translate(0) !important; position: relative; } .sidebar-modal { z-index: 1051; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: #2f2b3d80; opacity: 0; pointer-events: none; } .show-mobile .sidebar-modal { opacity: 1; pointer-events: all; } .nav-item { position: relative; width: 100%; min-height: 33px; max-height: 33px; border-radius: 18px; background-color: transparent; padding: 0 12px; display: flex; align-items: center; color: rgb(var(--color-text-light)); cursor: pointer; margin-bottom: 3px; } .nav-item:last-of-type { margin-bottom: 0; } .nav-item, .nav-item i, .nav-item p { transition: 0.2s ease; } .nav-item i { width: 32px; min-width: 32px; height: 15px; font-size: 15px; display: flex; justify-content: center; align-items: center; } .nav-item p { padding-left: 5px; font-size: 12px; } .nav-item:hover { padding-left: 24px; background-color: rgba(var(--color-info), 0.1); } .nav-item .tool { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .sidebar.collapsed .nav-item p { opacity: 0; } .sidebar.collapsed .nav-item:hover { padding-left: 12px; } .nav-item.active { background: linear-gradient( 60deg, rgb(var(--color)), rgba(var(--color), 0.5) ), #ffffff; box-shadow: 0 2px 6px rgba(var(--color), 0.3); } .nav-item.active i, .nav-item.active p { color: #ffffff; } .nav-item.active:hover { background-color: rgb(var(--color-prim)); } .nav-item.subactive { background-color: rgba(var(--color-info), 0.1); } .resize-btn { position: absolute; width: 24px; height: 24px; right: 0; bottom: 50px; border-radius: 50%; transform: translate(50%); display: flex !important; justify-content: center; align-items: center; cursor: pointer; } .resize-btn i { font-size: 20px; transition: 0.2s ease; } .sidebar.collapsed { width: 80px; } .sidebar.collapsed .resize-btn i { transform: rotate(180deg); } .sidebar.collapsed .nav-item .dropdown-icon { display: none; } .sidebar:not(.collapsed) .nav-item .tool { display: none; } .nav-item.dropdown i { font-size: 10px; } /* CollapseContainer */ .collapseContainer { display: grid; grid-template-rows: 1fr; transition: all 200ms 100ms; } .collapseInner { overflow: hidden; } .collapseContainer.hide { grid-template-rows: 0fr; } .collapseContainer:not(.hide) .collapseInner { overflow: visible; animation: delay-overflow 1s; } .collapseContainer .arrow { pointer-events: none; opacity: 0; position: absolute; left: 50%; transform: translate(-50%) rotate(45deg); top: -6px; width: 12px; height: 12px; border-top: 1px solid rgba(var(--color-border)); border-left: 1px solid rgba(var(--color-border)); background-color: #fff; transition: 0.2s ease; } .collapseContainer:not(.hide) .arrow { opacity: 1; } .activiteiten .subactiviteiten > td > .collapseContainer:not(.hide) > .collapseInner { overflow: visible; animation: delay-overflow 1s; } @keyframes delay-overflow { from { overflow: hidden; } } @keyframes scale-in { from { transform: scale(0.5); } } .nav-item .dropdown-icon { font-size: 12px; transition: 0.2s ease; position: absolute; right: 12px; } .rotate90 { transform: rotate(90deg); } .rotate-180 { transform: rotate(180deg); transition: 0.2s ease; } /* HEADER */ .header { position: fixed; left: 254px; top: 9px; right: 18px; height: 60px; max-height: 60px; min-height: 60px; display: flex; justify-content: space-between; transition: 0.2s ease; z-index: 1050; } .header::before { content: ""; height: 80px; width: calc(100% + 39px); position: absolute; left: -28px; top: -20px; z-index: -1; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .header.collapsed { left: 104px; } .header-box { padding: 0 24px; width: 100%; height: 100%; justify-content: space-between; } .header-box h1 { font-size: 24px; margin-right: 24px; } .header-left { height: 100%; justify-content: flex-end; align-items: center; } .header .user-id { justify-content: center; flex-direction: column; align-items: flex-end; padding: 0 12px; line-height: 1.2; } .profile { position: relative; } .profile .menu-toggle { position: absolute; right: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .profile .menu-toggle:focus ~ .dropdownmenu { opacity: 1; transform: scale(1); transition-delay: 0s; } .profile .dropdownmenu { top: 60px; } .back-button { width: 400px; height: 100%; justify-content: flex-start; align-items: center; } .back-button.hide { height: 0; } .back-button.hide button { display: none; } .back-button i { font-size: 10px; } /* DYNAMIC OFFCANVAS / DETAILS SIDEBAR */ .offcanvas { border: none !important; overscroll-behavior: contain; z-index: 1060; visibility: visible !important; } .offcanvas-header { padding: 0 12px; min-height: 48px; height: 48px; /*background-color: #F2F3F7;*/ background: linear-gradient( 60deg, rgb(var(--color)), rgba(var(--color), 0.8) ), #ffffff; color: #ffffff; } .offcanvas-header h5 { font-size: 14px; font-weight: 500; } .offcanvas-header .icon-btn i { color: #fff; } .offcanvas-header .icon-btn:hover { background-color: #ffffff1a; } .offcanvas-header .box .icon-btn i { color: rgb(var(--color)); } .offcanvas-header .box .icon-btn:hover { background-color: rgba(var(--color), 0.1); } .offcanvas-body { background-color: var(--header-theme); overscroll-behavior: contain; padding: 0px 0px 96px; } .offcanvas-body.log { padding: 24px; } .details-container { padding: 24px; border-bottom: 1px solid #ebe9f1; } /* form { display: flex; flex-wrap: wrap; gap: 12px;} */ /* BULLETS */ .bullet-container { display: flex; flex-direction: column; width: 20px; min-height: 100%; align-items: center; } .bullet-container i { padding: 6px 3px; font-size: 15px; } .memo-repeater:last-child .bullet-line { display: none; } .bullet { display: flex; min-width: 19px; max-width: 19px; min-height: 19px; max-height: 19px; align-items: center; justify-content: center; box-shadow: inset 10px 10px rgb(var(--color)); border: 4px solid rgba(var(--color), 0.2); border-radius: 50px; z-index: 1; outline: 6px solid var(--bg-theme); } /* KEY-VALUE */ .key-value { min-width: 300px; width: 100%; display: flex; justify-content: space-between; position: relative; } .key-value:hover::before { content: ""; position: absolute; left: -12px; top: 0; background-color: var(--header-theme); border-radius: 18px; width: calc(100% + 24px); height: 100%; } .key-value.pointer:hover::before { border: 1px solid rgb(var(--color)); background-color: rgba(var(--color), 0.1); } .key-value > * { position: relative; z-index: 1; } .key-value > p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 27px; line-height: 27px; font-size: 12px; max-width: 60%;} .key-value.small > p { height: 18px; line-height: 18px; font-size: 10px; } .key-value > p i { font-size: 15px; margin-right: 6px; padding-bottom: 2px; } .key-value > p:nth-child(1) { padding-right: 12px; opacity: 0.75; } /* .key-value > p:nth-child(2) { opacity: 0; } */ .key-value > p:nth-child(3) { font-weight: 400; } .key-value > p.span { white-space: normal; overflow: auto; height: -moz-fit-content; height: fit-content; line-height: 1.5; padding-top: 5px; width: 70%; } .key-value > ul { padding: 7px 0 0 12px; width: 70%; } .key-value > ul li span { font-size: 12px; } .key-value > p.wrap {white-space: normal; overflow: visible; text-overflow: unset; height: auto; overflow-wrap: break-word; line-height: 1.3; padding-top: 5px; height: auto; text-align: end;} .capitalize { text-transform: capitalize; } /* .key-value { min-width: 300px; width: 100%; display: flex; } .key-value > p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 24px; line-height: 24px; font-size: 12px; align-items: center; display: flex; } .key-value > p i { font-size: 15px; margin-right: 6px; padding-bottom: 2px; } .key-value > p:nth-child(1) { width: 180px; min-width: 180px; padding-right: 12px; } .key-value > p:nth-child(3) { padding: 0 12px; } .key-value > p.span { white-space: normal; overflow: auto; height: fit-content; line-height: 1.5; padding-top: 5px; width: 70%; } .key-value > ul { padding: 7px 0 0 12px; width: 70%; } .keuring_data:empty::before {content: '--'; color: var(--color-border);} /* MEMO */ .key-value > ul li span { font-size: 12px; } */ .memo-input { display: flex; width: 100%; min-height: 44px; padding-bottom: 24px; } .memo-input .memo-row { border: 0px; } .memo-input textarea { resize: none; height: 42px; white-space: pre-wrap; } .memo-input textarea:disabled { background-color: #ffffff; border: 0px; resize: none; } .icon-btn.save-memo { display: flex; width: 42px; height: 100%; margin-left: 12px; background-color: rgb(var(--color-prim)); } .icon-btn.save-memo i { color: #ffffff; font-size: 21px; } .memo-repeat { display: flex; flex-direction: column; width: 100%; margin-top: 12px; justify-content: start; } .memo-repeat .memo-row:last-child .bullet-line { display: none; } .memo-row { display: flex; width: 100%; } .memo-row strong { margin-left: 24px; } .bullet-line { width: 1px; height: 100%; background-color: rgb(var(--color-border)); align-self: center; } .bullet-line-row { width: 100%; height: 1px; background-color: rgb(var(--color-border)); align-self: center; } .memo .note-editor.note-airframe .note-editing-area .note-editable { border: none !important; } .no-border .note-editor.note-airframe .note-editing-area .note-editable { border: none !important; } .bts-1 { border-top: 1px solid rgb(var(--color-border)) !important; } /* border-bottom: 11px solid rgb(var(--color-prim)); */ .button-container { margin-left: 24px; margin-bottom: 10px; } .space { justify-content: space-between; align-items: center; } .space i { font-size: 20px; } .memo-row.logs strong { font-size: 14px; font-weight: 600; color: rgb(from var(--color-theme) r g b / 0.75); } .memo-input.logs p { margin-left: 24px; } .memo-date { align-self: center; font-size: 10px; font-weight: 400; color: rgb(from var(--color-theme) r g b / 0.75); } /* .memo-badge { position: absolute; top: 0; right: 0; display: flex; height: 15px; width: 15px; background-color: rgb(var(--color-orange)); border: 0px none; border-radius: 50%; align-items: center; justify-content: center;} */ .badge-small p { font-size: 10px; color: #ffffff; } /* ABONNEMENTEN */ .subtotal { display: flex; align-items: center; height: 30px; padding-left: 24px; } .subtotal p { white-space: nowrap; font-size: 12px; } .bedrag { padding-right: 15px; width: 30%; text-align: end; } .totals-container { margin-top: 20px; } .totals-bedrag { height: 24px; border: 0px; pointer-events: none; font-size: 12px; text-align: end; padding-right: 15px; width: 30%; } .radio-buttons.column { width: 50%; gap: 16px; margin-top: 10px; margin-bottom: 16px; } .option { height: 40.6px; transition: 0.2s ease; overflow: hidden; } .option.hide { height: 0; } .korting { transition: 0.2s ease; } .korting.hide { width: 0; } .totals-table tr:nth-child(2) td:nth-child(1), .totals-table tr:nth-child(2) td:nth-child(2), .totals-table tr:nth-child(2) td:nth-child(3), .totals-table tr:nth-child(2) td:nth-child(4), .totals-table tr:nth-child(3) td:nth-child(2), .totals-table tr:nth-child(3) td:nth-child(1) { border-bottom: 0px; } .small-table.totals-table tbody tr:hover { background-color: #ffffff; } .pointer { cursor: pointer !important; } /* OVERZICHT PAGINA */ .page-header { padding: 15px 24px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 52; } .page-header > div { gap: 12px; } .page-header .title { font-size: 24px; line-height: 1; margin-bottom: 0px; font-weight: 600; } /* TABLE */ .table { display: table; margin: 0; width: 100%; height: 0px; color: var(--color-theme); --bs-table-color-state: rgb(110, 107, 123); } .table-container { min-height: 441px; border-bottom: 1px solid rgba(var(--color-border), 0.5); } /* table.table thead.table-head { height: 40px; max-height: 40px; background-color: #F2F3F7; text-transform: uppercase; } */ table.table thead.table-head { height: 40px; max-height: 40px; background-color: var(--header-theme); text-transform: uppercase; } table.table thead .sorting:before, table.table thead .sorting_asc:before, table.table thead .sorting_desc:before, table.table thead .sorting_asc_disabled:before, table.table thead .sorting_desc_disabled:before { right: 12px !important; font-family: "Font Awesome 5 Pro"; content: "\f106" !important; top: 3px !important; font-size: 18px; font-weight: 200; } table.table thead .sorting:after, table.table thead .sorting_asc:after, table.table thead .sorting_desc:after, table.table thead .sorting_asc_disabled:after, table.table thead .sorting_desc_disabled:after { right: 12px !important; font-family: "Font Awesome 5 Pro"; content: "\f107" !important; bottom: 3px !important; font-size: 18px; font-weight: 200; } .activiteiten-header .sorting { position: relative; cursor: pointer; } .activiteiten-header .sorting:before { position: absolute; opacity: 0; right: 9px; font-family: "Font Awesome 5 Pro"; content: "\f30c" !important; top: 6px !important; font-size: 15px; font-weight: 200; transition: 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.5); color: rgb(var(--color)); } .activiteiten-header .sorting:hover:before { opacity: 1 !important; } .activiteiten-header .desc.sorting:before { opacity: 0.8; } .activiteiten-header .asc.sorting:before { opacity: 0.8; transform: rotate(-180deg); top: 5px; } .table-container th { padding-left: 24px; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-weight: 500; } .table-container th:nth-child(1) { padding-left: 21px; border-left: 3px solid var(--header-theme); } .table tbody { border-top: none !important; } .table tbody tr { height: 40px; max-height: 40px; vertical-align: middle; } table.verwijderd { border-left: 3px solid rgb(var(--color-red)); } .table tbody tr:hover { background-color: rgba(var(--color-border), 0.1); } /* .table-row { height: 60px !important; max-height: 60px !important; width: 100%; } .table-row:hover { background-color: #FAFAFA; } */ .table-container td { padding-left: 24px; border-bottom: 1px solid rgba(var(--color-border), 0.5); } .table-container td:nth-child(1) { padding-left: 21px; border-left: 3px solid transparent; } .table-container td .d-flex .acties { align-items: unset !important; gap: 12px; } thead tr th:first-child:has(.checkbox), tbody tr td:first-child:has(.checkbox) { width: 42px; min-width: 42px; max-width: 42px; } .verlofregelstabel tr { justify-content: space-between; } .verlofregelstabel th, .verlofregelstabel td { width: 25%; } .Vakantieverlof { --color: var(--color-green); } .Ziekteverlof { --color: var(--color-red); } .Mantelzorgverlof { --color: var(--color-teal); } .Studieverlof { --color: var(--color-deep_purple); } .Zwangerschapsverlof { --color: var(--color-prim); } .Ouderschapsverlof { --color: var(--color-orange); } .Onbetaald.verlof { --color: var(--color-black); } .Tijd.voor.tijd { --color: var(--color-blue_grey); } .tooltip .Tijd.voor.tijd, .tooltip .Onbetaald.verlof, .tooltip .Studieverlof { --color: var(--color-grey); } .bg-verlof {background-color:rgb(var(--color-info), .05);} .bg-verlof.striped{background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, rgb(var(--color-info), .25) 2px, rgb(var(--color-info), .25) 4px)} .bg-verlof.color {background-color:rgb(var(--color), .05);} .bg-verlof.color.striped {background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, rgb(var(--color), .25) 2px, rgb(var(--color), .25) 4px)} .bg-verlof { background-image: repeating-linear-gradient( 135deg, rgba(var(--color-info), 0.025), rgba(var(--color-info), 0.025) 12.5px, rgba(var(--color-info), 0.15) 12.5px, rgba(var(--color-info), 0.15) 14.1px ) !important; } .bg-verlof.color { background-image: repeating-linear-gradient( 135deg, rgba(var(--color), 0.05), rgba(var(--color), 0.05) 12.5px, rgba(var(--color), 0.2) 12.5px, rgba(var(--color), 0.2) 14.1px ) !important; } /* .bg-verlof.color {background-image: repeating-linear-gradient(135deg, transparent, transparent 9px, rgb(var(--color), .1) 9px, rgb(var(--color), .1) 12px)} */ #verlofdatepicker .ui-datepicker { width: 100% !important; display: flex !important; justify-content: space-evenly; z-index: 0 !important; box-shadow: none; border: 0; } #verlofdatepicker .ui-datepicker::after { content: "Selecteer datums"; position: absolute; left: 50%; top: 12px; transform: translate(-50%); font-size: 12px; } #verlofdatepicker .ui-datepicker .ui-datepicker-group { padding: 6px; margin: 45px 6px 13px; border: 1px solid rgba(var(--color-border), 0.5); border-radius: 6px; } #verlofdatepicker a.ui-state-active { background-color: var(--bg-theme); color: rgb(var(--color-text)); } #verlofdatepicker .ui-state-selected a { background-color: rgb(var(--color-prim)); color: #fff !important; font-weight: 500; } /* TABS */ .tabs { display: flex; flex-direction: row; position: relative; gap: 6px; width: 100%; padding: 0 12px; margin: 0; border-bottom: 1px solid rgba(var(--color-border), 0.5); scroll-behavior: smooth; } .tabs li { list-style: none; height: 36px; color: rgb(var(--color-text-light)); padding: 0 12px; margin: 0px 0; display: flex; justify-content: center; align-items: center; font-size: 12px; white-space: nowrap; transition: 0.2s ease; background-color: transparent; border-top-left-radius: 6px; border-top-right-radius: 6px; } .tabs li:hover { cursor: pointer; background-color: rgba(var(--color-border), 0.2); } .tabs li.active { color: rgb(var(--color)); background-color: rgba(var(--color), 0.1); } .tabs .tabline { position: absolute; left: 0; bottom: 0; min-width: 10px; height: 2px; background-image: linear-gradient( 60deg, rgb(var(--color)), rgba(var(--color), 0.5) ); transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .tabs i { font-size: 18px; margin-right: 6px; } .tabs li.active p { color: rgb(var(--color)); } .tabs li::marker { content: none; } .tabs.scroll { overflow-x: scroll; scroll-behavior: smooth; } .tabs.scroll::-webkit-scrollbar { display: none; } .overflow-icon { position: absolute; left: 100%; top: 0; height: 98%; width: 36px; transform: translate(-36px); background-image: linear-gradient(-90deg, #fff, #fff, transparent); display: flex; justify-content: center; align-items: center; z-index: 1; cursor: pointer; padding-top: 2px; } .overflow-icon i { font-size: 12px !important; } .overflow-icon ~ .tabs { padding-right: 48px; } .tab-container { display: flex; flex-direction: row; justify-content: space-between; } /* TABS VERTICAL */ .tabs-vertical { display: flex; flex-direction: column; position: relative; padding: 0; margin: 0; border-right: 1px solid rgba(var(--color-border), 0.5); gap: 3px; } .tabs-vertical li { list-style: none; min-width: 150px; min-height: 36px; padding: 6px 12px; margin-left: 12px; display: flex; align-items: center; border-top-left-radius: 6px; border-bottom-left-radius: 6px; border-right: 2px solid transparent; } .tabs-vertical li i { font-size: 14px; width: 25px; } .tabs-vertical li:hover { cursor: pointer; border-right: 2px solid rgba(var(--color-border), 0.5); background-color: rgba(var(--color-border), 0.2); } .tabs-vertical li.active { color: rgb(var(--color)); background-color: rgba(var(--color), 0.1); } .tabs-vertical .tabline { position: absolute; right: 0; top: 0; width: 2px; height: 38px; background-image: linear-gradient( 60deg, rgb(var(--color)), rgba(var(--color), 0.5) ); transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .sticky-buttons { display: flex; position: absolute; bottom: 0; left: 0; padding: 18px 24px; width: 100%; background-color: var(--bg-theme); border-top: 1px solid rgba(var(--color-border), 0.5); gap: 18px; z-index: 2; box-shadow: 0 -24px 12px 0 rgba(var(--color-info), 0.05); } .settings-tabs { width: 100%; height: 36px; display: flex; flex-direction: row; align-items: center; } .tab-item { position: relative; height: 40px; border-radius: 18px; background-color: transparent; padding: 0 24px; display: flex; align-items: center; color: rgb(var(--color-text-light)); cursor: pointer; } .tab-item, .tab-item i, .tab-item p { transition: 0.2s ease; } .tab-item i { font-size: 18px; } .tab-item p { padding-left: 10px; font-size: 14px; } .tab-item:hover { background-color: rgba(var(--color-text-light), 0.1); } .tab-item.active { background-color: rgb(var(--color-prim)); } .tab-item.active i, .tab-item.active p { color: #ffffff; } .tab-content { position: relative; overflow: hidden; width: 100%; } .tab-content .tab { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; overflow-x: hidden; transition: 0.2s ease; padding-top: 24px; } .tab-content .tab form { padding: 0; } /* SMALL TABLE */ /* SMALL TABLE */ .small-table-header { height: 36px; justify-content: space-between; } .acties { align-items: center; height: 24px; -moz-column-gap: 12px; column-gap: 12px; } .small-table { width: 100%; border-radius: 18px; box-shadow: none; } .small-table thead { height: 30px; border: none; color: rgb(var(--color-info)); background-color: #f2f3f7; } .small-table thead tr { height: 30px; } .small-table thead th { font-size: 12px; font-weight: 700; text-transform: none; border: none; vertical-align: middle; } .small-table td, .small-table tr { white-space: nowrap; font-size: 12px; padding-left: 15px; height: 35px; border-bottom: 1px solid rgba(var(--color-border), 0.5); } .small-table th { white-space: nowrap; font-size: 12px; padding-left: 15px; height: 30px; } .small-table tbody tr { height: 35px; } .small-table input { height: 24px; border: 0px; color: rgb(var(--color-text-lighter)); font-size: 12px; } .small-table .contenteditable_input { height: 24px; border: 0px; color: rgb(var(--color-text-lighter)); font-size: 12px; } .small-table input:hover, .small-table input:focus { border: 0px; color: rgb(var(--color-text-lighter)); box-shadow: none; } .results .item { font-size: 12px; } .dropdown-small i { font-size: 12px; } label .icon i.small-icon, .label .icon i.small-icon { font-size: 12px; } table.small-table thead .sorting:before, table.small-table thead .sorting_asc:before, table.small-table thead .sorting_desc:before, table.small-table thead .sorting_asc_disabled:before, table.small-table thead .sorting_desc_disabled:before { right: 24px !important; font-family: "Font Awesome 5 Pro"; content: "\f106" !important; top: 0 !important; font-size: 16px; font-weight: 200; } table.small-table thead .sorting:after, table.small-table thead .sorting_asc:after, table.small-table thead .sorting_desc:after, table.small-table thead .sorting_asc_disabled:after, table.small-table thead .sorting_desc_disabled:after { right: 24px !important; font-family: "Font Awesome 5 Pro"; content: "\f107" !important; bottom: 0 !important; font-size: 16px; font-weight: 200; } .th.sorting { position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .th.sorting:hover { color: rgb(var(--color-text)); } .th.sorting:before { position: absolute; right: 12px !important; font-family: "Font Awesome 5 Pro"; content: "\f106" !important; top: 1px !important; font-size: 14px; font-weight: 200; opacity: 0.5; } .th.sorting:after { position: absolute; right: 12px !important; font-family: "Font Awesome 5 Pro"; content: "\f107" !important; bottom: 1px !important; font-size: 14px; font-weight: 200; opacity: 0.5; } .th.pr-24.sorting:before { right: 24px !important; } .th.pr-24.sorting:after { right: 24px !important; } .th.asc:after { opacity: 1; color: rgb(var(--color-text)); } .th.desc:before { opacity: 1; color: rgb(var(--color-text)); } /* PAGINATION */ .pagebar { display: flex; height: 48px; justify-content: space-between; align-items: center; padding: 9px 24px; } .pagebar.small { height: 36px; padding: 12px 24px; border-top: 1px solid rgba(var(--color-border), 0.5); } .pagebar.small .info { font-size: 10px; } .pagination { margin: 0; align-items: center; } .page-link { position: relative; background-color: var(--header-theme); margin: 0px 2px !important; display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; border: 0; border-radius: 50px !important; font-size: 14px; box-shadow: none !important; color: rgb(from var(--color-theme) r g b / 0.75); cursor: pointer; } .link-container { display: flex; background-color: var(--header-theme); border-radius: 50px; } .link-container .page-link { margin: 0px !important; } .page-link:hover { background-color: rgba(var(--color), 0.1); color: rgb(var(--color)); } .page-link span { display: flex; } .page-link i { font-size: 18px; } .page-link.active { background-color: rgb(var(--color)); color: #fff; } .page-link.disabled { opacity: 0.5; color: rgb(from var(--color-theme) r g b / 0.75); background-color: var(--header-theme); } .page-link.middle { height: 30px; width: 30px; } .page-link.end { height: 28px; width: 28px; } .small .page-link { margin: 0px 1px !important; height: 24px; width: 24px; font-size: 12px; } .small .page-link i { font-size: 14px; } .absolute { position: absolute !important; } /* BULKACTIES */ .bulkacties { position: fixed; bottom: 12px; left: 50%; transform: translate(-50%); height: 0px; transition: 0.5s ease; overflow: hidden; border-radius: 12px; border-bottom: 0px solid rgb(var(--color-prim)); z-index: 99999; } .bulkacties.show { height: 60px; box-shadow: 2px 2px 16px rgba(var(--color-text), 0.125); border-bottom: 3px solid rgb(var(--color-prim)); } .bulk-container { width: 100%; height: 60px; background-color: var(--bg-theme); border: 1px solid rgb(var(--color-border)); border-radius: 12px; } .bulk-container > .d-flex { position: relative; justify-content: center; align-items: center; flex-direction: column; border-right: 1px solid rgba(var(--color-border), 0.5); padding: 0 12px; min-width: 60px; gap: 9px; } .bulk-container > .d-flex:last-child { border-right: none; } .bulk-container p { font-size: 10px; text-align: center; line-height: 1; white-space: nowrap; } .bulk-container h6 { text-align: center; font-size: 24px; margin: 0; line-height: 1; } .bulkacties i { font-size: 21px; text-align: center; color: var(--color-theme); } .bulkactie-knop:hover { cursor: pointer; background-image: linear-gradient( rgba(var(--color), 0.1), rgba(var(--color), 0.1) ), linear-gradient(var(--bg-theme), var(--bg-theme)); } .bulkactie-knop:hover i { background-image: inherit; } .bulkactie-knop:hover i, .bulkactie-knop:hover p { color: rgb(var(--color)); } .bulkacties.urenregistraties.show { height: 75px; } .bulkacties.urenregistraties .bulk-container { height: 75px; } /* POPUP / MODAL */ .modal { opacity: 0; pointer-events: none; transition: 0.2s ease; justify-content: center; align-items: center; z-index: 1100; } .modal.show { display: flex !important; opacity: 1; pointer-events: all; } .modal::after { content: ""; position: fixed; left: 0; top: 0; background-color: #2f2b3da0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1; } .modal .modal-dialog { max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 96px); display: block !important; } .modal .loading { pointer-events: none; } .modal .loading::after { content: attr(data-message); font-weight: 600; padding-top: 48px; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 18px; background-color: rgba(255, 255, 255, 0.8); z-index: 200; pointer-events: all; } .modal .loading::before { content: "\f110"; position: absolute; left: calc(50% - 12px); top: calc(50% - 12px); z-index: 201; font-family: "Font Awesome 5 Pro"; color: rgb(var(--color-prim)); font-size: 24px; line-height: 1; animation: rotate 1s linear infinite; } .modal-content { border-radius: 18px; background-color: var(--bg-theme); box-shadow: 2px 2px 16px rgba(var(--color-text), 0.125); border: none; pointer-events: none; } .modal-content > p { text-align: center; } .modal-content label > p { text-align: start; } .modal-content .label > p { text-align: start; } .modal-content .note-editable p { text-align: start; } .modal-header { height: 54px; background: linear-gradient( 60deg, rgb(var(--color)), rgba(var(--color), 0.8) ), #ffffff; position: relative; padding: 0; border-radius: 18px 18px 0 0; } .modal-header h5 { font-weight: 500; color: #fff !important; font-size: 16px; width: 100%; text-align: center; } .modal-header .btn-close, .modal-content .btn-close { position: absolute; top: 0; right: 0; border-radius: 18px; background: #fff; box-shadow: 2px 2px 16px rgba(var(--color-black), 0.5) !important; transform: translate(3px, -3px); opacity: 1; width: 32px; height: 32px; padding: 0; transition: 0.2s ease; } .modal-content .btn-close { margin: -5px -5px -5px auto; } .modal-header .btn-close::after, .modal-content .btn-close::after { position: absolute; font-family: "Font Awesome 5 Pro"; top: 50%; left: 50%; transform: translate(-50%, -50%); content: "\f00d"; font-weight: 300; color: rgb(var(--color-text-light)); font-size: 18px; opacity: 0.8; transition: 0.2s ease; } .btn-close:has(i)::after { content: "" !important; } .modal-header .btn-close:hover, .modal-content .btn-close:hover { transform: translate(3px, 0); } .modal-body { padding: 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; } .modal-body .icon-50px { font-size: 50px; color: rgb(var(--color-prim)); } .modal-body h3 { text-align: center; } .modal-footer { padding: 15px 24px; border-top: 1px solid rgba(var(--color-border), 0.5); display: flex; justify-content: center; align-items: center; gap: 12px; } .modal-footer > * { margin: 0; } .modal.show .modal-content { pointer-events: all; } .modal-backdrop { background: none; } .modal .forget { color: rgb(var(--color-prim)); width: 100%; padding: 0px 24px 24px; font-size: 12px; text-align: center; margin-top: -12px; } .modal .forget:hover { text-decoration: underline; cursor: pointer; } /* .modal.orange .modal-header { background-color: rgb(var(--color-orange)); } */ /* .modal.red .modal-header { background-color: rgb(var(--color-red)); } */ /* .modal.green .modal-header { background-color: rgb(var(--color-green)); } */ /* .modal.info .modal-header { background-color: rgb(var(--color-info)); } */ .form-control { background-color: var(--bg-theme); color: var(--color-theme); } /* LOGIN PAGE */ .login { width: 100vw; height: 100vh; display: flex; overflow: hidden; background-image: url('https://www.gdmedical.nl/wp-content/uploads/2020/05/gd-contact.jpg') !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important;} .login-container { width: 500px; position: relative; padding: 48px 24px 24px; color: rgb(var(--color-text)); display: flex; align-items: center;} .login .box-a { position: absolute; background-color: rgba(var(--color), 0.1); height: 240px; width: 240px; z-index: -1; top: -72px; left: -48px; border-radius: 18px; } .login .box-b { position: absolute; border: 1px solid rgba(var(--color), 0.5); height: 180px; width: 180px; z-index: -1; top: -96px; left: 48px; border-radius: 18px; } .login .box-c { position: absolute; border: 1px dashed rgba(var(--color), 0.5); height: 300px; width: 300px; z-index: -1; bottom: -96px; right: -72px; border-radius: 18px; display: flex; justify-content: center; align-items: center; } .login .box-d { background: rgba(var(--color), 0.1); height: 240px; width: 240px; z-index: -1; border-radius: 18px; } .login .stap1 { width: 100%; display: flex !important; flex-direction: column; padding: 24px 0px; gap: 12px; } .login .stap1 img { padding: 0 48px; } .login .stap1 .text-input { width: 100%; } .login .stap1 .center { text-align: center; font-size: 14px; } .login .stap1 .title { font-size: 18px; font-weight: 500; } .login .stap1 .ga-terug { width: 100%; margin: 0; padding-top: 12px; font-size: 12px; color: rgb(var(--color-prim)); text-align: center; } .login .stap1 .ga-terug:hover { text-decoration: underline; cursor: pointer; } .login .stap1 .ga-terug i { margin-right: 6px; } /* MISC */ .tag { height: auto; min-height: 30px; line-height: 1.4; padding: 6px 12px; background: linear-gradient( rgba(var(--color), 0.1), rgba(var(--color), 0.1) ), var(--bg-theme); color: rgba(var(--color), 1) !important; font-size: 10px !important; font-weight: 600; display: flex; align-items: center; justify-content: center; border-radius: 18px !important; width: -moz-fit-content; width: fit-content; border: 1px solid transparent; } .tag.button:hover, button.tag:hover { background-image: linear-gradient( rgba(var(--color), 0.2), rgba(var(--color), 0.2) ), linear-gradient(var(--bg-theme), var(--bg-theme)); cursor: pointer; border: 1px solid rgb(var(--color)) !important; } .tag.small { min-height: 24px; padding: 3px 9px; font-size: 9px !important; } /* .tag i { background-image: inherit; } */ .tag.square { height: 24px; width: 24px; padding: 6px; } .tag.square i { font-size: 14px; } .tag.square.large { height: 42px; width: 42px; padding: 6px; } .tag.square.large i { font-size: 24px; } .tag.outline { outline: 2px solid var(--bg-theme); } .tag.solid { background-image: linear-gradient(rgb(var(--color)), rgb(var(--color))); color: #fff !important; } .transition-bar { animation: tr-bar 2s cubic-bezier(0.2, 0.8, 0.5, 1.5) forwards; } @keyframes tr-bar { 0% { width: 20%; } 50% { width: 20%; } } .gap-0 { gap: 0 !important; } .gap-3 { gap: 3px !important; } .gap-6 { gap: 6px !important; } .gap-12 { gap: 12px !important; } .gap-18 { gap: 18px !important; } .gap-24 { gap: 24px !important; } .initials { min-width: 33px; max-width: 33px; height: 33px; background: linear-gradient(rgba(var(--color), 0.1), rgba(var(--color), 0.1)), #ffffff; border-radius: 50px; color: rgb(var(--color)) !important; font-weight: 600; text-transform: uppercase; font-size: 12px; display: flex; justify-content: center; align-items: center; line-height: 1; transition: 0.2s ease; } .avatar { width: 33px; height: 33px; } .initials.small { min-width: 24px; width: 24px; height: 24px; font-size: 10px; } .initials.smaller { min-width: 18px; width: 18px; height: 18px; font-size: 8px; padding-top: 2px; } .initials.smaller.current { border: 1px solid; } .initials.large { min-width: 80px; width: 80px; height: 80px; font-size: 36px; } .initials.medium { min-width: 48px; width: 48px; height: 48px; font-size: 24px; } .initials.solid { background: linear-gradient( 60deg, rgb(var(--color)), rgba(var(--color), 0.5) ), var(--bg-theme) !important; color: var(--bg-theme) !important; } .initials.square { border-radius: 6px !important; } .initials.bordered { border: 1px solid rgb(var(--color)); } .initials.overlap { margin-right: -18px; border: 3px solid var(--bg-theme); } .initials.solid.overlap { margin-right: -18px; border: none; } .initials.small.overlap { margin-right: -12px; border-width: 2px; font-size: 8px; } .initials.smaller.overlap { margin-right: -6px; border-width: 0px !important; font-size: 8px; outline: 1px solid var(--bg-theme); } .initials.button:hover { opacity: 1; cursor: pointer; } .initials.ho { box-shadow: inset 0 0 0 6px rgb(var(--color-ho-sec)),inset 0 0 0 12px rgb(var(--color-ho-prim)) } .initials.small.ho { box-shadow: inset 0 0 0 4px rgb(var(--color-ho-sec)),inset 0 0 0 8px rgb(var(--color-ho-prim)) } .initials.smaller.ho { box-shadow: inset 0 0 0 3px rgb(var(--color-ho-sec)),inset 0 0 0 6px rgb(var(--color-ho-prim)) } .initials.pointer:hover { opacity: 1; } .modal-initials { min-width: 48px; max-width: 48px; height: 48px; background: linear-gradient( 60deg, rgb(var(--color)), rgba(var(--color), 0.5) ), #ffffff !important; color: #ffffff !important; font-weight: 600; text-transform: uppercase; font-size: 24px; display: flex; justify-content: center; align-items: center; line-height: 1; transition: 0.2s ease; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 201; position: absolute; border-radius: 50px; box-shadow: 0 2px 6px rgba(var(--color-text), .125); } .modal-initials.light { background: linear-gradient(rgba(var(--color), 0.1), rgba(var(--color), 0.1)), #ffffff !important; color: rgb(var(--color)) !important; } .pill { background-color: rgba(var(--color-info), 0.1); display: flex; align-items: center; padding-right: 18px; gap: 6px; border-radius: 50px; height: -moz-fit-content; height: fit-content; width: -moz-fit-content; width: fit-content; transition: 0.1s ease; outline: 1px solid rgba(var(--color-border), 0.5); } .pill.outline-solid { outline: 1px solid rgba(var(--color-border)); } .pill.hover:hover { cursor: pointer; outline: 1px solid rgb(var(--color)); } .pill .initials.solid i { color: #fff !important; } .pill .initials.small i { font-size: 10px !important; } .pill.hover:hover .initials.solid i { color: #fff !important; } .pill p { white-space: nowrap; } .pill.small { padding-right: 12px; gap: 6px; } .pill.small p { font-size: 10px !important; font-weight: 500; height: auto !important; } .actie-buttons { display: flex; } .actie-buttons-small { display: flex; justify-content: end; padding-right: 15px; } /* DETAILS PAGE */ .details-main { display: flex; justify-content: space-between; gap: 24px; background-color: transparent; } .details-inner { display: flex; width: 80%; } .details-actions { display: flex; flex-direction: column; gap: 6px; padding: 24px; } .details-actions-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; } /* .details-actions input { pointer-events: none; } */ .bedrag-row { display: flex; height: 30px; } .bedrag-row span { white-space: nowrap !important; align-self: center; } .bedrag-row span:nth-child(3) { text-align: end; } .editable.enable input { pointer-events: all; } .editable.disable input { pointer-events: none; } .history-container { display: flex; gap: 10px; } .tooltip-container { height: 20px; width: 20px; border: 1px solid rgb(var(--color-info)); border-radius: 50px; background-color: rgb(var(--color-border)); text-align: center; } .tooltip-container p { align-self: center; justify-self: center; font-size: 11px; color: rgb(var(--color-info)); } .log-text p { font-size: 12px; font-weight: 400; color: rgb(var(--color-text-lighter)); } input.disabled { pointer-events: none; } /* NIEUWFACTUUR PAGE */ .contactdetails { display: flex; flex-direction: column; margin-top: 20px; gap: 10px; } .factuurdetails { width: 75%; } .detailrow { display: flex; height: 40px; align-items: start; justify-content: space-between; } .regelheader { height: 45px; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; } .factuurregels { width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 0 24px; gap: 12px; } .regelbuttons { display: flex; padding: 0 42px 0 33px; justify-content: space-between; align-items: center; } /* .factuurregel { padding: 0 12px; } */ .factuurregel.detail { pointer-events: none; } .dropdown-container button { align-self: end; margin-top: 3px; } .column { display: flex; flex-direction: column; } .row { display: flex; flex-direction: row !important; } .regelkorting { display: flex; width: 100%; justify-content: end; align-items: center; gap: 12px; padding: 6px 12px; } .regelkorting p { font-size: 12px; } .hidden_input { display: none; } .factuurkorting { display: flex; flex-direction: column; align-self: end; padding: 24px; width: 30%; background-color: rgba(var(--color-border), 0.6); margin-right: 24px; gap: 12px; } .factuurkorting .sectie { display: flex; justify-content: space-between; align-items: center; } .sectie p:hover { cursor: pointer; color: rgb(var(--color-prim)); } p.hover:hover { color: rgb(var(--color)); } .korting-row { transition: 0.2s ease; } .korting-row.hide span { height: 0; display: none; } .tag.Verzonden, .tag.Openstaand { --color: var(--color-orange); } .tag.Concept, .tag.Nog.te.verwerken { --color: var(--color-info); } .tag.Betaald, .tag.Deels, .tag.Volledig.geleverd, .tag.Goedgekeurd, .tag.Actief, .tag.Verwerkt, .tag.Afgerond, .tag.Geleverd { --color: var(--color-green); } .marker.Betaald, .marker.Deels, .marker.Goedgekeurd, .marker.Actief { --color: var(--color-green); } .tag.Vervallen, .tag.Afgekeurd, .tag.Wordt, .tag.Opgezegd { --color: var(--color-red); } .marker.Vervallen, .marker.Afgekeurd, .marker.Wordt, .marker.Opgezegd { --color: var(--color-red); } .tag.Gecrediteerd { --color: var(--color-sec); } .tag.Gefactureerd, .tag.Bevestigd { --color: var(--color-indigo); } .tag.Ondertekend { --color: var(--color-teal); } .tag.Open { --color: var(--color-light_blue); } .button-row { display: flex; gap: 12px; padding: 6px; justify-content: end; } .button-row button { width: 25%; min-height: 20px !important; } button.back i { color: rgb(var(--color-text-lighter)); } /* FACTUUR DETAILS */ .factuur_details .left_panel .notitie { display: block; } .factuur_details .right_panel .notitie { display: none; } .factuur_details .left_panel .interne_medewerker { display: block; } .factuur_details .right_panel .interne_medewerker { display: none; } /* SJABLONEN */ .var-sjabloon { display: flex; flex-direction: column; gap: 12px; } .var-sjabloon button { width: 55%; height: 36px; font-size: 12px; } .var-sjabloon .tag { border: 0; } .note-editable .tag, .contenteditable_input .tag { display: inline; line-height: 12px; margin-right: 2px; } .sjabloonpage { width: 210mm; min-width: 210mm; min-height: 297mm; display: flex; flex-direction: column; gap: 12px; padding: 48px 48px 24px 48px; border: 1px dashed rgb(var(--color-info)); border-radius: 12px; --bg-theme: #ffffff !important; --color-theme: #000000 !important; --header-theme: #FAFAFA !important; --color-border: 219, 219, 219 !important } .sjabloon-container { display: flex; justify-content: space-between; } .sjabloon-container.foot { margin-top: 48px; justify-content: end; } .contact-info { display: flex; flex-direction: column; border: 1px dashed rgb(var(--color-info)); border-radius: 18px; overflow: hidden; } .contact-info .bb-1 { border-bottom: 1px dashed rgb(var(--color-info)) !important; background-color: var(--header-theme); } .bedrijf-info { text-align: end; } .sjabloontabel { border: 1px dashed rgb(var(--color-info)); border-radius: 18px; } .footertext { display: flex; justify-content: center; } .footertext .tag { display: inline-flex; } .footertext p { justify-self: center; display: inline-block; } .totals-table-sjabloon tr:nth-child(2) td:nth-child(1), .totals-table-sjabloon tr:nth-child(2) td:nth-child(2), .totals-table-sjabloon tr:nth-child(2) td:nth-child(3), .totals-table-sjabloon tr:nth-child(2) td:nth-child(4), .totals-table-sjabloon tr:nth-child(2) td:nth-child(5), .totals-table-sjabloon tr:nth-child(2) td:nth-child(6), .totals-table-sjabloon tr:nth-child(2) td:nth-child(7), .totals-table-sjabloon tr:nth-child(3) td:nth-child(1), .totals-table-sjabloon tr:nth-child(3) td:nth-child(2), .totals-table-sjabloon tr:nth-child(3) td:nth-child(3), .totals-table-sjabloon tr:nth-child(3) td:nth-child(4), .totals-table-sjabloon tr:nth-child(3) td:nth-child(5), .totals-table-sjabloon tr:nth-child(3) td:nth-child(6) { border-bottom: 0px; } .totals p { color: rgb(var(--color-text-lighter)); font-size: 12px; } .footer { display: flex; flex-direction: column; gap: 12px; padding: 12px 24px; width: 100%; } .footer.no-border { border: 0; } .footer.no-border .footertext { font-size: 24px !important; } /* .footer p { text-align: center; justify-self: center; } */ .contactvariabelen { display: flex; flex-direction: column; margin-top: 24px; gap: 12px; align-content: center; border: 1px solid rgb(var(--color-border)); } .variabele-row { display: flex; align-items: center; height: 60px; border: 1px solid rgb(var(--color-border)); } .modal-footer.variabelen { padding-top: 24px; } .variabel { display: flex; align-items: center; height: 30px; padding: 6px 12px; } .head-row { display: flex; align-items: center; justify-content: space-between; padding: 12px; background-color: #f2f3f7; } .head-row-pdf { display: flex; height: 30px; align-items: center; justify-content: space-between; padding: 12px; background-color: #ffffff; } .head-row-pdf p { font-size: 12px; color: rgb(var(--color-text-lighter)); } .head-row p { font-size: 12px; color: rgb(var(--color-text-lighter)); font-weight: 700; text-transform: uppercase; } .cell { height: 100%; width: 100%; background-color: #ffffff; border-top: 1px solid rgb(var(--color-border)); font-weight: 700; text-transform: uppercase; } /* DROPZONE */ .dropzone { width: 100%; height: 100%; min-height: 105px; border: 1px dashed rgb(var(--color-border)); border-radius: 6px; padding: 6px; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; } .dropzone .temp-image { max-width: 100%; } .dropzone:has(.dz-error) { border-color: rgb(var(--color-red)); } .dropzone:hover { box-shadow: 3px 1px 6px 0px rgba(var(--color-text), 0.125); } .dropzone:focus { border-color: rgb(var(--color-prim)); padding-left: 18px; box-shadow: 3px 1px 6px 0px rgba(var(--color-text), 0.125); } .dropzone.invalid { border-color: rgb(var(--color-red)); } .dropzone .dz-message { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 3px; margin: 0; } .dropzone .dz-message i { font-size: 24px; } .dropzone .dz-message .dz-button { border-radius: 18px; font-size: 12px; color: #fff; background-color: rgb(var(--color-prim)); padding: 6px 12px; } .dropzone.dz-started .dz-message { display: flex; } .dropzone .dz-preview { width: 100%; min-height: 82px; max-height: 82px; display: flex; justify-content: center; align-items: center; margin: 0; pointer-events: none; } /* .dropzone:has(.dz-error) .dz-preview .dz-image { display: none; } */ .dropzone .dz-preview .dz-image { width: 100%; height: 82px; display: flex; justify-content: center; align-items: center; margin: 0; border-radius: 0; padding: 6px; } .dropzone img { pointer-events: none; height: 82px; -o-object-fit: contain; object-fit: contain; max-width: 100%; transition: 0.2s ease; } .dropzone:hover img { filter: none !important; transform: scale(0.95) !important; } .dropzone .dz-preview .dz-details { top: 100%; background-color: #333; border-radius: 18px; min-width: -moz-fit-content; min-width: fit-content; max-width: -moz-fit-content; max-width: fit-content; padding: 6px 12px; left: 50%; transform: translate(-50%); } .dropzone .dz-preview .dz-details div { margin: 0 !important; padding: 0 !important; } .dropzone .dz-preview .dz-details div span { background-color: transparent !important; color: #fff; font-size: 12px; margin: 0 !important; padding: 0 !important; } .dropzone .dz-preview .dz-error-message { opacity: 1 !important; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgb(var(--color-red)); width: -moz-max-content; width: max-content; border-radius: 18px; padding: 6px 12px; } .dropzone .dz-preview .dz-error-message::after { display: none; } .dropzone .dz-preview .dz-error-message span { font-weight: 500; font-size: 12px; color: #fff; } .dropzone .dz-preview .dz-succes-mark, .dropzone .dz-preview .dz-error-mark { display: none; } .dropzone .dz-preview.dz-file-preview .dz-details { opacity: 0; } .dz-drag-hover { background-color: rgba(var(--color), 0.1); } .dmxDropzoneMessage { color: inherit !important; margin: 0 !important; } .color-transparent .dmxDropzoneMessage { font-size: 1px; margin: 0 !important; } .pdfpreview { display: flex; flex-direction: column; height: 100%; width: 100%; } .selectedbestand .temp-image { display: none !important; } .selectedbestand.dz-drag-hover { outline: 2px dashed rgb(var(--color-prim)); position: relative; } .selectedbestand.dz-drag-hover::before { content: "\f574"; font-family: "Font Awesome 5 Pro"; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 18px; background-color: #fff8; z-index: 100; pointer-events: none; display: flex; justify-content: center; align-items: center; font-size: 48px; font-weight: 900; color: rgb(var(--color-prim)); } .selectedbestand .dz-preview { display: none !important; } .selectsjabloonvoor .dz-preview { display: none !important; } .selectsjabloonvoor .temp-image { display: none !important; } .selectsjabloonvoor.dz-drag-hover { border: 3px dashed rgba(var(--color-prim), 0.5); } .selectsjabloonachter .dz-preview { display: none !important; } .selectsjabloonachter .temp-image { display: none !important; } .selectsjabloonachter.dz-drag-hover { border: 3px dashed rgba(var(--color-prim), 0.5); } .border.prim { border-color: rgb(var(--color-prim)) !important; } /* Export */ .dates, .numbers { display: flex; width: 100%; gap: 12px; align-items: center; } .dates p { text-align: center; align-self: center; } .dates i { color: rgba(var(--color-text-lighter), 0.6); } .checkboxes { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; align-self: start; } .modal-body.export p { align-self: start; } /* Inkoopfactuur */ .newinkoopregel { display: flex; align-items: center; padding: 24px; } .details-actions.inkooprregels { gap: 24px; } /* users */ .userdetail { display: flex; justify-content: space-between; margin-left: 12px; gap: 12px; align-items: center; } .teamleden { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(var(--color-border), 0.5); } .teamleden-details { display: flex; align-items: center; height: 42px; gap: 12px; } .teamleden:hover { cursor: pointer; background-color: rgba(var(--color-prim), 0.1); } .teamleden:hover p { color: rgb(var(--color-prim)); } .teamlid { height: 24px; background-color: rgba(var(--color-info), 0.1); display: flex; align-items: center; justify-content: space-between; border-radius: 50px; gap: 6px; } .teamlid .remove { height: 24px; width: 24px; font-size: 10px; display: flex; align-items: center; justify-content: center; border-radius: 50px; } .teamlid .remove:hover { cursor: pointer; background-color: rgba(var(--color-text), 0.1); color: #ffffff; } .pill .remove { height: 24px; width: 24px; font-size: 10px; display: flex; align-items: center; justify-content: center; border-radius: 50px; } .pill .remove:hover { cursor: pointer; background-color: rgba(var(--color-text), 0.1); color: #ffffff; } .pill:has(.remove) { padding-right: 0px !important; } /* Urenregistratie */ /* .registratie-scroll-container { position: relative; } .registratie-scroll-container .vandaag { position: absolute; width: 48px; height: calc(100%); border: 1px solid rgb(var(--color)); left: 800px; z-index: 3; } */ .overzicht-per-maand { width: calc(100% - 260px); height: calc(100vh - 169px); } .overzicht-per-week { width: calc(100% - 260px); height: calc(100vh - 156px); } .opdracht_tab_container .overzicht-per-maand { width: 100%; height: calc(100vh - 313px); } .opdracht_tab_container .overzicht-per-week { width: 100%; height: calc(100vh - 313px); } .registratie { min-width: 100%; border-bottom: 1px solid rgba(var(--color-border), 0.5); height: 36px; display: flex; align-items: center; background-color: var(--bg-theme); } .registratie.verrekend .sticky-block { pointer-events: none; background-color: rgb(var(--color-green), .1)} .registratie .sticky-block { position: sticky; left: 0; min-width: 523px; border-right: 1px solid rgba(var(--color-border), 0.5); height: 100%; display: flex; align-items: center; justify-content: space-between; background-color: var(--bg-theme); z-index: 10; } .registratie .sticky-block.sticky-header > p { padding: 0 6px; display: flex; align-items: center; font-weight: 500; } .registratie .sticky-block > * { border-right: 1px solid rgba(var(--color-border), 0.5); height: 100%; display: flex; align-items: center; justify-content: center; } .registratie .sticky-block .medewerker, .registratie .sticky-block .checkbox, .registratie .sticky-block > i { width: 36px; padding: 0 6px; } .registratie .sticky-block .checkbox i { margin: 0; } .registratie .sticky-block .titel { flex-grow: 1; min-width: 200px; height: 100%; border: 1px solid transparent !important; border-right: 1px solid rgba(var(--color-border), 0.5) !important; box-shadow: none !important; padding: 0 6px; border-radius: 0; } .registratie .sticky-block .titel:focus { padding-left: 6px; border-color: rgb(var(--color-prim)) !important; } .registratie .sticky-block .opdracht { display: flex; align-items: center; justify-content: center; width: 120px; min-width: 120px; } .registratie .sticky-block .acties { display: flex; align-items: center; justify-content: center; min-width: 60px; padding: 0 6px; gap: 0; } .dot { width: 6px; height: 6px; border-radius: 50px; background-color: rgb(var(--color-border)); } .registratie .naar_factuur { background-color: rgba(var(--color-indigo), 0.05); pointer-events: none; } .registratie .naar_factuur input::-moz-placeholder { color: transparent !important; } .registratie .naar_factuur input::placeholder { color: transparent !important; } .registratie .naar_factuur ~ .uren-totaal { background-image: linear-gradient( rgba(var(--color-indigo), 0.05), rgba(var(--color-indigo), 0.05) ), linear-gradient(var(--header-theme), var(--header-theme)); pointer-events: none; } .registratie .ondertekend { background-color: rgba(var(--color-teal), 0.05); pointer-events: none; } .registratie .ondertekend input::-moz-placeholder { color: transparent !important; } .registratie .ondertekend input::placeholder { color: transparent !important; } .registratie .ondertekend ~ .uren-totaal { background-image: linear-gradient( rgba(var(--color-teal), 0.05), rgba(var(--color-teal), 0.05) ), linear-gradient(var(--header-theme), var(--header-theme)); pointer-events: none; } .registratie input { height: 100%; border: 1px solid transparent !important; box-shadow: none !important; padding: 0; border-radius: 0; } .registratie .uur { width: 48px; height: 35px; line-height: 35px; border: 1px solid transparent !important; border-right: 1px solid rgba(var(--color-border), 0.5) !important; text-align: center; background-color: transparent; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: text; } .registratie .uur.header_dag { background-color: var(--header-theme); font-size: 10px; position: relative; overflow: hidden; line-height: inherit;} .registratie .uur.header_dag p.dag { text-transform: uppercase; opacity: 0.5; font-size: 8px; font-weight: 500; } .registratie .uur.color-info { color: rgba(var(--color-info)) !important; } .registratie .uur.color-border { color: rgba(var(--color-border)) !important; } .registratie .suggestie { background-image: linear-gradient( var(--header-theme), rgba(var(--color-orange), 0.2) ); color: rgb(var(--color-orange)) !important; } .registratie .suggestie input { color: rgb(var(--color-orange)) !important; } .registratie .uur.header_dag .accorderen { position: absolute; background: rgb(var(--color-black)); width: 100%; height: 100%; top: 100%; left: 0; transition: 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3); display: flex; align-items: center; justify-content: center; color: var(--bg-theme); font-size: 18px; cursor: pointer; } .accorderen_recht .registratie .uur.header_dag .accorderen { background: rgb(var(--color-green)); } .registratie .uur.header_dag:hover .accorderen { top: 0; } .bg-overloop { background-image: linear-gradient( var(--header-theme), rgb(var(--color), 0.1) ); } .registratie .geaccordeerd { background-image: linear-gradient( var(--header-theme), rgba(var(--color-green), 0.2) ); color: rgb(var(--color-green)) !important; } .registratie.verrekend .week { background: rgba(var(--color-green), 0.1) !important; pointer-events: none; } .registratie.verrekend .uur_container { background: rgba(var(--color-green), 0.05) !important; pointer-events: none; } .registratie .geaccordeerd input { color: rgb(var(--color-green)) !important; } .registratie .gefactureerd { background-image: linear-gradient( var(--header-theme), rgba(var(--color-indigo), 0.2) ); color: rgb(var(--color-indigo)) !important; } .registratie .gefactureerd input { color: rgb(var(--color-indigo)) !important; } .registratie .uur:focus { border-color: rgb(var(--color-prim)) !important; text-align: center; } .registratie .uur::-moz-placeholder { color: rgba(var(--color-border)); } .registratie .uur::placeholder { color: rgba(var(--color-border)); } .registratie .d5, .registratie .d6 { background: rgba(var(--color-sec), 0.03) !important; } .werkweek .registratie .d5, .werkweek .registratie .d6 { display: none !important; } .registratie .uren-totaal { position: sticky; right: 0; text-align: center; background: var(--bg-theme); border-left: 1px solid rgba(var(--color-border)) !important; z-index: 1; line-height: inherit;} .registratie .huidige_dag_footer { border-left: 2px solid rgba(var(--color-prim), 0.5) !important; border-right: 2px solid rgba(var(--color-prim), 0.5) !important; border-bottom: 2px solid rgba(var(--color-prim), 0.5) !important; } .registratie .header_verwijderen { opacity: 0; } .registratie:hover .header_verwijderen { opacity: 1; } .uren_per_maand .registratie .uur.prev { display: none !important; } /* .registratie .uur.prev { background-color: rgba(var(--color-border), .5) !important; pointer-events: none; display: none !important; } */ .huidige_dag_uren { width: 48px; height: calc(100vh - 211px); position: absolute; top: 36px; border-bottom: solid rgb(var(--color)); border: solid rgb(var(--color)); border-width: 1px 1px 3px; border-radius: 6px; overflow: hidden; pointer-events: none; box-shadow: 0 0 9px rgb(var(--color-border)); } .huidige_dag_uren::after { position: absolute; content: "Vandaag"; width: 100%; text-align: center; background-color: rgb(var(--color)); padding: 2px; width: 100%; top: 0; left: 0; font-size: 7px; color: #fff; font-weight: 500; } .offcanvas-ho .huidige_dag_uren { height: calc(100vh - 372px); } .opdracht_tab_container .huidige_dag_uren { height: calc(100vh - 355px); } .week .huidige_dag_uren, .werkweek .huidige_dag_uren { height: calc(100vh - 199px); } .uur_container { position: relative; } .uur_container .accorderen { position: absolute; cursor: pointer; top: 0; right: 0; width: 18px; height: 12px; border-radius: 18px; background-color: rgb(var(--color-black)); font-size: 8px; display: flex; align-items: center; justify-content: center; transform: scale(0); transform-origin: center; transition: 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.7); opacity: 0; z-index: 5; } .accorderen_recht .uur_container .accorderen { background-color: rgb(var(--color-green)); } .uur_container:hover .accorderen { transform: scale(1); opacity: 1; } .uur_container .accorderen:hover::after { bottom: 18px; position: absolute; left: 50%; padding: 3px 6px; background-color: rgb(var(--color-black)); color: #fff; content: "Accorderen"; border-radius: 6px; transform: translate(-50%); font-size: 10px; } .uur_container:has(input:not(:focus)):hover::after { position: absolute; content: ""; width: calc(100% - 1px); height: 100%; border: 1px dashed rgb(var(--color)); border-radius: 6px; top: 0; left: 0; pointer-events: none; } .rollencontainer { width: 100%; height: calc(100vh - 240px); } .filterstitle { font-size: 12px; color: rgb(var(--color-text-lighter)); font-weight: 600; text-transform: uppercase; margin-bottom: 6px; } .week-header { background-color: var(--bg-theme); z-index: 3; display: flex; min-height: 60px; height: 60px; width: 100%; border-bottom: 1px solid rgb(var(--color-border)); align-items: center; padding: 0 12px; justify-content: space-between; } .no-option { pointer-events: none; } .no-option .tabel_cell { pointer-events: none; background-color: var(--header-theme); color: rgb(var(--color-border)); } .no-option:not(.tabel_row) { opacity: 0.4; pointer-events: none; background: rgba(var(--color-border), 0.25); } .no-option i { background-image: linear-gradient( rgba(var(--color-border), 0.25), rgba(var(--color-border), 0.25) ), linear-gradient(var(--bg-theme), var(--bg-theme)); } .datepicker-group { display: flex; align-items: center; } .datepicker-group label { position: relative; } .datepicker-group input { opacity: 0%; cursor: pointer; pointer-events: none; position: absolute; } .datepicker-group p { height: 28px; font-size: 14px; cursor: pointer; padding: 0 12px; transition: 0.2s ease; line-height: 1; } .datepicker-group input:hover ~ p { background-color: rgba(var(--color-prim), 0.1); border-radius: 18px; color: rgb(var(--color-prim)); } .totalen { display: flex; height: 24px; align-items: center; } .dagen { padding: 0 1px; border-right: 1px solid #fff; display: flex; align-items: center; width: 60%; height: 100%; background-color: rgba(var(--color-border), 0.5); gap: 1px; margin-left: -2px; } .dagen > div { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; } .dagen button { opacity: 0; pointer-events: none; } .day { width: 90px; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 500; } .day.hide { display: none; } .blank { width: 38px; height: 38px; } .scroll-container { overflow-y: scroll; height: 100%; } .click:hover { background-color: rgba(var(--color-border), 0.1); } /* .click:hover p, .click:hover strong { color: rgb(var(--color-border)); } */ .titel-act { font-style: italic; color: rgb(var(--color-text-lighter)); } .detail-act { font-style: italic; color: rgb(var(--color-text-lighter)); } .error { color: rgb(var(--color-red)); font-size: 10px; position: absolute; top: 100%; left: 0; white-space: nowrap; } /* TOAST */ .toast-container { z-index: 999999 !important; } .toast { border-radius: 12px; margin: 6px 0 !important; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: stretch; min-height: 60px; border: 1px solid rgb(var(--color-border)); border-left: 3px solid rgb(var(--color-toast)); overflow: hidden; } .toast-body { padding: 0; display: flex; align-items: center; } .toast-body i { padding: 12px 0 12px 12px; font-size: 30px; color: rgb(var(--color-toast)); width: auto !important; } .toast-body i.rotate-180 { padding: 12px 12px 12px 0; } .toast-body div { padding: 9px 12px; display: flex; flex-direction: column; justify-content: center; } .toast-body h5, .toast-body h6 { font-size: 13px; font-weight: 500; color: rgb(var(--color-text)); } .toast-body p { font-size: 12px; font-weight: 500; color: rgb(var(--color-text-lighter)); } .toast-header { padding: 0; box-sizing: border-box; border: none !important; background-color: transparent; } .toast .btn-close { width: 60px; height: 100%; display: flex; justify-content: center; align-items: center; border-left: 1px solid rgb(var(--color-border)); box-sizing: border-box; margin: 0; background: transparent; opacity: 1; transition: 0.1s ease; border-radius: 0 12px 12px 0; } .toast .btn-close:hover { background-color: rgba(var(--color-toast), 0.1); } .toast .btn-close:hover::after { color: rgb(var(--color-toast)); } .toast .btn-close::after { content: "\f00d"; font-family: "Font Awesome 5 Pro"; font-size: 18px; font-weight: 100; color: rgb(var(--color-text-light)); transition: 0.1s ease; } .toast .action { height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 12px; border-left: 1px solid rgba(var(--color-border), 0.5); transition: 0.1s ease; gap: 6px; background-color: transparent; } .toast .action:hover { background-color: rgba(var(--color-toast), 0.1); color: rgb(var(--color-toast)); cursor: pointer; } .toast .action:hover p { color: rgb(var(--color-toast)); } .toast .action i { font-size: 18px; } .toast .action p { font-size: 10px; color: rgb(var(--color-text-light)); max-width: 60px; text-align: center; line-height: 1.2; } .toast:has(.solid) { background: linear-gradient( rgba(var(--color-toast), 0.1), rgba(var(--color-toast), 0.1) ), linear-gradient(#fff, #fff); } .toast:has(.sec) { --color-toast: var(--color-sec); } .toast:has(.red) { --color-toast: var(--color-red); } .toast:has(.orange) { --color-toast: var(--color-orange); } .toast:has(.green) { --color-toast: var(--color-green); } .toast:has(.text) { --color-toast: var(--color-text); } .toast:has(.black) { --color-toast: var(--color-black); } .toast:has(.white) { --color-toast: 255, 255, 255; } .toast:has(.prim) { --color-toast: var(--color-prim); } .toast:has(.pink) { --color-toast: var(--color-pink); } .toast:has(.purple) { --color-toast: var(--color-purple); } .toast:has(.deep_purple) { --color-toast: var(--color-deep_purple); } .toast:has(.indigo) { --color-toast: var(--color-indigo); } .toast:has(.blue) { --color-toast: var(--color-blue); } .toast:has(.light_blue) { --color-toast: var(--color-light_blue); } .toast:has(.cyan) { --color-toast: var(--color-cyan); } .toast:has(.teal) { --color-toast: var(--color-teal); } .toast:has(.light_green) { --color-toast: var(--color-light_green); } .toast:has(.lime) { --color-toast: var(--color-lime); } .toast:has(.yellow) { --color-toast: var(--color-yellow); } .toast:has(.amber) { --color-toast: var(--color-amber); } .toast:has(.deep_orange) { --color-toast: var(--color-deep_orange); } .toast:has(.brown) { --color-toast: var(--color-brown); } .toast:has(.grey) { --color-toast: var(--color-grey); } .toast:has(.blue_grey) { --color-toast: var(--color-blue_grey); } .prim-border { border-left: 3px solid rgb(var(--color)) !important; } .red-border { border-left: 3px solid rgb(var(--color-red)) !important; } .orange-border { border-left: 3px solid rgb(var(--color-orange)) !important; } /* SWITCH */ .switch { position: relative; display: flex; height: 36px; align-items: center; justify-content: space-between; cursor: pointer; } .switch.disabled { opacity: 0.5; pointer-events: none; } .switch input { opacity: 0; position: absolute; cursor: pointer; } .switch .track { display: flex; align-items: center; width: 36px; height: 14px; border-radius: 18px; background-color: rgba(var(--color-info), 0.5); position: relative; } .switch input:checked ~ .track { background-color: rgba(var(--color), 0.5); } .switch input:checked ~ .track .handle::after { background-color: rgb(var(--color)); } .switch .handle { position: absolute; left: 0; transform: translate(0); width: 20px; height: 20px; box-shadow: 0 0 9px rgba(var(--color-info), 0.4); border-radius: 50px; transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1); background-color: #fff; } .switch .handle::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50px; background-color: rgba(var(--color), 0); transition: 0.2s ease; } .switch:hover .handle::before { background-color: rgba(var(--color), 0.1); } .switch .handle::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50px; background-color: #fff; } .switch input:checked ~ .track .handle { transform: translate(16px); } /* DASHBOARD */ .dashboard-activiteiten { width: 100%; } .dashboard-agenda { display: none; } /* Medewerkers */ .bankgegevens { margin-top: 56px; } .input-row { display: flex; justify-content: space-between; align-items: center; } .disabled-input { background-color: rgba(var(--color-info), 0.2); pointer-events: none; border: 0; } /* Verlof */ .dates-section { display: flex; width: 100%; gap: 48px; margin-top: 60px; } /* TABLE DIV STYLE */ .table .tr { display: table-row !important; width: 100%; } .table .tr:hover { background-color: rgba(var(--color-border), 0.1); } .table .th { vertical-align: middle; border: none; height: 30px; display: table-cell !important; background-color: var(--header-theme); font-size: 10px; font-weight: 600; color: rgb(var(--color-text-lighter)); padding-left: 15px; border-top: 1px solid rgba(var(--color-border), 0.5); border-bottom: 1px solid rgba(var(--color-border), 0.5); } .table .td { display: table-cell !important; height: 36px; vertical-align: middle; border-bottom: 1px solid rgba(var(--color-border), 0.5); font-size: 12px; padding-left: 15px; } .tc { display: table-caption; caption-side: bottom; } .table .thead { display: table-header-group !important; } .table .tbody { display: table-row-group !important; } .table > :not(:first-child) { border-top: none; } /* UI DATEPICKER */ .datepicker p.display-normal { position: absolute; width: 100%; height: 100%; padding: 12px; top: 10px; left: 0; z-index: 1; } .ui-datepicker { display: none; background-color: var(--bg-theme); box-shadow: none; border-radius: 12px; overflow: hidden; padding: 3px 6px 6px; z-index: 50000 !important; position: relative; border: 1px solid rgb(var(--color-border)); box-shadow: 3px 3px 18px rgb(var(--color-border)); } .ui-datepicker table { border-collapse: collapse; border-spacing: 0; padding-left: 32px; } .ui-datepicker .ui-datepicker-calendar thead th { width: 30px; height: 30px; text-align: center; text-transform: uppercase; color: rgb(var(--color)) !important; font-weight: 600; font-size: 10px !important; background-color: var(--bg-theme); border-color: transparent; } .ui-datepicker .ui-datepicker-calendar thead th.ui-datepicker-week-col { color: transparent !important; } .ui-datepicker .ui-datepicker-calendar tbody td.ui-datepicker-week-col { color: var(--color-theme); border-right: 1px solid rgb(var(--color-border)); background-color: var(--header-theme); font-size: 10px; font-weight: 400; } .ui-datepicker .ui-datepicker-calendar tbody td { width: 30px; height: 30px; text-align: center; padding: 0; } .ui-datepicker .ui-datepicker-calendar tbody td a { display: flex; border-radius: 18px; width: 30px; height: 30px; color: var(--color-theme); font-size: 10px; text-decoration: none; justify-content: center; align-items: center; font-weight: 500; border-width: 1px; } .ui-datepicker .ui-datepicker-calendar tbody td.ui-datepicker-today a { outline: 1px solid rgb(var(--color)); } .ui-datepicker .ui-datepicker-calendar tbody td.ui-datepicker-other-month a { color: var(--color-theme); opacity: 0.25; } .ui-datepicker .ui-datepicker-calendar tbody td a:hover { background-color: var(--header-theme); color: var(--color-theme); } .ui-datepicker .ui-datepicker-calendar tbody td a.ui-state-active { background-color: rgb(var(--color)); color: #fff !important; } .ui-datepicker .ui-datepicker-calendar tbody td.ui-state-highlight a { background-color: rgb(var(--color)); color: var(--bg-color) !important; } .ui-datepicker .ui-datepicker-header a.ui-corner-all { cursor: pointer; position: absolute; top: 0; width: 30px; height: 30px; margin: 6px 3px; border-radius: 18px; } .ui-datepicker .ui-datepicker-header a.ui-corner-all:hover { background-color: var(--header-theme); } .ui-datepicker .ui-datepicker-header a.ui-datepicker-prev { left: 0; } .ui-datepicker .ui-datepicker-header a.ui-datepicker-prev:before { content: "\f104"; font-family: "Font Awesome 5 Pro"; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); color: var(--color-theme); } .ui-datepicker .ui-datepicker-header a.ui-datepicker-next:before { content: "\f105"; font-family: "Font Awesome 5 Pro"; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); color: var(--color-theme); } .ui-datepicker .ui-datepicker-header a.ui-datepicker-next { right: 0; } .ui-datepicker .ui-datepicker-header a > span { display: none; } .ui-datepicker .ui-datepicker-title { text-align: center; line-height: 1.4; display: flex; align-items: center; justify-content: center; height: 36px; gap: 6px; } .ui-datepicker .ui-datepicker-title select { border: 1px solid rgb(var(--color-border)); font-family: Poppins; font-weight: 400; -webkit-appearance: none; width: 75px; outline: none; transition: 0.2s ease; color: var(--color-theme); height: 24px; border-radius: 18px; text-align: center; cursor: pointer; } .ui-datepicker .ui-datepicker-title select:focus { border: 1px solid rgba(var(--color)); } .ui-datepicker .ui-datepicker-week-col { color: var(--color-theme); font-weight: 500; font-size: 12px; } /* .ui-datepicker.weekpicker { background-color: #ffddee; } */ .ui-datepicker.weekpicker tbody tr:has(.ui-state-hover) > td:not(.ui-datepicker-week-col) a { color: rgb(var(--color)); border-radius: 0; border-bottom: 1px solid rgba(var(--color), 0.5); border-top: 1px solid rgba(var(--color), 0.5); background-color: transparent; } .ui-datepicker.weekpicker tbody tr:has(.ui-state-hover) > td:not(.ui-datepicker-week-col):nth-child(2) a { border-radius: 18px 0 0 18px; background: rgba(var(--color), 0.5); color: #ffffff !important; } .ui-datepicker.weekpicker tbody tr:has(.ui-state-hover) > td:not(.ui-datepicker-week-col):nth-child(8) a { border-radius: 0 18px 18px 0; background: rgba(var(--color), 0.5); color: #ffffff !important; } .ui-datepicker.weekpicker tbody tr:has(.ui-state-active) > td:not(.ui-datepicker-week-col) a { background-color: rgba(var(--color), 0.1); color: rgb(var(--color)); border-radius: 0; } .ui-datepicker.weekpicker tbody tr:has(.ui-state-active) > td:not(.ui-datepicker-week-col):nth-child(2) a { border-radius: 18px 0 0 18px; background: rgb(var(--color)); color: #ffffff !important; } .ui-datepicker.weekpicker tbody tr:has(.ui-state-active) > td:not(.ui-datepicker-week-col):nth-child(8) a { border-radius: 0 18px 18px 0; background: rgb(var(--color)); color: #ffffff !important; } /* .daterangepicker { border-radius: 6px !important; box-shadow: 0 2px 6px rgba(var(--color-text), .125) !important; font-family: Poppins !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); box-shadow: 0 0 0 50vw #2F2B3D80 !important; } .daterangepicker::before { display: none !important; } .daterangepicker::after { display: none !important; } */ .icon-btn .collapseContainer { position: absolute; top: 100%; } /* MELDINGEN */ .melding { padding: 3px 6px; border-bottom: 1px solid rgba(var(--color-border), 0.5); } .melding .melding-inner { padding: 6px; display: flex; gap: 12px; border-radius: 18px; max-width: 480px; } .melding .melding-inner:hover { background-color: rgba(var(--color-prim), 0.1); } .melding .melding-inner:hover p { color: rgb(var(--color-prim)); } .melding .melding-inner:hover .icon-btn > .date { display: none; } .melding .melding-inner:hover .icon-btn > i { display: block !important; } .melding .melding-inner .icon-btn:hover > i { color: rgb(var(--color)) !important; } .melding .melding-inner > i { height: 33px; min-width: 33px; border-radius: 50px; background-color: rgba(var(--color)); color: #fff; font-size: 15px; display: flex; justify-content: center; align-items: center; } .melding .melding-inner p { height: auto; display: inline; word-break: break-all; } .melding .melding-inner .dot { width: 6px; height: 6px; border-radius: 50px; background-color: rgb(var(--color-blue)); margin-top: 12px; } /* RESIZABLE REGEL */ .resizable_regel .ui-resizable-se, .resizable_regel .ui-resizable-s { display: none !important; } .resizable_regel .ui-resizable-e { width: 36px; right: 0; position: absolute; right: 0; height: 100%; cursor: ew-resize; top: 0; } .resizable_regel { transition: 0.3s ease; } .resizable_regel .icon { max-width: 0; min-width: 0 !important; overflow: hidden; border-width: 0; transition: 0.5s ease; justify-content: start; } .resizable_regel label:active ~ .icon { border-color: rgb(var(--color-prim)); } .resizable_regel:hover .icon { max-width: 24px; min-width: 24px !important; display: flex; justify-content: center; overflow: hidden; border-width: 1px; } .resizable_regel:last-child:first-child .icon { background-color: rgba(var(--color-border), 0.2); pointer-events: none !important; } .resizable_regel:last-child:first-child .icon .delete_note { pointer-events: none !important; } .resizable_regel:last-child .icon .resizer { background-color: rgba(var(--color-border), 0.2); } .resizable_regel:last-child .ui-resizable-e { display: none !important; } .resizable_regel .delete_note:hover { background-color: rgba(var(--color-red), 0.1); cursor: pointer; } .resizable_regel .delete_note:hover i { color: rgb(var(--color-red)); } .resizable_regel .bold:checked ~ textarea { font-weight: 600; } .resizable_regel .italic:checked ~ textarea { font-style: italic; } .resizable_regel .underline:checked ~ textarea { text-decoration: underline; } .resizable_regel textarea.left { text-align: left; } .resizable_regel textarea.center { text-align: center; } .resizable_regel textarea.right { text-align: right; } p.bold { font-weight: 600; } p.italic { font-style: italic; } p.underline { text-decoration: underline; } .hide_bedragen ._bedrag { opacity: 0 !important; pointer-events: none !important; } .hide_bedragen .hide_cond { display: none; } .resizable_regel .note-editor .note-editing-area .note-editable { padding: 8px 12px !important; } .g-6 { --calc: calc((100% - 54px) / 10); gap: 6px !important; } .g-6 > .w-10 { width: var(--calc) !important; min-width: var(--calc) !important; max-width: var(--calc) !important; } .g-6 > .w-20 { width: calc((var(--calc) * 2) + 6px) !important; min-width: calc((var(--calc) * 2) + 6px) !important; max-width: calc((var(--calc) * 2) + 6px) !important; } .g-6 > .w-30 { width: calc((var(--calc) * 3) + 12px) !important; min-width: calc((var(--calc) * 3) + 12px) !important; max-width: calc((var(--calc) * 3) + 12px) !important; } .g-6 > .w-40 { width: calc((var(--calc) * 4) + 18px) !important; min-width: calc((var(--calc) * 4) + 18px) !important; max-width: calc((var(--calc) * 4) + 18px) !important; } .g-6 > .w-50 { width: calc((var(--calc) * 5) + 24px) !important; min-width: calc((var(--calc) * 5) + 24px) !important; max-width: calc((var(--calc) * 5) + 24px) !important; } .g-6 > .w-60 { width: calc((var(--calc) * 6) + 30px) !important; min-width: calc((var(--calc) * 6) + 30px) !important; max-width: calc((var(--calc) * 6) + 30px) !important; } .g-6 > .w-70 { width: calc((var(--calc) * 7) + 36px) !important; min-width: calc((var(--calc) * 7) + 36px) !important; max-width: calc((var(--calc) * 7) + 36px) !important; } .g-6 > .w-80 { width: calc((var(--calc) * 8) + 42px) !important; min-width: calc((var(--calc) * 8) + 42px) !important; max-width: calc((var(--calc) * 8) + 42px) !important; } .g-6 > .w-90 { width: calc((var(--calc) * 9) + 48px) !important; min-width: calc((var(--calc) * 9) + 48px) !important; max-width: calc((var(--calc) * 9) + 48px) !important; } /* MEDIUM EDITOR */ .medium-editor-element { height: 36px; width: 100%; border: 1px solid rgb(var(--color-border)); border-radius: 18px; display: flex; align-items: center; padding: 6px 12px; transition: 0.2s ease; outline: none !important; background-color: #fff; cursor: auto; } .medium-editor-element::before, .medium-editor-element::after { display: none !important; } .medium-editor-element[data-medium-focused="true"] { border: 1px solid rgb(var(--color-prim)) !important; } .medium-editor-element p { line-height: 1.6; } /* ABEL.CSS */ /* Z-index */ .z-details { z-index: 1045 !important; } .z-inputs { z-index: 1050 !important; } .text-align-start {text-align: start !important;} /* DIT MOET NOG EVEN ANDERS */ .text-left { width: 30%; } .text-middle { width: 0%; } .text-right { max-width: 70%; } /* SHOWCASE */ .showcase { padding: 24px; display: flex; flex-wrap: wrap; gap: 24px; } .showcase .box { padding: 24px; } .showcase .box.w-50 { width: calc(50% - 12px) !important; } .showcase .dropdown .box { padding: 0; } .color-container { border: 0px; border-radius: 18px; align-content: center; font-size: 20px; padding: 0 5px; } .h-33px { height: 33px !important; } .initials-small.prim { background-color: rgba(var(--color-prim), 0.1); color: rgb(var(--color-prim)); border-radius: 50px; } .tabs.no-padding { padding: 0 !important; } .tabs.fit-content { width: -moz-fit-content !important; width: fit-content !important; } .mr-48 { margin-right: 48px; } .left-100 { transform: translate(-101%); } .right-100 { transform: translate(101%); } /* TAB PAGE */ .tab-page { display: flex; gap: 24px; flex-wrap: wrap; width: 100%; transition: 0.2s 0.4s ease; position: absolute; top: 0; padding: 24px 0; } .tab-page-opdrachten { display: flex; flex-direction: column; width: 100%; transition: 0.2s 0.4s ease; position: absolute; top: 0; margin-top: 24px; } .tab-page.hide { pointer-events: none; opacity: 0; transition-delay: 0s; height: 0px; overflow: hidden; } .tab-page h1 { margin-bottom: 20px; } .tab-page .tab-inner { display: flex; flex-direction: row; margin-top: 10px; justify-content: space-between; } .tab-page .tab-container { display: flex; flex-direction: row; gap: 24px; } .tab-page .tab-container-column { display: flex; flex-direction: column; } .tab-page .tab-container-section { display: flex; flex-direction: row; padding-bottom: 20px; justify-content: space-between; gap: 20px; } .tab-page .input-row { display: flex; justify-content: space-between; align-items: center; } .tab-page .input-group { display: flex; flex-direction: column; gap: 12px; } .tab-page .tag-container { display: flex; flex-direction: row; gap: 10px; padding-top: 15px; } .tab-page.factuurpdf { display: flex; flex-direction: row !important; justify-content: space-between; } .border-bottom { border-bottom: 1px solid rgba(var(--color-border)); } .border-top { border-top: 1px solid rgba(var(--color-border)); } .no-border { border: 0px; } /* SMALL REPEATER TABLE .small-table-header { height: 36px; justify-content: space-between; } .acties { align-items: center; height: 24px; column-gap: 12px; } .small-repeater-table { width: 100%; border-radius: 6px; box-shadow: 2px 2px 8px rgba(var(--color-text), .125); overflow: hidden; } .small-repeater-table . */ .pl80 { padding-left: 160px !important; } /* .tab-container { position: fixed; left: 284px; top: 150px; right: 24px; display: flex; transition: .2s ease; } */ .pr-24 { padding-right: 24px !important; } .relative { position: relative; } i.loader { --fa-primary-color: rgb(var(--color)); --fa-secondary-color: rgb(var(--color)); padding-left: 21px; font-family: "Poppins"; font-size: 11px; font-weight: 400; height: 30px; line-height: 30px; } i.loader::after { font-family: "Font Awesome 5 Pro"; animation: rotate 1s linear infinite; position: absolute; left: 0; top: 0; font-size: 14px; } i.loader::before { font-family: "Font Awesome 5 Pro"; animation: rotate 1s linear infinite; position: absolute; left: 0; top: 0; font-size: 14px; } /* IMAGE UPLOADER */ /* background-color: var(--colorPrimaryPale, #c8dadf); */ .upload_dropZone { display: flex; flex-direction: column; justify-content: space-between; color: #0f3c4b; outline: 2px dashed var(--colorPrimaryHalf, #22b9fc); outline-offset: -12px; transition: outline-offset 0.2s ease-out, outline-color 0.3s ease-in-out, background-color 0.2s ease-out; } .upload_dropZone.highlight { outline-offset: -4px; outline-color: var(--colorPrimaryNormal, #22b9fc); background-color: var(--colorPrimaryEighth, #ffffff); } .upload_svg { fill: var(--colorPrimaryNormal, #0576bd); } .btn-upload { color: #fff; background-color: var(--colorPrimaryNormal); } .btn-upload:hover, .btn-upload:focus { color: #fff; background-color: var(--colorPrimaryGlare); } .upload_img { width: calc(33.333% - (2rem / 3)); -o-object-fit: contain; object-fit: contain; } img { position: relative; } img[alt]:before { display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: var(--bg-theme); content: ""; } img[alt]:after { display: block; position: absolute; top: 50%; left: 50%; height: 33%; border-radius: 50%; z-index: 2; transform: translate(-50%, -50%); aspect-ratio: 1/1; background: radial-gradient( circle, transparent 0% 25%, rgba(var(--color-border), .35) 25% 50%, rgba(var(--color-border), .7) 50% 100% ); content: ""; } /* MARK.CSS */ /* CSS Document */ .offcanvas-backdrop { display: none !important; } .sidebarmodal { position: fixed; right: 0; top: 0; width: 100vw; height: 100vh; z-index: 1053; transition: 0.1s ease; pointer-events: none; } .sidebarmodal.show { background-color: #2f2b3d80; pointer-events: all; } i { position: relative; width: 1.25em; text-align: center; } i > i { position: absolute; top: 50%; left: 50%; font-size: 60% !important; border-radius: 18px; background: inherit; padding: 3px; } i > i.fa-slash { position: absolute; top: 50%; left: 50%; font-size: inherit !important; transform: translate(-50%, -50%); padding: 0 !important; } button:focus { outline: none !important; box-shadow: none !important; } .border-radius { border-radius: 18px; } .border-radius-3px { border-radius: 18px; } .border-radius-50 { border-radius: 50%; } .border-radius-3px { border-radius: 3px;} .border-radius-12 { border-radius: 12px;} .hover-white:hover { background-color: #ffffff80 !important; } .hover { transition: 0.1s ease; } .hover:hover { background-color: rgba(var(--color), 0.1) !important; color: rgb(var(--color)); } .hover:hover i, .hover:hover input { color: rgb(var(--color)) !important; } .hover:hover .checkbox i { color: var(--bg-theme) !important; } .hover:hover .hide-on-hover { display: none !important; } .hover .show-on-hover { display: none !important; } .hover:hover .show-on-hover { display: flex !important; } .hover-element .show-on-hover { opacity: 0; pointer-events: none; transition: .2s ease } .hover-element:hover .show-on-hover { opacity: 1; pointer-events: all; } /*FONT STYLING*/ .fw-100 { font-weight: 100; } .fw-200 { font-weight: 200; } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400 !important; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700 !important; } .fw-800 { font-weight: 800; } .fw-900 { font-weight: 900; } .fs-6 { font-size: 6px !important; } .fs-7 { font-size: 7px !important; } .fs-8 { font-size: 8px !important; } .fs-9 { font-size: 9px !important; } .fs-10 { font-size: 10px !important; } .fs-11 { font-size: 11px !important; } .fs-12 { font-size: 12px !important; } .fs-14 { font-size: 14px !important; } .fs-15 { font-size: 15px !important; } .fs-16 { font-size: 16px !important; } .fs-17 { font-size: 17px !important; } .fs-18 { font-size: 18px !important; } .fs-19 { font-size: 19px !important; } .fs-20 { font-size: 20px !important; } .fs-21 { font-size: 21px !important; } .fs-24 { font-size: 24px !important; } .fs-36 { font-size: 36px !important; } .fs-48 { font-size: 48px !important; } .fs-50 { font-size: 50px !important; } .ta-left { text-align: start !important; } .p-12 { padding: 12px !important; } .p-9-24 { padding: 9px 24px !important; } .p-9-12 { padding: 9px 12px !important; } .p-9-0 { padding: 9px 0 !important; } .p-10-0 { padding: 10px 0 !important; } .p-15-24 { padding: 15px 24px !important; } .p-18-24 { padding: 18px 24px !important; } .p-12-24 { padding: 12px 24px !important; } .bt-1 { border-top: 1px solid rgba(var(--color-border), 0.5) !important; } .bb-1 { border-bottom: 1px solid rgba(var(--color-border), 0.5) !important; } .bbd-1 { border-bottom: 1px dashed rgb(var(--color-border)) !important; } .bbs-1 { border-bottom: 1px solid rgb(var(--color-border)) !important; } .bbl-1 { border-bottom: 1px solid rgba(var(--color-border), 0.1) !important; } .bl-1 { border-left: 1px solid rgba(var(--color-border), 0.5) !important; } .bls-1 { border-left: 1px solid rgb(var(--color-border)) !important; } .br-1 { border-right: 1px solid rgba(var(--color-border), 0.5) !important; } .brs-1 { border-right: 1px solid rgb(var(--color-border)) !important; } .h-0 { height: 0 !important; } .min-w-300px { min-width: 300px !important; } input.small { min-height: 30px; font-size: 12px; padding: 0 0 0 12px; } input.small + .icon { min-width: 30px; } input.small + .icon p { font-size: 10px; padding: 0 6px; } input.no-border { border: 1px solid transparent; background-color: transparent; } input.no-border:hover { border: 1px solid rgba(var(--color-border)); } input.no-border:focus { padding-left: 12px; box-shadow: none; border-color: rgb(var(--color-prim)); } input.no-focus-border { border: none; box-shadow: none; } input.no-focus-border:focus { border: none; box-shadow: none; } input.no-focus-border:hover { border: none; box-shadow: none; } textarea.no-border { border: 1px solid transparent; background-color: transparent; } textarea.no-border:hover { border: 1px solid rgba(var(--color-border)); } textarea.no-border:focus { padding-left: 12px; box-shadow: none; border-color: rgb(var(--color-prim)); } textarea.no-border ~ .icon { border: none; border-radius: 0; border-left: 1px solid rgb(var(--color-border)); } textarea.no-border ~ .icon.start { border: none; border-radius: 0; border-right: 1px solid rgb(var(--color-border)); border-left: none !important; } textarea.no-focus-border { border: none; box-shadow: none; } textarea.no-focus-border:focus { border: none; box-shadow: none; } textarea.no-focus-border:hover { border: none; box-shadow: none; } .sticky { position: sticky; top: 0; } .border { border: 1px solid rgba(var(--color-border), 0.5) !important; border-radius: 12px; } .border-solid { border: 1px solid rgba(var(--color-border)) !important; border-radius: 6px; } .colored-border { border: 1px solid rgb(var(--color)) !important; } .colored-outline { outline: 1px solid rgb(var(--color)) !important; } /* TABLE DIV */ .thead { display: table-header-group; } .tbody { display: table-row-group; position: relative; } .tr { display: table-row; } .th, .td { display: table-cell; } /* ACTIVITEITEN */ .activiteiten { flex-direction: row; } .activiteiten table tbody tr { height: 0; } .activiteiten table tbody tr .activiteit-arrow { opacity: 0; } .activiteiten table tbody tr .activiteit-arrow.show { opacity: 1; } .activiteiten table tbody tr:hover .activiteit-arrow { opacity: 1; } .activiteiten table tbody tr .handle { cursor: grab; } .ui-sortable-helper .handle { cursor: grabbing !important; } .activiteiten table tbody tr.subactiviteiten > td { border-bottom-width: 1px !important; } input.invisible { position: absolute; width: 0; height: 0; top: 0; left: 0; padding: 0; border: none; margin: 0; visibility: visible !important; opacity: 0; cursor: pointer; pointer-events: none; } .status-container { position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%); z-index: 100; width: -moz-max-content; width: max-content; } .status-container:not(.hide) { background-color: var(--bg-theme); border-radius: 18px; box-shadow: 0 3px 18px rgba(var(--color-border)); } .activiteiten .box-menu { flex-direction: column; width: 260px; height: 100%; border-right: 1px solid rgba(var(--color-border), 0.5); } .activiteiten .box-menu .menu-container { width: 100%; padding: 24px; border-bottom: 1px solid rgba(var(--color-border), 0.5); } .activiteiten .activiteiten-container { width: 100%; flex-direction: column; position: relative; border-left: 260px solid transparent; margin-left: -260px; container-type: inline-size; z-index: 5; height: 100%; flex-grow: 1; } .activiteiten .activiteiten-container .thead { position: relative; z-index: 10; } .activiteiten .activiteiten-container .th { background-color: var(--bg-theme); } .activiteiten .activiteiten-container .activiteit { background-color: var(--bg-theme); height: 48px; } .activiteiten .activiteiten-container .activiteit > td { border-bottom: 1px solid rgba(var(--color-border), 0.5); transition: 0.5s ease; } .activiteiten .sub-table { border-radius: 18px; border-left: 3px solid rgb(var(--color-prim)); border-right: 3px solid rgb(var(--color-prim)); margin: 12px 12px 24px 36px; position: relative; } .activiteiten .sub-table::after { content: ""; position: absolute; left: -24px; top: -12px; border-left: 1px solid rgb(var(--color-prim)); height: calc(100% - 24px); } .activiteiten .subactiviteiten .sub-line { position: relative; z-index: 1; } .activiteiten .subactiviteiten .sub-line::after { content: ""; position: absolute; left: -24px; bottom: 24px; border-left: 1px solid rgb(var(--color-prim)); border-bottom: 1px solid rgb(var(--color-prim)); border-bottom-left-radius: 12px; height: 24px; width: 24px; } .activiteiten .subactiviteiten .handle .d-flex { display: none !important; } .ui-sortable-placeholder.place { position: relative; border: 1px dashed rgb(var(--color-prim)); border-radius: 18px; } table .thead.hidden { height: 0; opacity: 0; pointer-events: none; } .activiteiten .subactiviteiten .subactiviteiten .collapseContainer { grid-template-rows: 0; overflow: hidden; } .activiteiten .subactiviteiten .sub-hidden { opacity: 0; } .activiteiten .activiteiten-container .tbody .handle .icon-btn { opacity: 0.25; } .activiteiten .activiteiten-container .tbody .handle .icon-btn:hover { opacity: 1; } .activiteiten .acties { width: 115px; } .activiteiten .subactiviteiten .acties { width: 100px; } .activiteiten .subactiviteiten .subactiviteiten { display: none; } .taak_map_container { width: 100%; border-radius: 18px; transition: 0.2s ease; cursor: pointer; background-color: var(--bg-theme); } .taak_map { display: flex; width: 100%; padding: 5px 6px; align-items: center; gap: 6px; border-radius: 18px; background-color: var(--bg-theme); border: 1px solid transparent; transition: 0.2s ease; } .taak_map .map_icon { font-size: 15px; } .taak_map .map_icon i { font-size: 9px !important; } .taak_map_container:hover .taak_map { background: rgba(var(--color), 0.05); } .taak_map_container.active .taak_map { background: rgba(from var(--bg-theme) r g b / 0.9); border-left: 1px solid rgba(var(--color), 0.5); border: 1px solid rgba(var(--color), 0.5); border-left-color: rgb(var(--color)); } .taak_map_container:hover p, .taak_map_container:hover i, .taak_map_container.active p, .taak_map_container.active i { color: rgb(var(--color)); } .taak_map_container.active { background: rgb(var(--color)); padding-left: 2px; } .taak_map_container.hovered .taak_map { border: 1px dashed rgb(var(--color)) !important; } .activiteiten:has(.ui-sortable-helper) .taak_map_container { cursor: grabbing !important; } .activiteit_omschrijving * { font-size: 12px; } .tab.activiteiten .activiteiten-container { height: -moz-fit-content; height: fit-content; min-height: calc(100vh - 331px); overflow-y: hidden !important; } .tab.activiteiten .activiteiten-container2 { height: -moz-fit-content; height: fit-content; min-height: calc(100vh - 331px); overflow-y: hidden !important; } .transition-0 { transition: 0s !important; } .transition-2 { transition: 0.2s !important; } .y-scroll { overflow-y: scroll !important; } .xy-scroll { overflow: scroll !important; } .po-none { pointer-events: none !important; } .po-all { pointer-events: all !important; } .left-0 { left: 0; right: auto; } /* DATEPICKER PICKER */ body .drp-calendar { padding: 3px 6px 6px !important; } body .daterangepicker { font-family: Poppins; background-color: var(--bg-theme); color: var(--color-theme); border: 1px solid rgb(var(--color-border)); border-radius: 12px; } body .daterangepicker .drp-buttons { gap: 12px; padding: 6px 9px !important; align-items: center; justify-content: end; } body .daterangepicker.show-calendar .drp-buttons { display: flex !important; } body .daterangepicker.auto-apply .drp-buttons { display: none !important; } body .daterangepicker .drp-buttons button { margin: 0 !important; } body .daterangepicker .drp-selected { font-size: 10px; } body .daterangepicker .calendar-table span { display: none !important; } body .daterangepicker .calendar-table .prev, body .daterangepicker .calendar-table .next { position: relative; color: rgb(var(--color-text)) !important; } body .daterangepicker .calendar-table .prev::after, body .daterangepicker .calendar-table .next::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: "Font Awesome 5 Pro"; font-size: 9px !important; } body .daterangepicker .calendar-table .prev::after { content: "\f053"; } body .daterangepicker .calendar-table .next::after { content: "\f054"; } body.ltr .drp-calendar.left .calendar-table { padding: 0; } body .calendar-table th { color: rgb(var(--color)) !important; text-transform: uppercase; font-weight: 600; font-size: 10px !important; min-height: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 18px !important; } body .calendar-table th.month { min-height: 36px !important; height: 36px !important; } body .calendar-table td { color: var(--color-theme); width: 30px !important; height: 30px !important; border-radius: 18px !important; font-weight: 500; margin: 1px; border-width: 1px !important; font-size: 10px !important; line-height: 30px !important; } .daterangepicker .calendar-table { background-color: var(--bg-theme) !important; border: none !important; } body .calendar-table td.week { pointer-events: none; color: var(--color-theme); opacity: 0.5; } body .calendar-table td.off { color: var(--color-theme); opacity: 0.25; background-color: transparent; } body .calendar-table td.off.in-range { color: rgba(var(--color), 0.25); background-color: rgba(var(--color), 0.05); } body .calendar-table td.today { outline: 1px solid rgba(var(--color)) !important; } body .calendar-table td:hover { background-color: rgba(var(--color), 0.1); color: rgb(var(--color)); } body td.active, body td.active:hover { background-color: rgb(var(--color)); color: #fff !important; font-weight: 500; } body td.in-range, body td.in-range:hover { border-radius: 0 !important; background-color: rgba(var(--color), 0.2) !important; color: rgb(var(--color)) !important; } body td.active.start-date, body td.active.start-date:hover { border-radius: 18px 0 0 18px !important; background-color: rgb(var(--color)) !important; color: white !important; } body td.active.end-date, body td.active.end-date:hover { border-radius: 0 18px 18px 0 !important; background-color: rgb(var(--color)) !important; color: white !important; } body td.active.end-date.start-date, body td.active.end-date.start-date:hover { border-radius: 18px !important; background-color: rgb(var(--color)) !important; color: white !important; } body td.active.start-date.off, body td.active.start-date.off:hover { border-radius: 18px 0 0 18px !important; background-color: rgba(var(--color), 0.5) !important; color: white !important; } body td.active.end-date.off, body td.active.end-date.off:hover { border-radius: 0 18px 18px 0 !important; background-color: rgba(var(--color), 0.5) !important; color: white !important; } body td.active.end-date.off.start-date, body td.active.end-date.start-date.off:hover { border-radius: 18px !important; background-color: rgba(var(--color), 0.5) !important; color: white !important; } body select.monthselect, body select.yearselect { border: 1px solid rgba(var(--color-border), 1); border-radius: 18px; width: 75px !important; height: 24px !important; margin: 3px; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ""; text-align: center; cursor: pointer !important; outline: none !important; transition: 0.2s ease; line-height: 21px; } body select.monthselect:focus, body select.yearselect:focus { border: 1px solid rgba(var(--color), 1); } body select.monthselect option, body select.yearselect option { text-align: center; } input::-webkit-search-cancel-button { position: relative; right: 10px; -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50px; cursor: pointer; } .slash { position: absolute; width: 1px; height: 20px; left: 60%; top: 50%; background-color: rgb(var(--color-text-light)); transform: translate(-50%, -50%) rotate(45deg); outline: 1px solid var(--bg-theme) } .note-editor-container .note-editor { width: 100%; border: 1px solid rgb(var(--color-border)) !important; border-radius: 6px; overflow: hidden; transition: 0.2s ease; display: flex; align-items: center; background-color: var(--bg-theme); } .note-editor-container .note-editor.note-airframe .note-editing-area .note-editable { border: none !important; min-width: 100%; } .note-editable { min-width: 100%; border-radius: 18px; cursor: text; } .note-editor .note-editing-area { width: 100%; display: flex; align-items: center; } body .note-editor.note-drame .note-editing-area .note-editable { width: 100%; overflow: hidden !important; padding: 12px; background: var(--bg-theme); line-height: 1.4; } .note-editor-container .note-editor p { width: 100%; height: auto; } .notitieregel .note-editor-container .note-editor.note-airframe { height: 36px; line-height: 1.1; } .note-editor.note-airframe .note-editing-area .note-editable { border: 1px solid rgb(var(--color-border)) !important; border-radius: 6px; transition: 0.2s ease; background-color: var(--bg-theme); color: var(--color-theme); cursor: auto; } .note-editor-container .note-editor:has(.note-editable:focus) { border-color: rgb(var(--color-prim)) !important; } .note-editor-container.disabled .note-editor { border: none !important; pointer-events: none; } .note-editor-container.disabled.enabled .note-editor { border: 1px solid rgb(var(--color-border)) !important; pointer-events: all; } .note-air-popover { background-color: #333 !important; color: #fff; border: none !important; } .note-air-popover .note-btn { background-color: #333; color: #fff; border: none; border-radius: 18px; transition: 0.2s ease; padding: 5px 10px !important; } .note-air-popover .note-btn:hover { background-color: rgba(var(--color-prim), 0.1); color: rgb(var(--color-prim)); border: none; } /* TIJDLIJN */ .tijdlijn .note-editor .note-editing-area .note-editable, .tijdlijn textarea { overflow: auto !important; padding: 9px 12px 9px 42px !important; width: 100%; border: none !important; field-sizing: content; } .tijdlijn textarea:hover, .tijdlijn textarea:focus{box-shadow: none;} .note-editor .note-editing-area .note-editable:focus-within, .tijdlijn textarea:focus-within { border-color: rgb(var(--color)) !important; } .tijdlijn .note-placeholder { top: 9px; padding-left: 42px !important; } .tijdlijn .chat { display: flex; align-items: start; gap: 6px; padding: 6px 12px; } .tijdlijn .chat .box { display: flex; align-items: end; justify-content: end; gap: 0 12px; padding: 6px 12px; width: -moz-fit-content; width: fit-content; flex-direction: column; max-width: calc(100% - 36px); border-radius: 3px 12px 12px 12px; } .tijdlijn .chat .box .fs-8 { color: rgb(var(--color-info)); font-size: 6px; opacity: 0.8; } .tijdlijn .chat.cu:not(.event) { flex-direction: row-reverse; } .tijdlijn .chat.cu:not(.event) .flex-grow { justify-content: end; } .tijdlijn .chat:not(.event) .box { background-color: rgb(var(--color)); } .tijdlijn .chat.cu:not(.event) .box { border-radius: 12px 3px 12px 12px; } .tijdlijn .chat:not(.event) .box p { color: #fff !important; white-space:pre-line; } .tijdlijn .chat.event .initials { background-color: rgb(var(--color)) !important; color: #fff !important; } .tijdlijn .chat.event .initials:has(i) { font-size: 10px; padding-top: 0; } .tijdlijn .chat.event .flex-grow { justify-content: center; width: 100%; } .tijdlijn .chat.event .box { border: 1px solid rgb(var(--color-border)); box-shadow: 0 3px 6px rgba(46, 43, 61, 0.14), 0 0 transparent, 0 0 transparent !important; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; max-width: 100%; } .tijdlijn .chat .note-editor .note-editing-area .note-editable { padding: 9px 12px !important; } .tijdlijn .chat .note-editor .note-editing-area .note-editable p { font-size: 10px; color: rgb(var(--color-theme)) !important; } .tijdlijn .chat_input { width: 100%; border: 1px solid transparent; border-bottom: 1px solid rgba(var(--color-border), 0.5); display: flex; } .tijdlijn .chat_input:focus-within { border-color: rgb(var(--color)); } .tijdlijn .chat_input label { flex-grow: 1; border-right: 1px solid rgba(var(--color-border), 0.5); } .tijdlijn .chat_input .note-editor.note-airframe .note-editing-area .note-editable { width: 100%; border: none !important; } .tijdlijn .chat_input button { width: 36px; min-width: 36px; height: 100%; display: flex; justify-content: center; align-items: center; border: none; background-color: transparent; transition: 0.2s ease; } .tijdlijn .chat_input button:hover { cursor: pointer; background-color: rgba(var(--color), 0.2); color: rgb(var(--color)); } .tijdlijn .chat .buttons { opacity: 0; pointer-events: none; transition: 0.2s ease; } .tijdlijn .chat .buttons .icon-btn { background-color: #fff !important; max-width: 18px; min-width: 18px; padding: 0 !important; align-items: center; justify-content: center; border-radius: 18px !important; } .tijdlijn .chat .buttons .icon-btn:hover { background-color: rgb(var(--color)) !important; } .tijdlijn .chat .buttons .icon-btn:hover i { color: #fff !important; } .tijdlijn .chat.cu:not(.event):hover .buttons { opacity: 1; pointer-events: all; } .tijdlijn .chat .color-color.d-inline-flex { flex-wrap: wrap; } .tijdlijn .chat .color-color.d-inline-flex * { color: rgb(var(--color)) !important; font-size: 10px !important; background-color: transparent !important; } /* RADIO SELECT */ .radio-select { border: 1px solid rgb(var(--color)); border-radius: 18px; height: 36px; overflow: hidden; } .radio-select label { padding: 6px 12px; height: 100%; border-right: 1px solid rgb(var(--color)); cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; transition: 0.2s ease; cursor: pointer; } .radio-select label.disabled { pointer-events: none; background-color: rgba(var(--color-border), 0.2); } .radio-select label.disabled i { color: rgb(var(--color-border)) !important; } .radio-select label:first-child { padding-left: 15px; } .radio-select label:last-child { border: none !important; padding-right: 15px; } .radio-select.flex-row-reverse label:last-child { border-right: 1px solid rgb(var(--color)) !important; } .radio-select.flex-row-reverse label:first-child { border: none !important; } .radio-select label p { color: rgb(var(--color)); font-size: 10px; font-weight: 500; height: auto; text-align: center; } .radio-select label i { color: rgb(var(--color)); text-align: center; font-size: 14px; } .radio-select input { visibility: hidden; position: absolute; } .radio-select label:hover { background-color: rgba(var(--color), 0.1); } .radio-select label:has(input:checked), .radio-select .active { background-color: rgba(var(--color), 0.2); } .radio-select.small { height: 30px; } .radio-select.small label { padding: 6px 9px; } .radio-select.small label:first-child { padding-left: 12px; } .radio-select.small label:last-child { border: none !important; padding-right: 12px; } .radio-select.smaller { height: 24px; } .radio-select.smaller label { padding: 3px 6px; } .radio-select.smaller label:first-child { padding-left: 9px; } .radio-select.smaller label:last-child { border: none !important; padding-right: 9px; } .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .absolute-tc { position: absolute; bottom: calc(100% - 24px); left: 50%; transform: translate(-50%); top: auto !important; } /* AGENDA */ p.agendauur { position: absolute; left: 50%; top: -1px; font-size: 10px; font-weight: 500; padding: 3px 6px; background-color: var(--bg-theme); border-radius: 18px; transform: translate(-50%, -50%); } .afspraak-scroll-container { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .afspraak-container { display: grid; grid-template-rows: repeat(120, 12px); position: absolute; left: 0; top: 0; padding: 1px 3px; gap: 3px; width: 100%; height: 100%; grid-auto-columns: 1fr; pointer-events: none; } .afspraak, .afspraak_heledag { background-color: rgba(var(--color), 0.75); border-radius: 9px; padding: 0 3px; position: relative; pointer-events: auto; /*overflow: hidden;*/ transition: height 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.7), top 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.7), width 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.7), opacity 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.7), left 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.7), margin-right 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.7), min-width 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.7), padding 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.7), background-color 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.5); width: 100%; height: 100%; left: 0; top: 0; } .afspraak::after, .afspraak_heledag::after { content: ""; height: 100%; width: 100%; border-bottom: solid rgb(var(--color)); border: solid rgb(var(--color)); border-width: 1px 1px 3px; border-radius: 9px; position: absolute; pointer-events: none; top: 0; left: 0; } .afspraak:hover, .afspraak_heledag:hover { left: -3px; width: calc(100% + 6px); padding: 0 6px; background-color: rgb(var(--color)); } .afspraak.ui-resizable-resizing { left: -3px; width: calc(100% + 6px); padding: 0 6px; } .afspraak.ui-draggable-dragging { transform: scale(1) !important; opacity: 0; } .afspraak.wap-agenda, .afspraak_heledag.wap-agenda { background-color: rgb(var(--color)); } /* body:has(.lasso) .afspraak { pointer-events: none; } */ .afspraak > p, .afspraak .titel p, .afspraak_heledag p { padding-left: 3px; color: #fff; word-break: break-word; } .afspraak > p.bedrijfsnaam, .afspraak_heledag p.bedrijfsnaam{height: 13px; overflow: hidden; } .afspraak.external > p, .afspraak_heledag.external p, .afspraak.external .titel p, .afspraak.external input { color:rgba(var(--color)) !important; } .afspraak.external{background-color: rgba(var(--color), .15);opacity: .8;} .afspraak.external .icons i, .afspraak_heledag.external .icons i { color:rgba(var(--color)); } .afspraak .icons { display: flex; position: absolute; right: 3px; bottom: 3px; } .afspraak .icons i { color: #fff; font-size: 12px; } .afspraak.active { background-color: rgb(var(--color)); z-index: 200; outline: 3px solid rgba(var(--color), 0.5); } .afspraak.active.external{background-color: rgba(var(--color), .15);} .afspraak .ui-resizable-handle.ui-resizable-s { width: 100%; height: 4px; position: absolute; bottom: 0; left: 0; cursor: ns-resize; } .afspraak .ui-resizable-handle.ui-resizable-n { width: 100%; height: 4px; position: absolute; top: 0; left: 0; cursor: ns-resize; } .afspraak .grab-area { position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; } .afspraak.draggable .grab-area { cursor: grab; } .afspraak.ui-draggable-dragging .handle { cursor: grabbing; } .reistijd { position: absolute; bottom: calc(100% - 9px); left: 0; width: 100%; background-color: rgb(var(--color), .2); border-radius: 9px 9px 0 0; border: 1px dashed rgb(var(--color)); border-bottom: none; z-index: -1;color: rgb(var(--color)); font-size: 10px; padding: 0 3px; } .reistijd::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; background-color: var(--bg-theme); border-radius: 9px 9px 0 0; height: 9px; } .afspraak.active .reistijd::after { display: none; } .bg-highlight { background-color: var(--header-theme); } .timetracker { position: absolute; left: 0; width: 100%; height: 1px; z-index: 1; background-color: rgb(var(--color)); pointer-events: none; display: none; scroll-margin: 120px; } .timetracker.active { display: block; } .timetracker::after { content: ""; position: absolute; top: 0; left: 0; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 18px; background-color: rgb(var(--color)); } .timetracker .time { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 3px 6px; line-height: 9px; border-radius: 18px; background-color: rgb(var(--color)); color: #fff; font-size: 9px; font-weight: 500; white-space: nowrap; } .timetracker.horizontal { left: auto; width: 1px; height: 100%; } .timetracker.horizontal::after { top: auto; bottom: 0; transform: translate(-50%); width: 6px; height: 6px; } .timetracker.horizontal .time { right: 0; top: 0; transform: translate(50%); padding: 2px 5px; line-height: 7px; font-size: 8px; } .agenda-container .agenda_lasso, #rooster_weergave .agenda_lasso, #opdracht_weergave .agenda_lasso { position: absolute; border: 1px dashed rgb(var(--color)); background-color: rgba(var(--color), 0.1); border-radius: 9px; transition: 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.5); pointer-events: none; opacity: 0; display: flex; align-items: center; justify-content: center; color: rgb(var(--color)); } .agenda-container:has(.dag.ui-droppable-hover) .agenda_lasso, #rooster_weergave:has(.rooster_dag.ui-droppable-hover) .agenda_lasso, #opdracht_weergave:has(.opdracht_dag.ui-droppable-hover) .agenda_lasso { opacity: 1; } .opdracht_dag.box { box-shadow: 0 3px 15px rgba(46, 43, 61, 0.3)!important; } .expanded_view .opdracht_dag, .expanded_view .rooster_dag { height: auto !important; } .expanded_view .rooster-container { min-height: 36px !important; } .agenda-taak-container { position: relative; width: 100%; min-width: 300px; height: 100%; } .agenda-taak-container .ui-resizable-handle { position: absolute; left: 0; top: 0; height: 100%; width: 3px; background-color: lime; border-right: 1px solid rgb(var(--color-border)); } .afspraak .details, .afspraak_heledag .details { position: absolute; left: calc(100% + 1px); top: -1px; transform: scale(0); transition: 0.2s ease; z-index: 200; transform-origin: top left; } .agenda-detail-item { padding: 0 12px; display: flex; align-items: center; gap: 6px; width: 100%; border-bottom: 1px solid rgba(var(--color-border), 0.5); min-height: 36px; height: -moz-fit-content; height: fit-content; } .agenda-detail-item i { font-size: 15px; } .agenda-detail-item.pointer:hover { background-color: rgba(var(--color), 0.1); cursor: pointer; } .agenda-detail-item .note-editor .note-editing-area .note-editable { border: none !important; padding: 3px 6px !important; margin: 6px 0; min-width: 100%; background-color: transparent !important; } .note-placeholder { color: rgb(var(--color-border)) !important; padding: 0 12px !important; top: 12px; font-weight: 300; cursor: text !important; } .agenda-detail-item .note-placeholder { padding: 0 6px !important; font-size: 10px; } /* .afspraak .details::after, .afspraak_heledag .details::after { content: ""; position: absolute; left: 3px; top: 9px; transform: translate(-50%, 50%) rotate(45deg); width: 12px; height: 12px; background-color: #fff; } */ .left-details .afspraak .details, .left-details .afspraak_heledag .details { right: calc(100% + 1px); left: auto; transform-origin: top right; } /* .left-details .afspraak .details::after, .left-details .afspraak_heledag .details::after { left: auto; right: 3px; transform: translate(50%, 50%) rotate(45deg); } */ /* .afspraak .details input, .afspraak_heledag .details input { min-height: 24px; visibility: visible; } */ .afspraak.active .details { transform: scale(1); } .no-wrap { white-space: nowrap; } #afspraak_details { max-width: 500px; } .lasso { border: 1px dashed rgb(var(--color-lasso)); background-color: rgba(var(--color-lasso), 0.1); border-radius: 9px; position: absolute; left: 3px; width: calc(100% - 6px); display: none; transition: 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.5); } .opdracht_lasso.red .fa-hand-point-down { display: none; } .opdracht_lasso.red .fa-ban { display: inline-block !important; } .afspraak .border-1px { border: 1px solid rgb(var(--color-border)); display: flex; justify-content: center; align-items: center; } .afspraak .border-1px i { color: rgb(var(--color-text)) !important; font-size: 10px; } .afspraak .medium-editor-placeholder:after { color: rgba(var(--color-border)); font-size: 10px; font-weight: 500; top: 50%; transform: translateY(-50%); padding: 0 6px; font-style: normal; } .afspraak .medium-editor-element { width: 100%; min-height: 100% !important; border-radius: 18px; border: 1px solid transparent; padding: 3px 6px; transition: 0.2s ease; } .afspraak .medium-editor-element, .afspraak .medium-editor-element p { font-size: 10px; color: rgb(var(--color-text)); font-weight: 500; } .medium-editor-element b, .medium-editor-element u, .medium-editor-element i { font-size: 10px; color: rgb(var(--color-text)); } .afspraak .medium-editor-element:hover { border-color: rgb(var(--color-border)); box-shadow: 3px 1px 6px 0px rgba(var(--color-text), 0.125); } .afspraak .medium-editor-element:focus { border-color: rgb(var(--color-prim)); outline: none; } .agenda_checkbox_outer { border-radius: 18px; padding: 3px 6px; display: flex; align-items: center; justify-content: space-between; transition: 0.2s ease; border: 1px solid transparent; } .agenda_checkbox_outer:hover { background-color: rgba(var(--color-prim), 0.05); } .agenda_checkbox_outer.current { background-color: rgba(var(--color), 0.2); color: rgb(var(--color)) !important; border: 1px solid rgb(var(--color)); } .agenda_checkbox_outer.current p, .agenda_checkbox_outer.current .checkbox, .agenda_checkbox_outer.current .agenda_checkbox i { color: rgb(var(--color)) !important; } .agenda_checkbox_outer:hover .agenda_checkbox, .agenda_checkbox_outer.current .agenda_checkbox { opacity: 1; } .agenda_checkbox { display: flex; align-items: center; opacity: 0; transition: 350ms opacity linear; cursor: pointer; } .agenda_checkbox i { font-size: 18px; } .afspraak.heledag { width: 100%; border-bottom-width: 1px; cursor: default; min-height: 24px; } .afspraak.heledag:hover { width: calc(100% + 6px); margin-right: -6px; } .agenda-inactive { display: flex; position: absolute; width: 100%; height: 100%; justify-content: center; align-items: center; z-index: 1000; background-color: rgba(var(--color-text), 0.5); color: #fff; } .agenda-inactive i.fa-exclamation-triangle { font-size: 50px; } .drag-activiteit { cursor: grab; } .drag-activiteit.ui-draggable-dragging { border: 1px solid rgba(var(--color-border), 0.5) !important; border-radius: 18px; z-index: 10000; background-color: #fff; opacity: 0.8; height: 54px; overflow: hidden; width: 540px; min-width: 540px; max-width: 540px; } .drag-activiteit.ui-draggable-dragging .activiteit, .drag-activiteit.ui-draggable-dragging .activiteit > *, .drag-activiteit.ui-draggable-dragging .activiteit input { height: 54px; min-height: 54px; max-height: 54px; } .drag-activiteit.ui-draggable-dragging p { color: rgb(var(--color-text)); } .tab-content:has(.ui-draggable-dragging) { overflow: visible; } .tab-content:has(.ui-draggable-dragging) .tab { display: none; } .tab-content .tab:has(.ui-draggable-dragging) { overflow: visible; display: block; } .noti { animation: noti 1.5s ease-in-out infinite; transform-origin: top center; } @keyframes noti { 12.5% { transform: rotate(-6deg); } 25% { transform: rotate(6deg); } 37.5% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 75% { transform: none; } } .bg-header { background-color: var(--header-theme) !important; } .bg-base { background-color: rgb(var(--color-border), .5) !important; } /* .bg-header p{ color: rgb(from var(--color-theme) r g b / 0.75); } */ /* PROGRESS */ .progress { height: 9px; background-color: var(--header-theme); border-radius: 30px; width: 100%; position: relative; border: 1px solid rgba(var(--color), 0.5); } .progress > div { height: 100%; background-color: rgb(var(--color)); border-radius: 24px; transition: 0.5s cubic-bezier(0.2, 0.8, 0.5, 1.7); position: absolute; left: 0; max-width: 100%; } .progress > div::after { content: ""; position: absolute; width: calc(100% - 24px); height: 2px; left: 12px; top: 2px; background-color: #fff4; border-radius: 18px; } .progress.small { height: 6px; } .progress.small > div::after { width: calc(100% - 12px); left: 6px; top: 1px; } .progress.smaller { height: 4px; } .progress.smaller > div::after { display: none; } @keyframes progress-in { 0% { width: 0px; } 50% { width: 0px; } } /* TICKET */ .ticket_container { display: flex; flex-direction: column; gap: 6px; padding: 9px 12px; min-height: 62px; height: 100%; overflow-x: hidden !important; } .ticket_container:has(:focus-within) { z-index: 999; } .ticket { width: 100%; border-radius: 12px; background: rgba( var(--color), 0.75 ); /*border: 1px solid rgb(var(--color)); border-bottom: 3px solid rgb(var(--color));*/ display: flex; flex-direction: column; cursor: grab; position: relative; box-shadow: 0 2px 6px rgba(var(--color-theme), 0.125); transition: background 0.5s cubic-bezier(0.2, 0.5, 0.5, 1.5), opacity 0.5s cubic-bezier(0.2, 0.5, 0.5, 1.5); } .ticket:hover { background: rgb(var(--color)); } .ticket .agenda-detail-item, .ticket .bb-1 { border-bottom: 1px solid #fff8 !important; } /* .ticket:not(.ui-draggable) { opacity: .5; } */ .ticket.highlight::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(var(--color) 1); border-radius: 18px; font-family: "Font Awesome 5 Pro"; content: "\f055"; display: flex; justify-content: center; align-items: center; font-size: 36px; color: #fff; font-weight: 100; } .ticket.active { outline: 3px solid rgba(var(--color-prim), 0.5); background-image: linear-gradient( rgba(var(--color), 0.1), rgba(var(--color), 0.1) ), linear-gradient(var(--bg-theme), var(--bg-theme)); } .ticket.ui-draggable-dragging, .drag_user.ui-draggable-dragging { pointer-events: none; z-index: 2000; transform: rotate(3deg); } .kanban_fase.ui-sortable-helper { pointer-events: none; z-index: 2000; transform: rotate(3deg); border: none; } .ticket p { color: var(--color-theme); font-size: 10px; font-weight: 500; } .ticket i { color: var(--color-theme); font-size: 12px; } .ticket .border { border-color: rgba(var(--color), 0.5) !important; } .remove-ticket { position: absolute; right: -6px; top: -3px; width: 18px; height: 18px; background-color: #fff; border-radius: 18px; border: 1px solid rgb(var(--color-border)); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: 0.2s ease; } .ticket .remove-ticket { opacity: 0; } .ticket:hover .remove-ticket { opacity: 1; right: -9px; top: -6px; } .remove-ticket:hover { background-color: rgb(var(--color-red)); cursor: pointer; } .remove-ticket:hover i { color: #fff !important; } .drop_ticket.highlight { outline: 1px dashed rgba(var(--color)); } .ui-sortable-placeholder { width: 100%; border: 1px dashed rgb(var(--color)); border-radius: 18px; background-color: rgba(var(--color), 0.1); visibility: visible; } .cursor-grab { cursor: grab; } .drag_user > .dot { position: absolute; left: 3px; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background-color: rgba(var(--color-red)); } /* TAB PAGE */ .tab-page > .w-25 { width: calc(50% - 9px) !important; } .tab-page > .w-50 { width: calc(50% - 12px) !important; } tr.bg-white > td { background-color: #fff; } .rotate-infinite { animation: rotate 1s linear infinite; } @keyframes rotate { to { transform: rotate(360deg); } } .empty_message { display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center; padding: 12px; width: 100%; height: 100%; } .empty_message i { color: rgb(var(--color)); background-color: rgba(var(--color), 0.1); font-size: 24px; width: 48px; height: 48px; border-radius: 48px; display: flex; align-items: center; justify-content: center; } .empty_message i.rotating::before { animation: rotate 1s linear infinite; } .empty_message p { font-size: 10px; text-align: center; color: rgb(var(--color-info)); } .empty_message i.fa-spinner { animation: rotate 1s linear infinite; font-size: 18px; color: rgb(var(--color)); background-color: transparent; width: auto; height: auto; } .colorpick-eyedropper-input-trigger { display: none !important; } .drop_ticket { min-width: 400px; } .border-prim { border: 1px solid rgb(var(--color-prim)); } .border-prim h4 { color: rgb(var(--color-prim)); } /* .border-prim p { color: rgb(var(--color-prim)) } */ .opac-0 { opacity: 0; } .activiteiten-container2 { display: flex; flex-direction: column; width: -moz-max-content; width: max-content; min-width: 100%; height: 100%; background-color: #fafafa; } .activiteiten-header { position: sticky; top: 0; z-index: 10; width: -moz-fit-content; width: fit-content; min-width: 100%; display: flex; border-bottom: 1px solid rgba(var(--color-border), 0.5); border-left: 3px solid transparent; height: 36px; } .activiteiten-header.activiteit:hover { background-color: #ffffff !important; } .activiteiten-header .handle { cursor: pointer !important; } .activiteiten-header > div { display: flex; align-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase; color: rgb(var(--color-text-lighter)); justify-content: center; border-right: 1px solid rgba(var(--color-border), 0.5); } .activiteiten-header > div:not(.w-90px):hover { background-color: rgba(var(--color), 0.1); color: rgb(var(--color)); } .elastic-transition { transition: transform 0.5s cubic-bezier(0.2, 1.5, 0.5, 3.25); transform-origin: left; } .ui-sortable-helper { transform: scale(1.05); border: 1px solid rgb(var(--color-border)); } .activiteit { display: flex; align-items: center; width: 100%; min-height: 36px; max-height: 36px; border-bottom: 1px solid rgba(var(--color-border), 0.5); font-size: 11px; border-left: 3px solid transparent; background-color: var(--bg-theme); } .activiteit:hover { background-color: var(--header-theme) !important; } .activiteit.selected { background-color: rgba(var(--color), 0.1) !important; } .activiteit > * { display: flex; height: 100%; border-right: 1px solid rgba(var(--color-border), 0.5); position: relative; height: 35px; } .activiteit input { border: 1px solid transparent; border-radius: 0; height: 35px; min-height: 35px; max-height: 35px; width: 100%; background-color: transparent; } .activiteit input:hover { box-shadow: none; border: 1px solid transparent; } .activiteit input:focus { border: 1px solid rgb(var(--color)); box-shadow: none; } .activiteit .checkbox-container { width: 90px; min-width: 90px; display: flex; align-items: center; justify-content: center; padding-right: 3px; } /* .activiteit .checkbox-container .checkbox { margin: 0 6px !important; } */ .activiteit .checkbox-container .checkbox i { margin: 0 6px !important; } .activiteit .checkbox-container .handle i { font-size: 10px; } .activiteit .titel { flex-grow: 1; min-width: 210px; } /* .activiteit .titel .icon { pointer-events: all; border: 1px solid transparent; border-left: 1px solid rgb(var(--color-border), .5); border-radius: 0 !important; height: 35px; } */ .activiteit .titel input { padding-right: 12px; } .activiteit.vast > * { display: none !important; } .activiteit.vast > .titel { display: flex !important; } .active > .activiteit { border-left: 1px solid rgb(var(--color)) !important; border: 1px solid rgb(var(--color)) !important; border-left-width: 3px !important; background-color: rgba(var(--color), 0.1); } .activiteit .wanneer { width: 180px; min-width: 180px; display: flex; align-items: center; justify-content: center; } .activiteit .wanneer_icoon { width: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; } .activiteit .deadline { width: 120px; min-width: 120px; display: flex; align-items: center; justify-content: center; } .activiteit .wanneer:hover, .activiteit .wanneer_icoon:hover, .activiteit .deadline:hover { cursor: pointer; color: rgb(var(--color)); } .activiteit .wanneer.empty:hover::before, .activiteit .deadline:empty:hover::before, .activiteit .wanneer_icoon.empty:hover::before { content: "Kies datum"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; color: rgb(var(--color)); z-index: 2; } .activiteit .wanneer_icoon.empty:hover::before { content: "+"; font-size: 15px; } .activiteit .geschat, .activiteit .besteed { width: 100px; min-width: 100px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .activiteit .geschat input { text-align: center; padding: 6px !important; } .activiteit .geschat.empty:hover:before, .activiteit .besteed.empty:hover::before { content: "+"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; color: rgb(var(--color)); z-index: 10; pointer-events: none; font-size: 15px; } .activiteit .status { width: 120px; min-width: 120px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; background-color: rgba(var(--color), 0.1); color: rgb(var(--color)); cursor: pointer; } .activiteit .status:hover { background-color: rgba(var(--color), 0.2); } .activiteit .contact, .activiteit .opdracht { width: 120px; min-width: 120px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .activiteit .contact:empty:hover::before { content: "Kies contact"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; color: rgb(var(--color)); } .activiteit .opdracht:empty:hover::before { content: "Kies opdracht"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; color: rgb(var(--color)); } .activiteit .opdracht.no-contact:empty:hover::before { content: "Kies eerst een contact"; color: rgb(var(--color-orange)); width: 100%; padding: 0 12px; white-space: normal; text-align: center; } .activiteit .medewerkers { width: 90px; min-width: 90px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding-right: 12px; } .activiteit .tags { width: 120px; min-width: 120px; display: flex; align-items: center; cursor: pointer; padding: 0 12px; } .activiteit .acties { width: 120px; min-width: 120px; display: flex; align-items: center; justify-content: center; gap: 0 !important; } .activiteit.sub .acties { width: 111px; min-width: 111px; display: flex; align-items: center; justify-content: center; gap: 0 !important; } .strike { text-decoration: line-through; pointer-events: none; } .strike p, .strike i { opacity: 0.5; } .activiteit.done input { text-decoration: line-through; opacity: 0.5; pointer-events: none; } .activiteit.prio { border-left: 3px solid rgb(var(--color-prim)); } .activiteit.prio .checkbox i { border-color: rgb(var(--color-red)); } .activiteit.prio .checkbox i::before { content: "!"; color: rgb(var(--color-red)); display: flex; justify-content: center; align-items: center; font-weight: 600; padding-left: 1px; } .activiteit.prio .checkbox.checked i { background-color: rgb(var(--color-red)); } .activiteit.prio .checkbox.checked i::before { color: #fff; } .activiteit.archief { border-left: 3px solid rgb(var(--color-orange)); } .activiteit.verwijderd { border-left: 3px solid rgb(var(--color-red)); } .activiteit .handle, .activiteiten-header .handle { cursor: grab; } .activiteit .sub-btn { opacity: 0; transition: 0.2s ease; } .activiteit .sub-btn:hover, .activiteit .sub-btn.show { opacity: 1; } .subactiviteiten-container .activiteit .hide-on-sub { display: none !important; } .subactiviteiten-container .activiteit .fa-check { margin: 0 !important; } .subactiviteiten-container .sub-line { position: relative; z-index: 1; } .subactiviteiten-container .sub .sub-line { display: flex; align-items: center; justify-content: center; width: 54px; min-width: 54px; padding-right: 3px; } .subactiviteiten-container .sub-line::after { content: ""; position: absolute; left: -27px; bottom: 15px; border-left: 1px solid rgb(var(--color-prim)); border-bottom: 1px solid rgb(var(--color-prim)); border-bottom-left-radius: 12px; height: 24px; width: 24px; } .dashboard-activiteiten .handle { opacity: 0; pointer-events: none; } .hover-row:hover { background-color: rgba(var(--color-border), 0.075); } .subactiviteiten-container { border-radius: 0; border-left: 3px solid rgb(var(--color-prim)); border-right: 3px solid rgb(var(--color-prim)); margin: 6px 6px 12px 32px; position: relative; width: 100%; } .subactiviteiten-container::after { content: ""; position: absolute; left: -24px; top: -6px; border-left: 1px solid rgb(var(--color-prim)); height: calc(100% - 32px); } /* TRACKER */ .tracker { display: flex; height: 6px; border-radius: 18px; background-color: #eee; align-items: center; justify-content: space-between; gap: 60px; position: relative; } .tracker .point { width: 18px; height: 18px; border-radius: 18px; background-color: #eee; border: 0px solid rgb(var(--color)); transition: 0.2s ease-in; position: relative; z-index: 1; cursor: pointer; } .tracker .point.active { border: 9px solid rgb(var(--color)); } .tracker .point.current { border: 6px solid rgb(var(--color)); background-color: var(--bg-theme); outline: 6px solid rgb(var(--color), 0.2); } .tracker .track { position: absolute; left: 0; width: 0; height: 100%; border-radius: 18px; background-color: rgb(var(--color)); transition: 0.2s ease-in; } .bg-light { background-color: #fdfdfd !important; color: rgb(var(--color-text-lighter)) !important; } .bg-medium { background-color: rgba(var(--color-blue-grey), 0.05) !important; color: rgb(var(--color-text-lighter)) !important; } .item.active .bg-light { background-color: #fff4 !important; border-color: rgb(var(--color)) !important; } .x-scroll { overflow-x: scroll; } #submitFacturen .g-6 > .w-10 { min-width: max(var(--calc), 108px) !important; } #submitOffertes .g-6 > .w-10 { min-width: max(var(--calc), 108px) !important; } .skeleton-load input::-moz-placeholder { color: transparent !important; background-color: #fafafa !important; -moz-transition: none !important; transition: none !important; animation: blink-skeleton-load 2s ease infinite; outline: 2px solid white; } .skeleton-load p, .skeleton-load h6, .skeleton-load h5, .skeleton-load h4, .skeleton-load h3, .skeleton-load h2, .skeleton-load h1, .skeleton-load i, .skeleton-load button, .skeleton-load .initials, .skeleton-load input::placeholder { color: transparent !important; background-color: #fafafa !important; transition: none !important; animation: blink-skeleton-load 2s ease infinite; outline: 2px solid white; } .skeleton-load input { border: none !important; outline: 2px solid white !important; color: transparent !important; background-color: #fafafa !important; transition: none !important; animation: blink-skeleton-load 2s ease infinite; } .skeleton-load { } @keyframes blink-skeleton-load { 50% { opacity: 0.5; } } .border-color-red { border-color: rgb(var(--color-red)) !important; } .groupfocus { position: fixed; z-index: 9999; border: 1px solid rgb(var(--color-border)); background-color: var(--bg-theme); border-radius: 18px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.32); opacity: 0; pointer-events: none; transform-origin: top center; transition: opacity 0.2s ease; } .groupfocus.show { opacity: 1; pointer-events: all; } .groupfocus::after { position: absolute; content: ""; left: 50%; top: -7px; width: 15px; height: 15px; transform: translate(-50%) rotate(-45deg); border-top: 1px solid rgb(var(--color-border)); border-right: 1px solid rgb(var(--color-border)); background-color: var(--header-theme); z-index: 1; -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%); clip-path: polygon(100% 0, 0 0, 100% 100%); } .groupfocus.top::after { top: auto; bottom: -7px; transform: translate(-50%) rotate(135deg); } .groupfocus.right::after { top: 15px; bottom: auto; left: 0px; transform: translate(-50%) rotate(-135deg); } .groupfocus.left::after { top: 10px; bottom: auto; left: auto; right: 0px; transform: translate(50%) rotate(45deg); } .groupfocus.no-arrow::after { display: none; } .groupfocus.no-arrow.bottom { transform: translateY(-12px); } .groupfocus.no-arrow.top { transform: translateY(12px); } .groupfocus#textarea_focus { margin-top: -12px; } .groupfocus#textarea_focus::after { display: none; } .pill-badge { position: absolute; right: -3px; top: -3px; opacity: 0; cursor: pointer; } .pill:hover .pill-badge { opacity: 0.5; } .pill .pill-badge:hover { opacity: 1; } .plus_regel { width: calc(100% - 12px); background-color: rgb(var(--color)); height: 3px; border-top: 2px solid #fff; bottom: 0; opacity: 0; pointer-events: none; position: relative; z-index: 10; } .plus_regel i { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; left: 0; top: 50%; transform: translateY(-50%); background-color: rgb(var(--color)); border-radius: 18px; color: #fff; font-size: 10px; cursor: pointer; pointer-events: all; } .plus_regel:hover { opacity: 1; } /* MT940 */ #dropzone-mt940 .dropzone-message { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: #fff8; z-index: 9000; opacity: 0; transition: 0.1s 0.1s ease; pointer-events: none; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; } #dropzone-mt940.dz-drag-hover .dropzone-message { opacity: 1; } #dropzone-mt940 .dz-clickable:hover { cursor: pointer; background-color: rgba(var(--color), 0.1); transition: 0.2s ease; } .no-transactie-match { width: 50%; padding: 6px 12px; background-color: var(--header-theme); border-radius: 0 18px 18px 0; box-shadow: inset 0 0 6px #8888; display: flex; align-items: center; justify-content: center; transition: 0.2s ease; cursor: pointer; } .no-transactie-match:hover { background-color: rgba(var(--color-prim), 0.2); color: rgb(var(--color-prim)); } .no-transactie-match .show-hover { display: none; } .no-transactie-match:hover .hide-hover { display: none; } .no-transactie-match:hover .show-hover { display: flex; } .selected-match { background: rgba(var(--color-prim), 0.2) !important; } /* TILE-BTN */ .tile-btn { background-color: transparent; padding: 9px 12px; border: 1px solid rgb(var(--color)); display: flex; align-items: center; justify-content: start; gap: 6px; border-radius: 18px; color: rgb(var(--color)); transition: 0.2s ease; cursor: pointer; } .tile-btn:hover { background-color: rgba(var(--color), 0.1); } .tile-btn.disabled { --color: var(--color-border); pointer-events: none; opacity: 0.5; } .tile-btn i { font-size: 15px; } .zoekfunctie { width: 180px; transition: 0.2s ease; display: flex; align-items: center; } .zoekfunctie:has(> input:focus) { width: 900px; max-width: calc(100vw - 420px); } .zoekfunctie .overflow-auto { max-height: calc(100vh - 120px) !important; } .file-icon { color: rgb(var(--color)); } .file-icon.fa-file-image { color: rgb(var(--color-sec)); } .file-icon.fa-file-excel { color: rgb(var(--color-green)); } .file-icon.fa-file-powerpoint { color: rgb(var(--color-red)); } .file-icon.fa-file-pdf { color: rgb(var(--color-red)); } p:empty::before, td:empty::before, .td:empty::before, span:empty::before { content: attr(data-placeholder); color: rgb(var(--color-border)) !important; } .key-value > p:nth-child(2):empty::before { content: "--"; color: rgb(var(--color-border)) !important; } .key-value > p:nth-child(3):empty::before { content: "--"; color: rgb(var(--color-border)) !important; } .dmxDropzone:hover, .dmxDropzoneHover { background: rgba(var(--color-prim), 0.1) !important; } .end-mark { width: 100%; display: flex; align-items: center; justify-content: center; border-bottom: 1px dashed rgb(var(--color)) !important; height: 12px; margin: 12px 0 21px; padding-top: 9px; } .end-mark p { color: rgb(var(--color)); background-color: var(--bg-theme); border-radius: 50px; padding: 6px 12px; width: -moz-fit-content; width: fit-content; font-size: 10px; } /* MOBILE OVERLAY */ .mobile-overlay { display: none; position: fixed; inset: 0; background-color: rgb(var(--color-prim)); color: white; z-index: 9999; justify-content: center; align-items: center; text-align: center; padding: 2rem; flex-direction: column; } .overlay-content { max-width: 400px; } .store-buttons img { width: 150px; margin: 1rem; } /* FANCYBOX */ .fancybox__container { align-items: center; z-index: 9999 !important; } .fancybox__carousel { width: 100% !important; max-width: 1000px; } .fancybox__backdrop { background-color: #2f2b3d80 !important; } .fancybox__content { height: 100% !important; } .fancybox__toolbar { width: 100%; } .fancybox-error.fancybox__content { background: #fff; max-height: 120px; border-radius: 18px; color: transparent; padding: 0; max-width: 300px; min-width: 300px; border-bottom: 3px solid rgb(var(--color-orange)); } .fancybox-error.fancybox__content::after { content: "\f070"; font-family: "Font Awesome 5 Pro"; color: rgb(var(--color-orange)); font-size: 36px; position: absolute; left: 50%; top: 33%; transform: translate(-50%, -50%); font-weight: 100; } .fancybox-error.fancybox__content::before { content: "Geen preview beschikbaar voor dit bestandstype"; color: var(--color-theme); font-size: 12px; position: absolute; left: 50%; top: 75%; transform: translate(-50%, -50%); width: 100%; text-align: center; padding: 12px; } .bb-color { border-bottom: 3px solid rgb(var(--color)) !important; transition: 0.2s ease; } .bb-color-light { border-bottom: 3px solid rgb(var(--color), .25) !important; transition: 0.2s ease; } /* GANTT */ .gantt-wrapper { flex-grow: 1; height: 100%; overflow: auto; position: relative; } .gantt { width: -moz-fit-content; width: fit-content; min-height: 100%; position: relative; display: flex; flex-direction: column; align-items: baseline; } .gantt .timetracker { width: 1px; height: calc(100% - 72px); top: 72px; z-index: 2; scroll-margin-left: var(--gantt-size); scroll-margin-top: 72px; display: flex; } .gantt .timetracker .top { min-width: 9px; width: 9px; height: 15px; border-radius: 18px; background: rgb(var(--color)); position: sticky; top: 72px; transform: translate(-4px); } .gantt .timetracker::before, .gantt .timetracker::after { display: none; } .gantt-header { width: 100%; height: 72px; display: flex; position: sticky; top: 0; z-index: 3; } .gantt-header .week { display: flex; flex-wrap: wrap; width: calc(var(--gantt-size) * 7); background-color: rgb(var(--color), .1); font-weight: 500; } .gantt-header .weekcounter { display: flex; align-items: center; justify-content: center; height: 36px; width: calc(var(--gantt-size) * 7); font-size: 10px; background-color: var(--header-theme); border-bottom: 1px solid rgba(var(--color-border)); border-right: 1px solid rgba(var(--color-border)); } .gantt .date, #rooster_weergave .date, #opdracht_weergave .date { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 36px; width: var(--gantt-size); font-size: 10px; position: relative; overflow: hidden; } .gantt-header .date small { font-size: 8px; font-weight: 500; opacity: 0.5; text-transform: uppercase; } .gantt-header .date p { width: calc(var(--gantt-size) - 6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .gantt-row { width: 100%; height: 36px; display: flex; position: relative; transition: 0.1s ease-in; } .focus_taak { outline: 1px dashed rgb(var(--color)) !important; } .ticket.focus_taak { outline: none !important; background-color: rgba(var(--color)); transform: scale(1.02); } .ticket.focus_taak .agenda-detail-item *:not(.initials) { color: #fff !important; } .ticket.focus_taak .icon-btn * { color: #fff !important; } .ticket.focus_taak .fs-12 { color: #fff !important; } .gantt-track { display: flex; align-items: center; width: 100%; position: absolute; height: 36px; overflow: hidden; } .gantt-track:hover { background-color: rgb(var(--color), .15) !important; } /* GANTT CONTAINER */ .gantt-container { height: 100% !important; top: 0 !important; left: 0; padding: 3px 0; position: absolute; transition: 0.3s cubic-bezier(0.2, 1, 0.5, 1.25); z-index: 2; display: flex; align-items: center; } .gantt-container.opdracht { padding: 2px 0; } .gantt-container.opdracht .gantt-bar { background-color: rgb(var(--color)); } .gantt-container.opdracht .opdracht-bar { /* border-bottom: 6px solid rgb(var(--color)); */ width: 100%; position: relative; } .gantt-container.opdracht .opdracht-bar::after { left: auto; right: 0; } .gantt-container.opdracht .opdracht-bar .titel { color: rgb(var(--color)); font-weight: 500; padding: 0 9px; } .gantt-row-container:hover .gantt-track { background-color: rgba(var(--color), 0.075); } .gantt-scroll-btn { position: sticky; left: 0; width: 0; height: 36px; z-index: 1; } .gantt-scroll-btn::after { content: ""; position: absolute; left: 0; top: 0; transition: 0.2s ease; width: 36px; height: 36px; cursor: pointer; display: flex; justify-content: center; align-items: center; border-left: 0 solid rgb(var(--color)); } .gantt-scroll-btn i { position: relative; transition: 0.2s ease; left: -24px; top: 50%; transform: translateY(-50%); font-size: 14px; color: rgb(var(--color)); } .gantt-scroll-btn:hover::after { border-left: 3px solid rgb(var(--color)); } .gantt-scroll-btn:hover i { left: 9px; } .gantt-remove-btn { position: sticky; left: calc(100% - 36px); width: 36px; height: 36px; z-index: 1; overflow: hidden; } .gantt-remove-btn::after { content: ""; position: absolute; right: 0; top: 0; transition: 0.2s ease; width: 36px; height: 36px; cursor: pointer; display: flex; justify-content: center; align-items: center; border-right: 0 solid rgb(var(--color)); } .gantt-remove-btn i { position: relative; transition: 0.2s ease; right: -36px; top: 50%; transform: translateY(-50%); font-size: 14px; color: rgb(var(--color)); } .gantt-row:hover .gantt-remove-btn::after { border-right: 3px solid rgb(var(--color)); } .gantt-remove-btn:hover { background-color: rgba(var(--color), 0.2); } .gantt-row:hover .gantt-remove-btn i { right: -9px; } .gantt-container:hover { padding: 0; } .gantt-container:hover .gantt-bar { background-color: rgb(var(--color)); } .gantt-bar { height: 100%; width: 100%; display: flex; justify-content: center; flex-direction: column; background-color: rgba(var(--color), 0.75); border-left: 1px solid rgba(var(--color)); border: 1px solid rgba(var(--color)); border-left-width: 3px; border-right: 3px solid rgba(var(--color)); border-radius: 50px; color: #fff; transition: 0.2s ease; cursor: pointer; position: relative; } .capaciteit .gantt-bar { border-radius: 6px; } .gantt-bar.sub { height: 75%; } .gantt-bar .titel { width: -moz-fit-content; width: fit-content; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 0 6px; position: sticky; left: 0; } .gantt .deadline { height: 100%; width: var(--gantt-size); position: absolute; border-right: 2px solid rgb(var(--color-red)); z-index: 1; pointer-events: none; } .gantt .deadline::before, .gantt .deadline::after { height: 6px; width: 6px; content: ""; position: absolute; background-color: rgba(var(--color-red)); border-radius: 18px; top: 0; right: -4px; } .gantt .deadline::after { bottom: 0; top: auto; } .gantt, .gantt-header { background: repeating-linear-gradient( 0.25turn, transparent, transparent calc(var(--gantt-size) - 1px), rgba(var(--color-border), 0.25) calc(var(--gantt-size) - 1px), rgba(var(--color-border), 0.25) var(--gantt-size) ), repeating-linear-gradient( 0.25turn, transparent, transparent calc(var(--gantt-size) * 5), rgba(var(--color-sec), 0.03) calc(var(--gantt-size) * 5), rgba(var(--color-sec), 0.03) calc(var(--gantt-size) * 7) ), var(--bg-theme); } .capaciteit .gantt, .capaciteit .gantt-header { background: repeating-linear-gradient( 0.25turn, transparent, transparent calc(var(--gantt-size) - 1px), rgba(var(--color-border)) calc(var(--gantt-size) - 1px), rgba(var(--color-border)) var(--gantt-size) ), repeating-linear-gradient( 0.25turn, transparent, transparent calc(var(--gantt-size) * 5), rgba(var(--color-sec), 0.03) calc(var(--gantt-size) * 5), rgba(var(--color-sec), 0.03) calc(var(--gantt-size) * 7) ), repeating-linear-gradient(transparent, transparent 35px, rgb(var(--color-border)) 35px, rgb(var(--color-border)) 36px) var(--bg-theme); } /* GANTT RESIZE */ .gantt-container .ui-resizable-e { position: absolute; right: 0; top: 0; height: 100%; width: 6px; z-index: 2; cursor: e-resize; } .gantt-container .ui-resizable-w { position: absolute; left: 0; top: 0; height: 100%; width: 6px; z-index: 2; cursor: e-resize; } /* GANTT RELATION */ .gantt-relatie { position: absolute; left: calc(100% + 8px); top: 50%; transform: translate(0, -50%); height: 9px; width: 9px; border-radius: 18px; background-color: rgb(var(--color-info)); opacity: 0.5; } .gantt-relatie:hover { opacity: 1; } .gantt-relatie .handler.ui-draggable { position: relative; height: 9px; width: 9px; cursor: grab; } .gantt-day { height: 30px; width: var(--gantt-size); cursor: pointer; } .gantt-day:hover .size, .size.active { border: 1px dashed rgb(var(--color)); height: 30px; width: var(--gantt-size); position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 6px; background-color: rgb(var(--color), .1); } .gantt-day:hover .size::before, .size.active::before { content: "+"; color: rgb(var(--color)); font-weight: 500;} .gantt-time { width: 100%; height: 100%; position: relative; cursor: pointer; } #gantt_overlay { position: absolute; top: 0; height: 30px; width: var(--gantt-size); border: 1px dashed rgb(var(--color)); border-radius: 6px; background-color: rgb(var(--color), .1); display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 300; } #gantt_overlay::before { content: "+"; color: rgb(var(--color)); font-weight: 500; } #gantt_overlay.active { display: flex !important;} #gantt_overlay.annuleren { border: none; border-left: 3px solid rgb(var(--color-info)); } #gantt_overlay.annuleren::before { content: ""; } #gantt_overlay.annuleren::after { content: "Annuleren"; font-size: 8px; font-weight: 600; left: 6px; position: absolute; color: rgb(var(--color-info)); } .gantt-wrapper:has(.size.active) .size:not(.active) { display: none; } .size.annuleren { border: none; border-left: 3px solid rgb(var(--color-info))} .size.annuleren::before { content: ""; } .size.annuleren::after { content: "Annuleren"; font-size: 8px; font-weight: 600; left: 6px; position: absolute; color: rgb(var(--color-info)); } svg.connections { pointer-events: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } svg.connections:has(*:hover) { z-index: 91; } svg.connections polyline { pointer-events: all; transition: 0.2s ease; stroke: rgb(var(--color-border)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; cursor: default; } svg.connections polyline.placeholder { stroke: transparent !important; stroke-width: 18; } svg.connections:has(*:hover) polyline { stroke: rgb(var(--color-orange)); } svg.connections:has(*:hover) polyline.invalid { stroke: rgb(var(--color-red)); } svg.connections polyline.invalid { stroke: rgba(var(--color-red), 0.7); } svg.connections polyline.highlight { stroke: rgb(var(--color-orange)); } svg.connections polyline.highlight.invalid { stroke: rgb(var(--color-red)); } svg.connections:has(polyline.highlight) polyline:not(.highlight) { stroke: rgba(var(--color-text), 0.05); } svg.connections circle { fill: rgb(var(--color-orange)); opacity: 0; r: 8; pointer-events: all; cursor: pointer; transition: 0.2s ease; } svg.connections circle:hover { fill: rgb(var(--color-red)) !important; opacity: 1; } svg.connections line { stroke: #fff; stroke-width: 2px; opacity: 0; transition: 0.2s ease; } svg.connections:has(*:hover) line, svg.connections:has(*:hover) circle { opacity: 1; } svg.connections rect { width: 5px; height: 5px; x: 0; y: 0; rx: 2; ry: 2; fill: #8a8b8d; } @keyframes animate_gantt_connection { to { stroke-dashoffset: 0; } } .gantt-details-container { position: relative; width: 100%; min-width: 300px; height: 100%; } .gantt-details-container .ui-resizable-e { position: absolute; right: 0; top: 0; width: 6px; border-left: 1px solid rgb(var(--color-border)); border-right: 1px solid rgb(var(--color-border)); height: 100%; cursor: ew-resize; background-color: var(--bg-theme); z-index: 211 !important; } .gantt-details-wrapper { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; background-color: var(--bg-theme); padding-bottom: 6px; } .gantt-details-wrapper::-webkit-scrollbar { width: 0px; } .gantt-details-wrapper .gantt-actions { height: 36px; min-height: 36px; display: flex; padding: 0px 12px; justify-content: end; align-items: center; width: 100%; position: sticky; left: 0; top: 0; background-color: var(--bg-theme); border-bottom: 1px solid rgba(var(--color-border), 0.5); z-index: 210; } .gantt-details-wrapper .thead { height: 36px; position: sticky; top: 36px; z-index: 10; } .gantt-details-wrapper .th { height: 36px; background-color: var(--bg-theme); border-bottom: 1px solid rgb(var(--color-border), 0.5); } .gantt-details { height: 36px; cursor: pointer; display: flex; align-items: center; width: 100%; transition: 0.1s ease-in; } .gantt-details > * { border-bottom: 1px solid rgba(var(--color-border), 0.5); border-right: 1px solid rgba(var(--color-border), 0.5); height: 36px; display: flex; align-items: center; justify-content: center; background-color: var(--bg-theme); } .gantt-details.opdracht > * { background-color: rgba(var(--color), 0.05); } .gantt-details.gantt-details-header { position: sticky; top: 36px; background-color: var(--bg-theme); z-index: 15; } .gantt-details:hover > *:not(.bg-color):not(.gantt-taak):not(.gantt-subtaak):not(.gantt-subsubtaak) { background: var(--header-theme); } .gantt-details .titel { min-width: 240px; width: 100%; padding-right: 12px; } /* .gantt-details .titel input { padding: 0 !important; } */ .gantt-details .contact { width: 140px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .gantt-details .medewerkers { min-width: 90px; width: 90px; display: flex; align-items: center; justify-content: end; padding-right: 24px !important; } .lazy-load { opacity: 0; } .lazy-load * { display: none; } .gantt-opdracht { position: sticky; border-left: 3px solid rgb(var(--color)); width: 39px !important; min-width: 39px !important; max-width: 39px !important; left: 0; top: 0; background: var(--bg-theme); z-index: 10; justify-content: center; padding: 0 !important; } .gantt-taak-container { position: relative; } .gantt-taak-container::after { content: ""; height: calc(100% - 72px); width: 1px; background-color: rgb(var(--color)); position: absolute; left: 19px; top: 0; z-index: 200 } .gantt-taak { background: transparent; position: sticky; width: 39px !important; min-width: 39px !important; max-width: 39px !important; left: 0; top: 0; z-index: 10; justify-content: center; padding: 0 !important; border-bottom: none; border-right: 3px solid rgb(var(--color)) } .gantt-taak::after { position: absolute; content: ""; left: 19px; width: 20px; border-left: 1px solid rgb(var(--color)); border-bottom: 1px solid rgb(var(--color)); bottom: 18px; border-radius: 0 0 0 12px; height: 54px; } .gantt-subtaak-container { position: relative; } .gantt-subtaak-container::after { content: ""; height: calc(100% - 72px); width: 1px; background-color: rgb(var(--color)); position: absolute; left: 55px; top: 0; z-index: 200 } .gantt-subtaak { background-color: transparent; position: sticky; width: 75px !important; min-width: 75px !important; max-width: 75px !important; left: 0; top: 0; z-index: 10; justify-content: center; padding: 0 !important; border-bottom: none; border-right: 3px solid rgb(var(--color)) } .gantt-subtaak::after { position: absolute; content: ""; left: 55px; width: 20px; border-left: 1px solid rgb(var(--color)); border-bottom: 1px solid rgb(var(--color)); bottom: 18px; border-radius: 0 0 0 12px; height: 52px; } .gantt-subtaak::before { position: absolute; content: ""; left: 19px; width: 1px; border-left: 1px solid rgb(var(--color)); bottom: 18px; height: 54px; } .gantt-details-container:last-of-type .gantt-details-container:last-of-type .gantt-subtaak::before { display: none; } .gantt-subsubtaak-container { position: relative; } .gantt-subsubtaak-container::after { content: ""; height: calc(100% - 48px); width: 1px; background-color: rgb(var(--color)); position: absolute; left: 91px; top: 0; z-index: 200 } .gantt-subsubtaak { background-color: transparent; position: sticky; width: 111px !important; min-width: 111px !important; max-width: 111px !important; left: 0; top: 0; z-index: 10; justify-content: center; padding: 0 !important; border-bottom: none; border-right: 3px solid rgb(var(--color)) } .gantt-subsubtaak::after { position: absolute; content: ""; left: 91px; width: 20px; border-left: 1px solid rgb(var(--color)); border-bottom: 1px solid rgb(var(--color)); bottom: 18px; border-radius: 0 0 0 12px; height: 52px; } .gantt-subsubtaak::before { position: absolute; content: ""; left: 19px; width: 1px; border-left: 1px solid rgb(var(--color)); bottom: 18px; height: 54px; } .gantt-details-container:last-of-type .gantt-details-container:last-of-type .gantt-subsubtaak::before { display: none; } .daterangepicker.rtl { position: fixed; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); box-shadow: 0 6px 12px rgb(var(--color-text), 0.5); } .daterangepicker.rtl::before { display: none; } .daterangepicker.rtl::after { display: none; } /* AGENDA */ .agenda-container { /*background: repeating-linear-gradient(transparent, transparent 29px, rgb(var(--color-border), .2) 29px, rgb(var(--color-border), .2) 30px, transparent 30px, transparent 59px,rgb(var(--color-border), .5) 59px, rgb(var(--color-border), .5) 60px); background-position: 0 80px;*/ position: relative; z-index: 1; } .agenda-container .agenda{background: repeating-linear-gradient(transparent, transparent 29px, rgb(var(--color-border), .2) 29px, rgb(var(--color-border), .2) 30px, transparent 30px, transparent 59px,rgb(var(--color-border), .5) 59px, rgb(var(--color-border), .5) 60px); background-position: 0 80px;min-width:100%;} /*.agenda-container { background: repeating-linear-gradient( transparent, transparent 29px, rgba(var(--color-border), 0.2) 29px, rgba(var(--color-border), 0.2) 30px, transparent 30px, transparent 59px, rgba(var(--color-border), 0.5) 59px, rgba(var(--color-border), 0.5) 60px ); background-position: 0 80px; position: relative; z-index: 1; }*/ /* .agenda-container::after { z-index: -1; content: ""; position: absolute; width: 100%; height: 360px; background-color: var(--header-theme); left: 0; top: 0; } */ .agenda-container .sticky { z-index: 2; } .agenda-container .dag { position: relative; } .agenda-container .current_day { z-index: 3; position: absolute; left: 0; top: 0; background-color: rgba(var(--color), 0.025); width: 100%; height: 100%; pointer-events: none; } body .drag-activiteit.ui-draggable-dragging { height: 54px; max-width: 300px; border: 1px solid rgb(var(--color-border)); } .besteed_calendar { width: 339px; max-width: 339px; min-width: 339px; border: 1px solid rgb(var(--color-border)); display: flex; flex-wrap: wrap; position: relative; border-radius: 15px; background-color: var(--header-theme); overflow: hidden; } .besteed_calendar > * { width: 48px; max-width: 48px; height: 36px; border-bottom: 1px solid rgba(var(--color-border), 0.25); border-right: 1px solid rgb(var(--color-border), 0.25); display: flex; align-items: center; justify-content: center; position: relative; background-color: var(--bg-theme); } .besteed_calendar > div { border-bottom: 1px solid rgb(var(--color-border)); } .besteed_calendar > *:nth-child(7n) { background-color: rgba(var(--color-sec), 0.03); } .besteed_calendar > *:nth-child(7n - 1) { background-color: rgba(var(--color-sec), 0.03); } .besteed_calendar .date { position: absolute; z-index: 2; left: 0; top: 0px; font-size: 8px; color: rgba(var(--color-text), 0.5); padding: 0 3px; border-radius: 3px; line-height: 1.4; font-weight: 500; } .besteed_calendar .current .date { background-color: rgb(var(--color)); color: var(--bg-theme); } .besteed_calendar input { border: 1px solid transparent; padding: 0 !important; border-radius: 3px !important; cursor: text; } .besteed_calendar .prev input { background-color: rgba(var(--color-info), 0.1) !important; } .besteed_calendar input.suggestie { color: rgb(var(--color-orange)) !important; background-image: linear-gradient( var(--bg-theme), rgba(var(--color-orange), 0.1) ); } .besteed_calendar input.geaccordeerd { color: rgb(var(--color-green)) !important; background-image: linear-gradient( var(--bg-theme), rgba(var(--color-green), 0.1) ); } .besteed_calendar .accorderen { background: rgb(var(--color-green)); position: absolute; right: 0; top: 0; height: 12px; width: 18px; display: flex; justify-content: center; align-items: center; border-radius: 18px; pointer-events: none; transform: scale(0); opacity: 0; transition: 0.2s ease; } .besteed_calendar .accorderen i { font-size: 8px; } .besteed_calendar label:hover .accorderen { pointer-events: all; transform: scale(1); opacity: 1; cursor: pointer; z-index: 5; } .tabel_kop { display: flex; height: 30px; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; color: rgb(from var(--color-theme) r g b / 0.75); background-color: var(--header-theme); text-align: center; } .tabel_cell { display: flex; height: 36px; min-height: 36px; align-items: center; padding: 0 12px; } .tabel_cell input { outline: none !important; border-radius: 0; min-height: 35px; height: 35px; background-color: transparent; } .tabel_cell.po-none input { box-shadow: none !important; } .tabel_cell input:focus { position: relative; z-index: 2; border: 1px solid rgb(var(--color)) !important; } /* .tabel_cell .icon { border-bottom: 1px solid transparent !important; border-right: 1px solid transparent !important; border-left: 1px solid rgba(var(--color-border), .5) !important; border-top: 1px solid transparent !important; height: 100%; border-radius: 0 !important; } */ /* .tabel_cell .icon.start { border-right: 1px solid rgba(var(--color-border), .5) !important; border-left: 1px solid transparent !important; } */ /* .tabel_cell input:focus ~ .icon { border-bottom: 1px solid transparent !important; border-right: 1px solid rgba(var(--color)) !important; border-left: 1px solid rgba(var(--color)) !important; border-top: 1px solid rgba(var(--color)) !important; z-index: 10; } */ /* .tabel_cell input:focus ~ .icon.start { border-bottom: 1px solid transparent !important; border-left: 1px solid transparent !important; border-right: 1px solid rgba(var(--color)) !important; border-top: 1px solid transparent !important; } */ .tabel_row { display: flex; position: relative; } .tabel_row.disabled { background-color: var(--header-theme); pointer-events: none; opacity: .75; } .tabel_row.active::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-left: 1px solid rgb(var(--color)) !important; border: 1px solid rgb(var(--color)) !important; border-left-width: 3px !important; background-color: rgb(var(--color), .1); pointer-events: none; z-index: 1; } .tabel_row:hover { background-color: rgba(var(--color-border), .1); } .tabel_row:hover .icon { background: linear-gradient(rgba(var(--color-border), .1), rgba(var(--color-border), .1)), var(--bg-theme); } .tabel_row.last_tabel_row .tabel_cell { border-bottom: none; } .tabel_kop, .tabel_cell{ border-bottom: 1px solid rgb(var(--color-border), .5); border-right: 1px solid rgb(var(--color-border), .5); } .tabel_kop:last-child, .tabel_cell:last-child { border-right: none; } .tabel_cell.empty { background-color: rgba(var(--color-info), 0.05); pointer-events: none; } .tabel_cell.empty .icon { background-color: transparent; pointer-events: none; } .tabel_cell.hover.bg-color:hover { background-color: rgb(var(--color), .9) !important; } /* TABEL LARGE */ .tabel_large .tabel_kop { padding: 0 0 0 24px; height: 36px; border-top: 1px solid rgb(var(--color-border), .5); border-right: none; justify-content: start; text-transform: uppercase; font-weight: 600; font-size: 12px; color: rgb( var(--color-text), 0.75 ); -webkit-user-select: none; -moz-user-select: none; user-select: none} .tabel_large .tabel_cell { padding: 0 0 0 21px; border-left: 3px solid transparent; height: -webkit-fill-available; height: -moz-available; height: stretch; min-height: 40px; border-right: none; justify-content: start; } .tabel_large .tabel_row_container { background-color: var(--header-theme); min-height: 500px; border-bottom: 1px solid rgb(var(--color-border), .5); display: flex; flex-direction: column; } .tabel_large .tabel_row_container .tabel_row { background-color: var(--bg-theme); } .input-sizer:has(.icon) { width: 100%; &::after, input, textarea { padding-right: 46px; } } .input-sizer { display: inline-grid; vertical-align: top; align-items: center; position: relative; max-width: 100%; &.stacked { align-items: stretch; &::after, input, textarea { grid-area: 2 / 1; } } &::after, input, textarea { max-width: 100%; min-width: 100%; width: 100%; grid-area: 1 / 2; font: inherit; padding: 8px 12px; margin: 0; resize: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; max-width: 100%; } &::after { padding: 9px 12px; content: attr(data-value) " "; visibility: hidden; color: red; z-index: 20; white-space: pre-wrap; max-width: 100%; } } .input-sizer.small { &::after, input, textarea { padding: 5px 12px; min-height: auto; } &::after { padding: 5px 12px; } } .input-sizer:has(.p-0)::after { padding: 0 !important; word-break: break-word; } .user-color { position: relative; } .user-color::after { position: absolute; content: ""; left: 0; top: 0; pointer-events: none; width: 100%; height: calc(100vh - 180px); border-left: 1px solid rgba(var(--color), 0.1); border-right: 1px solid rgba(var(--color), 0.1); } .no-time-indicator::-webkit-calendar-picker-indicator { display: none; } /* .no-time-indicator[value="00:00"] { color: rgb(var(--color-border)) !important; } */ .value-border:not(:-moz-placeholder-shown) { border-color: rgb(var(--color)); } .value-border:not(:placeholder-shown) { border-color: rgb(var(--color)); } .value-border:not(:-moz-placeholder-shown) ~ .icon { border-color: rgb(var(--color)) !important; } .value-border:not(:placeholder-shown) ~ .icon { border-color: rgb(var(--color)) !important; } body .tagify { width: 100%; min-height: 36px; border-radius: 6px; align-items: center !important; padding: 3px 48px 3px 6px !important; border: 1px solid rgb(var(--color-border)); gap: 6px; } body .taken_tags .tagify { border-radius: 0; padding: 12px 12px 12px 6px !important; border: none; } .tagify .tagify__tag { margin: 0; padding: 3px 3px 3px 12px; height: 30px; gap: 3px; } .tagify .tagify__tag > div { padding: 0; color: rgb(var(--theme-color)); } .tagify .tagify__tag > div::before { border-radius: 18px; background-color: var(--header-theme); box-shadow: none !important; border: 1px solid rgb(var(--color-border)); --tag-bg-inset: 0px !important; } .tagify .tagify__tag[title="already exists"] > div::before { background-color: rgba(var(--color-red), 0.2); border: 1px solid rgb(var(--color-red)); color: rgb(var(--color-red)); } .tagify .tagify__tag__removeBtn:hover + div::before { box-shadow: 0 0 0 24px rgba(var(--color-red), 0.2) inset !important; border: 1px solid rgb(var(--color-red)); } .tagify .tagify__tag__removeBtn:hover + div > span { opacity: 1 !important; } .tagify .tagify__tag__removeBtn { height: 18px; width: 18px; border-radius: 18px; } .tagify .tagify__tag__removeBtn:hover { background-color: rgb(var(--color-red)); } body .tagify__dropdown { background-color: var(--bg-theme); border: 1px solid rgb(var(--color-border)); border-radius: 18px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14), 0 0 transparent, 0 0 transparent !important; overflow: hidden; } body .tagify__dropdown__wrapper { border: none !important; background-color: var(--bg-theme); } body .tagify__dropdown__item { border-bottom: 1px solid rgba(var(--color-border), 0.5); margin: 0; background-color: var(--bg-theme); border-radius: 0; } body .tagify__dropdown__item:hover { background: var(--header-theme); color: var(--color-theme) !important; } body .tagify__dropdown__item > div { display: flex; flex-direction: column; gap: 3px !important; } body .tagify__dropdown__item > div br { display: none; } body .tagify__input { min-width: 60px; padding: 0 12px; margin: 0 !important; } .tagify__input::before { height: auto !important; line-height: 1.5 !important; } /* LABEL TAGS */ .label_tags .tagify .tagify__tag { margin: 0; padding: 0; height: 24px; gap: 0px; } .label_tags .tagify .tagify__tag > p { padding: 0; color: #fff; } .label_tags .tagify .tagify__tag > div::before { border-radius: 18px; background-color: rgb(var(--color)); box-shadow: none !important; border: 1px solid rgb(var(--color)); --tag-bg-inset: 0px !important; } .label_tags .tagify .tagify__tag > div > span { padding: 0 6px 0 12px; min-height: 24px; border-radius: 18px; background-color: rgb(var(--color)); color: #fff; font-size: 10px; line-height: 14px; display: flex; align-items: center; justify-content: center; font-weight: 500; text-align: center; } .label_tags .tagify .tagify__tag > div > span .marker { padding: 0; min-height: auto; border-radius: 0; color: #fff; font-size: 10px; font-weight: 500; text-align: center; } .label_tags .tagify .tagify__tag[title="already exists"] > div::before { background-color: rgb(var(--color)); border: 1px solid rgb(var(--color)); color: rgb(var(--color-red)); } .label_tags .tagify .tagify__tag__removeBtn:hover + div::before { box-shadow: none !important; border: 1px solid rgb(var(--color)); } .label_tags .tagify .tagify__tag__removeBtn:hover + div > span { opacity: 1 !important; } .label_tags .tagify .tagify__tag__removeBtn { height: 18px; width: 18px; border-radius: 18px; color: #fff; } .label_tags .tagify .tagify__tag__removeBtn:hover { background-color: rgb(var(--color-red)); } .label_tags .tagify .tagify__tag:has(.prim) { --color: var(--color-prim); } .label_tags .tagify .tagify__tag:has(.sec) { --color: var(--color-sec); } .label_tags .tagify .tagify__tag:has(.red) { --color: var(--color-red); } .label_tags .tagify .tagify__tag:has(.pink) { --color: var(--color-pink); } .label_tags .tagify .tagify__tag:has(.purple) { --color: var(--color-purple); } .label_tags .tagify .tagify__tag:has(.deep_purple) { --color: var(--color-deep_purple); } .label_tags .tagify .tagify__tag:has(.indigo) { --color: var(--color-indigo); } .label_tags .tagify .tagify__tag:has(.blue) { --color: var(--color-blue); } .label_tags .tagify .tagify__tag:has(.light_blue) { --color: var(--color-light_blue); } .label_tags .tagify .tagify__tag:has(.cyan) { --color: var(--color-cyan); } .label_tags .tagify .tagify__tag:has(.teal) { --color: var(--color-teal); } .label_tags .tagify .tagify__tag:has(.green) { --color: var(--color-green); } .label_tags .tagify .tagify__tag:has(.light_green) { --color: var(--color-light_green); } .label_tags .tagify .tagify__tag:has(.lime) { --color: var(--color-lime); } .label_tags .tagify .tagify__tag:has(.yellow) { --color: var(--color-yellow); } .label_tags .tagify .tagify__tag:has(.amber) { --color: var(--color-amber); } .label_tags .tagify .tagify__tag:has(.orange) { --color: var(--color-orange); } .label_tags .tagify .tagify__tag:has(.deep_orange) { --color: var(--color-deep_orange); } .label_tags .tagify .tagify__tag:has(.brown) { --color: var(--color-brown); } .label_tags .tagify .tagify__tag:has(.grey) { --color: var(--color-grey); } .label_tags .tagify .tagify__tag:has(.blue_grey) { --color: var(--color-blue_grey); } .label_tags .tagify .tagify__tag:has(.black) { --color: var(--color-black); } .label_tags .tagify .tagify__tag:has(.text) { --color: var(--color-text); } .label_tags .tagify .tagify__tag:has(.text-light) { --color: var(--color-text-light); } .label_tags .tagify .tagify__tag:has(.text-lighter) { --color: var(--color-text-lighter); } .label_tags .tagify .tagify__tag:has(.info) { --color: var(--color-info); } .google-calendar1 { --color: 121, 85, 72; } .google-calendar2 { --color: 230, 124, 115; } .google-calendar3 { --color: 213, 0, 0; } .google-calendar4 { --color: 244, 81, 30; } .google-calendar5 { --color: 239, 108, 0; } .google-calendar6 { --color: 240, 147, 0; } .google-calendar7 { --color: 0, 150, 136; } .google-calendar8 { --color: 11, 128, 67; } .google-calendar9 { --color: 124, 179, 66; } .google-calendar10 { --color: 192, 202, 51; } .google-calendar11 { --color: 228, 196, 65; } .google-calendar12 { --color: 246, 191, 38; } .google-calendar13 { --color: 51, 182, 121; } .google-calendar14 { --color: 3, 155, 229; } .google-calendar15 { --color: 66, 133, 244; } .google-calendar16 { --color: 63, 81, 181; } .google-calendar17 { --color: 121, 134, 203; } .google-calendar18 { --color: 179, 157, 219; } .google-calendar19 { --color: 97, 97, 97; } .google-calendar20 { --color: 167, 155, 142; } .google-calendar21 { --color: 173, 20, 87; } .google-calendar22 { --color: 216, 27, 96; } .google-calendar23 { --color: 142, 36, 170; } .google-calendar24 { --color: 158, 105, 175; } .google-event1 { --color: 121, 134, 203; } /* lavendel */ .google-event2 { --color: 51, 182, 121; } /* salie */ .google-event3 { --color: 142, 36, 170; } /* druif */ .google-event4 { --color: 230, 124, 115; } /* flamingo */ .google-event5 { --color: 246, 191, 38; } /* banaan */ .google-event6 { --color: 244, 81, 30; } /* mandarijn */ .google-event7 { --color: 3, 155, 229; } /* pauw */ .google-event8 { --color: 97, 97, 97; } /* grafiet */ .google-event9 { --color: 63, 81, 181; } /* bosbes */ .google-event10 { --color: 11, 128, 67; } /* basilicum */ .google-event11 { --color: 213, 0, 0; } /* tomaat */ #help { position: fixed; top: 100%; left: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; background-color: rgba(var(--color-black), 0.9); opacity: 0; z-index: 99999; transition: 0.5s ease; } #help.show { opacity: 1; top: 0; } #help .overflow-x-scroll .box { width: 240px; min-width: 240px; max-width: 240px; height: 135px; min-height: 135px; max-height: 135px; display: flex; align-items: end; justify-content: start; padding: 12px 15px; background-image: linear-gradient(#3335, transparent, transparent, #3335), linear-gradient( 45deg, rgb(var(--color-light_blue)) 0%, rgb(var(--color-light_blue)) 60%, #fff 60%, #fff 62%, rgb(var(--color-sec)) 62%, rgb(var(--color-sec)) ); cursor: pointer; outline: 0 solid #fff; transition: outline 0s; } #help .overflow-x-scroll .box:hover { outline: 2px solid #fff !important; } #help .overflow-x-scroll .box::before, #help .overflow-x-scroll .box::after { content: ""; position: absolute; border-radius: 50%; } #help .overflow-x-scroll .box::before { left: 12px; top: 9px; border: 6px solid rgb(var(--color-sec)); width: 36px; height: 36px; box-shadow: 2px 2px 6px #333; } #help .overflow-x-scroll .box::after { left: 18px; top: 15px; border: 6px solid rgb(var(--color-light_blue)); background-color: #fff; width: 24px; height: 24px; } #help .overflow-x-scroll .box p { color: white; font-size: 14px; text-shadow: 2px 2px 6px #333; } .scroll-back, .scroll-forwards { position: sticky; top: 0; height: 100%; min-width: 24px; max-width: 24px; width: 24px; display: flex; align-items: center; justify-content: center; z-index: 5; transition: 0.5s ease; } .scroll-back i, .scroll-forwards i { color: #dbdbdb; font-size: 14px; cursor: pointer; } .scroll-back { left: 0; background-image: linear-gradient(90deg, #dbdbdb80, transparent); opacity: 0; margin-right: -6px; } .scroll-forwards { right: 0; background-image: linear-gradient(-90deg, #dbdbdb80, transparent); opacity: 1; margin-left: -6px; } #help-video.show { position: fixed; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 9999999; background-color: rgba(var(--color-black), 0.9); transition: 0.3s ease; } #help-video iframe { width: 100%; max-height: calc(100vh - 96px); aspect-ratio: 16 / 9; transition: 0.3s ease; } #help-video .help-video-header { padding: 12px 24px; border-bottom: 1px solid rgb(var(--color-border)); display: flex; justify-content: end; transition: 0.3s ease; } #help-video .video-container { padding: 24px; transition: 0.3s ease; } #help-video.show.small_video { position: fixed; right: 24px; bottom: 12px; width: 300px; height: 212px; background-color: transparent; box-shadow: 3px 3px 12px #333; background-color: rgb(var(--color-black)); border-radius: 18px; overflow: hidden; transition: left 0s ease, top 0s ease; } #help-video.show.small_video .help-video-header { padding: 6px 12px; } #help-video.show.small_video .help-video-header .icon-btn { min-width: 24px; height: 24px; min-width: 24px; border-radius: 18px !important; } #help-video.show.small_video .help-video-header .icon-btn > i { font-size: 15px; } #help-video.show.small_video .help-video-header .handle { position: absolute; left: 50%; top: 0px; transform: translate(-50%); font-size: 18px; cursor: grab; } #help-video.show.small_video iframe { border-radius: 0 !important; } #help-video.show.small_video .video-container { padding: 0; max-height: 166px; } #help-video.show:not(.small_video) { left: 0 !important; top: 0 !important; } #klantportaal .page{padding:90px 12px 12px 18px;} #klantportaal .tabs li{width:auto !important;} /* .rooster_weergave { --c: calc((100% - 260px) / 7) height: fit-content; background-color: var(--bg-theme); background-image: repeating-linear-gradient(to right, transparent 0px 259px, rgb(var(--color-border), .5) 259px 260px, transparent 260px calc(260px + ((100% - 260px) / 7)), rgb(var(--color-border), .5) calc(260px + ((100% - 260px) / 7)) calc(261px + ((100% - 260px) / 7)), transparent calc(261px + ((100% - 260px) / 7)) calc(260px + (((100% - 260px) / 7) * 2)), rgb(var(--color-border), .5) calc(260px + (((100% - 260px) / 7) * 2)) calc(261px + (((100% - 260px) / 7) * 2)), transparent calc(261px + (((100% - 260px) / 7) * 2)) calc(260px + (((100% - 260px) / 7) * 3)), rgb(var(--color-border), .5) calc(260px + (((100% - 260px) / 7) * 3)) calc(261px + (((100% - 260px) / 7) * 3)), transparent calc(261px + (((100% - 260px) / 7) * 2)) calc(260px + (((100% - 260px) / 7) * 4)), rgb(var(--color-border), .5) calc(260px + (((100% - 260px) / 7) * 4)) calc(261px + (((100% - 260px) / 7) * 4)), transparent calc(261px + (((100% - 260px) / 7) * 4)) calc(260px + (((100% - 260px) / 7) * 5)), rgb(var(--color-border), .5) calc(260px + (((100% - 260px) / 7) * 5)) calc(261px + (((100% - 260px) / 7) * 5)), transparent calc(261px + (((100% - 260px) / 7) * 5)) calc(260px + (((100% - 260px) / 7) * 6)), rgb(var(--color-border), .5) calc(260px + (((100% - 260px) / 7) * 6)) calc(261px + (((100% - 260px) / 7) * 6)) ), repeating-linear-gradient(to bottom, transparent 0px 41px, rgb(var(--color-border), .5) 41px, rgb(var(--color-border), .5) 42px ); } */ .rooster-container { position: relative; padding: 0; height: 42px; min-height: 0; transition: 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.7); } .rooster-container:hover { padding: 0; } .rooster-container:hover .afspraak { left: 0; padding: 0 0 0 4px !important; width: 100% !important; } .rooster_dag:hover, .opdracht_dag:hover { position: relative; cursor: pointer; background-color: rgb(var(--color), .1); } .rooster_dag:not(.ui-droppable-active):hover::after, .opdracht_dag:not(.ui-droppable-active):hover::after { position: absolute; content: '\f055'; font-family: 'Font Awesome 5 Pro'; border: 1px dashed rgb(var(--color-prim)); border-radius: 6px; width: calc(100% - 2px); height: calc(100% - 2px); top: 1px; left: 1px; display: flex; justify-content: center; align-items: center; color: rgb(var(--color-prim)); } .rooster_dag:has(.rooster_afspraak):hover::after, .opdracht_dag:has(.rooster_afspraak):hover::after { display: none; } .highlight-on-hover { position: relative; } .highlight-on-hover:hover::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(var(--color), 0.1); pointer-events: none; } .highlight-on-hover:hover .bg-theme { background: linear-gradient(rgba(var(--color), 0.1), rgba(var(--color), 0.1)), var(--bg-theme) !important; } .afspraak.is_dragging { pointer-events: none; } .rooster_afspraak.ui-draggable { cursor: grab; } .date > .feestdag { position: absolute; width: 100%; height: calc(100vh - 204px); top: 0; left: 0; /* border: 1px solid rgba(var(--color), 0.5); */ background-image: repeating-linear-gradient( 135deg, transparent, transparent 9px, rgba(var(--color), 0.1) 9px, rgba(var(--color), 0.1) 18px ); } .gantt .date > .feestdag { height: calc(100vh - 205px); } /* WIZARD */ .wizard { padding: 12px 24px; display: flex; align-items: center; gap: 12px; } .wizard .step { display: flex; align-items: center; gap: 9px; opacity: 0.75; } .wizard .step .column p:first-child { font-weight: 500; } .wizard .step .column p:nth-child(2) { font-size: 9px; font-weight: 100; } .wizard .step .number { width: 42px; height: 42px; border-radius: 50px; display: flex; align-items: center; justify-content: center; color: rgb(var(--color-info)); background-color: rgba(var(--color-info), 0.1); font-size: 18px; font-weight: 500; transition: 0.2s ease; } .wizard .step.active { opacity: 1; } .wizard .step.active .number { color: #fff; background-color: rgb(var(--color)); } .wizard .step.active .column p:first-child { color: rgb(var(--color)); } .wizard .step.done { opacity: 1; } .wizard .step.done .column { color: rgba(var(--color-text), 0.5); } .wizard .step.done .number { color: rgb(var(--color)); background-color: rgba(var(--color), 0.1); } .wizard .step.done + i { color: rgb(var(--color)); } /* MARKERS */ .marker { padding: 2px 9px; min-height: 24px; border-radius: 18px; background-color: rgb(var(--color)); color: #fff; font-size: 9px; line-height: 14px; display: flex; align-items: center; justify-content: center; font-weight: 500; text-align: center; } .custom-tooltip { position: relative; } .custom-tooltip .tip { position: absolute; left: 50%; bottom: calc(100% + 6px); padding: 6px 12px; border: 1px solid rgb(var(--color-border)); box-shadow: 0 2px 6px rgba(var(--color-text), 0.125); transition: 0.2s ease; border-radius: 12px; background-color: var(--bg-theme); transform: translate(-50%); opacity: 0; pointer-events: none; z-index: 99; } .custom-tooltip .tip.right { position: absolute; left: calc(100% + 6px); bottom: 50%; transform: translateY(50%); } .custom-tooltip .tip.left { position: absolute; left: -6px; bottom: 50%; transform: translate(-100%, 50%); } .custom-tooltip:hover .tip { opacity: 1; } /* TOAST UI EDITOR */ .toastui-editor-defaultUI { border-radius: 0 !important; border: none !important; } .toastui-editor-toolbar { height: 49px !important; border-bottom: 1px solid rgb(var(--color-border)); } .toastui-editor-contents { padding: 24px !important; font-family: Poppins !important; } .toastui-editor-defaultUI-toolbar { background-color: var(--bg-theme) !important; border: none !important; height: 100% !important; padding: 0 24px !important; align-items: center; justify-content: center; } .toastui-editor-toolbar-group { align-items: center; gap: 6px; } .toastui-editor-defaultUI-toolbar button { margin: 0 !important; width: 30px !important; height: 30px !important; border-radius: 18px !important; border: none !important; background: none !important; transition: 0.2s ease; position: relative; } .toastui-editor-defaultUI-toolbar button::after { content: "\f071"; position: absolute; font-family: "Font Awesome 5 Pro"; transition: 0.2s ease; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: 100 !important; color: rgb(from var(--color-theme) r g b / 0.75); } .toastui-editor-defaultUI-toolbar button:hover { background: rgba(var(--color), 0.1) !important; color: rgb(var(--color)) !important; } .toastui-editor-defaultUI-toolbar button:hover::after { color: rgb(var(--color)) !important; } .toastui-editor-defaultUI-toolbar button.active { background: rgb(var(--color)) !important; color: #fff !important; } .toastui-editor-defaultUI-toolbar button.active::after { color: #fff !important; } .toastui-editor-defaultUI-toolbar button.heading::after { content: "\f1dc"; } .toastui-editor-defaultUI-toolbar button.bold::after { content: "\f032"; font-weight: 700 !important; } .toastui-editor-defaultUI-toolbar button.italic::after { content: "\f033"; } .toastui-editor-defaultUI-toolbar button.bullet-list::after { content: "\f03a"; } .toastui-editor-defaultUI-toolbar button.ordered-list::after { content: "\f0cb"; } .toastui-editor-defaultUI-toolbar button.task-list::after { content: "\f058"; } .ProseMirror .placeholder { background-color: transparent !important; } .toastui-editor-contents .task-list-item::before { border-radius: 18px !important; background: transparent !important; border: 1px solid rgb(var(--color-border)) !important; } .toastui-editor-contents .task-list-item.checked:before { background-color: rgb(var(--color)) !important; border: 0px solid transparent !important; content: "\f00c"; font-family: "Font Awesome 5 Pro"; color: #fff; text-align: center; font-size: 12px; } .toastui-editor-contents .task-list-item.checked p { opacity: 0.5; } .page-break-preview, .page-break-inner-preview { position: relative; width: calc(210mm + 48px); left: -37px; background-color: var(--base-theme); height: 30px; overflow: hidden; -webkit-clip-path: polygon( 3% 7%, 3% 7%, 3.5% 15%, 96.5% 15%, 97% 0%, 100% 0, 100% 100%, 97% 100%, 96.5% 84%, 3.5% 84%, 3% 100%, 0 100%, 0 0 ); clip-path: polygon( 3% 7%, 3% 7%, 3.5% 15%, 96.5% 15%, 97% 0%, 100% 0, 100% 100%, 97% 100%, 96.5% 84%, 3.5% 84%, 3% 100%, 0 100%, 0 0 ); } /* .page-break-preview { position: relative; width: calc(210mm + 48px); left: -37px; background-color: #F8F7FA; height: 30px; overflow: hidden; margin: 48px 0; } */ .p-0-24 .page-break-preview { left: -61px; } .p-0-24 .p-0-24 .page-break-preview { left: -73px; } .box > .p-0-24 > .page-break-preview { left: -49px; } .p-0-24 .page-break-inner-preview { left: -73px; } .p-0-24 .p-0-24 .page-break-inner-preview { left: -85px; } .box > .p-0-24 > .page-break-inner-preview { left: -61px; } .page-break-preview::before, .page-break-preview::after, .page-break-inner-preview::before, .page-break-inner-preview::after { content: ""; position: absolute; width: 210mm; left: 24px; background-color: #fff; height: 48px; border-radius: 6px; border: 1px solid rgb(var(--color)); box-shadow: 0 2px 6px rgba(var(--color-text), 0.125); } .page-break-preview::before, .page-break-inner-preview::before { top: 24px; } .page-break-preview::after, .page-break-inner-preview::after { bottom: 24px; } .hover-input input, .hover-input textarea { border: 1px solid rgb(var(--color-border), .5); } .hover-input .dropdownmenu-btn, .hover-input .icon { opacity: 0; } .hover-input .dropdownmenu-btn input { transition: 0.1s !important; } .hover-input:hover input, .hover-input:hover textarea, .hover-input:focus-within input, .hover-input:focus-within textarea { border: 1px solid rgb(var(--color-border)); } .hover-input:hover .dropdownmenu-btn, .hover-input:hover .icon, .hover-input:focus-within .icon, .hover-input:focus-within .dropdownmenu-btn { opacity: 1; } .hover-input input:focus, .hover-input textarea:focus { border: 1px solid rgb(var(--color)); } .version_update { height: 100vh; width: 100vw; background-image: linear-gradient( 60deg, rgba(var(--color-prim), 0.5), transparent, rgba(var(--color-prim), 0.5) ); background-color: #333b; z-index: 99999; position: relative; transition: 0.2s ease; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; color: #fff !important; opacity: 0; pointer-events: none; } .version_update.show { opacity: 1; pointer-events: all; } .ai_filled { position: relative; } .ai_filled input { background-color: rgba(var(--color-light_blue), 0.1); border-color: #7f85bf; } .ai_filled .icon { background-color: rgba(var(--color-light_blue), 0.1); border-color: #7f85bf; } .ai_filled::after { content: "AI"; position: absolute; right: -9px; bottom: 25px; border: 1px solid rgb(var(--color-light_blue)); color: rgb(var(--color-light_blue)); border-radius: 50px; padding: 0 6px; font-size: 10px; font-weight: 700; z-index: 2; background-color: var(--bg-theme); box-shadow: 0 0 6px rgba(var(--color-text), 0.25); } .ai-loader { position: relative; color: #fff; width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; } .ai-loader::before { content: ""; position: absolute; border-radius: 100%; z-index: 2; box-shadow: 0 0 15px 15px var(--header-theme); animation: circle-size 3s linear infinite; background-color: var(--header-theme); width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; text-shadow: 0 0 9px #333; text-align: center; } .ai-loader::after { content: "AI"; position: absolute; z-index: 3; text-align: center; font-size: 15px; color: rgb(var(--color)); } .ai-loader .ai-shadow { width: 36px; height: 36px; position: relative; border-radius: 100%; z-index: 1; box-shadow: 3px -4px 3px 3px rgb(var(--color-light_blue)), 2px -2px 4px 3px rgb(var(--color-prim)), -3px -4px 6px 3px rgb(var(--color-sec)), 4px 2px 3px 3px rgb(var(--color-sec)), 1px 1px 9px 3px rgb(var(--color-light_blue)); animation: shadow-rotate 2s linear infinite; transform-origin: center; } @keyframes circle-size { 50% { width: 30px; height: 30px; } } @keyframes shadow-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .funnel-step { position: relative; flex-grow: 1; height: 100%; overflow: visible; opacity: .9; transition: .2s ease;} .funnel-step:hover { opacity: 1; } .funnel-step:hover svg path { opacity: 1 !important; } .funnel-svg { display: block; width: 100%; height: 100%; } .funnel-svg path { fill: rgb(var(--color)); transition: .2s ease; } .funnel-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 500; font-size: 10px; text-align: center; background: var(--bg-theme); padding: 3px 9px; border-radius: 18px; pointer-events: none; } .funnel-info { align-items: center; justify-content: space-between; height: calc(100% + 12px); position: absolute; left: 0; top: 0; transform: translate(-50%, -6px) } .funnel-info::after { content: ""; position: absolute; width: 3px; background: var(--bg-theme); height: 100%; } .funnel-info span { position: relative; z-index: 2; padding: 3px 12px; background: var(--bg-theme); border-radius: 18px; } .path-anim { transform-origin: center center; animation: growPath .75s ease forwards; } @keyframes growPath { from { transform: scale(1, 0); } to { transform: scale(1, 1); } } .verticale_specs { flex-direction: column; } .verticale_specs .specs { flex-direction: column; } .verticale_specs .spec_item { flex-direction: row !important; } .verticale_specs .abs { width: 300px !important; max-width: 300px !important; } .verticale_specs .spec_item .tabel_kop { height: 36px !important; border-right: 1px solid rgb(var(--color-border)) !important; } .verticale_specs .spec_item .tabel_cell { width: 180px !important; } .spec_item .tabel_kop { border-right: none !important; } .verticale_specs .spec_item .icon-btn { top: 6px !important; } .verborgen, .verborgen input { color: rgb(var(--color-text), .75) !important; } .pdf-inputs input, .pdf-inputs textarea, .pdf-inputs .input-sizer::after, .pdf-inputs .display { min-height: auto; padding: var(--regel-marge) 12px; line-height: var(--line-height); font-size: var(--font-size); } .pdf-inputs .display { height: auto; } .pdf-inputs textarea, .pdf-inputs .input-sizer::after { padding-right: 46px !important; } .pdf-inputs .icon { font-size: var(--font-size); bottom: var(--regel-marge); height: var(--line-height); } .pdf-inputs .dropdownmenu-btn { height: calc(var(--line-height) + var(--regel-marge) + var(--regel-marge) + 2px); max-height: 36px;} .input-sizer .icon { height: auto; bottom: 50%; transform: translateY(50%)} /* GRID TABEL */ .tabel_grid { display: grid; grid-auto-rows: minmax(40px, auto); grid-template-columns: 1fr; align-content: start; position: relative; min-height: 500px; overflow-x: auto; border-bottom: 1px solid rgb(var(--color-border), .5); border-top: 1px solid rgb(var(--color-border), .5); background-color: var(--header-theme)} .grid_row { display: grid; background-color: var(--bg-theme); } .grid_row:hover .grid_cell { background-color: var(--header-theme); } .grid_row .status { width: 120px; min-width: 120px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; background-color: rgba(var(--color), 0.1); color: rgb(var(--color)); cursor: pointer; } .grid_row .status:hover { background-color: rgba(var(--color), 0.2); } .grid_cell { display: none; align-items: center; padding: 0 12px; border-bottom: 1px solid rgb(var(--color-border), .5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .grid_header { position: sticky; top: 0; z-index: 51; } .grid_header .grid_cell { background-color: var(--header-theme) !important; font-weight: 500; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: rgb(var(--color-text), 0.75) !important; text-transform: uppercase; position: relative; } .grid_cell:first-child { display: flex; position: sticky; left: 0; background: var(--bg-theme); z-index: 50; border-right: 1px solid rgb(var(--color-border), .25); } .grid_cell:last-child { display: flex; position: sticky; right: 0; background: var(--bg-theme); z-index: 50; border-left: 1px solid rgb(var(--color-border), .25); border-right: 1px solid rgb(var(--color-border), .5); } .grid_cell .resize_column { width: 6px; border: 2px solid var(--header-theme); background-color: rgb(var(--color-border)); height: 18px; position: absolute; right: 0; cursor: e-resize; opacity: 0.5; transition: .2s ease } .grid_cell .resize_column:hover { opacity: 1; background-color: rgb(var(--color-prim)); } .grid_cell:has(.resizing) { position: relative; overflow: visible; pointer-events: none; } .grid_cell:has(.resizing)::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; border-right: 1px dashed rgb(var(--color-prim)); border-left: 1px dashed rgb(var(--color-prim))} .grid_cell:has(.sortable):hover { background-color: rgb(var(--color-grey), .1) !important; cursor: pointer; } .grid_cell .sortable { opacity: 0; } .grid_cell:hover .sortable { opacity: 0.5; } .grid_cell .sortable.asc { opacity: 1; color: rgb(var(--color-prim)); } .grid_cell .sortable.desc { opacity: 1; color: rgb(var(--color-prim)); transform: rotate(180deg); } .ideal_link { border: 1px solid rgb(var(--color-pink)); background-color: #fff; border-radius: 30px; padding: 3px 9px 3px 12px; height: 36px; display: block; } .gespreksverslag_textarea .note-editor.note-airframe .note-editing-area .note-editable { height: calc(100vh - 580px); overflow: auto !important; } .factuur .kolom, .offerte .kolom { display: none; } #offerte_header_container .add_pdf_blokken { opacity: 0; pointer-events: none; transition: .2s ease; } #offerte_header_container:hover .add_pdf_blokken { opacity: 1; pointer-events: all; } #offerte_footer_container { position: relative; } #offerte_footer_container .add_pdf_blokken { opacity: 0; pointer-events: none; transition: .2s ease; } #offerte_footer_container:hover .add_pdf_blokken { opacity: 1; pointer-events: all; } .edit_pdf_container { user-select: none; } .edit_pdf_container:hover, .edit_pdf_container:has(.is_dragging) { outline: 1px dashed rgb(var(--color-black), .5); } .edit_pdf_container .edit_pdf_blok.invalid { outline: 1px dashed rgb(var(--color-red)) !important; } .edit_pdf_container .edit_pdf_blok.invalid::after { content: "Dit blok wordt op elke pagina herhaald en staat te laag. Hierdoor kan het in de PDF buiten de pagina vallen. Verplaats het blok omhoog."; position: absolute; color: #fff; background-color: rgb(var(--color-red)); bottom: calc(100% + 6px); left: 0; font-size: 8px; font-weight: 500; border-radius: 12px; text-align: center; padding: 6px 12px; } .edit_pdf_container .edit_pdf_blok .left, .edit_pdf_container .edit_pdf_blok .top { opacity: 0; pointer-events: none; } .edit_pdf_container:not(:has(.is_dragging)) .edit_pdf_blok:hover .left, .edit_pdf_container:not(:has(.is_dragging)) .edit_pdf_blok:hover .top, .edit_pdf_container .edit_pdf_blok.is_dragging .left, .edit_pdf_container .edit_pdf_blok.is_dragging .top { opacity: 1; z-index: 150; } .edit_pdf_container .edit_pdf_blok .left { height: 1px; position: absolute; border-bottom: 1px dashed rgb(var(--color-teal)); top: 50%; left: 0; transform: translate(-100%, -50%); } .edit_pdf_container .edit_pdf_blok .top { width: 1px; position: absolute; border-left: 1px dashed rgb(var(--color-teal)); left: 50%; top: 0; transform: translate(-50%, -100%); } .edit_pdf_container .edit_pdf_blok .left p { position: absolute; color: rgb(var(--color-teal)); left: 50%; bottom: 0; padding: 1px 3px; background-color: #fff; border-radius: 12px; font-size: 8px; font-weight: 500; transform: translate(-50%); } .edit_pdf_container .edit_pdf_blok .top p { position: absolute; color: rgb(var(--color-teal)); left: 2px; top: 50%; padding: 1px 3px; background-color: #fff; border-radius: 12px; font-size: 8px; font-weight: 500; transform: translate(0, -50%); } .edit_pdf_container .edit_pdf_blok img { pointer-events: none; } .edit_pdf_container:hover .edit_pdf_blok { outline: 1px dashed rgb(var(--color), .0); cursor: grab; } .edit_pdf_container:not(:has(.is_dragging)) .edit_pdf_blok:hover, .edit_pdf_blok.active { outline: 1px solid rgb(var(--color)) !important; z-index: 99; } .edit_pdf_container .edit_pdf_blok .icon-btn { position: relative; transition: .1s ease; top: 0; opacity: 0; pointer-events: none; width: 21px; height: 21px; min-width: 0; } .edit_pdf_container .edit_pdf_blok .icon-btn i { font-size: 12px; } .edit_pdf_container .edit_pdf_blok .icon-btn:hover { top: 2px; } .edit_pdf_container:not(:has(.is_dragging)) .edit_pdf_blok:hover .icon-btn, .edit_pdf_container:not(:has(.is_dragging)) .edit_pdf_blok.active .icon-btn { opacity: 1; pointer-events: all; } .edit_pdf_container .edit_pdf_blok:hover .icon-btn:hover { border-color: rgb(var(--color)); } .edit_pdf_container .edit_pdf_blok.is_dragging { z-index: 999; outline: 1px solid rgb(var(--color)); } .edit_pdf_container .edit_pdf_blok .ui-resizable-handle { background-color: #fff; border: 1px solid rgb(var(--color)); border-radius: 12px; position: absolute; opacity: 0; } .edit_pdf_container:not(:has(.is_dragging)) .edit_pdf_blok:hover .ui-resizable-handle, .edit_pdf_container:not(:has(.is_dragging)) .edit_pdf_blok.active .ui-resizable-handle, .edit_pdf_container .edit_pdf_blok.is_dragging .ui-resizable-handle { opacity: 1; } .edit_pdf_container .edit_pdf_blok .ui-resizable-handle:hover { background-color: rgb(var(--color)); } .edit_pdf_container .edit_pdf_blok .ui-resizable-e { cursor: ew-resize; width: 5px; height: 30px; max-height: 80%; right: -3px; top: 50%; transform: translate(0, -50%); } .edit_pdf_container .edit_pdf_blok .ui-resizable-w { cursor: ew-resize; width: 5px; height: 30px; max-height: 80%; left: -3px; top: 50%; transform: translate(0, -50%); } .edit_pdf_container .edit_pdf_blok .ui-resizable-n { cursor: ns-resize; height: 5px; width: 30px; max-width: 80%; left: 50%; top: -3px; transform: translate(-50%); } .edit_pdf_container .edit_pdf_blok .ui-resizable-s { cursor: ns-resize; height: 5px; width: 30px; max-width: 80%; left: 50%; bottom: -3px; transform: translate(-50%); } .edit_pdf_container .edit_pdf_blok .ui-resizable-se { cursor: nwse-resize; height: 8px; width: 8px; right: -4.5px; bottom: -4.5px; } .edit_pdf_container .edit_pdf_blok .ui-resizable-sw { cursor: nesw-resize; height: 8px; width: 8px; left: -4.5px; bottom: -4.5px; } .edit_pdf_container .edit_pdf_blok .ui-resizable-ne { cursor: nesw-resize; display: none !important; height: 8px; width: 8px; right: -4.5px; top: -4.5px; } .edit_pdf_container .edit_pdf_blok .ui-resizable-nw { cursor: nwse-resize; height: 8px; width: 8px; left: -4.5px; top: -4.5px; } .edit_pdf_container .edit_pdf_blok .width_height { position: absolute; left: 50%; bottom: -20px; transform: translate(-50%); display: flex; opacity: 0; background-color: var(--bg-theme); padding: 1px 3px; border-radius: 12px; font-size: 8px; color: rgb(var(--color-teal)) } .edit_pdf_container:not(:has(.is_dragging)) .edit_pdf_blok:hover .width_height, .edit_pdf_container .edit_pdf_blok.is_dragging .width_height, .edit_pdf_container .edit_pdf_blok.active .width_height { opacity: 1; } .pdf_variabel { display: inline-block; position: relative; } .pdf_variabel::before { content: ""; position: absolute; width: 100%; left: 0; top: 0; border: 1px solid rgb(var(--color)); height: 100%; background-color: rgb(var(--color), .2); border-radius: 3px; } .pdf_blok_editor .note-editor.note-frame { display: flex; flex-direction: column; align-items: center; } .pdf_blok_editor .note-editor.note-frame .note-toolbar { flex-wrap: nowrap; background-color: var(--bg-theme); box-shadow: 0 0 9px #DBDBDB; min-width: 100%; width: fit-content; } .positie-overlay { opacity: 0; pointer-events: none; position: fixed; background-color: #3334; inset: 0; z-index: 1000; transition: .2s ease; } .positie-overlay.show { opacity: 1; } .uitgelicht { position: relative; z-index: 1001; outline: 2px solid rgb(var(--color)); pointer-events: all; box-shadow: 0 0 18px 0 #3338 !important; } .skeleton { overflow: hidden; position: relative; background-color: rgb(var(--color), .05) !important; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.8), transparent); transform: translateX(-100%); animation: shimmer 1.6s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } }