@php
$currentAppTheme ='';
 // Default theme from settings
 $currentAppTheme = getUserAppTheme()
@endphp

     
html > body {
background-color: {{ getAppSettings('app_bg_color') }}!important;
background-color: #eef1f9;
}
.card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation {
background-color: {{ darkenColorValue(getAppSettings('app_bg_color'), 9) }};
}
.navbar.lw-sidebar-container {
background-color: {{ getAppSettings('app_sidebar_bg_color') }}!important;
}
.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link[data-toggle=collapse]:after,
.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link,
.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link .fa {
color: {{ getAppSettings('app_sidebar_text_color') }};
}
.active>.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover
{
    background:{{ getAppSettings('app_bs_color_default') }}!important;
    border-radius: 4px;
    color: {{ getAppSettings('app_bs_color_text_hover') }} !important;
}
{{-- .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link[data-toggle=collapse]:hover::after {
    color: {{ getAppSettings('app_sidebar_text_color') }};
} --}}
.nav.nav-sm.flex-column .nav-link:hover {
    background-color: unset !important;
    color: #145fb1 !important;
}
.tab.active {
    background-color: #f0f2f5;
    font-weight: bold;
    border: 2px solid {{ darkenColorValue(getAppSettings('app_bs_color_primary'), 1) }};
}
.toggle-switch label.active {
  background: {{ darkenColorValue(getAppSettings('dark_theme_app_bg_color'), 9) }};
  color: #fff;
}
@php
$bootstrapClasses = [
'primary' => '#007bff',
'secondary' => '#6c757d',
'success' => '#28a745',
'danger' => '#dc3545',
'warning' => '#ffc107',
'info' => '#17a2b8',
'light' => '#f8f9fa',
'dark' => '#343a40',
'muted' => '#8898aa',
];


$css = '';
@endphp
@foreach ($bootstrapClasses as $bootstrapClass => $bootstrapClassValue)
@php
$bgColor = getAppSettings('app_bs_color_'.$bootstrapClass) ?: $bootstrapClassValue;
@endphp
#activeTab:checked ~ label[for="activeTab"],
#archivedTab:checked ~ label[for="archivedTab"] {
    color: #ffffff;
    background: {{ darkenColorValue(getAppSettings('dark_theme_app_bg_color'), 9) }};
}
#queueTab:checked ~ label[for="queueTab"],
#executedTab:checked ~ label[for="executedTab"],
#expiredTab:checked ~ label[for="expiredTab"] {
    color: #ffffff;
    background: {{ darkenColorValue(getAppSettings('dark_theme_app_bg_color'), 9) }};
}
#inputTab:checked ~ label[for="inputTab"], 
#scheduleTab:checked ~ label[for="scheduleTab"] {
    color: #ffffff;
    background: {{ darkenColorValue(getAppSettings('dark_theme_app_bg_color'), 9) }};
}
@if($bootstrapClass == 'primary')
.card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar {
background-color: {{ darkenColorValue($bgColor, 35) }};
}
 .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar { 
    background-color:#fff;
 }
.card.lw-whatsapp-chat-block-container .nav-tabs {
border-color: {{ $bgColor }} ;
}
{{-- .lw-page-title,a {
color: {{ $bgColor }};
} --}}
{{-- .lw-page-title:hover,a:hover {
color: {{ darkenColorValue($bgColor, 20) }};
} --}}
.card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .send .circle {
background-color: {{ $bgColor }};
border-color: {{ darkenColorValue($bgColor, 10) }};
}
@endif
.rightsection{
    background:{{ getAppSettings('app_bs_color_secondary') }};
}
.svg-decorations{
    color:{{ getAppSettings('app_bs_color_secondary') }};
}
.signin-btn{
    background:{{ getAppSettings('app_bs_color_secondary') }};

}
.forgot-password{
      color:{{ getAppSettings('app_bs_color_secondary') }};
}
.register-btn:hover,
.signin-btn:hover{
    background:{{ getAppSettings('app_sidebar_bg_color') }};
      color: {{ getAppSettings('app_bs_color_primary') }};
   border: 1px solid {{ getAppSettings('app_sidebar_bg_color') }};
}
.swiper-pagination-bullet-active {
    background: {{ getAppSettings('app_sidebar_bg_color') }};
    opacity: 1;
}
.create-account-btn{
        background:{{ getAppSettings('app_bs_color_secondary') }};
}
#mainNav .navbar-nav .nav-item .nav-link:hover{
     color: {{ getAppSettings('app_bs_color_primary') }} !important;
}
.create-account-btn:hover {
      background:{{ getAppSettings('app_sidebar_bg_color') }};
      color: {{ getAppSettings('app_bs_color_primary') }};
      border: 1px solid {{ getAppSettings('app_sidebar_bg_color') }};
}
.reset-btn{
    background:{{ getAppSettings('app_bs_color_secondary') }};
    box-shadow:0 4px 15px {{ getAppSettings('app_bs_color_secondary') }};
}
.reset-btn:hover {
        background:{{ getAppSettings('app_sidebar_bg_color') }};
        color: {{ getAppSettings('app_bs_color_primary') }};
        border: 1px solid {{ getAppSettings('app_sidebar_bg_color') }};
}
.testimonial-card{
        background:{{ getAppSettings('app_bs_color_secondary') }};
}
.register-btn,
.announcement-bar {
       background:{{ getAppSettings('app_bs_color_secondary') }};
}
.login-btn:hover {
      background:{{ getAppSettings('app_bs_color_secondary') }};
      color:{{ getAppSettings('app_sidebar_bg_color') }};
}

 .pricing__item {
       background:{{ getAppSettings('app_sidebar_bg_color') }};
 }

 .pricing__item .pricing-head h2 span,
 .pricing__item .pricing-head h2,
 .pricing__item ul li {
    color:{{ getAppSettings('app_bs_color_secondary') }};
}
.login-btn {
    background: transparent;
    color: {{ getAppSettings('app_bs_color_secondary') }} !important;
    border: 2px solid {{ getAppSettings('app_bs_color_secondary') }};
}
.ai-step,
 .savings-highlight{
 background:{{ getAppSettings('app_bs_color_secondary') }};
  color: {{ getAppSettings('app_sidebar_bg_color') }} !important;
 }
 
 .hero-cta-section .overlay{
    background:{{ getAppSettings('app_bs_color_secondary') }};
 }
.mdtoast.mdt--{{ $bootstrapClass }}
@if($bootstrapClass == 'primary')
,.lw-minimized-menu .navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active:before,
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm, .dropdown-item.active, .dropdown-item:active
,.main-content .navbar-top
@endif
{
background-color: {{ $bgColor }};
border-color: {{ darkenColorValue($bgColor, 10) }};
color: #ffffff;
}
@php
$css .= ".bg-$bootstrapClass { background-color: $bgColor !important; }\n";
// Text colors
$css .= ".text-$bootstrapClass { color: $bgColor !important; }\n";
// Button colors
$css .= ".btn-outline-$bootstrapClass:not(:disabled):not(.disabled).active, .btn-outline-$bootstrapClass:not(:disabled):not(.disabled):active, .show>.btn-outline-$bootstrapClass.dropdown-toggle,.btn.btn-$bootstrapClass { background-color: $bgColor !important; border-color: $bgColor !important; color:
#fff !important; }\n";
$css .= ".btn.btn-$bootstrapClass:hover { background-color: ". darkenColorValue($bgColor, 10) ." ;
border-color: ". darkenColorValue($bgColor, 10) ." !important; }\n";
$css .= ".btn.btn-outline-$bootstrapClass { color: $bgColor !important; border-color: $bgColor !important; }\n";
$css .= ".btn.btn-outline-$bootstrapClass:hover { background-color: $bgColor !important; color: #fff !important; }\n";
// Alert colors
$css .= ".alert.alert-$bootstrapClass { background-color: $bgColor !important; border-color: ".
darkenColorValue($bgColor, 5) ." !important; color: #fff !important; }\n";
// Badge colors
// $css .= ".badge.badge-$bootstrapClass { background-color: $bgColor !important; color: #fff !important; }\n";

// Card colors
$css .= ".card.card-$bootstrapClass { background-color: $bgColor !important; border-color: ". darkenColorValue($bgColor,
5) ." !important; color: #fff !important; }\n";

// List group colors
$css .= ".list-group-item.list-group-item-$bootstrapClass { background-color: $bgColor !important; border-color: ".
darkenColorValue($bgColor, 5) ." !important; color: #fff !important; }\n";

// Table row colors
$css .= ".table.table-$bootstrapClass { background-color: $bgColor !important; color: #fff !important; }\n";

// Border colors
$css .= ".border.border-$bootstrapClass { border-color: $bgColor !important; }\n";
@endphp
@endforeach
{!! $css !!}
@if (getAppSettings('disable_bg_image'))
html > body {
    background: {{ getAppSettings('app_bg_color') }}!important;
}
@endif


{{-- dark theme colors --}}
@if($currentAppTheme=='dark')
    :root {
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(20px + var(--tw-ring-offset-width)) rgb(65 73 87 / 32%);
    }

    html > body {
    background-color: {{ getAppSettings('dark_theme_app_bg_color') }}!important;
    }
    .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation {
    background-color: {{ darkenColorValue(getAppSettings('dark_theme_app_bg_color'), 9) }}!important;
    }
    .navbar.lw-sidebar-container ,.navbar-collapse {
    background-color: {{ getAppSettings('dark_theme_app_sidebar_bg_color') }}!important;
    }
    .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link[data-toggle=collapse]:after,
    .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link,
    .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link .fa {
    color: {{ getAppSettings('dark_theme_app_sidebar_text_color') }};
    }
    .active>.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active,
    .navbar-light .navbar-nav .nav-link:hover ,
    .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link[data-toggle=collapse]:hover::after
    {
        background:{{ getAppSettings('dark_theme_app_bs_color_default') }}!important;
        border-radius: 4px;
        color: {{ getAppSettings('dark_theme_app_bs_color_text_hover') }} !important;
    }
    {{-- .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link[data-toggle=collapse]:hover::after {
        color: {{ getAppSettings('dark_theme_app_sidebar_text_color') }};
    } --}}
    .nav.nav-sm.flex-column .nav-link:hover {
        background-color : unset !important;
    }
    .nav.nav-sm.flex-column .nav-item.active .nav-link, .nav.nav-sm.flex-column .nav-item .nav-link.active {
        background-color : unset !important;
    }
    .row .dt-row .table thead th {
        background: #15151a;
        color: #fff;
    }
    .table tbody tr td {
        color:#d1d1d1;
    }
    .table-striped tbody tr:nth-of-type(odd)
    {
        background-color: rgba(0, 0, 0, .05) !important;
    }
    .text-custome:hover {
        color: #333333 !important;
    }
    .text-custome-1:hover {
        color: #d8d6d6 !important;
    }
    .navbar-dark .navbar-nav .nav-link {
        color: rgba(255, 255, 255, .95);
    }
    .navbar-dark .navbar-nav .nav-link:hover {
        color: #d8d6d6;
    }
    .navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
        color: #ffffff;
    }
    .nav-link-custom:hover, .nav-link-custom:focus {
        color: #d1d1d1 !important;
    }
    .bgd-black {
        background-color: #c9c9c9a8 !important;
    }
    .bg-black-ring {
        background: #0f172a87;
    }
    .ring-b-box {
    box-shadow: var(--tw-ring-shadow);
    }
    .black-icon-inner {
        background-color: #0f172a;
    }
    .black-icon-wrapper { 
        border: 1px dashed #0f172a;
    }
    .bg-orange-50 {
        background-color: #cdaa7a !important;
    }
    .bg-orange-ring {
        background: #b57320 !important;
    }
    .ring-og-box
    {
       box-shadow: 0 0 0 calc(20px) #b573205e; !important;
    }
    .warning-icon-wrapper {
        border: 1px dashed #fb6340;
    }
    .warning-icon-inner {
        background-color: #fb6340
    } 
    .bg-green-50 {
        background-color: #d1ffcb !important;
    }
    .bg-green-ring {
        background: #65dc65 !important;
    }
    .ring-gr-box {
        box-shadow: 0 0 0 calc(20px) #48e25540 !important;
    }
    .green-icon-wrapper { 
        border: 1px dashed #54bb7b !important;
    }
    .green-icon-inner {
        background-color: #3ac92d !important;
    } 
    .bg-red-50 {
        background-color: #f1b6b6 !important;
    }
    .bg-red-ring {
        background: #e75b5b !important;
    }
    .ring-re-box {
        box-shadow: 0 0 0 calc(20px) #e5a0a0 !important;
    }
    .red-icon-wrapper {
        border: 1px dashed #eb6c32 !important;
    }
    .red-icon-inner { 
        background-color: #fd0e0e !important;
    }
    .title { 
        color: #1f2937;
    }
    .value {
        color: #111827;
    }
    .text-custome {
        color: #000000;
    }
    .profile-pic {
        filter: invert(1);
    }
    .nav-tabs .nav-link.active {
        background-color : unset !important;
    }
    .card.lw-whatsapp-chat-block-container .nav-tabs .nav-link.active {
        color: #fff;
        border-bottom: 2px solid #fff !important;
    }
    .card.lw-whatsapp-chat-block-container .nav-tabs .nav-link {
        color: #999da6;
    }
    .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .lw-contact-list .lw-contact-list-item-selected {
        background-color: #717171 !important;
        border-left: 2px solid #ffffff;
    }
    .list-group-item-action {
        color: #d1d1d1 !important;
    }
    .list-group-item:focus, .list-group-item:hover {
        background-color: #42414178  !important;
    }
    .text-secondary-dark {
        color:#fff !important;
    }
    .dropup {
       background-color: unset !important;
    }
    .fw-black {
        color: unset;
    }
    .border-bottom-c {
        border-bottom: 1px solid #282c31 !important;
    }
    .border-tb {
        border-top: 1px solid #282c31 !important;
        border-bottom: 1px solid #282c31 !important;
        border-left: none !important;
        border-right: none !important;
    }
    .lw-section {
        border-bottom : none !important;
    }
    .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar { 
        background-color: unset;
        color: #fff ;
    }
    .lw-whatsapp-bar-icon-btn {
        color: #fff;
    }
    .step.active::after {
        color: #ffffff;
    }
    .step {
        background: #aaaaaa;
    }
    .step::after {
        color: #b1b1b1;
    }
    .selectize-dropdown-content {
        background: #313131 !important;
    }
    .tab.active {
        background-color: #10141b;
        color: #fff;
    }
    .bg-bluee {
        background-color: #cfcfec !important;
    }
    .bg-greene {
        background-color: #beeecd !important;
    }
    .bg-orangee {
        background-color: #e7d6c1 !important;
    }
    .bg-rede {
        background-color: #f1cece !important;
    }
    .apexcharts-legend-text {
        color: #fff !important;
    }
    @php
    $css = '';
    @endphp
    @foreach ($bootstrapClasses as $bootstrapClass => $bootstrapClassValue)
    @php
    $bgColor = getAppSettings('dark_theme_app_bs_color_'.$bootstrapClass) ?: $bootstrapClassValue;
    @endphp
    @if($bootstrapClass == 'primary')
    {{-- .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar {
    background-color: {{ darkenColorValue($bgColor) }}!important;
    } --}}
    .card.lw-whatsapp-chat-block-container .nav-tabs {
    {{-- border-color: {{ $bgColor }} !important; --}}
    border-color: #282c31 !important;
    }
    {{-- .lw-page-title,a {
    color: {{ $bgColor }};
    } --}}
    .lw-page-title:hover,a:hover {
    color: {{ darkenColorValue($bgColor, 20) }};
    }
    .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .send .circle {
    background-color: {{ $bgColor }};
    border-color: {{ darkenColorValue($bgColor, 10) }};
    }
    @endif
    .mdtoast.mdt--{{ $bootstrapClass }}
    @if($bootstrapClass == 'primary')
    ,.lw-minimized-menu .navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active:before,
    div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm, .dropdown-item.active, .dropdown-item:active
    ,.main-content .navbar-top
    @endif
    {
    background-color: {{ $bgColor }};
    border-color: {{ darkenColorValue($bgColor, 10) }};
    color: #ffffff;
    }
    @php
    $css .= ".bg-$bootstrapClass { background-color: $bgColor !important; }\n";
    // Text colors
    $css .= ".text-$bootstrapClass { color: $bgColor !important; }\n";
    // Button colors
    $css .= ".btn-outline-$bootstrapClass:not(:disabled):not(.disabled).active, .btn-outline-$bootstrapClass:not(:disabled):not(.disabled):active, .show>.btn-outline-$bootstrapClass.dropdown-toggle,.btn.btn-$bootstrapClass { background-color: $bgColor !important; border-color: $bgColor !important; color:
    #fff !important; }\n";
    $css .= ".btn.btn-dark, .alert.alert-dark{ 
        color: #ffffff  !important; 
    }\n";
    $css .= ".btn.btn-$bootstrapClass:hover { background-color: ". darkenColorValue($bgColor, 10) ." !important;
    border-color: ". darkenColorValue($bgColor, 10) ." !important; }\n";
    $css .= ".btn.btn-outline-$bootstrapClass { color: $bgColor !important; border-color: $bgColor !important; }\n";
    $css .= ".btn.btn-outline-$bootstrapClass:hover { background-color: $bgColor !important; color: #fff !important; }\n";
    // Alert colors
    $css .= ".alert.alert-$bootstrapClass { background-color: $bgColor !important; border-color: ".
    darkenColorValue($bgColor, 5) ." !important; color: #fff !important; }\n";
    // Badge colors
    // $css .= ".badge.badge-$bootstrapClass { background-color: $bgColor !important; color: #fff !important; }\n";

    // Card colors
    $css .= ".card.card-$bootstrapClass { background-color: $bgColor !important; border-color: ". darkenColorValue($bgColor,
    5) ." !important; color: #fff !important; }\n";

    // List group colors
    $css .= ".list-group-item.list-group-item-$bootstrapClass { background-color: $bgColor !important; border-color: ".
    darkenColorValue($bgColor, 5) ." !important; color: #fff !important; }\n";

    // Table row colors
    $css .= ".table.table-$bootstrapClass { background-color: $bgColor !important; color: #fff !important; }\n";
    // Border colors
    $css .= ".border.border-$bootstrapClass { border-color: $bgColor !important; }\n";
    @endphp
    @endforeach
    {!! $css !!}
    @if (getAppSettings('disable_bg_image'))
    html > body {
        background: {{ getAppSettings('dark_theme_app_bg_color') }}!important;
    }
  
    @endif
    @endif
    @if($currentAppTheme=='system_default')
   
        @media (prefers-color-scheme: dark) {
        html > body {
        background-color: {{ getAppSettings('dark_theme_app_bg_color') }}!important;
        }
        .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation {
        background-color: {{ darkenColorValue(getAppSettings('dark_theme_app_bg_color'), 9) }}!important;
        }
        .navbar.lw-sidebar-container ,.navbar-collapse {
        background-color: {{ getAppSettings('dark_theme_app_sidebar_bg_color') }}!important;
        }
        .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link[data-toggle=collapse]:after,
        .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link,
        .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link .fa {
        color: {{ getAppSettings('dark_theme_app_sidebar_text_color') }};
        }
        .active>.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active,
        .navbar-light .navbar-nav .nav-link:hover ,
        .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link[data-toggle=collapse]:hover::after
        {
            background:{{ getAppSettings('dark_theme_app_bs_color_default') }}!important;
            border-radius: 4px;
            color: {{ getAppSettings('dark_theme_app_bs_color_text_hover') }} !important;
        }
        {{-- .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link[data-toggle=collapse]:hover::after {
            color: {{ getAppSettings('dark_theme_app_sidebar_text_color') }};
        } --}}
        @php
        $css = '';
        @endphp
        @foreach ($bootstrapClasses as $bootstrapClass => $bootstrapClassValue)
        @php
        $bgColor = getAppSettings('dark_theme_app_bs_color_'.$bootstrapClass) ?: $bootstrapClassValue;
        @endphp
        @if($bootstrapClass == 'primary')
        .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar {
        background-color: {{ darkenColorValue($bgColor) }}!important;
        }
        .card.lw-whatsapp-chat-block-container .nav-tabs {
        border-color: {{ $bgColor }} !important;
        }
        {{-- .lw-page-title,a {
        color: {{ $bgColor }};
        } --}}
        .lw-page-title:hover,a:hover {
        color: {{ darkenColorValue($bgColor, 20) }};
        }
        .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .send .circle {
        background-color: {{ $bgColor }};
        border-color: {{ darkenColorValue($bgColor, 10) }};
        }
        @endif
        .mdtoast.mdt--{{ $bootstrapClass }}
        @if($bootstrapClass == 'primary')
        ,.lw-minimized-menu .navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active:before,
        div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm, .dropdown-item.active, .dropdown-item:active
        ,.main-content .navbar-top
        @endif
        {
        background-color: {{ $bgColor }};
        border-color: {{ darkenColorValue($bgColor, 10) }};
        color: #ffffff;
        }
        @php
        $css .= ".bg-$bootstrapClass { background-color: $bgColor !important; }\n";
        // Text colors
        $css .= ".text-$bootstrapClass { color: $bgColor !important; }\n";
        // Button colors
        $css .= ".btn-outline-$bootstrapClass:not(:disabled):not(.disabled).active, .btn-outline-$bootstrapClass:not(:disabled):not(.disabled):active, .show>.btn-outline-$bootstrapClass.dropdown-toggle,.btn.btn-$bootstrapClass { background-color: $bgColor !important; border-color: $bgColor !important; color:
        #fff !important; }\n";
        $css .= ".btn.btn-dark, .alert.alert-dark{ 
            color: #000 !important; 
        }\n";
        $css .= ".btn.btn-$bootstrapClass:hover { background-color: ". darkenColorValue($bgColor, 10) ." !important;
        border-color: ". darkenColorValue($bgColor, 10) ." !important; }\n";
        $css .= ".btn.btn-outline-$bootstrapClass { color: $bgColor !important; border-color: $bgColor !important; }\n";
        $css .= ".btn.btn-outline-$bootstrapClass:hover { background-color: $bgColor !important; color: #fff !important; }\n";
        // Alert colors
        $css .= ".alert.alert-$bootstrapClass { background-color: $bgColor !important; border-color: ".
        darkenColorValue($bgColor, 5) ." !important; color: #fff !important; }\n";
        // Badge colors
        // $css .= ".badge.badge-$bootstrapClass { background-color: $bgColor !important; color: #fff !important; }\n";
    
        // Card colors
        $css .= ".card.card-$bootstrapClass { background-color: $bgColor !important; border-color: ". darkenColorValue($bgColor,
        5) ." !important; color: #fff !important; }\n";
    
        // List group colors
        $css .= ".list-group-item.list-group-item-$bootstrapClass { background-color: $bgColor !important; border-color: ".
        darkenColorValue($bgColor, 5) ." !important; color: #fff !important; }\n";
    
        // Table row colors
        $css .= ".table.table-$bootstrapClass { background-color: $bgColor !important; color: #fff !important; }\n";
        // Border colors
        $css .= ".border.border-$bootstrapClass { border-color: $bgColor !important; }\n";
        @endphp
        @endforeach
        {!! $css !!}
        @if (getAppSettings('disable_bg_image'))
        html > body {
            background: {{ getAppSettings('dark_theme_app_bg_color') }}!important;
        }
        @endif
    }
@endif