body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
.inputLabel {
    width: 710px;
    height: 80px;
    margin: 2rem auto 0;
    border: 12px solid rgb(210, 213, 218);
    text-align: center;
    line-height: 61px;
    background-color: #eeeef1;
}
.cropInputs {
 position: fixed;
 top:0;
 left: auto; 
 right:0; 
 width: 350px;
 height: 100vh;
 background-color: #e7e8e8;
 text-align: center;
}
.inputtools p {text-indent: 1rem;}
.inputtools p span {display: block; min-width: 40px; height: 40px; float: left;}
.inputtools p span img {width: 40px;height: auto; line-height: 40px;}
.cropButtons {
    border: 0px solid #000;
    width: 40px;
    height: 40px; 
    border: 2px solid #fff;
    border-radius: 40px;
   
    text-align: center;
    cursor: pointer;
background: #1d9166; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1d9166 0%, #06ad8c 46%, #157050 90%, #157050 90%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #1d9166 0%,#06ad8c 46%,#157050 90%,#157050 90%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #1d9166 0%,#06ad8c 46%,#157050 90%,#157050 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d9166', endColorstr='#157050',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.cropButtons img {width: 25px;}
/* input styles */


.cropRange {
	width: calc(100% - 20px);
	height: 5px;
	background: #333;
	position: relative;
	top: -4px;
    left: 4px;
    margin: 0.7rem;	
	
	background: #68b390;
	background: -moz-linear-gradient(left, #68b390 0%, #33afb5 50%, #23dce6 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#68b390), color-stop(50%,#33afb5), color-stop(100%,#23dce6));
    
    background: -webkit-linear-gradient(left, #68b390 0%,#33afb5 50%,#23dce6 100%);
    
	background: -o-linear-gradient(left, #68b390 0%,#33afb5 50%,#23dce6 100%);
	background: -ms-linear-gradient(left, #68b390 0%,#33afb5 50%,#23dce6 100%);
	background: linear-gradient(left, #68b390 0%,#33afb5 50%,#23dce6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68b390', endColorstr='#23dce6',GradientType=1 );	
	
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
}

input[type="range"] {
	-webkit-appearance: none;
	background-color: black;
	height: 5px;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	position: relative;
	top: 0px;
	z-index: 1;
	width: 20px;
	height: 20px;
	cursor: pointer;
	border: 2px solid rgb(56, 59, 59);
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
    /* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); */
    background-color: rgb(176, 196, 195);
}

input[type="range"]:hover ~ #rangevalue,input[type="range"]:active ~ #rangevalue {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	top: -75px;
}

input[type="range"]:focus{
  outline:none;
}

#cropSubmit {
    margin-top: 1rem;
    border-radius: 4px;
    cursor: pointer;
    border: 0px solid #000;
    background: #1d9166; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #1d9166 0%, #06ad8c 46%, #157050 90%, #157050 90%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #1d9166 0%,#06ad8c 46%,#157050 90%,#157050 90%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #1d9166 0%,#06ad8c 46%,#157050 90%,#157050 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d9166', endColorstr='#157050',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #fff;
    padding:0.5rem 1rem; 
}

#closeCrop {
    margin-top: 1rem;
    border-radius: 4px;
    cursor: pointer;
    border: 0px solid #000;
    background: #1d9166; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #1d9166 0%, #06ad8c 46%, #157050 90%, #157050 90%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #1d9166 0%,#06ad8c 46%,#157050 90%,#157050 90%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #1d9166 0%,#06ad8c 46%,#157050 90%,#157050 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d9166', endColorstr='#157050',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #fff;
    padding:0.5rem 1rem; 
}