* {
    margin: 0;
    padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

h1, h2 {
    font-family: 'Abel', sans-serif;
    font-weight: normal;
}

body {
    font-family: 'Raleway', sans-serif;
    background-color: #e8e8e8;
}
.pawword {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

    .pawword a {
        color: #1880e1;
        cursor: pointer;
        text-decoration: underline;
        display: inline-block;
        transition: all ease .5s;
    }

        .pawword a:hover {
            color: red;
            transform: translateX(5px);
        }
.body_login:after {
    content: "";
    position: fixed;
    height: 100%;
    width: 100%;
    background: #dcdbe0;
    top: 0;
    left: 0;
    z-index: -1;
}

.body_login {
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
    height: 100vh;
    display: flex;
}

.inner_login {
    display: flex;
    border-radius: 15px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 0 20px #44444430;
    width: 100%;
    min-height: 660px;
}

    .inner_login > div {
        flex: 1;
    }

        .inner_login > div:first-child {
            background: #deebf4;
            position: relative;
            padding: 10px;
        }

            .inner_login > div:first-child img {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
            }

        .inner_login > div:last-child {
            display: flex;
            align-items: center;
        }

            .inner_login > div:last-child .login {
                max-width: 310px;
                text-align: left;
                margin: 0 auto;
                font-size: 12px;
            }

.login_Area.signup {
    position: relative;
    top: -32px;
    margin-bottom: -20px;
}

    .login_Area > div input[type=text], .login_Area > div input[type=password], .login_Area > div input[type=date] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #b1a6a6;
        margin-bottom: 12px;
        padding: 10px 13px;
        margin-top: 7px;
        border-radius: 5px;
    }

    .login_Area > div input[type=submit] {
        background: #1880e1;
        width: 100%;
        padding: 10px;
        text-transform: uppercase;
        color: #fff;
        border: 0;
        border-radius: 4px;
        margin-bottom: 10px;
    }

.inner_login > div:first-child > div {
    position: relative;
    top: 59px;
    z-index: 2;
    left: 60px;
}

    .inner_login > div:first-child > div h2 {
        color: #144068;
        font-weight: 600;
    }

    .inner_login > div:first-child > div p {
        color: #333333;
        font-size: 14px;
    }

.inner_login > div:last-child .login > div:first-child {
    margin-bottom: 40px;
}

.login_Area > h2 {
    font-weight: normal;
    margin-bottom: 10px;
    text-align: center;
    font-size: 26px;
    color: #333;
}

.login_Area > p {
    color: #333;
    font-size: 14px;
    margin-bottom: 4px;
}

    .login_Area > p a {
        color: #1880e1;
    }

    .login_Area > p:last-child a {
        display: block;
        text-align: right;
        text-decoration: none;
        font-size: 14px;
    }

    .login_Area > p a {
        color: #1880e1;
        transition: all ease .5s;
        cursor:pointer;
    }

        .login_Area > p a:hover {
            color: #d62219;
            transform: translateX(10px);
        }

.login_Area > h2 strong {
    color: #144068;
}

.login_Area > div input[type=submit]:hover {
    background: #144068;
}


.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0,.55);
    z-index: 999999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffff;
    left:0;
    top:0;
}



.wrapper {
    position: relative;
}

    .wrapper:after {
        position: fixed;
        content: "";
        top: 0;
        left: 0;
        background: linear-gradient(45deg, #fbfbfb, #e1f0ff);
        width: 100%;
        height: 100%;
        z-index: -1;
    }

.container {
    max-width: 1100px;
    margin: 0 auto;
}

.card {
    padding: 15px;
    background: #fff;
    margin-bottom: 15px;
    border-radius: 6px;
    box-shadow: 0 0 10px #71717142;
}

    .card h1 {
        color: #434343;
        font-size: 22px;
        margin: 6px 0 4px;
        font-weight: 400;
        font-weight: bold;
        text-transform: uppercase;
    }

.main_body {
    display: flex;
    gap: 15px;
}

    .main_body > div:first-child {
        min-width: 240px;
        max-width: 240px;
    }

    .main_body > * {
        flex: 1;
    }
.input_ui2 ul li > div.pref_dist {
    max-width: 100%;
    flex-flow: wrap;
    gap: 20px;
}
p.disable_p {
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    padding: 5px 10px;
    background: #ececec;
    font-size: 13px;
    text-transform: uppercase;
}
.input_ui {
    display: flex;
    gap: 15px;
}

    .input_ui > div {
        display: flex;
        flex-flow: column;
        margin-bottom: 11px;
        width: 23%;
    }

        .input_ui > div label {
            text-transform: capitalize;
            font-size: 12px;
            font-weight: normal;
            color: #123c65;
            margin-bottom: 7px;
        }

        .input_ui > div input[type=text], .input_ui > div input[type=email], .input_ui > div input[type=date], .input_ui > div input[type=password], .input_ui > div select {
            width: 100%;
            padding: 6px 10px;
            box-sizing: border-box;
            border-radius: 3px;
            border: 1px solid #9c9b9b;
            height: 30px;
        }

h2.heading {
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 10px 0;
}

button.btn_submit {
    padding: 9px 16px 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 16px;
    margin-bottom: 35px;
    border: 0;
    transition: all ease .5s;
    border-radius: 5px;
    background: #0c3760;
    color: #fff;
    cursor: pointer;
}

    button.btn_submit:hover {
        background: #dd2421;
    }

.input_ui2 ul {
    list-style: none;
    display: flex;
    flex-flow: column;
}

    .input_ui2 ul li {
        margin-bottom: 11px;
    }

        .input_ui2 ul li > div {
            display: flex;
            flex-flow: column;
            max-width: 25%;
            padding-left: 40px;
            position: relative;
        }

            .input_ui2 ul li > div label {
                text-transform: uppercase;
                font-size: 11px;
                font-weight: bold;
                color: #123c65;
                margin-bottom: 7px;
            }

            .input_ui2 ul li > div select {
                width: 100%;
                padding: 6px 10px;
                box-sizing: border-box;
                border-radius: 3px;
                border: 1px solid #9c9b9b;
                height: 30px;
            }

            .input_ui2 ul li > div p {
                position: absolute;
                left: 5px;
                top: 22px;
                width: 25px;
                font-size: 17px;
                background: #abaab1;
                height: 25px;
                border-radius: 100%;
                font-weight: bold;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
            }

h2.heading2 {
    font-size: 19px;
    margin: 5px 0 14px;
    color: #2196f3;
}

.textarea {
    display: flex;
    flex-flow: column;
}

    .textarea > label {
        font-size: 12px;
        margin-bottom: 6px;
        text-transform: capitalize;
        color: #123c65;
    }

    .textarea > textarea {
        max-width: 490px;
        border: 1px solid #9c9b9b;
        border-radius: 5px;
    }

p.info_lience {
    font-size: 14px;
    color: #00bcd4;
    font-weight: normal;
    position: relative;
    top: -10px;
    margin-bottom: 10px;
}

    p.info_lience:before {
        content: "* ";
        color: #ff9800;
        font-size: 18px;
    }

.card.header a {
    font-size: 14px;
    position: relative;
    top: 0;
    color: #00bcd4;
    transition: all ease .5s;
}

.card.header {
    text-align: center;
    border-radius: 0 0 10px 10px;
    padding-bottom: 22px;
}

form.sign_in input[type="text"], form.sign_in input[type="password"] {
    width: 100%;
    border: 1px solid #c7c7c7;
    padding: 6px 5px;
    border-radius: 5px;
    box-sizing: border-box;
}

.login form.sign_in label {
    color: #144068;
    font-size: 11px;
    text-transform: uppercase;
    display: flex;
    justify-content: flex-start;
    margin: 10px 0 3px;
    font-weight: 600;
    letter-spacing: 1px;
}

form.sign_in input[type=submit] {
    display: block;
    width: 100%;
    margin: 13px 0 5px;
    padding: 9px;
    border: 0;
    border-radius: 5px;
    transition: all ease .5s;
    background: #0266b4;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

    form.sign_in input[type=submit]:hover {
        background: #01bccb;
    }
    /* Profile */
/* profile */
.profile_body {
    display: flex;
    gap: 10px;
}

    .profile_body > div {
        flex: 1;
    }

        .profile_body > div:first-child {
            max-width: 330px;
        }

.profile_info {
    background: #0e0a1d;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    padding-bottom:33px;
}
.chutiyapoup .profile_info{
    padding-bottom:10px;
}
.name_rank h2 {
    font-size: 20px;
    text-transform: uppercase;
}

    .name_rank h2 > span {
        font-size: 14px;
        color: #ffcb40;
    }

.name_rank > p {
    font-size: 15px;
    margin-bottom: 11px;
}

.user_short_info > div {
    display: flex;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 9px;
}

    .user_short_info > div > * {
        flex: 1;
        text-transform: uppercase;
        font-size: 12px;
    }

        .user_short_info > div > *:first-child {
            text-align: right;
        }

    .user_short_info > div > label:after {
        content: " :";
        color: #fff;
    }

    .user_short_info > div > p {
        text-align: left;
    }

    .user_short_info > div > label {
        color: #ffcb31;
    }

.btn {
    padding: 7px 10px;
    text-transform: capitalize;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 10px;
    transition: all ease .5s;
    cursor: pointer;
}

.action_area {
    margin-top: 20px;
}

button.btn.btn_request {
    background: #403773;
    transition: all ease .5s;
    color: #fff;
    cursor: pointer;
}

    button.btn.btn_request:hover {
        border-color: #fff;
        background: transparent;
    }

.change_pwd {
    background: #373737;
    color: #fff;
}

    .change_pwd:hover {
        border-color: #fff;
        background: transparent;
    }

.profile_info > .img {
    width: 140px;
    border: 3px solid #ffffff;
    overflow: hidden;
    height: 140px;
    margin: 0 auto;
    border-radius: 50%;
    top: -70px;
    position: relative;
    margin-bottom: -52px;
    box-shadow: 0 0 10px #56565673;
}

    .profile_info > .img > img {
        width: 100%;
    }

.card2.profile_header {
    position: relative;
    padding-left: 260px;
}

.address.card ul {
    list-style: none;
    max-width: 457px;
}

    .address.card ul > li {
        font-size: 13px;
        margin-bottom: 10px;
        position: relative;
        padding-left: 40px;
    }

        .address.card ul > li:last-child {
            margin-bottom: 0;
        }

.p_detail {
    display: flex;
    gap: 10px;
    flex-flow: wrap;
    margin-top: 10px;
}

    .p_detail > div {
        flex: 1;
        min-width: 290px;
    }

.card2 {
    padding: 21px;
    background: #fff;
    border-radius: 5px;
}

    .card2.profile_header {
        border-radius: 0 0 5px 5px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.address ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 300px;
}

    .address ul > li {
        font-size: 13px;
        padding: 0 0 10px 39px;
        position: relative;
    }

        .address ul > li:last-child {
            padding-bottom: 0;
        }

        .address ul > li span {
            position: absolute;
            left: 11px;
            color: #e91e63;
            font-size: 25px;
        }

        .address ul > li > span .fa-envelope {
            font-size: 15px !important;
            left: 0px;
            position: absolute;
            color: #0e0a1d;
        }

h2.heading3 {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 9px;
}

.p_detail div > label {
    color: #492fa9;
    font-size: 13px;
    text-transform: uppercase;
    margin-top: 7px;
    display: block;
    margin-bottom: 0;
}

.p_detail div > p {
    font-size: 14px;
    padding-left: 14px;
    color: #717171;
}

    .p_detail div > p:before {
        content: " - ";
    }



.profile_info {
    position: relative;
}

.active_state {
    position: absolute;
    right: 20px;
    top: 46px;
}

    .active_state > .deactive {
        color: white;
        text-transform: uppercase;
        font-size: 12px;
        position: relative;
    }

        .active_state > .deactive:before {
            content: "";
            position: absolute;
            left: -17px;
            top: 1px;
            width: 11px;
            height: 11px;
            background: red;
            border-radius: 30px;
        }

    .active_state > .active {
        color: white;
        text-transform: uppercase;
        font-size: 12px;
        position: relative;
    }

        .active_state > .active:before {
            content: "";
            position: absolute;
            left: -17px;
            top: 1px;
            width: 11px;
            height: 11px;
            background: #39fd3f;
            border-radius: 30px;
        }
    /* end Profile */
p.disable_p {
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    padding: 5px 10px;
    background: #ececec;
    font-size: 13px;
    text-transform: uppercase;
}

.main_body > div:first-child > .card img:first-child {
    display: flex;
    margin: 0 auto 17px;
}

span.e-file-drop {
    display: block;
    color: #07345f !important;
    margin: 0 !important;
}

.e-file-select-wrap {
}

.e-upload.e-control-wrapper.e-control-container.e-lib.e-keyboard {
    border: 0;
}

.e-file-select-wrap {
    padding: 0 !important;
    text-align: center;
}

button.e-css.e-btn.e-upload-browse-btn {
    background: #05325d;
    border-radius: 5px;
    margin-bottom: 2px;
    transition: all ease .5s;
    color: #fff;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 1px;
}

    button.e-css.e-btn.e-upload-browse-btn:hover {
        background: #d80300;
        transform: translateY(-10px);
    }
.logout i {
    font-size: 25px;
    position: relative;
    top: 6px;
    margin-right: 4px;
    color: red;
}

.logout a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    border: 1px solid #4646f3;
    padding: 10px;
    border-radius: 4px;
    transition: all ease .5s;
}

    .logout a:hover {
        background: #05325d;
        border-color: transparent;
        color: #fff;
    }
.gridWrapper {
    position: relative;
}

.e-dddata {
    position: absolute;
    top: -39px;
    right: 0;
}

.e-menu-wrapper ul .e-menu-item, .e-menu-container ul .e-menu-item {
    height: 36px;
    line-height: 36px;
}

ul.e-lib.e-menu.e-control.e-menu-parent {
    background: #305578;
    color: #Fff;
}

    ul.e-lib.e-menu.e-control.e-menu-parent > li > span {
        color: white;
    }

.e-menu-wrapper, .e-menu-container {
    margin-bottom: 10px;
}

/*.e-dialog .e-dlg-header-content + .e-dlg-content {
    background: #e8e8e8;
    padding: 10px !important;
}

    .e-dialog .e-dlg-header-content + .e-dlg-content .profile_info > .img {
        top: 0;
        margin: 10px auto 10px;
    }*/
/*.e-popup.e-popup-open.e-dialog {
    top: 96px !important;
    max-width: 1100px;
    left: calc(50% - 550px) !important;
}*/
/*.e-dialog.e-draggable .e-dlg-header-content {
    background: #0e0a1d;
}

    .e-dialog.e-draggable .e-dlg-header-content > button span {
        color: white;
    }

    .e-dialog.e-draggable .e-dlg-header-content > div span {
        color: #fff;
    }*/
.AllowButton {
    padding: 3px 10px;
    border: 2px solid #ffac00;
    border-radius: 3px;
    text-transform: uppercase;
    margin-right: 10px;
    transition: all ease .5s;
    cursor: pointer;
    background: transparent;
    font-size: 11px;
    color: #ffac00;
}

    .AllowButton:hover {
        background: #ffac00;
        color: #fff;
    }

.ActiveButton {
    padding: 3px 10px;
    border: 2px solid #03d5aa;
    border-radius: 3px;
    text-transform: uppercase;
    margin-right: 10px;
    transition: all ease .5s;
    cursor: pointer;
    background: transparent;
    font-size: 11px;
    color: #03d5aa;
}

    .ActiveButton:hover {
        background: #03d5aa;
        color: #fff;
    }
.DeactiveButton {
    padding: 3px 10px;
    border: 2px solid red;
    border-radius: 3px;
    text-transform: uppercase;
    margin-right: 10px;
    transition: all ease .5s;
    cursor: pointer;
    background: transparent;
    font-size:11px;
    color:red;
}

.DeactiveButton:hover {
    background: red;
    color: #fff;

}
.ViewButton {
    background-color: transparent;
    border-color: transparent;
    color: #305578;
    border-radius: 3px;
    padding: 3px 10px;
    display: inline-block;
    margin-right: 8px;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid #305578;
    font-weight: bold;
    transition: all ease .5s;
    font-size:11px;
}
    .ViewButton:hover {
        background: #305578;
        color: #fff;
    }
.card2.profile_header.home {
    padding: 12px;
}
.menu-control {
    max-width: 242px;
    margin-bottom: 6px;
}
.not_approved {
    position: relative;
}

    .not_approved:after {
        content: "Profile Not Approved";
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
        width: 100%;
        height: 100%;
        background: #e2e2e2bd;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 34px;
        text-transform: uppercase;
        color: #103a63;
        z-index:999;
    }
body .card2.profile_header.home button.btn.btn_request {
    display: none !important;
}

#target .action_area {
    display: none;
}

#target .profile_info > .img {
    width: 80px;
    height: 80px;
}

p.arm_no {
    font-size: 18px;
    color: #0e0a1d !important;
    font-weight: bold;
    position: relative;
    top: -5px;
}
.e-toolbar.e-control[class*='e-toolbar'] {
    background: white;
    margin-bottom: 10px;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box !important;
}
.chutiyapoup .e-dlg-content {
    background: gray;
    padding-top: 23px !important;
}

    .chutiyapoup .e-dlg-content .img {
        margin: 14px auto 6px;
        top: 0;
    }
.e-table tbody tr:nth-child(odd) td {
    background: #f9f6f6;
}
h2.heading4 {
    color: #fff;
    font-size: 20px;
    margin: 10px 37px;
    position: relative;
    top: -45px;
    margin-bottom: -29px;
}

.main_jobs ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px;
    flex-flow:row wrap;
}

    .main_jobs ul > li {
        flex: 1;
        min-width: 350px;
    }

.card3 {
    background: #fff;
    border-radius: 5px;
    padding: 0px 11px 6px;
    border-top: 5px solid #ffcb40;
    position: relative;
    z-index: 9;
}

.join_info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

    .join_info > p {
        color: #0e0a1d;
        font-weight: normal;
        font-size: 12px;
        text-transform: uppercase;
    }

        .join_info > p span {
            color: #0e0a1d;
            font-weight: bold;
            font-size: 15px;
        }

.job_addres {
    position: relative;
    padding-left: 25px;
}

    .job_addres > label {
        font-size: 12px;
        color: #0e0a1d;
        font-weight: bold;
        margin-bottom: 0;
    }

    .job_addres > p > i {
        position: absolute;
        left: 0px;
        top: 5px;
        font-size: 27px;
        color: #e91e63;
    }

h2.heading4:after {
    content: "";
    position: absolute;
    left: -20px;
    top: 9px;
    width: 14px;
    height: 13px;
    background: #ffcb40;
    border-radius: 50%;
}

h2.heading4:before {
    content: "";
    position: absolute;
    left: -13px;
    top: 11px;
    height: 60px;
    width: 2px;
    background: #ffcb40;
}
.card3 .fas.fa-trash-alt {
    position: absolute;
    right: 10px;
    top: 50%;
    font-size: 20px;
    color: red;
    display:none;
}
.chutiyapoup .card3 .fas.fa-trash-alt{
    display:block;
}

@media(max-width:800px) {
    .card2.profile_header {
        padding: 10px;
    }

    .profile_body {
        padding: 10px;
        flex-flow: column;
        margin-top: 70px;
    }

        .profile_body > div:first-child {
            max-width: 100%;
        }

    .logout a {
        display: inline-block;
        position: absolute;
        top: 100px;
        right: 8px;
        padding: 5px 9px 10px;
        z-index:999;
    }
    .inner_login > div:first-child {
        display: none;
    }

    .inner_login > div:last-child {
        align-items: flex-start !important;
    }
    .main_body {
        flex-flow: column;
        padding: 0 7px 10px;
    }

    .input_ui {
        flex-flow: column;
    }

        .input_ui > div {
            width: 100%;
        }

    .input_ui2 ul li > div {
        max-width: 100%;
    }
}
i.fas.fa-info-circle {
    font-size: 19px;
}
.fa-info-circle:hover {
    color:blue;
}