.op3-element[data-op3-element-type="switcher"] {
    max-width: 100%;

    .header {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .slider {
            position: relative;
            cursor: pointer;
            height: 34px;
            width: 100px;
            transition: background-color 0.4s;

            .box {
                display: flex;
                position: absolute;
                height: 26px;
                width: 26px;
                background-color: #F3F4F6;
                left: 0;
                transform: translateY(-50%);
                top: 50%;
                transition: left 0.4s ease;
                box-shadow: 0px 0px 10px -3px #000000;
            }

            &.active  {
                background-color: inherit !important;

                .box {
                    left: calc(100% - 26px);
                }
            }
        }

        p {
            margin-bottom: 0;
        }
    }

    .op3-element[data-op3-element-type="switchercontentitem"] {
        display: none;

        &.active {
            display: flex;
        }
    }
}