/*------------------------------
    Shipment Area
------------------------------*/
.shipment-area{
    padding: 130px 0 130px;
    background-color: var(--active-color);
    &.style-02{
        background-color: #F5F5F5;
        .shipment-form-wrap{
            margin: 0px;
            margin-bottom: -210px;
            box-shadow: -2px 2px 2px 2px #eee;
        }
    }
    &.style-03{
        background-color: #F5F5F5;
        
    }
    .shipment-form-wrap{
        padding: 50px 30px;
        background-color: var(--secondary-color);
        margin-top: -210px;
        box-shadow: 0px -10px 10px #eee;
        h3{
            color: var(--active-color);
            margin-bottom: 20px;
        }
        #shipment-form{
            h4{
                font-weight: 700;
                color: var(--main-color);
            }
            .weight{
                display: inline-flex;
                width: 100%;
                span{
                    margin: 8px 12px 8px 0px;
                }
            }
            .shipment-process{
                margin: 20px 0;
                .form-group{
                    .form-radio{
                        padding: 0px 10px 0px 20px;
                    }
                    label{
                        padding: 0px 10px 0px 5px;
                    }
                }
            }
        }
        .form-group {
            width: 100%;
            select{
                margin-bottom: 30px !important;
            }
            .form-control {
                display: block;
                width: 100%;
                height: 50px;
                line-height: 1.5;
                color: #495057;
                background-color: #fff;
                background-clip: padding-box;
                border: 1px solid #ced4da;
                border-radius: 0px;
                transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
                margin-bottom: 30px;
            }
        }
    }
}


@charset "UTF-8";
/* CSS by Steven Estrella. http://www.stevenestrella.com */
/* The .slider and .slidervertical classes are for the range inputs. 
	Set the z-index high so its on top. */
.slider, .slidervertical {position:absolute;left:0px;top:0px;overflow:visible;z-index:100;}

/* slidershell exists only
to provide a positioning context for the range input and other elements.*/
.slidershell {border:0 none;position:relative;left:0px;top:0px;overflow:visible;}

/* .slidertrack is the visible track on which the user drags the thumb button. */
.slidertrack {
    background-color: rgba(#F14B4B,  0.7);
    border-radius:20px;
    position:absolute;}

/* .sliderfill adds color (or a gradient as seen here) to the track as the user 
	drags the thumb. */
.sliderfill {border:2px solid #F14B4B;border-radius:20px;
	position:absolute;opacity:0.7;pointer-events:none;
    background:#F14B4B;
    //background: linear-gradient(90deg,#005555,#006699);
	}

/* .sliderthumb can be any css you like including an image. 
	The dimensions must match those found in the rule for 
	input[type=range]::-webkit-slider-thumb. */
.sliderthumb {width:40px;height:40px;
    background-image:url(../img/bg/range.png);
    background-size: 40px 40px;
	background-position:0px 0px;
	background-repeat: no-repeat;background-color:transparent;
	position:absolute;left:0px;top:0px;border:0 none;
	padding:0px;margin:0px;text-align:center;
	pointer-events:none;
}

/* .slidervalue can be styled as you see fit */
.slidervalue {width:40px;height:40px;line-height:40px;color:#fff;
	font-family:helvetica,sans-serif;font-size:16px;
	position:absolute;left:0px;top:0px;border:0 none;
	padding:0px;margin:0px;text-align:center;
	pointer-events:none;
}

/* First we have to make transparent all the default elements of the range input.
	We use color:transparent to eliminate the default tick marks in IE. */

input[type=range]::-ms-track {
	width:100%;height:100%;
	-webkit-appearance:none;margin:0px;padding:0px;border:0 none;
	background:transparent;color:transparent;overflow:visible;
}
input[type=range]::-moz-range-track {
	width:100%;height:100%;
	-moz-appearance:none;margin:0px;padding:0px;border:0 none;
	background:transparent;color:transparent;overflow:visible;
}
input[type=range] {
	width:100%;height:100%;
	-webkit-appearance:none;margin:0px;padding:0px;border:0 none;
	background:transparent;color:transparent;overflow:visible;
}
/* we need a separate rule for when the range input is to be vertical */
input[type=range].slidervertical {
	-webkit-appearance: slider-vertical;
	writing-mode: bt-lr; /* IE */
	opacity:0.7; /* needed to hide the default slider-vertical appearance */
}

input[type=range]:focus::-webkit-slider-runnable-track {
	background:transparent;border:transparent;}
input[type=range]:focus {outline: none;}
	
/* Make the thumbs the same size as your custom sliderthumb. 
	they will not be visible but they will be draggable. 	*/
input[type=range]::-ms-thumb {width:40px;height:40px;
	border-radius:0px;border:0 none;background:transparent;}
input[type=range]::-moz-range-thumb {width:40px;height:40px;
	border-radius:0px;border:0 none;background:transparent;}	
input[type=range]::-webkit-slider-thumb {width:40px;height:40px;
	border-radius:0px;border:0 none;background:transparent;-webkit-appearance:none;}

/* microsoft IE10+ and Edge - eliminates default fills before and after thumb */
input[type=range]::-ms-fill-lower {background:transparent;border:0 none;}
input[type=range]::-ms-fill-upper {background:transparent;border:0 none;}
input[type=range]::-ms-tooltip { display: none;}


.form-control:focus {
    color: #495057;
    background-color: transparent;
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}