<!-- [Google Font] Family -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap"
        id="main-font-link">
    <!-- [Tabler Icons] https://tablericons.com -->
    <link rel="stylesheet" href="{{ asset('admin/assets/fonts/tabler-icons.min.css') }}">
    <!-- [Feather Icons] https://feathericons.com -->
    <link rel="stylesheet" href="{{ asset('admin/assets/fonts/feather.css') }}">
    <!-- [Font Awesome Icons] https://fontawesome.com/icons -->
    <link rel="stylesheet" href="{{ asset('admin/assets/fonts/fontawesome.css') }}">
    <!-- [Material Icons] https://fonts.google.com/icons -->
    <link rel="stylesheet" href="{{ asset('admin/assets/fonts/material.css') }}">
    <!-- [Template CSS Files] -->
    <link rel="stylesheet" href="{{ asset('admin/assets/css/style.css') }}" id="main-style-link">
    <link rel="stylesheet" href="{{ asset('admin/assets/css/style-preset.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
        integrity="sha512-vC0FJd4Io3wRmYQdK1lv5oTjX+H9kz/2D2kOXJv/0vDbQk84oA1RJTCqC9+Zn3YYM1iVZ3f5Ke8btr1VIRZrNw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

    @yield('styles')


    <style>
        .alert.fade {
            opacity: 0;
            transition: opacity 0.5s ease-out;
        }

        .currency-amount {
            transition: color 0.3s ease;
        }

        .currency-up {
            color: green;
        }

        .currency-down {
            color: red;
        }

        .currency-info {
            background: rgb(133 120 120 / 20%);
            color: black;
            border-radius: 20px;
            padding: 0.5rem 1rem;
            margin-right: 1rem;
            font-size: 0.9rem;
            font-weight: 600;
        }

        @media (max-width: 992px) {

            .currency-info,
            .time-info {
                font-size: 0.8rem;
                margin-right: 0.5rem;
            }
        }

        /* Each time section */
        .clock-section {
            display: flex;
            align-items: center;
        }

        /* Timer text */
        .clock-timer {
            color: #050505;
            font-weight: 700;
            font-size: 1rem;
            margin: 0;
        }

        /* Span inside for better control */
        .clock-timer span {
            display: inline-block;
            min-width: 32px;
            text-align: center;
        }

        .currency-info {
            background: rgb(133 120 120 / 20%);
            color: black;
            border-radius: 20px;
            padding: 0.5rem 1rem;
            margin-right: 1rem;
            font-size: 0.9rem;
            font-weight: 600;
        }

        @media (max-width: 992px) {

            .currency-info,
            .time-info {
                font-size: 0.8rem;
                margin-right: 0.5rem;
            }
        }
    </style>