section {
        width: 100%;
    }
    
    .multi_text {
        display: flex;
    }
    
    .multi_text>*:first-child {
        max-width: 67px;
        margin-right: 11px;
        background: #e9f7dd;
    }
    
    .guide_line_area ul {
        list-style: none;
        padding: 10px;
        margin: 0;
    }
    
    .guide_line_area ul li {
        position: relative;
       
        display: flex;
        align-items: center;
        margin-bottom: 13px;
        padding-left: 55px;
        line-height: 44px;
        font-size: 17px;
        display: block;
        padding-bottom: 14px;
    }
    
    .guide_line_area ul li i {
        background: #3f6ad8;
        width: 44px;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        margin-right: 11px;
        border-radius: 30px;
        position: absolute;
        top: 1px;
        left: 0;
        font-size: 30px;
    }
.card_mainclass {
    display: flex;
    flex-flow: row wrap;
}

    .card_mainclass > div {
        margin-right: 23px;
        padding: 20px;
        width: 300px;
        margin-bottom: 23px;
    }
    .app_staus_box {
        position: relative;
        padding-left: 88px;
        margin-bottom: 15px;
    }
	.mdc-card__actions {
    
    justify-content: center;
    margin-bottom: 4px;
    flex-flow:column !important;
}
        .mdc-card__actions > button {
            width: 100%;
        }

            .mdc-card__actions > button:last-child {
                margin-top: 13px;
            }
.mdc-card {
    box-shadow: none;
    border: 1px solid #ddd;
}
.post_info {
    background: #fff;
    padding: 15px;
    max-width: 470px;
    box-shadow: 0 0 10px #d4d4d4;
    border-radius: 0 5px 5px 5px;
}
    
    .user_icon {
        position: absolute;
        left: 0;
        background: #3f6ad8;
        padding: 11px;
    }
    
    .user_icon2 {
        position: absolute;
        left: 0;
        background: #444444;
        padding: 11px;
    }
    
    .date_user_info {
        font-size: 13px;
        font-weight: bold;
    }
    
    .date_user_info span {
        font-weight: normal;
        padding: 0 10px;
        color: #3f6ad8;
    }
    
    .post_info p {
        margin-bottom: 5px;
        margin-top: 9px;
    }
    
    .post_comment {
        padding: 10px 0 0 87px;
    }
    
    .post_comment label {
        font-weight: bold;
    }
    
    .post_comment>div {
        display: flex;
        margin-bottom: 40px;
    }
    
    .post_comment>div textarea {
        width: 100%;
        max-width: 360px;
        border: 1px solid #d4d4d4;
    }
    
.diary_balance {
    clear: both;
    height: 60px;
    text-align: right;
    position: relative;
    top: -30px;
    padding: 10px;
    background: #fff;
    margin-bottom: 9px;
    margin-top: 36px;
}
    
    .form_part1 {
        margin-top: 15px;
    }
    /* form */

.form_group > div input[type="text"],
.form_group > div input[type="date"],
.form_group > div input[type="email"],
.form_group > div input[type="number"],
.form_group > div textarea,
.form_group > div select {
    width: 100%;
    border: 3px solid #ff9800;
    padding: 6px;
    margin-bottom: 10px;
    border-radius: 5px;
}
.form_group > div input[type=radio]:not(:first-of-type) {
    margin-left: 15px;
}


.form_group > div label {
    display: block;
    font-size: 13px;
    color: #000000;
    margin-bottom: 4px;
    font-weight: bold;
}
    
    .optin_employeement>div input[type="text"],
    .optin_employeement>div input[type="date"],
    .optin_employeement>div input[type="email"],
    .optin_employeement>div input[type="number"],
    .optin_employeement>div select {
        width: 100%;
        border: 1px solid #cacaca;
        border-radius: 3px;
        padding: 6px;
        margin-bottom: 10px;
    }
    
    .optin_employeement>div label {
        display: block;
        font-weight: bold;
        font-size: 12px;
        color: #636262;
        margin-bottom: 3px;
    }
    
    .form_group {
        display: flex;
        width: calc(100% + 20px);
        position: relative;
        padding: 10px 0 2px;
        align-items: flex-end;
    }
.optin_employeement{
    margin-bottom:30px;
}
.optin_employeement > div {
    /* display: flex; */
    width: calc(100% + 20px);
    position: relative;
    padding: 9px 0 20px;
    background: #fff;
    top: 0;
    margin-bottom: -21px;
}
    
    .optin_employeement>div:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: calc(100% - 20px);
        border-bottom: 1px solid #efe9e9;
    }
    
    .form_group>div,
    .optin_employeement>div>div {
        flex: 1;
        margin-right: 20px;
        max-width: 250px;
        position:relative;
    }
        .form_group > div > .validation-message {
            background: rgba(255, 0, 0,.63);
            color: #fff;
            position: absolute;
            top: 52px;
            padding: 0px 11px;
            border-radius: 0 0 0 12px;
            width: 100%;
            z-index: 33333;
        }

.form_group .textarea {
    min-width: 423px;
}    
    .card-body:last-child>div.form_group:after,
    .card-body>div.form_group:last-child:after,
    .card-body>div>div.form_group:last-child:after,
    .card-body>div>div>div.form_group:last-child:after {
        border: 0 !important;
    }
    
    .card-body>div.form_group:last-child,
    .card-body>div>div.form_group:last-child,
    .card-body>div>div>div.form_group:last-child {
        padding-bottom: 0;
    }
    
    .card-header,
    .card-title2 {
        text-transform: uppercase;
        color: rgba(13, 27, 62, 0.7);
        font-weight: bold;
        font-size: .88rem;
        background: #fff;
        position: relative;
        top: -10px;
        margin-bottom: -9px;
    }

p.form_tagline {
    font-size: 15px;
    color: blue;
    margin: -3px 0 -7px;
    background: #fff;
    padding-top: 3px;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
}
    /* form */
    
    .card-body table thead {
        font-size: 12px;
        background: #737373;
        color: #fff;
        font-weight: 400 !important;
    }
    
    .card-body table {
        background: #fff;
        border: 1px solid #a5a2a2;
    }
    
    .card-body table tr td {
        padding: 3px 4px;
        border: 1px solid #b9b9b9;
    }
    
    .card-body table tr td input[type="text"] {
        border: 1px solid #e6e6e6;
        width: 100%;
        background: transparent;
    }
    
    .card-body table tr:nth-child(even) td {
        background: #f5ffea;
    }
    
    .card-body table tr td .btn.btn-danger {
        padding: 1px 10px;
    }
    /* jquery classes */
    
    .hide_c {
        display: none;
    }
    
    .targetDiv,
    .targetDiv2,
    .targetDiv3,
    .targetDiv4,
    .targetDiv5,
    .targetDiv6 {
        display: none;
    }
    /* jquery classes */
    /* jquery steps */
    /*progressbar*/

#progressbar,
#progressbar2,
#progressbar3 {
    margin: 30px 0 10px;
    overflow: hidden;
    counter-reset: step;
    width: calc(100% - 30px);
}
    
    #progressbar li,
    #progressbar2 li,
    #progressbar3 li {
        list-style-type: none;
        color: white;
        text-transform: uppercase;
        font-size: 9px;
        width: 33.33%;
        float: left;
        position: relative;
    }
    
    #progressbar li:before,
    #progressbar2 li:before,
    #progressbar3 li:before {
        content: counter(step);
        counter-increment: step;
        width: 30px;
        line-height: 30px;
        display: flex;
        font-size: 15px;
        color: #fff;
        background: #333333;
        border-radius: 33px;
        margin: 0 auto 5px auto;
        justify-content: center;
        align-items: center;
        font-weight: bold;
      
    }
    /*progressbar connectors*/

        #progressbar li:after,
        #progressbar2 li:after,
        #progressbar3 li:after {
            content: '';
            width: 100%;
            height: 1px;
            background: #333333;
            position: absolute;
            left: -50%;
            top: 47%;
            z-index: -1;
        }
    
    #progressbar li:first-child:after,
    #progressbar2 li:first-child:after,
    #progressbar3 li:first-child:after {
        /*connector not needed before the first step*/
        content: none;
    }
    /*marking active/completed steps green*/
    /*The number of the step and the connector before it = green*/
    
    #progressbar li.active:before,
    #progressbar li.active:after,
    #progressbar2 li.active:before,
    #progressbar2 li.active:after,
    #progressbar3 li.active:before,
    #progressbar2 li.active3:after {
        background: #27AE60;
        color: white;
    }
    /*form styles*/
    /*Hide all except first fieldset*/
    
    #form_eng_1 section:not(:first-of-type),
    #form_eng_2 section:not(:first-of-type),
    #form_eng_3 section:not(:first-of-type) {
        display: none;
    }

.btn_sction {
    padding: 11px 15px 30px;
    margin-left: -15px !important;
    position: relative;
}
    .btn_sction button, .btn_sction input[type=button] {
        margin-right: 15px;
    }
    .btn_sction::after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        border-top: 1px solid #dedede;
        width: calc(100% + 14px);
    }
.table_edu {
    border: 1px solid;
    width: 100%;
    margin-bottom: 16px;
}

    .table_edu tr th, .table_edu tr td {
        border-right: 1px solid;
        padding: 4px 6px;
        border-bottom: 1px solid;
    }

    .table_edu tfoot {
        padding: 10px;
        background: #e2e2e2;
    }

        .table_edu tfoot tr td {
            padding: 10px;
        }
.custom-file-upload {
    display: inline-block;
    cursor: pointer;
    height: 64px;
    min-height: 64px;
}

.fileuploader {
    font-family: Verdana;
    font-size: 12px;
    margin-bottom: 8px;
}

.use_img {
    max-width: 100px;
    margin: 0 auto 9px;
    overflow: hidden;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 9px 10px rgba(23, 19, 19, 0.13);
}

    .use_img > img {
        width: 100px;
    }

.other_info > h3 {
    font-size: 17px;
    text-transform: capitalize;
    text-align: center;
    color: #3f6ad8;
}
.mat.mat-body2 {
    margin: 0;
}

.other_info {
    text-align: center;
}

.card_header {
}

.card_header {
    display: flex;
    border-bottom: 6px solid whitesmoke;
    margin-bottom: 8px;
}
.app_status_incomplete {
    text-align: center;
    margin-bottom: 8px;
}

    .app_status_incomplete > span {
        position: relative;
        padding-left: 12px;
        color: red;
    }

        .app_status_incomplete > span:before {
            content: "";
            width: 10px;
            height: 9px;
            background: #f90b0b;
            position: absolute;
            left: 0;
            top: -2px;
        }

.app_status_complete {
    text-align: center;
    margin-bottom: 8px;
}

    .app_status_complete > span {
        position: relative;
        padding-left: 12px;
        color: #24c308;
    }

        .app_status_complete > span:before {
            content: "";
            width: 10px;
            height: 9px;
            background: #24c308;
            position: absolute;
            left: 0;
            top: -2px;
        }

    .card_header > p b {
        display: block;
        color: #3f6ad8;
    }

    .card_header > p {
        flex: 1;
    }

        .card_header > p:first-child {
            border-right: 1px solid #dedede;
            margin-right: 8px;
        }
.dwn_btn {
    text-align: center;
    font-size: 13px;
}

    .dwn_btn > a {
        transition: all ease .5s;
        display: inline-block;
    }

        .dwn_btn > a:hover {
            color: #444054;
            text-decoration: underline;
            transform: translateX(5px);
        }
.mat-card {
    position: relative;
}

    .mat-card > button {
        background: #d92550;
        position: absolute;
        right: 0;
        top: 0;
        color: #fff;
        border-radius: 0 0 0 26px;
        width: 40px;
        height: 40px;
    }
        .mat-card > button i {
            font-size: 33px;
            position: relative;
            right: 6px;
            top: -9px;
        }
    /* jquery steps */

div.dataTables_wrapper {
    display: flex;
    flex-flow: wrap row;
    align-items: center;
    margin-bottom: 40px;
}

    div.dataTables_wrapper > div {
        width: 100%;
    }

        div.dataTables_wrapper > div:nth-child(1),
        div.dataTables_wrapper > div:nth-child(2),
        div.dataTables_wrapper > div:nth-child(3) {
            width: 33.3%;
            margin-bottom: 18px;
        }

        div.dataTables_wrapper > div:nth-child(2) {
            order: -1;
        }

        div.dataTables_wrapper > div:nth-child(3) {
            order: -1;
        }

        div.dataTables_wrapper > div:nth-child(1) {
            justify-content: flex-end;
            display: flex
        }

.dataTables_wrapper table thead tr th {
    background: #565365 !important;
    color: #f1f4f6 !important;
    border: 0;
}

.action i.fa {
   
}

td.action span {
    /* display: inline-block; */
    white-space: nowrap;
}

.action {
    display:flex;
    width:124px;
}
.action>* {
   margin:0 5px;
}
    .action span i.fa {
        font-size:18px
    }
    .action span:first-child i.fa {
        color: #3f6ad8;
        margin-right:10px;
    }
.mdc-table td {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 4px 12px !important;
}
.action span:last-child i.fa {
    color: #e91e1e;
}
tr.mdc-table-header-row th {
    background: #ffffff;
    color: #0a0a0a;
    font-size: 13px;
    line-height: 16px;
    text-align: left;
    padding: 0 15px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    border:0;
    border-right:1px solid #ddd
}
tr.mdc-table-header-row th:last-child {
    border-right:0;
}
.dt-button.buttons-print {
    padding: 4px 23px;
    border: 0;
    background: #66bb6a;
    color: #fff;
    font-size: 16px;
    border-radius: 4px;
    transition: all ease .3s;
}

    .dt-button.buttons-print:hover {
        background: #d8379f !important;
        border: 0 !important;
    }

.dataTables_wrapper table tr td span {
    color: #164ace;
    font-size: 11px;
}
.diary_grid.top_h {
    top: -99px;
    position: relative;
    margin-bottom: -79px;
}
.tableHeader_row{ height:31px !important}

.view_detail > h2 {
    font-size: 19px;
    font-weight: 600;
}
.spacial_table thead tr th{
    width:30%;
}.spacial_table thead tr th:first-child{
    width:100px;
}
    .spacial_table thead tr th:nth-child(6) {
        width:400px !important;
    }    
    .spacial_table thead tr th:nth-child(2) {
        width:150px;
    }
.top_h .spacial_table thead tr th:nth-child(5) {
    width: 250px;
}
     .spacial_table thead tr th:nth-child(7) {
        width:150px;
    }
        .spacial_table thead tr th:last-child{
         width:150px;
}
.spacial_table tbody tr td {
    background: #fff;
    vertical-align:top;
}
.app-theme-white .app-page-title {
    background: rgb(255, 255, 255) !important;
    border-bottom: 1px solid #dedede;
    box-shadow: 0 0 10px rgba(111, 111, 111, 0.1);
    margin-bottom: 20px;
    padding: 1px 0;
}
.view_detail > div {
    background: #ffffff;
    border-radius: 2px;
    position: fixed;
    right: 30px;
    top: 250px;
    width: 100%;
    max-width: 300px;
    max-height: 600px;
    overflow-y: auto;
}

    .view_detail > div > h2 {
        font-size: 21px;
        font-weight: 400;
        background: #3f6ad8;
        position: relative;
        color: #fff;
        padding: 7px 20px;
        margin: 0;
    }

.grid_detail_veiw {
    padding: inherit;
}

    .grid_detail_veiw > div {
        display: flex;
        flex-flow: column nowrap;
    }

        .grid_detail_veiw > div > label {
            color: #3f6ad8;
            margin-bottom: 0;
            padding: 0 16px;
        }

        .grid_detail_veiw > div > span {
            display: block;
            border-bottom: 1px solid #f1efef;
            padding: 0 15px 7px;
        }

        .grid_detail_veiw > div:nth-child(even) {
            background: #f8e3e4;
        }



.main_user_cons {
    display: flex;
    padding: 27px 0;
    position: relative;
    gap:15px;
}

    .main_user_cons > a {
        padding: 10px 5px 7px;
        background: white;
        width: 95px;
        display: flex;
        flex-flow: nowrap column;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        text-decoration: none;
        color: #6b6666;
        transition: all ease .5s;
        position: relative;
        font-size: 11px;
    }

        .main_user_cons > a img {
            width: 30px;
            margin-bottom: 3px;
        }
    .main_user_cons > a > p.insuranceNoti {
        background: #ec5a5a;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
        right: 0;
        line-height: 18px;
        color: #fff;
        border-radius: 5px;
        text-align: center;
        display: flex;
        justify-content: center;
        animation: puls ease 3s infinite;
    }
@keyframes puls {
    0% {background-color : red;}

    66% {background-color: blue;}
    100% {
        background-color: red;
    }
}

        .main_user_cons > a > p {
            margin: 5px;
            text-align:center;
        }
.main_user_cons > a:nth-child(1n) {
    background: linear-gradient(45deg, #97c9ff, #c5ffec);
}
.main_user_cons > a:nth-child(2n) {
    background: linear-gradient(45deg, #c3fced, #ffe8c5);
}
.main_user_cons > a:nth-child(3n) {
    background: linear-gradient(45deg, #feff78, #6dd6c3);
}

        .main_user_cons > a:hover {
            transform: translateY(-10px);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

.garunter_card {
    margin-bottom: 30px;
    display: flex;
    flex-flow: row wrap;
    padding: 10px;
    border: 1px solid #e9ecee;
    border-radius: 6px;
    border-bottom: 3px solid #f8e3e4;
}

    .garunter_card > div {
        width: 20%;
    }

    .garunter_card > p {
        width: 100%;
        font-size: 17px;
        text-transform: uppercase;
        font-weight: 600;
        margin: 0 0 5px;
    }

    .garunter_card > div > label {
        color: #16aaff;
        margin: 0;
    }

    .garunter_card > div > p {
        margin: 2px 0 13px 0;
    }

.main_graunter_card > div:last-child {  
    margin: 0;
}
.view_app_header2 > h4 {
    font-size: 17px;
    font-weight: 600;
    text-transform:capitalize;
}
.view_doc_pdf {
    display: flex;
    flex-flow: row wrap;
}

    .view_doc_pdf > div {
        background: #fff;
        border: 1px solid #eff2f4;
        margin-bottom: 7px;
        padding: 7px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 19%;
        margin-right: 7px;
        border-radius: 4px;
        background: #16aaff;
        color: white;
        min-width: 297px;
    }

a.btn.view_pdf {
    background: #ffffff;
    padding: 5px 22px;
    font-weight: 600;
    color: #16aaff;
}

.tabs .mdc-tab--active {
    background: #3f6ad8 !important;
    color: green !important;
}

    .tabs .mdc-tab--active span {
        color: #f8e3e4;
    }

.tabs .mdc-tab-indicator .mdc-tab-indicator__content--underline {
    border-color: transparent;
}
.mdc-text-field:not(.mdc-text-field--disabled) {
    background-color: #fff !important;
}
.tabs > div > div > div > div {
     border-bottom: transparent;
    margin-bottom: 10px;
}
}

    .tabs > div > div > div > div > div.mdc-tab {
        margin-right: 13px;
        background: #f8e3e4;
    }
.action i.fa.fa-comment-alt {
    background: #16aaff;
}
textarea {
    width: 100%;
}



.Report-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 40%;
    justify-content: flex-start; /* Align to the left */
}

.Report-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: transform 0.2s ease-in-out;
}

    .Report-card:hover {
        transform: translateY(-5px);
    }

    .Report-card h3 {
        margin-bottom: 10px;
        font-size: 17px;
        font-weight: 500;
    }

    .Report-card p {
        color: #555;
    }

    .Report-card a {
        display: block;
        margin-top: 10px;
        text-decoration: none;
        color: #007bff;
        font-weight: bold;
        font-size: 12px;
    }

        .Report-card a:hover {
            text-decoration: underline;
        }


.report-datefilters {
    display: flex;
    gap: 17px !important;
    padding: 8px;
    width: 99%;
}

    .report-datefilters input[type="date"] { /* Removed '>' in case input is nested */
        width: 214px;
        height: 32px;
        border: 1px solid #ccc; /* Optional: Ensure the input has a visible border */
        padding: 4px;
    }

 tr.debitRowClass {
    background: #f8fdfed4;
}
tr.creditRowClass {
    background: #d4dbeb5c;
}


@media(max-width:750px){
    .admin_user .login_inner {
        background: none;
    }
    .login_body.admin_user {
        background: #ffffff;
    }
    .form_group>div{
        flex-flow:column wrap;
        flex: none;
        width: 100%;
        margin: 0;
        max-width:100%;
    }
    .form_group{
        flex-flow:column wrap;
        width: 100%;
        margin: 0;
    }
    .optin_employeement>div{
        flex-flow:column wrap;
        top: 0;
    }
    .optin_employeement>div:first-child textarea    {
        width:100%
    }
    .card-body {
    overflow-x: auto;
    }
    .mdc-text-field {
    display: block;
    max-width: 299px;
    }
}

.filter_lazor2 {
    display: flex;
    align-items: flex-end;
    margin-bottom: 15px;
}

    .filter_lazor2 > div:first-child {
        margin-right: 23px;
    }

        .filter_lazor2 > div:first-child .mdc-form-field label {
            position: relative;
            top: 4px;
        }
.blazored-typeahead {
    min-width: 100px !important;
}