.fpd-container {

    input.fpd-switch {

        appearance: none;
        background-color: var(--fpd-light-grey-color) !important;
        border-radius: 70px;
        border-style: none;
        height: 20px;
        margin: 0;
        position: relative;
        width: 35px;
        box-shadow: none;
        cursor: pointer;

        &:before {
            bottom: -6px;
            content: "";
            left: -6px;
            position: absolute;
            right: -6px;
            top: -6px;
        }

        &:after {
            background-color: #fff;
            border-radius: 50%;
            content: "";
            height: 14px;
            left: 3px;
            position: absolute;
            top: 3px;
            width: 14px;
            transition: all 100ms ease-out;
        }

        &:hover {
            opacity: 0.9;
            transition-duration: 0s;
        }

        &:checked {

            background-color: var(--fpd-secondary-color) !important;

            &:after {
                background-color: #fff;
                left: 18px;
            }
        }

    }

    .fpd-switch-wrapper {

        display: flex;
        justify-content: center;

        label {
            margin-left: 10px;
        }

    }

}