:root {
	--vt-c-white: #ffffff;
	--vt-c-white-soft: #f8f8f8;
	--vt-c-white-mute: #f2f2f2;
	--vt-c-black: #181818;
	--vt-c-black-soft: #222222;
	--vt-c-black-mute: #282828;
	--vt-c-indigo: #2c3e50;
	--vt-c-divider-light-1: rgba(60, 60, 60, .29);
	--vt-c-divider-light-2: rgba(60, 60, 60, .12);
	--vt-c-divider-dark-1: rgba(84, 84, 84, .65);
	--vt-c-divider-dark-2: rgba(84, 84, 84, .48);
	--vt-c-text-light-1: var(--vt-c-indigo);
	--vt-c-text-light-2: rgba(60, 60, 60, .66);
	--vt-c-text-dark-1: var(--vt-c-white);
	--vt-c-text-dark-2: rgba(235, 235, 235, .64)
}

:root {
	--color-background: var(--vt-c-white);
	--color-background-soft: var(--vt-c-white-soft);
	--color-background-mute: var(--vt-c-white-mute);
	--color-border: var(--vt-c-divider-light-2);
	--color-border-hover: var(--vt-c-divider-light-1);
	--color-heading: var(--vt-c-text-light-1);
	--color-text: var(--vt-c-text-light-1);
	--section-gap: 160px
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: var(--vt-c-black);
		--color-background-soft: var(--vt-c-black-soft);
		--color-background-mute: var(--vt-c-black-mute);
		--color-border: var(--vt-c-divider-dark-2);
		--color-border-hover: var(--vt-c-divider-dark-1);
		--color-heading: var(--vt-c-text-dark-1);
		--color-text: var(--vt-c-text-dark-2)
	}
}

*,
*:before,
*:after {
	box-sizing: border-box;
	margin: 0;
	font-weight: 400
}

.pointer {
	cursor: pointer
}

.border-none {
	border: none !important
}

:root {
	--vs-colors--lightest: rgba(60, 60, 60, .26);
	--vs-colors--light: rgba(60, 60, 60, .5);
	--vs-colors--dark: #333;
	--vs-colors--darkest: rgba(0, 0, 0, .15);
	--vs-search-input-color: inherit;
	--vs-search-input-placeholder-color: inherit;
	--vs-font-size: 1rem;
	--vs-line-height: 1.4;
	--vs-state-disabled-bg: rgb(248, 248, 248);
	--vs-state-disabled-color: var(--vs-colors--light);
	--vs-state-disabled-controls-color: var(--vs-colors--light);
	--vs-state-disabled-cursor: not-allowed;
	--vs-border-color: var(--vs-colors--lightest);
	--vs-border-width: 1px;
	--vs-border-style: solid;
	--vs-border-radius: 4px;
	--vs-actions-padding: 4px 6px 0 3px;
	--vs-controls-color: var(--vs-colors--light);
	--vs-controls-size: 1;
	--vs-controls--deselect-text-shadow: 0 1px 0 #fff;
	--vs-selected-bg: #f0f0f0;
	--vs-selected-color: var(--vs-colors--dark);
	--vs-selected-border-color: var(--vs-border-color);
	--vs-selected-border-style: var(--vs-border-style);
	--vs-selected-border-width: var(--vs-border-width);
	--vs-dropdown-bg: #fff;
	--vs-dropdown-color: inherit;
	--vs-dropdown-z-index: 1000;
	--vs-dropdown-min-width: 160px;
	--vs-dropdown-max-height: 350px;
	--vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors--darkest);
	--vs-dropdown-option-bg: #000;
	--vs-dropdown-option-color: var(--vs-dropdown-color);
	--vs-dropdown-option-padding: 3px 20px;
	--vs-dropdown-option--active-bg: #5897fb;
	--vs-dropdown-option--active-color: #fff;
	--vs-dropdown-option--deselect-bg: #fb5858;
	--vs-dropdown-option--deselect-color: #fff;
	--vs-transition-timing-function: cubic-bezier(1, -.115, .975, .855);
	--vs-transition-duration: .15s
}

.v-select {
	position: relative;
	font-family: inherit
}

.v-select,
.v-select * {
	box-sizing: border-box
}

:root {
	--vs-transition-timing-function: cubic-bezier(1, .5, .8, 1);
	--vs-transition-duration: .15s
}

@-webkit-keyframes vSelectSpinner {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

@keyframes vSelectSpinner {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.vs__fade-enter-active,
.vs__fade-leave-active {
	pointer-events: none;
	transition: opacity var(--vs-transition-duration) var(--vs-transition-timing-function)
}

.vs__fade-enter,
.vs__fade-leave-to {
	opacity: 0
}

:root {
	--vs-disabled-bg: var(--vs-state-disabled-bg);
	--vs-disabled-color: var(--vs-state-disabled-color);
	--vs-disabled-cursor: var(--vs-state-disabled-cursor)
}

.vs--disabled .vs__dropdown-toggle,
.vs--disabled .vs__clear,
.vs--disabled .vs__search,
.vs--disabled .vs__selected,
.vs--disabled .vs__open-indicator {
	cursor: var(--vs-disabled-cursor);
	background-color: var(--vs-disabled-bg)
}

.v-select[dir=rtl] .vs__actions {
	padding: 0 3px 0 6px
}

.v-select[dir=rtl] .vs__clear {
	margin-left: 6px;
	margin-right: 0
}

.v-select[dir=rtl] .vs__deselect {
	margin-left: 0;
	margin-right: 2px
}

.v-select[dir=rtl] .vs__dropdown-menu {
	text-align: right
}

.vs__dropdown-toggle {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: flex;
	padding: 0 0 4px;
	background: none;
	border: var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);
	border-radius: var(--vs-border-radius);
	white-space: normal
}

.vs__selected-options {
	display: flex;
	flex-basis: 100%;
	flex-grow: 1;
	flex-wrap: wrap;
	padding: 0 2px;
	position: relative
}

.vs__actions {
	display: flex;
	align-items: center;
	padding: var(--vs-actions-padding)
}

.vs--searchable .vs__dropdown-toggle {
	cursor: text
}

.vs--unsearchable .vs__dropdown-toggle {
	cursor: pointer
}

.vs--open .vs__dropdown-toggle {
	border-bottom-color: transparent;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0
}

.vs__open-indicator {
	fill: var(--vs-controls-color);
	transform: scale(var(--vs-controls-size));
	transition: transform var(--vs-transition-duration) var(--vs-transition-timing-function);
	transition-timing-function: var(--vs-transition-timing-function)
}

.vs--open .vs__open-indicator {
	transform: rotate(180deg) scale(var(--vs-controls-size))
}

.vs--loading .vs__open-indicator {
	opacity: 0
}

.vs__clear {
	fill: var(--vs-controls-color);
	padding: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	margin-right: 8px
}

.vs__dropdown-menu {
	display: block;
	box-sizing: border-box;
	position: absolute;
	top: calc(100% - var(--vs-border-width));
	left: 0;
	z-index: var(--vs-dropdown-z-index);
	padding: 5px 0;
	margin: 0;
	width: 100%;
	max-height: var(--vs-dropdown-max-height);
	min-width: var(--vs-dropdown-min-width);
	overflow-y: auto;
	box-shadow: var(--vs-dropdown-box-shadow);
	border: var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);
	border-top-style: none;
	border-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);
	text-align: left;
	list-style: none;
	background: var(--vs-dropdown-bg);
	color: var(--vs-dropdown-color)
}

.vs__no-options {
	text-align: center
}

.vs__dropdown-option {
	line-height: 1.42857143;
	display: block;
	padding: var(--vs-dropdown-option-padding);
	clear: both;
	color: var(--vs-dropdown-option-color);
	white-space: nowrap;
	cursor: pointer
}

.vs__dropdown-option--highlight {
	background: var(--vs-dropdown-option--active-bg);
	color: var(--vs-dropdown-option--active-color)
}

.vs__dropdown-option--deselect {
	background: var(--vs-dropdown-option--deselect-bg);
	color: var(--vs-dropdown-option--deselect-color)
}

.vs__dropdown-option--disabled {
	background: var(--vs-state-disabled-bg);
	color: var(--vs-state-disabled-color);
	cursor: var(--vs-state-disabled-cursor)
}

.vs__selected {
	display: flex;
	align-items: center;
	background-color: var(--vs-selected-bg);
	border: var(--vs-selected-border-width) var(--vs-selected-border-style) var(--vs-selected-border-color);
	border-radius: var(--vs-border-radius);
	color: var(--vs-selected-color);
	line-height: var(--vs-line-height);
	margin: 4px 2px 0;
	padding: 0 .25em;
	z-index: 0
}

.vs__deselect {
	display: inline-flex;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin-left: 4px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: none;
	fill: var(--vs-controls-color);
	text-shadow: var(--vs-controls--deselect-text-shadow)
}

.vs--single .vs__selected {
	background-color: transparent;
	border-color: transparent
}

.vs--single.vs--open .vs__selected,
.vs--single.vs--loading .vs__selected {
	position: absolute;
	opacity: .4
}

.vs--single.vs--searching .vs__selected {
	display: none
}

.vs__search::-webkit-search-cancel-button {
	display: none
}

.vs__search::-webkit-search-decoration,
.vs__search::-webkit-search-results-button,
.vs__search::-webkit-search-results-decoration,
.vs__search::-ms-clear {
	display: none
}

.vs__search,
.vs__search:focus {
	color: var(--vs-search-input-color);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	line-height: var(--vs-line-height);
	font-size: var(--vs-font-size);
	border: 1px solid transparent;
	border-left: none;
	outline: none;
	margin: 4px 0 0;
	padding: 0 7px;
	background: none;
	box-shadow: none;
	width: 0;
	max-width: 100%;
	flex-grow: 1;
	z-index: 1
}

.vs__search::-moz-placeholder {
	color: var(--vs-search-input-placeholder-color)
}

.vs__search::placeholder {
	color: var(--vs-search-input-placeholder-color)
}

.vs--unsearchable .vs__search {
	opacity: 1
}

.vs--unsearchable:not(.vs--disabled) .vs__search {
	cursor: pointer
}

.vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search {
	opacity: .2
}

.vs__spinner {
	align-self: center;
	opacity: 0;
	font-size: 5px;
	text-indent: -9999em;
	overflow: hidden;
	border-top: .9em solid rgba(100, 100, 100, .1);
	border-right: .9em solid rgba(100, 100, 100, .1);
	border-bottom: .9em solid rgba(100, 100, 100, .1);
	border-left: .9em solid rgba(60, 60, 60, .45);
	transform: translateZ(0) scale(var(--vs-controls--spinner-size, var(--vs-controls-size)));
	-webkit-animation: vSelectSpinner 1.1s infinite linear;
	animation: vSelectSpinner 1.1s infinite linear;
	transition: opacity .1s
}

.vs__spinner,
.vs__spinner:after {
	border-radius: 50%;
	width: 5em;
	height: 5em;
	transform: scale(var(--vs-controls--spinner-size, var(--vs-controls-size)))
}

.vs--loading .vs__spinner {
	opacity: 1
}

body {
	padding-right: 10px
}

.tableheader {
	background-color: #218838;
	color: #fff;
	font-size: 8px !important;
	text-align: center;
	border: 0px;
	width: 100%;
	height: auto;
	line-height: 2vh !important
}

.tableheader .col,
.tableheader .col-1,
.tableheader .col-2,
.tableheader .col-3 {
	border-color: #218838
}

.col,
.col-1,
.border {
	border: 1px solid #efefef
}

.noborder {
	border: none
}

.contentheight {
	height: 93vh;
	overflow-y: auto
}

.basedheight .col,
.basedheight .col-1,
.basedheight .col-2,
.basedheight .col-3,
.basedheight .col-4 {
	min-height: 8.2vh
}

.basedfooter {
	width: 100%;
	height: 4vh;
	margin-top: 0vh;
	background-color: #efefef;
	position: absolute;
	bottom: 0
}

.basedfooter .btn-primary {
	background-color: #292929
}

.basedfooter .btn-primary.active {
	background-color: #218838
}

.basedfooter .fa-solid {
	margin-right: 10px
}

.sidebar-menu {
	margin-top: .4vh
}

.sidebar-menu .btn-primary {
	background-color: #292929
}

.red {
	color: #d30404
}

.sidebar-menu .btn-primary.active {
	background-color: #218838
}

.sidebar-menu .fa-solid {
	margin-right: 10px
}

.fullheight,
.fullheight2 {
	height: 92.8vh;
	font-size: 14px
}

.fullheight2 .task {
	font-size: 14px;
	padding: 10px
}

.fullheight2 .basedheight .col,
.fullheight2 .basedheight .col-1 {
	height: auto;
	padding: 8px
}

.fullheight .user {
	font-size: 14px;
	padding: 10px
}

h1 {
	font-size: 28px;
	font-weight: 700;
	color: #218838
}

h1 .fa-solid {
	font-size: 22px;
	margin-right: 10px;
	margin-left: 5px
}

h2 {
	font-size: 11px;
	font-weight: 700;
}

.card-body {
	padding: 5px
}
.p-2{
    padding: 5px!important;
}
.user {
	background-color: #efefef;
	border-radius: 5px;
	margin: 1px;
	padding: 2px
}

.user.outlined {
	background-color: #fff;
	border: 1px solid #efefef
}

.user div {
	border: 0px
}

.user ul {
	padding-left: 10px;
	margin-bottom: 0
}

.user.ziek {
	background-color: #ffc9c9
}

.user.vrij {
	background-color: #c9e6ff
}

.user.completed {
	background-color: #e1fad7
}

.user .col-2,
.user .col-10 {
	padding: 0 4px
}

.useradd {
	border: 3px dashed #efefef;
	border-radius: 5px;
	margin: 4px;
	padding: 10px;
	text-align: center
}

.useradd .big {
	font-size: 30px
}

.basedheight .col-1,
.basedheight .col-2,
.basedheight .col-3,
.basedheight .col-4 {
	background-color: #efefef;
	text-align: center
}

.contentheight .task {
	background-color: #efefef;
	border-radius: 5px;
	margin: 1px;
	padding: 1px 2px;
	display: inline-block;
	cursor: pointer
}

.contentheight .task.red {
	color: #c9141c;
	background-color: #ffc9c9
}

.col {
	padding: 0 4px;
	position: relative;
	overflow: auto !important
}

.add {
	position: absolute;
	bottom: 2px;
	right: 2px;
	background-color: #218838;
	border-radius: 12px;
	width: 12px;
	line-height: 10px;
	text-align: center;
	color: #fff;
	font-size: 10px;
	border: 0px;
	display: block;
	padding: 0 0 2px
}

.add2 {
	float: right;
	background-color: #218838;
	border-radius: 15px;
	width: 15px;
	line-height: 13px;
	text-align: center;
	color: #fff;
	font-size: 13px;
	border: 0px;
	display: block;
	padding: 0 0 2px
}

.btn-primary,
.btn-danger,
.btn-light, .add2, .btn-secondary {
	padding: 3px!important;
	font-size: 8px!important;
	border: 0px
}

.btn-primary {
	background-color: #218838
}

.btn-primary:active {
	background-color: #218838 !important
}

.btn-primary.pending {
	background-color: #fff;
	color: #218838
}

.modal-header {
	padding: 10px;
	background-color: #efefef
}

.modal-footer {
	padding: 10px
}

.ghost {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 999;
	pointer-events: none !important;
	touch-action: none !important
}

.logo {
	width: 100%;
	max-width: 200px;
	object-fit: contain;
	object-position: center
}

.dot {
	margin-right: 3px;
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%
}

.user .task {
	list-style: none;
	padding: 1px 2px;
	margin: 0px 0px 0px 0;
	padding-left: 0 !important;
	width: 100%;
	border-radius: 5px
}

.user .task li {
	padding: 2px 3px!important;
	border-radius: 5px;
	background-color: #ddd;
	margin-bottom: 3px
}

.user .task-title {
	font-weight: 700
}

.user .task-description {
	font-size: 9px
}

.user .col-12 {
	padding: 0 3px
}

@media (min-width: 2559px) {

	body,
	.form-control,
	.btn,
	.v-select input,
	.tableheader {
		font-size: 6px !important;
		line-height: 8px !important
	}
}

@media (min-width: 1920px) and (max-width: 2559px) {
	body {
		font-size: 11px !important;
		line-height: 16px !important
	}
}

@media (min-width: 1279px) and (max-width: 1920px) {
	body {
		font-size: 8px !important;
		line-height: 11px !important
	}
}

@media (min-width: 767px) and (max-width: 1279px) {
	body {
		font-size: 11px !important;
		line-height: 16px !important
	}
}

@media (min-width: 767px) and (max-width: 1279px) and (orientation: landscape) {
	body {
		font-size: 11px !important;
		line-height: 16px !important
	}
}

@media (min-width: 767px) and (max-width: 1279px) and (orientation: portrait) {
	body {
		font-size: 11px !important;
		line-height: 16px !important
	}
}

@media (max-width: 767px) {
	body {
		font-size: 11px !important;
		line-height: 16px !important
	}
}

@media (max-width: 767px) and (orientation: landscape) {
	body {
		font-size: 11px !important;
		line-height: 16px !important
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	body {
		font-size: 11px !important;
		line-height: 16px !important
	}
}

#authorizationModal[data-v-873ed26d] {
	scale: .8
}

.modal-header[data-v-873ed26d],
.btn-close[data-v-873ed26d] {
	background-color: #313d54;
	color: #fff
}

.btn-close[data-v-873ed26d] {
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat
}

.btn-authentication[data-v-873ed26d] {
	width: 100%;
	height: 40px;
	background-color: #17a056;
	cursor: pointer;
	text-align: center;
	position: relative;
	bottom: 0;
	right: 0;
	padding-top: 0
}

.btn-authentication strong[data-v-873ed26d] {
	font-size: 25px;
	color: #fff;
	margin-top: 10px;
	text-align: center;
	text-transform: uppercase
}

.card[data-v-98145c92] {
	max-height: calc(100vh - 100px);
	overflow-y: auto
}

.user .task li[data-v-98145c92]:last-child {
	margin-bottom: 0 !important
}

.closed .col[data-v-de431fc6],
.closed .col-1[data-v-de431fc6],
.closed .col-2[data-v-de431fc6] {
	min-height: 25px !important;
	height: 25px !important
}

.user-row .form-check-input[data-v-6b682978] {
	margin: 10px 0 10px 10px;
	width: 25px;
	height: 25px
}

.user-row p[data-v-6b682978] {
	line-height: 40px;
	margin: 0
}

.user-row .form-check-input[data-v-45a6c911] {
	margin: 10px 0 10px 10px;
	width: 25px;
	height: 25px
}

.user-row p[data-v-45a6c911] {
	line-height: 40px;
	margin: 0
}

.user-row .form-check-input[data-v-0cf97354] {
	margin: 10px 0 10px 10px;
	width: 25px;
	height: 25px
}

.user-row p[data-v-0cf97354] {
	line-height: 40px;
	margin: 0
}

.user-row .form-check-input[data-v-40b04dec] {
	margin: 10px 0 10px 10px;
	width: 25px;
	height: 25px
}

.user-row p[data-v-40b04dec] {
	line-height: 40px;
	margin: 0
}

.split-container[data-v-54204108] {
	display: flex;
	height: 100%
}

.split[data-v-54204108] {
	flex: 1;
	overflow-y: auto
}

.left[data-v-54204108] {
	border-right: 1px solid #ccc
}

.title[data-v-54204108] {
	position: sticky;
	top: 0;
	background-color: #fff;
	padding: 10px 0;
	z-index: 10
}

label {
	margin-bottom: 15px !important;
	font-weight: 700
}

.card[data-v-7072d4ce] {
	max-height: calc(100vh - 100px);
	overflow-y: auto
}

.user .task li[data-v-7072d4ce]:last-child {
	margin-bottom: 0 !important
}