/*	Stylesheet MVC
version: -
authors: Bas Faro, Jonathan van den Brink
website: https://www.padgin.com/
All rights reserved
*/
.placeHolderImage {
	max-width: 500px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 500;
	padding: 25px;
}
.placeHolderImage svg {
	width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
	padding: 25px !important;
	padding-bottom: unset !important;
}
.placeHolderImageWrapper {
	width: 100% !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.placeHolderImage a {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	grid-gap: 5px;
	font-weight: 500;
	padding: 5px;
	border: 2px solid #000000;
	border-radius: 25px;
	margin-top: 10px;
	background: #ffffff;
}
.placeHolderImage a:hover {
	filter: invert(1);
	border-color: #ffffff;
}
.placeHolderImage a::after{
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='512' height='512' x='0' y='0' viewBox='0 0 492.004 492.004' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cpath d='M382.678 226.804 163.73 7.86C158.666 2.792 151.906 0 144.698 0s-13.968 2.792-19.032 7.86l-16.124 16.12c-10.492 10.504-10.492 27.576 0 38.064L293.398 245.9l-184.06 184.06c-5.064 5.068-7.86 11.824-7.86 19.028 0 7.212 2.796 13.968 7.86 19.04l16.124 16.116c5.068 5.068 11.824 7.86 19.032 7.86s13.968-2.792 19.032-7.86L382.678 265c5.076-5.084 7.864-11.872 7.848-19.088.016-7.244-2.772-14.028-7.848-19.108z' fill='%23ffffff' data-original='%23000000' class=''%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
	color: #ffffff;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
    background-color: #000000;
    border-radius: 25px;
    background-size: 10px;
    background-position: center;
	background-repeat: no-repeat;
}
.DataObject.DataObjectOpen:first-child .Data.Name * {
	font-weight: 600 !important;
}
.DataObject.DataObjectOpen .DataExtra .Data.Name * {
	font-weight: inherit !important;
}
.DataObject.DataObjectOpen .DataObject.DataObjectOpen::before {
	opacity: 1;
}
.DataObject.DataObjectOpen > .DataHead {
	border-bottom: 1px solid #5581d120;
	border-bottom-left-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
}
.editButtonsContainer {
	display: none;
	position: absolute;
	background: #ffffff;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #5581d120;
    z-index: 9;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	right: 50px;
	top: 0px;
	flex-direction: column;
}
.fileManager #ViewerData {
	padding: 0px 20px !important;
}
.editButtonsContainerOpen { /* IMPORTANT FOR CATALOG PROPERTIES */
	display: flex !important;
}
.editButtonsContainer hr {
	border-top: 1px solid #f7f7f7;
}
.editButtonsContainer .contentItemButton .iconRight, .editButtonsContainer .contentItemButton .switch {
	margin-left: auto !important;
}
.MobileControlButtonsButton {
	display: none;
	z-index: 2;
}
.editButtonsContainer .contentItemButton {
	width: 200px;
    grid-gap: 10px;
    display: inline-flex;
    align-items: center;
    height: 28px;
}
.editButtonsContainer .contentItemButton.Check.Active {   /* SAME as .iconButton.Active */
	background: #507dd0 !important;
    fill: #ffffff !important;
	color: #ffffff !important;
}
.filterTag {
	background: #ffffff;
}
.contentItemButton span, .contentItemButton span:hover {
	text-decoration: none !important;
}
.dataRowPopUp {
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #f9f9f9;
    border-radius: 5px;
    flex-direction: column;
    z-index: 999;
    width: 275px;
    box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    font-size: 14px;
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0px !important;
    min-height: 300px;
    transition: .2s;
}
.dataRowPopUp .itemContainer {
	padding: 0px 10px;
}
#changeHistory {
	padding-left: unset !important;
	padding-right: unset !important;
}
#changeHistory .itemBox {
	background: #ffffff;
}
#generalInformation #changeHistory {
	padding: 20px;
    border: 1px solid #5581d120;
    border-radius: 25px;
    margin: 20px 0px !important;
    background: #fcfcfc;
}
.dataRowPopUp .dockLoader {
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.dataRowPopUp .Head {
	padding: 15px 15px 0px 15px;
}
.dataRowPopUp .inlineItemHead {
	font-size: 9px;
}
.Data.Image:has(img, span) {
	min-height: 40px;
	min-width: 40px;
	object-fit: cover;
	padding: 5px 0px;
}
.Data.Image:has(svg, img):not(.Data.Image:has(.logoAvatar)) {
	height: 40px;
	width: 40px;
	padding: 10px;
	justify-content: center;
}
.Data.Image .userAvatar {
	margin-right: unset;
}
.DataHeadSubject .dropList svg {
	min-width: 10px;
}
.DataHead .stdLink {
	font-size: 11px !important;
}
.DataHead .ControlButtons {
	grid-gap: 10px;
	margin-left: auto;
}
.DataHead a:hover:not(a.contentItemButton) {
	text-decoration: underline !important;
}
.Data.Value {
    display: inline-flex;
    grid-gap: 3px;
}
.DataOrder {
    width: 50px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
	background: #ecf3ff;
	flex-direction: column;
	border-radius: 3px;
}
.DataOrder span {
	width: 30px;
	height: 30px;
	border-radius: 30px;
	line-height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.DataOrder.positionPlaceholder {
	background: #fafafa;
}
.DataOrder.positionPlaceholder span {
	background: #5581d120;
}
#controlButtonsHead {
	grid-gap: 10px;
}
.Data.Breadcrumb {
	padding: 10px;
	background: #fafafa;
	border-top: 1px solid #5581d120;
	width: 100%;
	padding-left: 35px !important;
}
.ControlButtons .iconExplanation:hover .iconExplanationText, .toolTip:hover .toolTipText {
    transform: translateX(-98%) scale(1);
}
.DataHeadSubjectColumn {
	display: flex;
	flex-direction: column;
}
.DataHeadSubjectColumn .Data.Label {
	font-size: 1.05rem;
}
.DataHeadSubjectColumn .Description {
	font-weight: 400;
}
.DataSub {
    grid-gap: 10px;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
	background: #fafafa !important;
}
.DataSubRow {
	display: inline-flex;
	grid-gap: 10px;
	flex-direction: row;                                                                                                                        ;
}
.DataExtra {
	display: flex;
	flex-direction: column;
	grid-gap: 10px;
    border-radius: 0 0 5px 5px;
}
.DataSub:has(div) {
	padding: 10px;
}
.Data.Type {
	flex: 0.75 !important;
}
.Data.Name {
	font-size: 0.8rem;
	flex: 2 !important;
	line-height: 1.2;
}
.ControlButtons svg {
	width: 12px !important;
	height: 12px !important;
	fill: #000000 !important;
}
.ControlButtons .Active svg {
	fill: #ffffff !important;
}
.DataObjectChecked .inputCheckbox {
	visibility: visible;
}
.Viewer.Tiles {
	display: inline-grid;
	grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
	grid-gap: 20px;
	/* padding: 20px; */
    box-sizing: border-box;
}
.Tiles .dropList {
	justify-content: center;
	padding: 0px !important;
}
.Tiles .LastEdit {
	display: none;
}
.lastEditWrapper {
	display:inline-flex;
	align-items: center;
}
.Head .Data {
	cursor: pointer;
	transition: .2s;
	font-size: 12px;
	color: rgba(0,0,0,.8);
}
.Head .Data.Active {
	background-color: #f9f9f9 !important;
	color: #000 !important;
}
.Head .Data .Data:hover {
	background-color: #ffffff;
	border: 1px solid #5581d120;
	cursor: pointer;
}
.Head .Data.Active img {
	display: block;
}
.Head .Data img, .Head .Data svg {
	height: 10px !important;
    /* display: flex !important;
    position: absolute !important;
    right: 10px;
    transition: .2s;
    top: 50%;
    transform: translateY(-50%); */
}
.DataObject.isCancelled, .DataObject.isLocked {
	opacity: 0.6;
}
.DataObject.isLocked {
	border-color: #e67e22 !important;
}
.DataObject:has(.editButtonsContainerOpen) {
	z-index: 99;
}
.DataObject.isCancelled:hover {
	opacity: 1;
}
.DataObject.isExpired {
	border-color: #e67e22cc !important;
	margin-top: 3px;
	animation: pulseYellow 2s infinite;
}
.DataObject.isCancelled span {
	text-decoration: line-through;
}
.DataObject.isWaitingForApproval, .eventTile.isWaitingForApproval .actionDetails {
	animation: pulse 2s infinite;
}
.eventTile.isWaitingForApproval .actionDetails, #dashContent .DataObject.isWaitingForApproval {
	background: #e7effd;
	border: 1px solid var(--primary-color) !important;
}
#dashContent .DataObject.isRejected .DataHead {
	opacity: 0.5;
}
#dashContent .DataObject.isRejected.DataObjectOpen .DataHead {
	opacity: 1;
}
/* .eventTile.isWaitingForApproval .calendarTitle::after {
	content:"!";
	color: #ffffff !important;
	font-weight: 600;
	position: absolute;
	right: 10px;
	border-radius: 25px;
	padding: 5px !important;
	background: var(--primary-color);
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	text-align: center;
} */
#detailContainer:has(.approvalButtonsRow) .Status {
	min-width: 232px !important;
}
.approvalButtonsRow {
	display: inline-flex;
    width: 100%;
	padding: 5px 0px;
	grid-gap: 10px;
	justify-content: space-between;
}
.approvalButtonsRow a {
    padding: 3px 16px;
    border-radius: 25px;
    font-weight: 600;
	display: inline-flex !important;
	align-items: center;
	position: relative;
	grid-gap: 5px;
}
.approvalButtonsRow a.Blue {
	padding: 0px 3px !important;
}
.approvalButtonsRow a.red, .approvalButtonsRow a.blue, .approvalButtonsRow a.green {
	fill: #ffffff;
}
.approvalButtonsRow a.blue {
	border: 2px solid var(--primary-color);
}
.approvalButtonsRow a.blue:hover {
	background: #507dd020 !important;
}
.approvalButtonsRow a.blue svg {
	fill: var(--primary-color);
}
.approvalButtonsRow a.blue.newComment, .approvalButtonsRow a.blue.oldComment {
	background: var(--primary-color) !important;
}
.approvalButtonsRow a.blue.oldComment::before, .approvalButtonsRow a.blue.newComment::before {
	content: "";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position:  absolute;
	right: -5px;
	top: -5px;
	width: 12px;
	height: 12px;
	border-radius: 15px;
	z-index: 9;
	background-color: #ffffff;
	border: 2px solid var(--primary-color);
}
.approvalButtonsRow a.blue.newComment::before {
	background-color: red !important;
	border-color: red !important;
	width: 10px;
	height: 10px;
}
.approvalButtonsRow  a.blue.newComment svg, .approvalButtonsRow  a.blue.oldComment svg {
	fill: #ffffff;
}
.approvalButtonsRow a.green {
	border: 2px solid #27ae60;
}
.approvalButtonsRow a.green:hover {
	background: #27ae6020;
}
.approvalButtonsRow a.green.Active {
	background: #27ae60 !important;
	color: #ffffff !important;
}
#dashWrapper #navBar .approvalButtonsRow a.green:hover {
	background: #27ae60;
	color: #ffffff !important;
	text-decoration: unset !important;
}
.approvalButtonsRow a.red {
	border: 2px solid #c0392b;
}
.approvalButtonsRow a.red:hover {
	background: #c0392b20;
}
.approvalButtonsRow a.red.Active {
	background: #c0392b !important;
	color: #ffffff !important;
}
#dashWrapper #navBar .approvalButtonsRow a.red:hover {
	background: #c0392b;
	color: #ffffff !important;
	text-decoration: unset !important;
}
@keyframes pulse {
	0% {
	    box-shadow: 0 0 0 0 rgba(39, 74, 241, 0.7);
	}
	70% {
	    box-shadow: 0 0 0 5px rgba(39, 74, 241, 0);
	}
	100% {
	    box-shadow: 0 0 0 0 rgba(39, 74, 241, 0);
	}
}
@keyframes pulseYellow {
	0% {
	    box-shadow: 0 0 0 0 #e67e22cc;
	}
	70% {
	    box-shadow: 0 0 0 5px rgba(230, 126, 34, 0.0);
	}
	100% {
	    box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.0);
	}
}
.approvalButtonsRow svg {
	max-width: 15px;
	max-height: 15px;
}
.List .DataHead  {
	display: inline-flex;
	width: 100%;
	min-height: 50px;
    justify-content: flex-start;
    position: relative;
    border-radius: 3px;
	align-items: center;
	/* padding: 0px 22px; */
	font-weight: 500;
	/* border-bottom: 1px solid #f9f9f9; */
}
.List .DataHead.DataHeadInline {
	justify-content: flex-start;
}
.List .DataHead.DataHeadInline .Data {
	flex: unset;
	flex-wrap: nowrap;
}
.List .DataHead.DataHeadInline .controlButtons {
	margin-left: auto;
}
.DataObject.DataObjectOpen > .DataHead.DataHeadInline, .DataObject.DataObjectOpen > .DataExtra {
	border-bottom: unset !important;
	box-shadow: unset !important;
}
.List .DataHead:hover {
	background-color: #f9f9f950;
}
.DataObject .DataExtra {
	max-height: 0;
	transition: .2s;
	visibility: hidden;
	overflow: hidden;
	opacity: 0;
	-moz-box-shadow: inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow: inset 0 0 5px #00000020;
	/* display: flex; */
}
.DataObject.DataObjectOpen > .DataExtra {
	max-height: unset;
	border-bottom: 1px solid #5581d120;
	background-color: #ffffff;
	visibility: visible;
	opacity: 1;
	overflow: visible;
	padding: 10px;
}
.DataExtra {
	width: 100%;
	position: relative;
	font-size: 14px;
}
.Data {
	display: inline-flex;
	flex-wrap: wrap;
}
.List .Data.ID {
	font-variant-numeric: tabular-nums;
	max-width: 80px;
}
.List .Data.Date, .List .Data.EndDate {
	max-width: 110px;
	min-width: 110px;
}
/* .List .Data.Tags {   Disabled, replaced by .Data.Collections a, .Data.Categories a, .Data.Tags a {
	display: inline-flex;
	flex-direction: row;
} */
.List .ExtraInline, .List .DataExtraInline, .List .DataExtraColumn  {
	display: inline-flex;
	width: 100%;
	flex-wrap: wrap;
	grid-gap: 20px;
	padding: 0px 20px;
}
.List .DataExtraColumn {
	flex-direction: column;
}
.List .ExtraColumn {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.List .DataExtraColumnSmall, .List .DataExtraColumnBig {
	display: flex;
	flex-direction: column;
	grid-gap: 20px;
}
.List .DataExtraColumnBigRow {
	display: flex;
	grid-gap: 20px;
	flex-direction: column;
}
/* .DataExtraColumnBig .orderStats {
	min-width: 500px;
} */
.orderStats .employeesWrapper {
	margin-bottom: 5px;
}
.List .DataExtraColumnSmall {
	flex: 1;
	box-sizing: border-box;
}
.List .DataExtraColumnSmall *:not(.orderStats *) {
	width: auto;
}
.List .DataExtraColumnSmall .Data input[type=checkbox] {
	min-height: unset !important;
}
.List .DataExtraColumnBig {
	flex: 2;
	min-width: 600px;
}
.List .ProductHead {
	display: inline-flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	grid-gap: 10px;
	font-size: 18px;
	font-weight: 500;
	/* color: #09203f */
}
.List .ProductHead * {
	flex: 1;
}
.List .PriceAction {
	display: inline-flex;
}
.list .PriceAction * {
	margin-right: 10px;
}
.depositBox .fullWidthButton {
	width: calc(100% - 130px);
    margin-left: 130px;
}
.Data.VAT, .Data.PriceAction {
	max-width: 70px !important;
}
.ColumnWrapper:has(#orderNote) {
	background: #ffffff !important;
}
.ColumnWrapper:has(#orderNote) .smarTextWrapper {
	padding-top: 20px;
}
.List .ExtraButtons {
	display: inline-flex;
	flex-direction: row;
	justify-content: flex-end;
	grid-gap: 10px;
}
.List .DataObject .ExtraButtons {
	padding-right: 10px;
}
.List .ExtraButtons .multipleButtons a.stdButton {
	margin-left: unset !important;
	margin-right: 10px;
}
.list .ExtraHead {
    margin-bottom: 10px;
    border-bottom: 1px solid #f9f9f9;
    display: inline-flex;
    justify-content: space-between;
    padding: 0px 20px !important;
    box-sizing: border-box;
    padding-bottom: 10px !important;
}
.List .ExtraHead .postTypeBar {
	padding-left: unset !important;
}
.ExtraInline a.stdButton {
    display: flex;
	justify-content: center;
    padding-right: 40px;
    padding-left: 40px;
}
.List .Data.File {
	max-width: 100px;
	display: inline-flex;
	justify-content: center;
}
.List .DeliverTime {
	max-width: 100px;
}
.List .DataObject {
	position: relative;
	border-radius: 5px !important;
    /* overflow: hidden; */
    border: 1px solid #5581d120;
	background: #ffffff !important;
}
.DataExtra iframe {
	width: 98%;
}
.List .extraSave {
	line-height: 50px;
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
}
#ViewerData {
	padding: 0px 20px !important;
}
#InboxViewerHead {
	padding: 0px 30px !important;
}
.DataObject:not(.List .DataObject, .themeBlock .DataObject,  .Month .DataObject, .Tiles .DataObject ) {
	position: relative;
    border: 1px solid #5581d120;
    border-radius: 10px;
    padding: 2px !important;
}
.Tiles .Dataobject {
	position: relative;
	border: 1px solid transparent;
	background: #ffffff;
	border: 1px solid #5581d120;
}
.DataObject a {
	text-decoration: none;
}
.smallDataRowColumn div, .smallDataRowColumn a {
	max-width: 150px;
	text-overflow: hidden;
	display: inline-block;
}
.smallDataRowColumn div {
	line-height: 1;
}
.DataObject h3 {
	font-size: 18px;
	padding: 10px 0px;
}
.List h4 {
	display: block;
    padding-right: 5px;
    text-align: start;
}
.List .ExtraFull {
	display: none;
    width: 100%;
    justify-content: space-between;
	padding-top: 20px;
	padding-bottom: 10px;
}
.List .ExtraFull div {
	display: inline-flex;
    padding-right: 10px;
    flex: 1;
    flex-wrap: wrap;
}
.List .Head, .Calendar .Head, .dataRowPopUp .Head {
    display: inline-flex;
    /* justify-content: space-between; */
    /* width: 100%; */
    font-weight: 600;
    align-items: center;
    position: sticky;
    top: 0px;
	z-index: 99;
    /* padding: 0px 22px; */
}
.portal-border .Head {
	z-index: unset !important;
}
body:has(.orderEditor) .List .Head {
	justify-content: space-between; 
    width: 100%;
	padding: 0px 10px;
}
body:has(.orderEditor) .List .Head .Data, body:has(.orderEditor) .List .DataObject .Data:not(.attributeRow .Data.Title) {
	flex: 1 !important;
}
.List .Body {
    padding-bottom: 15px;
}
.List .Head .Data {
    position: relative;
    display: inline-flex;
    padding-top: 10px;
	padding-bottom: 10px;
    align-items: center;
	flex-wrap: nowrap;
	justify-content: space-between;
	border-radius: 10px;
	border: 1px solid transparent !important;
}
.list .Head .Data.HeadSubject, .list .Head .Data.HeadProperties {
	border: 0px !important;
} 
.List .Head .Data span {
	text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.HeadSubject, .DataHeadSubject, .HeadProperties {
	display: inline-flex !important;
	flex-direction: row !important;
	flex: 1;
	padding: unset !important;
	justify-content: flex-start !important;
	/* max-width: 500px; */
}
/* .dataHeadSubject:not(.dataHeadSubject:has(.Extension), .projectTimeWidgetContainer .dataHeadSubject) { */
.dataHeadSubject:not(.projectTimeWidgetContainer .dataHeadSubject) {
	flex-wrap: nowrap;
    white-space: nowrap;
    max-width: calc(100% - 50px);
    overflow: hidden;
    /* -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0)); */
	width: 100%;
}
.projectTimeWidgetContainer .dataInline * {
	margin-right: 3px;
}
.sequenceContainer .dataHeadSubject {
	max-width: unset !important;
	-webkit-mask-image: unset;
}
#ViewerData .choiceStep .Data.inputCheckbox, #ViewerData .choiceStep .Data.Image, #ViewerHead .choiceStep .Data.inputCheckbox, #ViewerHead .choiceStep .Data.Image {
    max-width: 45px !important;
    min-width: unset !important;
    flex: unset !important;
}
.Tiles .DataHeadSubject {
	flex: unset;
}
/* .DataHeadProperties .Data label {
    display: none !important;
} */
.Data label {
	display: none;
}
.Tiles .DataHeadSubject {
	max-width: 100%;
	width: 100%;
}
.popupContent .Tiles .DataHeadSubject {
	padding-bottom: 10px;
}
.DataHeadProperties .checkmark {
	margin: unset;
}
.Data.Button.Reset {
	display: none;
	position: absolute;
	cursor: pointer;
}
.propertyTable .DataHeadSubjectRow *, .configuratorTable .DataHeadSubjectRow * {
	white-space: nowrap;
}
.propertyTable .BreadCrumb, .configuratorTable .BreadCrumb {
	flex: 1;
}
.DataHeadSubjectRow:hover .Data.Button.Reset {
	display: inline-flex;
}
.propertyTable .Data.BreadCrumb, .configuratorTable .Data.BreadCrumb {
	flex: 1 !important;
	width: 100% !important;
	display: inline-flex !important;
}
.Data.Description:empty::before{
	content: attr(placeholder);
	opacity: 0.3;
	cursor: text;
}
.Data.Label {
	grid-gap: 5px;
}
.DataHeadProperties, .DataHeadSubject, .HeadSubject, .HeadProperties {
	overflow: hidden; /* deze niet uit zetten! */
}
.DataHeadProperties, .DataHeadSubject {
	padding-left: 0px !important;
	padding-right: 0px !important;
}
.Label.dataCentralized, .Description.dataCentralized {
	font-weight: 400;
    font-size: smaller !important;
    opacity: 0.5;
    text-decoration: line-through;
	cursor: default;
}
.dataHead.dataCentralized {
	background: #fafafa;
	border-top: 1px solid #ccc;
}
.dataHead.dataCentralized:hover {
	background: #fafafa;
}
.dataHead.dataCentralized * {
	text-decoration: line-through;
	color: #cccccc !important;
}
.ControlButtons:has(a.resetCentralized) {
	justify-content: flex-start;
}
a.resetCentralized {
	color: var(--link-color) !important;
    text-decoration: underline;
}
.List .Head .Data::before  {
	background-color: #ccc;
}
.List .DataHead img { 
	max-height: 25px;
	transition: .0s;
	min-height: 25px;
	min-width: 25px;
	object-fit: cover;
}
.List .DataHead .logoAvatar {
	min-width: 40px;
	min-height: 40px;
    max-height: 40px;
    object-fit: cover;
    height: 40px;
    width: 100%;
    max-width: 40px;
}
.List .DataHead .logoAvatar img {
	height: 60px;
    width: 60px;
    /* padding: 9px !important; waarom? */
	padding: 0px !important;
    min-height: 45px !important;
    min-width: 45px !important;
}
.CRMemployeeManager .List .DataHead .logoAvatar img, .CRMpersonManager .List .DataHead .logoAvatar img {
    /* min-height: 60px !important;
    min-width: 60px !important; */
	object-fit: cover !important;
}
.List .DataHead .Image img.noImage {
	max-width: 17px;
	max-height: 17px;
	object-fit: contain !important;
	padding-right: 7px;
}
.List .DataHead .Image img[src$=".png"], .List .DataHead .Image img[src$=".svg"] {
	/* padding: 10px !important; */
	filter: drop-shadow(0px 0px 10px #666)
}
.List .Seo {
	display: inline-flex;
	width: unset;
}
.List .DataHead .Button {
	padding-left: 1px;
}
.List .DataHead .switch {
	margin-right: 0px;
}
.List .ControlButtons {
	margin-top: unset;
    display: inline-flex;
    position: unset;
    background-color: unset !important;
    transform: unset;
    -webkit-box-shadow: unset !important;
    -moz-box-shadow: unset !important;
    box-shadow: unset !important;
	align-items: center;
	justify-content: flex-end;
	background: none;
	padding-right: 10px;
	min-width: 50px !important;
}
.List .ControlButtons * {
	margin: unset !important;
}
.List .Title {
	/* max-width:300px; */
	
	display: flex;
	align-items: center;
	flex: 1.5 !important;
}
.List input {
	min-width: 0px !important;
	width: 100%;
}
.List .Title input[type=checkbox] {
	display:inline-flex;
}
.checkDataHead {
	display: flex;
    align-items: center;
	justify-content: center;
	padding-right:5px;
}
.List .Language {
	margin: unset;
    width: unset;
    padding-right: unset;
	float: none;
	width: 30px;
	display: flex;
	align-items: center;
	flex: 0.2;
	max-width: 67px;
}
.List .SEO {
	max-width:85px;
	display: flex;
	align-items: center;
	flex: 1;
}
.List .Price {
	max-width: 250px;
}
.List .LastEdit {
	max-width: 300px;
	display: flex;
	align-items: center;
	display: inline-flex;
	flex-wrap: nowrap;
	min-width: 130px;
}
.List .closeExtra span {
	position: absolute;
    top: 0px;
    right: 20px;
    font-weight: 600;
	font-size: 16pt;
	cursor: pointer;
	display: none;
}
.Data.Price, .Data.TotalVAT, .Data.Total  {
	display: inline-flex;
}
.List #totalRow .DataHead:hover {
	background-color: unset !important;
}
#DataView {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	grid-gap: 10px;
}
#DataView .Data.Title {
	opacity: 1;
}
.Tiles .ControlButtons div {
	padding-right: 3px;
}
.Tiles #DataView {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.Tiles .DataObject {
    border-radius: 5px;
    display: inline-flex;
    text-align: center;
    flex-grow: 100;
    justify-content: center;
}

.Tiles .DataHead {
    flex-direction: Column;
    align-items: center;
    display: flex;
}
.Tiles .DataHead img { 
	width: 100%;
}
.Tiles .DataHead .Dir img {
	padding: 20px;
	object-fit: scale-down;
}
.Tiles .Name {
	max-width: 100%;
	width: 100%;
	display: inline-flex;
	margin-top: 10px;
}
.Data.Name a, .Data.Company a, .Data.Persons a {
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}
.Data.Companies a, .Data.Companies, .Data.Persons {
	white-space: nowrap !important;
    flex-wrap: wrap !important;
}
.Tiles .Name a {
    height: 100%;
    hyphens: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	padding: 0px 5px 10px 10px;
}
.Tiles .Name a {
	color: #666666 !important;
	font-weight: 500;
}
.Tiles .Data.File {
	width: 100% !important;
    /* border: 1px solid #5581d120; */
    border-radius: 5px;
    height: 175px;
    display: inline-flex;
	align-items: center;
	justify-content: center;
}
.Tiles .controlButtons {
	position: absolute !important;
	top: 10px;
	right: 10px;
	z-index: 2;
}
.Tiles .Data.File svg {
    width: 75px !important;
    max-width: 75px !important;
    max-height: 75px !important;
}
.Tiles .DataHead:hover > .Name a, .Tiles .DataHead:hover > .Name  {
    color: #687fea !important;
}
.Tiles .DataHead  {
	cursor: pointer !important;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}
.Tiles .DataHead .Button {
	padding-left: 1px;
	display: inline-flex;
}
.Tiles .Title {
	text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    user-select: none;
	overflow-wrap: break-word;
	width: 100%;
}
.Tiles .Data.Extension {
	display: none;
}
.Tiles .controlButtons .droplist svg {
	padding-left: 5px !important;
	max-width: 10px;
}
.Tiles .Language {
	margin: unset;
    width: unset;
    padding-right: unset;
    float: none;
}
.Tiles .Head .HeadSubject {
	display: none !important;
}
.Tiles .DataExtra {
	display:none;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    background-color: white;
    padding: 50px;
    border: 1px solid #5581d120;
}
.Tiles .closeExtra span {
	position: absolute;
    top: 20px;
    right: 20px;
    font-weight: 600;
	font-size: 16pt;
	cursor: pointer;
}
#tileView {
	display: flex;
	flex-grow: 100;
	max-width: 220px;
}
.DataHead .Title img {
	height: 30px;
	background-color: #274AF2;
	margin-left: 5px;
	border-radius: 50%;
}
.DataHead .Data.Seo {
	cursor: pointer;
}
.DataHead .Data.Seo:hover {
	opacity: 0.8;
}
.newsPostManager .Data.DataHeadSubject, .newsPostManager .Data.HeadSubject {
	width: 100% !important;
}
.List .Data {
	flex: unset !important;
	align-items: center;
	transition: .0s;
	word-break: break-word;
	padding-right: 10px;
	color: #333333;
	position: relative;
	padding-left: 5px;
	width: unset !important;
	flex-wrap: nowrap;
	white-space: pre-wrap;
	min-height: 35px;
}
.List .Data.Message {
	flex: 5 !important;
}
.List .orderStats .Data {
	min-height: unset !important;
	margin-bottom: 5px;
}
.List .Data.Projects {
	flex-wrap: wrap;
}
.ProductName svg {
	max-width: 15px;
	max-height: 15px;
}
.ProductName a:has(svg) {
	max-width: 15px;
	max-height: 15px;
	margin-right: 5px;
}
.HeadProperties .Data, .HeadSubject .Data, .DataHeadSubject .Data, .DataHeadProperties .Data {
	width: 175px !important;
	/* min-width: 175px !important; */
}
.Data.StartTime, .Data.EndTime, .Data.SubTotalTime, .Data.TotalTime {
	width: 100px !important;
}
.Data.ID, .Data.Value, .Data.OrderID, .Data.ReservationID, .Data.DateCol, .Data.Invoice, .Data.PaymentStatus, .Data.Time  {
	/* min-width: 80px !important; */
	width: 80px !important;
}
.Data.inputCheckbox{
	/* min-width: 40px !important; */
	width: 40px !important;
	min-width: 40px !important;
}
.Data.Name {
	/* min-width: 250px !important; */
	width: 250px !important;
}
.List .Data .Image {
    max-width: 75px;
}
.List .Data.Price, .List .Data.totalVAT, .List .Data.Total {
	max-width: 100px;
}
.Data.Collections a, .Data.Categories a, .Data.Tags a, .Data.Brands a {
    display: initial;
}
.Data.Tags a:hover {
	text-decoration: underline !important;
}
.Data a, .ExtraContainer a {
	display: block;
	hyphens: auto;
    text-align: left;
}
.Data a {
	hyphens: auto;
    text-align: left;
}
.Data:hover a:not(.Data.Collections:hover a) a:not(.Data.Categories:hover a) a:not(.Data.Tags:hover a) a:not(.Data.Brands:hover a) {
	color: #507dd0 !important;
}
.Data.inputCheckbox {
	flex-basis: 0;
	justify-content: center !important;
    width: 20px !important;
	max-width: 20px;
	min-width: 40px;
}
.Data.inputCheckbox input[type=checkbox] {
	width: 15px;
	min-height: unset;
	padding: 10px;
}
.Tiles .Data.inputCheckbox {
    border-radius: 0px !important;
    position: absolute;
    width: 100% !important;
    max-width: unset !important;
	height: 100%;
	left: 0px;
	top: 0px;
	border-radius: 5px;
	z-index: 1;
}
.Tiles .Data.inputCheckbox input:focus {
	border: 0px !important;
}
.Tiles .Data.inputCheckbox input:checked {
	position: relative;
}
.Tiles .DataDir .Data.inputCheckbox {
	display: none;
}
.Tiles .Data.inputCheckbox input {
	-webkit-appearance: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
	background: transparent;
	border: 0px;
	cursor: pointer;
}
.Tiles .Data.inputCheckbox input:disabled {
	pointer-events: none;
	display: none;
}
.Head .Data.inputCheckbox::before, .Head .Data.File::before {
	display: none;
}
.Head .Data.File {
	background-color: unset !important;
	pointer-events: none !important;
	cursor: default !important;
}
.Head .Data.inputCheckbox {
	background-color: unset !important;
}
.DataObject.Checked::after {
    width: calc(100% - 35px);
}
.Data.Employees {
	overflow: hidden;
}
.Data.Employees .Employees {
	display: inline-flex !important;
    grid-gap: unset !important;
    flex-wrap: nowrap!important;
    overflow: hidden!important;
    max-width: 100%!important;
}
.Data.Employees .Employees .employeesWrapper:nth-child(1) {
	z-index: 6;
}
.Data.Employees .Employees .employeesWrapper:nth-child(2) {
	z-index: 5;
}
.Data.Employees .Employees .employeesWrapper:nth-child(3) {
	z-index: 4;
}
.Data.Employees .Employees:has(.employeesWrapper:nth-child(4)) .employeesWrapper:nth-child(4) {
	margin-left: -3px;
	z-index: 3;
}
.Data.Employees .Employees:has(.employeesWrapper:nth-child(4)) .employeesWrapper:nth-child(5) {
	margin-left: -6px;
	z-index: 2;
}
.Data.Employees .Employees:has(.employeesWrapper:nth-child(4)) .employeesWrapper:nth-child(6) {
	margin-left: -8px;
	z-index: 1;
}
.Data.Employees .Employees .employeesWrapper:nth-child(n+7) {
	display: none;
}
.Data.Employees .Employees .userAvatar {
	margin-right: -10px!important;
}
.DataExtra:has(.fullWidthButton) .DataHead:not(.dataExtra:has(.FullWidthButton) .DataExtra .DataHead) {
	transition: .2s;
}
.DataObject > .DataExtra:has(> .fullWidthButton:hover) > .Viewer {
	background: #ecf3ff;
}
/* RULES */
/* 
Disabled by Jonathan, kan niet zien wat ik doe
#configuratorInformation .DataHeadProperties, #propertyInformation .DataHeadProperties, #configuratorInformation .controlButtons span, #propertyInformation .controlButtons span {
	display: none;
} */
#configuratorInformation .DataHeadSubject, .rules .DataHeadSubject {
	max-width: unset;
}
.Rules .DataHeadSubject {
	grid-gap: 40px;
	flex-wrap: nowrap;
}
.Rules .DataSub {
	display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
}
.DataObject .Rule .itttRule {
	display: inline-flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}
.DataObject .Rule .itttRule * {
	font-size: 18px;
    color: #000000 !important;
    text-decoration: none !important;
}
.configuratorBox .DataObject .LastEdit .Column {
	display: flex;
    flex-direction: row !important;
    grid-gap: 10px;
    align-items: center;
}
.DataObject .Rule .itttDropDown {
	font-weight: 600;
}
.Rules .Data.Image {
	align-items: center;
}
.DataObject .itttRuleSection {
	width: unset !important;
}
.Rules .Data.Image svg {
	width: 70px;
	height: 70px;
	padding: 20px
}
.DataObject .itttHorizontalBreak svg {
	rotate: -90deg;
}
.Rules .DataHead {
    width: 100%;
    justify-content: space-between;
    display: inline-flex;
    align-items: center;
} 
.Rules .DataOrder {
	height: 70px;
	width: 70px;
}
#editorLeft .Rules .DataObject {
	padding: unset !important;
}
.Rules .itttRule {
	padding: unset !important;
}
.Rules .controlButtons {
	width: unset !important;
}
/* BAS */
 .inputCheckbox:not(.choiceStep .inputCheckbox) {
	visibility: hidden;
	transition: 0s !important;
	border: 0px !important;
}
.inputCheckbox:has(input:checked) {
	visibility: visible;
}
.Head:hover .inputCheckbox {
	visibility: visible;
}
 .DataHead {
	transition: .2s;
}
 .DataHead:hover  .inputCheckbox,  .DataHead.Checked .inputCheckbox, .DataHead:has(.inputCheckbox input:checked) .inputCheckbox {
	visibility: visible;
}
.DataObject:has(.inputCheckbox input:checked):not(.configuratorTable .DataObject) {
	border: 1px solid #507dd0;
	box-shadow: #274cf117 0px 8px 24px;
}
 .ControlButtons {
	grid-gap: 5px;
}
 .ControlButtons * {
	color: #000000;
}
 .ControlButtons .contentItemButton:hover * {
	color: #333;
	fill: #333
}
 .Data.Image svg {
	max-width: 15px;
	transition: .1s;
}
 .DataHead:hover .Data.Image.folderIcon svg,  .DataObjectChecked .Data.Image.folderIcon svg {
	fill: #2d1aae;
	filter: drop-shadow(0px 2px 2px rgb(45 26 174 / 0.4));
}
 .DataHead:hover .Data.Image.tagIcon svg,  .DataObjectChecked .Data.Image.tagIcon svg {
	fill: #850f0f;
	filter: drop-shadow(0px 2px 2px rgb(4133 15 15 / 0.4));
}
 .DataHeadContent {
	display: flex;
	flex-direction: column;
}
 .List .DataHead.DataHeadInline .Data {
	line-height: 1;
}
 .List .DataHeadInline .userAvatar {
	width: 18px !important;
	height: 18px !important;
	margin-left: 10px;
}
 .List .DataHeadInline .userAvatar img {
	min-width: 18px !important;
	min-height: 18px !important;
}
 .DataHeadContent .Data {
	padding-left: unset;
	padding-right: unset;
}
 .DataHeadContent .DataHeadProperties a {
	margin-left: 3px;
	font-weight: 500;
	color: #666666 !important;
}
 .DataHeadContent .DataHeadProperties a:hover {
	text-decoration: underline !important;
}
 .DataHeadContent .DataHeadProperties {
	height: 15px;
}
 .DataHeadContent .DataHeadProperties * {
	color: #9e9e9e;
}
 .DataHeadContent .DataHeadProperties .Data::after {
	content: "•";
    font-size: 20px;
    margin-left: 5px;
    margin-right: 5px;
    height: 0px;
    line-height: 0px;
}
 .DataHeadContent .DataHeadProperties .Data:last-child::after {
	display: none;
}
 .List .DataHead {
	padding-left: unset;
}
 .DataHeadLeft {
	display: inline-flex;
	align-items: center;
	width: 100%;
}
 .DataHeadRight {
	display: inline-flex;
	align-items: center;
	grid-gap: 10px;
}
 .List .DataHead.DataHeadInline {
	justify-content: space-between;
}
 .DataPlanned, .DataPlannedDateWrapper {
	display: inline-flex;
	grid-gap: 10px;
	white-space: nowrap;
	align-items: center;
}
 .DataPlannedDay {
	font-size: 15px;
    line-height: 0.8;
    padding-top: 2px;
}
 .DataPlanned,  .DataNote  {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* height: 42px;  waarom?*/
    font-size: smaller;
	font-weight: 600;
	color: #ffffff;
	border-radius: 5px;
	padding: 10px;
}
 .dataPlanned,  .actionSchedule {
	background: #db4c3f !important;
	fill: #ffffff !important;
	color: #ffffff !important;
}
 .DataNoteCount {
	white-space: nowrap;
	color: #000000;
	margin: 15px 5px 5px 5px;
}
 .DataNoteCount strong {
	display: inline-flex;
    flex-wrap: nowrap;
    grid-gap: 2px;
	align-items: flex-end;
	font-size: 8px;
}
 .DataNoteCount big {
	font-size: 15px;
    line-height: 1;
}
 .DataNote {
	background: transparent ;
	overflow: hidden;
	position: relative;
	border: 1px solid #f3f2f1;
	align-items: flex-start !important;
}
 .DataNoteTitle {
	background: #ffa751;
	color: #ffffff !important;
	fill: #ffffff;
    width: 100%;
    position: absolute;
    top: 0px;
    padding-left: 5px;
}
 .actionNote {
    background: #ffa75120 !important;
    color: #ff7e00 !important;
    fill: #ff7e00 !important;
}
 .DataActions {
	margin-right: 15px;
	grid-gap: 10px;
}
 .DataTaskTitle, .actionTask {
	background: #3bb78f !important;
	color: #ffffff !important;
	fill: #ffffff;
}
 .ControlButtons {
	position: relative !important;
}
 .ControlButtons a{
	border-radius: 25px;
	padding: 5px;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
}
.ControlButtons a:has(span) {
	width: unset !important
}
 .ControlButtons .dropDownButtonsContainer {
	left: unset !important;
}
.DataAction svg {
	max-height: 13px;
	max-width: 13px;
}
.DataAction {
    display: inline-flex;
    align-items: center;
    height: 25px;
    padding: 4px 8px 4px 8px;
    border-radius: 25px;
    background-color: #5581d120;
    grid-gap: 5px;
	white-space: nowrap;
	font-size: smaller;
	width: fit-content;
	color: #ffffff;
	font-weight: 500 !important;
	fill: #ffffff;
	position: relative;
}
.DataAction a {
    color: #ffffff !important;
	fill: #ffffff;
}
.DataAction.Green {
	background: #27ae60 !important;
	color: #ffffff !important;
}
.DataAction.Yellow {
	background: #e6cf22 !important;
	color: #ffffff !important;
}
.DataAction.Red {
	background: #c0392b !important;
	color: #ffffff !important;
}
.DataAction.Blue {
	background: var(--primary-color) !important;
	color: #ffffff !important;
}
.DataAction.Orange {
	background: #d29c00 !important;
	color: #ffffff !important;
}
 .DataPlannedDateBox,  .DataNote  {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0px;
}
 .DataPlannedIcon svg {
	height: 20px;
	width: 20px;
	fill: #ffffff;
}
.contentItemButton {
	justify-content: flex-start;
	grid-gap: 10px;
	display: inline-flex;
	height: 35px;
	padding: 10px 15px;
	border: 1px solid transparent;
	transition: 0s !important;
	width: 100%;
	align-items: center;
}
.contentItemButton label.switch {
	margin-left: auto;
}
.contentItemButton:hover {
	background: #f7f7f7;
    /* border-radius: 5px; */
    border: 1px solid #5581d120;
}
.contentItemButton span {
	font-size: 12px;
}
 .contentItemButton svg {
	width: 14px !important;
	height: 14px !important;
}
 .contentItemButton .iconRight {
	margin-left: auto;
}
 .contentItemButton .iconRight svg {
	width: 10px !important;
	height: 10px !important;
}
 .DataObjectChecked {
	position: relative;
}
 .DataObjectChecked .DataHead,  .DataSubChecked {
    box-shadow: #274cf117 0px 8px 24px;
    border-radius: 25px;
}
.Dots {
	margin-right: 10px !important;
	border: 1px solid #5581d120;
	height: 30px;
	width: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 25px;
}
.Dots:hover {
	background: #5581d120;
}
.Dots svg {
	height: 12px;
	width: 12px;
}
.List .DataObject.inActive .DataHead {
	opacity: 0.2;
}
.List .DataObject.inActive:hover .DataHead {
	opacity: 0.7;
}
.List .DataObject.inActive .DataHead:has(.editButtonsContainerOpen) {
	opacity: 1;
}
.actionButtons .iconButton {
	opacity: 0.3;
	pointer-events: none;
}
#dashWrapper:has(.DataHead .inputCheckbox input:checked) .actionButtons .iconButton {
	opacity: 1;
	pointer-events: unset;
}
#buttonSpace .iconButton.Active {
	/* background: unset !important; WAAROM? */
}
.mobileControlButtons {
	display: none;
}
.LastEdit label {
	display: none !important;
}
.choiceWrapper .Data {
	flex: 1 !important;
	width: unset !important;
	min-width: unset !important;
	max-width: unset !important;
}
.Data.Status, .Data.PaymentStatus {
	cursor: pointer;
	min-width: 175px !important;
}
@media screen and (max-width : 1120px) { /* Ipad */
	.orderManager .List.orderEditor .Data {
		flex-direction: column;
		width: 100% !important;
		align-items: flex-start;
		margin-bottom: 10px;
		grid-gap: 3px;
	}
	#ViewerData.orderEditor .DataObjectOpen {
		padding-top: 25px !important;
	}
	.orderManager .orderEditor .Data label {
		white-space: nowrap;
	}
	.List .Data {
		min-height: unset !important;
	}
	.DataHeadProperties .Data.Persons {
		flex-direction: row !important;
	}
	.Data.Employees .Employees .userAvatar {
		margin-right: unset !important;
	}
	.reservationManager .backgroundBox .boxContent {
		min-height: unset;
	}
	.Data.Employees {
		width: unset !important;
		margin: unset !important;
	}
	.HeadProperties .Data, .HeadSubject .Data, .DataHeadSubject .Data, .DataHeadProperties .Data {
		width: unset !important;
	}
	.List .DataHeadSubject, .List .DataHeadProperties {
		width: 100% !important;
	}
	/* .List .DataHead:has(.Data.Extension) {
		display: inline-flex;
		align-items: center !important;
		grid-gap: 10px;
		flex-direction: row !important;
	} */
	/* .List .DataHead:has(.Data.Extension) .DataHeadSubject, .List .DataHead:has(.Data.Extension) .DataHeadProperties {
		width: unset !important;
		opacity: 1;
	} */
	.DataHeadProperties {
		max-width: calc(100% - 50px);
		width: 100%;
		overflow: hidden;
    	flex-wrap: nowrap !important;
		white-space: nowrap; 
	}
	.SEO span:not(.Head .SEO span, .Head .Seo span) span::before {
		content: "SEO ";
		font-weight: 600;
	}
	.DataHead .ControlButtons {
		position: absolute !important;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}
	.List .Data {
		flex: unset !important;
	}
	.Data.ID {
		max-width: unset !important;
		width: unset !important;
		flex: unset !important;
	}
	.List .DataExtraColumnBig {
		min-width: 100%;
	}
    #ViewerHead, .List .Data.inputCheckbox:not(.CRMactionManager .inputCheckbox) {
		display: none !important;
	}
    .list .ExtraHead {
		flex-wrap: wrap;
	}
	.List .ExtraInline, .List .DataExtraInline {
		padding: 0px 5px;
	}
	.DataHeadSubject {
		grid-area: DataSubject;
		padding-top: 5px;
	}
	.DataHeadSubject .Data, .DataHeadSubject.Data {
		align-items: unset;
	}
	.DataObject .ControlButtons {
		grid-area: DataControllButtons;
		max-width: unset !important;
		z-index: 1;
	}
	.List .DataObject {
		margin-bottom: 5px;
		border: 1px solid #5581d120;
	}
	.Viewer {
		border: 0px !important;
	}
	.DataHeadProperties .Data {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;		
	}
	.DataHeadProperties .Data.Tags {
		display: inline;
	}
	.List .Data {
		color: #000000;
		/* padding-top: 5px; */
		/* padding-bottom: 5px */
	}
	.DataHeadProperties .Data label {
		color: #333333;
		display: block;
		font-weight: 700;
	}
	.DataObject br {
		content: ' ';
		width: 5px;
	}

	.HeadSubject, .List .DataHeadSubject .Extension {
		display: none;
	}
	.DataHeadSubject .Data.Name {
		align-items: center !important;
	}
	.DataHeadSubject, .DataHeadProperties {
		padding-left: 3px !important;
	}
    .List .Head .Data {
		font-size: 10px;
	}
	.List .Data a, .List .Data span {
		/* align-items: center; */
		display: inline-flex;
	}
	.List .DataHead:has(.userAvatar) a {
		align-items: center;
	}
	.List .ExtraContainer {
		width: unset !important;
	}
	.ExtraInline a.stdButton {
		max-width: 200px;
		margin-top: 10px;
	}
	.ExtraInline a.stdButton:last-child {
		margin-bottom: 0px;
	}
	.dataExtra .ExtraInline {
	    flex-direction: column;
	}
	.dataExtra .ExtraInline {
		flex-direction: column;
	}
    .List .DataHead {
		height: unset;
		position: relative;
		display: flex;
		flex-direction: column !important;
		align-items: flex-start !important;
		padding: 15px 10px;
	}
	.List .draggable .DataHead {
		flex-direction: row !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		padding: unset !important;
	}
	.DataHeadProperties {
		grid-gap: unset !important;
	}
	.DataHeadProperties {
		opacity: 0.5;
	}
	.DataHeadProperties .Data {
		white-space: nowrap;
		flex-wrap: nowrap !important;
	}
	.DataHeadSubject {
		width: 100%;
	}
	.Data.Name {
		flex: unset !important;
		font-size: 1rem !important;
	}
    .DataExtra .Payment, .DataExtra .Shipment, .DataExtra .PaymentStatus, .DataExtra .OrderStatus {
		display: flex;
		flex-direction: column;
	} 
	.List .ControlButtons .Button {
		display:none;
	}
	.List .extraInline .ControlButtons .Button {
		display: block;
		margin: 20px 0px;
	}
	.List .ControlButtons {
		background-color: unset;
		-webkit-box-shadow: unset;
		-moz-box-shadow:  unset;
		box-shadow:  unset;
	}
}
@media screen and (max-width: 650px) {
	.Data.Companies a, .Data.Companies, .Data.Persons {
		display: inline !important;
	}
	.Data.Date, .Data.Time {
		min-width: unset !important;
		max-width: unset !important;
		width: unset !important;
	}
	.List .Data a, .List .Data span {
		white-space: nowrap;
	}
	.DataHeadProperties, .DataHeadSubject {
		-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
	}
	.DataHeadSubject {
		max-width: calc(100% - 50px) !important;
	}
	/* .dataHeadSubject:not(.dataHeadSubject:has(.Extension)) {
		-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
	} */
	/* #ViewerData.List {
		padding: 0px !important;
	} */
	.paginationWrapper div a {
		width: 35px !important;
		height: 35px !important;
	}
	#generateBottomPagination .paginationWrapper {
		max-width: 100vw;
		flex-wrap: wrap;
	}
	.contentItemButton {
		height: 45px !important;
		grid-gap: 25px;
	}
	.contentItemButton svg {
		height: 20px !important;
		width: 20px !important;
		opacity: 0.7;
	}
	.contentItemButton span {
		font-size: 16px;
		font-weight: 500;
	}
	.filterButtonsRight {
		margin-left: auto;
	}
	.Data.Slug {
		display: none;
	}
	.DataHead .Data {
		flex: unset !important;
	}
	.editButtonsContainer {
		display: none !important;
	}
	/* #generateToggleDropdown {
		display: none;
	} */
	.mobileControlButtons {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 50%;
		transform: translate(-50%, 100%);
		bottom: 0px;
		z-index: 2;
		padding: 10px;
		border: 1px solid #5581d120;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		z-index: 99999999999999999999;
		width: 100% !important;
		background: #ffffff !important;
		transition: .2s;
		box-sizing: border-box;
	}
	.mobileControlButtons:has(*) {
		transform: translate(-50%, 0%);
	}
	#dashWrapper:has(.mobileControlButtons)::before, body:has(main):has(.mobileControlButtons)::before {
		content: "";
		position: fixed;
		left: 0px;
		top: 0px;
		height: 100%;
		width: 100%;
		background: #00000000;
		transition: .2s;
		backdrop-filter: blur(2px);
		z-index: 99999999;
		opacity: 0;
		pointer-events: none;
	}
	#dashWrapper:has(.mobileControlButtons *)::before,	body:has(main):has(.mobileControlButtons *)::before {
		background: #000000e3;
		opacity: 1;
		pointer-events: unset;
	}
	a.tableButton:hover svg {
		fill: var(--primary-color) !important;
	}
	#detailContainer .mobileControlButtons svg {
		max-height: unset !important;
	}
    .MobileControlButtonsButton {
		display: flex !important;
		margin-right: 5px;
		z-index: 2;
		width: 30px;
		height: 30px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 30px;
		border: 1px solid #5581d120;
		margin-left: 5px;
	}
	.MobileControlButtonsButton:hover {
		background-color: #fafafa;
	}
	.Tiles .MobileControlButtonsButton {
		display: none !important;
	}
	.MobileControlButtonsButton {
		display: none;
		width: 40px !important;
		height: 40px !important;
	}
	.filterBar {
		padding: 0px;
	}
    .Data.File img {
		height: 100px;
	}
    .Tiles .Name {
		font-size: 10px;
	}
	.Viewer.Tiles, .tileView {
		grid-template-columns: repeat(auto-fill,minmax(95px,1fr));
		grid-gap: 5px;
		padding: 0px;
		display: grid;
	}
	.Tiles .Name a {
		width: 100%;
	}
    .List .Head .Data {
		font-size: 10px;
	}
	.List .Head, .Calendar .Head {
		padding: 0px 10px;
	}
    .Tiles .DataObject {
		width: 100%;
		margin: unset;
	}
	.postTypeBar, .filterBar, #generateData, #ViewerHead, #ViewerData {
		padding: 0px 10px !important;
	}
}
@media screen and (max-width : 400px) { 
    .Tiles .DataHead {
		width: 100%;
	}
}