/******* range slider*****************/

 

:root {
    --yellow: #ffd049;
    --light-yellow: #fdf2d2;
    --orange: #00b7a9;
    --light-gray: #e3e4e8;
    --gray: #71738b;
    --light-blue: #7a7c93;
    --blue: #34385a;
    --RK: #ed2136;

    --slider-handle-size: 25px;
    --slider-handle-border-radius: 2px;
    --slider-handle-margin-top: -4px;
    --slider-track-height: 6px;
    --slider-track-border-radius: 4px;
}

 


.tick-slider-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.tick-slider-header>h5 {
    margin: 0;

    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--gray);
}

.tick-slider {
    position: relative;

    width: 100%;
}

.tick-slider-value-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-family: "Hind Madurai", sans-serif;
    font-size: 18px;
    color: var(--gray);
}

.tick-slider-value {
    position: absolute;
    top: -8px;
font-size: 10px;
width: 105px;
    font-weight: bold;

    color: var(--blue);

    border-radius: var(--slider-handle-border-radius);
}

.tick-slider-value>div {
    animation: bulge 0.3s ease-out;
}

.tick-slider-background,
.tick-slider-progress,
.tick-slider-tick-container {
    position: absolute;
    bottom: 1px;
    left: 0;
    height: var(--slider-track-height);
    pointer-events: none;
    border-radius: var(--slider-track-border-radius);
    z-index: -1;
}

.tick-slider-background {
    width: 100%;
     background:linear-gradient(45deg,#36D1DC,#5B86E5);
	 
	 
	 background: #36D1DC;
    
    height: 7px;
    border-radius: 7px;
    box-shadow: inset 0px 4px 6px -2px rgb(0 0 0 / 50%);
    outline: none;
    float: left;
    -webkit-appearance: none;
    
}

.tick-slider-progress {
    /*background-color: var(--yellow);*/
	/*background-color: #e8e8e8;*/
}

.tick-slider-tick-container {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 calc(var(--slider-handle-size) / 2);
}

.tick-slider-tick {
    width: 2px;
    height: 2px;

    border-radius: 50%;

    background-color: white;
}

.tick-slider-label {
    opacity: 0.85;
    transition: opacity 0.1s ease;
}

.tick-slider-label.hidden {
    opacity: 0;
}

@keyframes bulge {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/*

    REMOVE SLIDER STYLE DEFAULTS

*/
input[type="range"] {
    -webkit-appearance: none;

    width: 100%;
    /*height: 100%;*/
	height: 18px;
    background: transparent;
    outline: none;

    margin: -7px 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;

    border: none;
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"]::-moz-focus-outer {
    border: 0;
}

/*

    HANDLE

*/
.rangeTypeCss::-webkit-slider-thumb {
    -webkit-appearance: none;

    width: var(--slider-handle-size);
    height: var(--slider-handle-size);

    background: linear-gradient(45deg,#00bea3,#006eee);

    border-radius: var(--slider-handle-border-radius);

    cursor: pointer;

    margin-top: var(--slider-handle-margin-top);
  
    -webkit-transform: scale(1);
    transform: scale(1);

    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rangeTypeCssSelected::-webkit-slider-thumb {
    -webkit-appearance: none;

    width: var(--slider-handle-size);
    height: var(--slider-handle-size);

     background: #00bea4;/*linear-gradient(45deg,#006eee,#00bea3);*/
	 transform:rotate(45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);

    border-radius: var(--slider-handle-border-radius);

    cursor: pointer;

    margin-top: var(--slider-handle-margin-top);

    -webkit-transform: scale(1);
    transform: scale(1);

    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rangeTypeCssSelected::-moz-slider-thumb {
    -webkit-appearance: none;

    width: var(--slider-handle-size);
    height: var(--slider-handle-size);

   background: #00bea4;/*linear-gradient(45deg,#006eee,#00bea3);*/
   
  
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);

    border-radius: var(--slider-handle-border-radius);

    cursor: pointer;

    margin-top: var(--slider-handle-margin-top);

    -webkit-transform: scale(1);
    transform: scale(1);

    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
    /*transform: scale(1.2);*/
}

input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;

    width: var(--slider-handle-size);
    height: var(--slider-handle-size);

    background: linear-gradient(45deg,#00bea3,#006eee);

    border: none;
    border-radius: var(--slider-handle-border-radius);

    cursor: pointer;

    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus::-moz-range-thumb {
    transform: scale(1.2);
}

/*

    TRACK

*/

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--slider-track-height);

    cursor: pointer;

    background: none;

    border-radius: var(--slider-track-border-radius);
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: var(--slider-track-height);

    cursor: pointer;

    background: none;

    border-radius: var(--slider-track-border-radius);
}

input[type="range"]:focus::-webkit-slider-runnable-track {
    background: none;
}
input[type="range"]:active::-webkit-slider-runnable-track {
    background: none;
}


 input[type="range"]::-moz-range-thumb:hover,
 input[type="range"]:active::-moz-range-thumb{
    transform:rotate(45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

 input[type="range"]::-webkit-slider-thumb:hover,
 input[type="range"]:active::-webkit-slider-thumb{
    transform:rotate(45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/******* end range slider*************/