@extends('layouts.dashboard',['title'=> "Dashboard"])
<style>
    .frame-94 {
        background: #ffffff;
        border-radius: 12px;
        border-style: solid;
        border-color: #f1f1f4;
        border-width: 1px;
        padding: 21px 1px 21px 1px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: flex-start;
        height: 416px;
        box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    }

    .frame-63 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        width: 471px;
    }

    .jason-tatum {
        color: #071437;
        text-align: left;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 24px;
        font-weight: 600;
    }

    .header {
        flex-shrink: 0;
        width: 64px;
        height: 64px;
    }

    .avatar {
        width: 64px;
        height: 64px;
    }

    .rectangle-283 {
        background: #f1faff;
        border-radius: 50px;
        width: 64px;
        height: 64px;
    }

    .frame-18 {
        display: flex;
        flex-direction: column;
        gap: 0px;
        align-items: center;
        justify-content: flex-start;
    }

    .s {
        color: #00a3ff;
        text-align: center;
        font-family: "Roboto-Medium", sans-serif;
        font-size: 28px;
        font-weight: 500;

    }

    ._150-9-4 {
        border-radius: 60px;
        width: 64px;
        height: 64px;
        object-fit: cover;
    }

    .active {
        width: 12px;
        height: 12px;
    }

    .rectangle-281 {
        background: #50cd89;
        border-radius: 10px;
        width: 12px;
        height: 12px;
    }

    .frame-76 {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        justify-content: flex-start;
        align-self: stretch;
        flex-shrink: 0;

    }

    .frame-75 {
        align-self: stretch;
        flex-shrink: 0;
        height: 39.5px;

    }

    .group-147 {
        inset: 0;
    }

    .rectangle {
        background: #f1f1f4;
        width: 141.83px;
        height: 1px;
    }

    .rectangle2 {
        background: #f1f1f4;
        width: 257.22px;
        height: 1px;
    }

    .rectangle3 {
        background: #f1f1f4;
        width: 133.95px;
        height: 1px;
    }

    .frame-65 {
        display: flex;
        flex-direction: row;
        gap: 58px;
        align-items: center;
        justify-content: flex-start;
    }

    .availability {
        color: #3f4254;
        text-align: left;
        font-family: "Poppins-SemiBold", sans-serif;
        font-size: 13px;
        line-height: 20px;
        font-weight: 600;

    }

    .frame-64 {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: flex-start;
        flex-shrink: 0;

    }

    .button {
        background: #c9f7f5;
        border-radius: 5.76px;
        padding: 4px 9px 4px 9px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 24.96px;

    }

    .active2 {
        color: #1bc5bd;
        text-align: left;
        font-family: "Poppins-Medium", sans-serif;
        font-size: 10.559999465942383px;
        font-weight: 500;

    }

    .button2 {
        background: #fff4de;
        border-radius: 5.76px;
        padding: 5px 7px 5px 7px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 24.96px;

    }

    .inactive {
        color: #ffa800;
        text-align: left;
        font-family: "Poppins-Medium", sans-serif;
        font-size: 10.559999465942383px;
        font-weight: 500;

    }

    .button3 {
        background: #ffe2e5;
        border-radius: 5.76px;
        padding: 5px 3px 5px 3px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 24.96px;

    }

    .relieved {
        color: #f64e60;
        text-align: left;
        font-family: "Poppins-Medium", sans-serif;
        font-size: 10.559999465942383px;
        font-weight: 500;

    }

    .frame-74 {
        align-self: stretch;
        flex-shrink: 0;
        height: 38.5px;

    }

    .group-148 {
        inset: 0;
    }

    .frame-66 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 213px;
    }

    .birthday {
        color: #3f4254;
        text-align: left;
        font-family: "Poppins-SemiBold", sans-serif;
        font-size: 13px;
        line-height: 20px;
        font-weight: 600;

    }

    ._28-may-1996 {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 13px;
        line-height: 20px;
        font-weight: 400;

        width: 85px;
    }

    .frame-73 {
        align-self: stretch;
        flex-shrink: 0;
        height: 38.5px;

    }

    .group-149 {
        inset: 0;
    }

    .frame-67 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 160px;
    }

    .gender {
        color: #3f4254;
        text-align: left;
        font-family: "Poppins-SemiBold", sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;

    }

    .male {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;

        width: 32px;
    }

    .frame-762 {
        align-self: stretch;
        flex-shrink: 0;
        height: 38.5px;

    }

    .email {
        color: #3f4254;
        text-align: left;
        font-family: "Poppins-SemiBold", sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
    }

    .emailaddress-gmail-com {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
    }

    .frame-72 {
        align-self: stretch;
        flex-shrink: 0;
        height: 33.5px;

    }

    .frame-69 {
        display: flex;
        flex-direction: row;
        gap: 0px;
        align-items: center;
        justify-content: flex-start;
    }

    .rectangle4 {
        background: #f1f1f4;
        flex-shrink: 0;
        width: 141.83px;
        height: 1px;

    }

    .rectangle5 {
        background: #f1f1f4;
        flex-shrink: 0;
        width: 257.22px;
        height: 1px;

    }

    .rectangle6 {
        background: #f1f1f4;
        flex-shrink: 0;
        width: 133.95px;
        height: 1px;

    }

    .frame-71 {
        width: 442.26px;
        height: 20px;
    }

    .frame-79 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 442.26px;
    }

    .phone {
        color: #3f4254;
        text-align: left;
        font-family: "Poppins-SemiBold", sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;

    }

    .frame-78 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        width: 314.26px;

    }

    ._0938072918-0832879123 {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 13px;
        line-height: 18px;
        font-weight: 400;

    }

    .frame-68 {
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: center;
        justify-content: flex-start;
        flex-shrink: 0;
        width: 25.26px;

    }

    .add {
        color: #1b84ff;
        text-align: center;
        font-family: "Inter-Regular", sans-serif;
        font-size: 11px;
        line-height: 12px;
        font-weight: 400;

        align-self: stretch;
    }

    .rectangle7 {
        background: #1b84ff;
        align-self: stretch;
        flex-shrink: 0;
        height: 1px;

    }

    .frame-77 {
        align-self: stretch;
        flex-shrink: 0;
        height: 33.5px;

    }

    .frame-712 {
        width: 445.26px;
        height: 20px;
    }

    .address {
        color: #3f4254;
        text-align: left;
        font-family: "Poppins-SemiBold", sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
    }

    .random-address-lagos-nigeria {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 13px;
        line-height: 18px;
        font-weight: 400;
    }

    .frame-682 {
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: center;
        justify-content: flex-start;
        width: 25.26px;
    }




    .map,
    .map * {
        box-sizing: border-box;
    }

    .map {
        background: #f5f8fa;
        border-radius: 12px;
        border-style: solid;
        border-color: #f5f8fa;
        border-width: 12px;
        height: 416px;
        overflow: hidden;
    }

    .image-45 {
        width: 659.91px;
        height: 415.66px;
        object-fit: cover;
    }

    .mdi-location {
        width: 68px;
        height: 68px;
        overflow: visible;
    }


    .frame-95,
    .frame-95 * {
        box-sizing: border-box;
    }

    .frame-95 {
        background: #ffffff;
        border-radius: 12px;
        border-style: solid;
        border-color: #ffffff;
        border-width: 1px;
        padding: 13px 31px 13px 31px;
        height: 330px;
        box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    }

    .frame-105 {
        height: 268px;
    }

    .frame-87 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 473px;
        height: 32px;
    }

    .work-experience {
        color: #071437;
        text-align: left;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;

    }

    .frame-83 {
        background: #3f4254;
        border-radius: 6px;
        padding: 9px 22px 9px 22px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 97px;
        height: 38px;

    }

    .add-new {
        color: #ffffff;
        text-align: center;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 11px;
        line-height: 12px;
        font-weight: 600;

    }

    .frame-104 {
        width: 473px;
        height: 212px;
    }

    .frame-102 {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        justify-content: flex-start;
        width: 473px;
    }

    .frame-86 {
        border-radius: 12px;
        border-style: solid;
        border-color: #f1f1f4;
        border-width: 1px;
        padding: 11px 15px 11px 15px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        justify-content: center;
        align-self: stretch;
        flex-shrink: 0;
        height: 61px;

    }

    .frame-85 {
        display: flex;
        flex-direction: row;
        gap: 14px;
        align-items: center;
        justify-content: flex-start;
        flex-shrink: 0;

    }

    .image {
        background: #d9d9d9;
        flex-shrink: 0;
        width: 24px;
        height: 24px;

    }

    .frame-84 {
        display: flex;
        flex-direction: column;
        gap: 0px;
        align-items: flex-start;
        justify-content: flex-start;
        flex-shrink: 0;

    }

    .teams-supervisor {
        color: #071437;
        text-align: left;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;

        align-self: stretch;
    }

    .nedbank-security-mar-2019 {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 13px;
        line-height: 18px;
        font-weight: 400;

    }

    .frame-89 {
        border-radius: 12px;
        border-style: solid;
        border-color: #f1f1f4;
        border-width: 1px;
        padding: 11px 15px 11px 15px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        justify-content: center;
        align-self: stretch;
        flex-shrink: 0;
        height: 61px;

    }

    .operations-lead {
        color: #071437;
        text-align: left;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;

        align-self: stretch;
    }

    .randers-security-mar-2016 {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 13px;
        line-height: 18px;
        font-weight: 400;

    }

    .skills {
        color: #000000;
        text-align: left;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
    }

    .group-154 {
        inset: 0;
    }

    .frame-93 {
        background: #f1f1f4;
        border-radius: 4px;
        padding: 5px 7px 5px 7px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 77px;
        height: 23px;
    }

    .web-design {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 11px;
        line-height: 11px;
        font-weight: 400;

    }

    .frame-94 {
        background: #f1f1f4;
        border-radius: 4px;
        padding: 5px 7px 5px 7px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        height: 23px;
    }

    .code-review {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 11px;
        line-height: 11px;
        font-weight: 400;

    }

    .frame-952 {
        background: #f1f1f4;
        border-radius: 4px;
        padding: 5px 7px 5px 7px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 55px;
        height: 23px;
    }

    .no-code {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 11px;
        line-height: 11px;
        font-weight: 400;

    }

    .frame-96 {
        background: #f1f1f4;
        border-radius: 4px;
        padding: 5px 7px 5px 7px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 23px;
    }

    .ux {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 11px;
        line-height: 11px;
        font-weight: 400;

    }

    .frame-100 {
        background: #f1f1f4;
        border-radius: 4px;
        padding: 5px 7px 5px 7px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 23px;
    }

    .figma {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 11px;
        line-height: 11px;
        font-weight: 400;

    }

    .frame-99 {
        background: #f1f1f4;
        border-radius: 4px;
        padding: 5px 7px 5px 7px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 23px;
    }

    .webflow {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 11px;
        line-height: 11px;
        font-weight: 400;

    }

    .frame-98 {
        background: #f1f1f4;
        border-radius: 4px;
        padding: 5px 7px 5px 7px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 25px;
        height: 23px;
    }

    .ai {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 11px;
        line-height: 11px;
        font-weight: 400;

    }

    .frame-97 {
        background: #f1f1f4;
        border-radius: 4px;
        padding: 5px 7px 5px 7px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 83px;
        height: 23px;
    }

    .management {
        color: #4b5675;
        text-align: left;
        font-family: "Inter-Regular", sans-serif;
        font-size: 11px;
        line-height: 11px;
        font-weight: 400;

    }

    .frame-68 {
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: center;
        justify-content: flex-start;
        width: 25.26px;
    }

    .add {
        color: #1b84ff;
        text-align: center;
        font-family: "Inter-Regular", sans-serif;
        font-size: 11px;
        line-height: 12px;
        font-weight: 400;

        align-self: stretch;
    }

    .rectangle {
        background: #1b84ff;
        align-self: stretch;
        flex-shrink: 0;
        height: 1px;

    }




    .widget-17,
    .widget-17 * {
        box-sizing: border-box;
    }

    .widget-17 {
        background: #ffffff;
        border-radius: 12px;
        border-style: solid;
        border-color: #f1f1f4;
        border-width: 1px;
        padding: 25px 28px 25px 28px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        justify-content: flex-start;
        box-shadow: 0px 0px 28.8px 0px rgba(56, 71, 109, 0.09);
        overflow: hidden;
    }

    .frame-1686552315 {
        display: flex;
        flex-direction: column;
        gap: 54px;
        align-items: flex-start;
        justify-content: flex-start;
        flex-shrink: 0;
    }

    .current-deployment {
        color: #3f4254;
        text-align: left;
        font-family: "Poppins-SemiBold", sans-serif;
        font-size: 18px;
        line-height: 20.16px;
        font-weight: 600;

        align-self: stretch;
    }

    .frame-1686552314 {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
        justify-content: flex-start;
        align-self: stretch;
        flex-shrink: 0;

    }

    .frame-1686552309 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        width: 338px;

    }

    .branch {
        color: #3f4254;
        text-align: left;
        font-family: "Poppins-SemiBold", sans-serif;
        font-size: 14px;
        font-weight: 600;

    }

    .vgc-lagos-island {
        color: #b5b5c3;
        text-align: left;
        font-family: "Poppins-Medium", sans-serif;
        font-size: 14px;
        font-weight: 500;

    }

    .frame-1686552310 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        align-self: stretch;
        flex-shrink: 0;

    }

    .unit {
        color: #3f4254;
        text-align: left;
        font-family: "Poppins-SemiBold", sans-serif;
        font-size: 14px;
        font-weight: 600;

    }

    ._124-akanbi-road-vgc-etiosa-lagos {
        color: #b5b5c3;
        text-align: left;
        font-family: "Poppins-Medium", sans-serif;
        font-size: 14px;
        font-weight: 500;

    }

    .frame-1686552311 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        width: 295px;

    }

    .unit-phone {
        color: #3f4254;
        text-align: left;
        font-family: "Poppins-SemiBold", sans-serif;
        font-size: 14px;
        font-weight: 600;

    }

    ._0989124678 {
        color: #b5b5c3;
        text-align: left;
        font-family: "Poppins-Medium", sans-serif;
        font-size: 14px;
        font-weight: 500;
    }

    .frame-1686552312 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        width: 400px;
    }

    .unit-email {
        color: #3f4254;
        text-align: left;
        font-family: "Poppins-SemiBold", sans-serif;
        font-size: 14px;
        font-weight: 600;
    }

    .emailaddress-gmail-com {
        color: #b5b5c3;
        text-align: left;
        font-family: "Poppins-Medium", sans-serif;
        font-size: 14px;
        font-weight: 500;
    }

    .frame-1686552313 {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        flex-shrink: 0;
        width: 388px;
    }

    .status {
        color: #3f4254;
        text-align: left;
        font-family: "Poppins-SemiBold", sans-serif;
        font-size: 14px;
        font-weight: 600;
    }

    .frame-64 {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: flex-start;
        flex-shrink: 0;
    }

    .button {
        background: #c9f7f5;
        border-radius: 5.76px;
        padding: 4px 9px 4px 9px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 24.96px;
    }

    .active {
        color: #1bc5bd;
        text-align: left;
        font-family: "Poppins-Medium", sans-serif;
        font-size: 10.559999465942383px;
        font-weight: 500;
    }

    .button2 {
        background: #fff4de;
        border-radius: 5.76px;
        padding: 5px 7px 5px 7px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 24.96px;
    }

    .inactive {
        color: #ffa800;
        text-align: left;
        font-family: "Poppins-Medium", sans-serif;
        font-size: 10.559999465942383px;
        font-weight: 500;
    }

    .button3 {
        background: #ffe2e5;
        border-radius: 5.76px;
        padding: 5px 3px 5px 3px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 24.96px;
    }

    .relieved {
        color: #f64e60;
        text-align: left;
        font-family: "Poppins-Medium", sans-serif;
        font-size: 10.559999465942383px;
        font-weight: 500;
    }

    .usetDetailsText {
        width: 75px;
        height: 20px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        font-size: 13px;
        color: #3F4254;
    }

    .userDetailsView {
        height: 39.5px;
    }

    .sucessBtn {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 4px 9px;
        gap: 10px;
        width: 52px;
        height: 24.96px;
        background: #C9F7F5;
        border-radius: 5.76px;
    }

    .sucessBtnText {
        width: 34px;
        height: 16px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 10.56px;
        line-height: 16px;
        color: #1BC5BD;
    }

    .yellowBtn {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 5px 7px;
        gap: 10px;
        width: 57px;
        height: 24.96px;
        background: #FFF4DE;
        border-radius: 5.76px;
    }

    .yellowBtnText {
        width: 43px;
        height: 16px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 10.56px;
        line-height: 16px;
        color: #FFA800;

    }

    .redBtn {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 5px 3px;
        gap: 10px;
        width: 52px;
        height: 24.96px;
        background: #FFE2E5;
        border-radius: 5.76px;
    }

    .redBtnText {
        width: 46px;
        height: 16px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 10.56px;
        line-height: 16px;
        color: #F64E60;
    }

    .detailsText {
        height: 20px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 20px;
        color: #4B5675;
    }

    .Work-Experience {
        width: 132px;
        height: 24px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        color: #071437;
    }

    .experienceDetialView {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 11px 15px;
        gap: 10px;
        height: 61px;
        border: 1px solid #F1F1F4;
        border-radius: 12px;
    }

    .experienceTitle {
        width: 184px;
        height: 20px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        color: #071437;

    }

    .experienceSubTitle {
        width: 184px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        color: #4B5675;
    }

    .skillsItems {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 5px 7px;
        gap: 10px;
        margin-left: 2px;
        margin-right: 2px;
        margin-top: 5;
        height: 23px;
        background: #F1F1F4;
        border-radius: 4px;
    }

    .skilsCss {
        width: 36px;
        height: 20px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        color: #000000;
    }

    .skillsAdd {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        gap: 5px;
        width: 25.26px;
        height: 18px;
    }

    .addLine {
        width: 25.26px;
        height: 1px;
        background: #1B84FF;
    }

    .addText {
        width: 25.26px;
        height: 12px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 11px;
        line-height: 12px;
        text-align: center;
        color: #1B84FF;
    }

    .CurrentDeployment {
        width: 468px;
        height: 21px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        color: #3F4254;
    }
</style>
@section('content')

<div class="lg:flex justify-between w-full">
    <div class="rounded-xl shadow-lg w-full lg:w-1/2 mx-2 mt-2">
        <div class="h-16 flex justify-between">
            <div class="jason-tatum my-3 mx-4"> Jason Tatum</div>
            <img class="mx-4" src="/images/Avatar.png" />
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Availability</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="sucessBtn mx-1"> <span class="sucessBtnText">Active</span></div>
                <div class="yellowBtn mx-1"><span class="yellowBtnText">Inactive</span></div>
                <div class="redBtn mx-1 "><span class="redBtnText">Relieved</span></div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Birthday</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">28 May 1996 </div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Gender</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">Male </div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Email</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">emailaddress@gmail.com </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Phone</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">0938072918 </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Address</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">Random Address, Lagos, Nigeria</div>
            </div>
        </div>

    </div>


    <div class="rounded-xl shadow-lg map w-full lg:w-1/2 mx-2 mt-2">
        <div class="mapouter">
            <div class="gmap_canvas"><iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=600&amp;height=400&amp;hl=en&amp;q=dolphin estate&amp;t=&amp;z=16&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe><a href="https://sprunkin.com/">Sprunki</a></div>
            <style>
                .mapouter {

                    text-align: right;
                    width: 100%;
                    height: 400px;
                }

                .gmap_canvas {
                    overflow: hidden;
                    background: none !important;
                    width: 100%;
                    height: 400px;
                }

                .gmap_iframe {
                    height: 400px !important;
                }
            </style>
        </div>
    </div>


</div>

<div class="lg:flex justify-between w-full mt-6">
    <div class="rounded-xl shadow-lg w-full lg:w-1/2 mx-2 mt-2 pr-6">
        <div class="h-16 flex justify-between">
            <div class="Work-Experience my-3 mx-4"> Work Experience</div>
            <div class="frame-83 mx-2">
                <div class="add-new">Add New</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="mb-4">
            <div class="flex mx-4 experienceDetialView w-full">
                <div class="experienceTitle mt-3 mx-2">Teams Supervisor</div>
                <div class="experienceSubTitle mx-2">Secure-Point - Jan, 2019</div>
            </div>
            <div class="flex mx-4 experienceDetialView w-full">
                <div class="experienceTitle mt-3 mx-2">Operations Lead</div>
                <div class="experienceSubTitle mx-2">Randers Security - Mar, 2016</div>
            </div>
            <div class="flex mx-4 experienceDetialView w-full">
                <div class="experienceTitle mt-3 mx-2">Teams Supervisor</div>
                <div class="experienceSubTitle mx-2">Nedbank Security - Mar, 2019</div>
            </div>

        </div>
        <div class="flex mb-4 justify-between pb-4">
            <div class="mt-3 skilsCss mx-4">Skills</div>
            <div class="flex mx-2">
                <span class="skillsItems">HR</span>
                <span class="skillsItems">noCode</span>
                <span class="skillsItems">Web Design</span>
            </div>
            <div class="skillsAdd">
                <div class="addText">
                    Add
                </div>
                <div class="addLine"> </div>
            </div>
        </div>

    </div>

    <div class="rounded-xl shadow-lg w-full lg:w-1/2 mx-2 mt-2">
        <div class="h-16 flex justify-between">
            <div class="CurrentDeployment my-4 mx-4"> Current Deployment</div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Branch</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">VGC, Lagos Island</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Unit</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">124 Akanbi Road, VGC, Etiosa< Lagos </div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Unit Phone</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">0989124678</div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Unit Email</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">emailaddress@gmail.com </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Status</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="sucessBtn mx-1"> <span class="sucessBtnText">Active</span></div>
                <div class="yellowBtn mx-1"><span class="yellowBtnText">Inactive</span></div>
                <div class="redBtn mx-1 "><span class="redBtnText">Relieved</span></div>
            </div>
        </div>

    </div>
</div>

@stop