{{-- style blade file --}}
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,600%7CIBM+Plex+Sans:300,400,500,600,700" rel="stylesheet">

    <!-- BEGIN: Vendor CSS-->
    @if($configData['direction'] === 'ltr')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/vendors.min.css') }}">
    @else
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/vendors-rtl.min.css') }}">
    @endif
    @yield('vendor-styles')
    <!-- END: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/sweetalert2/sweetalert2.min.css') }}">
    <style>
    .swal2-styled.swal2-confirm {
        background-color: #A33231 !important;
    }

    .swal2-styled.swal2-confirm:focus {
        box-shadow: 0 0 0 3px rgb(226 133 52/ 50%);
    }

    .header-navbar {
        z-index: 1005 !important;
    }

    .required-field::after {
        content: '*';
        color: #dc3545;
    }
    </style>

    <!-- BEGIN: Theme CSS-->
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-extended.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/colors.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/components.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/themes/dark-layout.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/themes/semi-dark-layout.css') }}">
    @if($configData['direction'] === 'rtl')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/custom-rtl.css') }}">
    @endif
    <style>
        body {
            background-color: #F2F4F4 !important;
        }

        .navbar {
            background-color: #F2F4F4 !important;
        }
    </style>
    <!-- END: Theme CSS-->

    <!-- BEGIN: Page CSS-->
    @if($configData['mainLayoutType'] == 'horizontal-menu')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/core/menu/menu-types/horizontal-menu.css') }}">
    @else
    <link rel="stylesheet" type="text/css" href="{{ asset('css/core/menu/menu-types/vertical-menu.css') }}">
    @endif
    @yield('page-styles')
    <!-- END: Page CSS-->

    <!-- BEGIN: Custom CSS-->
    <link rel="stylesheet" type="text/css" href="{{ mix('assets/css/admin-style.css') }}">
    <!-- END: Custom CSS-->