html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* BASED ON https://codepen.io/scottbram/pen/PoGpyKa START */

.range-slider {
    --ColorPrimaryLt: #FF5627; 
    --range-slider-common-height: 1rem;
    --range-slider-handle-width: 1rem;
    --range-slider-handle-height: 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
    width: 99%;
    height: 100%;
}

    .range-slider > div {
        position: absolute;
        display: flex;
        align-items: center;
        left: 13px;
        right: 15px;
        height: var(--range-slider-common-height);
    }

        .range-slider > div > .range-slider-val-left,
        .range-slider > div > .range-slider-val-right,
        .range-slider > div > .range-slider-val-range {
            height: 10px;
        }

        .range-slider > div > .range-slider-val-left {
            position: absolute;
            left: 0;
            border-radius: 10px;
            background-color: #ccc;
            margin: 0 7px;
        }

        .range-slider > div > .range-slider-val-right {
            position: absolute;
            right: 0;
            margin: 0 7px;
            border-radius: 10px;
            background-color: #ccc;
        }

        .range-slider > div > .range-slider-val-range {
            position: absolute;
            left: 0;
            top: -1px;
            height: 16px;
            border-radius: 14px;
            background-color: var(--ColorPrimaryLt);
        }

        .range-slider > div > .range-slider-handle {
            z-index: 1;
            position: absolute;
            top: -5px;
            margin-left: -11px;
            width: var(--range-slider-handle-width);
            height: var(--range-slider-handle-height);
            border-radius: 25%;
            background-color: #fff;
            text-align: left;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
            outline: none;
            cursor: pointer;
        }

div.range-slider > input[type="range"]::-ms-thumb {
    width: var(--range-slider-handle-width);
    height: var(--range-slider-handle-height);
    border: 0 none;
    border-radius: 0px;
    background: red;
    pointer-events: all;
}

div.range-slider > input[type="range"]::-moz-range-thumb {
    width: var(--range-slider-handle-width);
    height: var(--range-slider-handle-height);
    border: 0 none;
    border-radius: 0px;
    background: red;
    pointer-events: all;
}

div.range-slider > input[type="range"]::-webkit-slider-thumb {
    width: var(--range-slider-handle-width);
    height: var(--range-slider-handle-height);
    border: 0 none;
    border-radius: 0px;
    background: red;
    pointer-events: all;
    -webkit-appearance: none;
}

div.range-slider > input[type="range"]::-ms-fill-lower {
    background: transparent;
    border: 0 none;
}

div.range-slider > input[type="range"]::-ms-fill-upper {
    background: transparent;
    border: 0 none;
}

.range-slider > input[type="range"] {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: var(--range-slider-common-height);
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    pointer-events: none;
    -webkit-appearance: none;
}

div.range-slider > input[type="range"]::-ms-track {
    background: transparent;
    color: transparent;
    -webkit-appearance: none;
}

div.range-slider > input[type="range"]::-moz-range-track {
    background: transparent;
    color: transparent;
    -moz-appearance: none;
}

div.range-slider > input[type="range"]:focus::-webkit-slider-runnable-track {
    background: transparent;
    border: transparent;
}

div.range-slider > input[type="range"]:focus {
    outline: none;
}

div.range-slider > input[type="range"]::-ms-tooltip {
    display: none;
}

.range-slider > div > .range-slider-tooltip {
    z-index: 2;
    position: absolute;
    top: -42px;
    margin-left: -12px;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    background-color: var(--ColorPrimaryLt);
    color: #fff;
    text-align: center;
    opacity: 0;
}

    .range-slider > div > .range-slider-tooltip:after {
        content: "";
        position: absolute;
        left: 0;
        top: 19px;
        border-left: 14px solid transparent;
        border-right: 14px solid transparent;
        border-top-width: 16px;
        border-top-style: solid;
        border-top-color: var(--ColorPrimaryLt);
        border-radius: 16px;
    }

    .range-slider > div > .range-slider-tooltip > span {
        font-size: 12px;
        font-weight: 700;
        line-height: 28px;
    }

.range-slider:hover > div > .range-slider-tooltip {
    opacity: 1;
}
/* BASED ON https://codepen.io/scottbram/pen/PoGpyKa END */