
label.fancy-label, 
input.fancy-input { 
	position: relative;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

label.fancy-label {
	vertical-align: top;
	display: inline-block;
	
    width: auto;
	height: 30px;
	
    line-height: 30px;
}



input.fancy-input {
	vertical-align: top;
	display: inline-block;
	
	height: 30px;
	
	background-color: #ffffff;
	
    border-color: #dcdcdc;
    border-width: 1px;
    border-style: solid;
    padding: 6px;
	
	text-align: left; 
	font-size: inherit;
	color: #2d2d2d;
}

input.fancy-input:hover { 
	cursor: text;
}

input.fancy-input:focus {
    border-color: #2d2d2d;
	
	outline: none;
}

input.fancy-input:disabled {
    border-width: 0px 0px 1px 0px;
	box-shadow: none;
	
    color: #757575;
}

input.fancy-input:disabled:hover { 
	cursor: default;
}

label.fancy-label.required::after {
	content: "*"; 
	
	position: relative;
    top: -14px;
	
    color: #DA4453;
}

input.fancy-input:invalid { 
    border-color: #DA4453;
	box-shadow: 0px 0px 3px 0px #da4453; 
}

input.fancy-input.invalid { 
    border-color: #DA4453;
	box-shadow: 0px 0px 3px 0px #da4453; 
}

input.fancy-input:focus { 
	outline: none;
    border-color: #5D9CEC;
	box-shadow: 0px 0px 3px 0px #5D9CEC; 
}



input.fancy-slider {
	-webkit-appearance: none;
	
	vertical-align: top;
	height: 26px;

	background-color: #FFFFFF;
	
    border-color: #2D2D2D;
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
	
    outline: none;
	overflow: hidden;
}

input.fancy-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	
	width: 16px;
	height: 26px;
	
	background: #2D2D2D;
	
	cursor: pointer;
}

input.fancy-slider::-moz-range-thumb {
	width: 16px;
	height: 26px;
	
	background: #2D2D2D;
	
	cursor: pointer;
}

i.fancy-search {
	vertical-align: top;
	display: inline-block;
}

i.fancy-search::after {
	content: "\f002";
	
	vertical-align: top;
	display: inline-block;
	
	width: 20px;
	height: 28px; 
	margin-left: -5px;
	
	background-color: #484848;
	
    border-color: #616161;
    border-width: 1px 0px 1px 1px;
    border-style: solid;
	border-radius: 0px 3px 3px 0px;
	
	color: #FFFFFF;
	font-family: "Font Awesome 5 Free";
    font-weight: bold;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    text-align: center;
    line-height: 28px;
}

i.fancy-search-left::before {
	content: "\f002";
	
	vertical-align: top;
	display: inline-block;
	
	width: 20px;
	height: 28px; 
    margin-right: -5px;
	
	background-color: #484848;
	
    border-color: #616161;
    border-width: 1px 0px 1px 1px;
    border-style: solid;
	border-radius: 3px 0px 0px 3px;
	
	color: #FFFFFF;
	font-family: "Font Awesome 5 Free";
    font-weight: bold;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    text-align: center;
    line-height: 28px;
}

i.fancy-search + input.fancy-input {
	
}

table.fancy-table:not(.thick) tr > th .fancy-search::after, 
table.fancy-table:not(.thick) tr > td .fancy-search::after,
table.fancy-table:not(.thick) tr > th .fancy-search-left::before, 
table.fancy-table:not(.thick) tr > td .fancy-search-left::before {
	height: 18px; 
	
    font-size: 10px;
    line-height: 18px;
}

i.fancy-before, 
i.fancy-after {
	vertical-align: top;
	display: inline-block;
}

i.fancy-before::before, 
i.fancy-after::after {
	content: attr(data-content);
	
	vertical-align: top;
	display: inline-block;
	
	width: 20px;
	height: 28px; 
	margin-left: -5px;
	
	background-color: #484848;
	
    border-color: #616161;
    border-width: 1px 0px 1px 1px;
    border-style: solid;
	border-radius: 0px 3px 3px 0px;
	
	color: #FFFFFF;
	font-family: "Open Sans";
    font-weight: normal;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    text-align: center;
    line-height: 28px;
}

i.fancy-before.fa::before, 
i.fancy-after.fa::after { 
	font-family: "Font Awesome 5 Free"; 
    font-weight: 400; 
} 

i.fancy-before.fa.calendar-alt::before, 
i.fancy-after.fa.calendar-alt::after { 
	content: "\f073";
} 

i.fancy-before::before{ 
	margin-left: 0px;
    margin-right: -5px;
	
	border-radius: 3px 0px 0px 3px;
}






























