﻿.hybrid-main .hybrid-left-side {
	width: 80%;
	transition: .3s;
}
.hybrid-main .hybrid-view {
	padding-left: 0px;
	width: 20%;
	transition: .3s;
}
.hybrid-view > .dxbl-group.expanded > .dxbl-expandable-container.dxbl-group-body:not(.dxbl-modal-body .dxbl-expandable-container.dxbl-group-body) {
	height: calc(100vh - 225px);
	overflow-y: auto;
}
.hybrid-view > .dxbl-group.expanded {
	border-radius: 10px !important;
	box-shadow: 0px 0px 1px 0px rgba(var(--midgrey), 0.15);
	border: 1px solid rgba(var(--midgrey), 0.25);
  overflow: hidden;
  margin: 2px;
  background: var(--bs-body-bg) !important;
}
.hybrid-view.dxbl-fl-group .dxbl-row > .dxbl-fl-item.dxbl-fl-item-horizontal:not(:has(.dxbl-text-edit.dxbl-memo-edit)) {
	display: flex !important;
	border-bottom: 1px solid rgba(var(--midgrey), 0.35);
	padding: 0px !important;
	margin-right: 12px;
	margin-left: 12px;
	margin-top: 4px;
	width: calc(100% - 24px) !important;
}
.hybrid-view.dxbl-fl-group .dxbl-row > .dxbl-fl-item.dxbl-fl-item-horizontal:has(.dxbl-toolbar) {
	border-bottom: 0px solid rgba(var(--midgrey), 0.35) !important;
}
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal:not(:has(.dxbl-text-edit.dxbl-memo-edit)) > .dxbl-fl-cpt {
	width: 40% !important;
	display: block;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	margin-top: 4px;
}
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal:not(:has(.dxbl-text-edit.dxbl-memo-edit)) > .dxbl-fl-cpt:hover {
	overflow: visible !important;
}
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal:not(:has(.dxbl-text-edit.dxbl-memo-edit)) > .dxbl-fl-cpt:hover::before {
	content:"";
	display:block;
	width: 260%;
	height: 20px;
	background-color: var(--bs-body-bg) !important;
	position:absolute;
	z-index: -1;
}
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal:not(:has(.dxbl-text-edit.dxbl-memo-edit)) > .dxbl-fl-ctrl {
	display: flex !important;
	border-bottom: transparent;
	width: 60% !important;
	justify-content: flex-end;
}
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal:not(:has(.dxbl-text-edit.dxbl-memo-edit)) > .dxbl-fl-ctrl:has(.img-thumbnail) {
	width: 100% !important;
}
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-ctrl .dxbl-text-edit:not(.dxbl-text-edit.dxbl-memo-edit):not(:focus) {
	border-bottom-color: transparent !important;
}
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-ctrl .dxbl-text-edit:not(.dxbl-text-edit.dxbl-memo-edit):hover  {
	border-bottom-color: rgba(var(--primary), 1) !important;
}
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-ctrl .dxbl-text-edit:not(.dxbl-text-edit.dxbl-memo-edit) input,
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-ctrl .dxbl-text-edit.dxbl-disabled .dxbl-text-edit-template {
	text-align: right;
}
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-ctrl .dxbl-text-edit > .dxbl-text-edit-template:not(:first-child) {
	justify-content: end;
}
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-ctrl .dxbl-text-edit.dxbl-disabled .dxbl-text-edit-template {
	justify-content: end;
	margin-right: 16px;
}
.hybrid-view .dxbl-fl-ctrl .dxbl-text-edit-template:has(.xaf-combobox-item) {
	justify-content: flex-end;
}
.hybrid-view .dxbl-fl-ctrl .dxbl-btn-group.dxbl-btn-group-right button, 
.hybrid-view .dxbl-fl-ctrl .dxbl-btn-group.dxbl-btn-group-right a, 
.hybrid-view .dxbl-fl-ctrl .dxbl-edit-btn-clear,
.hybrid-view .dxbl-fl-ctrl:has(.dxbl-text-edit.dxbl-disabled):hover .dxbl-btn-group.dxbl-btn-group-right button,
.hybrid-view .dxbl-fl-ctrl:has(.dxbl-text-edit.dxbl-disabled):hover .dxbl-btn-group.dxbl-btn-group-right a {
	display: none;
}
.hybrid-view .dxbl-fl-ctrl:hover .dxbl-btn-group.dxbl-btn-group-right button, 
.hybrid-view .dxbl-fl-ctrl:hover .dxbl-btn-group.dxbl-btn-group-right a, 
.hybrid-view .dxbl-fl-ctrl:hover .dxbl-edit-btn-clear {
	display: flex;
}
.hybrid-view .dxbl-fl-ctrl:hover button.dxbl-edit-btn-clear {
	display: none !important;
}
/* .hybrid-view .dxbl-fl-ctrl:hover .dxbl-btn-group.dxbl-btn-group-right:not(:has(.dxbl-edit-btn-dropdown)) {
	display: flex;
	position: absolute;
	margin-top: 20px;
	right: 0px;
	border:1px solid rgba(var(--midgrey), 0.35);
	background: var(--bs-body-bg) !important;
	z-index: 2;
} */
.hybrid-view > .dxbl-group.expanded > .dxbl-expandable-container.dxbl-group-body .dxbl-fl-group {
	margin-bottom: 0px;
}

/* .hybrid-main:has(.hybrid-view .dxbl-group.expanded) .hybrid-left-side { 
	
}*/

.hybrid-view > .dxbl-group.expanded > .dxbl-group-header .dxbl-btn,
.hybrid-main .hybrid-view:has(.dxbl-group[expanded-state="False"]:not(.hybrid-view .dxbl-group .dxbl-group[expanded-state="False"])) .dxbl-group-header .dxbl-btn {
	border: 1px solid rgba(var(--midgrey), 0.35) !important;
}
.hybrid-view .dxbl-group-header .dxbl-btn.dxbl-group-expand-btn:hover svg {
	filter: var(--icon-filter-white);
}
.hybrid-view > .dxbl-group.expanded > .dxbl-group-header .dxbl-btn .dxbl-image {
	transform: rotate(-90deg);
	transition: .3s;
}
.hybrid-main .hybrid-view:has(.dxbl-group[expanded-state="False"]:not(.hybrid-view .dxbl-group .dxbl-group[expanded-state="False"])) .dxbl-group-header .dxbl-btn .dxbl-image {
	transform: rotate(180deg);
	transition: .3s;
}
.hybrid-main .hybrid-view:has(.dxbl-group[expanded-state="False"]:not(.hybrid-view .dxbl-group .dxbl-group[expanded-state="False"])) .dxbl-group-header {
	height: calc(100vh - 158px);
	transition: .3s;
	flex-direction: row !important;
	writing-mode: vertical-lr;
	padding: 4px 2px !important;
	width: 40px !important;
}
.hybrid-main .hybrid-view > .dxbl-group.expanded >  .dxbl-group-header {
	border-bottom-width: 2px;
}
.hybrid-main .hybrid-view .dxbl-group-header .dxbl-text {
	font-weight: 700;
	opacity: .85;
}
.hybrid-main .hybrid-view:has(.dxbl-group[expanded-state="False"]:not(.hybrid-view .dxbl-group .dxbl-group[expanded-state="False"])) .dxbl-group-header .dxbl-text {
	margin: 0px;
}
.hybrid-main .hybrid-view:has(.dxbl-group[expanded-state="False"]:not(.hybrid-view .dxbl-group .dxbl-group[expanded-state="False"])) {
	width: 58px !important;
	transition: .3s;
}
.hybrid-main:has(.hybrid-view .dxbl-group[expanded-state="False"]:not(.hybrid-view .dxbl-group .dxbl-group[expanded-state="False"])) .hybrid-left-side {
	width: calc(100% - 58px) !important;
	transition: .3s;
}
.hybrid-main .hybrid-view .dxbl-group[expanded-state="False"]:not(.hybrid-view .dxbl-group .dxbl-group[expanded-state="False"]) {
	border-radius: 10px;
  box-shadow: 0px 0px 1px 0px rgba(var(--midgrey), 0.15);
  overflow: hidden;
  margin: 2px;
}

/* --------------- ATTACHMENT ------------- LV */
.attachment-lv .dxbl-grid {
	height: fit-content !important;
}
.attachment-lv table {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}
.attachment-lv table thead,
.attachment-lv table colgroup,
.attachment-lv table tr td.dxbl-grid-empty-cell {
	display: none;
}

.attachment-lv tbody {
	padding: 10px 10px 0px 10px;
	width: 100%;
	box-shadow: inset 0px 0px 0px 1000px rgba(var(--sidebar-background), 0.075);
}

.attachment-lv tbody tr {
	display: inline-block;
	vertical-align: middle;
	border: 1px solid rgba(var(--midgrey), 0.5) !important;
	border-radius: 5px;
	width: 300px;
	margin: 0 6px 10px 0;
	min-height: 110px;
	background-color: var(--bs-body-bg) ;
}
.attachment-lv tbody tr:hover {
	border-color: var(--site-primary) !important;
	box-shadow: 0 0 0 3px rgba(var(--primary), 0.25);
}
.attachment-lv tbody tr.dxbl-grid-edit-new-item-row td {
	min-height: 46px;
}
.attachment-lv tbody tr[dxbl-top-virtual-spacer-element=""],
.attachment-lv tbody tr[dxbl-bottom-virtual-spacer-element=""],
.attachment-lv tbody tr.dxbl-grid-empty-row {
	display:none;
}
.attachment-lv tbody tr td {
	display: flex;
	border: 0px !important;
	background-color: transparent ;
}
.attachment-lv tbody tr td:not(td:has(a.file-data-link)) {
	opacity: .75;
	font-size: 12px;
}
.attachment-lv tbody tr td::before {
	background-color: transparent !important;
}
.attachment-lv table tr td.dxbl-grid-selection-cell:has(.dxbl-checkbox) {
	width: 30px;
	float: right;
	margin-right: 5px;
}
.attachment-lv table tr td span:not(span.dxbl-grid-edit-new-item-row-icon-container),
.attachment-lv table tr td a.file-data-link {
	
}
.attachment-lv table tr td a.file-data-link {
	text-decoration: none;
	font-weight: 500;
	opacity: 1;
	white-space: wrap;
	padding-left: 42px;
}
.attachment-lv table tr td:has(a.file-data-link) {
	min-height: 55px;
}
.attachment-lv table tr td a.file-data-link::before {
	content:"";
	display: block;
	position: absolute;
	margin-left: -38px;
	width: 32px !important;
	height: 32px;
	background: url(../../IImageService/ycon-Document) no-repeat;
	background-size: cover;
	opacity: 1;
	margin-right: 10px;
	filter: var(--icon-filter-primary);
}
.attachment-lv table tr td a.file-data-link:hover::before {
	content:"";
	background: url(../../IImageService/ycon-Download) no-repeat !important;
}

.attachment-lv table tr td.xaf-action:has(xaf-navigation-click-helper a) {
	margin-bottom: -16px !important;
}
.attachment-lv table tr td xaf-navigation-click-helper a {
	text-decoration: none;
}
.dxbl-theme-dark .attachment-lv table tr td:has(span:not(span.dxbl-grid-edit-new-item-row-icon-container))::before,
.dxbl-theme-dark .attachment-lv table tr td:has(a.file-data-link)::before {
	/* filter: var(--icon-filter-white); */
}

@media screen and (max-width:1400px) {
	
.hybrid-main .hybrid-left-side {
	width: 70%;
}
.hybrid-main .hybrid-view {
	width: 30%;
}
}
@media screen and (max-width:1000px) {
	
.hybrid-main .hybrid-left-side {
	width: 100%;
}
.hybrid-main .hybrid-view {
	padding-left: 14px;
	width: 100%;
}
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal:not(:has(.dxbl-text-edit.dxbl-memo-edit)) > .dxbl-fl-cpt {
	margin-top: 10px;
	margin-bottom: -20px;
}
/* .hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal:not(:has(.dxbl-text-edit.dxbl-memo-edit)) > .dxbl-fl-cpt, */
.hybrid-view .dxbl-fl-item.dxbl-fl-item-horizontal:not(:has(.dxbl-text-edit.dxbl-memo-edit)) > .dxbl-fl-ctrl {
	width: 100% !important;
}
}