/*----------------------------------------------------------------------
** VMS - Version 1.0 - (c) Vendomatic - Thomas Engel / Date: 08.07.2024
-----------------------------------------------------------------------*/

.container-table {
    margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    background: #fff;
    overflow: hidden;
}

.container-sm .tblh_left,
.container-sm .tblf_left {
	padding-left: 20px;
}

.tblh_filter {
	overflow: hidden;
	border-top: 1px solid #e0e0e0;	
	padding: 7px 0px 7px 15px;
	font-size: 13px;
}

.tblh_filter li {
	float: left;
	list-style-type: none;
	margin: 0;
}

.tblh_filter li.filter {
	padding-left: 25px;
	font-weight: 500;
	background: transparent;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23707070' d='M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z'/%3E%3C/svg%3E") no-repeat left;	
	
}

.tblh_filter li.firstElement {
	padding-left: 15px;
	background: transparent;
}


.tblh_filter a {
	padding: 1px 20px 1px 10px;
	border-radius: 10px;	
	color: #FFFFFF;
	background: #3367D6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill-opacity='.75' fill='%23FFFFFF' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'%3E%3C/path%3E%3C/svg%3E") no-repeat calc(100% - 2px);
}

.tblh_filter a:hover {
	text-decoration: underline;
}


.tblh_left {
	float: left;
	padding: 10px;
	overflow: hidden;
	fill: rgba(0,0,0,0.54);
}

.tblh_left div {
	float: left;
}

.tblh_left .gap {
	width: 20px;
	height: 20px;
}

.tblh_right {
	float: right;
	padding: 8px 6px 2px 10px;
	overflow: hidden;
	fill: rgba(0,0,0,0.54);
}

.tblh_right div {
	float: left;
	margin-right: 2px;
}


.tblh_right .btn-18 {
	margin: 3px;
	padding: 7px;
}





.tblf_left {
	float: left;
	padding: 8px;
	overflow: hidden;
	fill: rgba(0,0,0,0.54);
	font-size: 12px;
}


.tblf_left .element-txt {
	float: left;
    display: flex;
    height: 100%;
    padding: 6px 5px;  
}

.tblf_left .element-select {
	float: left;
    display: flex;
    height: 100%;
    padding: 5px;  
}

.tblf_left .element-select  select {
	float: left;
	font-size: 12px;
	padding: 2px;
	border: 0px;
	height: 20px;
	margin-top: 0px;    
	width: 100%;
}

.tblf_left .element-icon {
	float: left;
	margin-right: 10px;
}

.tblf_left .svg-btn {
	float: left;
}

.tblf_left .disabled {
	cursor: default;
	fill: #CCCCCC;
}




.tblf_right {
	float: right;
	padding: 9px;
	overflow: hidden;
	fill: rgba(0,0,0,0.54);
	font-size: 12px;
}



.SortColumn {
	float: left;
}

.SortColumnCenter {
	text-align: center;
}

.SortColumnRight {
	float: right;
}

.SortArrow {
	float: left;
    margin-left: 4px;    
}


div.Tbl_Scroll::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

div.Tbl_Scroll::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: #F5F5F5;
}

div.Tbl_Scroll::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #CCCCCC;
}

div.Tbl_Scroll {
	overflow: auto;
}

table.datagrid {
	overflow: hidden;
}

table.datagrid thead .cl,
table.datagrid tbody .cl {
	text-align: left;
}
table.datagrid thead .cc,
table.datagrid tbody .cc {
	text-align: center;
}
table.datagrid thead .cr,
table.datagrid tbody .cr {
	text-align: right;
}

table.datagrid .lnk {
 	cursor: pointer;
    cursor: hand;	
}

table.datagrid .c-sort {
	cursor: pointer;
}
table.datagrid .c-noSort {
	cursor: default;
	color: #707070;		
}

table.datagrid .c-disabled,
table.datagrid .c-disabled a {
	color: #CCCCCC;		
}

table.datagrid .c-alert,
table.datagrid .c-alert a {
	color: #FF0000;		
}

table.datagrid .drag {
	padding: 0;
	width: 30px;
	text-align: center;	
}

table.datagrid .svg {
	padding: 0;
	width: 30px;
	text-align: center;	
}

table.datagrid svg {
	margin: auto;
	display: flex;
}

table.datagrid thead th {
	font-size: 12px;
	padding: 4px 16px;
	background-color: rgba(0,0,0,.04);
	border-bottom: 1px solid #e0e0e0;
	
    white-space: nowrap;
    	
    font-weight: 500;
    letter-spacing: 0.3;
    line-height: 20px;	
}

table.datagrid .subtitle {
	text-transform: uppercase;
	font-size: 10px;
	padding: 0px 10px;
	background-color: rgba(0,0,0,.04);
	border-bottom: 1px solid #e0e0e0;
    white-space: nowrap;
    	
    font-weight: 500;
    letter-spacing: normal;
    line-height: 20px;	
}


table.datagrid .SortSvg {
  	visibility: hidden;
}
table.datagrid th:hover .SortSvg {
  	visibility: visible;
  	fill: rgba(0,0,0,0.54);
}


table.datagrid .noSort {
    color: #707070;
    font-weight: 500;
    letter-spacing: 0.3;
    line-height: 20px;
}

table.datagrid tbody td {
	font-size: 12px;
	padding: 4px 16px;
	border-bottom: 1px solid #e0e0e0;

	word-wrap: break-word;
	line-height: 20px;
}


table.datagrid tbody .hover {
	background:#F5F5F5;
}


table.datagrid tbody .click {
	background:#E8F0FE;
}

table.datagrid tbody .active {
	background:#F1F5FF;
}

table.datagrid tbody .lock {
	background:#feefe3;
}

table.datagrid tbody .own {
	background:#e8eaf6;
}

table.datagrid input[type=checkbox] + label {
	margin-top: 1px;
	vertical-align: top;
	padding: 0px;
	height:17px;
	width: 17px;
	display:inline-block;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='0 0 24 24'%3E%3Cpath d='M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z'%3E%3C/path%3E%3C/svg%3E") no-repeat 0 0;
	cursor:pointer;
}

table.datagrid input[type=checkbox]:checked + label {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234285f4' viewBox='0 0 24 24'%3E%3Cpath d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'%3E%3C/path%3E%3C/svg%3E") no-repeat 0 0;
}

table.datagrid input[type=checkbox]:disabled + label {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cccccc' viewBox='0 0 24 24'%3E%3Cpath d='M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z'%3E%3C/path%3E%3C/svg%3E") no-repeat 0 0;
	color: #cccccc;
	cursor: default;
}

table.datagrid input[type=checkbox]:checked:disabled + label {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cccccc' viewBox='0 0 24 24'%3E%3Cpath d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'%3E%3C/path%3E%3C/svg%3E") no-repeat 0 0;	
	color: #cccccc;
	cursor: default;
}

table.datagrid input[type=checkbox]:disabled:hover + label {
	color: #cccccc;
	text-decoration: none;
	cursor: default;
}


#SMGrid {
	height: auto;
	min-height: 400px;
	max-height: 400px;
	overflow-y: auto;	
}

#SMGridErase {
	height: auto;
	min-height: 150px;
	max-height: 400px;
	overflow-y: auto;	
}

#SMGrid::-webkit-scrollbar-track,
#SMGridErase::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#SMGrid::-webkit-scrollbar,
#SMGridErase::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	background-color: #F5F5F5;
}

#SMGrid::-webkit-scrollbar-thumb,
#SMGridErase::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #CCCCCC;
}

#SMBottom {
	height: 50px;
}


table.SMGrid .cl {
	text-align: left;
}
table.SMGrid .cc {
	text-align: center;
}
table.SMGrid .cr {
	text-align: right;
}

table.SMGrid .br {
	white-space: normal;
}
table.SMGrid .lnk {
 	cursor: pointer;
    cursor: hand;	
}
table.SMGrid .c-sort {
	cursor: pointer;
}
table.SMGrid .c-noSort {
	cursor: default;
	color: #707070;		
}
table.SMGrid .c-disabled,
table.SMGrid .c-disabled a {
	color: #CCCCCC;		
}

table.SMGrid .c-alert,
table.SMGrid .c-alert a,
table.SMGrid .c-alert svg {
	color: #FF0000;	
	fill: #FF0000;	
}

table.SMGrid .c-done,
table.SMGrid .c-done a,
table.SMGrid .c-done svg,
table.SMGrid .c-done div {
	text-decoration: line-through;
	color: #888888;		
	fill: #888888;
}


table.SMGrid .svg {
	padding: 0;
	width: 30px;
	text-align: center;	
}

table.SMGrid svg {
	margin: auto;
	display: flex;
}

table.SMGrid .sorty {
	padding: 0px !important;
	width: 20px;
}

table.SMGrid thead th {
	font-size: 12px;
	padding: 4px 16px;
	background-color: rgba(0,0,0,.04);
	border-bottom: 1px solid #e0e0e0;
	
    position: relative;
    white-space: nowrap;
    	
    font-weight: 500;
    letter-spacing: normal;
    line-height: 20px;	
}


table.SMGrid thead .side {
	position: sticky;
	z-index: 1;
	background-color: #F5F5F5;
	border-right: #BBBBBB 1px solid;
	left: 0;	
}

table.SMGrid .side_subtitle {
	position: sticky;
	z-index: 1;
	background-color: #F5F5F5;
	border-right: #BBBBBB 1px solid;
	left: 0;	
	
	text-transform: uppercase;
	font-size: 10px;
	padding: 0px 10px;
	border-bottom: 1px solid #e0e0e0;
    white-space: nowrap;
    	
    font-weight: 500;
    letter-spacing: normal;
    line-height: 20px;	
	
}

table.SMGrid tbody .side {
	position: sticky;
	z-index: 1;
	background-color: #FFFFFF;
	border-right: #BBBBBB 1px solid;	
	left: 0;
}

table.SMGrid .noSort {
    color: #707070;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 20px;
}

table.SMGrid tbody td {
	font-size: 12px;	
	padding: 4px 16px;
	border-bottom: 1px solid #e0e0e0;
    position: relative;
    line-height: 20px;	
}


table.SMGrid thead th:first-child,
table.SMGrid tbody td:first-child {
	padding-left: 20px;
}

table.SMGrid thead th:last-child,
table.SMGrid tbody td:last-child  {
	padding-right: 15px;
}

table.SMGrid tbody .hover {
	background:#F5F5F5;
}

table.SMGrid tbody .click {
	background:#E8F0FE;
}

table.SMGrid tbody .active {
	background:#F1F5FF;
}

table.SMGrid tbody .lock {
	background:#feefe3;
}

table.SMGrid tbody .own {
	background:#e8eaf6;
}

table.SMGrid tbody .select {
	background:#e0f2f1;
}

table.SMGrid tbody .preview {
	background:#D6DAE4;
}

table.SMGrid tbody .result {
	line-height: 36px;
	height: 36px;
	background-color: rgba(0,0,0,.04);
	font-weight: bold;
}

table.SMGrid .subtitle {
	text-transform: uppercase;
	font-size: 10px;
	padding: 0px 10px;
	background-color: rgba(0,0,0,.04);
	border-bottom: 1px solid #e0e0e0;
    white-space: nowrap;
    	
    font-weight: 500;
    letter-spacing: normal;
    line-height: 20px;	
}

table.SMGrid .SortSvg {
  	visibility: hidden;
}
table.SMGrid th:hover .SortSvg {
  	visibility: visible;
  	fill: rgba(0,0,0,0.54);
}

#PIGrid {
	height: auto;
	max-height: 400px;
	overflow-y: auto;		
    border-left: 1px solid #e7e7e7;
    border-bottom: 1px solid #c7c7c7;
    background: #fff;	
}

#PIGrid::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#PIGrid::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	background-color: #F5F5F5;
}

#PIGrid::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #CCCCCC;
}


table.PIGrid .cl {
	text-align: left;
}
table.PIGrid .cc {
	text-align: center;
}
table.PIGrid .cr {
	text-align: right;
}

table.PIGrid .c-noSort {
	cursor: default;
	color: #333333;		
}

table.PIGrid .c-disabled,
table.PIGrid .c-disabled a {
	color: #CCCCCC;		
}

table.PIGrid .svg {
	padding: 0;
	width: 30px;
	text-align: center;	
}

table.PIGrid thead th {
	font-size: 12px;
	padding: 4px 16px;
	background-color: rgba(0,0,0,.04);
	border-bottom: 1px solid #e0e0e0;
	
    position: relative;
    white-space: nowrap;
    	
    font-weight: 500;
    letter-spacing: normal;
    line-height: 20px;	
}

table.PIGrid tbody td {
	font-size: 12px;	
	padding: 4px 16px;
	border-bottom: 1px solid #e0e0e0;
    position: relative;
    white-space:nowrap;
    line-height: 20px;	
}


table.PIGrid thead th:first-child,
table.PIGrid tbody td:first-child {
	padding-left: 20px;
}

table.PIGrid thead th:last-child,
table.PIGrid tbody td:last-child  {
	padding-right: 16px;
}

table.PIGrid tbody > tr:last-child td {
	border-bottom: 0px;
}


div.Tbl_Scroll_max::-webkit-scrollbar-track {
	background-color: #F5F5F5;
}

div.Tbl_Scroll_max::-webkit-scrollbar {
	width: 12px;
	height: 12px;
	background-color: #F5F5F5;
}

div.Tbl_Scroll_max::-webkit-scrollbar-thumb {
    background-color: #CCCCCC;
}

div.Tbl_Scroll_max {
	overflow: auto;
}