.baseLayerName {
    background-color: rgba(0, 0, 0, 0.5);
    background-image: url('../Content/ikonice-mape srbije/map-tr.png');
    width: 40px;
    height: 40px;
}

.slider{
    background-color: transparent;
    float: left;
    width: 125px;
    margin: 0px 10px 0px 10px;
    padding-top: 40px;
    position: relative;
}

.ui-widget.ui-widget-content {
    border: none;
}

.slider-line {
    border-radius: 3px;    
    border: 1px solid #c5c5c5;
    background-color: white;
    height: 10px;
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    top: -24px;
    bottom: 0px;
}

.ui-slider-handle {
    margin-top: 17px;
}

.overlayName {
    background-color: rgba(0, 0, 0, 0.5);
    background-image: url('../Content/ikonice-mape srbije/foto-tr.png');
    width: 40px;
    height: 40px;
}
.overlayName:hover {
    background-color: rgba(46, 40, 115, 1);
    #background-image: url('../Content/ikonice-mape srbije/foto-lj-100.png');
    text-decoration: none;
}

.baseLayerName-horizontal{
	float: left;
	/*background-color: lightblue;
	padding: 3px;
	border: 2px solid white;
	border-radius: 5px;
	margin-top: 0;*/
	text-decoration: none;
}

.overlayName-horizontal{
	float: right;
	/*background-color: lightblue;
	padding: 3px;
	border: 2px solid white;
	border-radius: 5px;
	margin-top: 0;*/
	text-decoration: none;
}

.layerOnName {
    background-image: url('../Content/ikonice-mape srbije/map-lj.png');
    /*background-color: white;
	border: 2px solid black;
	color: black;*/
}

.baseLayerName-on {
    background-color: rgba(46, 40, 115, 0.5);
    #background-image: url('../Content/ikonice-mape srbije/map-lj.png');
}

.overlayName-on {
    background-color: rgba(46, 40, 115, 0.5);
    #background-image: url('../Content/ikonice-mape srbije/foto-lj.png');
}


.baseLayerName:hover {
    background-color: rgba(46, 40, 115, 1);
    #background-image: url('../Content/ikonice-mape srbije/map-lj-100.png');
    text-decoration: none;
}

.opacitySlider {
}

.opacitySlider-horizontal{
	/*-webkit-appearance: slider-horizontal;
	height: 26px;
    width: 100%;
    margin: 0 5 0 5px;*/
}

input.opacitySlider[type=range]{
    writing-mode: bt-lr; /* IE */
	-webkit-transform:rotate(180deg);
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 26px;
    height: 100%;
    margin: 5 0 5 0px;
}

input.opacitySlider-horizontal[type=range]{
    # writing-mode: bt-lr; /* IE */
	#-webkit-transform:rotate(180deg);
    #-webkit-appearance: slider-vertical; /* WebKit */
    height: 26px;
    width: 57%;
    margin: 7 5 0 5px;
	float: left;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .overlayName-horizontal{
	    float: left;
    }   
}

input[type=range]::-ms-track {
    width: 180px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}

@media (max-width:655px) {
   input.opacitySlider-horizontal[type=range]{
	    # writing-mode: bt-lr; /* IE */
		#-webkit-transform:rotate(180deg);
		#-webkit-appearance: slider-vertical; /* WebKit */
		height: 26px;
		width: initial;
		margin: 7 5 10 5px;
		float: left;
	}
    .baseLayerName , .overlayName {
       margin-bottom: 16px;
    }
}

@media (max-width:435px) {
   input.opacitySlider-horizontal[type=range]{
	    # writing-mode: bt-lr; /* IE */
		#-webkit-transform:rotate(180deg);
		#-webkit-appearance: slider-vertical; /* WebKit */
		height: 26px;
		width: initial;
		margin: 7 5 25 5px;
		float: left;
	}
   .baseLayerName , .overlayName {
       margin-bottom: 32px;
    }
}

/*input.opacitySlider[type=range]:after{
     content:'';
    position:absolute;
    top:0px; bottom:0px; 
    left:-50px; right:-50px; 
}

input.opacitySlider-horizontal[type=range]:after{
    content:'';
    position:absolute;
    top:-50px; bottom:-50px; 
    left:0px; right:0px; /* */
}*/