$color_1: #507F70;
$color_2: white;
$color_3: #000000;
$color_4: #FFFFFF;
$background-color_1: #7a99ac;
$background-color_2: #507F70;
$background-color_3: #AE8A79;
$background-color_4: #d9d9d6;
$left: left;
$center: center;
$right: right;

/* Custom CSS Style */
/* Navigation bar & Menu */
/* Titles */
/* Forms input */
/* Buttons */
/* Footer */

.navlink {
	color: $color_2;
}

.navbar-nav ul {
	color: $color_2;
}
ul {
	color: $color_2;
}
li {
	color: $color_2;
}
a {
	color: $color_2;
}
.dropdown {
	color: $color_2;
}

.center{
	display: flex;
	justify-content:center;
}

.navbar-color {
	background-color: $background-color_1;
}

.table-col-color {
	flood-color: $background-color_1;
}

.title-color {
	color: $color_1;
}
.inputspan-color {
	background-color: $background-color_1;
	font-weight: bold;
	color: $color_2;
}
.btn {
	color: $color_3;
}
.btngreen-color {
	background-color: $background-color_2;
	font-weight: bold;
	color: $color_2;
}
.btnbrown-color {
	background-color: $background-color_3;
	font-weight: bold;
	color: $color_4;
}
.footer-bg-color {
	background-color: $background-color_4;
}



	/* Range input */

	.__range input
	{
	  outline: none;
		-webkit-appearance: none;
		background-color: #aaa;
		height: 3px;
		width: 100%;
		margin: 10px auto;
	}
	.__range input::-webkit-slider-thumb
	{
		-webkit-appearance: none;
		width: 20px;
		height: 20px;
		background-color: #507F70;
		border-radius: 50%;
		cursor: -moz-grab;
		cursor: -webkit-grab; 
	}            
	.__range input::-moz-range-thumb
	{
		-webkit-appearance: none;
		width: 20px;
		height: 20px;
		background-color: #507F70;
		border-radius: 50%;
		cursor: -moz-grab;
		cursor: -webkit-grab; 
	}
	.__range input::-ms-thumb
	{
		-webkit-appearance: none;
		width: 20px;
		height: 20px;
		background-color: #507F70;
		border-radius: 50%;
		cursor: -moz-grab;
		cursor: -webkit-grab; 
	}
	.__range-step{
		position: relative;                
	}
	
	.__range-max{
		float: right;
	}
	.__range-step input::-webkit-slider-thumb
	{
		background: transparent;
	}            
	.__range-step input::-moz-range-thumb
	{
		background: transparent;
	}
	.__range-step input::-ms-thumb
	{
		background: transparent;
	}
	.__range-step datalist {
		position:relative;
		display: flex;
		justify-content: space-between;
		height: auto;
		bottom: 16px;
		/* disable text selection */
		-webkit-user-select: none; /* Safari */        
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* IE10+/Edge */                
		user-select: none; /* Standard */
		/* disable click events */
		pointer-events:none;  
	}
	.__range-step datalist option {
		width: 10px;
		height: 10px;
		min-height: 10px;
		border-radius: 100px;
		/* hide text */
		white-space: nowrap;       
	  padding:0;
	  line-height: 40px;
	}
	
	
	 .__range-step-popup output 
	{ 
		position: absolute;
		background-color: #507F70;                
		width: 30px;
		height: 30px; 
		text-align: center; 
		color: white; 
		border-radius: 100px; 
		display: inline-block; 
		font-size:12px;
		bottom: 100%;
		left: 0;
		vertical-align: middle;
		line-height: 30px;
	}
	.__range-step-popup .__range-output-square{
		padding: 0 5px; 
		min-width: 25px;
		width: auto !important;                
		border-radius: 5px !important;
	}
	.__range-step-popup output:after 
	{ 
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border-top: 10px solid #507F70;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		top: 90%;
		left: 50%;
		margin-left: -10px;
		margin-top: -1px;
	}
	.__range-step-popup datalist{
	  overflow:hidden;
	}
	.__range-step{
	  margin:0 40px;
	}
	.__range-step-popup{
	  margin:40px 40px;
	}