/* 
    kleuren

    donkerblauw: #214386
    lichtblauw: #00a6e2

    blauw: #1b71b6
    groen: #7db940
    rood: #d83e1f
    grijs: #504e4e

    tekst: #333
*/


/* Fonts */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/opensans/OpenSans-Light-webfont.woff') format('woff')
}

@font-face { 
	font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
	src: url('fonts/opensans/OpenSans-Regular-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/opensans/OpenSans-Semibold-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/opensans/OpenSans-Bold-webfont.woff') format('woff');
}


html, body {
    height: 100%;
    width: 100%;
    outline: none;
}

.parent-page,
.parent-page body {
    overflow: hidden;
    position: fixed; /* prevents overscroll on iOS */
}

body {
    font-family: 'Open Sans', sans-serif;
}

.home-wrapper {
    position: relative; /* keeps loading mask inside frame */
    overflow: hidden;
}

.public > .k-loading-mask {
    position: fixed;
}

#form1.has-fixed {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.small-scrollbar::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
}

.small-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

label,
strong {
	font-weight: 600;
}

p {
	font-size: 14px;
	line-height: 22px;
	margin-bottom: 6px;
}
	
h1, h1.title {
	font-size: 24px;
	font-weight: 300;
	line-height: 21px;
	margin-bottom: 7px;
}

h2 {
	font-weight: 600;
	line-height: 20px;
	font-size: 18px;
	margin-bottom: 14px;
	display: inline-block;		
}
	
.link {
	cursor: pointer;     
}

#logo, #topmenu {
	color: #fff;
	background-color: #214386;
    position: relative;
    z-index: 2;
    height: 70px;
    margin-bottom: 15px;
}

#mainmenu {
    background-color: #fff;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    position: absolute;
    top: 100px; /* top margin (15px) + top menu (70px) + mid margin (15px) */
    bottom: 0;
    right: 0;
    left: 0;
}

#content {
    position: absolute;
    top: 100px; /* top margin (15px) + top menu (70px) + mid margin (15px) */
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 15px;
}

.home-wrapper {
    border: 1px solid #ccc;
    height: 100%;
    background-color: white;
}

#mainFrame {
    display: block;
    width: 100%;
    height: 100%;
}

body.is-super-user {
    background-color: rgba(246, 233, 85, 0.35);
}

.fixed {
	position: fixed;
	width: 100%;
	background-color: #fff;
	padding: 10px 20px 20px;
	z-index: 10;
    box-shadow: 0px 5px 20px 0px rgba(227, 227, 227, 0.75);
    min-height: 54px;
}

.fixed-header-helper {
    position: static;
    box-shadow: none;
    visibility: hidden;
}

.formtitle > h1 {
    margin-top: 4px;
    line-height: 1.4;
    margin-bottom: 1px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.formnumber {
    padding: 9px 12px 6px;
}

.formnumber p {
    display: inline-block;
    color: #666;
    margin-bottom: 0px;
    padding: 0px 8px;

}

.formnumber .formnumber-label {
    font-weight: 300;
}

.formnumber #code-display {
    padding-left: 2px;
    font-style: italic;
}

@keyframes code-changed {
    0%, 100% {
        background-color: transparent;
    }

    40% {
        background-color: rgba(240, 237, 66, 0.7);
    }
}

.formnumber p.code-changed {
    animation: code-changed 600ms ease;
}

input.k-textbox {
    width: 100%;
	height: 34px;
}

.fixed .btn, .fixed .k-textbox {
	float: left;
}

.is-matrix-form .fixed {
    padding-bottom: 10px;
}


.btn {
	padding: 4px 12px;
	margin-right: 8px;
}

.btn-primary {
    background-image: unset;
    background-color: #214386;
    border-color: #214386;
    color: #fff;
    line-height: 1.6;
}

.form-footer-table th {
    font-weight: 600;
}

.form-changes-table td:last-child {
    white-space: pre-wrap;
}

.q-input.drawing-column { /* override DesignForm.aspx box-sizing specificity */
    box-sizing: content-box;
    padding-right: calc(25% - 40px);
}

.drawing-column + .q-action {
    margin-left: calc(-25% + 25px);
}

.q-action {
    padding-left: 0;
    padding-right: 0;
}

.toolbar .btn {
	margin-right: 4px;
}

.form-fields {
    overflow: auto;
    overflow-x: hidden;
}

.form-footer > div:not(:empty) {
    margin: 20px;
}

#actionWrapper {
    margin-bottom: 20px;
}

#actionWrapper .k-grid {
    overflow-x: auto;
}

.formpart {
    clear: both;
	padding: 20px;
}

.formpart:nth-child(even),
.formpart.formpart-odd {
	background-color: #e3e3e3;
}

.formpart.formpart-even {
    background-color: #fff;
}

.footer-forward-button-container.formpart-even {
    border-bottom: 1px solid #e5e5e5;
}

.formpart-row.hidden + .matrix-div {
    display: none;
}

/* 
*   Formulier.aspx
*/

#previewField_Logo {
    max-width: 100%;
    max-height: 400px;
}

.lockedinfo {
    padding: 10px 20px;
    background-color: #ecd86f;
    color: #544325;
    margin: -10px -20px 16px -20px;
}

.lockedinfo > .k-icon.k-i-lock {
    margin-top: -3px;
    margin-right: 4px;
}

.lockedinfo > .lockedinfo-username {
    font-weight: 600;
}

#form-email-address {
    box-sizing: border-box;
}

.formtype-toolbar {
    position: relative;
    display: flex;
}

/* Form toolbar dropdown */

.toolbar .dropdown-toggle {
    padding: 6px 12px;
}

.dropdown-menu .k-icon {
    margin-left: -7px;
    margin-right: 6px;
    margin-top: -3px;
}

.toolbar .dropdown-menu > li > #btnDelete {
    color: #8a0a0a;
}

li.dropdown-divider-header:first-child {
    margin-top: 0;
}

li.dropdown-divider-header {
    padding: 0 12px;
    margin-top: 5px;
    font-size: 17px;
    font-weight: 700;
    text-transform: lowercase;
    font-variant: small-caps;
    letter-spacing: 0.8px;
    color: #6f6f6f;
    white-space: nowrap;
}

.part-index-menu {
    margin-left: auto;
    position: static;
}

.part-index-list {
    right: 4px;
    left: auto;
    max-height: calc(100vh - 102px + 20px - 2px - 10px); /* viewport - header + header bottom padding - dropdown top margin - free space bottom */
    overflow-y: auto;
}

.part-index-list > li > a {
    white-space: normal;
}

.toolbar .part-index-toggle { /* specificity hack */
    border: 0;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #eee;
}

.part-index-toggle:hover {
    background-color: #ddd;
}

/* Form print styles */
@media print {
    .btn {
        display: none !important;
    }

    .btn-group,
    .fixed:not(.fixed-header-helper),
    .matrix-div a,
    .k-upload {
        display: none;
    }

    .fixed-header-helper,
    .fixed-header-helper-wrapper {
        visibility: visible;
    }

    html,
    body,
    #form1.has-fixed {
        overflow: visible;
    }

    .formpart-row,
    .attachment-container,
    .canvas-container,
    canvas,
    input,
    .q-input {
        page-break-inside: avoid;
    }

    .q-input textarea.form-control {
        display: none;
    }

    .print-textarea {
        min-height: 32px;
        height: auto;
        white-space: pre-wrap;
    }

    .attachment-text a[href]::after {
        content: '';
    }

    .matrix-div colgroup > col:first-child {
        width: 63px !important;
    }

    .k-filter-row th, .k-grid-header th.k-header {
        font-weight: 600;
    }

    .matrix-div {
        border: none !important;
        padding: 0 !important;
    }

    label {
        font-weight: normal;
    }
}

textarea.k-textbox {
	width: 100%;
}

.k-dropzone {
	padding-left: 0;
}

/*
*   LeanForms knoppen
*/

.btn-primary:before,
.button-icon:before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    float: left;
    margin-left: -5px;
    margin-right: 5px;
}

.btn-primary:before,
.button-icon:before,
.custom-tool-icon {
    background-image: url(../img/iconen/edit-icons.svg);
    background-size: 96px 336px;
    background-repeat: no-repeat;
}

.tree-icon-button:before,
.tree-icon,
.k-in .k-sprite,
#myLeanForms .menu-icon {
    background-repeat: no-repeat;
    background-image: url(../img/iconen/tree-icons.svg?v=1);
    background-size: 96px 1728px;
}

.btn-primary.no-icon:before {
    display: none;
}

.button-icon {
    line-height: 1.6;
}

.lf-icon-btn-activate:before {
    background-position: 0 -312px;
}

.lf-icon-btn-revise:before {
    background-position: 0 -72px;
}

.lf-icon-btn-restore:before {
    background-position: 0 -168px;
}

.lf-icon-btn-down:before {
    background-position: 0 -216px;
}

.lf-icon-btn-versions:before {
    background-position: 0 -552px;
}

.lf-icon-btn-preview:before {
    background-position: -72px -600px;
}

.btn.info:before {
    background-position: -0px -720px;
    margin-right: -4px;
}

.btn.link:before {
    background-position: -0px -408px;
    margin-right: -4px;
}

.btn.dataset:before {
	background-position:-0px -288px;
	margin-right: -4px;
}

.btn.dataset-link:before {
    background-position: -0px -408px;
    margin-right: -4px;
}

.btn.save:before {
	background-position: -0px -24px;
}

.btn-default.save:before {
    background-position-x: -72px;
}

.button-icon.reset:before {
	background-position: -24px -48px;
}

.btn.cancel:before {
    background-position: 0 -168px;
}

.btn.empty:before {
    width: 0px;
    height: 24px;
    background-position: unset;
}

.btn.delete:before,
.btn.matrixRemove:before,
.btn.deleteAttachment:before {
	background-position:0px -48px;
}

.btn.matrixRemove:before,
.btn.deleteAttachment:before,
.btn.matrixView:before {
	margin-right: -4px;
}

#ContentPlaceHolder1_ToolbarDiv .btn.delete:before {
	margin-right: 5px !important;
}

.btn.matrixAdd:before {
	background-position:0px -144px;
	margin-right: -4px;
}
.btn.matrixEdit:before {
	background-position:0px -72px;
	margin-right: -4px;
}

.btn.clearcanvas:before {
	background-position:0px -168px;
}
.btn.clearcanvas {
	margin-bottom: 5px;
}

.btn.send:before {
    background-position: -72px -816px;
}

.btn.back:before {
    background-position: -72px -816px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.btn.axie:before {
    background-position: 0px -192px;
    margin-left: -5px;
    margin-right: 0px;
    margin-right: -4px;
}

.btn.my-commant:before {
    /* Currently not used */
    background-position: -72px -480px;
}

.btn.restart-form:before {
    background-position: -72px 0;
}

.btn.add:before {
	background-position:-0px -144px
}

.btn.export:before {
    background-image: url(../img/iconen/X-document-icons.svg);
    background-size: 216px 24px;
    background-position: -120px 0px;
}

/*
*   END LeanForms knoppen
*/

.matrix-div {
    border: 1px solid #16a5df;
    padding: 10px;
    margin-bottom: 14px;
}

.matrix-div colgroup > col:first-child {
    width: 64px;
}

.matrix-div td {
    white-space: pre-wrap;
}

.matrix-div .btn {
    margin-top: 10px;
}

.matrix-div .k-grid {
    overflow-x: auto;
}

.formpart-title h2 {
	margin-top: 0;
    position: relative;
    z-index: 0;
}

.formpart-title h2:before {
    content: '';
    display: block;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    padding: 10px 12px;
    position: absolute;
    top: -10px;
    left: -12px;
    z-index: -1;
    background-color: rgb(255, 255, 0);
    opacity: 0;
}

.formpart-title.scroll-reached h2:before {
    animation: scroll-reached 1200ms linear;
}

@keyframes scroll-reached {
    0%, 100% {
        opacity: 0;
    }

    20%, 80% {
        opacity: 1;
    }
}

.k-dropdown {
    width: 100%;
}

#ContentPlaceHolder1_ToolbarDiv .k-button:hover {
	color: #fff;
	background-color: #2373B5;
	border-color: #2373B5;
}

.dataset-offline-warning {
    margin-left: 8px;
    margin-top: 3px;
    margin-bottom: 3px;
    color: #6d6d6d;
}

.q-action .info {
	margin-right: 0;
}

.k-button-icontext .k-image {
	width: 24px;
}

.previewAttachment {
	float: left;
	padding-right: 20px;
}

.previewAttachment img {
    width: 100%;
}

.formpart-row {
	padding-bottom: 6px;
}

.q-number {
	font-weight: 600;
	line-height: 20px;
	font-size: 14px;
}

.form-control.range-ok {
    background-color: rgb(223, 245, 221);
    border-color: rgb(192, 222, 190);
}

.form-control.range-not-ok {
    background-color: #da4949;
    border-color: #da4949;
    color: white;
}

.range-not-ok ~ .formula-icon.form-control-feedback {
    color: #eee;
}

.form-control[format="number"] {
    transition: border-color ease-in-out .15s,
        box-shadow ease-in-out .15s,
        background-color .15s ease-in-out,
        color .15s ease-in-out;
}

/* SIDEBAR */

.sidebar-left {
	width: 25%;
	float: left;
	padding-top: 15px;
	height: 100%;
    position: relative;
}

@media (min-width: 993px) {
    .sidebar-left.gone { /* tbv sidebar in desktop modus*/
        width: 350px !important;
        position: absolute;
        left: -300px;
        z-index: 5;
    }
}

.sidebar-item {
	margin-right: 15px;
	margin-left: 15px;
}

/* LOGO */

#logo {
    background-image: url(../img/leanforms-logo.png);
    background-repeat: no-repeat;
    background-position: 15px 12px;
    padding: 15px;
}

#logo.custom-logo {
    background-position-y: 50%;
    background-size: auto 46px;
}

#logo .toggle-sidebar:after {
    content: '\00ab'; /* « = \00ab */
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    line-height: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 35px 10px 15px 45px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.sidebar-left.gone #logo .toggle-sidebar:after {
    opacity: 0;
}

/* END LOGO */

/* TREE */
.k-in > span {
	line-height: 24px;
	font-size: 12px;
}

.k-in.k-state-focused > span {
	color: #1b71b6;
	background-position-x: 0;
}

/* second selector is workaround for Chrome bug where inherit doesn't update the color on leave */
.k-in.k-state-hover > span,
.k-in.k-state-hover > span > a {
    color: #d83e1f;
    background-position-x: -24px;
}

.k-in.k-state-hover {
    background-color: transparent;
}

.k-in .k-sprite {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: 0;
    margin-left: -4px;
}
		
.k-treeview span.k-in {
	cursor: pointer;
}

li.searchresult span {
    font-size: 14px;
}

/* Icons used in TreeView */
.Group {
    background-position: -72px -360px;
}
.lf-icon-form-group {
    background-position: -72px -1440px;
}
.Form {
	background-position:-72px -312px;
}
.Report {
	background-position:-72px -864px;
}
.DfltReport {
    background-position: -72px -1680px;
}
.lf-icon-form-dashboard {
    background-position: -72px -120px;
}
.lf-icon-form-chart {
    background-position: -72px -1536px;
}

/* Menu icons */
.Actions {
    background-position: -72px -1272px;
}
.ToDo {
    background-position: -72px -912px;
}
.lf-icon-change-password {
    background-position: -72px -744px;
}
.lf-icon-management {
    background-position: -72px -1488px;
}
.lf-icon-action-management {
    background-position: -72px -1393px;
}
.lf-icon-message-system {
    background-position: -72px -1416px;
}
.lf-icon-favorites {
    background-position: -72px -456px;
}
.lf-icon-offline-dashboard {
    background-position: -72px -1704px;
}
/* END Menu icons */

div.k-treeview {
	overflow: visible;
}

.sidebar-left .nav {
    padding: 0 0 25px 10px;
    height: 100%;
}

.menuButtons--hidden .nav {
    padding-bottom: 0;
}

.nav-scroll-container {
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    padding: 10px 0;
}

.super-user-warning {
    /* also used by UserDialog */
    padding: 8px 15px;
    color: #353515;
    background-color: #f0e575;
    margin: 4px 0 3px;
}

.sidebar-left .super-user-warning {
    display: block;
    margin: -3px 0px 5px;
    font-size: 16px;
}

.super-user-warning .k-icon {
    margin-right: 2px;
    margin-top: -3px;
}

.menuButtons {
    position: relative;
    height: 25px;
    margin-top: -25px;
    padding: 0px 10px;
    background-color: #fff;
    border-top: 1px solid #ccc;
}

.menuButtons a.menuSwitch {
	text-indent: -9999px;
	width: 24px;
	height: 22px;
	overflow: hidden;
	display: block;
    float: left;
}

.menuButtons a.menuSwitch:before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    float: left;
    background-position: -75px -938px;
    cursor: pointer;
}

.menuButtons a.compact:before {
    background-position: -75px -962px;
}

/* TOPMENU */

#topmenu-right {
	position: absolute;
	top: 0;
	right: 0;
}

#logoff a:before {
	background-position:-72px -768px;
}

#topmenu .resize-sidebar:after {
    content: '\00bb'; /* » = \00bb */
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    z-index: 1000;
    line-height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 35px 45px 15px 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

#topmenu .mainbuttons li {
    float: left;
    font-weight: 300;
}

#topmenu .mainbuttons li a:before {
    content: "";
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    display: block;
}

#topmenu .mainbuttons li a { 
	background-color: #e1e1e1;
	display: block; 
	padding: 5px; 
	text-decoration: none; 
	border-bottom: 0;
	height: 34px;
	width: 34px;
}

#topmenu .mainbuttons li a:hover {
	text-decoration: none;
    background-color: #fff;
}

#topmenu .mainbuttons li a:hover:before {
	background-position-x: -24px;
}

#pageTitle {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    font-size: 30px;
    position: absolute;
    z-index: 999;
    margin-left: 10px;
    margin-top: 10px;
    cursor: default;
}

/* END: TOPMENU */

.content {
	float: left;
	width: 75%;
    height: 100%;
	padding-top: 15px;
    position: relative;
}

.content-item {
	margin-right: 15px;
}
		
.content-full {
    width: 100% !important;
}

.content-item-full {
	margin-left: 50px;
}

#btnSave img {
	display: none;
}

/* Kendo UI changes */

.k-window-titlebar {
    background-color: #e2e2e2;
}

.k-window-titlebar .k-window-actions {
    top: 6px;
}

.k-dropdown .k-state-focused .k-input {
	color: #fff;
}

.k-flatcolorpicker .k-hue-slider .k-draghandle {
    margin-top: -1px;
}

.k-grid .k-button {
    margin-top: 0;
    margin-bottom: 0;
}

.k-pager-wrap {
    padding: 4.5px 4px;
}

.k-pager-wrap.k-grid-pager .k-pager-numbers-wrap {
    height: calc(2.3em + 2px);
}

.k-pager-wrap .k-link {
    height: 2.4em;
    min-width: 2.4em;
    line-height: 1;
}

.k-pager-wrap .k-link:not(.k-pager-first, .k-pager-last) {
    border-radius: 0;
}

.k-pager-wrap .k-link:not(.k-pager-last) {
    border-right-width: 0;
}

.k-pager-wrap .k-pager-numbers-wrap .k-pager-numbers {
    border-radius: 4px;
}

.k-pager-nav + .k-pager-nav,
.k-pager-nav + .k-pager-numbers-wrap,
.k-pager-numbers li + li,
.k-pager-numbers-wrap + .k-pager-nav {
    margin-left: 0;
}

.k-pager-nav.k-state-disabled {
    color: inherit;
}

tr.k-state-selected a {
    color: #e0edff;
}

table.k-editor {
    height: 350px;
    overflow: hidden; /* fixes border radius corners */
}

.k-editor-toolbar .k-combobox {
    width: 10em;
}

.k-editor-toolbar > li {
    margin-right: 5px;
}

.k-editor-toolbar .k-tool-group .k-widget ~ .k-widget {
    margin-left: 5px;
}

.k-editor-toolbar .k-tool-group > .k-tool {
    box-sizing: content-box;
    font-size: 14px;
    width: 2em;
    height: 2em;
    padding: 0;
}

.custom-tool-button {
    height: 30px;
    padding: 0 6px 0 4px;
    margin: 1px 0;
}

.custom-tool-icon {
    background-position: -72px -72px;
    width: 24px;
    height: 24px;
    margin-right: 4px;
}

a.k-state-hover, a.k-state-hover:hover  {
	background-color: #E8EEF7;
	background-image: none;
}

/* END Kendo UI changes */

/* RESPONSIVE */

@media only screen and (min-width : 1850px) {
	.sidebar-left {
		width: 20%;
	}

    .content {
        width: 80%;
    }
}

@media only screen and (max-width: 1200px) {
	.content {
		width: 70%;
	}

    .sidebar-left {
        width: 30%;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 992px) {
	.sidebar-left {
		width: 90% !important;
		position: absolute;
		left: -90%;
		z-index: 9999;
        margin-top: 0;
        padding-top: 0;
	}

    .sidebar-left:not(.focus) #logo .toggle-sidebar:after {
        opacity: 0;
    }

    .focus {
        left: 0;
        box-shadow: 0 0 35px 5px rgba(0, 0, 0, 0.5);
    }

	.content {
		width: 100% !important;
	}

	.content-item {
		margin-left: 50px;
	}
}

@media (max-width: 993px) {
	#topmenu button {
		display: block;
	}

	.left {
		display: none;
	}
}

@media (max-width: 500px) {
	.not-matrix-form .fixed .btn-primary {
        display: inline-block;
		text-indent: -9999px;
		padding-right: 4px;
	}

    .dropdown-menu > li > a {
        padding: 9px 20px;
    }

    li.dropdown-divider-header {
        margin-bottom: 3px;
    }
}

@media (max-width: 400px) {
    .is-matrix-form .fixed .btn-primary {
        display: inline-block;
        text-indent: -9999px;
        padding-right: 4px;
    }
}

.mobilepage {
    padding: 5px 20px;
}

.search-report-filters input,
.search-report-filters .k-dropdown,
.search-report-filters select {
    max-width: 500px;
}

.search-report-filters .k-datepicker {
    margin-top: -4px;
}

.search-report-filters .form-horizontal {
	max-width: 1000px;
}

.ou-selected-image {
    position: absolute;
    height: 20px;
    width: 20px;
    object-fit: contain;
}

.ou-selected-image + span {
    margin-left: 25px;
}

.ou-dropdownlist img,
.ou-listview img,
.ou-checkbox-list-item > img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.ou-dropdownlist p {
    display: inline-block;
    padding-left: 5px;
}

.ou-listview p {
    margin: 0;
    padding-left: 5px;
}

.ou-listview {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border-bottom: 1px solid #f5f5f5;
}

.ou-listview.k-state-selected {
    background-color: #e4e6e7;
    color: #333;
    box-shadow: none;
}

.ou-listview:before {
    content: '';
    width: 14px;
    height: 14px;
    display: block;
    margin-right: 4px;
    border-radius: 50%;
}

.ou-listview.k-state-selected:before {
    /* checkmark icon from Bootstrap 4 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23214386' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.ou-checkbox-list-item:hover {
    background-color: #f5f5f5;
}

.ou-checkbox-list-item {
    display: flex;
    align-items: center;
    border: 1px solid #f5f5f5;
    border-width: 1px 0;
    margin: 0;
    margin-top: -1px;
    padding: 6px 4px;
    font-weight: normal;
    cursor: pointer;
}

.ou-checkbox-list-item > input {
    margin: 0 8px 0 0;
}

.ou-checkbox-list-item > img {
    margin-right: 12px;
}

#myLeanForms {
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 6px;
    margin-bottom: 12px;
    color: #428bca;
    font-weight: 300;
}

#myLeanForms li a {
    display: block;
    padding: 7px 15px;
    text-decoration: none;
    color: inherit;
}

#myLeanForms li a:hover {
    background-color: #ededed;
    color: #333;
}

#myLeanForms li a:active {
    background-color: transparent;
    color: inherit;
}

#myLeanForms .menu-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 9px;
    margin-left: -3px;
    margin-top: -3px;
}

.is-offline #myLeanForms li:not(#offline-dashboard) {
    display: none;
}

.is-offline .search {
    display: none;
}

.is-offline .menuSwitch {
    visibility: hidden;
}

.offline-icon {
    width: 42px;
    margin-left: 15px;
    margin-top: -4px;
    opacity: 0;
    transition: opacity 100ms ease;
}

.is-offline .offline-icon {
    opacity: 1;
}

/*
*   LeanForms mobile layout
*/
@media (max-width: 992px) {
    #logo, #topmenu {
        height: 40px;
        margin: 0;
    }

    .content {
        padding-top: 0;
    }

    #logo.custom-logo {
        background-size: auto 36px;
    }

    #logo.default-logo {
        background-size: auto 27px;
        background-position-y: 4px;
    }

    #topmenu .resize-sidebar:after {
        padding: 17px 25px 23px 20px;
    }

    #logo .toggle-sidebar:after {
        padding: 17px 20px 23px 25px;
    }

    #mainmenu, #content {
        top: 40px;
        border: 0;
        margin: 0;
    }

    #pageTitle {
        font-size: 18px;
        right: 50px;
        margin-top: 7px;
    }

    .offline-icon {
        float: left;
        width: 32px;
        margin-left: 0;
        margin-right: 8px;
    }

    #topmenu .mainbuttons li a {
        height: 40px;
        width: 40px;
    }

    #topmenu .mainbuttons li a:before {
        margin-top: 3px;
        margin-left: 3px;
    }

    .home-wrapper {
        border: 0;
    }
}


/*
*   Potentially unused
*   These should checked and deleted or moved
*/

.k-menu .k-item,
.k-widget.k-menu-horizontal > .k-item {
    border-style: none !important;
    border-width: 0px !important;
    font-size: 12px;
}

.k-state-border-down {
    background-color: #1b71b6;
    background-color: #fff;
}

.k-state-focused.k-state-selected,
.k-list > .k-state-focused.k-state-selected,
.k-listview > .k-state-focused.k-state-selected,
td.k-state-focused.k-state-selected {
    box-shadow: inset 0 0 3px 1px #fff;
}

.k-state-focused.k-state-selected,
.k-list > .k-state-focused.k-state-selected {
    box-shadow: none;
    -webkit-box-shadow: none;
}

.k-state-focused {
    box-shadow: none;
}

.k-i-arrow-s { background-position: -16px -32px; }

.edit .k-toolbar, iframe .k-toolbar {
    display: block;
    position: relative;
}

#btnAdd {
    float: right;
}

.k-toolbar .k-overflow-anchor {
    height: auto;
}

.k-i-arrowhead-n { background-position: -16px -256px; }
.k-i-arrowhead-n:hover { background-position: 0px -256px; }
.k-i-arrowhead-s { background-position: -16px -288px; }
.k-i-arrowhead-s:hover { background-position: 0px -288px; }

.label {
    width: 150px;
    padding-bottom: 2px;
    vertical-align: top;
}

.field {
    padding-bottom: 2px;
}

/* commentaar */
.k-editor-widget ul:before, .k-editor-widget li:before {
    content: "";
    display: none;
    width: 0;
    height: 0;
    border: none;
    margin-top: auto;
    top: auto;
}

.k-widget.k-tooltip {
    border-color: #A3C5E3;
    background-color: #A3C5E3;
    color: #000;
}

.k-tooltip-content {
    padding: 5px;
}
/* einde commentaar */

/*
*  Potentially unused icons
*  These should be checked and deleted or moved
*/

#config a:before { background-position: -72px -576px; }
#help a:before { background-position: -72px -720px; }

.k-plus {
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url(../img/iconen/mini-tree-icons.svg) !important;
    background-size: 64px 32px !important;
    background-position: -48px 0;
    line-height: 18px;
}

.k-minus {
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url(../img/iconen/mini-tree-icons.svg) !important;
    background-size: 64px 32px !important;
    background-position: -48px -16px;
    line-height: 18px;
}

.k-item:hover .k-plus { background-position: -16px 0; }
/*#searchresult a:before { background-position: -72px -792px; }
#searchresult.current a:before { background-position: 0px -792px; }*/
#webforms a:before { background-position: -72px -1272px; }

/*.ChangePassword { background-position: -72px -600px; }*/
/*.WebForm { background-position: -72px -312px; background-image: url(../img/iconen/tree-icons.svg); }*/

/*.WebFormManagement { background-position: -72px -336px; }*/
/*.WebFormReport { background-position: -72px -864px; }*/
.Object { background-position: -72px -888px; }
/*.MainProcess { background-position: -72px -24px; }*/
.Process { background-position: -72px -48px; }
/*.ProcessStep { background-position: -72px -72px; }*/
.Message { background-position: -72px -96px; }
.System { background-position: -72px -120px; }
/*.Actor { background-position: -72px -169px; }*/
.User { background-position: -72px -192px; }
.Document { background-position: -72px -289px; }
/*.RiscControl { background-position: -72px -240px; }*/
/*.Requirement { background-position: -72px -264px; }*/
/*.PerformanceIndicator { background-position: -72px -216px; }*/
.Role { background-position: -72px -144px; }
.Forms { background-position: -72px -312px; }
.Forms-custom { background-position: -72px -336px; }
.Drawing { background-position: -72px -1008px; }
.Input { background-position: -72px -1032px; }
.Output { background-position: -72px -1056px; }
/* drawing */
.Select { background-position: -72px -1080px; }
.Connect { background-position: -72px -1104px; }
/*.Rectangle { background-position: -72px -1128px; }*/
.Circle { background-position: -72px -1152px; }
.Line { background-position: -72px -1176px; }
.Text { background-position: -72px -1200px; }
/*.Clear { background-position: -24px -48px; }*/
.Canvas { background-position: -72px -1224px; }
/* eind drawing */

/*#nietactief a:before { background-position: -24px -240px; }
#algemeen a:before { background-position: -72px 0; }
#historie a:before { background-position: -72px -552px; }
#berichten a:before { background-position: -72px -528px; }
#eigenschappen a:before { background-position: -72px -576px; }
#overzichten a:before { background-position: -72px -864px; }
#share a:before { background-position: -72px -624px; }*/
#view a:before {background-position: -72px -600px; }

#link a:before { background-position: -72px -912px; }

#print a:before { background-position: -72px -672px; }
/*#pinit a:before { background-position: -72px -456px; }
#sendmail a:before { background-position: -72px -648px; }*/


/*
*   Notifications
*/

.alert {
    background-image: none;
    border: none;
}

/* .alert-success .alert-info .alert-warning .alert-danger */

.animated {
    animation-duration: 0.4s;
    animation-fill-mode: both;
}

/* Animations from https://github.com/daneden/animate.css */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDown {
    animation-name: fadeInDown;
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

.fadeOutUp {
    animation-name: fadeOutUp;
}

/*
*   Form
*/

@media (min-width: 992px) {
    .formpart-row > div:first-child,
    .q-text {
        display: flex;
        align-items: center;
        min-height: 34px;
    }
}

.webform:before {
    /* progress bar */
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    height: var(--form-progress-height, 5px);
    width: var(--form-progress-width, 0%);
    background-color: #214386;
    transition: width 150ms linear, height 200ms ease;
}

#MatrixDiv {
    padding: 0;
    overflow: visible;
}

#iMatrixForm {
    border: 0;
    width: 100%;
    height: 100%;
}

.matrix-undo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.matrix-undo span {
    margin-right: 5px;
}

.k-grid tbody button.matrix-duplicate-button {
    min-width: 0;
    line-height: 1;
    padding: 5px;
    margin: -3px 0 0 0;
    position: absolute;
    left: 34px;
    color: #555;
}

.lf-message {
    margin-top: 10px;
    font-size: 16px;
}

.q-text p {
    margin: 0;
}

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 28px;
    background-image: url('../img/iconen/dropdown.png');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 11px 10px;
}

select[multiple].form-control,
select[size].form-control {
    background-image: none;
    padding-right: 12px;
}

select.form-control::-ms-expand {
    display: none; /* Hide default dropdown icon in IE */
}

select[readonly] option {
    display: none;
}

/*
*   Form numeric input touchscreen helpers
*/

.numeric-input-container {
    display: flex;
}

.numeric-helper-button {
    display: none;
    margin-right: 0;
    padding: 6px 18px;
    background-color: #f5f5f5;
}

.show-helper-buttons .numeric-input:focus,
.show-helper-buttons .numeric-input-container:focus-within .numeric-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.show-helper-buttons .numeric-input:focus ~ .numeric-helper-button,
.show-helper-buttons .numeric-input-container:focus-within .numeric-helper-button,
.show-helper-buttons .numeric-helper-button:active, /* this selector and the next one are for iOS */
.show-helper-buttons .numeric-helper-button:active ~ .numeric-helper-button {
    display: block;
}

.numeric-helper-button:not(:last-child) {
    border-radius: 0;
    border-right: 0;
}

.numeric-helper-button:first-of-type {
    border-left: 0;
}

.numeric-helper-button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Kendo dropdowns */

.k-dropdown .k-select > .k-i-arrow-60-down:before {
    content: "\e015"; /* chevron icon */
    color: #555;
}

.k-dropdown {
    cursor: default;
    padding: 0;
    background: none;
    max-width: 100%;
}

.k-dropdown > .k-dropdown-wrap {
    cursor: pointer;
    padding: 6px 12px;
    padding-right: 1.9em;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.k-dropdown > .k-dropdown-wrap.k-state-focused {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.k-dropdown > .k-dropdown-wrap > .k-input {
    font-size: 14px;
    padding: 0;
    text-indent: 0;
    line-height: 1.43;
    color: #555;
}

.k-dropdown-wrap.k-state-disabled {
    opacity: 1;
    background-color: #eeeeee;
}

.k-popup.k-list-container {
    padding: 0;
    border-top: 0;
}

.k-popup .k-list .k-item {
    border-radius: 0;
    border: 0;
    padding-left: 12px;
}

.k-list > .k-state-selected {
    background-color: #1e90ff;
    color: white;
}

.k-list-optionlabel {
    border-radius: 0;
}

.kendo-ddl .k-dropdown {
    width: 100% !important; /* override width set by js */
}

.k-list-filter {
    margin: 0;
}

.k-list-filter > .k-textbox {
    padding-right: 30px;
    border-radius: 0;
    border-width: 0 0 1px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.k-textbox:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    border-color: #66afe9;
}

/* Form / kendo styles */

.k-upload .k-upload-button {
    margin-left: 1em;
}

.k-upload.k-state-disabled {
    opacity: 1;
}

.k-upload.k-state-disabled .k-dropzone {
    background-color: #eee;
}

.k-upload-empty .k-dropzone-hint {
    display: none;
}

.k-upload.k-state-disabled .k-upload-button {
    background-color: #e8e8e8;
}

input.dataset, input.link {
    display: inline-block;
    width: calc(100% - 41px - 5px);
    margin-right: 5px;
}

input.link-button {
    display: inline-block;
    width: calc(100% - 82px - 10px);
}

input.link-button + .formbutton.dataset {
    margin-left: 4px;
}

.formbutton.dataset, .formbutton.link {
    float: right;
}

.formbutton.dataset-link {
    padding-top: 4px;
    float: right;
}


.formbutton {
    margin-right: 0;
}

.q-input .k-datepicker,
.q-input .k-datepicker .k-picker-wrap,
.q-input .k-timepicker,
.q-input .k-timepicker .k-picker-wrap,
.q-input .k-datetimepicker,
.q-input .k-datetimepicker .k-picker-wrap {
    width: 100%;
}

.q-input .k-datepicker,
.q-input .k-timepicker,
.q-input .k-datetimepicker,
.q-input > input[format="date"] {
    width: 30%;
    min-width: 120px;
}

.q-input .k-datetimepicker,
.q-input > input[datetype="2"] {
    min-width: 150px;
}

.k-picker-wrap .k-input {
    color: #555;
    text-indent: 0;
    padding: 4.5px 0 4.5px 12px;
    height: 32px;
}

.k-ie .k-picker-wrap .k-input {
    height: 32px; /* kendo sets height to 2em for IE */
}

.k-picker-wrap.k-state-hover,
.k-picker-wrap.k-state-hover > .k-select {
    border-color: #ccc;
}

.k-picker-wrap.k-state-focused {
    border-color: #66afe9;
}

.k-picker-wrap.k-state-disabled {
    opacity: 1;
    background-color: #e8e8e8;
}

.k-picker-wrap.k-state-disabled,
.k-picker-wrap.k-state-disabled .k-link {
    color: #b5b5b5;
}

.k-calendar .k-month th.k-alt { 
    /* week number header */
    width: 24px;
}

.k-calendar .k-content td.k-alt {
    /* week number */
    font-size: 11px;
    vertical-align: middle !important; /* !important needed to override other !important  */
}

.k-calendar .k-calendar-header {
    padding: 8px 0px;
}

.k-calendar-header .k-button.k-title {
    font-size: inherit;
    padding: 6px 12px;
}

.k-calendar .k-calendar-header .k-today {
    padding: 3px;
    vertical-align: middle;
}

/* Preventing the 'vandaag' navigation elements to line-break. */
.k-calendar .k-calendar-header .k-calendar-nav.k-hstack {
    display: flex;
}

.k-datetimepicker .k-select .k-link {
    width: 100%;
    height: 100%;
}

.k-datetime-container .k-datetime-buttongroup {
    padding-bottom: 0;
}

.k-datetime-container .k-date-tab .k-datetime-buttongroup,
.k-datetime-container .k-date-tab .k-datetime-selector {
    background-color: #fff;
}

.k-datetime-container,
.k-timeselector {
    background-color: #f5f5f5;
}

.k-datetime-footer.k-action-buttons {
    margin: 0;
}

.k-button-icon {
    width: calc(1.4285714286em + 14px);
    height: calc(1.4285714286em + 14px);
    padding: 6px;
}

.k-popup .k-calendar {
    box-shadow: none;
}

.k-time-list-container {
    justify-content: center;
}

.k-imagebrowser .k-breadcrumbs {
    display: none;
}

.k-imagebrowser .k-search-wrap {
    width: 100%;
}

.k-filebrowser .k-tiles-arrange {
    display: none;
}

.q-input > input.formula {
    padding-left: 34px;
}

.formula-icon.form-control-feedback {
    right: auto; /* reset Bootstrap positioning */
    z-index: auto; /* reset Bootstrap z-index */
    font-family: WebComponentsIcons;
    font-size: 16px;
    color: gray;
    transition: color .15s ease-in-out;
}

input[format="date"] ~ .lf-alert {
    margin-left: 34px;
    transform: translateY(3px);
}

.k-datetimepicker input[format="date"] ~ .lf-alert {
    margin-left: 62px;
}

.k-tooltip.lf-alert {
    box-shadow: none;
    line-height: 1;
    align-items: center;
    align-self: center;
    z-index: 1; /* default z-index set by Kendo is much higher, shows on top of many things it shouldn't */
}

.lf-alert .k-i-exception,
.q-input .lf-alert > span.k-i-exception { /* specificity hack to overwrite kendo styles */
    margin-right: 5px;
}

/*
* Bootstrap 5 checkbox and radio button styles
* These styles are a direct copy from the source.
* Modifications are done in the next section.
*/

.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: 0.125rem;
}

.form-check .form-check-input {
    float: left;
    margin-left: -1.5em;
}

.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, 0.25);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}

.form-check-input[type=checkbox] {
    border-radius: 0.25em;
}

.form-check-input[type=radio] {
    border-radius: 50%;
}

.form-check-input:active {
    filter: brightness(90%);
}

.form-check-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.form-check-input:disabled {
    pointer-events: none;
    filter: none;
    opacity: 0.5;
}

.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
    opacity: 0.5;
}

@media print {
    /* Bootstrap print styles remove all background styling with !important,
       so these overrides are needed */

    .form-check-input {
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
    }

    .form-check-input:checked {
        border-color: #000 !important;
    }

    .form-check-input:checked[type=checkbox] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
    }

    .form-check-input:checked[type=radio] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e") !important;
    }

    .form-check-input[type=checkbox]:indeterminate {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") !important;
    }
}

/*
* Custom radio button and checkbox changes
*/

.form-check {
    position: relative;
    margin-bottom: 0;
    max-width: 100%;
    min-height: 36px;
}

input.form-check-input { /* Override Bootstrap v3 specificity */
    margin-top: 2px;
    width: 16px;
    height: 16px;
}

.form-check .form-check-input {
    float: left;
    margin-left: -1.8em;
}

.form-check-label {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    border: 1px solid #eee;
    margin-bottom: 0;
}

.formpart:nth-child(even) .form-check-label,
.formpart.formpart-odd .form-check-label  {
    border-color: #ccc;
}

.form-check,
.form-check-label {
    padding: 8px;
    padding-left: 2.8em;
}

.form-check:first-child .form-check-label {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.form-check:last-child .form-check-label {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.form-check:not(:first-child) .form-check-label {
    margin-top: -1px;
}

input.form-check-input:focus { /* Override Bootstrap v3 specificity */
    outline: 0;
}

.form-check-input:disabled:checked {
    background-color: #9fa1a4;
    border-color: #828e9b;
}

.form-check-input:disabled {
    opacity: 1;
    background-color: #eee;
}

.form-check-input:disabled ~ span {
    opacity: 0.9;
}

.form-check-input:disabled ~ .form-check-label {
    cursor: not-allowed;
}

.formpart .form-check-input:checked ~ .form-check-label { /* specificity is required */
    border-color: #007bff;
    z-index: 2;
}

.form-check-input:disabled:checked + .form-check-label {
    border-color: #828e9b;
}

.inline-radio {
    display: flex;
    flex-wrap: wrap;
}

.inline-radio .form-check {
    flex: 1 0 auto;
    padding-right: 16px;
}

.inline-radio .form-check-label {
    border-radius: 4px;
}

.inline-radio .form-check:not(:first-child) .form-check-label {
    margin-top: 0;
    margin-left: -1px;
}

@media (min-width: 992px) {
    .formpart:nth-child(even) .form-check-label,
    .formpart.formpart-odd .form-check-label, /* specificity is required */
    .form-check-label {
        border-color: transparent;
    }

    .form-check-label {
        border-radius: 4px;
    }

    .inline-radio .form-check {
        flex: none;
    }
}

/* Preload styles */

.q-input > input[type="file"] {
    font-size: 12px;
    padding: 14.7px 12px;
    background-color: #f5f5f5;
    border-radius: 3px;
    border: 1px solid #ccc;
    width: 100%;
}

.q-input > canvas {
    display: block;
    width: 500px;
    height: 300px;
    background-color: white;
    border: 1px solid #ccc;
}

.grid-preload {
    width: 100%;
}

.grid-preload th {
    background-color: #f5f5f5;
    font-weight: normal;
    border: 1px solid #ccc;
    padding: .5em .6em .4em .6em;
}

.grid-preload:not(.k-selectable) tr:nth-child(even) {
    background-color: #f5f5f5;
}

.grid-preload td {
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: #ccc;
    padding: .4em .6em;
    overflow: hidden;
    vertical-align: middle;
}

/*
*   Management forms
*/

.form-group {
    margin-bottom: 8px;
}

.form-header {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.properties-toolbar .btn:not(.btn-primary):not(.button-icon),
.dialog-toolbar .btn:not(.btn-primary):not(.button-icon) {
    padding: 6px 12px;
}

.k-grid-content:focus {
    outline: none;
}

.grid-header {
    margin-bottom: 10px;
}

.k-button:focus:active {
    box-shadow: 0 0 7px 0 #76abd9, inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-primary:hover {
    color: #fff;
    background-color: #2373B5;
    border-color: #2373B5;
}

.btn {
    transition: background-color 60ms ease-out, border-color 60ms ease-out;
}

.btn-primary:active:focus, .btn-primary:active:hover {
    background-color: #2373B5;
    border-color: #2373B5;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.k-button:not(.btn) {
    font-size: 12px;
}

label.inline-checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 30px;
    font-weight: normal;
}

.form-horizontal .form-group > div > input[type=checkbox] {
    width: 21px;
    height: 21px;
    margin-top: 7px;
}

.short-column-fix {
    margin-top: 7px;
}

.dialog-toolbar {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
}

.dialog-toolbar #cancel-button,
.dialog-toolbar #action-cancel {
    float: right;
    margin-right: 0;
}

@media (max-width: 450px) {
    .dialog-toolbar #action-cancel {
        display: none;
    }
}

.settings-grid {
    margin-top: 8px;
}

.settings-grid .k-grid-content {
    height: calc(100vh - 185px);
}

.settings-grid colgroup col:first-child {
    width: 70px;
}

.listboxes-container {
    display: flex;
    flex-direction: row;
}

.groups-buttons {
    margin: 100px 15px 0 15px;
}

.groups-buttons > button {
    width: 100%;
    margin-bottom: 5px;
}

/* TODO check if used */
.k-window .k-loading-mask {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/*
*   Attachment previews
*/

.attachment-container {
    float: left;
    width: 250px;
    margin: 5px 15px 5px 0;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

.attachment-item {
    width: 100%;
    height: 140px;
    font-size: 100px;
    object-fit: contain;
    background-color: #ffffff;
}

.attachment-text {
    padding: 5px 50px 5px 30px;
    border-top: 1px solid #ccc;
    position: relative;
    word-break: break-word; /* deprecated, only for IE */
    overflow-wrap: break-word;
}

.attachment-text > .k-i-attachment {
    position: absolute;
    left: 8px;
    top: 6px;
}

.is-ios-pwa .attachment-text a {
    color: inherit;
    pointer-events: none;
}

.is-ios-pwa .attachment-text:after {
    /* content set by Formulier.aspx */
    font-size: 85%;
    font-style: italic;
}

.delete-attachment {
    background-color: #ebebeb;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    border: 0;
    padding: 0 12px;
    border-bottom-right-radius: 4px;
    transition: color 90ms linear, background-color 90ms linear;
}

.delete-attachment > .k-i-delete {
    margin-top: -2px;
}

.delete-attachment:hover {
    background-color: #dedede;
    color: #be0000;
}

.delete-attachment:active {
    background-color: #cbcbcb;
}

.attachments-container.hide-attachment-buttons .delete-attachment {
    display: none;
}

.image-preview {
    position: absolute;
    z-index: 12;
    border: 1px solid #ddd;
}

.image-preview img {
    max-width: 800px;
    max-width: 50vw;
    max-height: 800px;
    max-height: 65vh;
}

/*
*   Attachment drawing
*/

.attachment-draw-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 5px 12px;
    border: 0;
    border-bottom: 1px solid #cccccc;
    background-color: #ebebeb;
    font-size: 18px;
    font-weight: 600;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.4px;
    color: #464646;
    transition: background-color 90ms linear;
}

.attachment-draw-button:hover {
    background-color: #dedede;
}

.attachment-draw-button:active {
    background-color: #cbcbcb;
}

.attachment-draw-button-text {
    margin-left: 10px;
    margin-top: -2px;
}

.attachments-container.hide-attachment-buttons .attachment-draw-button {
    display: none;
}

.attachment-draw-container {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background-color: #000;
    z-index: 20; /* on top of toolbar */
}

html.is-drawing-active {
    overscroll-behavior-x: none; /* prevent Chrome history swipe gestures */
}

.attachment-draw-canvas-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    height: 0;
}

.attachment-draw-canvas,
.attachment-draw-size-helper {
    max-width: 100%;
    max-height: 100%;
}

.attachment-draw-size-helper {
    visibility: hidden;
    position: absolute;
}

.attachment-draw-toolbar {
    padding: 10px 20px;
    background-color: rgb(255, 255, 255, 0.15);
}

.attachment-draw-toolbar-container {
    display: flex;
    justify-content: space-between;
    max-width: 500px;
    margin: 0 auto;
}

.attachment-draw-color {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid white;
    cursor: pointer;
}

.attachment-draw-color.is-active {
    transform: scale(1.15);
}

.attachment-draw-tool {
    width: 36px;
    height: 36px;
    border: 0;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
}

.attachment-draw-tool .k-icon {
    font-size: inherit;
}

.attachment-draw-undo {
    font-size: 34px;
}

.attachment-draw-undo .k-icon {
    transform: scaleY(-1);
}

.attachment-draw-confirm {
    font-size: 21px;
    display: grid;
    place-items: center;
}

/*
*   Other
*/

.dialog-container {
    height: 100%;
}

#confirmdialog,
.dialog-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.old-confirm {
    min-height: 150px;
}

.confirm-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.confirm-buttons .btn:last-child {
    margin-right: 0;
}

.defaultTabStrip {
    border: 0;
    box-shadow: none;
}

.defaultTabStrip:focus {
    box-shadow: none;
}

.defaultTabStrip > .k-tabstrip-items {
    border-bottom: 1px solid #ccc;
}

.defaultTabStrip > .k-content {
    margin: 0;
    padding-bottom: 0;
    border-width: 0;
    position: relative;
    box-sizing: border-box;
    height: calc(100vh - 39px);
}

.clsDeleted {
    color: red;
    font-weight: bold;
}

/*
*   Treemenu
*/

#divMenu {
    position: relative;
}

.search {
    margin: 8px 15px;
}

.search > input.form-control {
  padding-right: 34px;
}

.search > .k-i-search {
    font-family: WebComponentsIcons;
    font-size: 16px;
    color: gray;
    top: 0;
    pointer-events: none;
}

.adminMenu {
    margin: 5px 15px;
}

.lf-treeview .k-in {
    width: 100%;
    height: auto;
    display: inline-flex;
    align-items: center;
    border: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    position: relative; /* to contain link */
}

.lf-treeview .k-in > span {
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
}

.lf-treeview a,
.lf-treeview a:hover,
.lf-treeview a:focus {
    color: inherit;
    text-decoration: none;
}

.lf-treeview .k-state-selected {
    background-color: transparent;
}

.lf-treeview .treelabel {
    display: inline-block;
    white-space: normal;
    width: calc(100% - 92px);
    padding-left: 8px;
}

.lf-treeview .treelabel > a::after {
    /* styles from Bootstrap 4 .streched-link */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
}

.lf-treeview .treelabel[nodeid="NoItems"] {
    width: 100%;
    padding: 3px;
    margin: -3px;
    color: #333;
    cursor: default;
}

.lf-treeview .treenode {
    display: inline-block;
    float: right;
    padding-top: 3px;
    margin-right: 10px;
    margin-left: auto;
    font: 16px/1 WebComponentsIcons;
}

.lf-treeview .treenode > span,
.lf-treeview .treenode > a > span {
    transition: color 100ms ease;
    padding: 1px;
    position: relative;
    z-index: 2; /* show on top of link pseudo */ 
}

.lf-treeview .treenode > span:hover,
.lf-treeview .treenode > a > span:hover {
    color: #d83e1f;
}

.deletedItem {
    color: #de0000;
    text-decoration: line-through;
}

.treeview-revision {
    color: #710094;
    font-style: italic;
}

/*
*   Dashboard.aspx / offline-dashboard.aspx
*/

.favorites-table {
    margin-bottom: 0;
}

.favorites-table .button-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: -8px;
}

.favorites-table button {
    color: #555;
    cursor: pointer;
    padding: 8px 12px;
    background-color: transparent;
    border: 0;
}

.favorites-table button:hover {
    color: #111;
    background-color: #f5f5f5;
}

.no-favorites {
    display: none;
    color: #555;
    background-color: #f5f5f5;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
}

.no-favorites h4 {
    margin-bottom: 3px;
    margin-top: 0;
}

.no-favorites h4 .k-icon {
    font-size: 18px;
    margin-top: -3px;
    margin-right: 3px;
}

.no-favorites p {
    margin-bottom: 0;
}

.no-favorites p .k-icon {
    margin-top: -4px;
}

/* Offline dashboard */

.favorites-table .button-spinner {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: relative;
    border: 2px solid #214386;
    border-left-color: rgba(33, 67, 134, 0.2);
    animation: load 1.1s infinite linear;
    outline: none;
    color: transparent;
    background-color: transparent;
    padding: 0;
    margin: 0 10px;
}

.favorites-table .button-spinner:hover {
    color: transparent;
    background-color: transparent;
}

@keyframes load {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.clear-synced-forms {
    float: right;
    margin-top: -35px;
    margin-bottom: 8px;
}

@media (max-width: 500px) {
    .clear-synced-forms {
        float: none;
        margin-top: -8px;
    }
}

/*
*   Library.aspx
*/

.library-container * {
    box-sizing: border-box;
}

.library-container {
    margin: -13px;
}

.library-warn-language {
    padding: 10px 15px;
    text-align: center;
    color: #544325;
    background-color: #ecd86f;
}

.library-warn-language .k-icon {
    margin-top: -2px;
    margin-right: 2px;
}

.library-sidebar,
.library-items {
    padding-top: 40px;
    padding-bottom: 20px;
}

.library-sidebar {
    position: sticky;
    top: 0;
    padding-top: 25px;
}

.library-sidebar h1 {
    margin-top: 0;
}

.library-sidebar p {
    margin-top: 1em;
}

.library-tag-filters {
    margin-top: 2em;
}

.library-tag-filter {
    background-color: transparent;
    border: 0;
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 18px;
    border-radius: 19px;
    margin-bottom: 4px;
    transition: background-color 100ms ease, box-shadow 100ms ease;
}

.library-tag-filter:focus {
    box-shadow: 0 0 0px 2px #d1d1d1;
    outline: 0;
}

.library-tag-filter.library-tag-filter--is-active {
    background-color: #e8e8e8;
    font-weight: 600;
}

.library-tag-filter:hover {
    background-color: #f2f2f2;
}

.library-tag-filter .k-i-close {
    display: none;
    float: right;
    color: #999;
    margin-top: 2px;
}

.library-tag-filter.library-tag-filter--is-active .k-i-close {
    display: block;
}

.library-tag-filter.library-tag-filter--is-active:hover .k-i-close {
    color: #555;
}

.library-items {
    background-color: #f5f5f5;
}

@media (min-width: 992px) {
    .library-items {
        min-height: calc(100vh - 39px);
    }
}

.library-cards-wrapper {
    display: flex;
    flex-wrap: wrap;
}

@media (min-width: 700px) {
    .library-card-wrapper {
        width: 50%;
    }
}

@media (min-width: 1300px) {
    .library-card-wrapper {
        width: 33.33%;
    }
}

.library-card-wrapper {
    display: flex;
    padding-left: 15px;
    padding-right: 15px;
}

.library-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

.library-card > img {
    height: 180px;
    object-fit: cover;
    width: 100%;
}

.library-card-body {
    padding: 12px 16px;
    flex: 1 0 auto;
}

.library-tags span {
    display: inline-block;
    font-size: 13px;
    font-weight: 300;
    padding: 2px 13px;
    margin-bottom: 5px;
    margin-right: 2px;
    border-radius: 15px;
    background-color: hsl(220, 50%, 94%);
}

.library-tags {
    margin-bottom: -4px;
}

.library-card-body > a > .k-icon {
    margin-top: -2px;
}

.library-import {
    align-self: flex-end;
    margin-right: 16px;
    margin-bottom: 14px;
}

.library-import:before {
    margin-right: 8px;
}

.library-container h4 {
    font-weight: 600;
}

/*
*   Actions (Fomulier.aspx and Acties.aspx)
*/

.action-popup-body {
    padding: 0;
    box-sizing: border-box;
}

.action-popup-body * {
    box-sizing: border-box;
}

.action-form-container,
.action-attachments-wrapper {
    padding-top: 15px;
    padding-bottom: 15px;
}

.action-popup-body .form-group {
    margin-bottom: 15px; /* is bootstrap default, but is changed earlier */
}

.action-popup-body .radio:first-child {
    margin-top: 0;
}

.action-popup-body .dialog-toolbar {
    padding: 0;
}

.action-attachments-wrapper {
    background-color: #f5f5f5;
}

.action-attachments-wrapper.action-attachments--is-hidden {
    display: none;
}

.action-attachments-wrapper.action-attachments--is-hidden > div {
    display: none;
}

.action-badge {
    background-color: #a1d5e9;
    color: #333;
    padding: 2px 4px;
    font-size: 11px;
    border-radius: 3px;
    vertical-align: bottom;
}

@media (min-width: 992px) {
    .action-popup-body {
        display: flex;
        flex-wrap: wrap;
    }

    .action-attachments-wrapper.action-attachments--is-hidden {
        display: block;
    }
}

.action-attachments-wrapper .k-dropzone {
    background-color: #fcfcfc;
}

#action-attachments-container:empty:before {
    content: attr(data-empty-text);
    font-size: 16px;
    font-weight: 600;
    color: #6f6f6f;
    text-align: center;
    display: block;
    margin-top: 24px;
    margin-bottom: 24px;
}

.action-attachment {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
    border-radius: 10px;
    overflow: hidden;
    background-color: white;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.05);
}

.action-attachment-body {
    padding: 10px 16px 12px;
}

.action-attachment-body > .k-i-attachment {
    margin-top: -1px;
    margin-left: -3px;
}

.action-attachment-delete {
    background: none;
    border: 0;
    line-height: 0;
    position: relative;
    top: -1px;
    margin-left: 2px;
    margin-bottom: -3px;
    padding: 2px;
    opacity: 0.6;
    transition: opacity 140ms ease;
}

.action-attachment-delete:hover {
    opacity: 1;
}

.action-popup-body.action--is-closed .action-attachment-delete {
    display: none;
}

.action-attachment-details {
    color: #6f6f6f;
    margin-top: 3px;
}

.action-attachment-username {
    font-weight: 600;
}

.action-attachment-preview {
    border-bottom: 1px solid #f5f5f5;
    background-color: #fbfbfb;
    width: 100%;
}

.action-attachment-preview img {
    margin: 0 auto;
    max-height: 230px;
}

.action-attachment-icon {
    background-color: #fff;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-attachment-icon > div {
    display: inline-block;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 50%;
}

.action-attachment-icon .k-icon {
    font-size: 28px;
}

.action-attachment-icon + .action-attachment-body {
    width: calc(100% - 48px - 10px);
}

/* Actions Formulier.aspx only */

#action-popup .btn-group {
    margin-right: 8px;
}

#action-popup .btn-group .btn {
    margin-right: 0;
}

#action-popup .btn-group .dedicated-toggle {
    padding: 5px;
    border-left-color: #1d3972;
}

/*
*   Kendo grid filter
*/

a.k-grid-filter.k-state-active {
    background-color: #428BCA;
    color: #fff;
}

/*
*   bigview dashboard 
*/

.fullscreen #topmenu,
.fullscreen .sidebar-left {
    display: none;
}

.fullscreen .content {
    width: 100%;
}

.fullscreen #content {
    top: 0;
    margin: 15px;
}

/*# sourceMappingURL=leanforms-e0226e247e.css.map */