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

form {
	margin: 0px;
	padding: 0px;	
}

input[type=text]:read-only,
textarea:read-only,
input[type=password]:read-only {
	cursor: default;	
	color: rgba(0,0,0,0.7);
	background-color: rgba(0,0,0,0.07);
}

input:disabled,
input[type=text]:disabled,
textarea:disabled,
input[type=password]:disabled {
	cursor: default;	
	color: rgba(0,0,0,0.7);
	background-color: rgba(0,0,0,0.07);
}

select:disabled {
	cursor: default;	
	color: rgba(0,0,0,1);
	background-color: rgba(0,0,0,0.1);
}

input[type=text],
input[type=password] {
	font-family: 'Roboto', sans-serif;
    font-size: 16px;
	border: 0px;
	border-bottom: 1px solid #DBDBDB;	
    padding: 0px 4px 0px 4px;
    height: 30px;
    width: calc(100% - 10px);
    word-wrap: break-word;
    word-break: break-all;
}

input[type=colpick] {
	font-family: 'Roboto', sans-serif;
    font-size: 16px;
	border: 0px;
	border: 1px solid #DBDBDB;	
    padding: 0px 4px 0px 4px;
    height: 30px;
    width: calc(100% - 50px);
    word-wrap: break-word;
    word-break: break-all;	
}


textarea {
	font-family: 'Roboto', sans-serif;
    font-size: 16px;
	border: 0px;
    padding: 5px;
    height: 100px;
    width: calc(100% - 15px);
    line-height: 1.4em;
    word-wrap: break-word;
    word-break: break-all;
    border: 1px solid #DBDBDB;
}

select {
	font-family: 'Roboto', sans-serif;
    font-size: 16px;
	border: 0px;
	border-bottom: 1px solid #DBDBDB;	
    padding: 0px 4px 0px 4px;
    height: 30px;
    width: calc(100%);
    word-wrap: break-word;
    word-break: break-all;
    background-color: #FFFFFF;
    margin-top: 1px;    
}

input[type=password]:focus,
input[type=number]:focus,
input[type=text]:focus,
input[type=file]:focus,
input[type=url]:focus,
input[type=colpick]:focus {  
	border-color:transparent;
	box-shadow: 0 2px 2px -2px #4285F4;
	border-bottom: 1px solid #4285F4;
	-webkit-transition: all 0.20s;
	-moz-transition: all 0.20s;
	-ms-transition: all 0.20s;
	-o-transition: all 0.20s; 
	outline-style:none;
}

textarea:focus {  
	border-color:transparent;
	box-shadow: 0 2px 2px -2px #4285F4;
	border: 1px solid #4285F4;
	-webkit-transition: all 0.20s;
 	-moz-transition: all 0.20s;
 	-ms-transition: all 0.20s;
 	-o-transition: all 0.20s; 
  	outline-style:none;
}

input.noLine,
select.noLine,
textarea.noLine {
	border-color:transparent;
	outline:none;
	box-shadow:none;
}

.file-upload {
  border: 1px dashed #999999;
  display: inline-block;
  cursor: pointer;  
  text-align: center;
  width: 100%;
  line-height: 105px;      
}

#line {
	border-bottom: 1px solid #DBDBDB;
}

#line > input {
	height: 29px;
	border-color:transparent;
	outline:none;
	box-shadow:none;
}

#line > input[type=password]:focus,
#line > input[type=number]:focus,
#line > input[type=text]:focus,
#line > input[type=file]:focus,
#line > input[type=url]:focus {
	border-color:transparent;
	box-shadow: 0 2px 2px -2px #4285F4;
	border-bottom: 1px solid #4285F4;
	-webkit-transition: all 0.20s;
	-moz-transition: all 0.20s;
	-ms-transition: all 0.20s;
	-o-transition: all 0.20s; 
	outline-style:none;
}

#line input[type=text]:focus + label,
#line input[type=file]:focus + label,
#line input[type=password]:focus + label
#line select:focus + label,
#line textarea:focus + label {
    color: #4285F4;
}


.group label {
	font-family: 'Roboto', sans-serif;
   	left: 0px;
   	top: -20px;
   	font-size: 12px;
   	font-weight: normal;
   	color: rgba(0,0,0,0.38);
   	background-color: #FFFFFF;
   	position: absolute;
   	pointer-events: none;
   	transition: 0.2s ease all; 
   	-moz-transition: 0.2s ease all; 
   	-webkit-transition: 0.2s ease all;
}

input[type=text]:focus + label,
input[type=file]:focus + label,
input[type=password]:focus + label
select:focus + label,
textarea:focus + label {
  color: #4285F4;
}

.group { 
  position: relative; 
  margin-top: 50px;
}

.group p {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 20px;
    margin-top: 5px;
}

.group .btn-open,
.group .btn-clear {
	position: absolute;
	top: 0;
	right: 0;
	width: 18px;
	height: 18px;
	padding: 6px;
	fill: rgba(0,0,0,0.54);
 	cursor: pointer;
    cursor: hand;
}


.topc { 
  margin-top: 30px !important;
}


.group-readonly { 
  position: relative; 
  margin-top: 40px;
}

.group-readonly h6 {
	font-family: 'Roboto', sans-serif;
   	font-size: 16px;
   	font-weight: normal;
   	color: rgba(0,0,0,0.68);
   	background-color: #FFFFFF;
   	margin: 3px 0px 0px 0px;
   	padding: 0px;
}

.group-readonly label {
	font-family: 'Roboto', sans-serif;
   	left: 0px;
   	top: -20px;
   	font-size: 12px;
   	font-weight: normal;
   	color: rgba(0,0,0,0.38);
   	background-color: #FFFFFF;
   	position: absolute;
}


input[type=checkbox],
input[type=radio] {
	display:none;
}

input[type=checkbox] + label {
	padding-left:30px;
	height:24px;
	display:inline-block;
	line-height:25px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23757575' 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 left center;	
	font-size:14px;
	vertical-align:middle;
	cursor:pointer;
	border: 0px transparent;		
}

input[type=checkbox]:checked + label {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' 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 left center;		
}

input[type=checkbox]:disabled + label {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cccccc' 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 left center;	
	color: #cccccc;
	cursor: default;
}

input[type=checkbox]:checked:disabled + label {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cccccc' 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 left center;		
	color: #cccccc;
	cursor: default;
}

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




input[type=radio] + label {
	padding-left:30px;
	height:24px;
	display:inline-block;
	line-height:25px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23757575' d='M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'%3E%3C/path%3E%3C/svg%3E") no-repeat left center;	
	font-size:14px;
	vertical-align:middle;
	cursor:pointer;
	border: 0px transparent;
}

input[type=radio]:checked + label {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z'%3E%3C/path%3E%3C/svg%3E") no-repeat left center;	
}


input[type=radio]:disabled + label {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cccccc' d='M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'%3E%3C/path%3E%3C/svg%3E") no-repeat left center;	
	color: #cccccc;
	cursor: default;
}

input[type=radio]:checked:disabled + label {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cccccc' d='M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z'%3E%3C/path%3E%3C/svg%3E") no-repeat left center;		
	color: #cccccc;
	cursor: default;
}

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


.required:after {
  content:" *";
}

/*--- TABLE -----------------------------------------------------------*/

.container-sm input[type=text] {
    font-size: 13px;
    border: 1px solid;
    border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;
    padding: 0px 4px 0px 4px;
    height: 30px;
    word-wrap: break-word;
    word-break: break-all;
}

.container-sm select {
    font-size: 14px;
    border: 1px solid;
    border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;
    height: 32px;
    margin-top: 0px;
}

.container-sm input[type=text]:focus,
.container-sm select:focus {
	border: 1px solid #4285F4; 
	transition: 0.2s ease all; 
	-moz-transition: 0.2s ease all; 
	-webkit-transition: 0.2s ease all;	
	outline: none;
}


/*--- TABLE -----------------------------------------------------------*/

.container-table input[type=text] {
    font-size: 14px;
    border: 1px solid;
    border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;
    padding: 0px 4px 0px 4px;
    height: 30px;
    word-wrap: break-word;
    word-break: break-all;
}

.container-table select {
    font-size: 14px;
    border: 1px solid;
    border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;
    height: 32px;
    margin-top: 0px;
}

.container-table input[type=text]:focus,
.container-table select:focus {
	border: 1px solid #4285F4; 
	transition: 0.2s ease all; 
	-moz-transition: 0.2s ease all; 
	-webkit-transition: 0.2s ease all;	
	outline: none;
}

/*--- LOGIN -----------------------------------------------------------*/

.container-login .group { 
  position: relative; 
  margin-top: 24px;
  margin-bottom: 10px;
}

.container-login input[type=text],
.container-login input[type=password] {
  	font-size: 16px;
  	padding: 13px 15px;
  	display: block;
  	width: calc(100% - 30px);
  	border: none;
  	height: 20px;
    -webkit-border-radius: 4px;
    border-radius: 4px;	  	
  	border: 1px solid rgba(0,0,0,0.12);
  	outline-style: transparent;
}

.container-login select {
  	font-size: 16px;
  	padding: 13px 15px;
  	display: block;
  	width: calc(100%);
  	border: none;
  	height: 48px;
    -webkit-border-radius: 4px;
    border-radius: 4px;	  	
  	border: 1px solid rgba(0,0,0,0.12);
  	outline-style: transparent;   
}

.container-login input[type=text]:focus,
.container-login input[type=password]:focus,
.container-login select:focus {
	border: 1px solid #4285F4; 
	transition: 0.2s ease all; 
	-moz-transition: 0.2s ease all; 
	-webkit-transition: 0.2s ease all;	
	outline: none;
}


.container-login .group label {
  left: 10px;
  top: -8px;
  font-size: 12px;
  color: rgba(0,0,0,0.38);
  background-color: #FFFFFF;
  padding: 0px 5px;
  position: absolute;
  pointer-events: none;
  transition: 0.2s ease all; 
  -moz-transition: 0.2s ease all; 
  -webkit-transition: 0.2s ease all;
}

.container-login input[type=text]:focus + label,
.container-login input[type=password]:focus + label,
.container-login select:focus + label {
  color: #4285F4;
}


/*--- Container Data -----------------------------------------------------------*/


.container-data h6 {
    float: left;
    width: 130px;
  	font-size: 12px;
    font-weight: 400;
    margin: 5px 0px 0px 0px;
    color: #666666;
}

.container-data input[type=text],
.container-data input[type=password] {	
	width: 300px;
    font-size: 14px;
    border: 1px solid;
    border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;
    padding: 0px 8px;
    word-wrap: break-word;
    word-break: break-all;
    margin-bottom: 10px;
}

.container-data select {	    	
	width: 318px;
    font-size: 14px;
    border: 1px solid;
    border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;
    height: 32px;
    margin: 0px;
}

.container-data input[type=checkbox] + label {
	float: left;
    font-size: 14px;
    padding-left:25px;
    height: 20px;
    line-height: 22px;
}

.container-data  input[type=radio] + label {
	float: left;
    font-size: 14px;
    padding-left:25px;
    height: 20px;
    line-height: 22px;
    margin-top: 3px;
    margin-right: 20px;
}

.container-data input[type=text]:focus,
.container-data input[type=password]:focus,
.container-data select:focus {
	border: 1px solid #4285F4; 
	transition: 0.2s ease all; 
	-moz-transition: 0.2s ease all; 
	-webkit-transition: 0.2s ease all;	
	outline: none;
}

/*--- Container Input -----------------------------------------------------------*/


.container-input h6 {
  	font-size: 12px;
    font-weight: 400;
    margin: 0px 0px 3px 0px;
    color: #666666;
}

.container-input input[type=text],
.container-input input[type=password] {	
	width: 300px;
    font-size: 14px;
    border: 1px solid;
    border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;
    padding: 0px 8px;
    word-wrap: break-word;
    word-break: break-all;
    margin-bottom: 10px;
}

.container-input select {	    	
	width: 318px;
    font-size: 14px;
    border: 1px solid;
    border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;
    height: 32px;
    margin: 0px;
}

.container-input input[type=checkbox] + label {
	float: left;
    font-size: 14px;
    padding-left:25px;
    height: 20px;
    line-height: 22px;
}

.container-input  input[type=radio] + label {
	float: left;
    font-size: 14px;
    padding-left:25px;
    height: 20px;
    line-height: 22px;
    margin-right: 20px;
}

.container-input input[type=text]:focus,
.container-input input[type=password]:focus,
.container-input select:focus {
	border: 1px solid #4285F4; 
	transition: 0.2s ease all; 
	-moz-transition: 0.2s ease all; 
	-webkit-transition: 0.2s ease all;	
	outline: none;
}


/*--- Container Print -----------------------------------------------------------*/

.container-print h6 {
  	font-size: 15px;
	margin: 0px;
	padding: 0px;
	height: 32px;
	line-height: 32px;	
	font-weight: 400;
	width: 150px;
	float: left;
}

.container-print input[type=text] {	
    font-size: 15px;
    border: 1px solid;
    border-color: transparent;
    background-color: #F1F3F4;
	height: 28px;    
    padding: 0px 6px 0px 6px;
	border-radius: 4px;    
    word-wrap: break-word;
    word-break: break-all;
    margin-bottom: 10px;    
    width: 256px;
    float: left;
}

.container-print input[type=number] {	
    font-size: 15px;
    border: 1px solid;
    border-color: transparent;
    background-color: #F1F3F4;
	height: 28px;    
    padding: 0px 6px 0px 6px;
	border-radius: 4px;    
    word-wrap: break-word;
    word-break: break-all;
    margin-bottom: 10px;    
    width: 60px;
    float: left;
}

.container-print select {	    	
	font-size: 15px;
	width: 100%;
	height: 30px;
	padding: 2px;
	border-radius: 4px;
	background-color: #F1F3F4;
	border-color:transparent;
	width: 270px;
	float: left;
}

.container-print input[type=checkbox] + label {
	float: left;
    font-size: 14px;
    padding-left:25px;
    height: 20px;
    line-height: 22px;
}

.container-print  input[type=radio] + label {
	float: left;
    font-size: 14px;
    padding-left:25px;
    height: 20px;
    line-height: 22px;
    margin-right: 20px;
}

.container-print input[type=text]:focus,
.container-print input[type=password]:focus,
.container-print select:focus {
	border: 1px solid #4285F4; 
	transition: 0.2s ease all; 
	-moz-transition: 0.2s ease all; 
	-webkit-transition: 0.2s ease all;	
	outline: none;
}

/*--- Container Filter -----------------------------------------------------------*/


.container-filter h6 {
    float: left;
  	font-size: 12px;
    font-weight: 500;
    margin: 5px 0px 0px 0px;
    color: #666666;
}

.container-filter .btn {
    width: calc(100% - 30px);
    font-size: 14px;
    padding: 6px;
}

.container-filter input[type=text] {
    font-size: 14px;
    border: 1px solid;
    border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;
    padding: 0px 8px;
    height: 28px;
    word-wrap: break-word;
    word-break: break-all;
    margin-bottom: 10px;
    width: calc(100% - 48px);
}

.container-filter select {	    	
    font-size: 14px;
    border: 1px solid;
    border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;
    height: 30px;
    margin: 0px;
    width: calc(100% - 30px);
}

.container-filter input[type=checkbox] + label {
	float: left;
    font-size: 14px;
    height: 18px;
    line-height: 20px;
    padding-left: 23px
}

.container-filter input[type=radio] + label {
	float: left;
    font-size: 14px;
    height: 18px;
    line-height: 20px;
    padding-left: 23px
}

.container-filter input[type=text]:focus,
.container-filter select:focus {
	border: 1px solid #4285F4; 
	transition: 0.2s ease all; 
	-moz-transition: 0.2s ease all; 
	-webkit-transition: 0.2s ease all;	
	outline: none;
}

/*--- Container Filter Group -----------------------------------------------------------*/


.container-filter .FLGroup {
	width: 225px;
	max-height: 225px;
	overflow-x: hidden;
    overflow-y: auto;	
	border: 1px solid #CCCCCC;	
	padding: 4px;
}

.container-filter .FLGroup h6{
	padding-left: 4px;
}

.container-filter .FLGroup li {
	float: left;
	width: 100%;
	padding: 2px;	
}
.container-filter .FLGroup input[type=checkbox] + label {
	float: left;
	font-size: 13px;
	padding-left: 25px
    height: 18px;
    line-height: 18px;	
}


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

.container-filter .FLGroup::-webkit-scrollbar {
	width: 4px;
	background-color: #F5F5F5;
}

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


.container-filter .FLGroupFooter {
    width: 225px;
    padding: 4px 4px 4px 7px;
    font-size: 11px;
}



.wgt-container select {
	appearance: none;
	border: 0;
	box-shadow: none;
	height: 22px;
	border-bottom: 0px;
	font-size: 12px;
	text-align: center;
	color: #000000;
	cursor: pointer;
	font-weight: 500;
	background-color: #F5F5F5;	
}

.wgt-container select:hover {
	color: #4285F4;	
	background: #FFFFFF !important;
	transition: 0.3s ease all; 
	-moz-transition: 0.3s ease all; 
	-webkit-transition: 0.3s ease all;
}

.wgt-container select:focus>option {
	background: #FFFFFF !important;
	color: #000000;
}

.wgt-container .select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;

  select,
  &::after {
    grid-area: select;
  }

  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;

}

.wgt-container .select::after {
    content: "";
    justify-self: end;
    width: 0.4em;
    height: 0.2em;
    margin-right: 2px;
    background-color: #777777;
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}