.form-control {
    
    display: grid;
    gap: 1rem;
    padding: 1rem;
    grid-template-columns: 1fr;
    & .form-container {
        display: grid;
        gap: .2rem;
        grid-template-columns: 1fr;
    }
    & .form-flex-control {
        display: flex;
        gap: 1rem;
        flex-wrap: nowrap;
        align-items: stretch;
        border: 2px solid var(--color-medium);
        border-radius: var(--border-radius);
        & span {
            justify-content: center;
            display: flex;
            flex: 0 0 32px;
            width: 32px;
            min-width: 64px;
            padding: .5rem 1rem;
            white-space: nowrap;
            background-color: var(--color-average);
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
            color: var(--primary-color);
            &.sicon span {
                background-color: var(--primary-color);

            }
        }
        & input {
            flex: 1;
            min-width: 0;
            width: 100%;
            padding: .5rem 1rem;
            border: none;
            outline: none;
            background-color: transparent;
            color: #333333;
        }

    }
    & .btn,
    & button {
        text-align: center;
        padding: .5rem 1rem;
        background-color: var(--primary-color);
        border: none;
        color: white;
        font-weight: 500;
        border-radius: var(--border-radius);
        cursor: pointer;
        transition: background-color 0.3s;
        &.cta {
            background-color: var(--color-hard);
        }
        &:hover {
            background-color: var(--color-harder);
        }
    }

    /* style for radio check */
    & .radio-check-container {
        & label {
            display: flex;
            align-items: center;
            gap: .5rem;
            cursor: pointer;
            &.flex-center {
                justify-content: center;
            }
            & input[type="checkbox"] {
                display: none;
                &:checked + span {
                    position: relative;
                    background-color: var(--color-harder);
                }
                &:checked + span::after {
                    content: "";
                    position: absolute;
                    width: 6px;
                    height: 6px;
                    background-color: #fff;
                    border-radius: 50%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            & input[type="radio"] {
                display: none;
                &:checked + span {
                    background-color: var(--color-harder);
                }
            }
            & span {
                width: 20px;
                height: 20px;
                border: 2px solid var(--color-medium);
                border-radius: 50%;
                background-color: var(--color-average);
                display: inline-block;
                transition: background-color 0.3s;
            }
        }
    }
    

}



.slidebox-flex {
    display: grid;
    width: 100%;
    gap: 10px;
    padding: 1rem;
    grid-template-columns: 1fr;
    position: relative;
}

.slider-wrapper {
    position: relative;
    width: 100%;
    padding: 1rem;
    &:after {
        z-index: 0;
        background-color: var(--secondary-color);
        inset: 0;
        position: absolute;
        content: "";
        border-radius: 8px;
        border:1px solid #ffffff22;
        opacity: 0.4;
        transition: opacity 0.6s cubic-bezier(0.3, 0, 0.8, 1);
    }
    &:hover:after {
        border:1px solid #ffffff66;
        opacity: .6;
    }
    & label {
        position: relative;
        z-index: 1;
        display:flex;
        color: white;
        cursor: pointer;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        & > b:first-child {
            margin-right:auto;
        }
        & > :not(:first-child) {
            margin-left: 0.25rem;
        }
    }
    & .slider-description {
        font-size: 0.8rem;
        color: #cccccc;
        position: relative;
        z-index: 1;
    }
}


.slider-container {
    z-index: 1;
    --slider-size: 20px;
    --slider-color: var(--color-hard);
    --slider-bg: #fff;
    --slider-handle-dot-color: #fff;
    height: var(--slider-size);
    background: var(--slider-bg);
    position: relative;
    cursor: pointer;
    margin:.5rem auto;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: calc(var(--slider-size) / 2 + 2px);

    & input[type="text"] {
        margin-top: 2rem;
    }

    & .minmaxvalueindicator {
        position: absolute;
        top: 0;
        bottom: 0;
        background: var(--slider-color);
        z-index: 1;
        border-radius: calc(var(--slider-size) / 2 + 2px);
    }

    & .handlemax,
      .handlemin {
        position: absolute;
        top: 0;
        opacity: .5;
        bottom: 0;
        width: 30px;
        border-radius: calc(var(--slider-size) / 2 + 2px);
        z-index: 2;
        translate:-30px;
    }
    & .handlemax:hover,
      .handlemin:hover {
        opacity: 1;
    }


    & .handlemax::after,
      .handlemin::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate( calc(-50% - 10px ), -50% ) scale(0.5);
        width: 10px;
        height: 10px;
        background-color: var(--slider-handle-dot-color);
        opacity: 0.3;
        border-radius: 50%;
        transition: all 0.1s ease-in-out;
    }
    .handlemin::after {
        transform: translate( calc(-50% + 10px ), -50% ) scale(0.5);
    }
    & .handlemin:hover::after,
    & .handlemax:hover::after {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    & .handlemin {
        translate: 0;
    }

    & .minmaxvalueindicator::after,
      .minmaxvalueindicator::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 30px;
        transform: translateY(-50%);
        width: calc(var(--slider-size) / 2);
        height: calc(var(--slider-size) / 2);
        background: var(--slider-handle-dot-color);
        border-radius: 50%;
        opacity: .0;
        transition: left 0.4s ease-in-out, right 0.4s ease-in-out, opacity 0.2s ease-in-out;
    }

    & .minmaxvalueindicator::after {
        right: 30px;
        left: auto;
    }

    & .slider-wrapper:hover .minmaxvalueindicator::before {
        opacity: 1;
        left: 10px;
    }

    & .slider-wrapper:hover .minmaxvalueindicator::after {
      opacity: 1;
      right: 10px;
    }

    & .handle:first-child {
      left: 0;
    }
}












.rangeContainer {
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    grid-template-areas: "header header header" "min value max" "range range range";
    margin-bottom:1rem;
    padding:0 1rem;

    & .rangeLabel {
      grid-area:header;
      text-align:center;
      font-weight:600;
    }

    & .filterMin {
      grid-area:min;
      text-align:center;
    }

    & .filterMax {
      grid-area:max;
      text-align:center;
    }

    & .filterValue {
      grid-area:value;
      text-align:center;
    }

    & .rangeSlider {
      display:flex;
      align-items:center;
      justify-content:center;
      grid-area:range;
      padding:0 1rem;
      & input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 10px;
            border-radius: 5px;
            background: #ccc;
            outline: none;
            opacity: 0.7;
            -webkit-transition: .2s;
            transition: opacity .2s;
        }
    }
}







.checkbox-flex {
    display: grid;
    width: 100%;
    gap: 10px;
    padding: 1rem;
    grid-template-columns: 1fr;
}

.checkbox-container {
    position: relative;
    padding-left: 1rem;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: 0 0 0 1px var(--color-subtle);
    &:hover {
        box-shadow: 0 0 0 2px var(--color-hard);
    }
    &:hover:after {
        border:1px solid #ffffff66;
        opacity: .6;
    }
    & label {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        padding: .5rem;
        width: 100%;
        cursor: pointer;
        width: 100%;
        & span.slider {
            margin-right:1rem;
            transition: background 0.3s;
        }
        & input[type="radio"],
        & input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            &:checked ~ span.slider {
                background-color: var(--color-hard);
            }
            &:checked ~ span.slider span:nth-child(1) {
                transform: translateX(20px);
                background-color: #ffffff;
            }
            &:checked ~ div {
                opacity: 1;
            }
        }
        & > span.slider {
            width: 40px;
            height: 20px;
            background-color: #555555;
            border-radius: 34px;
            & span:nth-child(1) {
                display: block;
                width: 16px;
                height: 16px;
                background-color: #00000066;
                border-radius: 50%;
                position: relative;
                top: 2px;
                left: 2px;
                transition: all 0.3s;
            }
        }
        & div  {
            opacity: 0.5;
            flex-grow: 1;
            color: white;
            transition: opacity 0.3s;
            & span {
                display:block;
            }
            & span:nth-child(1) {
                font-weight: bold;
            }
            & span:nth-child(2) {
                font-size: 0.8rem;
                color: #cccccc;
            }
        }
    }
}