@font-face {
	font-family: "San Francisco";
	font-weight: 400;
	src: url("/public/fonts/sanfranciscodisplay-regular-webfont.woff");
  }
  
  @font-face {
	font-family: "San Francisco";
	font-weight: 800;
	src: url("/public/fonts/sanfranciscodisplay-bold-webfont.woff");
  }

.swiper-slide h1 
{
	backdrop-filter:blur(10px) !important;;
  -webkit-backdrop-filter: blur(10px);
	padding-bottom:2rem !important
}


/*@font-face {
    font-family: 'StandardFont';
    src: url('/public/fonts/Raleway/Raleway-VariableFont_wght.ttf')
}
@font-face {
    font-family: 'StandardFontBold';
    src: url('/public/fonts/Raleway/static/Raleway-ExtraBold.ttf')
}
*/

@font-face {
	font-family: "StandardFont";
	src: url("/public/fonts/sanfranciscodisplay-regular-webfont.woff");
  }
  
  @font-face {
	font-family: "StandardFontBold";
	src: url("/public/fonts/sanfranciscodisplay-bold-webfont.woff");
  }
.width-100
{
	width:100%;
}
.w-6-rem
{
	min-width:6rem;
	width:6rem;
}
.h-6-rem
{
	min-height:6rem;
	height:6rem;
}
.margin-left-auto
{
	margin-left:auto;
}
.flex-Start
{
	align-items:flex-start !important
}
.tag-blue
{
	color:var(--blue);
}
strong
{
	font-family:'StandardFontBold'
}
.permissions_grid
{
	border-collapse: separate !important;
	border-spacing:0 !important;
	
}
.fixed-bot
{
	z-index:2;
	bottom:0;
	padding-top: 3px !important;
	box-shadow: 0 -10px 10px #00000024;
	position:sticky;
}
.fixed-bot th,
.fixed-bot td 
{
	background:#fff;
	border-radius:0 !important;
	border-top: solid 1px var(--dark_blue) !important;
}
strong.green
{
	color:#4CAF50;
}
*
{
    user-select:none;
    font-family:StandardFont, Verdana, Geneva, Tahoma, sans-serif;
    box-sizing:border-box;
	--blue: #0088ff;
	--dark_blue: #000a3f;
	--bg_blue:#e9f4ff;
}
.subscription_edit
{
	gap:1rem;
}
.subscription_edit .flex-col 
{
	gap:.25rem;
}

.subscription_edit img 
{
	border-radius:0 !important;
	min-width:4rem !important;
	min-height:4rem;
}
.text-align-left
{
	text-align:left;
}
.z-index-11
{
	z-index: 199999999999991!important;
}
.swindow
{
	position: absolute;
	z-index: 11;
	font-family: inherit;
	border: 1px solid #00000036;
	overflow: hidden;
	display: flex;
	max-width: 100%;
	width: 100%;
	max-height: 100%;
	flex-direction: column;
	transition-timing-function: cubic-bezier(0.36, 0.55, 0.19, 1);
	min-width: 400px !important;
	border-radius: 10px;
}
.swindow_active 
{
	z-index:12;
	box-shadow:0 10px 10px rgba(0,0,0,0.2)
}
.swindow_active .inactive_click_protect
{
	display:none;
}
.swindow_transitioning
{
	transition:.2s;
}

.animate-scale
{
opacity:0;
  transform:scale(0.75);
}
.password-check.error
{
	background:#ff000017;
	color:#ec0000 !important;
	border:1px solid red !important;
}
.swindow.moving 
{
	opacity:.92;
	overflow:hidden;
	background:#fff;
}
.swindow.moving > .content 
{
	display:none;
}
.sWindow_active
{
	z-index: 12;
	box-shadow: 0px 2px 12px rgb(0 0 0 / 50%);
}
.swindow .sdj-content,
.swindow .container:not(.selectable-grid),
.swindow .container .card,
.swindow .card .form
{
    max-height: 100%;
    height: 100%;
    min-height: 100%;
}
[hideable="server"] .selectable-grid
{
	text-align: left;
	margin-bottom:0;
}

[hideable="server"] .selectable-grid img 
{
	min-width:4rem !important;
	max-width:4rem !important;
	width:unset !important;
	min-height:unset !important;
	max-height:unset !important;
	height:unset !important
}
.results .container 
{
	
	
	border-radius:1rem
}
.swindow > .content
{
    height: -webkit-fill-available;
    overflow: hidden;
}
.swindow .handle
{
	z-index: 22222222;position:
	absolute;
}
.swindow .handle_top 
{
	top:0;
	height:8px;
	width:100%;
	cursor:ns-resize;
}
.swindow .handle_bottom
{
	bottom: 0px;
	height: 8px;
	width:100%;
	cursor:
	ns-resize;
}
.swindow .handle_left
{
	left:0;
	height:100%;
	width:8px;
	cursor:ew-resize;
}
.swindow .handle_right
{
	right:0;
	height:100%;
	width:8px;
	cursor:ew-resize;
}
.swindow-oc
{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: auto;
    max-height: -webkit-fill-available;
    padding-right: 1rem;
}
.swindow-oc .content
{
	height:100%;
	min-height:100%;
	overflow: auto;
}
.swindow-oc .text
{
	top:0;
	z-index:99;
	flex-shrink: 1;
	margin-bottom: 1rem;
}
.swindow.max
{
	left:0 !important;
	top: 2.2rem !important;
	border-radius:0;
	height: calc(100% - 2.2rem);
	min-height: calc(100% - 2.2rem);
	width: 100%;
}
.underlay .swindow.max
{
	top: 0 !important;
	
}

.swindow .header
{
	color: #fff;
	display:
	flex;
	height: 2.8rem;
	align-items:
	center;
	justify-content:
	space-between;
	cursor: move;
	flex-shrink: 0;
	border: none !important;
	color: var(--dark_blue);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d9e9f9+0,ffffff+100&1+0,0.95+100 */
	background: -moz-linear-gradient(top, rgba(217,233,249,1) 0%, rgba(255,255,255,0.95) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(217,233,249,1) 0%,rgba(255,255,255,0.95) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(217,233,249,1) 0%,rgba(255,255,255,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9e9f9', endColorstr='#f2ffffff',GradientType=0 ); /* IE6-9 */
	max-width: 100%;
}

.swindow .controls
{
	display:
	flex;
	font-size: 1.2rem !important;
	height:100%;
	margin-left: auto;
	/* width: 10rem; */
	/* flex-shrink: 0; */
}
.swindow .heigh-header .controls 
{
	
	align-items:
	start;
}

.swindow .controls .control 
{
	display:
	flex;
	align-items:
	center;
	justify-content:
	center;
	width: 2.5rem;
	cursor:
	pointer;
	height: 2.5rem;
	/* background:var(--blue); */
	text-align:
	center;
	color: var(--dark_blue);
	/* color: #fff; */
	}

.swindow .controls .control:hover 
{
	color:var(--blue);
}

.swindow .controls .swindow_close:hover
{
	color:red;
}.swindow .header .icon

{margin: .75rem;font-size: 2rem;width: 1.75rem;height: 1.75rem;fill: #08f;align-items: center;display: flex;/* display: none; *//* width: 100%; */}
.swindow .header .icon img
{
	width:1.5rem;
	pointer-events:none;
}
.swindow .title
{
	display:
	flex;
	flex-shrink: 1;
	font-size: 1rem;
	font-family: 'StandardFontBold';
	width: auto;
	overflow: auto;
	text-align: left;
	color: var(--dark_blue);
	}
.swindow .inactive_click_protect
{
	width:100%;
	height:100%;
	left:0;
	top:0;
	position:absolute;
	z-index:2;
}
.ssWindow_active .inactive_click_protect
{
	display:none;
}
.selected_visible
{
	display: none !important;
}
.selected .selected_visible
{
	display: block !important;
}
h1,h4,
.sdb-bold,
.jconfirm-title-c,
.jconfirm-wizzard h1,
.jconfirm-wizzard h2,
.jconfirm-wizzard h3,
.jconfirm-wizzard h4,
.swindow h1,
.swindow h2,
.swindow h3,
.jconfirm-wizzard h3,
.jconfirm-wizzard h4,
.toast-title,
.step-number,
.user-network strong
{
    font-family:
    'StandardFontBold';
}
.user-network span
{
	color:#0088ff;
}
.inschakelplan table h2 
{
	padding-top:2rem
}
.jconfirm-title-c .jconfirm-title
{
	display:inline-flex !important;
	align-items:center;
	gap:.5rem;
	font-size:1.8rem !important;
}
.jconfirm-title-c img 
{
	width:2rem;
	display:inline-block;
	height:2rem;
}
.jconfirm-type-default
{
    padding: 2rem !important;
	padding-bottom:0 !important;
}
.jconfirm-box
{
	
	border-radius: 10px !important;
}
.sdj-buttons
{
	margin-top:1.5rem;
	margin-bottom:.5rem;
	display:flex;
	justify-content:end
}
.password_set
{
	display:block;
	width:100%;
	height:3rem;
	border:1px solid #000;
	margin: 1rem 0;
	padding:1rem;
	border-radius:5px;
}
.buttons button,
.buttons a 
{
	display:inline-flex;
	gap:.2rem;
	align-items:center;
}
.sdb
{
	cursor:pointer;
	padding:1rem !important;
	border-radius:2rem !important;
}
.buttons button:hover,
.container .card .left-side:hover
{
	box-shadow:none;
}
[swizzard-trigger-step].sdb-transparant
{
	padding-left:0 !important;
}
.sdb-transparant
{
	background:none;
}
.sdb-transparant:hover
{
	text-decoration:underline;
}
.sdb-blue
{
	background:var(--blue);
	color:#fff;
}

.sdb-blue:hover
{
	background:#44a7ff;
}
desktop .droparea
{
    position:fixed;
    width:100px;
    height:100px;
}
desktop .droparea.accept
{
    border-radius: 2px;
    background:#fff;
    opacity: .2;
}
.dragging
{
  transition: none;
    opacity:0.001;
}
.hidden
{
    display: none;
}
.desktop_wrapper
{
    padding:2rem;
    height: 100%;
}
html, body
{
    padding:0;
    margin:0;
    overflow:hidden;
    height:100%;
    width:100%;
}
#mainbg
{
	padding:0;
	margin:0;
	background-image: url('/public/img/wallpaper/winterwp.jpg');
	background-size: cover;
	background-position:center;
	overflow:hidden;
	height:100%;
	width:100%;
	transition:5s ease;
	position: absolute;
}

body
{
    display:flex;
    flex-direction:column;
}
.container_overflow::-webkit-scrollbar {
  display: none;
}
.container_overflow
{
    height: auto;
    overflow:auto;
}
.section_content img
{
	max-width:2rem;
	max-height:2rem;
	border-radius:100%;
}
.section_content h1 
{
	display:flex;
	align-items:center;
}
.invoicekeeper__activiteit_btn
{
	margin-left:
	auto;
	color: var(--dark_blue);
	text-decoration:
	underline;
	white-space: nowrap;
}
.invoicekeeper__activiteit_btn:hover
{
	text-decoration:none;
}
.app img 
{
    max-height:50px;
}
launchbar 
{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height: 53px;
    width:100%;
    border-bottom: 2px solid rgb(0 0 0 / 1%);
    top:0;
    left:0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0.4+100;Neutral+Density */
    background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.4) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.4) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
}
launchbar .launchbar img
{
    width:30px;
}
.extra-buttons
{
	display:flex;
	justify-content:flex-end;
	margin:1rem 0 ;
}
.extra-buttons a
{
	cursor:pointer;
}
.extra-buttons a:hover
{
	text-decoration:underline;
}
.launchbar
{
    height:100%;
}
.launchbar__button
{
    display:flex;
    cursor:pointer;
    z-index:233;
    justify-content:center;
    box-shadow: 0 -10px 10px #000;
    align-items:center;
    padding:0 10px;
    font-size:20px;
    height:100%;
    border:1px solid #485a6d;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
    background: rgb(69,72,77); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgb(7 62 114) 0%,rgb(0 42 75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.launchbar__button:hover,
.launchbar__button.active
{    background: linear-gradient(to top, rgb(7 62 114) 0%,rgb(0 42 75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
}
.launchbar__left__apps
{
    padding:0 45px;
    border-bottom:0;
}
.launchbar__left__apps .blue_logo
{
    display: none;
}
.launchbar__left__apps:hover .white_logo,
.launchbar__left__apps.active .white_logo
{
    display: none;
}
.launchbar__left__apps:hover .blue_logo,
.launchbar__left__apps.active .blue_logo
{
    display: block;
}
.launchbar__personal .launchbar__button
{
    background:none;
    border:none;
    box-shadow:none;
    padding:0 20px;
    color:#fff;
}
desktop
{
    color:#fff;
    position: relative;
    text-align:center;
    gap:20px;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-auto-flow: row;
}
.sidepanel .apps
{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content:flex-start;
    gap:20px;
    height: 100%;
    text-align:center;
}
desktop .app,
.sidepanel .apps .app
{
    cursor: pointer;
    border:1px solid transparent;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border-radius: 2px;
}
desktop .app
{
    position: fixed;
    transition: .3s ease-out;
    padding:10px;
    width: 100px;
    height:100px;
}
.sidepanel .apps .app
{
    width: 140px;
    padding:20px;
    height: 140px;
}
.sidepanel .apps .app > div
{
    pointer-events:none;
}
.center_holder
{
    background: #00000061;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color:#fff;
    padding:2rem;
    width:100%;
    MIN-height: 15rem;
    display:
    flex;
    align-items:
    center;
    justify-content:
    center;
    top:50%;
    left:50%;
    transform:
    translate(-50%, -50%);
    position:
    absolute;
    z-index: 2;
}
.login_sections
{
    display:flex;
    align-items:center;
    gap:2rem;
}
.login_sections .button-container
{
	font-size:2.5rem;
	display:
	flex;
	align-items:
	center;
	border-radius:5px;
	background: rgba(83, 83, 83, 0.4);
  -webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);padding:5px;
	padding-right:1rem;
}
.login_sections .button-container .button:hover 
{
	color:#2196f3;
	cursor:pointer;
}
.login_sections .float-container
{
	
	width:20rem !important;
}
.login_sections .float-container input 
{
	height: 65px;
	min-height: 65px;color:#fff;
	background: transparent;
}
.center_holder img
{
    width:8.5rem;
}
.center_holder h1
{
    margin:0;
	display:flex;
	gap: .75rem;
	font-size:1.5rem;
    margin-bottom:1rem;
}
desktop .app:hover
{
    border-color:#fff;
    background:#ffffff1a;
}
desktop .app .app__icon,
.sidepanel .apps .app .app__icon
{
    font-size: 2.2rem;
    text-shadow:0px 2px #000c52;
}
desktop .app .app__name,
.sidepanel .apps .app .app__name
{
    font-weight:900;
    text-shadow:0px 2px #000c52;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*margin: 0 -1000%; makes text overflow left and right*/
}
.sidepanel .apps .app .app__name,
.sidepanel .apps .app .app__icon
{
    text-shadow:none;
}
.swizzard__context
{
	min-width: 50rem !important;
	align-items:center;
	gap:1rem;
	font-size:1.5rem;
}
.swizzard__context .header-app-ico
{
	min-width:6rem;
	min-height:6rem;
}
.flex-row,
.flex-col
{
    display:
    flex;
}
.flex-end
{
	justify-content: flex-end !important;
}
.flex-start
{
	align-items:flex-start
}
.flex-row.center
{
	align-items:center;
}
.flex-col
{
    flex-direction:column;}
.align-center
{
    align-items:center;
}
.selectable-grid .flex-row.center
{
	gap:1rem;
}

.compact-pop
{
	padding:2rem;
	text-align:center;
	gap:2rem;
	color:var(--dark_blue);
}
.compact-pop .iconify 
{
	font-size:2rem;
}
[unhide="mailprovider"] .iconify
{
	font-size:1.3rem !important;
}
.background-milk-glass
{
	background-color: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(55px);
	-webkit-backdrop-filter: blur(55px);
	height: 100%;
}
.background-soft-milk-glass
{
	background-color: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(55px);
	-webkit-backdrop-filter: blur(55px);
}
.background-soft-black-glass
{
	background-color: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(55px);
	-webkit-backdrop-filter: blur(55px);
}
.background-white
{
	background:#fff;
}
.underlay
{
	left:0;
	top: 2.2rem;
	width:100%;
	background: #00000026;
	max-height: 100vh;
	height: 100vh;
	position: fixed;
	z-index: 11;
}
.background-milk-glass-2
{
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(55px);
  -webkit-backdrop-filter: blur(55px);
}
.tooltip,
.contextmenu
{
    border-radius:5px;
    position:absolute !important;
}
.margin-right-0
{
	 margin-right: 0 !important;
}
.tooltip
{
    background:rgba(0,0,0,0.8);
    border:1px solid #fff;
    padding:5px 10px;
	margin-right:1rem;
    color:#fff;
    pointer-events:none;
    z-index:2200000000;
}
[element="tooltip"]
{
    opacity:0;   
    transition:.2s;
}
.untransparant
{
    opacity:1;
}
[element="sidepanel"]
{
    height:100%;
    position:absolute;
    z-index:22000;
}
[element="sidepanel"]
{
    height: calc(100% - 50px);
    top:50px;
    overflow: hidden;
    color: #fff;
    background: #082546;
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}
[element="sidepanel"].right
{
    right:0 !important;
}
[element="sidepanel"].left
{
    left:0 !important;
}
.sidepanel-content
{
    box-sizing: border-box;
    min-width: 500px;
    height: 100%;
    padding: 20px;
    overflow: hidden;
    flex-direction: column;
    display: flex;
}
.sidepanel__header
{
    margin-bottom:20px;
}
.sidepanel__header h1 
{    
    padding:0;
    margin:0;
    
}
.contextmenu
{
    background:#fff;
    padding:5px 0 ;
    border:1px solid #001480;
    z-index:22000;
    box-shadow: 0 5px 10px rgb(0 0 0 / 50%);
}
.contextmenu-content
{
    display:flex;
    flex-direction:column;
    cursor:pointer;
}
.contextmenu-content a 
{
    font-weight:900;
    padding:10px;
}
.contextmenu-content a:hover, .entity-create .btn:hover, .next_button:hover
{
    color:#fff;
    background: #0969da !important;
}
.add-item-pop:hover
{
	text-decoration:none;
	cursor:pointer;
}
.context_underlay,
.sidepanel_underlay
{
    z-index:9999;
    left:0;
    top:0;
    position:fixed;
    width:100%;
    height:100%;
}
.sidepanel__header
{
    position: sticky;
    top:0;
}
.sidepanel__header .search
{
    margin-top: 2rem;
    border-radius:2px;
    padding:.5rem;
    padding-left:2rem;
    background: #fff;
    color: #222;
    border-radius: 1rem;
    position:relative;
}
.sidepanel__header .search:before
{
    position:absolute;
    left:.5rem;
    content: '\f002';
    font-Weight:900;
	font-family: "Font Awesome 5 Free";
}

main {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #090707;
}
.note-blue
{
	background:#e6f5ff;
	border:1px solid var(--blue);
	border-left-width:5px;
	padding:1rem;
	color:var(--blue);
	border-radius:4px;
	margin:1rem 0 ;
}
.note-blue h1 
{
	font-size:1.3rem;
	padding:0;
	margin:0;
	margin-bottom:1rem;
}
.note-blue h1 i 
{
	margin-right:.5rem;
}
mainloader,
secundarloader
{
    position: absolute;
    display: none;
    align-items:
    center;
    gap:.75rem;
    padding:0.4rem 1rem .4rem .75rem;
    font-size:1.2rem;
    z-index: 14;
    left:50%;
    top:50%;
    transform:
    translate(-50%, -50%);
    margin:
    auto;
    background:#fff;
    box-shadow:0 0px 50px
    rgba(0,0,0,0.75);
    border-radius:4px;
}

.swindow mainloader
{
	position:relative !important;
	box-shadow:none;
	background:none;
	left:unset;
    font-size:1rem;
	color:#000a3f
}
.swindow .placeholder-message
{
	background:#c7dcf1;
	padding:1rem;
	color:#12395f;
	margin:1rem 0;
	border-radius:1rem;
	align-items:center;
	flex-direction:row;
	gap:1rem;
}
.swindow .placeholder-message .iconify 
{
	font-size:3rem;
}
secundarloader
{
	display:none;
	font-size:3rem;
	padding:1rem !important;
	background:#000000a8;
	color:#fff;
}
.dank-ass-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform:rotate(28.5deg) scale(-0.8);
}
.dank-ass-loader .row {
    display: flex;
}
.arrow {
    width: 0;
    height: 0;
    margin: 0 -6px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 21.6px solid #005aa1;
    animation: blink 1.2s infinite ;
}
.arrow.down {
    transform: rotate(180deg);
}

.arrow.inner-1 {
    animation-delay: -0.2s;
}
.arrow.inner-2 {
    animation-delay: -0.4s;
}
.arrow.inner-3 {
    animation-delay: -0.6s;
}
.arrow.inner-4 {
    animation-delay: -0.8s;
}
.arrow.inner-5 {
    animation-delay: -1s;
}
.arrow.inner-6 {
    animation-delay: -1.2s;
}
[parent-id]
{
  /* max-height:1000px; */
  transform: scaleY(1);
  padding:0;
  margin:0;
  transform-origin: top right;
}
.fade-in
{
	animation: fade-in 1s ease;
}
.fade-scale-out
{
  transform: scaleY(0);
  max-height:0;
  padding:0;
  margin:0;
  transition: padding 1000ms ease,max-height 1000ms ease, transform 600ms ease 400ms, margin 1000ms ease;
}
@keyframes fade-in {
    0%
    {
        opacity:0;
    }
    
    100%
    {
        opacity:1;
    }
}
@keyframes blink {
    0%
    {
        border-bottom: 21.6px solid #0078d7;
    }
    
    100%
    {
        border-bottom: 21.6px solid #ddd;
    }
}
@keyframes rotate 
{
        0%
        {
            transform:rotate(28.5deg) scale(-1.1);
        }

        10%
        {
            transform:rotate(28.5deg) scale(-0.8);
        }
}
.dank-ass-loader .outer
{
    display:none;
}

.float-container {
	box-sizing: border-box;
	padding: 0px 12px;
	height: 65px;
	position: relative;
	width:100%;
	border-radius:.25rem;
	}
  .float-container input {
	border: none;
	font-size: 16px;
	  color:#fff;
	outline: 0;
	padding: 25px 0 10px;
	width: 100%;
	}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active
{
	box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
}

.swindow input:-webkit-autofill,
.swindow input:-webkit-autofill:hover, 
.swindow input:-webkit-autofill:focus, 
.swindow input:-webkit-autofill:active{

	color:#000 !important;
}
input:-webkit-autofill 
{       
	transition: all 0s 50000000s;     
}
.sdj-content .float-container input 
{
	color:#000;
}
.sdj-content input:-webkit-autofill,
.sdj-content input:-webkit-autofill:hover, 
.sdj-content input:-webkit-autofill:focus, 
.sdj-content input:-webkit-autofill:active{
    box-shadow: 0 0 0 30px #052b4a inset !important;
    -webkit-box-shadow: 0 0 0 30px #052b4a inset !important;
	-webkit-text-fill-color: #000 !important; 
}
.float-container input::-webkit-input-placeholder
{
	 color: transparent !important;
}

.float-container input:-moz-placeholder
{
	 color: transparent !important;
}
.float-container input::-moz-placeholder
{
	 color: transparent !important;
}
.float-container input:-ms-input-placeholder
{
	 color: transparent !important;
}
.float-container.active input::-webkit-input-placeholder
{
	 color: #aaa !important;
}

.float-container.active input:-moz-placeholder
{
	 color: #aaa !important;
}
.float-container.active input::-moz-placeholder
{
	 color: #aaa !important;
}
.float-container.active input:-ms-input-placeholder
{
	 color: #aaa !important;
}
.float-container label {
	font-size: 18px;
	position: absolute;
	transform-origin: top left;
	transform: translate(0, 18px) scale(1);
	transition: all 0.1s ease-in-out;
	/** active label */
	pointer-events: none;
}
  .float-container.active label {
    transform: translate(0, 7px) scale(0.75);
    color: var(--blue);
	font-family: 'StandardFontBold'
}

secundarloader,
cursorloader,
.loader .loadicon
{
	/* position:absolute; */
	z-index:999999;
    display: none;
}
cursorloader
{
	position:absolute !important;
	z-index:999999999999999;
}
.loader.loading > .button 
{
	display:none;
}
secundarloader.loading,
cursorloader.loading,
.loader.loading .loadicon
{
    display: flex !important;
}
.loader.loading > svg 
{
	display:none;
}
.hover-animate-left
{
	cursor:pointer;
}
.hover-animate-left:hover
{
	
	animation: animate-left 1s infinite;
}



@keyframes animate-left 
{
	0%
	{
		transform:translateX(-5%);
	}

	10%
	{
		transform:translateX(-25%);
	}
}

.errorAnim {
	-webkit-animation: shake .5s ease-in-out;
	animation: shake .5s ease-in-out;
  }
  @-webkit-keyframes shake {
	0% {
	  -webkit-transform: translateX(0);
	}
  
	20% {
	  -webkit-transform: translateX(-10px);
	}
  
	40% {
	  -webkit-transform: translateX(10px);
	}
  
	60% {
	  -webkit-transform: translateX(-10px);
	}
  
	80% {
	  -webkit-transform: translateX(10px);
	}
  
	100% {
	  -webkit-transform: translateX(0);
	}
  }
  @keyframes shake {
	0% {
	  transform: translateX(0);
	}
  
	20% {
	  transform: translateX(-10px);
	}
  
	40% {
	  transform: translateX(10px);
	}
  
	60% {
	  transform: translateX(-10px);
	}
  
	80% {
	  transform: translateX(10px);
	}
  
	100% {
	  transform: translateX(0);
	}
  }
cursorloader
{
	position:absolute;
	font-size:3rem;
	color:#fff;
}
.sdj-content .avatar
{
	border-radius:100%;
	max-height:5rem;
	width:5rem;
	margin-bottom:1rem;
}
.sdj-content .float-container
{
	border: 1px solid black;
	margin-top:2rem;
}
.jconfirm-wizzard .jconfirm-content
{
	padding: 0.75rem;
    background: #00000038;
	border-radius: 10px !important;
}
.jconfirm-
{
    background: #00000055;
    /* backdrop-filter: blur(4px); */
}
.jconfirm-wizzard .jconfirm-holder
{
	padding:0 !important;
	
}
.jconfirm-wizzard .jconfirm-box 
{
	background:none!important;
    padding: 0 !important;
}
.jconfirm-wizzard .jconfirm-title-c
{
	display:none !important;
}
.jconfirm-wizzard .jconfirm-content-pane
{
	margin:0!important;
	box-shadow:10px 10px 10px #000 !important;
	
}

.sdi-large
{
	font-size:15rem;
height: auto;}
.sdc-blue
{
	color:#0088ff;
}
.sdc-green
{
	color:#4CAF50;
}

.sdj-content
.sdc-green
{
	margin-right:1rem;
}
*
{
	box-sizing:border-box !important;
}
.swindow.moving .spop
{
	display:none;
}
.swindow.moving .header
{
	border-bottom:1px solid #000a3f14;
}
.spop__arrow 
{
	width:15px;
	height:15px;
	position:
	absolute;
	transform:
	rotate(-45deg);
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.blue_spop .bottom.right .spop__arrow
{
	left:20px;
	top:-7px;
}
.blue_spop .spop
{
	background:var(--blue) !important;
	color:#fff;
}
.blue_spop .spop .spop__header__title,
.blue_spop .spop__header__close,
.blue_spop .spop__footer__close
{
	color:#fff !important;
}
.blue_spop .spop__footer__close:hover
{
	background:#fff !important;
	color:var(--blue) !important;
}
.blue_spop .spop__arrow
{
	background:var(--blue);
}
.bottom .spop__arrow
{
	top: 20px;
}
.top .spop__arrow
{
	bottom: 20px;
}

.left .spop__arrow
{
	right: -7px;
}
.right .spop__arrow
{
	left: -7px;
}

.task_selector .bottom .spop__arrow,
.task_selector_onbeschikbaarheid  .bottom .spop__arrow
{
	top: -7px;
}

.task_selector .top .spop__arrow,
.task_selector_onbeschikbaarheid  .top .spop__arrow
{
	bottom: -7px;
}
.task_selector .left .spop__arrow,
.task_selector_onbeschikbaarheid  .left .spop__arrow
{
	right: 1rem;
}
.task_selector .right .spop__arrow,
.task_selector_onbeschikbaarheid  .right .spop__arrow
{
	left: 1rem;
}
.pac-container
{
  z-index: 999999999999999999;
}

@media screen and (max-device-width: 800px) 
{
	.login_sections
	{
		justify-content:center;
		flex-direction:column;
	    height: auto;
	}
	.login_sections .section_content
	{
		width:90vw;
	}
	

	.toast-top-center,#toast-container.toast-top-center > div
	{
		box-sizing:border-box;
		max-width:100vw;
	}

	.jconfirm-box
	{
		white-space:word-wrap;
		max-width:95vw;
	}
}

.user-network strong 
{
	align-items:center;
	display:flex;
	gap:.5rem;
}
.user-network .iconify{
	background:#4CAF50;
	border-radius:100%;
	color:#fff;
	font-size:1.5rem;
	padding:.15rem;
}
.btw_info
{
	width: 100%;
	text-align: center;
	display: block;
	padding-bottom: 0.5rem;
}
.standalone .btw_info
{
	margin-top: -0.5rem;
}
.filetype_holder
{
	position:relative;
	
}
.filetype_holder .iconify
{
	color:#0c1b6f;
}
.filetype_holder__text
{
	position:absolute;
	color:#fff;
	font-family: 'standardFontBold';
	padding: 0 .5rem;
	top:50%;
	left:50%;
	white-space:nowrap;
	transform:translate(-50%, -50%);
}
.werkplaats_icon
{
	padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid #fff;
    box-shadow: 0 0px 10px rgb(0 0 0 / 20%);
}
.form-radios
{
	margin-top:.5rem;
	gap:1rem;
	flex-wrap: wrap;
}
.form-radios .radio 
{
	color:#ccc;
	cursor:
	pointer;
	border:1px solid #aaa ;
	border-radius:5px;
	padding:1rem;
	width: auto;
	display: flex;
	align-items: center;
	gap: .5rem;
	box-shadow: inset 0 2px 2px rgba(0,0,0,0.1)
}
.form-radios .radio .iconify 
{
	font-size:2rem;
}
.form-radios .radio:hover
{
	color:#555;
}
.form-radios .radio.selected
{
	color:var(--blue);
	border-color: var(--blue);
}
.form-radios .radio.selected span 
{
	font-family:'standardFontBold';
}

.form-radios .radio .iconify,
.form-radios .radio span 
{
	 pointer-events: none
}
.counter-tag-blue
{
	background:var(--blue);
	color:#fff;
	width:1.2rem;
	border-radius:100%;
	text-align:center;
	margin-left:.5rem;
	opacity:.77;
	font-family:'standardFontBold'
}
#particles-js
{
	    top: 0;
	    position: absolute;
	    height: 100%;
	    width: 100%;
	    z-index: 0;
	    transition: 5s;
}
.swindow .wb-header
{
		color: var(--dark_blue);
	-webkit-backdrop-filter: blur(12px);
	height:50px !important;
	backdrop-filter: blur(12px);/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d9e9f9+0,ffffff+100&1+0,0.95+100 */
	background: -moz-linear-gradient(top, rgba(217,233,249,1) 0%, rgba(255,255,255,0.95) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(217,233,249,1) 0%,rgba(255,255,255,0.95) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(217,233,249,1) 0%,rgba(255,255,255,0.95) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9e9f9', endColorstr='#f2ffffff',GradientType=0 ); /* IE6-9 */
}
.swindow .wb-control
{
	color:red !important;
}
*{
    padding:0;
    margin:0;
}
.wid_tag 
{
	position:absolute;
	top: 1.65rem;
	z-index:10;
	color:#fff;
	font-size: 1.5rem;
}
.leaderboaordMoreBtn
{
	position:absolute;
	height: 4rem;
	left: 0;
	bottom: 0;
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	color:#fff;
	background: #393f4c;
	border-top: 1px solid #fff;
	width: 100%;
}
.leaderboaordMoreBtn.active:hover
{
	color:var(--blue);
	cursor:pointer;
}
#notifzone
{
	position:absolute;
	right: 31rem;
	top: .5rem;
	width:27rem;
	height:100%;
}
.stats_window__leaderboard
{
	overflow:auto;
	padding-bottom: 4rem;
	height: 39rem;
	min-height: 39rem;
	max-height: 39rem;
	scroll-behavior: smooth;
	position: relative;
}
.stats_window__leaderboard::-webkit-scrollbar {
  display: none;
}

.phone_wrapper img 
{
	width:1.5rem;
	height:1.5rem;
}
.waardebon_activiteit_header_count
{
	pointer-events:none;
}
.phone_wrapper
{
	display:flex;
	align-items:center;
	gap:.5rem;
	font-size:1rem;
    border:1px solid #9e9e9e !important;
	margin-top:.5rem;
}
.phone_wrapper input 
{
	border:none;
	margin:0;
	box-shadow:none;
	padding-left:4rem !important;
	background:none;
	font-size:1rem;
}
.phone_wrapper .country 
{
	position:absolute;
	display:flex;
	pointer-events:none;
	align-items:center;
	gap:.5rem;
	
}
.waardebonnen_artikellen__artikel__editable
{
	padding:5px;
	border:1px solid #fff;
}
.waardebonnen_artikellen__artikel__editable.editable img,
.waardebonnen_artikellen__artikel__editable.editable p,
.waardebonnen_artikellen__artikel__editable.editable .inputlike,
.waardebonnen_artikellen__artikel__editable.editable h2
{
	outline:none;
}
.waardebonnen_artikellen__artikel__editable.editable .inputlike
{
	background:none;
}
.waardebonnen_artikellen__artikel__editable.editable:hover
{
	transform:scale(1.02);
	background:none;
}
.waardebonnen_artikellen__artikel__editable.editable
{
	cursor:pointer;
	border: 1px dashed #2196F3;
	background: #e6f4ff;
	border-radius:5px;
}
.inputlike
{
	background: #f9f9f9;
	width: auto;
	padding: 0.5rem;
	border-radius: 5px;
	font-family: 'StandardFontBold';
}
.inputlike:before
{
	content: '\20AC';
}
.invoices__activity__tracker__action__icon img 
{
	width: 3rem;
	height: 3rem;
	min-width: 3rem;
	border-radius:100%;
	min-height: 3rem;
}
.loader
{
	align-items:center;
	display:flex;
}
.autosync::before
{
	content:'';
	height:8px;
	display:block;
	border-radius:100%;
	width:8px;
	border:1px solid;
	background:rgb(171 239 93);
	position:relative;
  animation: flickerAnimation 2s infinite;
	left:0;
}


@keyframes flickerAnimation {
  0%   { opacity:1; }
  45%   { opacity:1; }
  50%  { opacity:0; }
  70%  { opacity:1; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(171,239, 93, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}
.onbeschikbaarheid__pop
{
	min-height: 16rem;
	height: -webkit-fill-available;
	padding-top: .5rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	background: #fff;
	padding: 1rem;
}
.onbeschikbaarheid__pop > .flex-row
{
	gap:0 !important;
	border-radius:5px;
	overflow:hidden;
}
.onbeschikbaarheid__pop .select-box 
{
	background:#eee;
	color:#777;
	padding:1rem;
	display:flex;
	position:relative;
	align-items:center;
	gap:.5rem;
	width:100%;
}
.onbeschikbaarheid__pop .select-box:first-child
{
	border-radius: 5px 0 0 5px;
}
.onbeschikbaarheid__pop .select-box:last-child
{
	border-radius: 0 5px 5px 0;
}
.onbeschikbaarheid__pop .select-box.selected 
{
	border:#2196F3 1px solid;
	color:#fff;
}
.onbeschikbaarheid__pop > .flex-row
{
	gap:1rem;
}
.onbeschikbaarheid__pop .flex-row .flex-col
{
	width:50%;
}
.onbeschikbaarheid__pop .flex-row .flex-col .flex-row
{
	align-items:center;
	justify-content:flex-start !important
}
.onbeschikbaarheid__pop .flex-row:first-child
{
	border-right:1px solid #e4e4e4;
	padding-right:1rem;
	height:100
}
.onbeschikbaarheid__pop .flex-row
{
	gap:.5rem;
}
.onbeschikbaarheid__pop .flex-row select
{
	border-color:#777;
	border-radius:0;
}
.onbeschikbaarheid__pop .flex-row .flex-col .switch
{
	margin-left:-.6rem;
}
.easepick_onbeschikbaarheid_container
{
	border:1px solid #777;
	padding-left:0;
	position:relative;
	display:flex;
	align-items:center;
}
.easepick_onbeschikbaarheid_container input 
{
	left:0;
	padding:.5rem;
	width:100%;
	outline:none;
	padding-left:2rem;
	border:none;
}
.onbeschikbaarheid__pop textarea
{
	min-height:3rem;
}
.easepick_onbeschikbaarheid_container .iconify
{
	position:absolute;
	left:.5rem;
	
}
.task_selector_onbeschikbaarheid .spop__footer
{
	display:none !important;
}

.no_results .mailmessage_preview
{
	background:#fff;
	padding:1rem;
	margin-bottom: .5rem;
	border: 1px solid #eee;
}
.no_results .message_attachment:hover
{
		box-shadow:none !important;
	border:1px solid #eee !important;
}
.werkplaats_img
{
	width:6rem;
	min-width:6rem;
	min-height:6rem;
	height:6rem;
	font-family:
	'standardFontBold';
	border-radius: 17px;
	border: 1px solid #aaa;
	display:
	flex;
	align-items:
	center;
	justify-content:
	center;
	text-align:
	center;
}
.width-100
{
	width:-webkit-fill-available !important;
}
#notifications_holder.inactive 
{
	pointer-events:none;
}
.app-unfound
{
	width:10rem;
	height:10rem;
}
.password-check
{
	width:100%;
	border-radius: 2rem ! important;
	height: 3rem! important;
	border: none !important;
	background: #00000014;
	padding:1rem
;
	box-shadow: none !important;
}
.swindow .btns
{
	width:100%;
	justify-content:flex-end;
}
.swindow .btns .btn
{
	cursor:
	pointer;
	padding: .45rem 1rem;
	height:3rem;
	gap: .5rem;
	display: flex;
	align-items: center;
	border-radius:2rem;
}
.swindow .image-container
{
   width: 10rem;
   height: 10rem;
   min-height: 10rem;
   position:
   relative;
   overflow: hidden;
   border-radius: 100%;
   padding: 1rem;
}
.image-container img
{
   width: 100%;
   height: auto;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
.center
{
	text-align:center;
}
.swindow .btns .btn.btn-transparant:hover
{
	text-decoration:underline
}
.swindow .btns .btn.btn-blue
{
	background:var(--blue);
	color:#fff;
	font-family: 'standardFontBold'
}
.swindow .btns .btn.btn-transparant-reverse
{
	text-decoration:underline
}
.swindow .btns .btn-red
{
	background: aliceblue;
	color:#fff;
	font-family: 'standardFontBold'
}

.el_back
{
	color:
	var(--blue);
	gap:.25rem;
	font-weight:900;
	display:
	flex;
	align-items:
	center;
	padding: .5rem 0;
	cursor: pointer;
}
.el_back:hover
{
	text-decoration:underline
}
maincontent
{
	/* height: 100vh; */
	/* width:100vw; */
	z-index: 2;
}
.swiper-slide
{
	position:relative;
}
#Waardebonnencentrum_main_swindow .swiper-slide
{
	background:#e8e8e8;
	border-radius:1rem;
	padding:1rem 5rem;
}
.slide-informational
{
	display:
	block;
	z-index:300000000;
	position:
	absolute;
	font-size:.65rem;
	
	left:0;
	bottom:0;
	width:100%;
}
.slide-informational h1 
{
	background: #bcbcbc8c !important;
	backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
	font-weight:400 !important;
	color:	#fff;
}
.inschakelplan.app-information > .app_grid__tabs__tab__apps__app:first-child
{
	position:
	sticky;
	backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
	height: 140px;
	z-index: 3;
	align-items: center;top:0;
}
.inschakelplan
{
	height:100%;
	overflow:auto;
	background:#fff;
}
.inschakelplan table h3.populairst
{
	    
	background: #fff;
    color: var(--dark_blue);
    position: absolute;
    padding: 0.5rem 1.5rem;
    top: -12px;
    border-radius: 1rem;
    text-transform: uppercase;
    right: 0;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
}
.new_price
{
	color:red;
	font-family:'standardFontBold';
}
.new_price.price_1
{
		font-size:1.1rem;
}
.new_price.price_2
{
		font-size:1.3rem;
}
.inschakelplan table
{
	padding:1rem;
}
.app_grid__tabs__tab__apps__app__section
{
	margin: 0 2rem;
	margin-top: 0;
	padding-bottom: 2rem;
	box-sizing: border-box !important;
	border-bottom: 1px solid #ddebf9;
}
.app_grid__tabs__tab__apps__app__section h1
{
    position: sticky;
    top: 140px;
    padding: .5rem 0;
    z-index: 2;
    backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
    background: rgb(255 255 255 / 95%);
}
.app_grid__tabs__tab__apps__app__section table 
{
	padding:0;
}
.inschakelplan > .app_grid__tabs__tab__apps__app
{
	padding:2rem;
	border-top:1px solid #ebeef0;
}

.inschakelplan table
{
	margin:1rem 0  !important;
}
.inschakelplan table td
{
	background:var(--bg_blue);
}
.inschakelplan table td:nth-child(2)
{
	transform:
	scale(1.2);
	border:4px solid #fff;
	border-bottom:0;
	border-top:0;
	z-index:1;
	background: var(--dark_blue);
	color:#fff;
}
.inschakelplan table tr:last-child td
{
	border-radius: 0 0 1rem 1rem;
}
.inschakelplan table tr:first-child td
{
	border-radius:1rem 1rem 0 0 ;
	position: relative;
}
.inschakelplan .promo_row h4,
.inschakelplan .promo_row h3
{
	color:
	red;
	z-index: 2;
	/* border:1px solid; */
	display:
	inline-block;
	padding:.3rem 1rem;
	border-radius:25px;
}

.inschakelplan .promo_row td 
{
	padding:0;
}
.inschakelplan table
{
	text-align:
	center;
	margin:
	auto;
	width: -webkit-fill-available;
}

.inschakelplan.standalone table
{
	margin: 1rem 4rem !important;
}
.inschakelplan table span.green
{
	margin-top:.2rem;
	color:#2fbe2f;
	display:block;
}
.inschakelplan table td 
{
	padding:1rem;
	text-align: center;
}
.inschakelplan table img 
{
	width:7rem;
}
.swindow_main_bg
{
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.app_grid
{
	height: 100%;
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display:grid;
	grid-template: 3.4rem 1fr / 15rem 1fr;
	color: var(--dark_blue);
}
.app_grid__controls
{
	grid-column: 1 / 4;
	padding:.85rem;
	height: 3rem;
	padding-top:0;
}
.app_grid__controls > .flex-row
{
	gap:.5rem;
	height:2.4rem;
	width:100%;
}
.app_grid__controls .abtn 
{
	height:2.4rem;
	display:
	flex;
	align-items:
	center;
	padding:12px;
	gap: .2rem;
}
.app_grid__controls .navigational
{
	display:flex;
	border: solid 1px #C8D2DC;
	overflow:hidden;
	min-width:5rem;
	border-radius:5px;
}
.swindow .search 
{
	width: -webkit-fill-available;
	display:
	flex;
	flex-grow: 3;
	align-items:
	center;
	position:
	relative;
}

.swindow .search input 
{
	padding-left:3rem;
	height:2.4rem;
	border: solid 1px #C8D2DC !important;
}
.swindow .search .iconify 
{
	position:absolute;
	left:1rem;
}
.abtns 
{
	display:
	flex;
	align-items:
	stretch;
	justify-content:
	stretch;
	width:
	fit-content;
	border-radius:5px;
	background:#c8d2dd;
	gap:1px;
}
.abtns 
{
	border: 1px solid #c8d2dd;
	overflow:hidden;
	max-height: 2.4rem;
	min-height: 2.4rem;
	height: 2.4rem;
	min-width: max-content;
}
.abtns .abtn 
{
	border:none;
	min-height: 100%;
	border-radius:0;
	display:flex;
	align-items:center;
}
.abtns .abtn:hover,
.abtns .abtn.hovered
{
	border:none;
}
.abtn.disabled,
.abtn.abtn-disabled
{
	color: #c8d2dc;
	background: white;
	cursor: not-allowed;
}
.color-black
{
	color:var(--dark_blue);
}
.color-red span
{
	color:red;
}
.abtn.disabled:hover,
.abtn.abtn-disabled:hover
{
	background: #fff;
}
.app_grid__controls .navigational .abtn 
{
	border:
	none;
	width:2.5rem;
}
.app_grid__controls .navigational.wide-btns .abtn 
{
	width:100%;
}
.app_grid__controls .navigational .abtn
{
	border-radius:0;    
	border-right: solid 1px #C8D2DC;
}
.app_grid__controls .navigational .abtn:last-child
{
	border:none
}
.app_grid__tabs,
.app_grid__tabs__tab
{
	height:100%;
	overflow:
	auto;
}

.app_grid__tabs__tab
{
	padding:0 1rem;
}
.app_grid__tabs__app > div 
{
	display:none;
}
.app_grid__tabs__app > div.active
{
	display:block;
}
.app_grid__tabs__tab__apps__app__meta
{
	display:flex;
	flex-direction:column;
}
.app_grid__tabs__tab__apps__app__meta span 
{
	color:#000a3f8c;
	margin-bottom: 2rem;
}

.color-green
{
	color: #4caf50 !important;
}
.color-purple
{
	color:purple;
}
.color-red
{
	color:red;
}
.color-blue
{
	color:var(--blue) !important
}
.hover-bg-red:hover
{
	background:red !important;
}
.hover-bg-red:hover .color-red
{
	color:#fff !important;
}
.margin-top-auto
{
	margin-top:auto;
}
.swindow .heigh-header
{
	min-height:8rem !important;
}
.swindow .extra-heigh-header
{
	min-height: 15rem !important;
}
.cursor-default
{
	cursor: default !important;
}
.app_grid__tabs__tab h1 
{
	margin-bottom:1rem;
}
.app__page_header 
{
	padding-bottom:1rem;
	gap:1rem;
}
.app__page_header .abtns .abtn 
{
	height:unset;
}
.abtn-green
{
	background: #00d775;
    background: -webkit-gradient(linear,left top,left bottom,from(#00d775),to(#00bd68));
    background: -webkit-linear-gradient(top,#00d775,#00bd68);
    background: -o-linear-gradient(top,#00d775 0,#00bd68 100%);
    background: linear-gradient(-180deg,#00d775,#00bd68)!important;
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
    color: #fff !important;
    font-family: 'standardFontBold';
}
.app__page_header h1
{
	align-items: center;
	margin:0;
	display: flex;
	overflow: hidden;
	gap: .5rem;
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.app_grid__tabs__tab__apps .empty
{
	background:#fff;
	background:var(--bg_blue);
	padding: 1rem;
	align-items: center;
	gap: 1rem;
	display: flex;
	outline: 1px solid var(--blue);;
}
.app_grid__tabs__tab__apps .empty .iconify
{
	font-size:3rem;
	color:var(--blue);
}

.app_grid__tabs__tab__apps
{
	padding:1px;
	margin: 1rem 0;gap:1px;
	display:
	grid;
	grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
}
.app_grid__tabs__tab__apps__app
{
	gap:1rem;
	display:
	flex;
	outline: 1px solid #EBEEF0;
	padding:1rem;
	background:#fff;
	cursor:
	pointer;
}

.app_grid__tabs__tab__apps__app .abtn 
{
	margin-top: auto;
	width:fit-content;
	gap: .25rem;
}
.app-information > .app_grid__tabs__tab__apps__app .abtns 
{
	margin: auto;
	margin-right: 0;
}
.app-information > .app_grid__tabs__tab__apps__app .abtns .abtn
{
	min-height: 2.08rem;
	margin-top: 0;
}
.app_grid__tabs__tab__apps__app:hover
{
	background:#e9f5ff;
}
.inschakelplan > .app_grid__tabs__tab__apps__app
{
	background: linear-gradient(to bottom, rgba(217,233,249,1) 0%,rgba(255,255,255,0.95) 100%);
}

.inschakelplan .app_grid__tabs__tab__apps__app span
{
	margin-bottom:1rem;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.app_grid__tabs__tab__apps__app__icon  .ico
{
	width: 3.5rem;
}
.inschakelplan.app-information > .app_grid__tabs__tab__apps__app:first-child  .ico
{
	width:5.5rem;
}
.app_grid__vertical_tabs 
{
	padding: 0 1rem;
	border-right:1px solid #dfe5e9;
	overflow-y: scroll;
}
.app_grid__vertical_tabs__tab
{
	padding:1rem;
	font-weight: 900;
	display: flex;
	flex-direction: row !important;
	align-items: center;
	gap: .5rem;border-radius:5px;
	margin-bottom:.5rem;
	color: var(--dark_blue);
	cursor:
	pointer;
	font-size:1rem;
}
.app_grid__vertical_tabs__tab.active
{
	color:#fff;
	font-family: 'standardFontBold';
	background:var(--blue);
}
.app_grid__vertical_tabs__tab .iconify 
{
	font-size:2rem;
	max-width:2rem;
	min-width:2rem;
}
.app_grid__vertical_tabs__tab:not(.active):hover
{
	background:#c7d8e8;
}
.app_grid__vertical_tabs__separator
{
	color:#000a3f59;
	margin:1rem 0
}
.abtn:hover, .abtn.hovered
{
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #edf4fc),color-stop(100%, #dee7f1));
    background-image: -moz-linear-gradient(#edf4fc,#dee7f1);
    background-image: -webkit-linear-gradient(#edf4fc,#dee7f1);
    background-image: linear-gradient(#edf4fc,#dee7f1);
	border: solid 1px #b3c0ce;
}
.abtn.active
{
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(100%, #f5faff),color-stop(0, #f0f5fa));
    background-image: -moz-linear-gradient(#f0f5fa, #f5faff);
    background-image: -webkit-linear-gradient(#f0f5fa, #f5faff);
    background-image: linear-gradient(#f0f5fa, #f5faff);

}
.border-radius-bottom-0
{
	border-radius: 5px 5px 0px 0px !important;
}
.abtn
{
	text-decoration:none;
	cursor:pointer;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f5faff),color-stop(100%, #f0f5fa));
	background-image: -moz-linear-gradient(#f5faff,#f0f5fa);
	background-image: -webkit-linear-gradient(#f5faff,#f0f5fa);
	background-image: linear-gradient(#f5faff,#f0f5fa);
	border: solid 1px #C8D2DC;
	border-radius:4px;
	height: 2.4rem;
	min-height: 2.4rem;
	max-height: 2.4rem;
	padding:7px;
	align-items: center;
	display:flex;
	color:var(--dark_blue);
	white-space:nowrap
}

.inschakelplan .app_grid__tabs__tab__apps__app .abtn span,
.abtn span.green,
.abtn span.blue,
.inschakelplan table .abtn span.green
{
	margin:0;
	color: #4caf50 ;
	font-weight:900;
}
.abtn span.blue
{
	color: #2196f3;
}
.inschakelplan table .abtn
{
	gap:.25rem;
	width: min-content;
	display: inline-flex;
	white-space: nowrap;
}
#desktop
{
	display:
	grid;
	align-items:
	center;
	justify-content:
	center;
	height: 100vh;
	width:100vw;
	position:
	absolute;
}
#system_bar
{
	grid-column: 1/ 3;
	background: rgba(83, 83, 83, 0.4);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(50px);
	min-width:100%;
	height:2.2rem;
	display:
	flex;
	align-items:
	center;
	justify-content:
	space-between;
	color:#fff;
	top: 0;
	left: 0;
	position: fixed;
	width: 100vw;
	/* padding: 0 1rem; */
	z-index: 100;
}
#notifications_holder,
#app_holder
{
	z-index:999;
	position:absolute;
	width:100%;
	height:100%;
}
#notifications,
#apps
{
	position:
	absolute;
	right:0;
	top: 2.26rem;
	height: calc(100vh - 2.2rem);
	width: 31rem;
	-webkit-backdrop-filter: blur(30px) saturate(1.5) brightness(0.8);
	backdrop-filter: blur(30px) saturate(1.5) brightness(0.8);
	background: rgba(50, 50, 50, 0.5);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%), 0 0 0 1px rgb(0 0 0 / 50%);
	color: #fff;
	transition:.2s ease-in-out;
	transform:
	translateX(100%);
}
#apps
{
	width: 34rem;
	overflow:hidden;
	right:unset;
	left:0;
	transform:translateX(-100%);
}
#notifications.in,
#app_holder #apps.in
{
	transform:translateX(0);
	height: -webkit-fill-available;
	display: flex;
	flex-direction: column;
}
#app_holder #apps .app 
{
	display:flex;
	flex-direction: column;
	align-items:center;
	gap:.5rem;
	height: 9rem;
	position:relative;
	width: 10rem;
}

#app_holder #apps .app > span 
{
  width: 7.5rem;
  margin-bottom: 0.6em;
  text-align: center;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
}
#app_holder #apps .app span.in-production
{
	position:absolute;
	top:3.25rem;
	width:auto;
	border-radius:1rem;
	padding: .1rem 1rem;
	font-family:'standardFontBold';
	color:orange;
	background:#0f0f0f;
}
#app_holder #apps .app img 
{
	height:5rem !important;
	min-height:5rem !important;
	width:5rem;
}
[launch-app],
[install-app]
{
	cursor:pointer;
}
[launch-app] img ,
[install-app] img
{
	transition:.1s ease;
	border-radius:1.2rem;
	
}
[launch-app]:hover img,
[install-app]:hover img
{
	transform:scale(1.075);
	box-shadow: 0 0px 15px rgba(255,255,255,0.75)
}
#app_holder .apps__scroller
{
	/* height: -webkit-fill-available; */
	padding-right:1rem;
	margin: 1rem;
	padding-top: 1rem;
	padding-bottom: 3rem;
	overflow-y:auto;
	overflow-x:hidden;
	gap:2rem 0;
	justify-content: start;
	align-items: start;
	display:grid;
	flex-wrap: wrap;
	display: flex;
	grid-template-rows: 9rem;
	grid-template-rows: fit-content(4%);
	grid-template-columns: 1fr 1fr 1fr;
}

#app_holder .apps__scroller::-webkit-scrollbar,
.notifications__scroller::-webkit-scrollbar{
  width: 15px;
}


/* Track */
#app_holder .apps__scroller::-webkit-scrollbar-track {
}

/* Handle */
#app_holder .apps__scroller::-webkit-scrollbar-thumb,
.notifications__scroller::-webkit-scrollbar-thumb{
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #AAAAAA;
}
#app_holder #apps
{
	border-top:0;
	/* padding-top: 2rem; */
}
.notifications__panels
{
	position: relative;
	height: 3.5rem;
	min-height: 3.5rem;
	max-height: 3.5rem;
	display: block;
	box-shadow: inset 0 -1px 0 0 rgb(255 255 255 / 15%);
}
.notifications__panels__selectors
{
	position: absolute;
    top: calc(50% - 13px);
    left: calc(50% - 120px);
    width: 240px;
    height: 26px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}
#apps .notifications__panels__selectors
{
	
    left: calc(50% - 225px);
    width: 450px;
}
.notifications__panels__selectors__selector
{
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	line-height: 26px;
	font-size: 14px;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	border-radius: 10px;
}
.notifications__panels__selectors__selector:not(.active)
{
	cursor:pointer;
}
.notifications__panels__selectors__selector.active
{
    background: rgba(255, 255, 255, 0.2);
	font-family:'standardFontBold';
    color: white;
}
.notifications__scroller
{
	height: calc(100% - 3.2rem);
	padding:1rem;
	overflow: auto;
	overflow-x: hidden;
}
.notifications__scroller h3 
{
	padding:1rem;
	font-family:'standardFontBold';
	font-size: 1.7rem;
}
#notifications .notification
{
	position: relative;
	padding: 1rem;
	gap: .5rem;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 15px rgb(0 0 0 / 5%), 0 2px 2px rgb(0 0 0 / 5%), inset 0 0 0 1px rgb(255 255 255 / 5%);
	border-radius: 10px;
	text-shadow: none;
	overflow: hidden;
	cursor: default;
	text-overflow: ellipsis;
	margin-bottom: 1rem;
	right: -31rem;
}
.notification_avatar 
{
	border-radius:100%;
	min-width:3rem;
	min-height:3rem;
	width:3rem;
	height:3rem;
	max-width:3rem;
	background: #ffffff;
	max-height:3rem;
}
.notification_avatar 
{
	margin-bottom:auto
}
.subject_avatar 
{
	min-width:2rem;
	min-height:2rem;
	width:2rem;
	height:2rem;
	max-width:2rem;
	max-height:2rem;
	background: white;
	border-radius: 100%;
	margin-left: auto;
	margin-top: 1rem;
}

#notifications .notification__app
{
	width: 1rem;
	height: 1rem;
	border-radius: 3px;
}
.notification__body
{
	color:rgba(255,255,255,0.8);
	text-align: left;
	display: flex;
	flex-direction: column;
}
.notification__header__title
{
	font-family:
	'standardFontBold';
	opacity: .75;
}
.notification__header__time
{
	opacity:.4;
}
#window_max svg,
#window_restore svg
{
	height:100%;
	pointer-events:none;
}
.system_bar__right,
.system_bar__left
{
	height:2.2rem;
	display:
	flex;
	font-size:1.3rem;
	align-items:
	center;
	justify-content: center;
	font-family: 'San Francisco' !important;

}

.system_bar__right .datetime,
.system_bar__right .user,
.system_bar__left span
{
	font-size:1rem;
	display:flex;
	align-items:center;
	gap:.25rem;
	font-weight:800;
	font-family:'San Francisco' !important
}
.has_context_menu img 
{
	pointer-events:none;
}

.system_bar__right > span,
.system_bar__right > div,
.system_bar__left > span,
.system_bar__left > div,
.system_bar__left > img
{
	cursor:pointer;
	padding:0 .75rem;
	min-height:100%;
	display:flex;
	align-items:center;    
	white-space: nowrap;
    overflow: hidden;
	width:fit-content;
    text-overflow: ellipsis;
}
.system_bar__left img
{
	padding: 0px;
}
.system_bar__right > span:hover,
.system_bar__right > div:hover,
.system_bar__left > span:hover,
.system_bar__left > div:hover
{
	
	background:var(--blue) !important;
}
.system_bar__right .user img 
{
	border-radius:100%;
	width:1.5rem;
	min-height:1.5rem;
	margin-left:.2rem;
	border:1px solid #eee;
}
#trigger__notification__pannel
{
	position:relative;
}
#trigger__notification__pannel.newnoti:before
{
	content: attr(data-content);
	font-size:.75rem;
	display:flex;
	justify-content:center;
	align-items:center;
	width:1rem;
	left:.35rem;
	top:.25rem;
	height:1rem;
	border-Radius:100%;
	background:red;
	position:absolute;
	font-family:'standardFontBold';
}
#system_bar .thin 
{
	font-weight:500;
}
.system_bar__left span .iconify 
{
	margin-top:.15rem;
	font-size:.8rem;
}
#trigger__app__pannel
{
}
#system_bar img 
{
	max-height: 1.59rem;
	min-height: 1.59rem;
	max-width: 1.59rem;
	min-width: 1.59rem;
}
#apps
{
	border-top: 1px solid #ffffff73;
}
#launch_bar
{
	
	position:absolute;
	background: rgba(83, 83, 83, 0.4);
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	padding:.75rem;
	color:#fff;
	stroke:#fff;
	fill:#fff;
	font-size: 2.5rem;
	display:
	flex;
	flex-direction:
	column;
	gap: .75rem;
	align-items:
	center;
	justify-content:
	center;
	margin-left:1rem;
	border-radius:20px;
}
#launch_bar img 
{
	height:3.5rem;
}
.content .results
{
	padding-top:1rem;
}
.color-gray
{
	color:#aaa;
}
.color-red
{
	color:red;
}
[swizzard-step-content] .entity-create
{
	text-align:center;
}
.selectable-grid
{
	display:
	grid;
	background: #00000009;
	gap:1rem;
	border-radius:1rem;
	padding:1rem;
	margin-bottom:1rem;
	border: 2px solid #00000001;
	margin-right: 1rem;
	cursor:
	pointer;
}

.selectable-grid.selected
{
	background:var(--bg_blue);
	border: 2px solid #2196f3;
}
.selectable-grid.paymentMethod img 
{
	width: 3.25rem;
	margin-left: .45rem;
}
.selectable-grid:not(.paymentMethod) img 
{
	width: 2.5rem;
	min-width: 2.5rem;
	max-height: 2.5rem;
	border-radius: 100%;
}
/*
[swizzard-step-content] .content .scrollbox 
{
	overflow:auto;
	height:100%;
}
*/
[tooltip]
{
	display:none;
}
[swizzard-step-content] [tooltip]
{
	margin-left: .5rem;
	color: #00539b;
	text-decoration: underline;
	font-size: .9rem;}
[swizzard-step-content]  .grid
{
	display:grid;
	gap:1rem;
}
[swizzard-step-content] input,
[swizzard-step-content] .sp-replacer,
[swizzard-step-content] textarea,
[swizzard-step-content] select
{    
	box-shadow: inset 0px 2px 4px rgb(0 0 0 / 10%);
	margin-top:.5rem;
	border-color:#9b9b9b !important;
}
[swizzard-step-content] input[type="color"]
{
	width:100%;
	padding:5px;
	height:2.5rem;
	border-radius:5px;
}
[swizzard-step-content] .success > label:before
{
    content: '\f00c';
    font-Weight:900;
	margin-right:.5rem;
	font-family: "Font Awesome 5 Free";
	color:#4CAF50;
}
[swizzard-step-content] label 
{
	display:
	flex;
	align-items:
	center;
	color: var(--dark_blue);
}
[swizzard-step-content] .error > label:before
{
    /* font-size: 2rem; */
    height: 1rem;font-Weight:900;
	margin-right:.25rem;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='rem' height='1.2rem' viewBox='0 0 24 24'%3E%3Cpath fill='red' d='M11.99 22C6.468 21.994 1.996 17.515 2 11.993C2.004 6.472 6.482 1.998 12.003 2C17.525 2.002 22 6.478 22 12c-.003 5.525-4.485 10.002-10.01 10ZM4 12.172A8 8 0 1 0 4 12v.172ZM13 17h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E%0A");
}
[swizzard-step-content] .error [name]
{
	border-color:red !important;
}
[swizzard-step-content] .error .errors 
{
	margin-top:.5rem;
	color:#fff;
	font-family:'StandardFontBold' !important 
}
[swizzard-step-content] .error .errors
{
	background:red;
	border-radius:5px;
	position:absolute;
	padding:.5rem;
	display: none;
	z-index:3
}
[swizzard-step-content] .error .errors:before
{
	content:" ";
    border-style: solid;
    border-width:  0 10px 15px 10px ;
    border-color:  transparent  transparent red transparent ;
    position: absolute;
    left: 5px;
	top:-10px;
}

[swizzard-step-content] .error .errors span
{
	font-family:'StandardFontBold' !important ;
	display:block;
	width:100%;
	position:relative;
  overflow: hidden;
}
[swizzard-step-content] .error .errors span:before
{
	content:'- '
}
[swizzard-step-content] textarea
{
    border-radius: 5px;
	padding: .5rem;display:block;
	width:100%;
	min-height:10rem;
}
.container .card{
	width:100%;
	position:
	relative;
	font-family: 'Poppins', sans-serif;
	}
.container .card .form{
    width:100%;
    display:
    flex;
    overflow: hidden;
    min-height: 100%;
    /* background: #f7fbff; */
    }
.container .card .left-heading h3 
{
	gap:.7rem;
}
.container .card .left-side svg
{
	width:3rem;
	height:3rem;
	fill: #c3c3c3!important;
}

.container .card .left-side{
	background-image: url('/public/img/wallpaper/default-blue.jpeg');
	background: var(--blue);
	background: #f7fbff;
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background-position:
	center;
	overflow: auto;
	display: flex;
	flex-direction: column;transition:.25s;
	padding: 2.25rem;
	box-sizing: border-box !important;
	z-index:2;
	width:40%;
	border-right: 1px solid #aaaa;
	width: 27rem;
	/* box-shadow: 0 10px 10px #0088ff4d; */
	}
/*left-side-start*/
.left-heading{
    color:#fff;
	font-size: 1.5rem;
display: none;}
.left-heading h3 
{
	color:#fff;
	display:flex;
	align-items:center;
display: none;}
.steps-content{
    color: var(--dark_blue);
}

.steps-content:after {
    content: "";
    height: 1px;
    display: block;
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgb(221 224 226) 50%,rgba(0,0,0,0) 100%);
}
.steps-content p{
    font-size:.85rem;
    margin: 15px 0;
}
.progress-bar{
    list-style:
    none;
    color:#fff;
    padding: 0;
    padding-left: 1px;
    margin: 0;font-size:13px;
    font-weight:700;
    counter-reset:
    container 0;
}
.progress-bar li{
       position:relative;
       margin-left:40px;
       /* margin-top:50px; */
       height: 4.5rem;
       counter-increment:
       container 1;
       color: #bfbfbf;
}
.progress-bar li:hover
{
	cursor:pointer;
}
.progress-bar li:hover::before
{
	transform:scale(1.1)translateX(2px);
}
.progress-bar li:hover span
{
	text-decoration:underline;
}

.progress-bar li:first-child
{
	margin-top: .5rem;
}
[sv].error:hover .errors 
{
	display:block;
}
.progress-bar li  span,
.progress-bar li  div
{
	pointer-events:none
}

.progress-bar li::before{
    content:
    counter(container);
    line-height:23px;
    text-align:
    center;
    position:
    absolute;
    height:25px;
    width:25px;
    border: 1px solid #c1c1c1;
    border-radius:50%;
    left:-40px;
	transition:.2s ease-in-out;
    z-index:10;
}


.progress-bar li::after{
    content: '';
    position: absolute;
    border-radius: 2rem;
    height: 2rem;
    width: 1px;
    background-color: #c6c6c6;
    z-index: 1;
    left: -27px;
    top: 2.1rem;
}

.progress-bar li:nth-last-child(2)::after
{
	display:none !important;
}
.progress-bar li.completed::after{
    background-color: #4caf50;
    width: 2px;
}

.progress-bar li.active::before{
    color:#fff;
    border: 2px solid #f4f4f4;
    background-color: var(--blue); 
	box-shadow: 1px 1px var(--blue), -1px 1px var(--blue), -1px -1px var(--blue),  1px -1px var(--blue)
}
.progress-bar li:not(.active).in_progress::before{
    color:#fff;
    border: 2px solid #e5ce00;
	background:#e5ce00
}
.progress-bar li.active,
.progress-bar li.in_progress,
.progress-bar li.completed,
.progress-bar li.active span,
.progress-bar li.in_progress span,
.progress-bar li.completed span
{
    color: var(--dark_blue);
    font-family:StandardFontBold;
}
.d-none{
   display:none;   
}


.progress-bar li div 
{
	display: none;
	font-size: 10px;size:.7rem;
	margin-top: .4rem;
	border-radius:1rem;
	width:max-content;
	padding: 2px 8px;
}
.progress-bar li.active .step_active
{
	display:block;
	color:var(--blue);
	background:#d9eeff;
	font-family:StandardFontBold;
}
.progress-bar li.in_progress:not(.active) .step_in_progress
{
	display:block;
	color:#fff;
	background:#e5ce00;
	font-family:StandardFontBold;
}

.progress-bar li.completed:not(.active)::before{
    color:#fff;
	font-family:StandardFontBold;
    border: 2px solid #4CAF50;
    background-color: #4CAF50; 
}
	
.progress-bar li.completed:not(.active) .step_completed
{
	display:block;
	color:#4CAF50;
	background:#d6efd7;
	font-family:StandardFontBold;
}


.progress-bar li:not(.active, .completed, .in_progress) .step_pending
{
	display:block;
	border:1px solid;
	opacity:.5
}
/*left-side-end*/
.container .card .right-side{
    width: 100%;
    height: 100%;
    background: #f7fbff;
    background: #f7fbff;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    min-height: 100%;
}
.steps-content [swizzard-serverside-processing].active
{
	display:block !important;
}
[swizzard-serverside-processing]
{
	display:none;
}
.swizzard_feedback
{
	flex-direction:row;
}
.main{
    padding: 0 40px;
}
[swizzard-step]
{
	display:none;
}
[swizzard-step-content], .right-side [swizzard-serverside-processing].active
{
    padding: .75rem 1.25rem;
    padding-left: 2.25rem;
    overflow: hidden;
    min-height: 100%;
    height: -webkit-fill-available;
    max-height: -webkit-fill-available;
    flex-direction: column;
    gap: 1rem;
    /* justify-content: space-between; */
}
.right-side [swizzard-serverside-processing].active
{
	display:flex;
	flex-direction:column
}
[swizzard-serverside-processing] .console
{
	background:#fff;
	border:1px solid
	var(--dark_blue);
	overflow:
	auto;
	margin-bottom: .5rem;
	height: calc(100% - 3.3rem);
	border-radius: 5px;
	gap: .5rem;
	display: flex;
	flex-direction: column;
}
[swizzard-serverside-processing] .console .message 
{
	display:
	flex;
	gap:1rem;
	flex-direction: column;
	padding: .75rem;
	border: 1px solid #d5e1ed;
	border-right-width: 0;
	border-left-width: 0;
}
[swizzard-serverside-processing] .console .message .iconify
{
	font-size:2rem !important;
}
[swizzard-serverside-processing] .swindow-oc
{
	max-height: -webkit-fill-available;
}
[swizzard-step].active,
.right-side [swizzard-serverside-processing].active
{
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
}
.swindow .field_format 
{
	color:#8394a5;
	font-size:.85rem;
	margin-top:.25rem;
	
}
.console__message__time
{
	white-space:nowrap;
	font-family: 'StandardFontBold';
}
.message.success
{
	color:#4CAF50;
	background:#f5fff5;
	border-color: #4caf50 !important;
}
.message.error
{
	color:#F44336;
	background:#fff0ef;
	border-color:#F44336 !important;
}
.message.warning
{
	color:#FF9800;
	background:#fff5e5;
	border-color:#FF9800 !important;
}
.message.info
{
	color:#2196F3;
	background:#e6f4ff;
	border-color:#2196F3 !important;
}

.main small{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:2px;
    height:30px;
    width:30px;
    background-color:#ccc;
    border-radius:50%;
    color:yellow;
    font-size:19px;
}
.text{
    color: var(--dark_blue);
    padding: 0;
    /* padding-bottom: .5rem; */
    /* background: #f7fbff; */
    /* background: #f7fbff; */
    /* background-color: rgba(255, 255, 255, 0.85); */
    /* backdrop-filter: blur(12px); */
    }
.congrats{
    text-align:center;
}
.text p{
    margin: .5rem 0;
    font-size: 14px;
    font-weight:700;
    color: #0018318c;
}
.input-text{
    margin:30px 0;
     display:flex;
    gap:20px;
}

.input-text .input-div{
    width:100%;
    position:relative;
    
}

.space-between
{
	justify-content: space-between !important;
}

input[type="text"],
.swindow input[type="email"],
.swindow input[type="password"],
.swindow input[type="number"],
.phone_wrapper
{
    width:100%;
    height:40px;
    box-shadow: inset 0px 2px 4px rgb(0 0 0 / 10%);
    border:
    none;
    color: #000 !important;outline:0;
    border-radius:5px;
    border:1px solid #cbced4;
    gap:20px;
    box-sizing:
    border-box;
    padding:0px 10px;
}
.phone_wrapper input 
{
	border:none;
	margin:0;
	box-shadow:none;
	background:none;
}
.error .phone_wrapper
{
	border-color: red !important;
}
.error .field_format.on-error-red
{
	color:red;
}
select
{
    width:100%;
    height:40px;
    border:none;
    outline:0;
    border-radius:5px;
    border:1px solid #cbced4;
    gap:20px;
    box-sizing:border-box;
    padding:0px 10px;
}
input[disabled]
{
	font-style:
	italic;
	font-size:1rem;
	width: -webkit-fill-available;
	border:
	none;
	border-bottom:2px solid #000;
	box-shadow:
	none;
	background:
	none;
	padding-left:0;
	border-radius:0;
}
.gap-1-rem
{
	gap:1rem;
}
.gap-0_5-rem
{
	gap: 0.5rem;
}
.no-wrap
{
	white-space:nowrap
}
[name*="tijden"]
{
	min-width:max-content
}
.input-text .input-div span{
    position:absolute;
    top:10px;
    left:10px;
    font-size:14px;
    transition:all 0.5s;
}
.input-div input:focus ~ span,.input-div input:valid ~ span  {
    top:-15px;
    left:6px;
    font-size:10px;
    font-weight:600; 
}

.input-div span{
    top:-15px;
    left:6px;
    font-size:10px;
}
.buttons
{
	flex-shrink: 0;
	height: 4rem;
	display: flex;
	border-top: 1px solid #dde0e2;
	padding-top: 1rem;
	margin-top: auto; /* added */
	}
.buttons svg
{
	pointer-events:none;
}
.buttons button
{
    border:
    none;
    padding: 16px;
    font-size: 16px;
    border-radius: 2rem;
    background-color:
    var(--blue);
    font-family:
    StandardFontBold;
    transition:.25s;
    color:#fff;
    cursor:
    pointer;
    gap: 1rem;
}
.secure_payment
{
    font-family:
    StandardFontBold;
	display:flex;
	align-items:center;
	gap:.5rem;
	border-radius:1rem;
	
}
.secure_payment .iconify
{
	font-size:1.6rem;
}
.add-item-pop
{
	margin-top:1rem;
	text-decoration:underline;
	color: #000a3f;
}
.button_space{
    display:flex;
    gap:20px;
    
}
.user_card{
    margin-top:20px;
    margin-bottom:40px;
    height:200px;
    width:100%;
    border:1px solid #c7d3d9;
    border-radius:10px;
    display:flex;
    overflow:hidden;
    position:relative;
    box-sizing:border-box;
}
.user_card span{
    height:80px;
    width:100%;
    background-color:#dfeeff;
}
.circle{
    position:absolute;
    top:40px;
    left:60px;
}
.circle span{
    height:70px;
    width:70px;
    background-color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid #fff;
    border-radius:50%;
}
.circle span img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}
.social{
    display:flex;
    position:absolute;
    top:100px;
    right:10px;
}
.social span{
    height:30px;
    width:30px;
    border-radius:7px;
    background-color:#fff;
    border:1px solid #cbd6dc;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-left:10px;
    color:#cbd6dc;

}
.social span i{
        cursor:pointer;
}
.heart{
    color:red !important;
}
.share{
        color:red !important;
}
.user_name{
    position:absolute;
    top:110px;
    margin:10px;
    padding:0 30px;
    display:flex;
    flex-direction:column;
    width:100%;
    
} 
.user_name h3{
    color:#4c5b68;
}
.detail{
    /*margin-top:10px;*/
   display:flex;
   justify-content:space-between;
   margin-right:50px;
}
.detail p{
    font-size:12px;
    font-weight:700;

}
.detail p a{
    text-decoration:none;
    color:blue;
}






.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}










.warning:not(.message){
    border:1px solid red !important;
}


/*right-side-end*/
@media (max-width:750px) {
    .container{
        height:scroll;
       
        
    }
    .container .card {
        max-width: 350px;
        height:auto !important;
        margin:30px 0;
    }
    .container .card .right-side {
     width:100%;
            
    }
     .input-text{
         display:block;
     }
     
     .input-text .input-div{
  margin-top:20px;
    
}

    .container .card .left-side {
           
     display: none;
    }
}
.progress-holder
{
    overflow: auto;
    /* box-sizing: border-box !important; */
    margin-top: 2rem;
    }
.header-x-scroll::-webkit-scrollbar,
.progress-holder::-webkit-scrollbar,
.swindow-oc::-webkit-scrollbar{
	padding-top:2rem;
  width: 7px; /* Mostly for vertical scrollbars */
  height: 0px; /* Mostly for horizontal scrollbars */
}
.header-x-scroll::-webkit-scrollbar-thumb,
.progress-holder::-webkit-scrollbar-thumb,
.swindow-oc::-webkit-scrollbar-thumb{ /* Foreground */
  background: #000a3f54;
	border-radius:1rem;
	cursor:pointer
}
.header-x-scroll::-webkit-scrollbar-track,
.progress-holder::-webkit-scrollbar-track,
.swindow-oc::-webkit-scrollbar-track { /* Background */
  background: #4f4f4f26;
	border-radius:1rem;
}
.content::-webkit-scrollbar
{
	
  width: 7px; /* Mostly for vertical scrollbars */
  height: 7px; /* Mostly for horizontal scrollbars */
}
.content::-webkit-scrollbar-thumb
{
	  background: #3d556a;
	border-radius:1rem;
	cursor:pointer
}
.content::-webkit-scrollbar-track 
{
	background: #c7dcf1;
	border-radius:1rem;
}
.scalendar
{
	height: 25rem;
	width: 20rem;
	margin:
	auto;
	left:50%;
	top:50%;
	padding:0 !important;
	transform:
	translate(-50%, -50%)
}
.scalendar .controls
{
	display:
	flex;
	align-items:
	center;
	justify-content:
	space-between;
	padding: .75rem;
	
	padding-bottom:0;
}

.scalendar .controls .view
{
	font-family:
	'StandardFontBold';
	color:#757575;
	color: var(--dark_blue);
	display: flex;
	padding: .75rem;
	border-radius:10px;
	align-items: center;
	gap: .35rem;
}

.scalendar .controls .navigate
 {
	 display:flex;
	 
 }
.scalendar .controls .navigate div 
{
	width:2.5rem;
	height:2.5rem;
	border-radius:100%;
	color:#757575;
	color: var(--dark_blue);display:
	flex;
	align-items:
	center;
	justify-content:
	center;
}

.scalendar .controls .navigate div:hover,
.scalendar .controls .view:hover
{
	background:#eee;
	cursor:pointer;
}
.scalendar table 
{
	border-collapse:collapse;
	margin:1rem;
}
.scalendar th 
{
	color:#757575;
	font-size:12px;
	height: 0rem !important;
}
.scalendar td:not(.separator), .scalendar th 
{
	width: 2.7rem;
	height: 2.5rem;
	text-align:
	center;
}
.scalendar td
{
	color:#ccc;
	height: 1.5rem;
}
.scalendar td.separator:after
{
	content:'';
	left:0;
	width:100%;
	position:absolute;
	border-bottom: 1px solid #e0e0e0;
}
.scalendar td.selected_month
{
	color:#000;
}

.scalendar td.today
{
	font-family:'StandardFontBold';
	color:var(--blue);
}
.scalendar td.view
{
	border:1px solid var(--blue);
}
.scalendar td:not(.placeholder, .separator):hover 
{
	background:var(--blue);
	color:#fff !important;
	cursor:pointer;
}
.scalendar td.placeholder
{
	font-family:
	'StandardFontBold';
	color: var(--dark_blue);
}
.scalendar td.year,
.scalendar td.month
{
	width:4.4rem;
	color:#000;
}
.scalendar td.year.today,
.scalendar td.month.today
{
	color:var(--blue);
}
.scalendar td.month
{
	width:10rem;
}
.scalendar_holder .underlay 
{
	width:100%;
	height:100%;
	position: static !important;
}
.spop_holder,
.scalendar_holder
{
	position:
	absolute;
	left:0;
	width:100%;
	height:100%;
	z-index: 99999999999;
}

.scalendar_holder
{

	z-index:99999999999999
}
.spop_holder:not(.custom_spop) .spop,.scalendar
{
    position: absolute;
    /* background: #fff; */
    background-color: #ffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5px;
    padding: 1.75rem;
    box-shadow: 0 0px 40px
rgba(0,0,0,0.4);
}
.custom_spop .spop
{
	position:absolute;
}
.custom_spop .context_menu
{
	border-top: 1px solid #00000059;
	border-bottom: 0;
	border-radius:5px;
}
.custom_spop .store_context_menu
{
	border-radius: 0 0  5px 5px;
	border-bottom: 1px solid #00000059;
	margin-left:-1px;
}
.spop .spop__header__title
{
	font-size:1.5rem;
	color:
	var(--dark_blue);
	color: red;
	font-family:
	'StandardFontBold';
	margin-bottom:1rem;
	display: flex;
	gap: .5rem;
	align-items: center;
}
.spop .spop__body__scrollcontainer
{
	margin:.5rem 0 ;
}
.spop .spop__body__scrollcontainer > div 
{
	gap:.5rem;
}
.spop .spop__header__close 
{
	position:
	absolute;
	right: 10px;
	font-size:1rem;
	top: 5px;
	cursor:pointer;
	color: #aaa;
}
.spop .spop__header__close:hover
{
	color:#000;
}
.spop .spop__footer
{
	margin-top:1.5rem;
	display:flex;
	justify-content:end
}
.spop .spop__footer__close 
{
	font-family:
	'StandardFontBold';
	color: red;
	cursor: pointer;border-radius:5px;
	border: 1px solid;padding:.75rem 1rem;
}
 .spop .spop__footer__close:hover
{
	background:red;
	color:#fff;
}
.button-workplace
{
	padding:1rem !important;
	gap:2rem;
	width:25rem !important;
	margin-bottom:.5rem;
	justify-content:space-between
}

.button-workplace h3
{
	font-size: 1.2rem;
  white-space: nowrap;
	max-width: 18.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
    font-family:'StandardFontBold';
}


.button-workplace small 
{
	
	font-size:.75rem;
	color:var(--blue);    font-family:'StandardFontBold';

}
.workplace-details .iconify
{
	font-size:1.5rem;
}
.button-workplace .workplace-details
{
	gap:1rem;
}
.search-block
{
	width:100%;
	border-radius:.5rem;
	overflow:hidden;
	margin:1.5rem 0;
}
.search-header
{
	padding:1rem;
	color:#fff;
	background:#000a3f;
}
.search-header .search-input
{
	color:#000;
box-shadow: inset 0px 2px 4px rgb(0 0 0 / 40%);}

.search-value
{
	gap:1rem;
	margin-top:1rem;
	background:#fff;
	border-radius:.5rem;
	align-items:center;
}
.search-input
{
	width:100%;
	
	 box-shadow: inset 0px 2px 4px rgb(0 0 0 / 10%);
	border-radius:.5rem;
	height: unset !important;padding: 1rem 3rem !important;
}
.search-value .iconify
{
	left:1.5rem;
	color:#000;
	font-size:2rem;
	position:absolute;
	pointer-events:none;
	
}
.search-results
{
	border:1px solid #000a3f;
	max-height:15rem;
	overflow:auto;
	border-radius:0 0 .5rem .5rem;
	box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);}
.search-results .search-result
{
	padding:1rem; 
	align-items:center;
	border-bottom:1px solid #c7d9ea;
}
.search-results .search-result:hover
{
	background:#dbebfa82;
	cursor:pointer;
}
.search-results .search-result:hover a
{
	text-decoration:underline
}
.search-results .search-result a 
{
	display:flex;
	align-items:center;
	gap:.5rem;
	color:#4CAF50;
    font-family:'StandardFontBold';
}
.padding-0
{
	padding:0;
}
.padding-1-rem,
.padding-1rem
{
	padding:1rem;
}
.padding-top-2rem
{
	padding-top:2rem;
}
.margin-top-2rem
{
	margin-top:2rem;
	
}
.search-results .search-result a.approved-connection
{
	color:var(--blue);
}
.search-results .search-result a.rejected-connection
{
	color:red;
}
.search-results .search-result a.pending-connection
{
	color:#FF9800;
}
.search-results .search-result a .iconify
{
	font-size:1.5rem !important;
}
.search-results .search-result:last-child
{
	border:none;
}
.search-block .entity-create
{
	z-index:2;
	padding-top:1rem;
	display:flex;
	flex-direction:column;
	gap:1rem;
	text-align:center;
}
.search-feedback
{
	background: #fff;
}
.no-border-radius
{
	border-radius:0px !important;
}
.entity-create .btn
{
	background:var(--blue);
	text-align:center;
	color:#fff;
	padding:1rem;
	cursor:pointer;
    font-family:'StandardFontBold';
	border-radius:1.5rem;
}
.search-init,.search-no-results
{
	color:#000a3f;
	padding:2rem;
	align-items:center;
	gap:1rem;
	box-shadow: inset 0px 2px 4px rgb(0 0 0 / 30%);text-align:center;
	background: #fff;
}
.search-results .iconify
{
	font-size:2.5rem;
}
.hidden
{
	display:none !important;
}
.search-value .iconify.loadicon
{
	right: 1.5rem !important;
	left:unset;
	color:#000a3f;
	position:absolute !important;
}
mainloader.loading
{
	display:flex;
}
.highlight
{
	/* background:#badfff !important; */
	text-decoration: underline;
}

.search-result small
{
	color:#a3a3a3;
	font-size:.75rem;
}
/* Hide the browser's default checkbox */
.container input[type=checkbox],.container input[type=radio] {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 50%;
	margin-top: -0.4rem;
	left: 50%;
	transform: translate(-50%, -50%) !important;
	border:1px solid #a6a6a6;
	height: 1.5rem;
	width: 1.5rem;
	cursor: pointer;min-width: 1.5rem;
	transition:.2s cubic-bezier(0.16, 0.13, 0.5, 2.34);
	overflow: visible;
	border-radius: .25rem;
	background: rgb(247,247,247);
	background: -moz-linear-gradient(180deg, rgba(247,247,247,1) 0%, rgba(229,229,229,1) 46%, rgba(217,217,217,1) 50%, rgba(233,233,233,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(247,247,247,1) 0%, rgba(229,229,229,1) 46%, rgba(217,217,217,1) 50%, rgba(233,233,233,1) 100%);
	background: linear-gradient(180deg, rgba(247,247,247,1) 0%, rgba(229,229,229,1) 46%, rgba(217,217,217,1) 50%, rgba(233,233,233,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7f7f7",endColorstr="#e9e9e9",GradientType=1);
}
.relative_cm .checkmark {
	position: relative;
	top:unset;
	left:unset;
	transform: unset !important;
	margin-top: unset !important;
}
.relative_cm
{
	display: inline-flex;
	align-items: center !important;
	/* height: 100% !important; */
	transform: unset;
	gap: 1rem;
	justify-content: start;
	}
.collapsed .checkmark 
{
  transform: translate(-50%, -50%);
}
.hidden_placeholder
{
	background:#ffffff;
	border:1px solid #8888;
	border-radius:2px;
	margin:13px;
	padding:20px;
}
.hidden_placeholder h1 
{background: rgb(255,255,255); /* Old browsers */background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */color:#555;font-size: 18px;margin:0px;padding: 15px;display:block;border-radius:4px;font-family:var(--font-regular);border:1px solid #aaa;}
.aditional-add
{
    background:#ffffff;
    padding:20px;
    margin: 10px;
    margin-top: 20px;
    text-align:center;
    color:#666;
    cursor:pointer;
    transition:0.3s;
    border:2px dashed #999;
}
.aditional-add:hover
{
    color:#4CAF50;
    border:2px dashed #4CAF50;
    background:#f7fff7;
}
.aditional-original, .aditional-clone
{
  border-bottom: #9E9E9E 1px solid; 
  margin-bottom: 10px;
  padding-bottom: 10px;
}
/* On mouse-over, add a grey background color */
label.container:hover input:not(:checked) ~ .checkmark
{
    transform:translate(-50%, -50%) scale(1.1);
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
}

.container input:checked ~ .checkmark {
	background: rgb(216,237,247);
	background: -moz-linear-gradient(180deg, rgba(216,237,247,1) 0%, rgba(125,186,244,1) 46%, rgba(54,166,255,1) 50%, rgba(196,232,246,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(216,237,247,1) 0%, rgba(125,186,244,1) 46%, rgba(54,166,255,1) 50%, rgba(196,232,246,1) 100%);
	background: linear-gradient(180deg, rgba(216,237,247,1) 0%, rgba(125,186,244,1) 46%, rgba(54,166,255,1) 50%, rgba(196,232,246,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d8edf7",endColorstr="#c4e8f6",GradientType=1);
	box-shadow: none;
	border-color:#4780c0;
	margin-top: -0.4rem;
}
.container input:disabled ~ .checkmark
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
	border-color:#8f8f8f;
}
.new:not(.table-condensed .new)
{
    animation: fadeout 3s;
    background:#f7fff7;
}
.swindow .new 
{
	background:red !important;
	border-radius:10px;
	padding:0 10px;	
	font-family:'StandardFontBold';
	color:#fff;
}
.table-condensed .new
{
  color:#ddd!important;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
	left: 50%;
	bottom: 85%;
	width: 0.5rem;
	height: 1.2rem;
	border: solid #001730;
	border-width: 0 0.3rem 0.3rem 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg) translate(50%, 50%);
}
.container .round.checkmark
{
	border-radius:100%;
}
.container .round.checkmark:after 
{
	width:.55rem !important;
	height:.55rem !important;
	left:50%;
	bottom:50% !important;
	border-radius:100% ;
	transform:translate(-50%, 50%);
	border:none;
	background:#1a334e;

	content:'';
}
.checkbox_icon .container .checkmark:after 
{
  bottom:70%;
  left:50%;
  width: 1rem;
}
.swizzard_feedback
{
	display:
	flex;
	align-items:center;
	padding:0;
	color: #c1c1c1;
	opacity: 1;
	margin-left:-.6rem;
}
.swizzard_feedback .iconify svg 
{
	position:absolute !important;
}
.swizzard_feedback .iconify
{
	width:1.8rem;
	max-height:1.8rem;
	display:block;
	position:absolute !important;
	opacity:.7;
}
.swizzard_feedback .txt-content 
{
	padding-left: 3rem !important;
	display:
	block;
}
.swizzard_feedback.active
{
	opacity:1;
	animation: fade 2s infinite;
	font-family:
	'StandardFontBold';
	color: var(--dark_blue);
}
.swizzard_feedback.active .iconify
{
	opacity:1;
  animation: rotation 2s infinite;
}
@keyframes rotation 
{
	
  to {
    transform: rotate(-360deg);
  }
}
@keyframes fade 
{
	0%
	{
		
	opacity:.5;
	}

	51%
	{
	opacity:1;
	}
	
  100% {
	opacity:.5;
  }
}


.dock {
	width: auto;
	height: 70px;
	border-radius: 16px;
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}
.dock.in_focus
{
	z-index:999999999999;
}
#focus_dock
{
	
	min-width:100%;
	min-height: 1.3rem;
	bottom:0;
	z-index:9999999999999999;
	position:
	absolute;
	left:0;
}
.dock .dock-container {
	padding: 10px;
	width: auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: rgba(83, 83, 83, 0.4);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.dock .dock-container .li-bin {
	margin-left: 20px !important;
	border-left: 1.5px solid rgba(255, 255, 255, 0.4);
	padding: 0px 10px;
	padding-left: 20px !important;
}
.dock .dock-container .li-1::after {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	content: "";
	bottom: 4px;
}
.dock .dock-container li {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	cursor: pointer;
	vertical-align: bottom;
	/* transition: 0.2s; */
	transform-origin: 50% 100%;
}
.dock .dock-container li.active:after
{
	content:
	' ';
	width:5px;
	height:5px;
	background: #fffd;
	position:
	absolute;
	bottom:3px;
	border-radius:100%;
}
.dock .dock-container li:hover {
	margin: 0px 13px 0px 13px;
}
.dock .dock-container li .name {
	position: absolute;
	top: -59px;
	background: rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 0.9);
	height: 15px;
	padding: 15px 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	white-space: nowrap;
	visibility: hidden;
}
.context_menu__holder
{
	position:
	fixed;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	z-index: 99;
}
.context_menu__underlay
{
	z-index:2;
	position:absolute;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
}
.context_menu__pos
{
	z-index:2;
	position:absolute;
}
.has_context_menu
{
	position:relative;
}
.has_context_menu .context_menu,
.trigger_spop .context_menu
{
	display:
	none;
	z-index: 99999999999999999999999999999;
}

.context_menu
{
	padding:.25rem 0 ;
	display:
	flex;
	flex-direction:
	column;
	
	color:#222;
	border:1px solid #00000059;
	box-shadow:0 10px 20px
	rgba(0,0,0,0.4);
	border-top:0;
	border-radius: 0 0 5px 5px;
	background: rgb(255 255 255 / 60%);
	backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
.context_menu__separator
{
	width:100%;
	height:2px;
	background:#00000017;
}
.context_menu__header
{
	padding: 1rem;
	text-transform: uppercase;
	gap: .5rem;
	display:
	flex;
	color: var(--dark_blue);
	font-family: 'StandardFontBold';
	align-items: center;
	/* flex-direction: column; */
	border-color: #a67673;
	font-size: 2rem;
	border-bottom: 2px solid #00000017;
}
.context_menu__header img 
{
	width:5rem;
}
.context_menu__item
{
	align-items:flex-start !important;
	text-align:left !important;
	display:flex;
	cursor:pointer;
	padding:.45rem 0 ;
}

.context_menu__item.disabled
{
	cursor:
	default;
	color: #00000025;
}
.has_context_menu.hovered,
.context_menu__item:not(.disabled):hover 
{
	background:var(--blue);
	color:#fff;
}
.context_menu__item__status
{
	width: 2.5rem;
	text-align: center;
}
.context_menu__item__name
{
	display:block;
	font-family:'San Francisco' !important;
	white-space:nowrap
}
.context_menu__item__shortcut
{
	margin-left:auto;
	min-width:2.5rem;
}
.dock .dock-container li .name::after {
	content: "";
	position: absolute;
	bottom: -10px;
	width: 0;
	height: 0;
	backdrop-filter: blur(13px);
	-webkit-backdrop-filter: blur(13px);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid rgba(0, 0, 0, 0.5);
}
.dock .dock-container li .ico {
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 6px;
	/* transition: 0.2s; */
}
.dock .dock-container li .ico-bin {width: fit-content;}
.dock .dock-container li .ico-bin:hover {
	margin-left: 10px;
}
img.wb
{
	opacity:.5
}
li:hover .name {
	visibility: visible !important;
}

.app_grid__tabs__tab__apps__app__section.inschakelplannen
{
	scroll-margin-top: 141px;
}

#card-holder > div,
#card-number > div,
#expiry-date > div,
#verification-code > div
{
	background:#fff;
	border-radius:5px;
	min-height:2.7rem;
	min-width:100%;
	border: solid 1px #C8D2DC !important;
	box-shadow: inset 0px 2px 4px rgb(0 0 0 / 20%);
	display:
	flex;
	align-items:
	center;
	padding:.5rem;
}
.field-error{
	color:red !important;
	text-align:left;
}
#submit-button
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: var(--blue);
	color:#fff;
	cursor: pointer;width:100%;
	margin-top:1rem;
	font-size:1rem;
	font-family:
	'StandardFontBold';
	border:
	none;
	padding:1rem;
	border-radius:5px;
}

.bounce {
  animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.transition-500ms
{
	transition:.5s;
}
.scale-0
{
	transform-origin: center !important;
	transform:scale(0);
}
.custom_spop .context_arrow
{
	position:absolute;
	z-index:999999999999999999999999999;
}

.custom_spop .context_arrow.up {
  width: 0;
  height: 0;
  margin-top: -4px;
  /* border-left: 5px solid transparent; */
  /* border-right: 5px solid transparent; */
  border-bottom: 5px solid rgb(255 255 255 / 60%);
}

.custom_spop .context_arrow.down{
  width: 0;
  height: 0;
  overflow:
  hidden;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
		background-clip: border-box;
  border-top: 12px solid  rgb(255 255 255 / 65%);
}

.custom_spop .context_arrow.right{
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid  rgb(255 255 255 / 60%); 
}

.custom_spop .context_arrow.left{
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid rgb(255 255 255 / 60%); 
}
.mailmessage.active,
.mailmessage:hover
{
	background: #cfeaff4a;
	cursor:
	pointer;
	border-color: var(--blue);
}

.mailmessage:hover .message_attachment,
.mailmessage.active .message_attachment
{
	background:#fff;
}
.mailmessage.active .message_attachment
{
	border:1px solid 
}
.mailmessage
{
	background: #fff;
	margin-bottom: .5rem;
	border: 1px solid #edeff1;
}

.mailmessage td:last-child
{
  word-break: break-all;
  max-width: 100%;
  flex-grow: 1;
}

.mailmessage .mailmessage_preview
{
  max-width:
  -webkit-fill-available;
  overflow: visible;
  width: 100%;
  padding: 1rem;
  position: relative;
  gap: 1rem;
}
.message_selector,
.message_sender_avatar
{
	writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
	padding-right: 1rem;
}
.message_sender_avatar img 
{
	width:2.5rem
}

.message_selector label.container
{
	overflow:visible !important
}
.message_subject
{
	display: -webkit-box;
	color:#777;
	max-width: 100%;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.message_attachment
{
    gap: 1rem;
    display: flex;
    padding: .25rem 1rem;
    border-radius: 5px;
    align-items: center;
    gap: .75rem;
    z-index: 3;
    min-height: 4rem;
    border: 1px solid #eee;
    background: #eee;
}
.message_attachment strong
{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.message_attachment .iconify:nth-child(2)
{
	font-size:3rem;
}
.message_attachment .abtns
{
	height:2.1rem;
}
.message_attachment:hover
{
	border:1px solid var(--blue);
	box-shadow: 0 3px 5px #dfdfdf;
}
.message_attachment_status
{
	display:flex;
	margin:0 1rem;
	margin-right:0;
	gap:.5rem;
}
.individual_permissions_grid
{
	margin:1rem;
}
.permissions_grid .app-ico
{
	width:3rem;
	height:3rem;
	
}
.message_attachment_status div 
{
	border-radius:1rem;
	background:#fff;
	width:1.5rem;
	height:1.5rem;
	font-size:.8rem;
	display:flex;
	align-items:center;
	font-family:'standardFontBold';
	justify-content:center;
}
.message_attachment_status .status_parameter_red
{
	background:red;
	color:#fff;
}
.message_attachment_status .status_parameter_green
{
	background: #4caf50;
	color:#fff;
}
.message_snippet
{
	display: -webkit-box;
	display:none;
	color:#777;
	max-width:98%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.message_time
{
	white-space:
	nowrap;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
}
.unread .message_time,
.unread .sender_name
{
	font-family: 'standardFontBold';
}
.unread .sender_name
{
	display:
	flex;
	width: fit-content;
	align-items:
	center;
		
	gap:1rem;
}

.unread .sender_name .show_on_hover
{
	align-items:
	center;
	text-decoration: underline;opacity:0;
	display:
	flex;
	
	
	border-radius:5px;
	gap:.4rem;
}

.unread .sender_name .show_on_hover:hover
{
	text-decoration:none;
}
.unread:hover .sender_name .show_on_hover
{
	opacity:1;
}
.pdfviewer
{
	overflow:
	auto;
	display: flex;
	height:100%;
	flex-direction: column;
	background: rgb(82, 86, 89);
}
.pdfviewer h3
{
	max-width: 100%;
	width: 100%;
	display:flex
}
.pdfviewer__buttons
{
	color:#fff;
	width: 100%;
	max-width: 100;
	background: #323639;
	box-shadow: 0 5px 5px rgba(0,0,0,0.2);
	padding: .5rem;
	position: relative;
	top: 0;
}
.pdfviewer canvas
{
	margin: 0 7rem;
	margin-bottom: 1rem;
	box-shadow: 0 5px 15px rgb(0 0 0 / 80%);
}

.pdfviewer__buttons div 
{
	align-items:center;
	gap:1rem;
}

.swindow .filename
{
	overflow:hidden;
	text-overflow: ellipsis;
}
.pdfviewer__buttons div .loader img
{
	height:2rem;
	width:2rem;
}

.pdfviewer__buttons .iconify
{
	width:2.5rem;
	min-width:2.5rem;
	min-height:2.5rem;
	border-radius:100%;
	height:2.5rem;
	padding:.65rem;
	cursor:pointer;
}

.pdfviewer__buttons .iconify:hover
{
	background:#777;
}
.pdfviewer__buttons .pages
{
	white-space:nowrap;
}
.pdfviewer__buttons > div:nth-child(2)
{
	justify-content:center;
	
}

.switch {
	position: relative;
	display: inline-block;
	width: 70px;
	min-width: 70px;
	height: 34px;
	transform:
	scale(.7);
	}
  
  .switch input { 
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	display:
	flex;
	align-items:
	center;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	}
  
  .slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	  z-index:2;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	}

  input:checked + .slider {
	background-color: #2196F3;
	}
    input:checked:disabled + .slider {
		cursor:not-allowed;
	background-color: var(--dark_blue);
	}
  input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
  }


  .switch.green input:checked + .slider {
	  
	background-color: #4CAF50;
  }
	  
  .switch.red input:checked + .slider {
	  
	background-color: #F44336;
  }
  input:checked + .slider:before {
	-webkit-transform: translateX(36px);
	-ms-transform: translateX(36px);
	transform: translateX(36px);
  }
      .slider:after 
{
		content:'uit';
		position:absolute;
		right:12px;
		z-index:0;
		color:#777;
	}

input:checked + .slider:after 
{
		content:'aan';
		position:absolute;
		left:9px;
		color:#fff;
	}

  /* Rounded sliders */
  .slider.round {
	border-radius: 34px;
  }
  
  .slider.round:before {
	border-radius: 50%;
  }

.app__filteroptions
{
}
.app__filteroptions .app_grid__vertical_tabs__separator
{
	margin-top:2rem;
	margin-bottom:0.2rem;
}
.app__filteroptions__filter
{
	display:flex;
	align-items:center;
	position:relative;
	justify-content:space-between;
	/* margin-top: .5rem; */
}
.app__filteroptions__filter input 
{
	outline:0;
	margin-top:.2rem;
	background:none;
	border:none;
	border-radius: 0;
	border-bottom: 1px solid;
	border-color:#aaa;
	box-shadow:none;
	width: 100%;
	padding: .5rem 1.75rem;
	margin-right: .75rem;
	cursor:pointer;
}
.app__filteroptions__filter.text_filter
{
	margin-bottom:1rem;
}
.app__filteroptions__filter input:hover
{
	color:var(--blue)
}
.app__filteroptions__filter .iconify 
{
	position:absolute;
	pointer-events:none;
}
.app__filteroptions__filter .iconify:first-child
{
	left:0;
}
.app__filteroptions__filter .iconify:last-child
{
	right:.7rem;
}
.message_tags
{
	padding:1rem 0;
	display:flex;
	gap:1rem;
	flex-wrap: wrap;
}
.message_tags 
{
	color:#bbb;
	
}
.message_tag_red 
{
	color:red;
	font-family:'standardFontBold'
}
.message_tag_green
{
	color: #4caf50;
	font-family:
	'standardFontBold'
}


.message_tag_gray 
{
	color:#bbb;
}
.message_tag_black
{
	color:var(--blue);
}

.openrow td
{
	padding:.25rem;
	min-height:1rem;
}
.openrow h2 
{
	padding:1rem;
	color:var(--dark_blue)
}


tr.merged td > div,
tr.scraped td > div,
tr.converted td > div
{
	position:relative;
	padding-top:3.5rem !important;
	//border-top:4rem solid #f9f9f9;
	z-index:1
}
.invoice_tags
{
	display:flex;
	gap:1rem;
	position:absolute;
	right:.5rem;
	top:.5rem;
}
.merged .merged,
.autosync,
.converted .converted
{
	display:flex;
	align-items:center;
	gap:.5rem;
	border-radius:1.5rem;
	padding:.25rem .5rem;
	font-family:'standardFontBold';
	color:#fff;
	background: #383838;
}
.invoicekeeper_item 
{
	display:
	grid;
	gap: 1rem 0;
	grid-template-columns: 4rem 1fr;
}

.invoicekeeper_item .message_attachements
{
    grid-column: 2 / 3;
    height: 100%;
}
.invoicekeeper_item img 
{
	width: 3rem;
	height: 3rem;
	border-radius: 100%;
}
.mailmessage_preview_details
{
	display:
	grid;
	width: 100%;
	grid-template-columns: 1fr .7fr;
}
.mailmessage_preview_details .css__tooltip
{
	white-space:nowrap
}
.mailmessage_preview_details .css__tooltip:hover
{
	text-decoration:underline;
}
.merged img 
{
	width:2rem;
	height:2rem;
	margin-left:auto;
	margin-right: 0.5rem;
}
.message_tags div:before 
{
	content: attr(data-content);
}
[count-selected]:before
{
	content:attr(count-selected);	
}
[count-visible]:before
{
	content:attr(count-visible);	
}
.app_grid__controls .app__page_header
{
	border-bottom: 1px solid #dfe5ea;
}
.app__page_header
{
	position: sticky;
	top: 0rem;
	z-index: 2;
	padding: 1rem 0;
	color: var(--dark-blue);
	width: inherit;
}
.undo-filter
{
	text-decoration:underline;
}
.undo-filter:hover
{
	text-decoration:none;
}
.tab-btn-blue
{
	display:
	inline-flex;
	color:
	var(--blue);
	width:
	fit-content;
	border-radius:1rem;
	margin-top:1rem;
	font-size:1.1rem;
	display: block;
	white-space: nowrap;
}
.tab-btn-blue.active
{
	padding:.2rem 1rem;
	font-family:'standardFontBold';
	background:var(--blue);
	color:#fff;
}
.swindow .header.underlined_tabs
{
	border-bottom:1px solid #ccc !important;
}
.swindow .header.underlined_tabs .flex-row .flex-row
{
	margin-bottom:-1.8rem;
}
.swindow .header.underlined_tabs .tab-btn-blue:hover
{
	color:var(--blue);
}
.underlined_tabs .tab-btn-blue
{
	cursor:pointer;
	color:#222;
	padding-bottom:.8rem;
	border-radius:0;
}
.underlined_tabs .tab-btn-blue.active
{
	background:none;
	color:var(--blue);
	border-bottom:2px solid 
	
}
.btn-gray-disabled
{
	background:#e8e8e8;
	color:#888;
	cursor:not-allowed !important;
}
.config
{
	overflow:
	auto;
	width: 100%;
}
.config__options
{
	background: #b6b8c8;
	display:
	flex;
	flex-direction:
	column;
	gap:1px;
	border-radius:10px;
	border: #b6b8c8 1px solid;
	overflow:
	hidden;
	margin-bottom:2rem;
}

.config__options__option
{
	background:#fff;
	display:flex;
	align-items:center;
	padding:1rem;
	gap:1rem;
	text-align:left;
}
.config__options__option .flex-col
{
	gap:.5rem;
	width: 100%;
}
.config__options__option span 
{
	color: #8f93ab;
}
.config__options__option .iconify
{
	height:3rem;
	min-width:3rem;
}
.config__options__option__action:hover
{
	cursor:pointer;
	text-decoration:underline
}
.important_notice
{
	background: #000a3f;
	margin:.8rem;margin-top:0;
	color:#fff;
	border-radius:.4rem;
	padding:1.5rem;
	display:
	flex;
	justify-content:
	space-between;
	align-items:
	center;
}


.important_notice .btns 
{
	width:auto;
	display:flex;
}
.important_notice .iconify
{
	font-size:3rem;
	margin-right:1rem;
}

.important_notice .btns .btn-deny:hover
{
	text-decoration:underline;
}

.important_notice .btns .btn-accept
{
	background: #4caf50;
	color:#fff;
	font-family: 'standardFontBold';
	padding:0 2rem;
}
.important_notice .btns .btn-accept:hover
{
	color: #4caf50;
	background:#fff;
}
.rect-1
{
	border-radius:5px;
	height:1rem;
	width:2rem;
}
.rect-2
{
	border-radius:5px;
	height:1rem;
	width:7rem;
}
.rect-3
{
	border-radius:5px;
	height:1rem;
	width:60%;
}
.rect-4
{
	border-radius:5px;
	height:1rem;
	width:80%;
}
.cercle-2
{
	border-radius:100%;
	height:3rem;
	width:3rem;
}
.sq-1
{
	width:1.5rem;
	border-radius:5px;
	height:1.5rem;
	
}
.bg-blue
{
	background: #a7dcf8;
}
.bg-aaa
{
	background:#aaa;
}
.bg-eee
{
	background:#eee;
}
.bg-777
{
	background:#777;
}
@keyframes placeHolderShimmer{
    0%{
        background-position: -1000px 0
    }
    100%{
        background-position: 1000px 0
    }
}


.no_results:first-child .mailmessage_preview
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	border-top: 0;
}
.loading_notification__short
{
	height:1rem;
	width:5rem;
	border-radius:5px;
}
.loading_notification__long
{
	height:1rem;
	width:20rem;
	margin-top: .55rem;
	border-radius:5px;
}
.loading_notification__medium
{
	height:1rem;
	width:5rem;
	border-radius:5px;
}
.loading_notification__short.bg-777
{
	margin-top:.5rem
}
.loading_notification__square
{
	height:1rem;
	width:1rem;
	margin-right:.55rem;
	border-radius:5px;
	
}
.loading .bg-eee 
{
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    opacity: .5;
    background: #f6f7f8;
    background-attachment: fixed;
    background-image: linear-gradient(to right, #aaa 8%, #ffffff 38%, #aaa 54%);
    background-size: 2000px 40px;
    position: relative;
}
.loading .bg-777
{
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    opacity: .5;
    background-attachment: fixed;
    background-image: linear-gradient(to right, #aaa 8%, #fff 38%, #aaa 54%);
    background-size: 2000px 40px;
    position: relative;
}
.loading .bg-aaa
{
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
	background-attachment: fixed;
    background-image: linear-gradient(to right, #777 8%, #bbb 38%, #777 54%);
    background-size: 2000px 20px;
    position: relative;   
}
.td__grid 
{
	display:
	grid;
	padding:1rem;
	background:#fff;
	border: #eeeeee 1px solid;
	gap:1rem;
}
.grid__2 
{
	grid-template-columns: 4rem 1fr;
}
.name 
{
	display:flex;
	align-items:center;
	gap:1rem;
	font-family: 'standardFontBold';
}
.subname
{
	display:
	flex;
	gap:.5rem;
	margin-bottom: .5rem;
	align-items:
	center;
}
.subname__item,
.subname__item_bg
{
	display: flex;
	align-items: center;
	gap: .25rem;
}

.subname__item_bg
{
	background: var(--blue);
	padding:.15rem .5rem;
	border-radius:5px;
	font-family: 'StandardFontBold';
	color: #fff;
}
.rem1 
{
	width:1rem !important;
	height:1rem !important;
	max-height:1rem !important;
	max-width:1rem !important;
	min-height:1rem !important;
	min-width:1rem !important;
}
.rem3 
{
	width:3rem !important;
	height:3rem !important;
	max-height:3rem !important;
	max-width:3rem !important;
	min-height:3rem !important;
	min-width:3rem !important;
}

.rem4
{
	width:4rem !important;
	height:4rem !important;
	max-height:4rem !important;
	max-width:4rem !important;
	min-height:4rem !important;
	min-width:4rem !important;
}
.rem5
{
	width:5rem !important;
	height:5rem !important;
	max-height:5rem !important;
	max-width:5rem !important;
	min-height:5rem !important;
	min-width:5rem !important;
}
.tabs_subtile
{
	display:
	flex;
	gap:1.5rem;
	/* width:100%; */
	/* border-bottom:1px solid #dfe5ea; */
}
.tabs_subtile__tab
{
	font-size:1.1rem;
	padding-bottom:.75rem;
	margin-bottom:-1px;
}
.tabs_subtile__tab.active 
{
	border-bottom:2px solid var(--blue);
	color: var(--blue);
	font-family:'standardFontBold'
}
.tabs_subtile__tab:not(.active )
{
	cursor:pointer;
}

.informations__apps
{
	display:
	flex;
	flex-wrap:
	wrap;
	gap:.5rem;
	border-radius:5px;
	margin: 1rem 0;
	padding-bottom:1rem;
}
.informations__apps .informations__apps__app:not(.selected) img:hover
{
	transform:scale(1.1);
	cursor:pointer;
}

.informations__apps img 
{
	width:3rem;
	height:3rem;
	transition:.05s ease-in-out;
}
.informations__apps__app
{
	position:relative;
}
.informations__apps__app.selected:after
{
	content:'';
	width:5px;
	height:5px;
	background:#000;
	border-radius:100%;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:-10px;
}

.subinformations
{
	margin-top: .5rem;
	display:
	flex;
	flex-wrap:
	wrap;
	gap:.5rem 1.5rem;
}
.granted
{
	color:#4CAF50;
	font-family:'standardFontBold';
	text-align: center;
}
.granted span 
{
	font-size:1.5rem;
	color
}

.granted svg 
{
	width: 1rem;
}
.result_ungranted,
.result_granted
{
	text-align:left !important;
}
td.granted:before,
.result_granted:before
{
    content: '\f00c';
    font-Weight:900;
    color:#4CAF50;
    font-family: "Font Awesome 5 Free";
}
.result_granted:after
{
	content:'Toegestaan';
	margin-left:1rem;
}
td.ungranted:before,
.result_ungranted:before
{
	margin-right:.3rem;
    content: '\f023';
    font-Weight:900;
	color: #bbb;
	width:2rem;
	font-family: "Font Awesome 5 Free";
}

.result_ungranted:after
{
	content:'Niet toegestaan';
	margin-left:1rem;
}

.td__grid [hideable]
{
	padding:1rem 0rem;
}
td [hideable]
{
	padding: 1rem 6rem;
	padding-right:1rem;
	background: #e7f4ff;
	position:
	relative;
	border-top:0;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f4f9ff+0,e9f4ff+100 */
}
td [hideable]:before
{
	content:
	'';
	width:2rem;
	height:2rem;
	left: 2rem;
	top:-1.1rem;
	transform:
	rotate(45deg);
	background: #e7f4ff;
	position:
	absolute;
}
.acces_detail
{
	background:#fff;
	overflow: auto;
	border: 1px solid #adadad;
	width: 100%;
	border-radius:10px;
	box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
}
.acces_detail.no_apps
{
	padding:2rem;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2rem;
}
.acces_detail.no_apps
[data-icon="fa:lock"],
.acces_detail
[data-icon="fa:unlock-alt"]
{
	color:var(--dark_blue);
	opacity:.5;
	font-size:2rem;
}
.comm-wrapper
{
	color:#4CAF50;
}
.td_container
{
	margin-bottom:.5rem;
}
.personalia_grid,
.adres_grid
{
	margin-top:1rem;
	display:grid;
	gap:.55rem 0 ;
	grid-template-columns: auto 1fr;
}
.personalia_grid
{
	grid-template-columns: auto 1fr auto 1fr;
}
.personalia_grid div:nth-child(odd),
.adres_grid div:nth-child(odd)
{
	font-family:'standardFontBold'
}
.personalia_grid div,
.adres_grid div
{
	border-bottom:1px solid #ccc;
	padding-right:2rem;
}
.personalia_grid select 
{
	height:auto;
	background:none;
	padding:0;
	margin:0;
	border:none;
	font-size:1rem;
}
.permissions_grid
{
	min-width:100%;
	border-collapse:collapse;
}
.permissions_grid td,
.permissions_grid th
{
	padding:.75rem;
	border-right:1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.permissions_grid th
{
	font-family:'standardFontBold'
}
.authority_badge
{
	background:#3b4044;
}
.authority_badge:before
{
    content: '\f132';
    font-Weight:900;
	font-size:.8rem;
	font-family: "Font Awesome 6 Free";
}

#fetch_mail_progress
{
	width:80%;
}
#fetch_mail_progress progress
{
	width:100%;
}
.new_invoicekeepers
{
	gap:2rem;
	grid-template:1fr / 1fr  1fr 1fr;
	display:grid;
	justify-content:center;
}

#fetch_mollie_progress .new_invoicekeepers,
#fetch_uber_progress .new_invoicekeepers
{

	width:20rem;
	grid-template:1fr / 1fr;
}
.new_invoicekeeper
{
	border-radius:5px;
	padding:1rem;
	opacity:.25;
	min-width:2rem;
	background: #8f8f8f59;
	border:1px solid #8f8f8f59;
	justify-content:
	space-between;
}
.new_file
{
	transition:.5s;
	background: #60c8f759;
	border:1px solid var(--blue);
	opacity:1;
}

.new_file.pulse
{
	transform:scale(1.1);
}
.invite_input_holder
{
	position:relative;
}
.invite_input_button
{
	position:absolute;
	right:.5rem;
	top:.5rem;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#0088ff;
	width:2rem;
	height:2rem;
	border-radius:100%;
	color:#fff;
	font-family:'standardFontBold';
}
.OSM
{
	position:relative;
}
.OSM .loader
{
	position:absolute;
	top:.9rem;
	right:.5rem;
	font-size:1.7rem;
}
.loading .loader .loadicon
{
	display:block !important;
}
.OSM_Results
{
	background:#fff;
	position:
	absolute;
	box-shadow:0 5px 5px
	rgba(0,0,0,0.2);
	width:100%;
	font-size:.9rem;
	max-height:12rem;
	overflow-y:auto;
	overflow-x: hidden;
	bordeR-radius: 0 0 5px 5px;
	margin-top:-4px;
}
.OSM_Results .iconify
{
	max-width:1rem;
}
.OSM_Results > div
{
	padding:.65rem;
	gap: .5rem;
	border: 1px solid #aaa;
	border-bottom-color: #eee;border-top:0;
	cursor:
	pointer;
}
.OSM_Results > div:first-child
{
	border-top:1px solid #aaa;
}
.OSM_Results > div:last-child
{
	border-radius: 0 0 5px 5px;
	border-bottom-color: #aaa;
}

.OSM_Results > div:not(.highlighted):hover
{
	background:#2196f336;
}
.OSM_Results > div:not(.highlighted):hover .iconify
{
	color:red;
}
.OSM_Result.highlighted
{
	background:#2196F3;
	color:#fff;
}
.osm_result .highlight
{
	font-family:'standardFontBold'
}
.tippy-box[data-theme~='blue']
{
  background-color: var(--blue);
  color: #fff;;
}
.tippy-box[data-theme~='blue'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: var(--blue);
}
.tippy-box[data-theme~='blue'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: var(--blue);
}
.tippy-box[data-theme~='blue'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: var(--blue);
}
.tippy-box[data-theme~='blue'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: var(--blue);
}
.easepick_planning_container
{
	cursor:
	pointer;
	display:
	flex;
	align-items:
	center;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f5faff),color-stop(100%, #f0f5fa));
	background-image: -moz-linear-gradient(#f5faff,#f0f5fa);
	background-image: -webkit-linear-gradient(#f5faff,#f0f5fa);
	background-image: linear-gradient(#f5faff,#f0f5fa);
	border: solid 1px #C8D2DC;
	border-radius:5px;
	width: 8rem;
}
.easepick_planning_container:hover
{
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #edf4fc),color-stop(100%, #dee7f1));
    background-image: -moz-linear-gradient(#edf4fc,#dee7f1);
    background-image: -webkit-linear-gradient(#edf4fc,#dee7f1);
    background-image: linear-gradient(#edf4fc,#dee7f1);
    border: solid 1px #b3c0ce;
}
.easepick_planning_container .iconify
{
	position:absolute;
	left:1.4rem;
	pointer-events:none;
}
.easepick_planning_container input
{
	cursor:pointer;
	outline:none;
	background:none;
	border:none;
	padding-left:2rem;
	height:100%;
}
.dagplanning
{
	overflow:hidden;
	height:auto;
	width:100%;
	margin:1rem 0 ;
	border:1px solid #dadee0;
}
.dagplanning_wrapper,
.dagplanning_alpha_wrapper,
.dagplanning_open_wrapper
{
	overflow:
	hidden;
	position:
	relative;
	display: grid;
	grid-template-columns: 16rem 1fr;
	width:100%;
}
.dagplanning__employees
{
	border-right:1px solid #c0c5c7; 
}
.dagplanning__employees,
.dagplanning__tasks,
.dagplanning__tasks__total,
.dagplanning__tasks__description
{
	overflow: scroll;
}
.dagplanning__tasks
{
	position: relative;
	
}


.dagplanning__employees__header,
.dagplanning__tasks__header
{
	display:
	flex;
	position:
	sticky;
	top:0;
	z-index: 444;
}
.dagplanning__header__cel,
.dagplanning__employees__cel,
.dagplanning__tasks__cel,
.dagplanning__employees__header
{
	min-height:2.5rem;
	min-width:3rem;
	max-height:2.5rem;
	width: -webkit-fill-available;
	max-width: -webkit-fill-available;
	overflow:
	hidden;
	display:
	flex;
	align-items:
	center;
	justify-content:
	center;
}
.dagplanning__employees__cel
{
	gap:.5rem;
}
.dagplanning__employees__cel img 
{
	width:2rem;
	height:2rem;
	min-width:2rem;
	min-height:2rem;
	border-radius: 50%;
}
.dagplanning__header__cel,
.dagplanning__employees__header
{
	border-right: 1px solid #dadee0;
	border-bottom:1px solid #2196F3;
    box-sizing: border-box;
	min-height: calc(2.5rem + 5px);
    background-color: #f4f5f9;
}

.dagplanning__employees__cel,
.dagplanning__employees__header
{
	min-width: 15rem;
	justify-content:
	flex-Start;
	padding: 0 .5rem;
}
.dagplanning__employees__cel .flex-col
{
	white-space: nowrap;
	font-size: .8rem;
	width: 100%;
}

.dagplanning__employees__cel,
.dagplanning__employees__tasks,
.employee_weekplanning
{
	display:
	flex;
	position: relative;
}

.dagplanning__tasks__cel.selected
{
	background-color: #e9f5ff;
}
.dagplanning__tasks__cel,
.dagplanning__employees__cel
{
	background:#fff;
	border-right: 1px solid #dadee0;
	border-bottom:1px solid #dadee0
;
}

.employee_locked .dagplanning__tasks__cel
{
	opacity: .2
}
.employee_locked .dagplanning__tasks__cel.selected
{
	opacity:1;
	color:#777 !important;
	background-color: #e9f5ff !important;
	border-top: 2px solid #2196F3 !important;
	border-bottom: 2px solid #2196F3 !important;
}

.employee_locked .dagplanning__tasks__cel.selected.start
{
	border-left: 2px solid #2196F3 !important;
}
.employee_locked .dagplanning__tasks__cel.selected.end
{
	
	border-right: 2px solid #2196F3 !important;
}

.task_selector img 
{
	width:3rem;
	height:3rem;
}
.task_selector .spop__header__title,
.task_selector_onbeschikbaarheid .spop__header__title
{
	color:#333
}

.task_selector_onbeschikbaarheid .spop__header__title
{
	margin-bottom:.5rem;
}
.spop .task
{
	height:2rem;
	width:2rem;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:'standardFontBold'
}
.spop .task:hover
{
	opacity:.5;
}
.spop .tasks-selectable
{
	margin-top:1rem;
	display:flex;
	gap:5px;
	flex-wrap: wrap;
}

.task_selector__header
{
	font-family:
	'standardFontBold';
	display:
	flex;
	align-items:
	center;
	gap:1rem;
	width:500px;
	background: #eee;
	padding: .75rem;
	border-radius: 5px;
	z-index:3
}
.task_selector .spop 
{
	padding:.5rem !important;
	
}
.dagplanning_loader
{
	position:
	absolute;
	top:0;
	z-index: 5555;
	width:100%;
	transition:1s;
	width:0;
	background:
	var(--blue);
	height:5px;
}
.dagplanning .overflow_container
{
	overflow:
	auto;
	height:100%
;
	display: grid;
}
.task_avatar
{
	font-family:'standardFontBold';
	min-width:2rem;
	min-height:2rem;
	border-radius:3px;
	display:flex;
	align-items:center;
	justify-content:center;
	
}
[draggable-shift]
{
	background:#4CAF50;
	height:2rem;
	width:100%;
	margin:.25rem !important;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:2px;
	cursor:grab;
	font-family:'standardFontBold'
}
.moving 
{
	opacity:.3;
}
.dayshiftoptions
{
	position:absolute;
	background:#fff;
	color:#222;
	padding:.5rem;
	box-shadow: 0 3px 25px ;
	border-radius:4px;
	margin-top:-6rem;
	margin-left:-1.5rem;
	display:flex;
	
	align-items:center;
	flex-direction:column;
	gap:.5rem;
	justify-content:center;
	z-index:2;
}
.dayshiftoptions:before
{
	
	content:'';
	background:#fff;
	width:.8rem;
	height:.8rem;
	bottom:-.7rem;
	position:absolute;
	left:2.8rem;
	transform:rotate(45deg) translateX(-50%)
}
.dayshiftoptions div 
{
	border-radius:4px;
	background:#eee;
	width: 8.2rem;
	height:35px;
	display:
	flex;
	align-items:
	center;
	justify-content: space-evenly;
	cursor:
	pointer;
	font-family: 'StandardFontBold';
}
.dayshiftoptions div i 
{
	pointer-events:none;
}
.dayshiftoptions div:hover
{
	background:#ddd;
}

.dayShiftDragHandle
{
	position:absolute;
	border:2px dashed var(--blue);
	z-index:33;
}
.dayShiftDragResult
{
	position: absolute;
	display:flex;
	box-shadow: 0 0 25px;
}
.draggedShiftOptionsHeader strong
{
	white-space:nowrap
}
.dayShiftDragResult div 
{
	display:flex;
	align-items:center;
	justify-content:center;
	border-bottom:1px solid #dadee0;
	border-right:1px solid #dadee0;
	
}
.draggingShift .dagplanning__employees__tasks
{
	opacity:.4
}
.draggedShiftOptionsHeader,
.overlapShiftOptionsHeader
{
	display:
	flex;
	align-items:
	center;
	justify-content:
	center;
	max-width: 26rem;
	width: 26rem;
	height: 10rem;gap:2rem;
	padding:1rem;
}
.overlapShiftOptionsHeader
{
	min-width:100%;
}
.draggedShiftOptionsHeader.tx_rx_destroy .flex-col:nth-child(2),
.draggedShiftOptionsHeader.tx_rx_destroy .flex-col:nth-child(3)
{
	display:none;
}
.draggedShiftOptionsHeader .flex-col:nth-child(2)
{
	gap:1rem !important;
	max-width:2rem;
	min-width:2rem;
	width:2rem;
}
.draggedShiftOptionsHeader.tx_swap_rx .flex-col:nth-child(2)
{
	min-height:10rem;
	justify-content:flex-end !important;
}
.draggedShiftOptionsHeader i 
{
	display:none;
}
.draggedShiftOptionsHeader i.fa-arrow-right
{
	display:block;
}
.draggedShiftOptionsHeader.tx_swap_rx i.fa-arrow-left
{
	display:block;
}
.draggedShiftOptionsHeader.tx_copy i.fa-copy,
.draggedShiftOptionsHeader.tx_copy i.fa-paste
{
	display:block;
}
.draggedShiftOptionsHeader.tx_move .tx-shift strong
{
	color:red;
	text-decoration:line-through;
}
.draggedShiftOptionsHeader.tx_copy .tx-shift strong,
.draggedShiftOptionsHeader.tx_swap_rx .tx-shift strong,
.draggedShiftOptionsHeader.tx_swap_rx .rx-shift strong,
.draggedShiftOptionsHeader.tx_copy i.fa-copy
{
	color:var(--blue);
}
.draggedShiftOptionsHeader.tx_swap_rx .rx-shift strong 
{
	display:none;
}
.draggedShiftOptionsHeader.tx_swap_rx .rx-shift strong:nth-child(4)
{
	display:block !important;
	color:#4CAF50
}
.draggedShiftOptionsHeader.tx_swap_rx .rx-shift strong:nth-child(5)
{
	display:block !important;
	color:red;
	text-decoration:line-through;
}
.draggedShiftOptionsHeader.tx_swap_rx .tx-shift strong:nth-child(4)
{
	display:block !important;
	color:#4CAF50
}
.draggedShiftOptionsHeader.tx_swap_rx .tx-shift strong:nth-child(3)
{
	display:block !important;
	color:red;
	text-decoration:line-through;
}
.draggedShiftOptionsHeader.tx_move .rx-shift strong,
.draggedShiftOptionsHeader.tx_copy .rx-shift strong,
.draggedShiftOptionsHeader.tx_copy i.fa-paste
{
	color:#4CAF50;
}
.draggedShiftOptionsHeader .flex-col,
.overlapShiftOptionsHeader .flex-col
{
	align-items:
	center;
	gap: .5rem;
}
.draggedShiftOptionsBody .btn-gray
{
	background:#eee;
	padding:.75rem;
	border-radius:4px;
	text-align:center;
	cursor:pointer;
}
.draggedShiftOptionsBody .btn-gray:hover
{
	background:#ddd;
}
.draggedShiftOptionsBody .btn-transparant
{
	padding:.75rem;
	border-radius:4px;
	text-align:center;
	padding-bottom:0;
	cursor:pointer;
	text-decoration:underline;
}
.draggedShiftOptionsBody .btn-transparant:hover 
{
	text-decoration:none;
}

.draggedShiftOptionsBody .flex-col
{
	display:
	flex;
	padding: 0 1rem;
	flex-direction:
	column;
	gap:.2rem;
}
.overlapShiftOptionsHeader img 
{
	height:2rem;
	width:2rem;
	border-radius:100%;
}
.overlapShiftOptionsHeader strong 
{
	display:flex;
	gap: 1rem;
	align-items:center;
}
.overlappingDetail
{
	gap:.5rem;
	display:flex;
	align-items:center;
}

.overlappingDetail div 
{
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:.8rem;
	display:flex;
	width:1.2rem;
	height:1.2rem;
}
.employee_open_weekplanning
{
	background:#fff;
}
.employee_open_weekplanning .dagplanning__tasks__cel
{
	flex-direction:
	column-reverse;
	padding-top: 2.4rem;
	min-height:
	fit-content;
	background:#fff;
	max-height:
	fit-content;
	height:
	auto;
	justify-content:
	flex-end
}
.employee_open_weekplanning .dagplanning__tasks__cel [draggable]
{
	min-height:2rem;
	width:calc(100% - .5rem);
	
}
.employee_open_weekplanning_cel div
{
	display:flex;
	flex-direction:column;
	justify-content:stretch;
	align-items:stretch;

}
.beschikbaarheid_wrapper > div 
{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.beschikbaarheid_wrapper .beschikbaarheid_cel 
{
	min-height:10rem;
	position:relative;
	padding:1rem;
	border-right:1px solid #ddd;
	border-bottom:1px solid #ddd;
	width:100%;
}
.beschikbaarheid_wrapper .beschikbaarheid_cel .flex-row
{
	gap:.5rem;
	align-items:center;
}
.beschikbaarheid_wrapper .beschikbaarheid_cel.otherMonth
{
	color:#888
}
.beschikbaarheid_wrapper .beschikbaarheid_cel:not(.otherMonth)
{
	background:#fff;
}
.beschikbaarheid_wrapper .beschikbaarheid_cel:hover [date-beschikbaarheid] 
{
	display:flex;
}
.beschikbaarheid_wrapper .beschikbaarheid_cel [date-beschikbaarheid] 
{
	cursor:pointer;
	position:absolute;
	background:#fff;
	border-bottom:1px solid #ddd;
	width:100%;
	height:3rem;
	display:none;
	align-items:center;
	justify-content:center;
	left:0;
	top:0;
}
.beschikbaarheid_wrapper .beschikbaarheid_cel [date-beschikbaarheid]:hover
{
	background:#f7fff8;
	color:#4CAF50;
	border-color:#4CAF50;
}
.beschikbaarheid_wrapper .beschikbaarheid_cel.selected
{
	border:1px solid #000;
}

.budgetten_wrapper > div 
{
	display:grid;
	grid-template-columns: .5fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.omzetten_wrapper > div 
{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
}
.budgetten__col__cel,
.budgetten__col__header
{
	display:flex;
	align-items:start;
	padding:.7rem 1rem;
	gap:.75rem;
	
}

.omzetten_wrapper .budgetten__col__cel
{
	height:auto;
	align-items:center;
}
.budgetten__col__cel
{
	height:5.9rem;
	background:#fff;
	border-right:1px solid #dadee0;
	border-bottom:1px solid #dadee0;
}

.budgetten__col__header
{
	border-right: 1px solid #dadee0;
	border-bottom: 1px solid #2196F3;
	box-sizing: border-box;
	min-height: calc(2.5rem + 5px);
	background-color: #f4f5f9;
	position:
	sticky;
	font-family: 'standardFontBold';
	top:0;
	z-index: 2;
	display: flex;
	flex-direction: column;
}
.budgetten__col__header .dagomzet
{
	position:absolute;
	right:1rem;
}

.budgetten__col__cel.cel_empty
{
	background:rgba(255,255,255,0.2);
}


.budgetten_wrapper .budgetten__col:nth-child(even) .budgetten__col__cel:not(.cel_empty)
{
	background:#eee;
}
.budgetten_wrapper .budgetten__col .budgetten__col__cel:nth-child(7n+1):not(.cel_empty),
.budgetten_wrapper .budgetten__col .budgetten__col__cel:nth-child(7n+0):not(.cel_empty)
{
	background:#2196f31a;
}

.budgetten_wrapper .budgetten__col:nth-child(even) .budgetten__col__cel:nth-child(7n+1):not(.cel_empty),
.budgetten_wrapper .budgetten__col:nth-child(even) .budgetten__col__cel:nth-child(7n+0):not(.cel_empty)
{
	
	background:#03355d36;
}
.budgetten__col__cel .holidaySeasons,
.budgetten__col__cel .holidays,
.budgetten__col__cel .hot,
.budgetten__col__cel .cold,
.budgetten__col__cel .accurate,
.beschikbaarheid_cel .holidaySeasons,
.beschikbaarheid_cel .holidays
{
	width:1.5rem;
	height:1.5rem;
	border-radius:5px;
	color:#fff;
	font-family:'standardFontBold';
	display:flex;
	align-items:center;
	border: 1px solid;
	justify-content:center;
}
.beschikbaarheid_cel .holidaySeasons,
.budgetten__col__cel .holidaySeasons
{
	background:#4CAF50;
}
.beschikbaarheid_cel .holidays,
.budgetten__col__cel .holidays
{
	background:#2196F3;
}
.budgetten__col__cel .accurate
{
	background:#673AB7;
}
.budgetten__col__cel .hot
{
	background:#FF5722;
}
.budgetten__col__cel .cold
{
	background:#333;
}
.budgetten__col__cel > div 
{
	gap:.5rem;
}
.budgetten__col__cel > div > .flex-row 
{
	gap:.25rem;
}

.budgetten_wrapper .budgetten__col input
{
	width:-webkit-fill-available
}

.budgetten_wrapper .budgetten__col:nth-child(even) input
{
	background:none;
	border:none;
	box-shadow:none;
	color:#888;
	border-bottom:2px solid #888;
	border-Radius:0;
}
.css__tooltip {
  position: relative;
}
.css__tooltip::after 
{
	background-color: var(--dark_blue);
	box-shadow:0px 10px 10px rgba(0,0,0,0.2);
	border-radius: 5px;
	color: #fff;
	content: attr(tooltip-content);
	min-width:8rem;
	font-family:'standardFont';
	display: none;
	padding: 10px 15px;
	width:auto;
	position: absolute;
	text-align: center;
	justify-content:center;
	z-index: 999;
}
[tooltip="child"] [tooltip-content]
{
	display:none !important;
}
.css__tooltip::before {
  background-color: #333;
  content: '';
  display: none;
  width: 15px;
  position: absolute;
  height: 15px;
  z-index: 999;
}

.css__tooltip:hover::after {
  display: flex;
}

.css__tooltip:hover::before {
  display: flex;
}

.css__tooltip.css__tooltip__top::after {
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 10px));
}

.css__tooltip.css__tooltip__top::before {
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
}

.css__tooltip.css__tooltip__bottom::after {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(100% + 10px));
}

.css__tooltip.css__tooltip__bottom::before {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(100% + 5px)) rotate(45deg);
}

.css__tooltip.css__tooltip__right::after {
  top: -.25rem;
  right: 0;
  transform: translateX(calc(100% + 10px));
}

.css__tooltip.css__tooltip__right::before {
  top: 50%;
  right: 0;
  transform: translate(calc(100% + 5px), -50%) rotate(45deg);
}

.css__tooltip.css__tooltip__left::after {
  top: 0;
  left: 0;
  transform: translateX(calc(-100% - 10px));
}

.css__tooltip.css__tooltip__left::before {
  top: 50%;
  left: 0;
  transform: translate(calc(-100% - 5px), -50%) rotate(45deg);
}
.future_disabled
{
	background:#eee;
	color:#aaa
}
.future_disabled input
{
	width:100%;
	border-color:#ccc;
}
.budgetten__dotw
{
	position:sticky;
	left:0;
	background:#fff;
	z-index:2
}


.UppyDragDrop
{
	border-radius:10px;
    border: 2px dashed #adadad;
}
.uppy-DragDrop-dragText
{
	cursor:pointer;
	color:#0169e3;
}
.uppy-DragDrop-dragText:hover
{
	text-decoration:underline;
}
.tooltip {
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  padding: 2px 5px;
  white-space: nowrap;
  z-index: 9999;
}

.sparkline--cursor {
  stroke: orange;
}

.sparkline--spot {
  fill: red;
  stroke: red;
}
.budget_result
{
	display:flex;
	justify-content:space-between;
	width:8rem;
	font-style:italic;
	padding: .6rem 0;
	border-bottom:2px solid #777
}
.fast-input-pop textarea
{
	width:100%;
}
.fast-input-pop .overflow-container
{
	overflow:
	auto;
	width:100%;
	height:100%;
	padding: 0 1rem;
	display:
	flex;
	flex-direction:
	column;
	gap:1rem;
}
.fast-input-pop label
{
	text-align:left;
	font-family:'standardFontBold';
	
}

.fast-input-pop input,
.fast-input-pop .radio-box
{
	border-radius:10rem;
	border:none;
	box-shadow:none;
	height:3rem;
	background:#eee;
	padding:1rem;
}

.fast-input-pop .flex-row > select
{
	height:3rem;
	border-radius:10rem;
	border:none;
	background:#eee;
	padding:1rem;
	
}
.fast-input-pop .radio-box
{
	display:flex;
	align-items:center;
	width:100%;
	background:#eee;
}
.fast-input-pop .radio-box select
{
	background:
	none;
	border:0;
	width:3rem;
	max-height: 1rem !important;
}
.fast-input-pop .radio-box.selected
{
	background:#e9f5ff;
	border:1px solid #0188fc;
	color:#0188fc;
	font-family:'standardFontBold'
}
.beschikbaarheid_doelgroep
{
	width:100%;
	border-top:1px solid #ddd;
	padding-top:1rem;
}
.beschikbaarheid_doelgroep h2 
{
	margin-bottom:1rem;
}
.beschikbaarheid_doelgroep__employees img 
{
	width:3rem;
	height:3rem;
	border-radius:50%
}
.title_ellipsis
{
	  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	width:550px;
}
.activity_context:after
{
	width:500px;
	font-size:1rem;
}
.invoices__activity__tracker
{
	background:#fff;
	min-height: -webkit-fill-available;
	height: -webkit-fill-available;
	display:
	flex;
	flex-direction:
	column;
	gap:4rem;
	padding: 2rem;
	width:100%;
	overflow: auto;
}
.invoices__activity__tracker__action
{
	display:flex;
	gap:1rem;
	min-width:100%;
	position:relative;
}
.invoices__activity__tracker__action[parent-id]
{
	max-height:unset;
}
.invoices__activity__tracker__action:before 
{
	border-left:1px solid #cccccc;
	content:
	'';
	left:2rem;
	z-index:0;
	top:0;
	min-width:1px;
	min-height: calc(100% + 4rem);
	position:
	absolute;
}
.invoices__activity__tracker__action:last-child:before,
.invoices__activity__tracker__action.last:before  
{
	content:
	'';
	min-height: calc(100% - 6rem);
}
.invoices__activity__tracker__action .flex-col
{
	gap:.5rem;
	width:90%;
}
.invoices__activity__tracker__action__invoker
{
	display:flex;
	align-items:center;
	gap:.5rem;
}
.invoices__activity__tracker__action__invoker img 
{
	width:1.25rem;
	border-Radius:100%;
	height:1.25rem;
}
.invoices__activity__tracker__action__icon
{
	width:4rem;
	height:4rem;
	min-width: 4rem;
	min-height: 4rem;border:10px solid #fff;
	z-index:1;
	background:#e7e7e7;
	color:#454d60;
	display:
	flex;
	align-items:
	center;
	justify-content:
	center;
	border-radius:100%;
	font-size:1.5rem;
}

.invoices__activity__tracker__action__title__main
{
	margin-left:-2.2rem
}
.invoices__activity__tracker__action__title__main .invoices__activity__tracker__action__icon
{
	
	width:2rem;
	height:2rem;
	margin-right:.5rem;
	min-width: 2rem;
	min-height: 2rem;border:5px solid #fff;
}
.invoices__activity_message
{
	background:#2196F3;	
	color:#fff;	
}

.invoices__activity_unpayed,
.invoices__activity_uncontrol
{
	background:#F44336;	
	color:#fff;	
}

.invoices__activity_payed,
.invoices__activity_control
{
	background:#4CAF50;	
	color:#fff;	
}

.invoices__activity__tracker__action__message
{
	background: #eaf6ff;
	padding:1rem;
	border-radius:10px;
	color:#293040;
	margin:.5rem 0 ;
	min-width:100%;
	display:
	block;
	overflow: auto;
	max-height: 10rem;
}
.invoices__activity__tracker__action__message span 
{
	word-break: break-all;
}
.invoices__activity__tracker__action__attachment
{
	display:
	flex;
	align-items: flex-start;
	gap:1rem;
	align-items: center;
	border-Radius:10px;
	padding:1rem;
	width:100%;
	position:
	relative;
	border:1px solid #ccc;
}
.invoices__activity__tracker__action__attachment__senders
{
	padding-left:1rem;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: flex-end;
	overflow:auto;
	overflow-y:hidden;
}
.invoices__activity__tracker__action__attachment__senders img 
{
	width:2.5rem; 
	border-radius:100%;
	border:3px solid #fff;
	margin-left:-.75rem;
	transition:.1s;
}

.invoices__activity__tracker__action__attachment__senders img:hover
{
	transform:scale(1.1);
}
.invoices__activity__tracker__action__attachment a.btn
{
	color:var(--dark_blue);
}
.invoices__activity__tracker__action__attachment a.btn:hover
{
	text-decoration:none;
}
.invoices__activity__tracker__action__attachment:hover
{
	border-color:#777;
}

.invoices__activity__tracker__action__attachment:before
{
	content:
	'';
	position:
	absolute;
	width:2rem;
	left:-49px;
	top: 0rem;
	height:2rem;
	border-radius:0 20px;
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
.invoices__activity__tracker__no_results
{
	background:#2196f31c;
	color:var(--blue);
	width:100%;
	font-family:'standardFontBold';
	font-size:1.4rem;
	padding:2rem;
	border-radius:10px;
}
.verkoopfacturen
{
	display:
	grid;
	grid-template-columns:20rem 1fr;
	overflow: hidden;
}
.img_upload_zone
{
	border:1px solid #9b9b9b;
	box-shadow:inset 0 3px 3px rgba(0,0,0,0.1);
	background:#f7f7f7;
	border-radius:5px;
	padding:.5rem;
	display:flex;
	align-items:center;
	gap:1rem;
}
.img_upload_zone img 
{
	width: 3rem;
	height: 3rem;
	border-radius:5px;
}
.invoicekeeper__src 
{
	background:var(--dark_blue);
	font-family:'standardFontBold';
	margin-right:-.35rem;
	color:#fff;
	padding: 0.1rem .5rem;
	border-radius:1rem;
}
.settings__panel
{
	background:#fff;
	min-height: -webkit-fill-available;
	height: -webkit-fill-available;padding:2rem;
}
.settings_panel__section
{
	min-height: -webkit-fill-available;
	max-height: -webkit-fill-available;
	height: -webkit-fill-available;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
}
.settings_panel__section__grid
{
	color:var(--dark_blue);
	display:grid;
	grid-template-columns: 1fr;
	gap: .75rem;
	overflow: auto;
	max-height: -webkit-fill-available;
	flex-shrink: 1;
	flex-grow: 0;
	min-width: -webkit-fill-available;
}
.settings_panel__section__grid__context span 
{
	color:#002e5387;
}
.flex-wrap
{
	flex-wrap:wrap;
}
.syncstat
{
	background: #434c55; /* Old browsers */
	background: -moz-linear-gradient(top, #434c55 0%, #252a30 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #434c55 0%,#252a30 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #434c55 0%,#252a30 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434c55', endColorstr='#252a30',GradientType=0 ); /* IE6-9 */
	border-radius:5px;
	overflow:hidden;
	color:#fff;
	text-shadow: 0 1px #111;
}
.syncstat div
{
	font-family:'standardFontBold';
	padding:.5rem 1rem;
}
.syncstat_green div:last-child
{
	background: #33cf57; /* Old browsers */
	background: -moz-linear-gradient(top, #33cf57 0%, #27a846 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #33cf57 0%,#27a846 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #33cf57 0%,#27a846 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cf57', endColorstr='#27a846',GradientType=0 ); /* IE6-9 */
}
.syncstat_gray div:last-child
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,898989+100 */
	background: #b5bdc8; /* Old browsers */
	background: -moz-linear-gradient(top, #b5bdc8 0%, #898989 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #b5bdc8 0%,#898989 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #b5bdc8 0%,#898989 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#898989',GradientType=0 ); /* IE6-9 */
}
.syncstat_red div:last-child
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
	background: #ff3019; /* Old browsers */
	background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}


.syncstat_blue div:last-child
{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#499bea+0,207ce5+100;Blue+3d+%237 */
background: rgb(73,155,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */
}


.line{
  height: 3px;
  margin: 1rem 0;
  width: 35%;
  background: #efefef;
}
  
.line .inner{
    width: 100%;
    height: inherit;
    background: var(--blue);
    animation: slide 2s ease-in-out infinite;
  }

@keyframes slide{
  0%{
    transform-origin: left;
    transform: scalex(0.3);
  }
  12.5%{
    transform-origin: left;
    transform: scalex(0.2);
  }
  25%{
    transform-origin: left;
    transform: scalex(1);
  }
  26%{
    transform-origin: right;
    transform: scalex(1);
  }
  50%{
    transform-origin: right;
    transform: scalex(0.3);
  }
  62.5%{
    transform-origin: right;
    transform: scalex(0.2);
  }
  75%{
    transform-origin: right;
    transform: scalex(1);
  }
  76%{
    transform-origin: left;
    transform: scalex(1);
  }
  100%{
    transform-origin: left;
    transform: scalex(0.3);
  }
}
.filter_save
{
	box-shadow: -25px -10px 15px rgba(0,0,0,0.2);
	padding: 1rem;
	border-right:1px solid #dfe5e9;
	grid-column: 1;
}
.filter_save .btn
{
	margin:.5rem;
	border-Radius:2rem;
	cursor:pointer;
	width: 90%;
	text-align:center;
}
.filter_save .btn-green
{
	background: #2196F3;
	padding:.5rem;
	color:#fff;
	font-family:'standardFontBold';
}
.filter_save .btn-gray
{
	background: #eeeeee;
	padding:.5rem;
}
.filter_save .btn-transparant:hover
{
	text-decoration:underline
}
.mail2pdf
{
	grid-row: 3;
	margin-top:.5rem;
	flex-wrap: wrap;
	gap: .5rem;
}

.mail2pdf .switch
{
	margin-left:-.7rem
}
.mail2pdf a 
{
	margin:0;
	margin-right:.5rem;
}
.invoicekeeper__mailbody
{
	height:-webkit-fill-available;
	background:#fff;
	padding:2rem;
	color:var(--dark_blue);
	display:grid;
	grid-template-rows: auto 1fr;
}
.invoicekeeper__mailbody__meta
{
	margin-bottom:1rem;
}
.invoicekeeper__mailbody__meta time 
{
	color:var(--dark_blue);
	opacity:.75;
}
.invoicekeeper__mailbody__body
{
	background:#eaf6ff;
	padding:2rem;
	border-radius:1rem;
	height:auto;
	overflow:auto;
	
}
.swizzard__context xsmall
{
	font-size:1rem;
	opacity:.5;
}
.setting-status
{
	font-size:1rem;
	margin-left:.5rem;
}
.setting-status.status-active
{
	color:var(--blue);
}
.setting-status.status-inactive
{
	color:red;
}
.install_prompt_wrapper
{
	border-radius:1rem;
}
.install_prompt
{
	background:#111111a3;
	height: 100%;
	backdrop-filter:blur(10px);
	border-radius:1rem;
	padding:2rem;
	flex-direction:column;
	gap:1.5rem;
	display: flex;
	color:#fff;
	text-align:center;
	justify-content:center;
	align-items:center;
}
.install_prompt p 
{
	opacity:.5;
}
.install_prompt h2 
{
	
	font-family:'standardFontBold'
}
.install_prompt a
{
	cursor:pointer;
}
.install_prompt #app_install
{
	
	background:var(--blue);
	padding:1rem;
	border-radius:2rem;
	font-family:'standardFontBold'
}
.install_prompt #app_install:hover
{
	background:#5eb8ff;
}
.install_prompt #app_install_dismiss:hover 
{
	text-decoration:underline
}
.quick_grid
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 11rem));
	gap: 2rem;
	margin-top:1rem;
}

.app_tile:active .app_bg
{
	box-shadow:none !important;
	transform:scale(0.8) !important
}
.app_tile:active .app_bg:before
{
	transition:.2s;
	opacity:0;
}
.app_tile,
.app_tile .app_bg
{
	cursor:pointer;
	display:flex;
	position:relative;
	flex-direction:column;
	justify-content:space-around;
	
}
.app_tile .app_bg i 
{
	font-size:4rem;
}
.app_tile .app_bg
{
	transition:.2s ease-in-out;
	border-radius: 1rem;
	padding: 2rem;
	width: 11rem;
	gap:1rem;
	opacity: .75;
	height: 11rem;
	color:#fff !important;
	display: flex;
	align-items: center;
	text-align:cetner;
}
.app_tile .app_bg h3
{
	text-align:center;
}

.app_tile .app_bg.green
{
	background:#4CAF50;
}
.app_tile .reflection .app_bg.green
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4caf50+0,008de5+100&1+0,0+100 */
background: -moz-linear-gradient(top, rgba(76,175,80,1) 0%, rgba(0,141,229,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(76,175,80,1) 0%,rgba(0,141,229,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(76,175,80,1) 0%,rgba(0,141,229,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4caf50', endColorstr='#00008de5',GradientType=0 ); /* IE6-9 */
}
.app_tile .app_bg.blue
{
	background:#2196f3;
}
.app_tile .reflection .app_bg.blue
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#008de5+0,008de5+100&1+0,0+100 */
background: -moz-linear-gradient(top, rgba(0,141,229,1) 0%, rgba(0,141,229,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,141,229,1) 0%,rgba(0,141,229,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,141,229,1) 0%,rgba(0,141,229,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008de5', endColorstr='#00008de5',GradientType=0 ); /* IE6-9 */
}
.app_tile .app_bg.yellow
{
    background:#FFC107
}
.app_tile .app_bg.red
{
	background: rgb(255,48,25); /* Old browsers */
}
.reflection
{

	position:relative;
}
.reflection .app_bg:after
{
	display:none !important;
}
.reflection .app_bg,
.reflection .werkplaats_bg
{
    opacity: 0.30!important;
    height:1rem;
	border-radius: 1rem 1rem 0 0 ;
    overflow:hidden;
    filter: alpha(opacity='20')!important;
}
.app_tile:hover .app_bg{
    opacity: 1;
    transform: translateY(-10px);
}
.app_tile:hover .reflection .app_bg{
	opacity:.1 !important;
    transform: translateY(5px) ;
}



.waardebonnen_artikellen 
{
	margin: 1rem 0;
	display: grid;
	/* padding-right: 1rem; */
	border: 1px solid #eceef0;
	overflow: auto;
	height: -webkit-fill-available;
	grid-template-columns: repeat(auto-fit, minmax(500px, .5fr));
	grid-auto-rows: min-content;
}

.waardebonnen_artikellen__artikel
{
	gap:1rem;
	display:
	flex;
	outline: 1px solid #EBEEF0;
	padding:1rem;
	background:#fff;
	cursor:
	pointer;
	height: auto;
}

.waardebonnen_artikellen__artikel .flex-col
{
	justify-content:center;
	gap:1rem;
	width: 100%;
}
.waardebonnen_artikellen__artikel__editable.artikel_img img
{
	min-width:10rem;
	min-height:10rem;
	max-height: 10rem;
	max-width: 10rem;
	position:relative;
}


.waardebonnen_artikellen__artikel__editable.artikel_img img::before {

    content: '\f03e';
	font-size:4rem;
    font-Weight:900;
	font-family: "Font Awesome 5 Free";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius:5px;
	line-height: 10rem;
	background-color: #e6f4ff;
	color: currentColor;
	text-align: center;
	display: block;
	width: 10rem;
	height: 10rem;
	overflow: hidden;
}
.waardebonnen_artikellen__artikel__editable.artikel_img img::after 
{
    content: '\f05e';
	font-size:2rem;
	padding:5px;
	top:5rem;
	background:#e6f4ff;
	border-radius:100%;
	color:#F44336;
	left:5rem;
    font-Weight:900;
	font-family: "Font Awesome 5 Free";
	position: absolute;
}

.remote-content
{
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.swizzard__context.searchbox
{
	align-items:unset;
}

.swizzard__context.searchbox .flex-col .search
{
	margin-top:.75rem;
}
#artikelen_holder
{
	display:grid;
	gap:1rem;
	max-height:-webkit-fill-available;
	overflow:hidden;
	margin-top: 1rem;
}
#artikelen_holder__artikelen
{
	overflow-y: auto;
	overflow-x: hidden;
	height:auto;
	max-height: 21rem;
	width:100%;
}

#artikelen_holder__artikelen img
{
	min-width:6rem;
	min-height:6rem;
	max-height: 6rem;
	max-width: 6rem;
	position:relative;
}


#artikelen_holder__artikelen img::before {

    content: '\f03e';
	font-size:3rem;
    font-Weight:900;
	font-family: "Font Awesome 5 Free";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius:5px;
	line-height: 6rem;
	background-color: #ffffff;
	text-align: center;
	display: block;
	width: 6rem;
	height: 6rem;
	overflow: hidden;
}
#artikelen_holder__artikelen img::after 
{
    content: '\f05e';
	font-size:1.5rem;
	padding:5px;
	top:3rem;
	background:#ffffff;
	border-radius:100%;
	color:#F44336;
	left:3rem;
    font-Weight:900;
	font-family: "Font Awesome 5 Free";
	position: absolute;
}

#artikelen_holder .abtn
{
	width:fit-content !important;
}
.settings_panel__section__grid__setting textarea
{
	width:100%;
	height:8rem;
	padding: .5rem;
}
.settings_panel__section__grid__setting [disabled]
{
	border:1px solid #cbced4;
	border-radius:5px;
	padding:.75rem;
	background:#eee;
	color:#888 !important;
}
.dataprocessed i 
{
	font-size:1.85rem;
}
.dataprocessed
{
	align-items:center;
	gap:.85rem;
}
.dataprocessed span 
{
	font-family:'standardFontBold'
}
.waardebonnencentrum_row td
{
	width:100%;
}
.waardebonnencentrum_item
{
	min-width:100%;
	background:#fff;
	border:1px solid #ddd;
	margin-bottom:.5rem;
	padding:1rem;
	display:grid;
	grid-template: 1fr / 3rem  1fr;
	gap:1rem;
}
.waardebonnencentrum_item_principal 
{
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.validTime
{
	font-family:'standardFontBold';
	white-space:nowrap;
	grid-row-end: span 5;
}
.waardebonnencentrum_item_craator
{
	align-items:start;
	grid-row-end: span 2;
}
.waardebonnencentrum_item_craator i 
{
	width:3rem;
	height:3rem;
	font-size:1.5rem;
	background:#eee;
	
	border-radius:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}
.waardebonnencentrum_item_craator img 
{
	width:3rem;
	border-radius:100%;
	height:3rem;
}

.waardebonnencentrum_item_invoker
{
	font-family:'standardFontBold';
}
.waardebonnencentrum_item_type
{
	display:flex;
	gap:.5rem 1rem;
	flex-wrap:wrap;
	font-family:'standardFontBold';
}
.waardebonnencentrum_item_invoker > span
{
	background:var(--dark_blue);
	padding:0 .5rem;
	margin-right:.5rem;
	font-family:'standardFontBold';
	border-radius:10px;
	color:#fff;
}
.waardebonnencentrum_item_waardebon
{
	background:#eeeeeea8;
	width:100%;
	border-radius:5px;
	grid-column-end: span 2;
}

.waardebonnencentrum_item_waardebon_items
{
	gap:2rem;
	flex-wrap:wrap;
	padding: 1rem;
	position: relative;
	display: flex;
}
.waardebonnencentrum_item_waardebon_item:hover img
{
	transform:scale(1.4);
}
.rd 
{
	display:inline-block;
	position:relative;
}

.waardebonnencentrum_item_waardebon_item 
{
	display:flex;
	flex-direction:column;
	justify-content:start;
	width:10rem;
	align-items:center;
	text-align:center;
	gap:1rem;
}
.waardebonnencentrum_item_waardebon_item img 
{
	width:100px;
	height:100px;
	transition:.1s;
}
.waardebonnencentrum_item_waardebon_item h2 
{
	font-weight: 700;
    margin-top: -2rem;
    box-shadow: 0 0px 20px rgb(0 0 0 / 40%);
    border-radius: 100%;
	width:2rem;
	background:var(--dark_blue);
	height:2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position:absolute;
	transition:.1s;
	transform:translateX(-50%);
}
.waardebonnencentrum_item_waardebon_item  h4
{
	text-align:center;
}
.waardebonnencentrum_item_waardebon_item:hover .tagcount
{
	display:none;
}
.waardebonnencentrum_item_waardebon_item:hover .tagprice
{
	display:flex;
}
.waardebonnencentrum_item_waardebon_item:hover h2
{
	width:4rem;
	height:4rem;
	transform:translate(-50%, -30%);
}
.waardebonnencentrum_item_waardebon_item .tagcount,
.waardebonnencentrum_item_waardebon_item .tagprice
{
	font-family: 'standardFontBold';
	font-size: 1.25rem;
	color:#fff;
}
.waardebonnencentrum_item_waardebon_item .tagprice
{
	font-size:1rem;
	display:none;
}
.waardebonnencentrum_item_waardebon_code
{
	padding: 1rem;
	border-bottom:1px solid #fff;
	margin-bottom:1rem;
}
[clipboard-copy]
{
	cursor:pointer;
	transition:.1s ease-in-out;
}

[clipboard-copy]:hover
{
	text-decoration:underline
}
.waardebonnencentrum_item_waardebon_code h4,
.waardebonnencentrum_item_waardebon_code span
{
	display:flex;
	align-items:center;
}
.waardebonnencentrum_item_props
{
	display:flex;
	gap:1rem
}
.waardebonnencentrum_item_props .color-blue:before
{
    content: '\f00c';
	display:inline-block;
	min-width:1.5rem;
    font-Weight:900;
	font-family: "Font Awesome 5 Free";
}
.waardebonnencentrum_item_props .color-gray
{
	
	color:var(--dark_blue);
	opacity:.5;
}
.waardebonnencentrum_item_props .color-gray:before
{
    content: '\f00d';
    display:inline-block;
    min-width: 1.3rem;
    padding-left: .2rem;
    font-Weight:900;
    font-family: "Font Awesome 5 Free";
}

.waardebonnencentrum_item_activity
{
	position:relative;
	width:calc(100% - 4rem);
	margin-left:2rem;
	grid-column-end: span 2;
	height: auto;
	padding-bottom: 1rem;
}

.waardebonnencentrum_item_activity .waardebonnencentrum_item_activity_timeline_item.right .timeline_item_date
{
	right:0;
}
.waardebonnencentrum_item_activity .waardebonnencentrum_item_activity_timeline_item.left .timeline_item_date
{
	left:0;
}
.waardebonnencentrum_item_activity .waardebonnencentrum_item_activity_timeline_item .timeline_item_date
{
	margin-top:-.5rem;
}

.waardebonnencentrum_item_activity_timeline
{
	margin-top: 1rem;
}
.waardebonnencentrum_item_activity_timeline progress
{
	margin-top:-.1rem;
	position:absolute;
	min-width: 100%;
}
.waardebonnencentrum_item_activity_timeline_item
{
	display:flex;
	flex-direction:column;
	gap:.5rem;
	align-items:center;
	margin-left: -1.5rem;
}

.waardebonnencentrum_item_activity_timeline_item:after
{
	content:'';
	left: var(--data-left);
	opacity:0;
	transform:translateX(-50%) scale(2.5);
	position:absolute;
	bottom: -1.45rem;
	width:.5rem;
	z-index: 2;
	height:.5rem;
	border:3px solid #fff;
	background:var(--dark_blue);
	border-radius:100%;
	transition:.2s
}
.waardebonnencentrum_item_activity_timeline_item:hover:after
{
	transform:translateX(-50%) scale(1);
	opacity:1;
}

.waardebonnencentrum_item_activity .timeline_item_avatar 
{
	/* width: 3rem; */
	/* height: 3rem; */
	background:#eee;
	border-radius:100%;
	transition:.1s ease-in-out;
}
.waardebonnencentrum_item_activity .timeline_item_avatar img
{
	
	border:3px solid #fff;
}
.waardebonnencentrum_item_activity_timeline_item > i 
{
	background:#4CAF50;
	border:5px solid;
	color:#fff;
	width:2rem;
	height:2rem;
	display:flex;
	display: none;
	align-items:center;
	justify-content:center;
	font-size:.75rem;
	border-radius:100%;
	text-align:center;
}
.waardebonnencentrum_item_activity_timeline_item:hover 
{
	
	z-index:9;
}
.waardebonnencentrum_item_activity_timeline_item:hover .timeline_item_avatar
{
	transform:scale(1.2);
}
.waardebonnencentrum_item_activity_timeline_item:hover > i 
{
	display:flex;
}
.waardebonnencentrum_item_activity .timeline_item_avatar img 
{
	width: 3rem;
	height: 3rem;
	border-radius:100%;
}
.waardebonnencentrum_item_activity progress[value] { 
    -webkit-appearance: none; 
    appearance: none;
	height:4px;
}
.waardebonnencentrum_item_activity progress::-webkit-progress-bar {
  background-color: #d2d2d2;
	border-radius:5px;
}
.waardebonnencentrum_item_activity progress::-webkit-progress-value {
  background-color: #2196F3 !important;
	border-radius:5px;
}

.waardebonnencentrum_item_activity progress::-moz-progress-bar {
  background-color: #2196F3;
	border-radius:5px;
}
.waardebonnencentrum_item_activity .redeemed progress::-webkit-progress-value {
  background-color: #4CAF50 !important;
	border-radius:5px;
}

.waardebonnencentrum_item_activity .redeemed progress::-moz-progress-bar {
  background-color: #4CAF50 !important;
	border-radius:5px;
}
.waardebonnencentrum_item_activity .expired progress::-webkit-progress-value {
  background-color: #F44336 !important;
	border-radius:5px;
}

.waardebonnencentrum_item_activity .expired progress::-moz-progress-bar {
  background-color: #F44336 !important;
	border-radius:5px;
}
.timeline_valid
{
	margin-top: 1rem;
}
.timeline_expiry
{
	margin-top: 1rem;
}
.tippy_wide
{
	white-space:nowrap
}
.tippy-box[data-theme~='waardebonnen'] 
{
	background-color:#fff;
	border-color:#fff;
	color:var(--dark_blue);
	font-size:1rem;
	display:flex;
	flex-direction:flex-col;
	gap:1.5rem;
	box-shadow: 0 0 10px rgba(0,0,0,0.2)
}
.tippy-box[data-theme~='wb_black']
{
	color:#fff;
	background:var(--dark_blue)
}
.tippy-box[data-theme~='waardebonnen'] .tippy-arrow
{
	color:#fff;
}
.tippy-box[data-theme~='wb_black'] .tippy-arrow
{
	color:var(--dark_blue)
}

.tippy-box[data-theme~='waardebonnen'] .tippy-content
{
	display:flex;
	flex-direction:column-reverse;
	overflow:auto;
	max-height:200px;
	padding:0;
}
.tippy-box[data-theme~='waardebonnen'] 
.tippy-el
{
	display:flex;
	align-items:center;
	gap: .5rem;
	padding:.5rem;
	border-top:1px solid #eee;
}
.timeline_item_avatar
{
	display:flex;
	align-items:center;
}
.tippy-box[data-theme~='waardebonnen'] 
.tippy-el:last-child
{
	border:none;
}
.tippy-box[data-theme~='waardebonnen'] 
.tippy-el img
{
	width:2rem;
	height:2rem;
	border-radius:100%;
}
.timeline_item_avatar_counter
{
	right:0;
	bottom:0;
	position:absolute;
	background:red;
	color:#fff;
	font-family:'standardFontBold';
	width:1.5rem;
	height:1.5rem;
	font-size:.9rem;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius: 100%;
}
.timeline_item_avatar_counter:before
{
	content:'+'
}
.waardebonnencentrum_item_waardebon_code .relative_cm
{
	display:none;
	margin-top:.5rem
}
.timeline-items
{
	display:flex;
	flex-wrap:wrap;
	height: auto;
	width: 100%;
	position: relative;
	z-index: 2;
}
.waardebon_activiteit_header
{
	display:flex;
	margin-top:1rem;
	gap:2rem;
	width:100%;
}
.waardebon_activiteit_header >div::-webkit-scrollbar {
  display: none;
}
.waardebon_activiteit_header > div
{
	font-size:1rem;
	width:100%;
	align-items:center;
	overflow: auto;
	gap:1.2rem;
	/* border-bottom: 1px solid #000a3f29; */
}
.waardebon_activiteit_header > div > div 
{
	display:flex;
	border-bottom:2px solid transparent;
	padding-bottom:.5rem;
	gap:.5rem;
	cursor:pointer;
	white-space: nowrap;
}
.waardebon_activiteit_header > div > div:hover
{
	color:var(--blue);
}
.waardebon_activiteit_header > div > div.active
{
	border-bottom:2px solid var(--blue);
	color:var(--blue);
	cursor:default;
}
.waardebonnencentrum_item_activity_timeline_item
{
	z-index:2;
	transition: .2s;
}
.waardebonnencentrum_item_activity_timeline_item.hidden
{
	display:block !important;
	transform: scale(.3);
	pointer-events:none;
	z-index:1;
}
.waardebonnencentrum_item_activity_timeline_item :after
{
	content:' ';
	transition:.2s;
	background:#000a3f;
	opacity:0;
	border:2px solid #fff;
	border-radius:100%;
	position:absolute;
	pointer-events:none;
	left:0;
	top:0;
	min-height:3rem;
	min-width:3rem;
}
.waardebonnencentrum_item_activity_timeline_item.hidden :after
{
	opacity:1;
}
.sticky-top
{
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 3;
}
.sticky-left
{
	position: sticky;
	left: 0;
	background: #fff;
	z-index: 2;
}
.inlineheader th,
.inlineheader td
{
	background:#e5f7ff !important;
}
.inlinesubheader th,
.inlinesubheader td
{
	
	background:#f6fcff !important;
}
.inlinesubheader:not(:nth-child(3))  th
{
	padding-left:5rem;
}
.permissions_grid th > div
{
	font-family:'standardFontBold' !important;
}
.impose-center td
{
	text-align:center;
}
.impose-center td span
{
	text-align:left;
}
.roleselector
{
	margin-top:0 !important;
}
.noti_tags
{
	display:flex;
	flex-wrap:wrap;
	margin-top:.75rem;
	gap: .5rem;
}

.noti_tags .noti_tags_tag
{
	background:#0000004f;
	
	border-radius:15px;
	padding:.25rem .75rem;
	display:flex;
	align-items:center;
	gap:.5rem;
}
.noti_tags .noti_tag_illustration
{
	display:flex;
	align-items:center;
}

.noti_tags .noti_tags_tag_txt
{
	display:none;
}
.noti_tags:hover .noti_tags_tag_txt
{
	display:flex;
}
.app__page_header__buttons
{
	gap: 1rem;
	margin: 0 2rem;
}
.app__page_header__buttons > div
{
	padding:.5rem;
	font-size:1.1rem;
	cursor: pointer;
}
.app__page_header__buttons > div.inactive
{
	cursor:initial;
	opacity:.2;
}
.app__page_header__buttons > div.inactive svg
{
	pointer-events:none
}
.app__page_header__buttons > div:not(.inactive):hover
{
	color:var(--blue);
}
.app__page_header__buttons > div.active 
{
	color:var(--blue);
	border-bottom:2px solid var(--blue);
	font-family:'standardFontBold'
}
.stats_window,
.stats_leaderboard
{
	border: 1px solid #000a3f;
	margin-bottom: 1rem;
	border-radius: 2px;
	position: relative;
	overflow:hidden;
	border-radius: 4px;
	background:#fff;
	scroll-snap-align: none;
}
#leaderboard_artikelen img
{
	background:none;
}
.stats_leaderboard .stats_window__header
{
	background:#393f4c;
	color:#fff;
}
.stats_window .stats_window__header h1
{
	display:flex;
	align-items:center;
	gap:1rem;
}
.stats_window__header
{
	background: #eeeeeea8;
	padding:1.5rem 2rem;
	position: sticky;
	top: 0;
}
.stats_window__header h1 .iconify
{
	color:var(--blue)
}
.stats_window__header p 
{
	margin-top:1rem;
	margin-right: auto;
}
.stats_window__legend
{
	margin:2rem;
	display:flex;
	gap:4rem;
	justify-content:flex-end;
	flex-wrap: wrap;
}
.stats_window__legend__item
{
	position:relative;
}

.stats_window__legend__item h3 
{
	display:flex;
	font-size:2rem;
	align-items:center;
}
.stats_window__legend__item_dif
{
	border-radius:20px;
	font-size:1rem;
	display:flex;
	align-items:center;
	margin-left: 1rem;
	gap:.5rem;
	padding:.2rem .75rem;
}
.stats_window__legend__item .d
{
	border:1px solid red;
	color:red;
}
.stats_window__legend__item .u
{
	border:1px solid #4CAF50;
	color:#4CAF50;
}
.stats_window__legend__item .s
{
	border: 1px solid #9e9e9e;
	color: #9e9e9e;
}

.stats_window__legend__item h3:after
{
	content:' ';
	min-width:.75rem;
	min-height:.75rem;
	top:50%;
	transform:translateY(-50%);
	left:-1.75rem;
	position:absolute;
}
[ctype="line"] .stats_window__legend__item h3:after
{
	border-radius:100%
}

.legend__item_blue :after
{
	background:#00b9ff;
}
.legend__item_green :after
{
	background:#4caf50;
}
.legend__item_red :after
{
	background:#f44336;
}
.legend__item_purple :after
{
	background:#9C27B0;
}
.legend__item_darkblue :after
{
	background:#3F51B5;
}
[data-before]:before
{
	content:attr(data-before)!important;
}
[view-offset]
{
	text-transform: uppercase;
}
.stats_window__scale
{
	display:flex;
	padding:1rem 2rem ;
	margin-top:-1rem;
	border-top:1px solid #838383;
	justify-content:space-between
}
.wbn img
{
	position:relative;
    width: 7rem;
    height: 7rem;
	
}
.wbn img:before
{
	content: '\f03e';
    font-size: 3rem;
    font-Weight: 900;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    line-height: 7rem;
    background-color: #595b6e;
    text-align: center;
    display: block;
    width: 7rem;
    height: 7rem;
    max-width: 7rem;
    max-height: 7rem;
    overflow: hidden;
}
.stats_leaderboard
{
	background:#393f4c;
}
.stats_window strong
{
	margin-top:.5rem;
	font-size:1.3rem;
	text-transform:UPPERCASE;
	display:block;
}
.stats_window__leaderboard_item 
.stats_window__leaderboard_item_context:before
{
	content:'';
	max-width:3rem;
	min-width:3rem;
	width:3rem;
	text-align: center;
}
.stats_window__leaderboard_item
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding: 1rem;
	min-width: -webkit-fill-available;
	width: min-content;
	position: relative;
	color:#fff;
}
.stats_window__leaderboard_item > .flex-row 
{
	gap: 1rem;
}
.stats_window__leaderboard_item > .flex-row span
{
	color:#ddd;
	font-size:.9rem;
}
.stats_window__leaderboard_item_context
{
	display:flex;
	gap:1rem;
	align-items:center;
	position: sticky;
	left: 1rem;
	background:#393f4c;
	z-index: 2;
}
.stats_window__leaderboard_item_context img 
{
	margin-bottom:unset;
}
.leader_avatar_wrapper
{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:1rem;
	background-size:contain;
	background-repeat:no-repeat
	
}
.stats_window__leaderboard_item
{
	counter-increment: css-counter 1;
	
}
.stats_window__leaderboard_item:nth-child(1)
.leader_avatar_wrapper
{
	background-image:url('/public/img/leaderboard/1.png');

}
.stats_window__leaderboard_item:nth-child(2)
.leader_avatar_wrapper
{
	background-image:url('/public/img/leaderboard/2.png');
}
.stats_window__leaderboard_item:nth-child(3)
.leader_avatar_wrapper
{
	background-image:url('/public/img/leaderboard/3.png');
}
.stats_window__leaderboard_item
.stats_window__leaderboard_item_context:before 
{	
	font-family:'standardFontBold';
	content:'#' counter(css-counter);
}
.stats_window__leaderboard_item:nth-child(1)
.stats_window__leaderboard_item_context:before 
{
	font-size:2.5rem;
}
.stats_window__leaderboard_item:nth-child(2)
.stats_window__leaderboard_item_context:before 
{
	font-size:2rem;
}
.stats_window__leaderboard_item:nth-child(3)
.stats_window__leaderboard_item_context:before 
{
	font-size:1.5rem;
}
.stats_window__leaderboard_item:nth-child(1),
.stats_window__leaderboard_item:nth-child(1)
.stats_window__leaderboard_item_context
{
	background:#2196F3;
}
.stats_window__leaderboard_item:nth-child(2),
.stats_window__leaderboard_item:nth-child(2)
.stats_window__leaderboard_item_context
{
	background:#2e81ca;
}
.stats_window__leaderboard_item:nth-child(3),
.stats_window__leaderboard_item:nth-child(3)
.stats_window__leaderboard_item_context
{
	background:#346a9f;
	
}
.stats_filtering
{
	margin-top:1rem;
	height:3rem;
	display:flex;
	align-items:center;
	border:1px solid var(--dark_blue);
	padding: 0;
	color:var(--dark_blue);
	padding-right:1rem;
}
.stats_filtering svg 
{
	font-size:3rem;
	height:1rem;
}

.stats_filtering select
{
	background:none;
	font-size:1rem;
	height:100%;
	color:var(--dark_blue);
	width:auto;
	margin:0;
	border:none;
}
.stats_leaderboard .stats_filtering
{
	color:#fff;
	border-color:#fff;
}
.stats_leaderboard .stats_filtering select
{
	color:#fff;
}
.stats_window__leaderboard_item_cel
{
	width:6.5rem;
	white-space: nowrap;
}
.stats_window__leaderboard_item_context h2
{
	width: 19rem;
	font-size:1.3rem;
}
.stats_window__leaderboard_item_cel h3,
.stats_window__leaderboard_item_context h2
{
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	
}
.leaderboard_context
{
	display:flex;
	flex-direction:column;
	gap:.25rem;
	padding:.3rem 0;
	padding-right:1rem;
}
.leaderboard_context .flex-row
{
	gap:.35rem;
}
.leaderboard_context progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 15px;
}
.leaderboard_context progress[value]::-webkit-progress-bar {
  background-color: #fff;
  border-radius: 32px;
	padding:3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.leaderboard_context progress[value].red::-webkit-progress-value {
	background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #F44336, #f44);
	border-radius: 32px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
}
.leaderboard_context progress[value].green::-webkit-progress-value {
	background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #4CAF50, #4CAF50);
	border-radius: 32px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
}
[mobile-visible]
{
	display: none;
}

.dot-stretching {
	position: relative;
	width: 10px;
	min-width: 10px;
	height: 10px;
	min-height: 10px;
	border-radius: 5px;
	margin: 0 1rem;
	background-color: #f9566e;
	color: #ffffff;
	transform: scale(1.25, 1.25);
	animation: dot-stretching 2s infinite ease-in;
}
  .dot-stretching::before, .dot-stretching::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
  }
  .dot-stretching::before {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #f9566e;
	color: #ffffff;
	animation: dot-stretching-before 2s infinite ease-in;
	}
  .dot-stretching::after {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #f9566e;
	color: #f9566e;
	animation: dot-stretching-after 2s infinite ease-in;
	}
  
  @keyframes dot-stretching {
	0% {
	  transform: scale(1.25, 1.25);
	}
	50%, 60% {
	  transform: scale(0.8, 0.8);
	}
	100% {
	  transform: scale(1.25, 1.25);
	}
  }
  @keyframes dot-stretching-before {
	0% {
	  transform: translate(0) scale(0.7, 0.7);
	}
	50%, 60% {
	  transform: translate(-20px) scale(1, 1);
	}
	100% {
	  transform: translate(0) scale(0.7, 0.7);
	}
  }
  @keyframes dot-stretching-after {
	0% {
	  transform: translate(0) scale(0.7, 0.7);
	}
	50%, 60% {

	  transform: translate(20px) scale(1, 1);
	}
	100% {
	  transform: translate(0) scale(0.7, 0.7);
	}
  }


.circle-to-hex  {
  display: inline-block;
  min-width: 10px;
  min-height: 10px;
  border-style: solid;
  animation: rotate_morph infinite 2s ease;
}

@keyframes rotate_morph {
/*circle*/
  0% {
    background-color: #68bcff;
    border-radius: 100%;
  }
  20%
	{
		
    border-radius: 0;
	}
/*square*/
  50% {
    background-color: #FFEB3B;
	  
  }
  100% {
	transform: rotate(720deg);
    background-color: #68bcff;
    border-radius: 100%;
  }
}

.auto_info
{
	width:27rem;
}
.auto_info h3
{
	border-bottom:1px solid #777;
	padding:.5rem;
	padding-left:1rem;
	font-size:1.3rem;
	display:flex;
	align-items:center;
	gap:1rem;
}
.auto_info p
{
	display: inline-block;
word-break: break-word;
	padding:.5rem;
}


.auto_info h3 .autosync
{
	position:relative;
	top:unset;
	left:unset;
	margin-right:-.75rem;
}

.auto_info span
{
	scale:1.5;
}
.pdfviewer [panzoom="true"]
{
	height:calc(100% - 3rem);
	overflow: auto;
	
}
.invoioce_status
{
	cursor:pointer;
	transition:.2s;
	padding: .2rem .75rem;
	padding-left:.5rem;
	border-radius:1rem;
	white-space: nowrap;
	background: red;
	display:flex;
	align-items:center;
	gap:1rem;
	position:relative;
}
.invoioce_status:before
{
	transition:.2s;
	height:.5rem;
	width:2rem;
	content:'';
	border-radius:1rem;
	background:#fff;
	display:block;
	background: #323639;
}

.invoioce_status > div 
{
	display:none;
	font-family:'standardFontBold';
}
.invoioce_status:after
{
	transition:.2s;
	content:'';
	position:absolute;
	border:1px solid #888;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	border-radius:1rem;
	left:.25rem;
	background:#fff;
	display:block;
	width:1rem;
	height:1rem;
}
.invoioce_status.positive:after
{
	left:1.5rem;
}
.invoioce_status.positive:before
{
	opacity:1;
	background: #323639;
}
.invoioce_status.positive .is_pos
{
	display:block;
}
.invoioce_status:not(.positive) .invoioce_status_txt:not(.is_pos)
{
	display:block;
}
.invoioce_status.positive 
{
	color:#fff;
	background:#4CAF50;
}

.pdfviewer__status_buttons
{
	display:flex;
	gap:1rem;
}
[id="invoicekeeper_viewer"] .loading > *,
[id="invoicekeeper_viewer"].swindow .loader
{
	display:none;
}

[id="invoicekeeper_viewer"].swindow .loading .loader
{
	display: flex;
	align-content: center;
	justify-content: center;
}
.pdf_postion
{
	border:1px solid #ccc;
	border-radius:5px;
	height:2rem;
	width:6.5rem;
	white-space:nowrap;
	display:flex;
	gap:1rem;
	align-items:center;
	justify-content:center;
	text-align:center;
}
.pdf_postion .iconify,
.pdf_postion .iconify:hover
{
	all:unset;
	width:1rem;
}
.attach_preview
{
	min-width: 30rem;
	grid-column: 3 / 4;
	grid-row: 2 / 5;
	overflow: hidden;
	margin-right: 1rem;
	padding-left: 1rem;
	padding-bottom: 1rem;
	border-left: 1px solid #dfe5ea;
}
.attach_preview iframe
{
	border:1px solid #888;
	height: calc(100% - 4rem);
}
.h-3
{
	height:3rem;
}
.elipsis
{
	white-space:nowrap;
	text-overflow: ellipsis;
	display: block;
	overflow:hidden;
}
.elipsis .iconify
{
	min-width:2rem;
	margin-bottom: -.5rem;
}

.compactor {
  container-type: inline-size;
}
tr.active .pctrl
{
	display:block;
}
.pctrl
{
	display:none;
}
@container (max-width: 700px) {
  .compacted-hide {
	  display:none !important
  }
.pctrl > div:before
	{
		right:4.1rem !important;
	}
	
}

.arrows {
  border: 1px solid #cbd2d9;
  border-radius: 0.3rem;
  display: inline-flex;
  overflow: hidden;
}

.arrows a {
  outline: none;
  padding: 0.75em 0.75em 0.75em 1.5em;
  position: relative;
  text-decoration: none;
  transition: background 0.2s linear;
}
.arrows a:not(:first-child)
{
	padding-left:1.2rem !important;
}

.arrows a:hover:after,
.arrows a:hover {    
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #edf4fc),color-stop(100%, #dee7f1));
    background-image: -moz-linear-gradient(#edf4fc,#dee7f1);
    background-image: -webkit-linear-gradient(#edf4fc,#dee7f1);
    background-image: linear-gradient(#edf4fc,#dee7f1);
}

.arrows a:focus:after,
.arrows a:focus,
.arrows a.is-active:focus {
  color: #fff;
}

.arrows a:after,
.arrows a:before {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f5faff),color-stop(100%, #f0f5fa));
    background-image: -moz-linear-gradient(#f5faff,#f0f5fa);
    background-image: -webkit-linear-gradient(#f5faff,#f0f5fa);
    background-image: linear-gradient(#f5faff,#f0f5fa);
  bottom: 0;
  clip-path: polygon(50% 50%, -50% -50%, 0 100%);
  content: "";
  left: 100%;
  position: absolute;
  top: 0;
  transition: background 0.2s linear;
  width: 1em;
  z-index: 1;
}
.arrows a.disabled:after
{
	background:#fff;
}
.arrows a:before {
  background: #cbd2d9;
  margin-left: 1px;
}

.arrows a:last-child {
  border-right: none;
}
.arrows a .iconify 
{
	font-size:1.3rem;
	margin-right:.25rem
}
[id="invoicekeeper_inline_preview"] iframe
{
	border:1px solid #aaa;
	height: calc(100% - 5rem);
}
[id="invoicekeeper_inline_preview"]
{
	padding-left:1rem;
	border-left:1px solid #dfe5ea;
	grid-row:1 /4;
	margin-right: 1rem;
	min-width: 10rem;
	position: relative;
}
[id="invoicekeeper_app_grid"]
{
	height: calc(100% - 3rem);
	grid-template-rows: .1fr 1fr .1fr ;
}
[invoicekeeper_screens="flv"]
{
    grid-template-columns: 18rem minmax(35rem, 1fr) 1fr;
}
[invoicekeeper_screens="fl"]
{
    grid-template-columns: 18rem auto;
}
[invoicekeeper_screens="lv"]
{
    grid-template-columns: 1fr 1fr;
}
[invoicekeeper_screen]
{
	display:none;
}
[invoicekeeper_screens="flv"]
[invoicekeeper_screen="f"],
[invoicekeeper_screens="flv"]
[invoicekeeper_screen="l"],
[invoicekeeper_screens="flv"]
[invoicekeeper_screen="v"],
[invoicekeeper_screens="fl"]
[invoicekeeper_screen="f"],
[invoicekeeper_screens="fl"]
[invoicekeeper_screen="l"],
[invoicekeeper_screens="lv"]
[invoicekeeper_screen="l"],
[invoicekeeper_screens="lv"]
[invoicekeeper_screen="v"]
{
	display:block !important;
}
.invoicekeeper_inline_preview_select
{
	display:flex;
	flex-direction:column;
	gap:1rem;
	align-items:center;
	justify-content:center;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	transform: translate(-50%, -50%);
	padding-right: 1rem;
	text-align:center;
}
.invoicekeeper_inline_preview_select .iconify
{
	font-size:5rem;
}
.betaalgegevens > div 
{
	display:flex;
	align-items:center;
	gap:.25rem;
	text-decoration:underline;
	white-space:nowrap;
}
.betaalgegevens > div .iconify 
{
	font-size:1.3rem;
}
.betaalgegevens > div:hover 
{
	text-decoration:none;
}
.betaalgegevens > div:before 
{
	display:none;
}
.pctrl > div
{
	background: #eee;
	width:100%;
	/* color: #fff; */
	padding: 1rem;
	flex-direction: column;
	display: flex;
	gap: 1rem;
	position:relative;
	word-break: break-word;
	border: 1px solid;
	margin-top:-5px;
	border-radius: 0 0 5px 5px;
	box-shadow: 0 10px 10px rgba(0,0,0,0.2);
}
.pctrl > div:before
{
	content: '';
	display:block;
	position:absolute;
	width:1rem;
	height:1rem;
	border-top: 1px solid var(--dark_blue);
	border-left: 1px solid var(--dark_blue);
	background: #eee;
	right:14rem;
	rotate:45deg;
	top:-.55rem;
}
.inline_wizzard_wrapper
{
	overflow:hidden;
}
.inline_wizzard_wrapper h1 
{
	margin-bottom:0;
}
.inline_wizzard_wrapper 
.buttons
{
	justify-content:flex-end;
	gap:1rem;
}
.inline_wizzard_wrapper 
.buttons > div 
{
	display:flex;
	align-items:center;
}
.inline_wizzard_wrapper 
.buttons
.prev:hover
{
	text-decoration:underline;
}
.inline_wizzard_wrapper 
.buttons
{
	border:none;
}
.inline_wizzard_wrapper 
.buttons
.next
{
	background:var(--blue);
	border-radius:3rem;
	color:#fff;
	font-family:'standardFontBold';
	padding:1.5rem;
}
.inline_wizzard_wrapper 
.buttons
.next:hover
{
	opacity:.8;
}
[step-index="0"] .prev
{
	display:none  !important
}
.inline_wizzard
{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	transition: .2s cubic-bezier(1, -0.01, 0.25, 1);
}
.inline_wizzard_step
{
	display:flex;
	flex-direction:column;
	min-width:100%;
}
.inline_wizzard_step input
{
	margin-top:.5rem;
}
.inline_wizzard_step_nav
{
	display:flex;
	width:100%;
	gap:.5rem;
	margin: 2rem 0;
}
.inline_wizzard_step_nav > div 
{
	background:#d1d1d1;
	height:8px;
	transition:.2s;
	width:100%;
	border-radius:1rem;
}
.inline_wizzard_step_nav > div > div 
{
	height:100%;
	width:100%;
}
.inline_wizzard_step_nav > div:hover
{
	transform:scale(1.05);
	background:#76c2ff;
}
.inline_wizzard_step_nav > .succes 
{
	background:#4CAF50;
}
.inline_wizzard_step_nav > .ongoing 
{
	background:var(--blue);
	width:200%
}

.tippy-box[data-theme~='invoicekeeper'] 
{
	background-color:#333;
	border-color:#333;
	color:#fff;
	font-size:1rem;
	display:flex;
	flex-direction:flex-col;
	gap:1.5rem;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.tippy-box[data-theme~='invoicekeeper'] .tippy-arrow
{
	color:#333;
}

.tippy-box[data-theme~='invoicekeeper'] .tippy-content
{
	max-height:200px;
	display:flex;
word-break: break-word;
	flex-direction:column;
	padding:1rem;
}

.tippy-box[data-theme~='invoicekeeper'] .tippy-content h2,
.tippy-box[data-theme~='invoicekeeper'] .tippy-content div
{
	display:block;
	white-space:nowrap;
}
.tippy-box[data-theme~='invoicekeeper'] .tippy-content div
{
	background:#fff;
	color:#333;
	border-radius:1rem;
	padding:.25rem .75rem;
	margin-top:2rem;
	font-family:'standardFontBold'
	
}
.tippy-box[data-theme~='invoicekeeper'] 
.tippy-el
{
	display:flex;
	align-items:center;
	gap: .5rem;
	padding:.5rem;
	border-top:1px solid #eee;
}
.swindow_main_layout
{
	height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}
.items_preview
{
	display:flex;
	align-items:center;
	justify-content:center;
	width: calc(100% + 4rem);
	padding: 1rem;
	padding-top: 4.5rem;
	padding-bottom: 2rem;
	background: var(--blue);
}
.items_preview img 
{
	width: 5rem;
	height: 5rem;
	padding:.25rem;
	margin-left:-1rem;
	background:#fff;
	border-Radius:100%;
	box-shadow: 0 3px 1px rgba(0,0,0,0.2)
}
#waardebon_revoke textarea
{
	width: 100%;
	border-radius: 5px;
	padding: 1rem;
	box-shadow: inset 0 5px 10px rgb(0 0 0 / 10%);
}
.charCounter
{
	margin-left:auto;
	margin-top:.5rem;
	transition: .125s;
}

.charCounter.pulse
{
	color:#F44336;
	transform:scale(1.1);
}
.clamp-2-lines
{
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.revoked_reason:before
{
	content:'';
	width:1rem;
	height:1rem;
	top:-.5rem;
	left:8rem;
	position:absolute;
	background:red;
	transform:rotate(45deg);
}
.revoked_reason
{
	position:relative;
	display:flex;
	gap:1rem;
	align-items:center;
	position: absolute;
	top: -1rem;
	color: #fff;
	background: red;
	left: 0;
	box-shadow: 0 40px 50px rgba(0,0,0,0.2);
	width: 100%;
	padding: 1rem;
}
.revoked_reason p 
{
	z-index:2;
	position:relative;
}
.revoked_reason img 
{
	width:2rem;
	min-width: 2rem;
	background:#fff;
	padding:.125rem;
	height:2em;
	min-height: 2rem;
	border-radius:100%
}
.items__revoked
{
	padding-top:5rem;
}