.m-r-0px{ margin-right:0px; }
.m-r-10px{ margin-right:10px; }
.m-b-10px{ margin-bottom:10px; }
.m-b-15px{ margin-bottom:15px; }
.m-b-20px{ margin-bottom:20px; }
.w-1-pct{ width:1%; }
.w-2-pct{ width:2%; }
.w-3-pct{ width:3%; }
.w-4-pct{ width:4%; }
.w-5-pct{ width:5%; }
.w-7-pct{ width:7%; }
.w-8-pct{ width:8%; }
.w-10-pct{ width:10%; }
.w-12-pct{ width:12%; }
.w-13-pct{ width:13%; }
.w-15-pct{ width:15%; }
.w-16-pct{ width:16%; }
.w-17-pct{ width:17%; }
.w-20-pct{ width:20%; }
.w-23-pct{ width:23%; }
.w-24-pct{ width:24%; }
.w-25-pct{ width:25%; }
.w-27-pct{ width:27%; }
.w-30-pct{ width:30%; }
.w-35-pct{ width:35%; }
.w-40-pct{ width:40%; }
.w-45-pct{ width:45%; }
.w-50-pct{ width:50%; }
.w-55-pct{ width:55%; }
.w-60-pct{ width:60%; }
.w-65-pct{ width:65%; }
.w-70-pct{ width:70%; }
.w-75-pct{ width:75%; }
.w-80-pct{ width:80%; }
.w-85-pct{ width:85%; }
.w-90-pct{ width:90%; }
.w-95-pct{ width:95%; }
.w-100-pct{ width:100%; }
.display-none{ display:none; }
.padding-bottom-2em{ padding-bottom:1em; }
.width-30-pct{ width:30%; }
.width-40-pct{ width:40%; }
.overflow-hidden{ overflow:hidden; }
.margin-right-1em{ margin-right:1em; }
.right-margin{ margin:0 .5em 0 0; }
.margin-bottom-1em { margin-bottom:1em; }
.margin-zero{ margin:0; }
.text-align-center{ text-align:center; }




@media screen and (max-width: 600px)
{

		table.table-mobile {
		  border: 0;
		}

		table.table-mobile thead {
		  display: none;
		}

		table.table-mobile tr {
		  margin-bottom: 10px;
		  display: block;
		  border-bottom: 2px solid #ddd;
		}

		table.table-mobile td {
		  display: block;
		  text-align: right;
		  font-size: 13px;
		  border-bottom: 1px dotted #ccc;
		}

		table.table-mobile td:last-child {
		  border-bottom: 0;
		}

		table.table-mobile td:before {
		  content: attr(data-label);
		  float: left;
		  text-transform: uppercase;
		  font-weight: bold;
		}

}


.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}


#ServiceListingModal { overflow-y:scroll }
#ServiceConfiguratorModal { overflow-y:scroll }





.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}




/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */


/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}


.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
    /*font-size: 1.25em;*/
    /*font-weight: 700;*/
    color: #4A4;
    background-color: #DDD;
    display: inline-block;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: red;
}

.inputfile + label {
	cursor: pointer; /* "hand" cursor */
}

.inputfile:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}


label.myInputFileLabel input[type="file"] {
    position:absolute;
    /*top: -1000px;*/
	opacity: 0;
	z-index: -1;
}

/***** Example custom styling *****/
.myInputFileLabel {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.myInputFileLabel:hover {
    background: #CCC;
}
.myInputFileLabel:active {
    background: #CCF;
}
.myInputFileLabel :invalid + span {
    color: #A44;
}
.myInputFileLabel :valid + span {
    color: #4A4;
}