{% set brandColor = websiteConfiguration.brandColor ?: '#7C70F4' %}
{% if brandColor != '#7C70F4' and brandColor != '#7c70f4' %}
<style>
    .uv-btn-small,
    .uv-btn,
    .uv-btn-large,
    .uv-btn-action,
    .uv-btn-label {
        background: {{ brandColor }};
    }
    .uv-btn-small:hover,
    .uv-btn:hover,
    .uv-btn-large:hover,
    .uv-btn-action:hover,
    .btn:hover,
    .uv-btn-label:hover {
        background: {{ brandColor }};
        opacity: .85;
    }
    .uv-btn-small:active,
    .uv-btn:active,
    .uv-btn-large:active,
    .uv-btn-action:active,
    .btn:active,
    .uv-btn-label:active {
        background: {{ brandColor }};
        opacity: .65;
    }
    .uv-btn-stroke:active {
        border-color: {{ brandColor }};
    }
    .uv-dropdown .uv-dropdown-btn-active {
        border: solid 1px {{ brandColor }};
    }
    .uv-cta-wrapper .uv-cta-lt svg path {
        fill: {{ brandColor }};
    }
    .uv-skin-dark .uv-btn-small,
    .uv-skin-dark .uv-btn,
    .uv-skin-dark .uv-btn-large,
    .uv-skin-dark .uv-btn-action,
    .uv-skin-dark .uv-btn-label {
        background: {{ brandColor }};
        color: #333333 !important;
    }
    .uv-skin-dark .uv-btn-small:hover,
    .uv-skin-dark .uv-btn:hover,
    .uv-skin-dark .uv-btn-large:hover,
    .uv-skin-dark .uv-btn-action:hover,
    .uv-skin-dark .btn:hover,
    .uv-skin-dark .uv-btn-label:hover {
        background: {{ brandColor }};
        opacity: .85;
    }
    .uv-skin-dark .uv-btn-small:active,
    .uv-skin-dark .uv-btn:active,
    .uv-skin-dark .uv-btn-large:active,
    .uv-skin-dark .uv-btn-action:active,
    .uv-skin-dark .btn:active,
    .uv-skin-dark .uv-btn-label:active {
        background: {{ brandColor }};
        opacity: .65;
    }
    .uv-skin-dark .uv-btn-stroke:active {
        border-color: {{ brandColor }};
    }
    .uv-skin-dark .uv-dropdown .uv-dropdown-btn-active {
        border: solid 1px {{ brandColor }};
    }
    .uv-skin-dark .uv-select:focus,
    .uv-skin-dark .uv-field:focus,
    .uv-skin-dark .uv-search-inline:focus {
        border-color: {{ brandColor }};
    }
    .uv-skin-dark .uv-loader span:before,
    .uv-skin-dark .uv-loader span:after {
        background: {{ brandColor }};
    }
    .uv-skin-dark .bootstrap-datetimepicker-widget table td.active,
    .uv-skin-dark .bootstrap-datetimepicker-widget table td.active:hover {
        background-color: {{ brandColor }};
    }
    .uv-skin-dark .btn-primary,
    .uv-skin-dark .btn-primary:hover,
    .uv-skin-dark .btn-primary:active {
        background-color: {{ brandColor }};
    }
    .uv-skin-dark .uv-hero {
        background-color: {{ brandColor }};
    }
    .uv-skin-dark .uv-cta-wrapper .uv-cta-lt svg path {
        fill: {{ brandColor }};
        opacity: .85;
    }
    .uv-kb-layout-folder .uv-kb-folder {
        border-color: {{ brandColor }};
    }
    .uv-kb-layout-grid .uv-kb-folder{
        border-color: {{ brandColor }};
    }
    .uv-kb-layout-folder .uv-kb-folder .uv-kb-folder-lt {
        background-position: -180px 0px;
        background-color: {{ brandColor }};
        opacity: .85;
    }
    .uv-skin-dark .uv-paper-article .uv-paper-section .uv-folder-title:after {
        background-color: {{ brandColor }};
        color: #333333;
    }
    .uv-skin-dark .uv-kb-layout-category .uv-kb-folder {
        border-bottom-color: {{ brandColor }};
    }
    .uv-skin-dark .uv-brand {
        color: {{ brandColor }};
    }
    .uv-skin-dark .uv-pagination a:hover {
        background-color: {{ brandColor }};
        border-color: {{ brandColor }};
    }
    .uv-skin-dark .uv-nav-tab ul.uv-nav-tab-label li .uv-nav-tab-active,
    .uv-skin-dark .uv-nav-tab ul.uv-nav-tab-label li a:hover {
        border-bottom-color: {{ brandColor }};
    }
    .uv-skin-dark .uv-icon-down-light {
            background-image: url("{{ asset('bundles/uvdeskcoreframework/images/arrow-down-dark.svg')}}");
    }
    .uv-skin-dark .uv-ticket-view .uv-ticket-accordion .uv-ticket-count-stat,
    .uv-skin-dark .uv-ticket-view .uv-ticket-accordion .uv-ticket-count-stat:hover {
        background: {{ brandColor }};
        color: #333333;
    }
</style>
{% endif %}