<link href="{{ asset('assets/vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet" type="text/css">

<link href="{{ asset('assets/css/select2.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/sb-admin-2.min.css') }}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"rel="stylesheet">
<link href="{{ asset('assets/css/toastr.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/css/datatables.min.css') }}" rel="stylesheet" />
@yield('styles')
<style>
    #data-table{
        color:white !important;
    }
    .card.table-full {
        display: block;
    }
    .background-image:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 350%;
        width: 100%;
        background-image: url('{{ asset('assets/img/image.jpg') }}');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background: linear-gradient(136.36deg, #333964 4.86%, #171a39 94.85%);
    --widget-bg: aliceblue;
    color: rgba(244, 244, 245, 0.24);
    /* background-color: rgba(0,0,0,0.24); */
    }

    .sidebar-dark .nav-item .nav-link[data-toggle="collapse"]::after{
        color: rgba(244,244,245,.6) !important;
    }
    .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
        background-color: rgba(4,6,32,.24) !important;
    }
    .bg-white.py-2.collapse-inner.rounded a {
        color: #fff !important;
    }
    .bg-white.py-2.collapse-inner.rounded {
        background-color: transparent !important;
        color: #fff !important;
    }
    .card-opacity {
        position: relative; /* Required for pseudo-element positioning */
    }

    .header-opacity{
        /* background-color: rgba(255, 255, 255, 0.1) !important; */
    }

    .card-opacity::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit; /* If you want to use the background color of the parent */
        opacity: 1 !important;
        /* z-index: 1; */
    }
    .form-control {
        display: block;
        width: 100%;
        height: calc(1.5em + .75rem + 2px);
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: black !important;
        background-color: #fff !important;
        background-clip: padding-box;
        border: 1px solid #2f345e !important; 
        border-radius: .35rem;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
    
    .page-item.active .page-link {
        z-index: 3;
        color: #fff !important;
        background-color: #151831 !important;
        border-color: #151831 !important;
    }

    .chartjs-render-monitor {
        animation: chartjs-render-animation 1ms;
        width: 700px !important;
    }

    .card-header {
        padding: 0.75rem 1.25rem;
        margin-bottom: 0;
        background-color: #2a2f56 !important;
        border-bottom: 1px solid #292e54 !important;
    }

    .card-header h6{
        color: #fff !important;
    }
    
    .text-muted {
        color: #ffffff !important;
    }
    
    .text-dark {
        color: #ffffff !important;
    }
    
    .page-link {
        position: relative;
        display: block;
        padding: 0.5rem 0.75rem;
        margin-left: -1px;
        line-height: 1.25;
        color: #ffffff !important;
        background-color: #151831 !important;
        border: 1px solid #151831 !important;
    }
    
    .breadcrumb {
        background-color: transparent !important;
    }

    .card-opacity .card-body {
        position: relative;
        /* z-index: 2; */
    }
    .highlight {
    background-color: rgba(0,0,0,0.24) !important;
    }
        .table {
        width: 100%;
        margin-bottom: 1rem;
        color: rgba(244, 244, 245, .7) !important;
    }
        
        .table-bordered td, .table-bordered th {
        border: 1px solid #040620 !important;
    }
    .table-bordered {
        border: 1px solid #040620 !important;
    }
    .card {
        /* opacity: 1; */
        background-color: rgba(0,0,0,0.24) !important; /* Makes the background transparent */
        border: none; /* Removes the border if any */
        box-shadow: none; /* Removes any shadow */
        color: #fff; /* Sets text color to black 
        font-weight: bold; /* Makes the text bold */
        text-align: center; /* Centers the text */
        display: flex; /* Flexbox for layout */
        flex-direction: column; /* Aligns items vertically */
        justify-content: center; /* Centers items vertically */
        align-items: center; /* Centers items horizontally */
        padding: 20px; /* Adds some padding */
        box-shadow: 0 23px 20px -20px rgba(9, 10, 18, .1), 0 0 15px rgba(9, 10, 18, .06);
    border-radius: 10px;
        border-left: unset !important;
    }
    
    table.dataTable {
    border-collapse: collapse !important;
    }
    .topbar.navbar-light .navbar-nav .nav-item .nav-link {
        color: #2a2f57 !important;
    }
        .card .custom-form-spacing {
            margin-right:2px !important;
            margin-top:2px !important;
            margin-bottom: 0 !important;
            /* margin: 0px !important; */
    }

    tr th.sorting{
        color:white;
    }
        
        .card-body svg rect {
        fill: transparent !important;
    }
    
    
    .card .text-primary {
        color: #ffffff !important;
    }


    .card-icon {
        margin-bottom: 10px; /* Adds spacing below the icon */
    }

    .card-value {
        font-size: 20px; /* Adjust size of the value */
    }

    .card-body{
        padding:0.25rem !important;
        align-content:center;
    }

    .footer{ text-align: right !important; }
    .container-fluid{ padding: 10px 35px !important; }
    .kt-form__help{ color: red !important; font-size: 15px; }
    .sidebar-nav { padding-top: 0px !important; }
    .page-breadcrumb { padding: 15px 35px 0 !important; }
    
    .column-layout {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .column-layout .form-group {
        flex: 1 1 33%; /* Each form-group takes up 1/3 of the row */
        max-width: 102%;
        box-sizing: border-box;
    }
    
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        color: white;
    }
    
    .input-transparent {
        background: transparent;
        border: 1px solid #ccc;
        padding: 8px;
        border-radius: 4px;
        width: 100%; /* Matches the parent width */
        box-sizing: border-box;
    }

    .text-xs,.card-value,.white_text {
        color: white !important;
    }

    .dataTables_length select option {
        color: black !important;
    }
    
    .dataTables_info {
        color: white!important;
    }
    .sidebar-brand-text{
        background-color:white;
    }
</style>