/* CSS Document */

:root { --bg-theme: #ffffff; --base-theme: #F8F7FA; --color-theme: #333333; --header-theme: #FAFAFA; }

.bg-theme { background-color: var(--bg-theme) !important; }
.bg-highlight { background-color: var(--header-theme); }
/* DARK */
body[data-system-mode="dark"].theme-system{ --bg-theme: #2F3349; --base-theme: #24283B; --color-theme: #D0CDE4; --header-theme: #3C3F56; --bg-menu: #2F3349; --color-menu: #D0CDE4; --modal-theme: #171925;  --color-border: 100, 100, 100; --color-sec: var(--color-light_blue); }
body.theme-dark{ --bg-theme: #2F3349; --base-theme: #24283B; --color-theme: #D0CDE4; --header-theme: #3C3F56; --bg-menu: #2F3349; --color-menu: #D0CDE4; --modal-theme: #171925; --color-border: 100, 100, 100; --color-sec: var(--color-light_blue); --color-text: 150, 150, 150 }
/* LIGHT */
body.theme-light { --bg-theme: #ffffff; --base-theme: #F8F7FA; --color-theme: #333333; --header-theme: #FAFAFA; --bg-menu: #ffffff; --color-menu: #333333; --modal-theme: #171925;}
body.theme-semi { --bg-theme: #ffffff; --base-theme: #F8F7FA; --color-theme: #333333; --header-theme: #FAFAFA; --bg-menu: #2F3349; --color-menu: #D0CDE4; --modal-theme: #171925;}

body .sidebar { background-color: var(--bg-menu); color: var(--color-menu) !important;  box-shadow: 0 3px 12px rgba(46, 43, 61, 0.14),0 0 transparent,0 0 transparent !important; }
body .sidebar-image-container { background-image: linear-gradient(var(--bg-menu), var(--bg-menu), transparent) }
body .sidebar .bottom-fade { background-image: linear-gradient(transparent, var(--bg-menu)) }
body .sidebar .nav-item { color: var(--color-menu) !important; }

body .header .box { background-color: var(--bg-menu); color: var(--color-menu); }
body .header .bg-light, body .header .tabel_kop { color: var(--color-menu) !important; background-color: var(--bg-menu); }
body .header .icon-btn > i { color: var(--color-menu); }
body .header input { color: var(--color-menu) !important; background-color: transparent; }
body .header input::-moz-placeholder { color: var(--color-menu) !important; opacity: .5; }
body .header input::placeholder { color: var(--color-menu) !important; opacity: .5; }
body .header a { color: var(--color-menu) !important; }

body[data-system-mode="dark"].theme-system .modal-header, body.theme-dark .modal-header {background: var(--bg-theme) !important;}
body[data-system-mode="dark"].theme-system .modal-header .btn-close, body.theme-dark .modal-header .btn-close{background: var(--bg-theme) !important;}
body[data-system-mode="dark"].theme-system .modal-header .btn-close::after, body.theme-dark .modal-header .btn-close::after {color: #fff !important; }
body[data-system-mode="dark"].theme-system .modal::after, body.theme-dark .modal::after {background-color: var(--modal-theme)!important; opacity: .6;}


body { color: var(--color-theme); height: 100vh; background: linear-gradient( 60deg, rgba(var(--color), .15) 0%, transparent 50%, rgba(var(--color), .15) 100% ), var(--base-theme) !important; }
body.login { background-image: linear-gradient(60deg, rgba(var(--color-ho-prim), .25) 0%, var(--base-theme) 40%, var(--base-theme) 60%, rgba(var(--color-ho-prim), .25) 100%); }
body#pdf_factuur, body#pdf_offerte { background-image: none !important; }


.hello-interior body .loading-screen { background-image: linear-gradient( 60deg, #d76f3940 0%, var(--base-theme) 50%, #d76f3940 100% ); }
.hello-interior body .loading-screen::after { border: 8px solid #d76f39; outline: 8px solid #f8b358; }

html { background-image: linear-gradient(60deg, rgba(var(--color-light_blue), .25) 0%, var(--base-theme) 40%, var(--base-theme) 60%, rgba(var(--color-light_blue), .25) 100%); }
html.pdf { background-image: none !important; }
html.hello-interior { background-image: linear-gradient( 60deg, #d76f3940 0%, var(--base-theme) 50%, #d76f3940 100% );  }
body .loading-screen { background: var(--base-theme); background-image: linear-gradient(60deg, rgba(var(--color-light_blue), .25) 0%, var(--base-theme) 40%, var(--base-theme) 60%, rgba(var(--color-light_blue), .25) 100%); color: var(--color-theme); }
body .loading-screen::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; border-radius: 60px; border: 8px solid rgb(var(--color-light_blue)); outline: 8px solid rgb(var(--color-sec)); transform: translate(-50%, -50%) scale(1); transition: .5s; animation: loading-screen-in 2s ease-in-out; }
body .loading-screen.hide::after { transform: translate(-50%, -50%) scale(0); }

@keyframes loading-screen-in {
    0% {transform: translate(-50%, -50%) scale(0); opacity: 0.5; }
    75% {transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
}

body .box { background-color: var(--bg-theme); color: var(--color-theme); box-shadow: 0 3px 12px rgba(46, 43, 61, 0.14),0 0 transparent,0 0 transparent !important; }
body.theme-dark .box, body[data-system-mode="dark"].theme-system .box, body.theme-dark .sidebar, body[data-system-mode="dark"].theme-system .sidebar { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14),0 0 transparent,0 0 transparent !important; }
body .bg-light { background-color: rgba(var(--color-border), .1) !important; color: var(--color-theme) !important; }
body .icon-btn > i { color: rgb(from var(--color-theme) r g b / 0.75); }
body .icon-btn > p { color: rgb(from var(--color-theme) r g b / 0.75); }
body input { color: var(--color-theme) !important; background-color: transparent; }
body .icon { color: var(--color-theme) !important; }
body input::-moz-placeholder { color: var(--color-theme) !important; opacity: .5; }
body input::placeholder { color: var(--color-theme) !important; opacity: .5; }
body a { color: var(--color-theme) !important; }
body .tabs li { color: var(--color-theme); }
body .tabs li.active { color: rgb(var(--color)); background-color: rgb(var(--color), .2); }
body .activiteiten-container2 { color: rgb(var(--color-theme)) !important; background-color: var(--header-theme) !important; }
/* body .activiteiten .activiteiten-container .activiteit { color: rgb(var(--color-theme)) !important; background: var(--bg-theme) !important; } */
body .activiteiten .activiteiten-container .activiteit.activiteiten-header { color: rgb(var(--color-theme)) !important; background: var(--header-theme) !important; }
body .checkbox i { background: var(--bg-theme) !important; }
body .checkbox.checked i { background: linear-gradient(60deg,rgb(var(--color)), rgb(var(--color), .6)), #fff !important; }
body .initials.overlap { border: 2px solid var(--bg-theme) !important; }
body .pill { background-color: var(--header-theme) !important; }

body[data-system-mode="dark"].theme-system .scheidingslijn textarea { border-bottom: 2px solid var(--color-theme) !important; overflow: hidden; }
body.theme-dark .scheidingslijn textarea { border-bottom: 2px solid var(--color-theme) !important; overflow: hidden; }