lementskit-minutes .elementskit-timer-content > span.elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
					{{WRAPPER}} .elementskit-flip-clock .elementskit-mins .elementskit-count'	=> 'margin-bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'ekit_countdown_timer_minutes_label_title',
            [
                'label' => esc_html__( 'Label', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_control(
            'ekit_countdown_timer_minutes_label_color', [
                'label'		 =>esc_html__( 'Color', 'elementskit-lite' ),
                'type'		 => Controls_Manager::COLOR,
                'selectors'	 => [
                    '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-minutes .elementskit-timer-content > span.elementskit-timer-title,
                    {{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
                    {{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
                    {{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
                    {{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
					{{WRAPPER}} .elementskit-flip-clock .elementskit-mins .elementskit-label' => 'color: {{VALUE}};'
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(), [
                'name'		 => 'ekit_countdown_timer_minutes_label_typography_group',
                'selector'	 => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-minutes .elementskit-timer-content > span.elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-flip-clock .elementskit-mins .elementskit-label',
                'fields_options' => [
                    // Inner control name
                    'font_weight' => [
                        // Inner control settings
							'default' => '400',
                    ],
                    'font_family' => [
                        'default' => 'Lato',
                    ],
                    'font_size' => [ 'default' => [ 'unit' => 'px', 'size' => 14 ] ]
                ],
                'seperator' => 'before'
            ]
        );

		$this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'ekit_countdown_timer_minutes_label_background_group',
                'label' => esc_html__( 'Background', 'elementskit-lite' ),
                'types' => [ 'classic', 'gradient' ],
                'selector' => '{{WRAPPER}} .elementskit-flip-clock .elementskit-mins .elementskit-label,
								{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title
								',
                'seperator' => 'before',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'ekit_countdown_timer_minutes_label_border_color',
                'label' => esc_html__( 'Border', 'elementskit-lite' ),
                'selector' => ' {{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-minutes .elementskit-timer-content > span.elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-flip-clock .elementskit-mins .elementskit-label
								',
            ]
        );
        $this->add_responsive_control(
            'ekit_countdown_timer_minutes_label_border_radious_open',
            [
                'label' => esc_html__( 'Border Radius', 'elementskit-lite' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
								'{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-minutes .elementskit-timer-content > span.elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-flip-clock .elementskit-mins .elementskit-label
					' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'ekit_countdown_timer_minutes_label_box_shadow_group',
                'label' => esc_html__( 'Box Shadow', 'elementskit-lite' ),
                'selector' => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-minutes .elementskit-timer-content > span.elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-flip-clock .elementskit-mins .elementskit-label
				',
            ]
        );

		$this->add_responsive_control(
            'ekit_countdown_timer_minutes_lebel_margin',
            [
                'label' => esc_html__( 'Margin', 'elementskit-lite' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],

                'selectors' => [
								'{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-minutes .elementskit-timer-content > span.elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-minutes .elementskit-timer-title,
								{{WRAPPER}} .elementskit-flip-clock .elementskit-mins .elementskit-label
					' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );


// start genaral styles
        $this->add_control(
            'ekit_countdown_timer_minutes_heading_general',
            [
                'label' => esc_html__( 'General', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'ekit_countdown_timer_minutes_background',
                'label' => esc_html__( 'Background', 'elementskit-lite' ),
                'types' => [ 'classic', 'gradient' ],

				'selector' => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-minutes .elementskit-inner-container,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
								{{WRAPPER}} .elementskit-flip-clock  > .elementskit-mins .elementskit-count ',
            ]
        );

       $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'ekit_countdown_timer_minutes_border_color_group',
                'label' => esc_html__( 'Border', 'elementskit-lite' ),
                'selector' => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-minutes .elementskit-inner-container,
				{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
				{{WRAPPER}} .elementskit-flip-clock .elementskit-mins ',
            ]
        );

		$this->add_responsive_control(
            'ekit_countdown_timer_minutes_border_radious_open',
            [
                'label' => esc_html__( 'Border Radius', 'elementskit-lite' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-minutes .elementskit-inner-container,
					{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
					{{WRAPPER}} .elementskit-flip-clock .elementskit-mins ' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
       $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'ekit_countdown_timer_minutes_box_shadow_group',
                'label' => esc_html__( 'Box Shadow', 'elementskit-lite' ),
                'selector' => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-minutes .elementskit-inner-container,
				{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-minutes .elementskit-timer-count,
				{{WRAPPER}} .elementskit-flip-clock .elementskit-mins ',
            ]
        );


        $this->end_controls_section();

		// end minutes style section


        //Seconds Style Section

        $this->start_controls_section(
            'ekit_countdown_timer_seconds_style', [
                'label'	 =>esc_html__( 'Seconds', 'elementskit-lite' ),
                'tab'	 => Controls_Manager::TAB_STYLE,
            ]
        );

		// Start Digits for Days
        $this->add_control(
            'ekit_countdown_timer_seconds_heading_digits',
            [
                'label' => esc_html__( 'Digits', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
            ]
        );
		// Set Digits color for Days
        $this->add_control(
            'ekit_countdown_timer_seconds_digits_color', [
                'label'		 =>esc_html__( 'Color', 'elementskit-lite' ),
                'type'		 => Controls_Manager::COLOR,
                'selectors'	 => [
                    '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-timer-content > span.elementskit-timer-count,
                    {{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
                    {{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
                    {{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
                    {{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-flip-clock .elementskit-secs .elementskit-count' => 'color: {{VALUE}};'
                ],
            ]
        );
		// Set Digits typeography for Days
        $this->add_group_control(
            Group_Control_Typography::get_type(), [
                'name'		 => 'ekit_countdown_timer_seconds_digits_typography_group',
                'selector'	 => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-timer-content > span.elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-flip-clock .elementskit-secs .elementskit-count',
            ]
        );

		// Set Digits margin for Days
        $this->add_responsive_control(
            'ekit_countdown_timer_seconds_digits_margin_bottom', [
                'label'			 =>esc_html__( 'Margin Bottom', 'elementskit-lite' ),
                'type'			 => Controls_Manager::SLIDER,
                'default'		 => [
                    'size' => '',
                ],
                'range'			 => [
                    'px' => [
                        'min'	 => -30,
                        'step'	 => 1,
                    ],
                ],
                'size_units'	 => ['px'],
                'selectors'		 => [
                    '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-timer-content > span.elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-flip-clock .elementskit-secs .elementskit-count'	=> 'margin-bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'ekit_countdown_timer_seconds_label_title',
            [
                'label' => esc_html__( 'Label', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_control(
            'ekit_countdown_timer_seconds_label_color', [
                'label'		 =>esc_html__( 'Color', 'elementskit-lite' ),
                'type'		 => Controls_Manager::COLOR,
                'selectors'	 => [
                    '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-timer-content > span.elementskit-timer-title,
                    {{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
                    {{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
                    {{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
                    {{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
					{{WRAPPER}} .elementskit-flip-clock .elementskit-secs .elementskit-label' => 'color: {{VALUE}};'
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(), [
                'name'		 => 'ekit_countdown_timer_seconds_label_typography_group',
                'selector'	 => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-timer-content > span.elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-flip-clock .elementskit-secs .elementskit-label',
                'fields_options' => [
                    // Inner control name
                    'font_weight' => [
                        // Inner control settings
							'default' => '400',
                    ],
                    'font_family' => [
                        'default' => 'Lato',
                    ],
                    'font_size' => [ 'default' => [ 'unit' => 'px', 'size' => 14 ] ]
                ],
                'seperator' => 'before'
            ]
        );

		$this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'ekit_countdown_timer_seconds_label_background_group',
                'label' => esc_html__( 'Background', 'elementskit-lite' ),
                'types' => [ 'classic', 'gradient' ],
                'selector' => '{{WRAPPER}} .elementskit-flip-clock .elementskit-secs .elementskit-label,
								{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title
								',
                'seperator' => 'before',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'ekit_countdown_timer_seconds_label_border_color',
                'label' => esc_html__( 'Border', 'elementskit-lite' ),
                'selector' => ' {{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-timer-content > span.elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-flip-clock .elementskit-secs .elementskit-label
								',
            ]
        );
        $this->add_responsive_control(
            'ekit_countdown_timer_seconds_label_border_radious_open',
            [
                'label' => esc_html__( 'Border Radius', 'elementskit-lite' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
								'{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-timer-content > span.elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-flip-clock .elementskit-secs .elementskit-label
					' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'ekit_countdown_timer_seconds_label_box_shadow_group',
                'label' => esc_html__( 'Box Shadow', 'elementskit-lite' ),
                'selector' => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-timer-content > span.elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-flip-clock .elementskit-secs .elementskit-label
				',
            ]
        );

		$this->add_responsive_control(
            'ekit_countdown_timer_seconds_lebel_margin',
            [
                'label' => esc_html__( 'Margin', 'elementskit-lite' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],

                'selectors' => [
								'{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-timer-content > span.elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-flip-clock .elementskit-secs .elementskit-label
					' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        // start genaral styles
        $this->add_control(
            'ekit_countdown_timer_seconds_heading_general',
            [
                'label' => esc_html__( 'General', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'ekit_countdown_timer_seconds_background',
                'label' => esc_html__( 'Background', 'elementskit-lite' ),
                'types' => [ 'classic', 'gradient' ],

				'selector' => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-inner-container,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
								{{WRAPPER}} .elementskit-flip-clock  > .elementskit-secs .elementskit-count ',
            ]
        );

       $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'ekit_countdown_timer_seconds_border_color_group',
                'label' => esc_html__( 'Border', 'elementskit-lite' ),
                'selector' => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-inner-container,
				{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-flip-clock .elementskit-secs ',
            ]
        );

		$this->add_responsive_control(
            'ekit_countdown_timer_seconds_border_radious_open',
            [
                'label' => esc_html__( 'Border Radius', 'elementskit-lite' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-inner-container,
					{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-flip-clock .elementskit-secs ' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
       $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'ekit_countdown_timer_seconds_box_shadow_group',
                'label' => esc_html__( 'Box Shadow', 'elementskit-lite' ),
                'selector' => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-inner-container,
				{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-flip-clock .elementskit-secs ',
            ]
        );
        $this->end_controls_section();
		// end seconds style section

        // Expire Actions Style Section
        $this->start_controls_section(
            'ekit_countdown_timer_expired_style', [
                'label'	 =>esc_html__( 'Expire Actions', 'elementskit-lite' ),
                'tab'	 => Controls_Manager::TAB_STYLE,
            ]
        );

        // start Title styles
        $this->add_control(
            'ekit_countdown_timer_expire_actions_heading_title',
            [
                'label' => esc_html__( 'Title', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(), [
                'name'		 => 'ekit_countdown_timer_expire_actions_title_typography_group',
                'selector'	 => '{{WRAPPER}} .ekit-countdown-finish-title',
            ]
        );
        $this->add_control(
            'ekit_countdown_timer_expire_actions_title_color', [
                'label'		 =>esc_html__( 'Color', 'elementskit-lite' ),
                'type'		 => Controls_Manager::COLOR,
                'selectors'	 => [
                    '{{WRAPPER}} .ekit-countdown-finish-title' => 'color: {{VALUE}};'
                ],
            ]
        );

        // start Content styles
        $this->add_control(
            'ekit_countdown_timer_expire_actions_heading_content',
            [
                'label' => esc_html__( 'Content', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(), [
                'name'		 => 'ekit_countdown_timer_expire_actions_content_typography_group',
                'selector'	 => '{{WRAPPER}} .ekit-countdown-finish-content',
            ]
        );
        $this->add_control(
            'ekit_countdown_timer_expire_actions_content_color', [
                'label'		 =>esc_html__( 'Color', 'elementskit-lite' ),
                'type'		 => Controls_Manager::COLOR,
                'selectors'	 => [
                    '{{WRAPPER}} .ekit-countdown-finish-content' => 'color: {{VALUE}};'
                ],
            ]
        );

        // start genaral styles
        $this->add_control(
            'ekit_countdown_timer_expire_actions_heading_general',
            [
                'label' => esc_html__( 'General', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_control(
            'ekit_countdown_timer_expire_actions_background_color', [
                'label'		 =>esc_html__('Background Color', 'elementskit-lite' ),
                'type'		 => Controls_Manager::COLOR,
                'selectors'	 => [
                    '{{WRAPPER}}' => 'background-color: {{VALUE}};'
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'ekit_countdown_timer_expire_actions_border_color',
                'label' => esc_html__( 'Border', 'elementskit-lite' ),
                'selector' => '{{WRAPPER}}'
            ]
        );
        $this->add_responsive_control(
            'ekit_countdown_timer_expire_actions_border_radious_open',
            [
                'label' => esc_html__( 'Border Radius', 'elementskit-lite' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
					'{{WRAPPER}}' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_responsive_control(
            'ekit_countdown_timer_expire_actions_padding',
            [
                'label' => esc_html__( 'Padding', 'elementskit-lite' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                    '{{WRAPPER}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();
		// end Expire Actions style section

        //Section Background
        $this->start_controls_section(
            'ekit_countdown_timer_bg_style', [
                'label'	 =>esc_html__( 'Background', 'elementskit-lite' ),
                'tab'	 => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'ekit_countdown_timer_style' => 'style6'
                ]
            ]
        );

        $this->add_responsive_control(
            'ekit_countdown_timer_content_height', [
                'label'			 =>esc_html__( 'Height', 'elementskit-lite' ),
                'type'			 => Controls_Manager::SLIDER,
                'size_units' => [ 'px', '%' ],
                'range'			 => [
                    'px' => [
                        'min'	 => 0,
                        'step'	 => 1,
                    ],
                ],
                'desktop_default' => [
					'size' => 120,
					'unit' => 'px',
				],
				'tablet_default' => [
					'size' => 100,
					'unit' => 'px',
				],
				'mobile_default' => [
					'size' => 100,
					'unit' => '%',
				],
                'selectors'		 => [
                    '{{WRAPPER}} .elementskit-countdown-container .elementskit-countdown-timer-4'	=> 'height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_countdown_timer_content_line_height', [
                'label'			 =>esc_html__( 'Line Height', 'elementskit-lite' ),
                'type'			 => Controls_Manager::SLIDER,
                'size_units' => [ 'px', '%' ],
                'range'			 => [
                    'px' => [
                        'min'	 => 0,
                        'step'	 => 1,
                    ],
                ],
                'desktop_default' => [
					'size' => 120,
					'unit' => 'px',
				],
				'tablet_default' => [
					'size' => 100,
					'unit' => 'px',
				],
				'mobile_default' => [
					'size' => 100,
					'unit' => '%',
				],
                'selectors'		 => [
                    '{{WRAPPER}} .elementskit-countdown-container .elementskit-countdown-timer-4'	=> 'line-height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'ekit_countdown_timer_outer_section_bg_style',
            [
                'label' => esc_html__( 'Outer Part', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'ekit_countdown_timer_outer_background_group',
                'label' => esc_html__( 'Outer Background', 'elementskit-lite' ),
                'types' => [ 'classic', 'gradient' ],
                'selector' => '{{WRAPPER}} .elementskit-countdown-container .elementskit-countdown-timer-4',
            ]
        );
        $this->add_control(
            'ekit_countdown_timer_inner_section_bg_style',
            [
                'label' => esc_html__( 'Inner Part', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'ekit_countdown_timer_inner_background_group',
                'label' => esc_html__( 'Inner Background', 'elementskit-lite' ),
                'types' => [ 'classic', 'gradient' ],
                'selector' => '{{WRAPPER}} .elementskit-countdown-container',
            ]
        );

        $this->end_controls_section();

        $this->insert_pro_message();
    }

    protected function render( ) {
        echo '<div class="ekit-wid-con" >';
            $this->render_raw();
        echo '</div>';
    }

	protected function render_raw( ) {
		$settings = $this->get_settings_for_display();
		extract($settings);

		if(isset($ekit_countdown_timer_weeks_label)){
			$this->add_render_attribute('ekit_countdown_timer', 'data-date-ekit-week', esc_attr(wp_strip_all_tags($ekit_countdown_timer_weeks_label)));
		}

		if(isset($ekit_countdown_timer_days_label)){
			$this->add_render_attribute('ekit_countdown_timer', 'data-date-ekit-day', esc_attr(wp_strip_all_tags($ekit_countdown_timer_days_label)));
		}

		if(isset($ekit_countdown_timer_hours_label)){
			$this->add_render_attribute('ekit_countdown_timer', 'data-date-ekit-hour', esc_attr(wp_strip_all_tags($ekit_countdown_timer_hours_label)));
		}

		if(isset($ekit_countdown_timer_minutes_hours_label)){
			$this->add_render_attribute('ekit_countdown_timer', 'data-date-ekit-minute', esc_attr(wp_strip_all_tags($ekit_countdown_timer_minutes_hours_label)));
		}

		if(isset($ekit_countdown_timer_seconds_hours_label)){
			$this->add_render_attribute('ekit_countdown_timer', 'data-date-ekit-second', esc_attr(wp_strip_all_tags($ekit_countdown_timer_seconds_hours_label)));
		}

		if(isset($ekit_countdown_timer_due_time)){
			$this->add_render_attribute('ekit_countdown_timer', 'data-ekit-countdown', esc_attr($ekit_countdown_timer_due_time));
		}

		switch ( $ekit_countdown_timer_style ) {
			case 'style1' :
				$this->add_render_attribute('ekit_countdown_timer', 'class', 'elementskit-countdown-timer ekit-countdown text-center');
				break;
			case 'style2' :
				$this->add_render_attribute('ekit_countdown_timer', 'class', 'elementskit-countdown-timer-2 ekit-countdown text-center');
				break;
			case 'style3' :
				$this->add_render_attribute('ekit_countdown_timer', 'class', 'elementskit-flip-clock text-center');
				break;
			case 'style4' :
				$this->add_render_attribute('ekit_countdown_timer', 'class', 'elementskit-countdown-timer-3 ekit-countdown text-center');
				break;
			case 'style5' :
				$this->add_render_attribute('ekit_countdown_timer', 'class', 'elementskit-countdown-timer-3 ekit-countdown elementskit-version-box text-center align-items-end');
				break;
			case 'style6' :
				$this->add_render_attribute('ekit_countdown_timer', 'class', 'elementskit-countdown-timer-4 ekit-countdown');
				break;
		}

        $finish_content = '';
        if ( ! empty( $ekit_countdown_timer_title ) || ! empty( $ekit_countdown_timer_expiry_content ) ) {
            $finish_content = '<div class="ekit-countdown-finish-content" style="display: none;">
                <h3 class="ekit-countdown-finish-title" style="text-align: center;">' . esc_html( $ekit_countdown_timer_title ) . '</h3>
                <p class="ekit-countdown-timer-expiry-content" style="text-align: center;">' . esc_html( $ekit_countdown_timer_expiry_content ) . '</p>
            </div>';
        }

        // Style 6 must wrap the finish content INSIDE the container
        if ( $ekit_countdown_timer_style != 'style6' ) {
            $markup = sprintf(
                '<div %s></div>', 
                $this->get_render_attribute_string('ekit_countdown_timer'),
            );
            echo $finish_content;
        } else {
            $markup = sprintf(
                '<div class="elementskit-countdown-container text-center"><div %s></div>%s</div>',
                $this->get_render_attribute_string('ekit_countdown_timer'),
                $finish_content
            );
        }
        // PHPCS - the variable $markup holds safe data.
        echo $markup; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
	}
}