@extends('layouts.frontend-master')
@section('title', 'Settings')
@section('content')
    @php
        $user = auth()->user();
        $member = $user->member;
        $loan = \App\Models\Loan::where('member_id', $member->id)->orderBy('id', 'desc')->first();
        
    @endphp

    <div class="settings--content">
        <header class="header--settings"></header>
        <main class="main--settings">
            <div class="container">
                <div class="Toastify"></div>
                <div class="d-flex justify-content-center">
                    <div class="row">
                        <div class="col-md-12 settings--container--nobg mb-0">

                            <div class="canvas_div mt-2" style="height:220px;margin-top:-50px !important;margin:0 auto;">
                                <canvas id="canvas" width="310px" height="310px"
                                    data-score="{{ $member->credit_score ?? 500 }}"></canvas>
                            </div>
                            <div class="d-flex justify-content-center">
                                <p class="fs-5 lh-1 fw-bold" style="color: rgb(62, 152, 199)" id="showData">
                                    {{-- {{ substr($user->phone ?? '******', 0, 4) }}●●●●●●
                                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye"
                                        class="svg-inline--fa fa-eye" role="img" xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 576 512" style="color: rgb(62, 152, 199)"
                                        onclick="showData('{{ $user->phone }}');">
                                        <path fill="currentColor"
                                            d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
                                        </path>
                                    </svg> --}}

                                    {{$user->phone}}
                                </p>
                            </div>
                        </div>

                        <div class="col-md-12 settings--container--nobg mb-0">
                            <div class="col-md-12">
                                <div class="d-flex justify-content-start">
                                    <p class="fs-6 lh-1 text-muted fw-bold">
                                        WHAT IS CREDIT SCORE?
                                    </p>
                                </div>
                                <div class="d-flex justify-content-start mb-0">
                                    <p class="lh-1 text-muted" style="font-size: 12px">
                                        This is your trust
                                        score, used as a basis to determine the various
                                        activities you do on &nbsp;Global Dominion Financing,
                                        Inc.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 settings--container mb-0 mt-0">
                            <div class="d-flex justify-content-start mt-0">
                                <p class="fs-6 lh-1 text-muted fw-bold">Quick links</p>
                            </div>
                            <div class="d-flex justify-content-center">
                                <a href="/settings" style="text-decoration: none; color: gray" data-bs-toggle="modal"
                                    data-bs-target="#withdrawal-list">
                                    <div class="box--menu pt-3">
                                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="receipt"
                                            class="svg-inline--fa fa-receipt fa-2x" role="img"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"
                                            style="color: rgb(62, 152, 199)">
                                            <path fill="currentColor"
                                                d="M14 2.2C22.5-1.7 32.5-.3 39.6 5.8L80 40.4 120.4 5.8c9-7.7 22.3-7.7 31.2 0L192 40.4 232.4 5.8c9-7.7 22.3-7.7 31.2 0L304 40.4 344.4 5.8c7.1-6.1 17.1-7.5 25.6-3.6s14 12.4 14 21.8V488c0 9.4-5.5 17.9-14 21.8s-18.5 2.5-25.6-3.6L304 471.6l-40.4 34.6c-9 7.7-22.3 7.7-31.2 0L192 471.6l-40.4 34.6c-9 7.7-22.3 7.7-31.2 0L80 471.6 39.6 506.2c-7.1 6.1-17.1 7.5-25.6 3.6S0 497.4 0 488V24C0 14.6 5.5 6.1 14 2.2zM96 144c-8.8 0-16 7.2-16 16s7.2 16 16 16H288c8.8 0 16-7.2 16-16s-7.2-16-16-16H96zM80 352c0 8.8 7.2 16 16 16H288c8.8 0 16-7.2 16-16s-7.2-16-16-16H96c-8.8 0-16 7.2-16 16zM96 240c-8.8 0-16 7.2-16 16s7.2 16 16 16H288c8.8 0 16-7.2 16-16s-7.2-16-16-16H96z">
                                            </path>
                                        </svg><br /><strong style="font-size: 12px">Withdrawal</strong>
                                    </div>
                                </a>
                                {{-- <a href="/notifications" style="text-decoration: none; color: gray" data-bs-toggle="modal"
                                    data-bs-target="#changeContract"> --}}
                                <a href="/notifications" style="text-decoration: none; color: gray">
                                    <div class="box--menu pt-3">
                                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book"
                                            class="svg-inline--fa fa-book fa-2x" role="img"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                                            style="color: rgb(62, 152, 199)">
                                            <path fill="currentColor"
                                                d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z">
                                            </path>
                                        </svg><br /><strong style="font-size: 12px">Message</strong>
                                    </div>
                                </a>
                                <a href="#" style="text-decoration: none; color: gray" data-bs-toggle="modal"
                                    data-bs-target="#changeAccount">
                                    <div class="box--menu pt-3">
                                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="address-card"
                                            class="svg-inline--fa fa-address-card fa-2x" role="img"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"
                                            style="color: rgb(62, 152, 199)">
                                            <path fill="currentColor"
                                                d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm80 256h64c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm-32-96a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zm256-32H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s7.2-16 16-16z">
                                            </path>
                                        </svg><br /><strong style="font-size: 12px">Account</strong>
                                    </div>
                                </a>
                            </div>
                            <div class="d-flex justify-content-start mt-2">
                                <p class="fs-6 lh-1 text-muted fw-bold">Account settings</p>
                            </div>
                            <div class="d-flex justify-content-center">
                                <a href="#" style="text-decoration: none; color: gray" data-bs-toggle="modal"
                                    data-bs-target="#change_pwd">
                                    <div class="box--menu pt-3">
                                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="key"
                                            class="svg-inline--fa fa-key fa-2x" role="img"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                                            style="color: rgb(62, 152, 199)">
                                            <path fill="currentColor"
                                                d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z">
                                            </path>
                                        </svg><br /><strong style="font-size: 12px">Password</strong>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Modal edit pwd -->
    <div class="modal fade" id="change_pwd" tabindex="-1" aria-labelledby="change_pwdLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('update.password') }}">
                {{ csrf_field() }}
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="modal-title h4">
                            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="key"
                                class="svg-inline--fa fa-key fa-1x text-success" role="img"
                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                <path fill="currentColor"
                                    d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z">
                                </path>
                            </svg>
                            &nbsp;Change Password
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-2">
                                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-question"
                                    class="svg-inline--fa fa-circle-question fa-2x text-info" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path fill="currentColor"
                                        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z">
                                    </path>
                                </svg>
                            </div>
                            <div class="col-10">
                                <div class="mb-4">
                                    <label class="form-label" for="formPassword">Create New Password:<svg
                                            aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check"
                                            class="svg-inline--fa fa-check visually-hidden" role="img"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                                            style="color: limegreen; margin-left: 0.25rem">
                                            <path fill="currentColor"
                                                d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z">
                                            </path>
                                        </svg><svg aria-hidden="true" focusable="false" data-prefix="fas"
                                            data-icon="xmark" class="svg-inline--fa fa-xmark visually-hidden"
                                            role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"
                                            style="color: red; margin-left: 0.25rem">
                                            <path fill="currentColor"
                                                d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z">
                                            </path>
                                        </svg></label><input maxlength="24" placeholder="Create new password"
                                        autocomplete="off" required="" aria-invalid="true" aria-describedby="pwdnote"
                                        type="password" id="formPassword" class="form-control" value=""
                                        name="password" />
                                    <p id="pwdnote" class="visually-hidden"
                                        style="
                          font-size: 1rem;
                          border-radius: 0.5rem;
                          background: lightpink;
                          color: firebrick;
                          padding: 0.25rem;
                          position: relative;
                          margin-top: 0.5rem;
                        ">
                                        <svg aria-hidden="true" focusable="false" data-prefix="fas"
                                            data-icon="circle-info" class="svg-inline--fa fa-circle-info" role="img"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                            <path fill="currentColor"
                                                d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z">
                                            </path>
                                        </svg><span></span> Create a password with 8 to 24
                                        characters.<br />Must include uppercase and lowercase
                                        letters, a number and a special character.<br />Allowed
                                        special characters:
                                        <span aria-label="exclamation mark">!</span>
                                        <span aria-label="at symbol">@</span>
                                        <span aria-label="hashtag">#</span>
                                        <span aria-label="dollar sign">$</span>
                                        <span aria-label="percent">%</span>
                                    </p>
                                </div>
                                <div class="mb-4">
                                    <label class="form-label" for="formConfirmPassword">Confirm New Password:<svg
                                            aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check"
                                            class="svg-inline--fa fa-check visually-hidden" role="img"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                                            style="color: limegreen; margin-left: 0.25rem">
                                            <path fill="currentColor"
                                                d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z">
                                            </path>
                                        </svg><svg aria-hidden="true" focusable="false" data-prefix="fas"
                                            data-icon="xmark" class="svg-inline--fa fa-xmark visually-hidden"
                                            role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"
                                            style="color: red; margin-left: 0.25rem">
                                            <path fill="currentColor"
                                                d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z">
                                            </path>
                                        </svg></label><input maxlength="24" placeholder="Confirm new password"
                                        autocomplete="off" required="" aria-invalid="false"
                                        aria-describedby="cpwdmnote" type="password" name="password_confirmation"
                                        id="formConfirmPassword" class="form-control" value="" />
                                    <p id="cpwdnote" class="visually-hidden"
                                        style="
                          font-size: 1rem;
                          border-radius: 0.5rem;
                          background: lightpink;
                          color: firebrick;
                          padding: 0.25rem;
                          position: relative;
                          margin-top: 0.5rem;
                        ">
                                        <svg aria-hidden="true" focusable="false" data-prefix="fas"
                                            data-icon="circle-info" class="svg-inline--fa fa-circle-info" role="img"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                            <path fill="currentColor"
                                                d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z">
                                            </path>
                                        </svg><span></span> Password confirmation mismatch.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">
                            Change Password
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Modal  account-->
    <div class="modal fade" id="changeAccount" tabindex="-1" aria-labelledby="changeAccountLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title h4"><svg aria-hidden="true" focusable="false" data-prefix="fas"
                            data-icon="address-card" class="svg-inline--fa fa-address-card fa-1x text-success"
                            role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                            <path fill="currentColor"
                                d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm80 256h64c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm-32-96a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zm256-32H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H496c8.8 0 16 7.2 16 16s-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s7.2-16 16-16z">
                            </path>
                        </svg> &nbsp;Account</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="row settings--withdrawal-container m-0">
                            <hr style="background: black; color: black; border-color: black; height: 3px;">
                            <div class="col-sm-12">
                                <div class="d-flex justify-content-center">
                                    <p class="fs-5 lh-1 fw-semibold text-muted">Personal Information</p>
                                </div>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Full Name</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->actual_name }}</p>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Date of Birth</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">
                                    {{ $member->day }}-{{ $member->month }}-{{ $member->year }}</p>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Marital Status</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->marital_status }}</p>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Nationality</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->nationality }}</p>
                            </div>
                            <hr style="background: black; color: black; border-color: black; height: 3px;">
                            <div class="col-sm-12">
                                <div class="d-flex justify-content-center">
                                    <p class="fs-5 lh-1 fw-semibold text-muted">Address Information</p>
                                </div>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Country of Residence</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->country ?? '' }}</p>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">State / Region / Province</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->province ?? '' }}</p>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Town / City</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->city }}</p>
                            </div>
                            {{-- <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Street Address</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->unit_address }}</p>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Zip / Postal Code</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->zip_code }}</p>
                            </div> --}}
                            <hr style="background: black; color: black; border-color: black; height: 3px;">
                            <div class="col-sm-12">
                                <div class="d-flex justify-content-center">
                                    <p class="fs-5 lh-1 fw-semibold text-muted">Character References</p>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="d-flex justify-content-center">
                                    <p class="fs-6 lh-1 fw-semibold text-muted">Family</p>
                                </div>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Full Name</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->actual_name }}</p>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Relationship</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->marital_status }}</p>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Contact Number</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $user->phone }}</p>
                            </div>
                            <hr style="background: black; color: black; border-color: black; height: 3px;">
                            <div class="col-sm-12">
                                <div class="d-flex justify-content-center">
                                    <p class="fs-5 lh-1 fw-semibold text-muted">Identity Information</p>
                                </div>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">ID Type</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->id_card_type }}</p>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">ID Number</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->id_card_number }}</p>
                            </div>
                            <div class="col-sm-12">
                                <div class="d-flex justify-content-center">
                                    <p class="fs-6 lh-1 fw-semibold text-muted">Front Photo of ID</p>
                                </div>
                                <div class="d-flex justify-content-center"><img src="{{ asset($member->id_card_front) }}"
                                        alt="Preview" class="img-fluid" width="200"></div>
                            </div>
                            <div class="col-sm-12 mt-4">
                                <div class="d-flex justify-content-center">
                                    <p class="fs-6 lh-1 fw-semibold text-muted">Back Photo of ID</p>
                                </div>
                                <div class="d-flex justify-content-center"><img src="{{ asset($member->id_card_back) }}"
                                        alt="Preview" class="img-fluid" width="200"></div>
                            </div>
                            <div class="col-sm-12 mt-4">
                                <div class="d-flex justify-content-center">
                                    <p class="fs-6 lh-1 fw-semibold text-muted">Selfie Photo</p>
                                </div>
                                <div class="d-flex justify-content-center mb-4"><img
                                        src="{{ asset($member->selfie_photo) }}" alt="Preview" class="img-fluid"
                                        width="200"></div>
                            </div>
                            <hr style="background: black; color: black; border-color: black; height: 3px;">
                            <div class="col-sm-12">
                                <div class="d-flex justify-content-center">
                                    <p class="fs-5 lh-1 fw-semibold text-muted">Beneficiary Bank Account</p>
                                </div>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Name of Bank / E-Wallet</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left">{{ $member->bank_username }}</p>
                            </div>
                            <div class="col-5">
                                <p class="fs-6 lh-1 text-muted">Account Number</p>
                            </div>
                            <div class="col-7">
                                <p class="fs-6 lh-1 fw-semibold text-left show-hide"
                                    data-value='{{ $member->bank_number }}'>
                                    {{ substr($member->bank_number, 0, 3) }}●●●●●●
                                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye"
                                        class="svg-inline--fa fa-eye " role="img" xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 576 512" style="color: rgb(62, 152, 199);">
                                        <path fill="currentColor"
                                            d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
                                        </path>
                                    </svg>
                                </p>
                            </div>
                            <hr style="background: black; color: black; border-color: black; height: 3px;">
                            <div class="col-sm-12">
                                <div class="d-flex justify-content-center">
                                    <p class="fs-5 lh-1 fw-semibold text-muted">Signature</p>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="d-flex justify-content-center">
                                    <img src="{{ asset($member->signature ?? '') }}" alt="Preview" class="img-fluid"
                                        width="200">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    @include('app.contract')
    @include('app.transactions-modal')
@endsection
@push('script')
    <script>
        window.onload = function() {
            var canvas = document.getElementById('canvas'),
                ctx = canvas.getContext('2d'),
                cWidth = canvas.width,
                cHeight = canvas.height,
                score = canvas.attributes['data-score'].value,
                stage = ['Miskin', 'Sedang', 'Bagus', 'Bagus sekali', 'Sangat bagus'],
                radius = 150,
                deg0 = Math.PI / 9,
                deg1 = Math.PI * 11 / 45;

            if (score < 400 || score > 900) {
                alert('Credit Score Range：400~900');
            } else {
                var dot = new Dot(),
                    dotSpeed = 0.03,
                    textSpeed = Math.round(dotSpeed * 100 / deg1),
                    angle = 0,
                    credit = 400;

                (function drawFrame() {

                    ctx.save();
                    ctx.clearRect(0, 0, cWidth, cHeight);
                    ctx.translate(cWidth / 2, cHeight / 2);
                    ctx.rotate(8 * deg0);

                    dot.x = radius * Math.cos(angle);
                    dot.y = radius * Math.sin(angle);

                    var aim = (score - 400) * deg1 / 100;
                    if (angle < aim) {
                        angle += dotSpeed;
                    }
                    dot.draw(ctx);

                    if (credit < score - textSpeed) {
                        credit += textSpeed;
                    } else if (credit >= score - textSpeed && credit < score) {
                        credit += 1;
                    }
                    text(credit);

                    ctx.save();
                    ctx.beginPath();
                    ctx.lineWidth = 3;
                    ctx.strokeStyle = 'rgba(255, 255, 255, .5)';
                    ctx.arc(0, 0, radius, 0, angle, false);
                    ctx.stroke();
                    ctx.restore();

                    window.requestAnimationFrame(drawFrame);

                    ctx.save(); //中间刻度层
                    ctx.beginPath();
                    ctx.strokeStyle = 'rgba(255, 255, 255, .2)';
                    ctx.lineWidth = 10;
                    ctx.arc(0, 0, 135, 0, 11 * deg0, false);
                    ctx.stroke();
                    ctx.restore();

                    ctx.save(); // 刻度线
                    for (var i = 0; i < 6; i++) {
                        ctx.beginPath();
                        ctx.lineWidth = 2;
                        ctx.strokeStyle = 'rgba(255, 255, 255, .3)';
                        ctx.moveTo(140, 0);
                        ctx.lineTo(130, 0);
                        ctx.stroke();
                        ctx.rotate(deg1);
                    }
                    ctx.restore();

                    ctx.save(); // 细分刻度线
                    for (i = 0; i < 25; i++) {
                        if (i % 5 !== 0) {
                            ctx.beginPath();
                            ctx.lineWidth = 2;
                            ctx.strokeStyle = 'rgba(255, 255, 255, .1)';
                            ctx.moveTo(140, 0);
                            ctx.lineTo(133, 0);
                            ctx.stroke();
                        }
                        ctx.rotate(deg1 / 5);
                    }
                    ctx.restore();

                    ctx.save(); //信用分数
                    ctx.rotate(Math.PI / 2);
                    for (i = 0; i < 6; i++) {
                        ctx.fillStyle = 'rgba(255, 255, 255, .4)';
                        ctx.font = '10px Microsoft yahei';
                        ctx.textAlign = 'center';
                        ctx.fillText(400 + 100 * i, 0, -115);
                        ctx.rotate(deg1);
                    }
                    ctx.restore();


                    ctx.save(); //分数段
                    ctx.rotate(Math.PI / 2 + deg0);
                    for (i = 0; i < 5; i++) {
                        ctx.fillStyle = 'rgba(255, 255, 255, .4)';
                        ctx.font = '10px Microsoft yahei';
                        ctx.textAlign = 'center';
                        ctx.fillText(stage[i], 5, -115);
                        ctx.rotate(deg1);
                    }
                    ctx.restore();

                    ctx.save(); //信用阶段及评估时间文字
                    ctx.rotate(10 * deg0);
                    ctx.fillStyle = '#fff';
                    ctx.font = '28px Microsoft yahei';
                    ctx.textAlign = 'center';
                    if (score < 500) {
                        ctx.fillText('Bad Credit', 0, 40);
                    } else if (score < 600 && score >= 500) {
                        ctx.fillText('Medium Credit', 0, 40);
                    } else if (score < 700 && score >= 600) {
                        ctx.fillText('Good Credit', 0, 40);
                    } else if (score < 800 && score >= 700) {
                        ctx.fillText('Very Good Credit', 0, 40);
                    } else if (score <= 900 && score >= 800) {
                        ctx.fillText('Super Good Credit', 0, 40);
                    }

                    ctx.fillStyle = '#80cbfa';
                    ctx.font = '14px Microsoft yahei';
                    //   ctx.fillText('评估时间：2016.11.06', 0, 60);

                    ctx.fillStyle = '#7ec5f9';
                    ctx.font = '14px Microsoft yahei';
                    ctx.fillText('', 0, -60);
                    ctx.restore();

                    // ctx.save(); //最外层轨道
                    ctx.beginPath();
                    ctx.strokeStyle = 'rgba(255, 255, 255, .4)';
                    ctx.lineWidth = 8;
                    ctx.arc(0, 0, radius, 0, 11 * deg0, false);
                    ctx.stroke();
                    ctx.restore();

                })();
            }

            function Dot() {
                this.x = 0;
                this.y = 0;
                this.draw = function(ctx) {
                    ctx.save();
                    ctx.beginPath();
                    ctx.fillStyle = 'rgba(255, 255, 255, .7)';
                    ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
                    ctx.fill();
                    ctx.restore();
                };
            }

            function text(process) {
                ctx.save();
                ctx.rotate(10 * deg0);
                ctx.fillStyle = '#fff';
                ctx.font = '80px Microsoft yahei';
                ctx.textAlign = 'center';
                ctx.textBaseLine = 'top';
                ctx.fillText(process, 0, 10);
                ctx.restore();
            }
        };
    </script>
@endpush

@push('style')
    <style>
        .canvas_div {

            /*display: flex;*/
            /*justify-content: center;*/
            width: 320px;
            height: 320px;

            transform: scale(0.5, 0.5);
        }

        #canvas {
            /*            background: -webkit-linear-gradient(top, #000000e0 0%, #3bb4f2 100%);*/
            background: #3e98c7;
            background: -ms-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
            background: -moz-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
            background: linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
            border-radius: 170px;
            box-shadow: 0px 2px 14px 1px #000000;

        }

        .swal2-popup.swal2-toast {
            box-sizing: border-box;
            grid-column: 1/4 !important;
            grid-row: 1/4 !important;
            grid-template-columns: min-content auto min-content;
            padding: 1em;
            overflow-y: hidden;
            background: #fff;
            box-shadow: 0 0 1px rgba(0, 0, 0, .075), 0 1px 2px rgba(0, 0, 0, .075), 1px 2px 4px rgba(0, 0, 0, .075), 1px 3px 8px rgba(0, 0, 0, .075), 2px 4px 16px rgba(0, 0, 0, .075);
            pointer-events: all
        }

        .swal2-popup.swal2-toast>* {
            grid-column: 2
        }

        .swal2-popup.swal2-toast .swal2-title {
            margin: .5em 1em;
            padding: 0;
            font-size: 1em;
            text-align: initial
        }

        .swal2-popup.swal2-toast .swal2-loading {
            justify-content: center
        }

        .swal2-popup.swal2-toast .swal2-input {
            height: 2em;
            margin: .5em;
            font-size: 1em
        }

        .swal2-popup.swal2-toast .swal2-validation-message {
            font-size: 1em
        }

        .swal2-popup.swal2-toast .swal2-footer {
            margin: .5em 0 0;
            padding: .5em 0 0;
            font-size: .8em
        }

        .swal2-popup.swal2-toast .swal2-close {
            grid-column: 3/3;
            grid-row: 1/99;
            align-self: center;
            width: .8em;
            height: .8em;
            margin: 0;
            font-size: 2em
        }

        .swal2-popup.swal2-toast .swal2-html-container {
            margin: .5em 1em;
            padding: 0;
            overflow: initial;
            font-size: 1em;
            text-align: initial
        }

        .swal2-popup.swal2-toast .swal2-html-container:empty {
            padding: 0
        }

        .swal2-popup.swal2-toast .swal2-loader {
            grid-column: 1;
            grid-row: 1/99;
            align-self: center;
            width: 2em;
            height: 2em;
            margin: .25em
        }

        .swal2-popup.swal2-toast .swal2-icon {
            grid-column: 1;
            grid-row: 1/99;
            align-self: center;
            width: 2em;
            min-width: 2em;
            height: 2em;
            margin: 0 .5em 0 0
        }

        .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
            display: flex;
            align-items: center;
            font-size: 1.8em;
            font-weight: bold
        }

        .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
            width: 2em;
            height: 2em
        }

        .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
            top: .875em;
            width: 1.375em
        }

        .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
            left: .3125em
        }

        .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
            right: .3125em
        }

        .swal2-popup.swal2-toast .swal2-actions {
            justify-content: flex-start;
            height: auto;
            margin: 0;
            margin-top: .5em;
            padding: 0 .5em
        }

        .swal2-popup.swal2-toast .swal2-styled {
            margin: .25em .5em;
            padding: .4em .6em;
            font-size: 1em
        }

        .swal2-popup.swal2-toast .swal2-success {
            border-color: #a5dc86
        }

        .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
            position: absolute;
            width: 1.6em;
            height: 3em;
            border-radius: 50%
        }

        .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
            top: -0.8em;
            left: -0.5em;
            transform: rotate(-45deg);
            transform-origin: 2em 2em;
            border-radius: 4em 0 0 4em
        }

        .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
            top: -0.25em;
            left: .9375em;
            transform-origin: 0 1.5em;
            border-radius: 0 4em 4em 0
        }

        .swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
            width: 2em;
            height: 2em
        }

        .swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
            top: 0;
            left: .4375em;
            width: .4375em;
            height: 2.6875em
        }

        .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
            height: .3125em
        }

        .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
            top: 1.125em;
            left: .1875em;
            width: .75em
        }

        .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
            top: .9375em;
            right: .1875em;
            width: 1.375em
        }

        .swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
            animation: swal2-toast-animate-success-line-tip .75s
        }

        .swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
            animation: swal2-toast-animate-success-line-long .75s
        }

        .swal2-popup.swal2-toast.swal2-show {
            animation: swal2-toast-show .5s
        }

        .swal2-popup.swal2-toast.swal2-hide {
            animation: swal2-toast-hide .1s forwards
        }

        div:where(.swal2-container) {
            display: grid;
            position: fixed;
            z-index: 1060;
            inset: 0;
            box-sizing: border-box;
            grid-template-areas: "top-start     top            top-end" "center-start  center         center-end" "bottom-start  bottom-center  bottom-end";
            grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
            height: 100%;
            padding: .625em;
            overflow-x: hidden;
            transition: background-color .1s;
            -webkit-overflow-scrolling: touch
        }

        div:where(.swal2-container).swal2-backdrop-show,
        div:where(.swal2-container).swal2-noanimation {
            background: rgba(0, 0, 0, .4)
        }

        div:where(.swal2-container).swal2-backdrop-hide {
            background: rgba(0, 0, 0, 0) !important
        }

        div:where(.swal2-container).swal2-top-start,
        div:where(.swal2-container).swal2-center-start,
        div:where(.swal2-container).swal2-bottom-start {
            grid-template-columns: minmax(0, 1fr) auto auto
        }

        div:where(.swal2-container).swal2-top,
        div:where(.swal2-container).swal2-center,
        div:where(.swal2-container).swal2-bottom {
            grid-template-columns: auto minmax(0, 1fr) auto
        }

        div:where(.swal2-container).swal2-top-end,
        div:where(.swal2-container).swal2-center-end,
        div:where(.swal2-container).swal2-bottom-end {
            grid-template-columns: auto auto minmax(0, 1fr)
        }

        div:where(.swal2-container).swal2-top-start>.swal2-popup {
            align-self: start
        }

        div:where(.swal2-container).swal2-top>.swal2-popup {
            grid-column: 2;
            place-self: start center
        }

        div:where(.swal2-container).swal2-top-end>.swal2-popup,
        div:where(.swal2-container).swal2-top-right>.swal2-popup {
            grid-column: 3;
            place-self: start end
        }

        div:where(.swal2-container).swal2-center-start>.swal2-popup,
        div:where(.swal2-container).swal2-center-left>.swal2-popup {
            grid-row: 2;
            align-self: center
        }

        div:where(.swal2-container).swal2-center>.swal2-popup {
            grid-column: 2;
            grid-row: 2;
            place-self: center center
        }

        div:where(.swal2-container).swal2-center-end>.swal2-popup,
        div:where(.swal2-container).swal2-center-right>.swal2-popup {
            grid-column: 3;
            grid-row: 2;
            place-self: center end
        }

        div:where(.swal2-container).swal2-bottom-start>.swal2-popup,
        div:where(.swal2-container).swal2-bottom-left>.swal2-popup {
            grid-column: 1;
            grid-row: 3;
            align-self: end
        }

        div:where(.swal2-container).swal2-bottom>.swal2-popup {
            grid-column: 2;
            grid-row: 3;
            place-self: end center
        }

        div:where(.swal2-container).swal2-bottom-end>.swal2-popup,
        div:where(.swal2-container).swal2-bottom-right>.swal2-popup {
            grid-column: 3;
            grid-row: 3;
            place-self: end end
        }

        div:where(.swal2-container).swal2-grow-row>.swal2-popup,
        div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup {
            grid-column: 1/4;
            width: 100%
        }

        div:where(.swal2-container).swal2-grow-column>.swal2-popup,
        div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup {
            grid-row: 1/4;
            align-self: stretch
        }

        div:where(.swal2-container).swal2-no-transition {
            transition: none !important
        }

        div:where(.swal2-container) div:where(.swal2-popup) {
            display: none;
            position: relative;
            box-sizing: border-box;
            grid-template-columns: minmax(0, 100%);
            width: 32em;
            max-width: 100%;
            padding: 0 0 1.25em;
            border: none;
            border-radius: 5px;
            background: #fff;
            color: #545454;
            font-family: inherit;
            font-size: 1rem
        }

        div:where(.swal2-container) div:where(.swal2-popup):focus {
            outline: none
        }

        div:where(.swal2-container) div:where(.swal2-popup).swal2-loading {
            overflow-y: hidden
        }

        div:where(.swal2-container) h2:where(.swal2-title) {
            position: relative;
            max-width: 100%;
            margin: 0;
            padding: .8em 1em 0;
            color: inherit;
            font-size: 1.875em;
            font-weight: 600;
            text-align: center;
            text-transform: none;
            word-wrap: break-word
        }

        div:where(.swal2-container) div:where(.swal2-actions) {
            display: flex;
            z-index: 1;
            box-sizing: border-box;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            width: auto;
            margin: 1.25em auto 0;
            padding: 0
        }

        div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled[disabled] {
            opacity: .4
        }

        div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled:hover {
            background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))
        }

        div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled:active {
            background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2))
        }

        div:where(.swal2-container) div:where(.swal2-loader) {
            display: none;
            align-items: center;
            justify-content: center;
            width: 2.2em;
            height: 2.2em;
            margin: 0 1.875em;
            animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
            border-width: .25em;
            border-style: solid;
            border-radius: 100%;
            border-color: #2778c4 rgba(0, 0, 0, 0) #2778c4 rgba(0, 0, 0, 0)
        }

        div:where(.swal2-container) button:where(.swal2-styled) {
            margin: .3125em;
            padding: .625em 1.1em;
            transition: box-shadow .1s;
            box-shadow: 0 0 0 3px rgba(0, 0, 0, 0);
            font-weight: 500
        }

        div:where(.swal2-container) button:where(.swal2-styled):not([disabled]) {
            cursor: pointer
        }

        div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
            border: 0;
            border-radius: .25em;
            background: initial;
            background-color: #7066e0;
            color: #fff;
            font-size: 1em
        }

        div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):focus-visible {
            box-shadow: 0 0 0 3px rgba(112, 102, 224, .5)
        }

        div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny) {
            border: 0;
            border-radius: .25em;
            background: initial;
            background-color: #dc3741;
            color: #fff;
            font-size: 1em
        }

        div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):focus-visible {
            box-shadow: 0 0 0 3px rgba(220, 55, 65, .5)
        }

        div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel) {
            border: 0;
            border-radius: .25em;
            background: initial;
            background-color: #6e7881;
            color: #fff;
            font-size: 1em
        }

        div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):focus-visible {
            box-shadow: 0 0 0 3px rgba(110, 120, 129, .5)
        }

        div:where(.swal2-container) button:where(.swal2-styled).swal2-default-outline:focus-visible {
            box-shadow: 0 0 0 3px rgba(100, 150, 200, .5)
        }

        div:where(.swal2-container) button:where(.swal2-styled):focus-visible {
            outline: none
        }

        div:where(.swal2-container) button:where(.swal2-styled)::-moz-focus-inner {
            border: 0
        }

        div:where(.swal2-container) div:where(.swal2-footer) {
            margin: 1em 0 0;
            padding: 1em 1em 0;
            border-top: 1px solid #eee;
            color: inherit;
            font-size: 1em;
            text-align: center
        }

        div:where(.swal2-container) .swal2-timer-progress-bar-container {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            grid-column: auto !important;
            overflow: hidden;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px
        }

        div:where(.swal2-container) div:where(.swal2-timer-progress-bar) {
            width: 100%;
            height: .25em;
            background: rgba(0, 0, 0, .2)
        }

        div:where(.swal2-container) img:where(.swal2-image) {
            max-width: 100%;
            margin: 2em auto 1em
        }

        div:where(.swal2-container) button:where(.swal2-close) {
            z-index: 2;
            align-items: center;
            justify-content: center;
            width: 1.2em;
            height: 1.2em;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: -1.2em;
            padding: 0;
            overflow: hidden;
            transition: color .1s, box-shadow .1s;
            border: none;
            border-radius: 5px;
            background: rgba(0, 0, 0, 0);
            color: #ccc;
            font-family: monospace;
            font-size: 2.5em;
            cursor: pointer;
            justify-self: end
        }

        div:where(.swal2-container) button:where(.swal2-close):hover {
            transform: none;
            background: rgba(0, 0, 0, 0);
            color: #f27474
        }

        div:where(.swal2-container) button:where(.swal2-close):focus-visible {
            outline: none;
            box-shadow: inset 0 0 0 3px rgba(100, 150, 200, .5)
        }

        div:where(.swal2-container) button:where(.swal2-close)::-moz-focus-inner {
            border: 0
        }

        div:where(.swal2-container) .swal2-html-container {
            z-index: 1;
            justify-content: center;
            margin: 0;
            padding: 1em 1.6em .3em;
            overflow: auto;
            color: inherit;
            font-size: 1.125em;
            font-weight: normal;
            line-height: normal;
            text-align: center;
            word-wrap: break-word;
            word-break: break-word
        }

        div:where(.swal2-container) input:where(.swal2-input),
        div:where(.swal2-container) input:where(.swal2-file),
        div:where(.swal2-container) textarea:where(.swal2-textarea),
        div:where(.swal2-container) select:where(.swal2-select),
        div:where(.swal2-container) div:where(.swal2-radio),
        div:where(.swal2-container) label:where(.swal2-checkbox) {
            margin: 1em 2em 3px
        }

        div:where(.swal2-container) input:where(.swal2-input),
        div:where(.swal2-container) input:where(.swal2-file),
        div:where(.swal2-container) textarea:where(.swal2-textarea) {
            box-sizing: border-box;
            width: auto;
            transition: border-color .1s, box-shadow .1s;
            border: 1px solid #d9d9d9;
            border-radius: .1875em;
            background: rgba(0, 0, 0, 0);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px rgba(0, 0, 0, 0);
            color: inherit;
            font-size: 1.125em
        }

        div:where(.swal2-container) input:where(.swal2-input).swal2-inputerror,
        div:where(.swal2-container) input:where(.swal2-file).swal2-inputerror,
        div:where(.swal2-container) textarea:where(.swal2-textarea).swal2-inputerror {
            border-color: #f27474 !important;
            box-shadow: 0 0 2px #f27474 !important
        }

        div:where(.swal2-container) input:where(.swal2-input):focus,
        div:where(.swal2-container) input:where(.swal2-file):focus,
        div:where(.swal2-container) textarea:where(.swal2-textarea):focus {
            border: 1px solid #b4dbed;
            outline: none;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px rgba(100, 150, 200, .5)
        }

        div:where(.swal2-container) input:where(.swal2-input)::placeholder,
        div:where(.swal2-container) input:where(.swal2-file)::placeholder,
        div:where(.swal2-container) textarea:where(.swal2-textarea)::placeholder {
            color: #ccc
        }

        div:where(.swal2-container) .swal2-range {
            margin: 1em 2em 3px;
            background: #fff
        }

        div:where(.swal2-container) .swal2-range input {
            width: 80%
        }

        div:where(.swal2-container) .swal2-range output {
            width: 20%;
            color: inherit;
            font-weight: 600;
            text-align: center
        }

        div:where(.swal2-container) .swal2-range input,
        div:where(.swal2-container) .swal2-range output {
            height: 2.625em;
            padding: 0;
            font-size: 1.125em;
            line-height: 2.625em
        }

        div:where(.swal2-container) .swal2-input {
            height: 2.625em;
            padding: 0 .75em
        }

        div:where(.swal2-container) .swal2-file {
            width: 75%;
            margin-right: auto;
            margin-left: auto;
            background: rgba(0, 0, 0, 0);
            font-size: 1.125em
        }

        div:where(.swal2-container) .swal2-textarea {
            height: 6.75em;
            padding: .75em
        }

        div:where(.swal2-container) .swal2-select {
            min-width: 50%;
            max-width: 100%;
            padding: .375em .625em;
            background: rgba(0, 0, 0, 0);
            color: inherit;
            font-size: 1.125em
        }

        div:where(.swal2-container) .swal2-radio,
        div:where(.swal2-container) .swal2-checkbox {
            align-items: center;
            justify-content: center;
            background: #fff;
            color: inherit
        }

        div:where(.swal2-container) .swal2-radio label,
        div:where(.swal2-container) .swal2-checkbox label {
            margin: 0 .6em;
            font-size: 1.125em
        }

        div:where(.swal2-container) .swal2-radio input,
        div:where(.swal2-container) .swal2-checkbox input {
            flex-shrink: 0;
            margin: 0 .4em
        }

        div:where(.swal2-container) label:where(.swal2-input-label) {
            display: flex;
            justify-content: center;
            margin: 1em auto 0
        }

        div:where(.swal2-container) div:where(.swal2-validation-message) {
            align-items: center;
            justify-content: center;
            margin: 1em 0 0;
            padding: .625em;
            overflow: hidden;
            background: #f0f0f0;
            color: #666;
            font-size: 1em;
            font-weight: 300
        }

        div:where(.swal2-container) div:where(.swal2-validation-message)::before {
            content: "!";
            display: inline-block;
            width: 1.5em;
            min-width: 1.5em;
            height: 1.5em;
            margin: 0 .625em;
            border-radius: 50%;
            background-color: #f27474;
            color: #fff;
            font-weight: 600;
            line-height: 1.5em;
            text-align: center
        }

        div:where(.swal2-container) .swal2-progress-steps {
            flex-wrap: wrap;
            align-items: center;
            max-width: 100%;
            margin: 1.25em auto;
            padding: 0;
            background: rgba(0, 0, 0, 0);
            font-weight: 600
        }

        div:where(.swal2-container) .swal2-progress-steps li {
            display: inline-block;
            position: relative
        }

        div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step {
            z-index: 20;
            flex-shrink: 0;
            width: 2em;
            height: 2em;
            border-radius: 2em;
            background: #2778c4;
            color: #fff;
            line-height: 2em;
            text-align: center
        }

        div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
            background: #2778c4
        }

        div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step {
            background: #add8e6;
            color: #fff
        }

        div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line {
            background: #add8e6
        }

        div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step-line {
            z-index: 10;
            flex-shrink: 0;
            width: 2.5em;
            height: .4em;
            margin: 0 -1px;
            background: #2778c4
        }

        div:where(.swal2-icon) {
            position: relative;
            box-sizing: content-box;
            justify-content: center;
            width: 5em;
            height: 5em;
            margin: 2.5em auto .6em;
            border: 0.25em solid rgba(0, 0, 0, 0);
            border-radius: 50%;
            border-color: #000;
            font-family: inherit;
            line-height: 5em;
            cursor: default;
            user-select: none
        }

        div:where(.swal2-icon) .swal2-icon-content {
            display: flex;
            align-items: center;
            font-size: 3.75em
        }

        div:where(.swal2-icon).swal2-error {
            border-color: #f27474;
            color: #f27474
        }

        div:where(.swal2-icon).swal2-error .swal2-x-mark {
            position: relative;
            flex-grow: 1
        }

        div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
            display: block;
            position: absolute;
            top: 2.3125em;
            width: 2.9375em;
            height: .3125em;
            border-radius: .125em;
            background-color: #f27474
        }

        div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=left] {
            left: 1.0625em;
            transform: rotate(45deg)
        }

        div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=right] {
            right: 1em;
            transform: rotate(-45deg)
        }

        div:where(.swal2-icon).swal2-error.swal2-icon-show {
            animation: swal2-animate-error-icon .5s
        }

        div:where(.swal2-icon).swal2-error.swal2-icon-show .swal2-x-mark {
            animation: swal2-animate-error-x-mark .5s
        }

        div:where(.swal2-icon).swal2-warning {
            border-color: #facea8;
            color: #f8bb86
        }

        div:where(.swal2-icon).swal2-warning.swal2-icon-show {
            animation: swal2-animate-error-icon .5s
        }

        div:where(.swal2-icon).swal2-warning.swal2-icon-show .swal2-icon-content {
            animation: swal2-animate-i-mark .5s
        }

        div:where(.swal2-icon).swal2-info {
            border-color: #9de0f6;
            color: #3fc3ee
        }

        div:where(.swal2-icon).swal2-info.swal2-icon-show {
            animation: swal2-animate-error-icon .5s
        }

        div:where(.swal2-icon).swal2-info.swal2-icon-show .swal2-icon-content {
            animation: swal2-animate-i-mark .8s
        }

        div:where(.swal2-icon).swal2-question {
            border-color: #c9dae1;
            color: #87adbd
        }

        div:where(.swal2-icon).swal2-question.swal2-icon-show {
            animation: swal2-animate-error-icon .5s
        }

        div:where(.swal2-icon).swal2-question.swal2-icon-show .swal2-icon-content {
            animation: swal2-animate-question-mark .8s
        }

        div:where(.swal2-icon).swal2-success {
            border-color: #a5dc86;
            color: #a5dc86
        }

        div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line] {
            position: absolute;
            width: 3.75em;
            height: 7.5em;
            border-radius: 50%
        }

        div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left] {
            top: -0.4375em;
            left: -2.0635em;
            transform: rotate(-45deg);
            transform-origin: 3.75em 3.75em;
            border-radius: 7.5em 0 0 7.5em
        }

        div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right] {
            top: -0.6875em;
            left: 1.875em;
            transform: rotate(-45deg);
            transform-origin: 0 3.75em;
            border-radius: 0 7.5em 7.5em 0
        }

        div:where(.swal2-icon).swal2-success .swal2-success-ring {
            position: absolute;
            z-index: 2;
            top: -0.25em;
            left: -0.25em;
            box-sizing: content-box;
            width: 100%;
            height: 100%;
            border: .25em solid rgba(165, 220, 134, .3);
            border-radius: 50%
        }

        div:where(.swal2-icon).swal2-success .swal2-success-fix {
            position: absolute;
            z-index: 1;
            top: .5em;
            left: 1.625em;
            width: .4375em;
            height: 5.625em;
            transform: rotate(-45deg)
        }

        div:where(.swal2-icon).swal2-success [class^=swal2-success-line] {
            display: block;
            position: absolute;
            z-index: 2;
            height: .3125em;
            border-radius: .125em;
            background-color: #a5dc86
        }

        div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip] {
            top: 2.875em;
            left: .8125em;
            width: 1.5625em;
            transform: rotate(45deg)
        }

        div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long] {
            top: 2.375em;
            right: .5em;
            width: 2.9375em;
            transform: rotate(-45deg)
        }

        div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-tip {
            animation: swal2-animate-success-line-tip .75s
        }

        div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-long {
            animation: swal2-animate-success-line-long .75s
        }

        div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-circular-line-right {
            animation: swal2-rotate-success-circular-line 4.25s ease-in
        }

        [class^=swal2] {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
        }

        .swal2-show {
            animation: swal2-show .3s
        }

        .swal2-hide {
            animation: swal2-hide .15s forwards
        }

        .swal2-noanimation {
            transition: none
        }

        .swal2-scrollbar-measure {
            position: absolute;
            top: -9999px;
            width: 50px;
            height: 50px;
            overflow: scroll
        }

        .swal2-rtl .swal2-close {
            margin-right: initial;
            margin-left: 0
        }

        .swal2-rtl .swal2-timer-progress-bar {
            right: 0;
            left: auto
        }

        @keyframes swal2-toast-show {
            0% {
                transform: translateY(-0.625em) rotateZ(2deg)
            }

            33% {
                transform: translateY(0) rotateZ(-2deg)
            }

            66% {
                transform: translateY(0.3125em) rotateZ(2deg)
            }

            100% {
                transform: translateY(0) rotateZ(0deg)
            }
        }

        @keyframes swal2-toast-hide {
            100% {
                transform: rotateZ(1deg);
                opacity: 0
            }
        }

        @keyframes swal2-toast-animate-success-line-tip {
            0% {
                top: .5625em;
                left: .0625em;
                width: 0
            }

            54% {
                top: .125em;
                left: .125em;
                width: 0
            }

            70% {
                top: .625em;
                left: -0.25em;
                width: 1.625em
            }

            84% {
                top: 1.0625em;
                left: .75em;
                width: .5em
            }

            100% {
                top: 1.125em;
                left: .1875em;
                width: .75em
            }
        }

        @keyframes swal2-toast-animate-success-line-long {
            0% {
                top: 1.625em;
                right: 1.375em;
                width: 0
            }

            65% {
                top: 1.25em;
                right: .9375em;
                width: 0
            }

            84% {
                top: .9375em;
                right: 0;
                width: 1.125em
            }

            100% {
                top: .9375em;
                right: .1875em;
                width: 1.375em
            }
        }

        @keyframes swal2-show {
            0% {
                transform: scale(0.7)
            }

            45% {
                transform: scale(1.05)
            }

            80% {
                transform: scale(0.95)
            }

            100% {
                transform: scale(1)
            }
        }

        @keyframes swal2-hide {
            0% {
                transform: scale(1);
                opacity: 1
            }

            100% {
                transform: scale(0.5);
                opacity: 0
            }
        }

        @keyframes swal2-animate-success-line-tip {
            0% {
                top: 1.1875em;
                left: .0625em;
                width: 0
            }

            54% {
                top: 1.0625em;
                left: .125em;
                width: 0
            }

            70% {
                top: 2.1875em;
                left: -0.375em;
                width: 3.125em
            }

            84% {
                top: 3em;
                left: 1.3125em;
                width: 1.0625em
            }

            100% {
                top: 2.8125em;
                left: .8125em;
                width: 1.5625em
            }
        }

        @keyframes swal2-animate-success-line-long {
            0% {
                top: 3.375em;
                right: 2.875em;
                width: 0
            }

            65% {
                top: 3.375em;
                right: 2.875em;
                width: 0
            }

            84% {
                top: 2.1875em;
                right: 0;
                width: 3.4375em
            }

            100% {
                top: 2.375em;
                right: .5em;
                width: 2.9375em
            }
        }

        @keyframes swal2-rotate-success-circular-line {
            0% {
                transform: rotate(-45deg)
            }

            5% {
                transform: rotate(-45deg)
            }

            12% {
                transform: rotate(-405deg)
            }

            100% {
                transform: rotate(-405deg)
            }
        }

        @keyframes swal2-animate-error-x-mark {
            0% {
                margin-top: 1.625em;
                transform: scale(0.4);
                opacity: 0
            }

            50% {
                margin-top: 1.625em;
                transform: scale(0.4);
                opacity: 0
            }

            80% {
                margin-top: -0.375em;
                transform: scale(1.15)
            }

            100% {
                margin-top: 0;
                transform: scale(1);
                opacity: 1
            }
        }

        @keyframes swal2-animate-error-icon {
            0% {
                transform: rotateX(100deg);
                opacity: 0
            }

            100% {
                transform: rotateX(0deg);
                opacity: 1
            }
        }

        @keyframes swal2-rotate-loading {
            0% {
                transform: rotate(0deg)
            }

            100% {
                transform: rotate(360deg)
            }
        }

        @keyframes swal2-animate-question-mark {
            0% {
                transform: rotateY(-360deg)
            }

            100% {
                transform: rotateY(0)
            }
        }

        @keyframes swal2-animate-i-mark {
            0% {
                transform: rotateZ(45deg);
                opacity: 0
            }

            25% {
                transform: rotateZ(-25deg);
                opacity: .4
            }

            50% {
                transform: rotateZ(15deg);
                opacity: .8
            }

            75% {
                transform: rotateZ(-5deg);
                opacity: 1
            }

            100% {
                transform: rotateX(0);
                opacity: 1
            }
        }

        body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
            overflow: hidden
        }

        body.swal2-height-auto {
            height: auto !important
        }

        body.swal2-no-backdrop .swal2-container {
            background-color: rgba(0, 0, 0, 0) !important;
            pointer-events: none
        }

        body.swal2-no-backdrop .swal2-container .swal2-popup {
            pointer-events: all
        }

        body.swal2-no-backdrop .swal2-container .swal2-modal {
            box-shadow: 0 0 10px rgba(0, 0, 0, .4)
        }

        @media print {
            body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
                overflow-y: scroll !important
            }

            body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown)>[aria-hidden=true] {
                display: none
            }

            body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
                position: static !important
            }
        }

        body.swal2-toast-shown .swal2-container {
            box-sizing: border-box;
            width: 360px;
            max-width: 100%;
            background-color: rgba(0, 0, 0, 0);
            pointer-events: none
        }

        body.swal2-toast-shown .swal2-container.swal2-top {
            inset: 0 auto auto 50%;
            transform: translateX(-50%)
        }

        body.swal2-toast-shown .swal2-container.swal2-top-end,
        body.swal2-toast-shown .swal2-container.swal2-top-right {
            inset: 0 0 auto auto
        }

        body.swal2-toast-shown .swal2-container.swal2-top-start,
        body.swal2-toast-shown .swal2-container.swal2-top-left {
            inset: 0 auto auto 0
        }

        body.swal2-toast-shown .swal2-container.swal2-center-start,
        body.swal2-toast-shown .swal2-container.swal2-center-left {
            inset: 50% auto auto 0;
            transform: translateY(-50%)
        }

        body.swal2-toast-shown .swal2-container.swal2-center {
            inset: 50% auto auto 50%;
            transform: translate(-50%, -50%)
        }

        body.swal2-toast-shown .swal2-container.swal2-center-end,
        body.swal2-toast-shown .swal2-container.swal2-center-right {
            inset: 50% 0 auto auto;
            transform: translateY(-50%)
        }

        body.swal2-toast-shown .swal2-container.swal2-bottom-start,
        body.swal2-toast-shown .swal2-container.swal2-bottom-left {
            inset: auto auto 0 0
        }

        body.swal2-toast-shown .swal2-container.swal2-bottom {
            inset: auto auto 0 50%;
            transform: translateX(-50%)
        }

        body.swal2-toast-shown .swal2-container.swal2-bottom-end,
        body.swal2-toast-shown .swal2-container.swal2-bottom-right {
            inset: auto 0 0 auto
        }
    </style>
    <style>
        .header[_ngcontent-ng-c1540578384] {
            background-color: #007bff;
            padding: 15px;
            text-align: center;
            color: #fff;
            font-weight: 700;
            font-size: 1.5rem
        }

        .profile-card[_ngcontent-ng-c1540578384] {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 15px;
            margin-top: -50px;
            box-shadow: 0 2px 5px #0000001a
        }

        .profile-card[_ngcontent-ng-c1540578384] img[_ngcontent-ng-c1540578384] {
            border-radius: 50%;
            width: 60px;
            height: 60px
        }

        .profile-card[_ngcontent-ng-c1540578384] h5[_ngcontent-ng-c1540578384] {
            font-weight: 700
        }

        .profile-card[_ngcontent-ng-c1540578384] p[_ngcontent-ng-c1540578384] {
            color: #888
        }

        .option-item[_ngcontent-ng-c1540578384] {
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: center
        }

        .option-item[_ngcontent-ng-c1540578384] i[_ngcontent-ng-c1540578384] {
            font-size: 1.5rem;
            color: #007bff;
            margin-right: 15px
        }

        .option-item[_ngcontent-ng-c1540578384] p[_ngcontent-ng-c1540578384] {
            margin: 0
        }

        .option-item[_ngcontent-ng-c1540578384] small[_ngcontent-ng-c1540578384] {
            color: #888
        }

        .gauge-container[_ngcontent-ng-c1540578384] {
            width: 300px;
            height: 150px;
            position: relative;
            margin: auto
        }

        .gauge[_ngcontent-ng-c1540578384] {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        .gauge__background[_ngcontent-ng-c1540578384] {
            width: 100%;
            height: 100%;
            border-radius: 100%;
            background: conic-gradient(red 0deg 60deg, #ff7f00 60deg 120deg, #ff0 120deg 180deg, #7fff00 180deg 240deg, #0f0 240deg 300deg)
        }

        .gauge__cover[_ngcontent-ng-c1540578384] {
            position: absolute;
            width: 70%;
            height: 70%;
            background: #fff;
            border-radius: 100%;
            top: 15%;
            left: 15%;
            z-index: 1
        }

        .gauge__needle[_ngcontent-ng-c1540578384] {
            position: absolute;
            width: 2px;
            height: 40%;
            background: #000;
            top: 50%;
            left: 50%;
            transform-origin: 50% 100%;
            transform: rotate(135deg);
            z-index: 2
        }

        .gauge__segments[_ngcontent-ng-c1540578384] {
            position: absolute;
            top: 100%;
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            font-size: 10px
        }

        .segment[_ngcontent-ng-c1540578384] {
            width: 20%;
            text-align: center
        }

        .segment--poor[_ngcontent-ng-c1540578384] {
            color: red
        }

        .segment--fair[_ngcontent-ng-c1540578384] {
            color: #ff7f00
        }

        .segment--good[_ngcontent-ng-c1540578384] {
            color: #ff0
        }

        .segment--very-good[_ngcontent-ng-c1540578384] {
            color: #7fff00
        }

        .segment--excellent[_ngcontent-ng-c1540578384] {
            color: #0f0
        }

        .gauge__score[_ngcontent-ng-c1540578384] {
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2.5em;
            font-weight: 700;
            text-align: center;
            z-index: 3
        }

        .gauge__status[_ngcontent-ng-c1540578384] {
            font-size: .5em;
            display: block
        }
    </style>
    <style>
        .nav-link[_ngcontent-ng-c4198773203] {
            font-size: 1.1rem;
            color: #000 !important;
            font-weight: bolder
        }

        .nav-link.btn-primary2[_ngcontent-ng-c4198773203] {
            background-color: #004aad;
            border-radius: 5px
        }

        .nav-link.btn-primary2[_ngcontent-ng-c4198773203]:hover {
            background-color: #003b8e
        }

        .btn-primary2[_ngcontent-ng-c4198773203] {
            background-color: #0d6efd !important;
            color: #fff !important
        }

        .navbar[_ngcontent-ng-c4198773203] {
            margin-bottom: 0;
            padding-bottom: 0
        }

        .container[_ngcontent-ng-c4198773203] {
            margin-top: 0;
            padding-top: 0
        }

        .navbar-nav[_ngcontent-ng-c4198773203] .nav-link[_ngcontent-ng-c4198773203] {
            line-height: 1.5
        }

        .header-layout[_ngcontent-ng-c4198773203] {
            background: linear-gradient(90deg, #3e98c7, #212529)
        }

        .header-layout[_ngcontent-ng-c4198773203] a[_ngcontent-ng-c4198773203] {
            color: #fff
        }

        .navbar-toggler[_ngcontent-ng-c4198773203] {
            border-color: #ffffff80
        }

        .navbar-toggler-icon[_ngcontent-ng-c4198773203] {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='30' height='30'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
        }

        .btn-close[_ngcontent-ng-c4198773203] {
            filter: invert(1)
        }

        .myButton[_ngcontent-ng-c4198773203] {
            box-shadow: inset 0 1px #fff;
            background: linear-gradient(to bottom, #ededed 5%, #dfdfdf);
            background-color: #ededed;
            border-radius: 6px;
            border: 1px solid #dcdcdc;
            display: inline-block;
            cursor: pointer;
            color: #030000 !important;
            font-family: Arial;
            font-size: 15px;
            font-weight: 700;
            padding: 6px 24px;
            text-decoration: none;
            text-shadow: 0px 1px 0px #ffffff
        }

        .myButton[_ngcontent-ng-c4198773203]:hover {
            background: linear-gradient(to bottom, #dfdfdf 5%, #ededed);
            background-color: #dfdfdf
        }

        .myButton[_ngcontent-ng-c4198773203]:active {
            position: relative;
            top: 1px
        }
    </style>
    <style>
        .footer-layout[_ngcontent-ng-c2048083553] {
            background: linear-gradient(90deg, #212529, #212529)
        }
    </style>
@endpush