
// Lists
ul {
    &.list {
        li {
        }
        &.icons li {
            a {
                color: @body_color;
            }

            i,
            a:hover {
                color: @skinColor;
            }
        }
    }
}

.list {
    &.list-icons {
        li .fa {
            color: @color-primary;
            border-color: @color-primary;
        }
        &.list-icons-style-3 {
            li .fa {
                background-color: @color-primary;
            }
        }
    }
    &.list-ordened {
        li {
            &:before {
                color: @color-primary;
                border-color: @color-primary;
            }
        }
        &.list-ordened-style-3 {
            li {
                &:before {
                    background-color: @color-primary;
                }
            }
        }
    }
}

html {
    .for(@colors-list); .-each(@value) {
        @name:  extract(@value, 1);
        @color:  extract(@value, 2);
        @color-inverse:  extract(@value, 3);

        .list-@{name} {
            &.list-icons {
                li .fa {
                    color: @color;
                    border-color: @color;
                }
                &.list-icons-style-3 {
                    li .fa {
                        background-color: @color;
                        color: @color-inverse;
                    }
                }
            }
            &.list-ordened {
                li {
                    &:before {
                        color: @color;
                    }
                }
                &.list-ordened-style-3 {
                    li {
                        &:before {
                            background-color: @color-primary;
                            color: @color-inverse;
                        }
                    }
                }
            }
        }
    }
}

ul[class^="wsp-"] {
    li {
        &:before {
            color: @skinColor;
        }
    }
}

.fontawesome-icon-list,
.sample-icon-list {
    > div {
        &:hover {
            color: @skinColor;
            .text-muted {
                color: @skinColor;
            }
        }
    }
}

// Nav
ul.nav-pills > li.active > a {
    background-color: @skinColor;
    &:hover, &:focus {
        background-color: @skinColor;
    }
}

// Labels
html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    ul.nav-pills-@{name} {
        a {
            color: @color;
            &:hover {
                color: lighten(@color, 5%);
            }
            &:focus {
                color: lighten(@color, 5%);
            }
            &:active {
                color: darken(@color, 5%);
            }
        }
        > li.active > a {
            background-color: @color;
            &:hover, &:focus {
                background-color: @color;
            }
        }
    }
}
}

// Panel
.panel-group {
    .panel-heading a {
        //color: @skinColor;
        color: #000;
        padding: 0px 15px;
    }
}

html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .panel-group {
        &.panel-group-@{name} {
            .panel-heading {
                background-color: @color !important;
                a {
                    color: @color-inverse;
                }
            }
        }
    }
}
}

// Toggle
section.toggle {
    label {
        color: @skinColor;
        .toggleLaberlBorder() when (@rtl = 1) {
            border-right-color: @skinColor;
        }
        .toggleLaberlBorder() when not (@rtl = 1) {
            border-left-color: @skinColor;
        }
        .toggleLaberlBorder;
    }
    &.active > label {
        background-color: @skinColor;
        border-color: @skinColor;
        color: @color-primary-inverse;
    }

    .toggle-simple & {
        > label {
            &:after {
                background-color: @skinColor;
            }
        }
    }
}

// Toggle
html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .toggle-@{name} {
        .toggle {
            label {
                color: @color;
                border-left-color: @color;
                border-right-color: @color;
            }
            &.active > label {
                background-color: @color;
                border-color: @color;
                color: @color-inverse;
            }
        }
        &.toggle-simple .toggle {
            > label {
                background: transparent;
                color: @h3_color;
            }
            > label:after {
                background-color: @color;
            }
        }
    }
}
}

// Blockquote
html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);

    .blockquote-@{name} {
        border-color: @color !important;
    }
}
}

// Image Zoom
div.wpb_single_image {
    .porto-vc-zoom {
        .zoom-icon {
            background-color: @skinColor;
            &:hover {
                background-color: lighten(@skinColor, 5%);
            }
        }
    }
}

.img-thumbnail,
.thumb-info {
    .zoom,
    .link {
        background-color: @skinColor;
        &:hover {
            background-color: lighten(@skinColor, 5%);
        }
    }
}

// Labels
html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .label-@{name} {
        background-color: @color;
        border-color: @color;
    }
}
}

// Alerts
html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .alert-@{name} {
        background-color: @color;
        border-color: darken(@color, 3%);
        color: @color-inverse;

        .alert-link {
            color: @color-inverse;
        }
    }
}
}

// Circle Slider
.porto-concept strong {
    color: @skinColor;
    font-family: @alt_font_family;
}
.fc-slideshow nav .fc-left i,
.fc-slideshow nav .fc-right i {
    color: @skinColor;
}

// Circular Bar
.circular-bar.only-icon .fa {
    color: @skinColor;
}

// Sections
html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    section.section-@{name},
    .vc_row.section-@{name},
    .vc_column_container.section-@{name}{
        background-color: @color !important;
        border-color: darken(@color, 5%) !important;
        color: @color-inverse;

        h1, h2, h3, h4, h5, h6 {
            color: @color-inverse;
        }

        p {
            color: darken(@color-inverse, 10%);
        }
    }

    section.section-@{name}-scale-2,
    .vc_row.section-@{name}-scale-2,
    .vc_column_container.section-@{name}-scale-2 {
        background-color: darken(@color, 10%) !important;
        border-color: darken(@color, 15%) !important;

        .sort-source {
            &.sort-source-style-2 {
                > li {
                    > a {
                        &, &:focus, &:hover {
                            color: @color-inverse;
                        }
                    }
                    &.active {
                        > a {
                            &:after {
                                border-top-color: darken(@color, 10%);
                            }
                        }
                    }
                }
            }
        }
    }
}
}

.sectionScaleColor(@a) when not (@a = 1) {
    html {
        .for(@color-background-scale); .-each(@value) {
        @index:  extract(@value, 1);
        @color:  extract(@value, 2);

        section.section-default-scale-@{index},
        .vc_row.section-default-scale-@{index},
        .vc_column_container.section-default-scale-@{index}{
            background-color: @color !important;
            border-top-color: darken(@color, 3%) !important;
        }
    }
    }
}
.sectionScaleColor(@a) when (@a = 1) {
    html {
        .for(@color-background-scale-dark); .-each(@value) {
        @index:  extract(@value, 1);
        @color:  extract(@value, 2);

        section.section-default-scale-@{index},
        .vc_row.section-default-scale-@{index},
        .vc_column_container.section-default-scale-@{index}{
            background-color: @color !important;
            border-top-color: darken(@color, 3%) !important;
        }
    }
    }
}

.sectionScaleColor(@dark);

// Popover
html {
    .for(@colors-list); .-each(@value) {
    @index:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .popover-@{index}{
        .popover-title {
            background-color: @color !important;
            color: @color-inverse !important;
        }
    }
}
}

// Dividers
html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .divider {
        &.divider-@{name} {
            i {
                color: @color;
            }
            &.divider-small {
                hr {
                    background: @color;
                }
            }
        }
    }
}
}

html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .divider {
        &.divider-style-2 {
            &.divider-@{name} {
                i {
                    background: @color;
                    color: @color-inverse;
                }
            }
        }
    }
}
}

html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .divider {
        &.divider-style-3 {
            &.divider-@{name} {
                i {
                    border-color: @color;
                }
            }
        }
    }
}
}

// Pricing Tables
.pricing-table {
    li {
        color: @body_color;
    }
    h3 {
        .desc,
        span {
            color: @body_color;
        }
    }
    .plan {
        color: @body_color;
    }

    .most-popular {
        h3 {
            .gradient(@color-primary, darken(@color-primary, 15%), @gradient);
            color: @color-primary-inverse;
            .desc {
                color: @color-primary-inverse;
            }
        }
    }

    &.pricing-table-flat {
        .plan {
            h3 {
                background-color: @color-primary;
                color: @color-primary-inverse;
                .desc {
                    color: @color-primary-inverse;
                }
                span {
                    font-family: @body_font_family;
                    background: @color-primary;
                    color: @color-primary-inverse;
                }
            }
        }
    }

    .pricingTablesStyles(@a) when not (@a = 1) {
        .most-popular {
            border-color: @color-primary;
        }
    }
    .pricingTablesStyles(@a) when (@a = 1) {

    }

    .pricingTablesStyles(@dark);
}

html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .pricing-table {
        .plan-@{name} {
            h3 {
                .gradient(@color, darken(@color, 15%), @gradient);
                color: @color-inverse;
                .desc {
                    color: @color-inverse;
                }
            }
        }

        &.pricing-table-flat {
            .plan-@{name} {
                h3 {
                    background-color: @color;
                    color: @color-inverse;
                    .desc {
                        color: @color-inverse;
                    }
                    span {
                        background: @color;
                        color: @color-inverse;
                    }
                }
            }
        }
    }
}
}

.pricingTablesColorStyles(@a) when not (@a = 1) {
    html {
        .for(@colors-list); .-each(@value) {
        @name:  extract(@value, 1);
        @color:  extract(@value, 2);
        @color-inverse:  extract(@value, 3);

        .pricing-table {
            .plan-@{name} {
                border-color: @color;
            }
        }
    }
    }
}
.pricingTablesColorStyles(@a) when (@a = 1) {

}

.pricingTablesColorStyles(@dark);

// Home Partials
.home-intro {
    .get-started {
        a:not(.btn) {
            color: @body_color;
        }
    }
    p {
        em {
            font-family: @alt_font_family;
            color: @skinColor;
        }
    }
    &.light {
        p {
            color: @skinColor;
        }
    }
}

// Home Intro
html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .home-intro-@{name} {
        background: @color;
        color: @color-inverse;
        .get-started {
            a:not(.btn) {
                color: @color-inverse;
            }
        }
        p {
            &,
            em {
                color: @color-inverse;
            }
        }
        &.light {
            p {
                color: @color-inverse;
            }
        }
    }

}
}

// Background Colors
html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);

    .background-color-@{name} {
        background-color: @color !important;
    }
}
}

// Page 404
.page-not-found {
    h4 {
        color: @body_color;
    }
}

//Porto Schedule Timeline
.timeline-balloon {
	.balloon-time {
		.time-dot {
			&::before {
				border-color: @color-primary;
			}
			&::after {
				background-color: @color-primary;
			}
		}
	}
}

//Porto Experience Timeline
section.exp-timeline {
	.timeline-bar {
		background: @color-dark;
	}
	.timeline-box.right {
		&:before {
			background: @color-dark !important;
			box-shadow: 0 0 0 3px #ecf1f7, 0 0 0 6px @color-dark !important;
		}
		&:after {
			background: @color-primary;
		}
	}
}

// Porto Floating Menu
.floating-menu {
	.floating-menu-btn-collapse-nav {
		background: @color-primary;
	}
}
@media (min-width:992px) {
	.floating-menu .floating-menu-nav-main nav > ul > li > a:after {
		background: @color-primary; 
	}
}