@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --zoom: 1;
    --floatl: left;
    --floatr: right;
    --bs-gutter-x: 20px !important;
}

html.rtl {
    --floatl: right;
    --floatr: left;
}

.card-body {
    padding: 20px;
}

.body-scroll.no-header {
    height: calc((100vh / var(--zoom)));
}
@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirNext/AvenirNext-Regular-08.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirNext/AvenirNext-Medium-06.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirNext/AvenirNext-Medium-06.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirNext/AvenirNext-DemiBold-03.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirNext/AvenirNext-DemiBold-03.ttf');
    font-weight: 750;
    font-style: normal;
}


@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirNext/AvenirNext-Bold-01.ttf');
    font-weight: 800;
    font-style: normal;
}


@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirNext/AvenirNext-Heavy-09.ttf');
    font-weight: 900;
    font-style: normal;
}


@font-face {
    font-family: 'InstrumentSans';
    src: url('../fonts/AvenirNext/AvenirNext-Regular-08.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'InstrumentSans';
    src: url('../fonts/AvenirNext/AvenirNext-Medium-06.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'InstrumentSans';
    src: url('../fonts/AvenirNext/AvenirNext-Medium-06.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'InstrumentSans';
    src: url('../fonts/AvenirNext/AvenirNext-DemiBold-03.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'InstrumentSans';
    src: url('../fonts/AvenirNext/AvenirNext-DemiBold-03.ttf');
    font-weight: 750;
    font-style: normal;
}


@font-face {
    font-family: 'InstrumentSans';
    src: url('../fonts/AvenirNext/AvenirNext-Bold-01.ttf');
    font-weight: 800;
    font-style: normal;
}


@font-face {
    font-family: 'InstrumentSans';
    src: url('../fonts/AvenirNext/AvenirNext-Heavy-09.ttf');
    font-weight: 900;
    font-style: normal;
}




.menu-title h1 {
    color: #242424;
    font-size: 22px;
    padding-left: 0;
    line-height: 68px;
    margin-bottom: 0;
    font-weight: 700;
    /*letter-spacing: 0;*/
    font-family: 'InstrumentSans';
}

b, strong {
    font-weight: bold;
}

.menu-title {
    float: var(--floatl);
}
/*Panel Sizes*/
.w513 {
    width: 513px;
}

.p40 {
    padding: 40px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb0 {
    padding-bottom: 0px;
}

.p12 {
    padding: 12px;
}

.mt20 {
    margin-top: 20px;
}

.p0 {
    padding: 0;
}

.pl5 {
    padding-left: 5px;
}

.h183 {
    height: 183px;
}

.h231 {
    height: 231px;
}

.mb12 {
    margin-bottom: 12px;
}

.mt8 {
    margin-top: 8px;
}

.w340 {
    width: 340px;
    float: var(--floatl);
    margin-right: 20px !important;
}

    .w340:nth-child(3n) {
        margin-right: 0 !important;
    }

.pl60 {
    padding-left: 40px;
}

.h47 {
    height: 47px;
}

.h207 {
    height: 207px;
}

.h163 {
    height: 163px;
}


.h655 {
    height: 655px;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mt95 {
    margin-top: 95px;
}

.gantt-margin {
    margin: 22px;
    padding: 0;
}

.pr60 {
    padding-right: 40px !important;
}
/*End Panel*/
/* general css style */
/* To specify height and font size */
.e-input:not(:valid), .e-input:valid, .e-float-input.e-control-wrapper input:not(:valid), .e-float-input.e-control-wrapper input:valid, .e-float-input input:not(:valid), .e-float-input input:valid, .e-input-group input:not(:valid), .e-input-group input:valid, .e-input-group.e-control-wrapper input:not(:valid), .e-input-group.e-control-wrapper input:valid, .e-float-input.e-control-wrapper textarea:not(:valid), .e-float-input.e-control-wrapper textarea:valid, .e-float-input textarea:not(:valid), .e-float-input textarea:valid, .e-input-group.e-control-wrapper textarea:not(:valid), .e-input-group.e-control-wrapper textarea:valid, .e-input-group textarea:not(:valid), .e-input-group textarea:valid {
    font-size: 14px;
    height: 32px;
}
/* To specify font size and color */
.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:valid ~ label.e-float-text.e-label-bottom, .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:valid ~ label.e-float-text.e-label-bottom, .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text, .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    line-height: 50px
}


.e-dialog .e-dlg-content {
    padding: 20px;
}

.e-dialog .e-footer-content {
    /*    padding: 20px;*/
    border-radius: 0px 0px 4px 4px;
    border-top: 1px solid #EAEAEA;
}


.e-popup.e-popup-open.e-dialog {
    border-radius: 22px;
}

.e-dialog.main-dialog .e-dlg-content {
    padding: 20px 24px !important;
}



.e-dialog .e-dlg-header-content {
    border-radius: 4px 4px 0px 0px;
    border-radius: 4px 4px 0px 0px;
    border-bottom: 1px solid #EAEAEA;
    background: #FFF;
    padding: 12px 20px;
}

element.style {
}

.e-dialog .e-footer-content .e-btn {
    margin-left: 6px;
    border-radius: 10px;
    min-width: 75px;
}

.e-btn.e-flat, .e-css.e-btn.e-flat {
    background: rgba(0,0,0,0);
    border-color: rgba(0,0,0,0);
    box-shadow: none;
    color: rgba(0,0,0,.87);
}

.e-btn.e-flat, .e-css.e-btn.e-flat {
    border: 1px solid;
}

.e-control, .e-control [class^=e-], .e-control [class*=" e-"] {
    box-sizing: border-box;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

button.toolbar-button.toolbar-save-btn {
    /*background: var(--primary-color);*/
}

button.toolbar-button.toolbar-cancel-btn {
    /*background: #000;*/
}

.e-btn, .e-css.e-btn {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: #fafafa;
    border-color: rgba(0,0,0,0);
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    color: rgba(0,0,0,.87);
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.e-btn, .e-css.e-btn {
    -webkit-font-smoothing: antialiased;
    border: 1px solid;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: InstrumentSans, "Roboto","Segoe UI","GeezaPro","DejaVu Serif","sans-serif","-apple-system","BlinkMacSystemFont";
    font-size: 14px;
    font-weight: 500;
    justify-content: center;
    line-height: 1.143em;
    outline: none;
    padding: 6px 12px 4px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}

.e-control, .e-css {
    font-family: 'InstrumentSans';
    font-size: 12px;
    font-weight: normal;
}

.card-body.np {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.card-footer.np {
    background-color: rgb(255 255 255) !important;
    padding: 8px 16px 10px 8px !important;
    border-radius: 0 0 22px 22px;
}

.e-upload.e-control-wrapper, .e-bigger.e-small .e-upload.e-control-wrapper {
    font-family: "Roboto","Segoe UI","GeezaPro","DejaVu Serif","sans-serif","-apple-system","BlinkMacSystemFont";
    margin-top: 0px;
    height: 38px;
    border-radius: 4px;
}

.e-btn.e-flat, .e-css.e-btn.e-flat {
    border: none;
}

.e-split-btn-wrapper.e-colorpicker-popup.e-hide-opacity.e-outline.color {
    height: 39px;
}

.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color, .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color {
    background: rgba(0,0,0,0) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
    background-size: 8px !important;
    border-radius: 2px !important;
    height: 23px;
    margin-top: 1px;
    /* border-radius: 119px !important; */
    position: relative;
    width: 26px !important;
}

.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn, .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn {
    font-family: initial;
    line-height: 14px;
    padding: 0 4px;
}



.dialog-title {
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
}

.hidden {
    display: none;
    opacity: 0;
    transition: opacity 1s, display 0s;
}

.visible {
    display: block;
    opacity: 1;
    transition: opacity 1s;
}
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}
/*end*/
/*Scrollbar*/
/* Firefox */

::webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-button {
    height: 0;
    width: 0
}

::-moz-scrollbar-button, ::-webkit-scrollbar-button {
    width: 0px;
}

    ::-moz-scrollbar-button:decrement,
    ::-moz-scrollbar-button:increment,
    ::-webkit-scrollbar-button:decrement,
    ::-webkit-scrollbar-button:increment {
        width: 0px;
    }
/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

*::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: transparent;
}

    *::-webkit-scrollbar-track:hover {
        background-color: transparent;
    }

    *::-webkit-scrollbar-track:active {
        background-color: transparent;
    }

*::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgba(190, 202, 216,0.6);
}

    *::-webkit-scrollbar-thumb:hover {
        background-color: #BECAD8;
    }

    *::-webkit-scrollbar-thumb:active {
        background-color: #BECAD8;
    }

/*End Scrollbar*/


html, body {
    font-family: 'InstrumentSans','Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
    height: 100%;
    background: #f9faff;
    position: relative;
}

.f-hight {
    height: 100%;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.container-fluid {
    height: 100%;
    position: relative;
}

.left-side-icon img {
    display: block;
    /*margin: 0 auto;*/
    margin-left: 117px !important;
    margin-top: calc(50% + 42px);
}

section.login-form {
    max-width: 500px;
    width: 100%;
    padding: 10px;
    display: block;
    /*margin: 0 auto;*/
    margin-left: 120px !important;
    margin-top: calc(50% - 380px);
}

.section-title {
    color: #353535;
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 80px;
    text-align: left;
}

html.rtl .section-title {
    text-align: right;
}

.section-sub-title {
    color: #353535;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 80px;
    text-align: center;
}


.btn-back {
    border-radius: 4px;
    border: 1px solid var(--secondary-color) !important;
    background: #F2F4FC !important;
    color: var(--secondary-color) !important;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-transform: capitalize;
    height: 33px;
    padding: 8px 12px;
    margin-right: 14px;
}



.btn-primary {
    color: var(--secondary-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    border-radius: 5px !important;
    height: 48px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'InstrumentSans';
    min-width: 150px;
}

.btn-primary2 {
    color: #4E4009 !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    border-radius: 10px !important;
    height: 33px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'InstrumentSans';
    min-width: auto;
    text-transform: capitalize;
    padding: 8px 12px;
}

.btn-border {
    border-color: #EAEAEA !important;
    border-radius: 5px !important;
    height: 56px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'InstrumentSans';
    line-height: 50px;
    width: 100%;
    padding: 0px;
}

.btn-primary:hover {
    color: #fff !important;
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

a.main-logo {
    position: absolute;
    top: 20px;
    right: 20px;
}

a, .btn-link {
    color: var(--secondary-color) !important;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    /*letter-spacing: 0.28px !important;*/
    font-weight: 500;
}

.btn-logout {
    color: var(--primary-color) !important;
}

    .btn-logout:hover {
        color: var(--secondary-color) !important;
    }

section.forgotpw-form {
    max-width: 500px;
    width: 100%;
    padding: 10px;
    display: block;
    /* margin: 0 auto; */
    margin-left: 260px !important;
    margin-top: calc(50% - 380px);
}

h2.section-title.forgotpw {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1A1A1A;
    margin-bottom: 8px !important;
    margin-top: 28px !important;
}

label.sub-section {
    max-width: 460px !important;
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 40px;
}

label.email-text {
    font-size: 12px;
    font-weight: 400;
    color: #777;
    margin-bottom: 4px;
}

a#login-back {
    font-size: 12px;
    font-weight: 400;
    color: var(--secondary-color) !important;
}

a#forgot-password {
    float: var(--floatr);
    margin-top: 8px;
    margin-bottom: 32px;
    /* color: #000 !important; */
    color: var(--secondary-color) !important;
    font-family: 'InstrumentSans';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-decoration-line: underline;
}

button#login-submit {
    font-weight: 700 !important;
    font-size: 18px !important;
}

label.form-label.email {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #626476 !important;
    margin-top: 3px !important;
    margin-left: 12px !important;
}

.sign-options {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #EAEAEA;
    position: relative;
    height: 14px;
}

    .sign-options:before {
        stroke-width: 1px;
        stroke: #EAEAEA;
        width: 40px;
        height: 10px;
    }

    .sign-options span {
        position: absolute;
        background: white;
        margin: 0 auto;
        left: 30%;
        right: 30%;
        top: 4px;
        font-size: 12px;
        font-weight: 400;
        color: #626476;
        width: 120px !important;
    }

label.form-label.pw {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #626476 !important;
    margin-top: 3px !important;
    margin-left: 12px !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: none !important;
}

.form-control:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: none !important;
}

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    transform: scale(.85) translateX(7px) translateY(-13px);
    background: #fff;
    opacity: 1;
    padding: 1px 7px;
    height: auto;
}

.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 0;
    padding-bottom: 0;
}

h1:focus {
    outline: none;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 0;
    padding: 0 00px 0px 40px;
}

.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;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }


#side-menu {
    width: 278px;
    background: #FFF;
    float: var(--floatl);
    height: 100%;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    border-right: 1px solid #F0f0f0;
}

.page-wrapper {
    float: var(--floatl);
    width: calc(100% - 278px);
    background: #f5f8ff;
    position: relative;
    float: var(--floatr);
    height: 100%;
    overflow-y: hidden;
    transition: width 0.3s ease-in-out;
    background-size: contain;
    background-position: center;
}

#side-menu .menu-top a {
    margin: 40px 20px;
    width: calc(100% - 40px);
    display: block;
}

    #side-menu .menu-top a img {
        width: 173px;
        display: block;
        margin: 0 auto;
    }

#side-menu .menu-items {
    height: calc(100% - 138px);
    overflow-y: auto;
    overflow-x: hidden;
}

ul {
}

.menu-items ul {
    list-style: none;
    padding-left: 0;
}



    .menu-items ul > li a {
        font-size: 18px;
        height: 56px;
        display: block;
        padding: 0 24px;
        line-height: 56px;
    }

        .menu-items ul > li a.selected span, .menu-items ul > li a:hover span, .menu-items ul > li a.selected span, .menu-items ul > li a:hover i, .menu-items ul > li a.selected i {
            color: #000;
            /* font-size: 16px; */
            font-weight: 700;
        }

.menu-items span.e-icons.e-chevron-down {
    float: var(--floatr);
    line-height: 50px;
    color: #777;
    font-size: 13px;
    font-weight: 400;
}

.menu-items ul li ul {
    margin-left: 0;
    border-left: var(--secondary-color);
}

.menu-items ul > li > ul li a {
    height: 56px;
    padding: 0;
    line-height: 56px;
}

.top-header .menu-mobile {
    display: block;
    margin-right: 0;
    height: 68px;
    float: var(--floatl);
    width: 60px;
    text-align: center;
}

#toggle_btn {
    color: #999;
    float: none;
    font-size: 26px;
    line-height: 79px;
    padding: 0;
}

.bar-icon {
    display: inline-block;
    width: 21px;
}

    .bar-icon span:nth-child(2) {
        width: 15px;
    }

    .bar-icon:hover span:nth-child(2) {
        width: 21px;
    }

    .bar-icon span {
        background-color: #999;
        border-radius: 500px;
        display: block;
        float: var(--floatl);
        height: 2px;
        margin-bottom: 5px;
        width: 21px;
    }

.form-group {
    margin-bottom: 0px !important;
    margin-top: 24px;
}

.e-split-btn-wrapper.e-colorpicker-popup.e-hide-opacity.e-outline.color button {
    border: 1px solid;
    border-right: none;
    border-left: none;
    border-top: none;
    border-bottom: none;
}


.e-colorpicker-container.e-hide-opacity.e-outline.color {
    margin-top: 5px !important;
    margin-left: 12px;
}

.boxed {
    position: relative;
    background: white;
    border: 1px solid #c2c2c2;
    /* width: 300px; */
    height: 52px;
    border-radius: 4px;
}

.boxed-title {
    background: inherit;
    padding: 0 5px;
    position: absolute;
    left: 5px;
    top: -10px;
    color: #666666;
}
/*Start Header*/
.main-content {
    padding: 0;
    width: 100%;
    padding-top: 0;
    height: 100%;
    overflow-y: hidden;
}

.page-header {
    height: 68px;
    padding: 0 40px 0 0;
    background: #FFFF;
    line-height: 68px;
    border-bottom: 1px solid #F0F0F0;
}


.top-header {
    padding: 0;
    height: 68px;
    position: relative;
    width: 100%;
    float: var(--floatr);
    z-index: 40;
    margin-top: 0;
}

    .top-header .notifications, .top-header .userprofile {
        float: var(--floatr);
        line-height: 40px;
        font-size: 12px;
        margin-top: 20px;
        min-height: 31px;
    }

    .top-header .notifications {
        margin-top: 23px;
    }

    .top-header .userprofile img {
        width: 28px;
        margin-right: 8px;
        border-radius: 50%;
        height: 28px;
    }

.nav-link {
    display: block;
    padding: 0 24px;
    color: #0d6efd;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

    .nav-link:last-child {
        padding-right: 0px;
    }

.page-title h3 {
    font-size: 24px;
    font-weight: 700;
    font-family: 'InstrumentSans';
}

/*End Header*/

/*Start Sector*/
.e-outline.desc.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group.e-float-input.e-valid-input textarea {
    height: 74px !important;
}

.card.main-card.add-card {
    border: 2px dashed #dfdede;
    height: 350px;
    height: 350px;
}

span.num-users {
    border: 2px solid #cccccc00;
    display: block;
    height: 30px;
    line-height: 26px;
    text-align: center;
    overflow: hidden;
    width: 30px;
    color: #181818 !important;
    font-size: 11px !important;
    background: #cccccc6e;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    margin-left: 5px;
}

.page-title h3 {
    font-size: 17px;
    font-family: 'InstrumentSans';
    font-weight: 700;
    line-height: 68px;
}

.main-card-header {
    border-top-left-radius: 25px;
    border: 1px solid var(--primary-color);
    border-top-right-radius: 25px;
    height: 75px;
    text-align: center;
    background: var(--primary-color);
    border-bottom: 0;
}

.card.main-card {
    border: none;
    margin-bottom: 20px;
}

.add-card .card-body {
    cursor: pointer;
}

.main-card-header img {
    width: 25px;
    margin-top: 15px;
    fill: #FFF;
    height: 26px;
}

.main-card-header h3 {
    font-size: 20px;
    margin-top: 5px;
    color: #FFF;
    position: relative;
}

.main-card-body {
    min-height: 250px;
    border: 1px solid #dbdbdb;
    border-top: 0;
}

.main-card-icon img {
    width: 50px;
    margin: 0 auto;
    display: block;
    margin-top: 125px;
}


.upload-secotr-icon {
    border: none;
    margin-top: 3px !important;
    position: absolute;
}

.upload-stage-icon {
    border: 1px solid #949595;
    margin-top: 4px !important;
}

.profile-basic .text-muted, .profile-basic .text-muted a {
    color: #000000 !important;
    font-size: 12px;
    line-height: 1.4;
}


element.style {
}

.main-card-info img {
    width: 30px;
    margin-left: 0;
    height: 20px;
}

.main-card-info {
    margin-top: 10px;
    position: relative;
    padding: 0 10px;
    min-height: 30px;
}

    .main-card-info span {
        margin-left: 3px;
    }

.main-card-header-bottom-part img {
}

.icon-sec {
    margin-left: 100px;
    margin-top: 22px !important;
    color: #ed0202;
    cursor: pointer;
}

.select-users {
    margin-top: 20px !important;
    height: 50px !important;
}

.uploded-file {
    border: 1px solid #C3c3c3;
    margin-top: 0px;
    height: 42px;
    border-radius: 3px;
    padding: 12px;
}



.users-icon {
    font-size: 22px;
}

span.u-title {
    margin-left: 6px;
    margin-top: 3px !important;
}

.users-list {
    list-style: none;
    display: inline-flex;
    flex-wrap: wrap;
    margin-bottom: 0 !important;
    padding-left: 0;
}


ul.users-list a {
    border: 2px solid #cccccc00;
    display: block;
    height: 30px;
    line-height: 25px;
    text-align: center;
    overflow: hidden;
    width: 30px;
    color: #bdbdbd !important;
    font-size: 11px;
    background: #cccccc6e;
    border-radius: 100%;
    cursor: pointer;
}

ul.users-list li {
    margin-left: 4px;
    /* margin: 0; */
    padding: 0;
}


.user-init {
    position: relative;
    display: inline-block;
}

.tooltip {
    visibility: hidden;
    width: 96px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 104%;
    left: 21%;
    margin-left: -37px;
    opacity: 0;
    transition: opacity 0.3s;
}

.user-init:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.user-name {
    border: 2px solid #cccccc00;
    display: block;
    height: 30px;
    line-height: 28px;
    text-align: center;
    overflow: hidden;
    width: 30px;
    color: #181818 !important;
    font-size: 11px !important;
    background: #cccccc6e;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
}

.users-title {
    margin-left: 23px;
    margin-top: 11px;
    font-weight: 600;
}

.sctr-num {
    margin-top: 10px;
    margin-left: 15px;
    font-size: 15px;
}

.file-uploaded-container.sector {
    margin-top: 3px;
    border: 1px solid #949595;
}
/*End Sector*/

/* Start Initiative*/

.e-outline.desc.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group.e-float-input textarea {
    height: 74px !important;
}
/* End Initiative*/


li.main-menu a img {
    margin-right: 10px;
    width: 20px;
}

    li.main-menu a img.white {
    }

.main-card-header-bottom-part h3 span {
    position: absolute;
    right: 15px;
    width: 30px;
    height: 30px;
    border-radius: 330px;
    border: 1px solid #e3e3e3;
    background: #e3e3e3;
    bottom: 1px;
    cursor: pointer;
    top: 6px;
}

    .main-card-header-bottom-part h3 span img {
        position: relative;
        width: 25px;
        height: 17px;
        margin-top: 5px;
        margin-left: 2px;
    }

/*User*/

.usercard {
    border: 1px solid #ededed;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    height: 120px;
}

.profile-view {
    position: relative;
}

.user-icon img {
    width: 50px;
    margin: 0 auto;
    display: block;
    margin-top: 20px;
}

.profile-view .profile-basic {
    margin-left: 20px;
    padding-right: 10px;
    display: block;
    float: var(--floatl);
    width: calc(100% - 69px);
    position: relative;
}

.profile-view .profile-img h4 {
    line-height: 48px;
    font-size: 17px;
    color: var(--secondary-color);
    text-align: center;
    font-weight: 700;
}

.usercard .card-body {
    padding: 15px;
}

.no-border .profile-info-left {
    border: none !important;
}

.profile-view .profile-img-wrap {
    width: 48px;
    height: 48px;
    float: var(--floatl);
    cursor: pointer;
    display: block;
}



.profile-view .profile-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0;
    padding: 0;
    background: #f6f6f6;
}

.profile-view .username {
    color: #242424;
    font-size: 16px;
    font-weight: 800;
}

}

.thumbnail-img {
    border-radius: 4px; /* Rounded border */
    padding: 5px; /* Some padding */
    width: 50px; /* Set a small width */
}

.row.thumb-del {
    align-items: center;
    margin-top: -12px !important;
}

/*.e-checkbox-wrapper.e-wrapper.e-outline.create-account {
    position: absolute;
    top: 117px;
    left: 348px;
}

span.create-account-btn {
    margin-left: 60px;
    font-size: 14px;
    cursor: pointer;
}*/

.browse-input {
    border: none;
    margin-top: 10px !important;
}

.offline-check {
    margin-top: 10px;
}
/*End User*/

/*Loader*/

.element-loader {
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    color: #fff;
    background: rgba(0,0,0,0.1);
}

.element-parent {
    position: relative;
    height: 100%;
    padding: 0;
    margin: 0;
    display: inline-block;
    width: 100%;
}

.element-loader-content {
    width: 320px;
    /* background: #FFF; */
    /* border: 2px solid #e3e3e3; */
    border-radius: 17px;
    padding: 20px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .element-loader-content h1 {
        color: #3c3c3c;
        text-align: center;
        font-size: 12px;
        padding-left: 7px;
        padding-top: 5px;
    }

    .element-loader-content p {
        color: #3c3c3c;
        text-align: center;
    }

.shimmer {
    color: grey;
    -webkit-mask: linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
    background-repeat: no-repeat;
    animation: shimmer 2.5s infinite;
    height: 100%;
    display: block;
}

.element-loader-content img {
    text-align: center;
    display: block;
    margin: 0 auto;
    height: 64px;
}

@keyframes shimmer {
    100% {
        /* -webkit-mask-position: left*/
    }
}

.content.fullheight .element-parent {
    height: 100%;
    display: block;
}
/*End loader*/
/*sub header*/
.breadcrumb {
    /*height: 47px;*/
    height: 24px;
    margin-bottom: 0 !important;
}

.toolbar-container {
    position: relative;
    height: 36px;
    padding: 0;
    margin-top: 0;
    display: flex;
    /*width: 100%;*/
    flex-wrap: nowrap;
    z-index: 1;
}

.toolbar {
    float: var(--floatr);
    flex: 1;
    z-index: 1;
}

span.toolbar-icon img {
    /* width: 43px; */
    /* height: 12px; */
    /* line-height: 177px; */
    /* display: block; */
}

.breadcrumb ul {
    list-style: none;
    padding: 0;
    float: var(--floatl);
    flex: 50%;
    margin: 0;
    /*line-height: 47px;*/
}

    .breadcrumb ul li {
        float: var(--floatl);
        padding-right: 10px;
    }

        .breadcrumb ul li a {
            font-size: 16px;
            font-family: 'InstrumentSans';
            font-weight: 400;
            color: #888888 !important;
            line-height: 24px;
        }



        .breadcrumb ul li:last-child:after {
            content: '';
        }

        .breadcrumb ul li:after {
            content: '\2044';
            padding: 0px 0px 0px 10px;
            font-size: 16px;
            line-height: 10px;
            color: #747474 !important;
        }

        .breadcrumb ul li img {
            height: 18px;
            line-height: 16px;
        }


.breadcrumb .toolbar-container {
    flex: 50%;
}


    .breadcrumb .toolbar-container .toolbar {
        float: var(--floatr);
    }

button.toolbar-button {
    /* padding: 12px 16px; */
    font-size: 14px;
    font-family: 'InstrumentSans';
    height: 32px;
    /* margin-left: 12px; */
    font-weight: 500;
    /*border-radius: 50%;*/
    min-width: 36px;
    background: var(--secondary-color) 0% 0% no-repeat padding-box;
    border: 1px solid #00000000;
    opacity: 1;
    margin-left: 12px;
    width: auto;
}

    button.toolbar-button.toolbar-add-btn {
        height: 40px !important;
        border-radius: 50% !important;
        width: 48px;
        min-width: 48px;
    }

    button.toolbar-button.laslastable {
        height: 48px !important;
        border-radius: 50% !important;
        width: 48px !important;
    }

.breadcrumb ul li a.active {
    /*color: var(--secondary-color) !important;*/
    color: #888888 !important;
    font-family: 'InstrumentSans';
    font-weight: 400;
    font-size: 16px;
}

button.toolbar-button span {
    /* float: var(--floatl); */
    /* display: block; */
    /* text-align: center; */
    color: #ffffff;
    /* font-weight: 600; */
    /* font-size: 14px; */
}

span.toolbar-icon {
    width: 20px;
}

.toolbar-item {
    float: var(--floatr);
}

.child-toolbar {
    float: var(--floatl);
    flex-grow: 0;
}

    .child-toolbar h4 {
        width: auto;
        float: var(--floatl);
        font-size: 24px;
        font-weight: 700;
        line-height: 48px;
        min-width: 33%;
    }

    .child-toolbar .search {
        max-width: 200px;
        float: var(--floatl);
        min-width: 66%;
        margin-top: 0;
    }

        .child-toolbar .search .e-outline {
            height: 48px;
        }

            .child-toolbar .search .e-outline input {
                line-height: 47px;
                height: 47px;
            }

.checkbox-view-mode .icon img {
    width: 20px;
    margin: 0;
    padding: 0;
    line-height: 40px;
}

.label-view-mode.checkbox-view-mode {
    height: 24px !important;
}

.label-view-mode .icon {
    line-height: 40px;
    display: inline-block;
}

.check-box-title {
    display: inline;
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-left: 6px;
}

.label-view-mode .title {
    display: inline-block;
    color: #777;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.label-view-mode .text {
    display: block;
    margin-top: 4px;
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.label-view-mode img {
    margin-right: 8px;
}

.label-view-mode {
    display: flex;
}

/*End sub header*/
/*Card*/

.card {
    border-radius: 22px !important;
    border: none;
    margin-bottom: 20px;
    margin-top: 0;
    background-color: #FFF;
}

.card-body h4 {
    font-size: 17px;
    /*letter-spacing: 1px;*/
    font-family: 'InstrumentSans';
    font-weight: 400;
}

.card-header h3 {
    font-size: 18px;
    margin: 0;
    font-weight: 500;
    line-height: 31px;
}

.card-header {
    background-color: white;
    height: 48px;
    position: relative;
    border-radius: 22px 22px 0 0 !important;
    border: none;
    padding: 20px 20px 0 20px;
}

.pr-60 {
    padding-right: 40px !important;
}
/*End Card*/
/*company setting */
.upload-input {
    height: 49px !important;
}

    .upload-input.e-upload .e-file-select-wrap, .e-bigger.e-small .e-upload .e-file-select-wrap {
        padding: 9px 0 16px 12px !important;
    }

.e-file-select-wrap button {
    height: 29px !important;
}

.e-numeric.e-outline.e-input-group.e-control-container.e-control-wrapper.e-float-input.text-input {
    margin-top: 25px;
}

.card.activit-log {
    margin-bottom: 14px;
    border-left: 9px solid;
}

.without-border {
    border: none !important;
}

.card-body.company-style {
    padding: 20px 15px;
}

.lebel-without-border {
    color: #1A1A1A !important;
    font-family: InstrumentSans;
    font-size: 12px !important;
    font-weight: 400;
}

.middle-part-container {
    border-top: 1px solid #CFCFD2;
    margin-top: 1px;
    padding-top: 20px;
    height: 120px;
}

span.working-day-title {
    color: #777;
    font-family: InstrumentSans;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}



.bottom-part-container {
    border-top: 1px solid #CFCFD2;
    margin-top: 7px;
    padding-top: 13px;
}

.file-uploaded-container {
    border-radius: 4px;
    border: 1px solid #EAEAEA;
    background: #FFF;
    min-height: 41px;
    padding: 13px 12px 12px 12px;
    position: relative;
    height: 51px;
}

.icon-uploaded span {
    margin-left: 4px;
    margin-right: 12px;
    color: #000;
    font-family: InstrumentSans;
    font-size: 12px;
}


.file-uploaded-icon img {
    float: var(--floatr);
    text-align: center !important;
    width: 18px;
    position: relative;
    text-align: center;
}

.icon-uploaded img {
    width: 16px !important;
    height: 16px !important;
}

.file-size {
    color: #777 !important;
    font-family: InstrumentSans !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}


img.del-icon {
    float: var(--floatr);
    width: 16px !important;
    height: 16px !important;
    cursor: pointer;
}

.main-uploader-logo {
    display: block;
    margin-top: 16px !important;
    height: 70px;
    border: 1px dashed #8092DA;
    background: #F2F4FC;
    padding: 16px 27px 16px 24px;
}

label.control-label {
    color: #949595;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    display: block;
    margin-top: 20px !important;
}

.left-part-setting {
    float: var(--floatl);
    width: 181px;
    margin-right: 35px;
}

.right-part-setting {
    float: var(--floatl);
    width: 181px;
    margin-left: 35px;
}

span.click-edit {
    color: #1A1A1A !important;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.click-edit span {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.top-part-container {
    min-height: 389px;
}

.top-part-container {
    min-height: 389px;
}

.click-edit span {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.e-checkbox-wrapper.e-wrapper.e-outline.check-box {
    margin-right: 4px;
    float: var(--floatl);
    margin-bottom: 20px;
    width: 84px;
}

.form-group.main-uploader-logo .main-drop-area-wrap img {
    width: 24px;
    height: 24px;
    display: block;
    float: var(--floatl);
}

.main-drop-area-wrap .upload-text {
    font-family: InstrumentSans;
    font-size: 12px;
    text-align: center;
    font-weight: 400;
    margin-left: 16px;
}

.main-drop-area-wrap .upload-small-text {
    color: #707070;
    font-size: 12px;
    margin-left: 25px;
    display: block;
    margin-left: 39px;
}

.main-drop-area-wrap .upload-textext b {
    color: var(--secondary-color);
    font-weight: 600 !important;
    cursor: pointer;
}

.main-uploader-logo .e-upload {
    display: none;
}

.use-pre-printed-paper {
    margin-top: 31px;
}
/*Stages */
h3.stage-name {
    cursor: pointer;
}

button.e-control.e-btn.e-lib.edit-satge-btn.e-primary {
    text-transform: capitalize;
    border-radius: 10px;
    border: 1px solid var(--secondary-color);
    background: #F2F4FC;
    color: var(--secondary-color);
    font-size: 11px;
    font-weight: 500;
    box-shadow: none !important;
    float: var(--floatr);
    height: 24px !important;
    width: auto;
}

.main-info-description {
    min-height: 30px;
}

.main-info-title h3 {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 20px;
    font-weight: 700;
    margin-top: 12px;
    display: block;
    text-align: left;
    font: normal normal 700 16px/22px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #454545;
    text-transform: capitalize;
    opacity: 1;
    margin-bottom: 2px;
}

html.rtl .main-info-title h3 {
    text-align: right;
}

.main-info-title {
    height: 31px;
}

.main-info-description span {
    color: #747476;
    font-family: InstrumentSans;
    font-size: 14px;
    font-weight: 400;
    margin-top: 12px;
}

.main-info-icon img {
    width: 28px;
    height: 28px;
}

.budget-code {
    margin-top: 9px !important;
}

.file-uploaded-container.normal-input {
    /* height: 46px !important;*/
}

.upload-stage-template-icon {
    margin-top: 12px !important;
}

.e-upload.e-control-wrapper.e-control-container.e-lib.e-keyboard.normal-input.upload-stage-icon button {
    height: 19px !important;
    padding: 0 15px;
    line-height: 20px;
    font-size: 12px;
}

.e-upload.e-control-wrapper.e-control-container.e-lib.e-keyboard.upload-stage-template-icon button {
    margin-top: 13px !important;
    height: 26px !important;
}
/*end*/

/*End*/
/*project stage*/
.wizard-btn {
    background-color: var(--main-color) !important;
    color: #000 !important;
    height: 35px !important;
    width: 100px !important;
    margin: 5px !important;
    box-shadow: none !important;
    font-size: 15px !important;
}


    .wizard-btn:hover {
        background-color: white !important;
        color: var(--main-color) !important;
        height: 35px !important;
        width: 100px !important;
        margin: 5px !important;
        border-color: var(--main-color) !important;
        font-size: 15px !important;
    }

.main-drop-area-wrap .text.wiz {
    margin-left: 20px !important;
    float: none !important;
}

.small-text.wiz-txt {
    display: block;
    float: none !important;
}

.pro-container {
    padding: 0px 20px;
}

label.approv-title {
    font-size: 17px;
    font-weight: 700;
    margin-top: 12px;
}

img.edit-project-icon {
    width: 20px;
    margin-right: 8px;
}

.card-wizard {
    border: 1px solid #EAEAEA;
}

.structure-tags span {
    background: #F6F6F6;
    border-radius: 10px;
    opacity: 1;
    font: normal normal 700 10px/16px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #888888;
    text-transform: capitalize;
    opacity: 1;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 13px;
    float: var(--floatl);
    height: 21px;
    line-height: 23px;
    margin-top: 5px;
    min-width: 48px;
    text-align: center;
    font-weight: 450;
}

img.pr-dots-icon {
    width: 20px;
    float: var(--floatr) !important;
    margin-bottom: 17px;
    margin-right: 0px !important;
    margin-left: 4px;
    cursor: pointer;
    padding: 0px;
}

.card-header.pr-structure-header {
    border: none;
}

.structure-tags {
    margin-bottom: 0;
    width: calc(100% - 58px);
    float: var(--floatl);
    display: block;
    overflow-y: hidden;
    height: 28px;
}

.pro-st-end-date span {
    text-align: left;
    font-size: 10px;
    line-height: 16px;
    font-weight: 400;
    /*letter-spacing: 0px;*/
    color: #888888;
    opacity: 1;
}

html.rtl .pro-st-end-date span {
    text-align: right;
}

.pro-st-end-date {
    display: block;
    margin-top: 2px;
}

.pro-stucture-general-details span {
    text-align: left;
    font: normal normal normal 10px/16px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #888888;
    opacity: 1;
    display: block;
    font-family: 'InstrumentSans';
    /* margin-top: 2px; */
    font-weight: 450;
}

html.rtl .pro-stucture-general-details span {
    text-align: right;
}

.pro-stucture-desc {
    display: block;
    height: 155px;
    margin-bottom: 10px;
    overflow: hidden;
    float: var(--floatl);
    width: 100%;
    margin-top: 2px;
}

.st-init-users {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    margin: 0;
    background: #E8E8E8;
    margin-right: 11px;
    background-size: contain;
    cursor: pointer;
}

    .st-init-users h2 {
        text-align: center;
        line-height: 33px;
        font-size: 12px;
        font-weight: 600;
        color: #000;
        font-weight: 700;
    }

    .st-init-users.st-vpm {
        float: var(--floatl);
    }

.structure-users-list {
    height: 28px;
    display: block;
}

.st-init-users span {
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    font-weight: 600;
    color: #FFF;
}

.structure-pr-header {
    display: block;
    height: 16px;
    margin-bottom: 20px;
}

.card-body.structure-project-card {
    flex: 1 1 auto;
    padding: 20px 20px !important;
}

.pro-stucture-desc span {
    font: normal normal normal 14px/17px InstrumentSans;
    color: #888888;
    opacity: 1;
    font-size: 14px;
    line-height: 17px;
    display: block;
}

.pro-stucture-general-details {
    display: block;
    margin-bottom: 10px;
}

span.e-ddt.e-lib.e-show-dd-icon.e-input-group.e-control-container.e-control-wrapper.e-outline.drop-tree.e-show-text {
    border: 1px solid #949595 !important;
    border-radius: 4px !important;
    padding: 6px !important;
    margin-top: 4px !important;
}

span.e-ddt.e-lib.e-show-dd-icon.e-input-group.e-control-container.e-control-wrapper.e-outline.drop-tree.e-icon-anim, .tree-ms .e-input-group {
    border: 1px solid #949595 !important;
    border-radius: 4px !important;
    padding: 6px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    border: 1px solid #E7E7E7 !important;
    border-radius: 12px !important;
}
/*end project stage*/
/*project stage view*/
.timeline-milestone-container {
    display: block;
    position: relative;
    float: var(--floatl);
    margin: 0;
    padding: 10px;
    border-left: 1px solid #e3e3e3;
    padding: 0
}

.milestone-title {
    position: absolute;
    text-align: center;
    width: 100%;
    font-weight: 700;
    top: 0px;
}

.timeline-milestone-container:first-child {
    border-left: 0px;
}

.timeline-element-status {
    width: 20px;
    height: 20px;
    background: #d9d9d9;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    left: calc(50% - 10px);
}

.bottom .element-title {
    margin-top: 15px;
    font-size: 10px;
    position: absolute;
    bottom: -5px;
    top: auto;
    width: 200%;
    text-align: center;
}

.milestone-title span {
    display: block;
    width: 100%;
    text-align: center;
}

.project-details {
    overflow-x: visible;
    width: auto;
    min-width: 100%;
    height: 204px;
    overflow-y: hidden;
    white-space: nowrap;
}

.element-title span {
    display: block;
    width: 100%;
    text-align: center;
}

.timeline-element-status span {
    color: #fafafa;
    font-size: 14px;
    position: absolute;
    left: 3px;
    top: 3px;
}

.activity-date {
    margin-top: 16px;
    color: #9e9e9ef5;
    font-size: 10px;
}

.progress-updates-container {
    background: #9e9e9e14;
    height: 73px;
    margin-bottom: 19px;
    border-radius: 4px;
    border: 1px solid #D19900;
    background: #FFFFE7;
    box-shadow: 0px 4px 4px 0px rgba(26, 26, 26, 0.05);
    padding: 20px;
}

    .progress-updates-container.st-pro {
        margin-top: 24px;
    }

.left-part {
    float: var(--floatl);
    /*margin-top: 29px;
    margin-left: 41px;*/
}

.right-part {
    float: var(--floatr);
    height: 33px;
    /*    margin-top: 19px;
    margin-right: 41px;*/
}

span.progress-updates-title {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    padding-left: 16px;
}

.btn-upload {
    border-radius: 4px;
    border: 1px solid var(--secondary-color);
    background: #F2F4FC;
    padding: 3px 14px;
    margin-right: 16px
}

span.upload-report-btn {
    color: var(--secondary-color);
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 16.8px */
    cursor: pointer;
}

.add-risk-constainer {
    border: 1px solid #c2c2c2;
    margin-top: 12px;
    margin-left: 0px;
    width: 813px;
    border-radius: 7px;
    padding: 17px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    height: 286px;
}

.activities-desc-card {
    color: #888888;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    margin-bottom: 10px;
}

.add-risk-constainer-btns {
    float: var(--floatr);
    margin-top: 12px;
    /* margin-bottom: 13px; */
}

table.table.table-striped.table-bordered.table-normal {
    border: 1px solid #CCD3F1;
}

    table.table.table-striped.table-bordered.table-normal > thead {
        background: #F2F4FC !important;
    }

.add-payment {
    color: var(--secondary-color);
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    margin-top: 11px !important;
    cursor: pointer;
}

    .add-payment span {
        float: var(--floatr);
        margin-left: 4px;
    }

    .add-payment img {
        float: var(--floatr);
    }

.approve-btns {
    position: absolute;
    right: 0;
    top: 97%;
    left: 52px;
    z-index: 999;
}

button.btn.btn-approve {
    background: transparent;
    border: none;
    height: 20px;
    border-bottom: 1px solid var(--secondary-color);
    padding: 0;
    min-width: auto !important;
    border-radius: 0;
    color: var(--secondary-color);
    margin-right: 19px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'InstrumentSans';
}

button.btn.btn-reject {
    background: transparent;
    border: none;
    height: 20px;
    border-bottom: 1px solid #f44336;
    padding: 0;
    min-width: auto !important;
    border-radius: 0;
    color: #f44336;
    font-size: 12px;
    font-weight: 500;
    font-family: 'InstrumentSans';
}

.str.menu-nav {
    /*display: flex;*/
    /*justify-content: space-between;*/
    float: var(--floatr);
}




.str.dropdown span {
    text-decoration: none;
    text-align: left;
    font: normal normal normal 12px/19px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #B8B8B8;
    text-transform: capitalize;
    opacity: 1;
    cursor: pointer;
}

html.rtl .str.dropdown span {
    text-align: right;
}

.str.dropdown span div {
    padding: 8px 15px;
}

.str.dropdown {
    position: absolute;
    right: 31px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    opacity: 1;
    outline: none;
    opacity: 0;
    z-index: -1;
    max-height: 0;
    width: 105px;
    height: 86px;
}

.str.dropdown-container:focus {
    outline: none;
}

    .str.dropdown-container:focus .str.dropdown {
        opacity: 1;
        z-index: 100;
        max-height: calc((100vh / var(--zoom)));
        height: 111px;
        padding: 12px;
        border-radius: 10px;
        right: 10px;
        top: 39px;
        width: 105px;
    }

/*end*/
/*project stage page*/
img.add-user-icon {
    height: 20px;
}

.add-new-user {
    border: 1px solid #c2c2c2;
    position: absolute;
    padding: 7px;
    right: 550px;
    border-radius: 2px;
    height: 40px;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}

.add-new-vendor {
    border: 1px solid #c2c2c2;
    position: absolute;
    padding: 7px;
    left: 706px;
    border-radius: 2px;
    height: 40px;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}


.add-new-pm {
    border: 1px solid #c2c2c2;
    position: absolute;
    padding: 7px;
    right: 550px;
    border-radius: 2px;
    height: 40px;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}

.act-sub-title {
    margin-top: 19px;
}

span.risk-title {
    font-size: 20px;
}

.risk-sub-title {
    margin-bottom: 11px;
    margin-top: 17px;
}

.activities-container {
    border: 1px solid #9e9e9e33;
    height: 58px;
    margin-top: 12px;
    border-radius: 5px;
    width: 94%;
    margin-left: 17px;
}

.activities-desc {
    padding: 8px;
}

.project-header-title {
    cursor: pointer;
    display: block;
    text-align: left;
    font: normal normal 700 17px/22px InstrumentSans;
    letter-spacing: 0px;
    color: #1A1A1A;
    text-transform: capitalize;
    opacity: 1;
    margin-bottom: 2px;
    font-weight: 750;
}

html.rtl .project-header-title {
    text-align: right;
    text-wrap: pretty;
}

.project-img-container {
    float: var(--floatr);
    width: 20px !important;
    height: 20px !important;
    margin-right: 5px;
    margin-top: 7px;
    cursor: pointer;
}
/*end */
/* projct stage view*/
.today {
    /* font-size: 19px; */
    font-weight: bold;
}

.vertical-line {
    border-left: 2px solid #EBEBEB;
    height: 76%;
    position: absolute;
    left: 50%;
    width: 3px;
    margin-left: 1px;
    top: 71px;
}

.add {
    float: var(--floatr);
    text-align: center;
    cursor: pointer;
}

    .add.btn-primary span {
        line-height: 43px;
        /* margin-left: 50px; */
    }

span.e-icons.e-arrow-right.add-icon {
    margin-left: 7px;
}

.description {
    height: 133px !important;
}

.no-completed-activities {
    font-size: 14px;
    color: #bdbdbd;
    margin-left: 18px;
    margin-top: 5px;
}

label.completed-activities {
    font-size: 14px;
    font-weight: 600;
    margin-left: 9px;
}

/*.completed-activities-container {
    border: 1px solid #9e9e9e26;
    width: 340px !important;
    height: 86px;*/
/* position: absolute; */
/*border-radius: 20px;
    margin-left: 19px;
    margin-top: 12px;
    top: 13px;
    left: 90px;
}*/

/*.completed-activities-desc {
    padding: 9px;
}*/

span.center-part {
    text-align: center;
    margin-left: 162px;
    font-size: 14px;
    font-family: 'InstrumentSans';
}

span.main-dialog-title {
    font-size: 20px;
    font-family: 'InstrumentSans';
    font-weight: 600;
}

span.step-center-part {
    font-size: 14px;
    color: #9e9e9e;
    margin-left: 6px;
}

.add-new.btn-primary span.add-new-btn {
    margin-top: 19px !important;
    line-height: 47px;
}

.add-new.btn-primary {
    float: var(--floatl);
    text-align: center;
}

.right-part.btn-primary {
    line-height: 30px;
    /*width: 191px;*/
    padding: 8px 12px;
}

    .right-part.btn-primary img {
        /*margin-left: 22px;*/
    }

.btn-update {
    border-radius: 4px;
    background: var(--main-color);
    padding: 3px 12px
    /* padding: 8px 12px;*/;
    line-height: 29px;
}

span.update-progress-btn {
    padding-left: 8px;
    color: #4E4009;
    text-align: center;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    cursor: pointer;
}

.risk-grid-title {
    margin: 20px 0px 16px 0px;
}

.gantt-grid-title {
    margin: 0px 0px 10px 0px;
    padding-left: 0;
}

.no-margin .e-editable-value-container .e-editable-value {
    margin: 0px !important;
}

.add-new-risk {
    font-size: 20px;
    font-weight: 600;
    font-family: 'InstrumentSans'
}

label.no-added-activities {
    color: #bdbdbd;
    margin-left: 37px;
}

span.activity-title {
    font-size: 20px;
}

.row.payment {
    margin: 0;
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 10px;
}

label.payment-title {
    margin-top: 25px;
}

.row-btns {
    margin: 15px 0px 0px 0px;
}

.save-contiue-btn {
    position: absolute;
    right: 12px;
    width: auto;
    bottom: 11px;
    height: 35px !important;
    box-shadow: none !important;
    border-radius: 12px;
    color: #000 !important;
    font-family: 'InstrumentSans';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    background: var(--main-color) !important;
    border: none !important;
    min-width: 100px;
}

.back-btn {
    border-radius: 12px;
    border: 1px solid var(--secondary-color) !important;
    background: #F2F4FC !important;
    float: var(--floatl) !important;
    color: var(--secondary-color) !important;
    font-family: 'InstrumentSans';
    font-size: 12px !important;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    width: 59px !important;
    position: absolute;
    /* float: var(--floatl); */
    bottom: 12px;
    left: 40px !important;
    box-shadow: none;
    height: 35px;
    min-width: 100px;
}
/*end */

/*Vendor page*/
span.e-icons.e-plus.add {
    border: 1px solid #c2c2c2;
    position: absolute;
    padding: 7px;
    border-radius: 0px 5px 5px 0px;
    line-height: 24px;
    cursor: pointer;
    height: 40px;
    width: 3%;
}

.card-body.np.v {
    min-height: 130px;
}

.new-pm {
    left: 1000px;
}

.new-vendor {
    left: 710px;
}

.e-outline.address.e-input-group.e-control-container.e-control-wrapper.e-float-input {
    margin-top: 16px;
}

.add-user-container {
    border: 1px solid #c2c2c2;
    margin-top: 16px;
    border-radius: 12px;
}

.add-user-container-btns {
    float: var(--floatr);
}

.card-header.ve img {
    width: 30px;
}

.btn-delete-entity {
    border-radius: 4px;
    border: 1px solid #f44336 !important;
    background: #ffeeed !important;
    color: #f44336 !important;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-transform: capitalize;
    height: 33px;
    padding: 8px 12px;
    margin-right: 16px;
    float: var(--floatl);
}
/*End*/

/* Project Card */
.prj-card-header {
    border-top-left-radius: 20px;
    border: 1px solid var(--primary-color);
    border-top-right-radius: 20px;
    height: 90px;
    text-align: center;
    background: var(--primary-color);
    border-bottom: 0;
}

.prj-card-body {
    min-height: 224px;
    border: 1px solid #EAEAEA;
    border-radius: 4px;
    margin-top: 25px;
}

.prj-card-info {
    max-height: 30px;
    margin-top: 10px;
}

.prj-card-date {
    display: block;
    margin: 16px 0 0 0;
}

    .prj-card-date .img-container, .prj-card-info .img-container {
        width: 20px;
        margin-left: 16px;
        height: 20px;
        float: var(--floatl);
        text-align: center;
        margin-right: 12px;
    }

    .prj-card-date span {
        margin-left: 5px;
        font-size: 14px;
        color: #777;
    }

.prj-card-body h5 {
    text-align: left;
    font-size: 18px;
    padding: 10px;
    position: relative;
    font-weight: 500;
    color: #000;
    line-height: 36px;
    overflow: hidden;
    height: 56px;
    cursor: pointer;
}

html.rtl .prj-card-body h5 {
    text-align: right;
}

.btn-bckgnd {
    color: #FFF !important;
    margin-left: 0px;
}

a.phn-btn img,
a.email-btn img {
    width: 18px;
}

a.phn-btn img {
    width: 18px;
    font: icon;
}

.impl-pgressBar {
    height: 46px;
    display: block;
    position: relative;
    margin-bottom: 13px;
    float: var(--floatl);
    width: 100%;
}

.prj-title {
    margin: 0;
    padding: 0;
    background: #F2F4FC;
    height: 56px;
}

.prj-card-body h5 img {
    position: absolute;
    top: 15px;
    right: 0;
}


.prj-card-info label {
    margin-left: 5px;
    /* min-width: 37%;*/
    width: calc(100% - 57px);
    font-size: 14px;
    color: #777;
}

span.btn-bckgnd:last-child {
    margin-right: 0px;
}
/* End Project Card*/

.card-header img {
    float: var(--floatl);
    /* width: 30px; */
    margin-top: 0px;
    margin-right: 16px;
}

.stage-bool-item {
    display: block;
    width: 100%;
    padding-bottom: 10px;
    margin-top: 10px;
    border-bottom: 1px solid #e3e3e3;
    height: 33px;
}

    .stage-bool-item img {
        width: 25px;
        float: var(--floatr);
    }

    .stage-bool-item .title {
        width: calc(100% - 35px);
        float: var(--floatl);
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        font-weight: 500;
    }

    .stage-bool-item:last-child {
        border-bottom: 0;
    }


.attendance-type.selected {
    border: none;
    box-shadow: none;
    border-radius: 22px;
}

.attendance-type {
    background-color: white;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    margin: 0;
    padding: 10px 15px;
    height: 200px;
}

    .attendance-type p {
        color: #727272;
        font-size: 0.75em;
        margin: 0;
        text-align: left;
    }

html.rtl .attendance-type p {
    text-align: right;
}

.row.toggle-card {
    background: transparent;
}

.attendance-type h4 {
    position: relative;
    padding-right: 35px;
    padding-top: 2rem;
}

    .attendance-type h4 img {
        width: 24px;
        position: absolute;
        right: -7px;
        top: -4px;
    }

.form-section-title {
    background: #F2F4FC;
    padding: 7px 20px;
    height: 40px;
    border-radius: 4px;
    margin-top: 18px;
    border: 1px solid #e3e3e3;
    box-shadow: 0px 1px 8px #e3e3e3;
}

.chats {
    height: 100%;
    display: block;
    overflow-x: hidden;
}

.send-chat {
    height: 75px;
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-top: 0;
    width: 960px;
    margin: 0 auto;
}

    .send-chat .templates span {
        border: 1px solid #e3e3e3;
        border-radius: 10px;
        padding: 0px 10px;
        font-size: 14px;
        cursor: pointer;
        display: block;
        float: var(--floatl);
        margin-right: 10px;
        margin-bottom: 10px;
        height: 30px;
        line-height: 30px;
    }

.chat-box {
    height: 135px;
    background: #eeeeee !important;
}

    .chat-box textarea {
        height: 120px !important;
        background: transparent !important;
    }

a.send-chat {
}

a.send-chat-btn {
}

    a.send-chat-btn i {
        margin-top: 5px;
        font-size: 30px;
    }

.relative {
    position: relative;
}

a.send-chat {
}

a.send-chat-btn {
    position: absolute;
    bottom: 23px;
    right: 12px;
    width: 20px;
    height: 20px;
    text-align: center;
}

    a.send-chat-btn i {
        margin-top: 3px;
        font-size: 30px;
        background: #fff;
        border: 1px solid #FFF;
        border-radius: 50%;
    }

.relative {
    position: relative;
}

span.normal {
}

span.normal {
    background: rgba(255, 209, 0, 0.33);
}

span.danger {
    background: rgb(255 0 0 / 33%);
}

span.success {
    background: rgb(0 255 81 / 33%);
}

.templates {
    border: 1px solid #e3e3e3;
    height: 100%;
    padding: 10px;
}

.chat-text.from-AI {
    background: #FFF;
    width: auto;
    float: var(--floatl);
    padding: 15px 22px 15px 57px;
    border-radius: 22px;
    clear: both;
    max-width: 75%;
}

.chat-text {
    background: #FFF;
    /* border-bottom: 1px solid #EAEAEA; */
    display: block;
    height: auto;
    border-radius: 22px;
    padding: 15px 57px 15px 22px;
    width: auto;
    position: relative;
    float: var(--floatr);
}

    .chat-text.from-AI {
        position: relative;
    }

        .chat-text.from-AI::before {
            content: '';
            background: url("/img/ai.svg?v=1.1");
            width: 31px;
            height: 21px;
            position: absolute;
            left: 13px;
            top: 15px;
            background-position: center;
            background-repeat: no-repeat;
        }



.loading-chat {
    display: inline-block;
    width: 200px;
    height: 40px;
    clear: both;
    position: relative;
    background: #FFF;
    border-radius: 22px;
    padding: 19px 22px 15px 57px;
    height: 50px;
}

    .loading-chat .dot {
        background: #EBEBEB;
        width: 11px;
        height: 12px;
        border-radius: 12px;
        float: var(--floatl);
        margin-right: 10px;
    }

    .loading-chat .active-dot {
        background: #B9B9B9 !important;
    }
/*Vendor Form*/

.add-user-constainer {
    border: 1px solid #c2c2c2;
    margin-top: 12px;
    margin-left: 12px;
    width: calc(100% - 20px);
    border-radius: 8px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

label.add-user-container-tiltle {
    font-size: 18px;
    margin-top: 8px;
    font-weight: 800;
}

.add-user-container-btns {
    margin-bottom: 14px;
}

.main-icon img {
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 5px 3px;
}

.main-icon {
    border: 1px solid;
    float: var(--floatl);
    border-radius: 50%;
    background: #000;
    height: 30px;
    float: var(--floatl);
    width: 30px;
    margin-top: 6px;
    margin-right: 16px;
}

span.btn-save-vuser {
    font-size: 16px;
    background-color: black;
    border: 1px solid;
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 14px;
    font-weight: 500;
    padding: 6px 16px;
    position: relative;
    margin-top: 11px;
}

.btn-undo {
    font-size: 15px;
    font-weight: 800;
    text-decoration: underline;
    margin-right: 13px;
    cursor: pointer;
}
/*end*/

.main-users-list {
    float: var(--floatl);
}

.with-icon {
    max-width: calc(100% - 40px) !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.combo-box-item-icon {
    width: 40px;
    float: var(--floatr);
    height: 48px;
    border: 1px solid #949595;
    border-left: 0;
    border-radius: 0px 5px 5px 0px;
    margin-top: 28px;
}

.multi-combo-box-item-icon {
    width: 50px;
    float: var(--floatr);
    height: 40px;
    border: 1px solid #c2c2c2;
    border-left: 0;
    border-radius: 0px 5px 5px 0px;
    /* background: #c2c2c2; */
}


.multi-input {
    border: 1px solid #949595 !important;
    padding: 12px;
    box-shadow: 0px 2px 4px 0px rgba(26, 26, 26, 0.05);
    margin-top: 4px;
    max-width: calc(100% - 50px) !important;
    border-top-right-radius: 0px !important;
    border-top-left-radius: 4px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 4px !important;
}

    .multi-input .e-multi-select-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        height: 20px !important;
        color: #1A1A1A !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        text-align: center;
        /* line-height: 12px !important; */
    }

        .multi-input .e-multi-select-wrapper span.e-multi-searcher {
            color: red !important;
            margin-top: -14px !important;
        }

.multi-box-item-icon {
    width: 50px;
    float: var(--floatr);
    height: 38px;
    border: 1px solid #949595;
    border-left: 0;
    border-radius: 0px 5px 5px 0px;
    margin-top: 22px !important;
}

    .multi-box-item-icon span {
        text-align: center;
        width: 100%;
        display: block;
        line-height: 38px;
        font-size: 18px !important;
        cursor: pointer;
        color: #757575;
    }

.combo-box-item-icon span {
    text-align: center;
    width: 100%;
    display: block;
    line-height: 48px;
    font-size: 18px !important;
    cursor: pointer;
    color: #757575;
}

.small a {
    font-size: 12px;
}

.wizard-btns {
    /*  position: absolute;
    right: 20px;
    width: auto;
    bottom: 20px;*/
    position: relative;
    border-top: 1px solid #e3e3e3;
    background: white
}

.wizard-body {
    /* height: 582px; */
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
    min-height: calc(100% - 113px);
}
/* To specify font size and color */
.e-upload .e-file-select-wrap .e-btn, .e-upload .e-upload-actions .e-btn, .e-bigger.e-small .e-upload .e-file-select-wrap .e-btn, .e-bigger.e-small .e-upload .e-upload-actions .e-btn {
    height: 40px;
    background-color: #FFF;
    box-shadow: none;
    border-color: var(--secondary-color);
    border-radius: 4px;
    color: var(--secondary-color);
    font-size: 11px;
    line-height: 18px;
    font-weight: 500;
}

.e-upload.full {
    height: 71px;
}

#Gantt {
    padding: 0px;
}


.sub-title {
    margin-top: 30px;
    border-bottom: 1px solid #e3e3e3;
}

.row.payment label {
    font-size: 15px;
    font-weight: 400;
}

.e-tab .e-tab-header .e-toolbar-item {
    background: inherit;
    border: none;
    border-bottom: 1px solid transparent;
}

.mini-menu .sidebar {
    width: 56px !important;
}

.mini-menu .page-wrapper {
    width: calc(100% - 56px);
}

.mini-menu li.main-menu span {
    display: none;
}

.mini-menu #side-menu .menu-top a {
    margin: 40px 13px;
}

.menu-top {
    overflow: hidden;
    height: 138px;
    display: block;
}

.mini-menu .visible {
    display: none !important;
    opacity: 0;
}

.hover-menu .sidebar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 999;
}

.hover-menu .page-wrapper {
    width: 100% !important;
}

.page-breadcrumb {
    padding: 0px 0px 0px 40px;
    /*height: 77px;*/
    display: block;
    clear: both;
    margin-bottom: 20px;
    margin-top: 27px;
    /* float: var(--floatl); */
}

.card-sep .card-body {
    flex: 1 1 auto;
    /* padding: 1rem 1rem; */
    /* background: #FFF; */
    /* border-radius: 4px; */
    border: none;
    margin-top: 2px;
    background: white;
    box-shadow: none;
    border-radius: 22px;
}

.card-np-title > .card-header, .card-sep > .card-header {
    background: #FFF;
    height: 48px;
    margin-bottom: 12px;
    box-shadow: none;
    border-radius: 22px !important;
    border: none;
    box-shadow: none;
}

.card-np-title .card-body {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0px 0 0px 0;
}

.card-header h5 {
    font-size: 17px;
    font-weight: 700;
    padding-bottom: 0;
    margin-bottom: 0;
    line-height: 31px;
}

.row.toggle-card .form-group {
    margin-top: 0;
    margin-bottom: 20px !important;
}

.attendance-type {
    border: none;
    box-shadow: none;
    border-radius: 22px;
}

.form-group:first-child {
    margin-top: 24px;
}

.side-content .card {
    /* margin-right: 20px; */
}

.card.card-np-title,
.card.card-sep {
    background: transparent;
}

.card.card-np-title {
    margin-bottom: 0;
    width: 100%;
}

.e-outline.filter-search {
    margin-top: 0px !important;
}



.filter-l {
    float: var(--floatl);
    width: auto;
    position: relative;
    height: 52px;
}

.filter-r {
    float: var(--floatr);
    width: auto;
    height: 52px;
    overflow: hidden;
}

.filter-row .e-outline.e-input-focus label.e-float-text::before, .filter-row .e-outline.e-input-focus label.e-float-text::after {
    border-top: 0px;
}

.filter-row {
    padding: 0 0 0 40px;
    margin-bottom: 20px;
    height: 40px;
    position: relative;
}

.filter-container {
    width: 100%;
    height: 52px;
    position: relative;
}

.filter-row .e-outline {
    background: #FFF !important;
}

.filter-row .e-filter {
    height: 40px;
    width: 40px;
    background: white !important;
    box-shadow: 0px 1px 1px #f9f9f9 !important;
    border-color: #EAEAEA !important;
    margin-right: 0;
    border-radius: 12px;
    margin-bottom: 4px;
}

    .filter-row .e-filter span {
        font-size: 20px;
        /*color: #000;*/
        color: var(--secondary-color) !important;
        position: relative;
    }

.filter-row .form-group {
    margin: 0;
}

.filter-row .e-outline, .filter-row .e-outline input {
    height: 40px !important;
    border-radius: 12px !important;
    font-family: 'InstrumentSans' !important;
    color: #888 !important;
}

    .filter-row .e-outline input {
        min-height: 30px !important;
    }

.filter-row .e-outline {
    box-shadow: 0px 1px 1px #f9f9f9 !important;
    border-color: #EAEAEA !important;
}

.filter-search {
    min-width: 200px !important;
    float: var(--floatl);
    width: calc(100% - 288px) !important;
    margin-right: 20px !important;
}

.filter-1 {
    min-width: 200px !important;
    float: var(--floatl);
    width: calc(100% - 288px) !important;
    margin-right: 15px;
}

.filter-sort {
    min-width: 187px !important;
    width: 187px !important;
    margin-right: 15px;
}

button.e-control.e-btn.e-lib.e-filter.approvals-filter.e-primary {
    width: 102px;
    color: var(--secondary-color);
    text-transform: capitalize;
}

.font400 {
    font-weight: 400 !important;
}

span.card-header-icon {
    width: 28px;
    height: 28px;
    display: block;
    float: var(--floatl);
    margin-right: 8px;
    border-radius: 4px;
    padding: 3px;
    color: #FFF;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
}

    span.card-header-icon img {
        height: 21px;
        width: auto;
        margin-top: 1px;
    }

.card-border {
    box-shadow: none;
}

.card-project {
    height: 371px;
}

.prj-card-date .img-container img, .prj-card-info .img-container img {
    max-width: 100%;
    margin: 0 auto;
}

.project-current-milstone span {
    display: block;
    float: var(--floatl);
    /* padding-top: 12px; */
    /* height: 27px; */
    text-align: left;
    font: normal normal normal 10px/17px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #888888;
    text-transform: capitalize;
    width: auto;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 80px);
}

html.rtl .project-current-milstone span {
    text-align: right;
}

.project-current-milstone span b {
    color: #4F5B67;
    font-size: 10px;
    font-weight: 500;
}

.project-current-status span {
    height: 18px;
    display: block;
    float: var(--floatr);
    padding: 0 10px;
    text-align: left;
    font: normal normal normal 10px/17px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #FBBA20;
    line-height: 18px;
    margin-bottom: -2px;
    background: #FFFBEB 0% 0% no-repeat padding-box;
    border: 1px solid #FBBA20;
    border-radius: 10px;
    opacity: 1;
    margin-top: 0;
    font-size: 10px;
    border: 0 !important;
    line-height: 18px !important;
}

html.rtl .project-current-status span {
    text-align: right;
}

.project-current-progress span {
    font-size: 13px;
    /* padding-left: 20px; */
    color: #444444;
    display: block;
    float: var(--floatl);
    line-height: 18px;
    display: block;
    float: var(--floatl);
    clear: both;
    font-family: 'InstrumentSans';
    font-weight: 500;
}

.project-current-date span {
    float: var(--floatr);
    font-size: 9px;
    padding-right: 0;
    /* margin-bottom: 12px; */
    color: #888888;
    line-height: 8px;
    display: block;
}

.e-progress-bar {
    /* width: 100%; */
    /* padding: 0 8px; */
}

.project-current-progress img {
    width: 10px;
}

.e-chip {
    border: 1px solid var(--secondary-color) !important;
    background-color: #fff !important;
    /* color: var(--secondary-color) !important; */
    border-radius: 10px !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

span.toolbar-icon img {
    display: block;
}

.toolbar-add-btn-icon {
    display: unset !important;
}

body.white-body {
    /* background: #FFF; */
}

.wt .filter-search {
    width: 520px !important;
    !i;
    !;
}

.filter-1 {
    max-width: 187px !important;
}

.wt .toolbar-container {
    /* width: 61px; */
    float: var(--floatr);
    /* margin-right: 7px; */
}

h5.stage-name {
    cursor: pointer;
}

/*region Wizard*/

.elite-wizard .wizard-header {
    height: 32px;
    overflow: hidden;
    margin-bottom: 24px !important;
    margin: 0 auto;
    display: block;
    text-align: center;
}

.wizard-step-header::after {
    content: "\f105" !important;
    position: absolute !important;
    right: -32px !important;
    /* border: 1px solid !important; */
    height: 20px !important;
    width: 20px !important;
    font-family: 'Line Awesome Free';
    font-size: 20px !important;
    font-weight: 700;
    top: 0px;
    color: #959595;
}

.wizard-step-header:last-child::after {
    display: none !important;
}

.elite-wizard .wizard-header .wizard-step-header {
    /* float: var(--floatl); */
    /* width: 132px;*/
    width: auto;
    margin-right: 44px;
    height: 32px;
    border: 1px solid #929294;
    border-radius: 20px;
    text-align: center;
    display: inline-block;
    position: relative;
    cursor: pointer;
    background: #fff;
}

.wizard-step-index {
    float: var(--floatl);
    margin-right: 10px;
    font-size: 14px;
    border: 1px solid #929294;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-top: 3px;
    margin-left: 4px;
    text-align: center;
    line-height: 24px;
    background: #959595;
    color: #FFF;
    padding: 0px;
}

.wizard-step-title {
    float: var(--floatl);
    text-align: center;
    font-size: 12px;
    font-family: 'InstrumentSans';
    line-height: 32px;
    padding-right: 10px;
}

.elite-wizard .wizard-header .wizard-step-header.active-tab {
    border: 1px solid var(--secondary-color) !important;
}

    .elite-wizard .wizard-header .wizard-step-header.active-tab .wizard-step-title {
        font-weight: 600;
        color: var(--secondary-color);
    }

    .elite-wizard .wizard-header .wizard-step-header.active-tab .wizard-step-index {
        background: var(--secondary-color);
    }

.card.upload-wizard {
    min-height: 360px;
}

    .card.upload-wizard .main-uploader {
        display: block;
        width: 549px;
        margin: 77px auto;
        height: 205px;
        border: 1px dashed #8092DA;
        background: #F2F4FC;
    }

.main-uploader {
    display: block;
    /* margin-top: 50px !important;*/
    height: 100px;
    border: 1px dashed #8092DA;
    background: #F2F4FC;
    border-radius: 4px;
}

    .main-uploader .e-upload {
        /* display: none; */
        border: none;
    }

.card.upload-wizard .main-uploader .main-drop-area-wrap img {
    margin-left: 242px !important;
    margin-top: 40px;
    width: 60px;
    height: 60px;
}

.main-drop-area-wrap .text {
    font-family: InstrumentSans;
    font-size: 14px;
    text-align: center;
    font-weight: 400;
    margin-top: 26px;
    float: var(--floatl);
    margin-left: 16px;
}

.form-group.main-uploader .main-drop-area-wrap img {
    margin-left: 20px !important;
    margin-top: 21px;
    width: 40px;
    height: 40px;
    float: var(--floatl);
}

b.choose-file {
    color: var(--secondary-color);
    font-weight: 600 !important;
    cursor: pointer;
}


.main-drop-area-wrap .small-text {
    color: #707070;
    font-size: 12px;
    text-align: center;
    margin-top: 8px;
    margin-left: 16px;
    float: var(--floatl);
}

.elite-wizard .wizard-header .wizard-step-header.finished-tab {
    border: 1px solid #49B136;
}

    .elite-wizard .wizard-header .wizard-step-header.finished-tab .wizard-step-index {
        background: #49B136;
        border: 1px solid #49b136;
    }

    .elite-wizard .wizard-header .wizard-step-header.finished-tab .wizard-step-title {
        color: #49B136;
    }

.wizard-step-header.finished-tab::after {
    color: #49B136;
}

.wizard-step-index span {
    line-height: 23px !important;
    font-size: 13px;
}

.filter-row.wt h4 {
    float: var(--floatl);
    max-width: 200px;
    font-size: 17px;
    font-weight: 700;
}

.toolbar-item.toolbar-wizard-btn button {
    background: transparent;
    border: none;
    height: 20px;
    border-bottom: 1px solid var(--secondary-color);
    padding: 0;
    min-width: auto !important;
    border-radius: 0;
    color: var(--secondary-color);
}

    .toolbar-item.toolbar-wizard-btn button .toolbar-text {
        color: var(--secondary-color) !important;
        font-size: 12px;
    }
/*End Region*/

.normal-input {
    border: 1px solid #E7E7E7 !important;
    border-radius: 12px !important;
    padding: 8px 12px;
    box-shadow: none;
    margin-top: 4px;
}

    .normal-input input {
        padding: 0 !important;
        margin: 0 !important;
        /* background: #ebe6e600 !important; */
        height: 20px !important;
        color: #1A1A1A !important;
        font-size: 14px !important;
        font-weight: 400 !important;
    }

        .normal-input input::placeholder {
            color: #949595 !important;
            font-size: 14px !important;
            font-weight: 400 !important;
        }

    .normal-input:focus {
        border: 1px solid var(--secondary-color) !important;
    }

    .normal-input.with-icon {
        max-width: calc(100% - 50px) !important;
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before, .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after, .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after, .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after {
    background: none;
}

.e-colorpicker-container.e-hide-opacity.normal-input-color {
    border: 1px solid #949595 !important;
    border-radius: 4px !important;
    box-shadow: 0px 2px 4px 0px rgba(26, 26, 26, 0.05);
    margin-top: 11px;
    height: 43px;
    display: block;
    width: 43px;
    height: 33px;
    margin-left: 59px !important;
}

.e-split-btn-wrapper.e-colorpicker-popup.e-hide-opacity.normal-input-color button {
    margin-top: 3px !important;
    border: none;
    /* height: 23px; */
    text-align: center;
    line-height: 14px;
    width: 5px;
    z-index: unset !important;
}

.sta-color {
    margin-left: 0px !important;
}

.form-group.color-input {
    margin-top: 25px !important;
}

.normal-input-color span.e-btn-icon.e-icons.e-caret {
    font-size: 10px !important;
    margin-left: 19px !important;
    color: #757575 !important;
}

.e-upload.e-control-wrapper.e-control-container.e-lib.e-keyboard.normal-input e.e-upload .e-file-select-wrap .e-btn, .e-upload .e-upload-actions .e-btn, .e-bigger.e-small .e-upload .e-file-select-wrap .e-btn, .e-bigger.e-small .e-upload .e-upload-actions .e-btn-file-select-wrap button {
    margin-top: -12px !important;
}

.e-file-select-wrap {
    margin-top: -20px !important;
}

.form-group label {
    font-size: 12px;
    color: #777;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 4px;
}

span.dialog-header {
    font-family: InstrumentSans;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}

.combo-input {
    border: 1px solid #949595 !important;
    border-radius: 4px !important;
    padding: 10px 12px;
    box-shadow: 0px 2px 4px 0px rgba(26, 26, 26, 0.05);
    margin-top: 4px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}



    .combo-input input {
        padding: 0 !important;
        margin: 0 !important;
        height: 20px !important;
        color: #1A1A1A !important;
        font-size: 14px !important;
        font-weight: 400 !important;
    }

/* Status-update View Design Start*/

.updProgress .e-dlg-header {
    width: auto;
    /*border-bottom: 1px solid #EAEAEA;*/
}

.wizard-header.progressupdate {
    padding-left: 20px;
    margin-bottom: 0px !important;
}

    .wizard-header.progressupdate .wizard-step-header {
        width: auto;
        min-width: 174px;
    }

a.btn-primary.save {
    color: #4E4009 !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    padding: 12px;
    border-radius: 4px;
}

.updProgress .e-footer-content {
    border-top: 1px solid #EAEAEA;
    padding: 12px 24px;
}

label.title-activity {
    color: #777777;
    font-family: 'InstrumentSans';
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 4px;
}

span.e-outline.descriptionText.e-input-group.e-control-container.e-control-wrapper {
    width: 422px;
    padding: 0px 0px 0px 2px;
    color: #949595;
    font-family: 'InstrumentSans';
    font-size: 14px;
    font-weight: 400;
}

.descriptionText {
    height: 100px !important;
    width: 100% !important;
}

.btn-primary.add {
    margin: 16px 5px 0px 0px;
    min-width: 70px !important;
    height: 33px;
    background-color: #F2F4FC !important;
}

span.add-report-btn {
    text-align: center;
}

span.e-icons.e-plus {
    font-size: x-small;
}

.add.btn-primary span {
    line-height: 30px;
    font-size: 12px;
    font-weight: 500;
    padding: 0px 3px 0px 5px;
}

label.activity-right-title {
    font-size: 17px;
    font-weight: 700;
    font-family: 'InstrumentSans';
    margin-left: 12px;
    width: 100% !important;
    margin: 0px !important;
    padding-bottom: 8px;
}


img.progress-icons.addb {
    height: 20px;
    margin-top: 18px;
}

img.progress-icons.notes {
    height: 60px;
    margin-left: 23px;
}

img.progress-icons.logo {
    height: 20px;
    margin: 40px 0px 0px 40px
}

img.progress-icons-toparrow {
    height: 80px;
    margin: 0px 0px 35px 0px;
}

img.progress-icons-botarrow {
    height: 30px;
    margin: 20px 0px 0px 25px;
}

.row.icons {
    padding: 120px 0px 140px 10px;
    display: flex;
    flex-direction: column;
    position: relative;
}

img.progress-icons {
    display: flex;
    position: absolute;
}

label.notes-desc {
    margin: 90px 0px 0px 130px;
    display: flex;
    position: absolute;
}

img.icons-edit {
    position: absolute;
    top: 10px;
    cursor: pointer;
}

img.icons-remove {
    position: absolute;
    bottom: 10px;
    cursor: pointer;
}

a.btn-content {
    float: var(--floatr);
    margin: 8px 0px 0px 20px;
    color: var(--secondary-color) !important;
    font-size: 12px;
    cursor: pointer;
}

    a.btn-content.save {
        font-weight: 500;
        background-color: #F2F4FC !important;
        min-width: 51px;
        min-height: 25px;
        text-align: center;
        line-height: 23px;
        border-radius: 4px;
        border: 1px solid var(--secondary-color);
    }

    a.btn-content.cancel {
        font-weight: 400;
        line-height: 25px;
    }

span.e-icons.e-check-tick {
    color: white;
}

h5.activity-right-title {
    font-size: 17px;
    font-weight: 700;
    font-family: 'InstrumentSans';
    margin-bottom: 16px;
}

label.completed-activities {
    font-size: 14px;
    font-weight: 400;
    margin-left: 0;
    color: #777;
}

.right-side-panel {
    padding: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 24px center;
    padding-right: 0;
}

button.btn-content {
    border-radius: 4px;
    border: 1px solid var(--secondary-color);
    background: #F2F4FC;
    display: flex;
    padding: 9px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

    button.btn-content:hover {
    }

.btn-right {
    float: var(--floatr);
    margin: 0px;
    padding: 0px;
}

.mt32 {
    margin-top: 32px;
}

.mt16 {
    margin-top: 16px;
}

span.suggetion-title {
    font-size: 17px;
    font-weight: 700;
    padding: 8px;
}

.today {
    color: #777;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    padding: 8px;
}

.activity-AI {
    display: inline-block;
    width: 100%;
    margin-top: 25px;
}

button.btn-content .e-icons {
    font-size: 10px;
    padding: 0px 3px;
}

a.btn-content.addrisk {
    margin: 24px 12px 0px 0px;
    cursor: pointer;
}

img.addicon-risk {
    margin-right: 4px;
}

.descriptionText textarea {
    height: 100% !important;
    margin: 0px !important;
    padding: 12px !important;
}

.auto-complete-activities-container {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 8px;
    margin-top: 16px;
}

.AI-activities-container {
    border-radius: 13px;
    border: 1px solid #EAEAEA;
    background: #FFF;
    box-shadow: 0px 2px 4px 0px rgba(26, 26, 26, 0.07);
    margin-top: 16px;
    padding: 12px;
    display: block;
    position: relative;
    min-height: 80px;
    overflow: hidden;
}

.AI-activities-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: inline-block;
    border-radius: 8px;
    border: 1px solid var(--secondary-color);
    text-align: center;
    line-height: 24px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
}

.AI-activities-desc {
    width: calc(100% - 36px);
    float: var(--floatr);
    display: table;
    height: auto;
    clear: right;
    color: #777;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    /* 19.6px */
    min-height: 54px;
}

.AI-activities-icon span {
    font-size: 14px !important;
    margin-top: 4px;
    display: block;
    color: var(--secondary-color);
}

span.reminder {
    font-weight: 700 !important;
}

button.btn-secondary.back {
    float: var(--floatl);
    border: 1px solid var(--secondary-color);
    background: #FFF;
    border-radius: 12px;
    min-width: 60px;
    min-height: 35px;
    text-align: center;
    font-family: InstrumentSans;
    box-shadow: none !important;
    color: var(--secondary-color);
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

.descriptionText:hover:active {
    border: 1px solid var(--secondary-color) !important;
}

span.e-outline.descriptionText.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group:hover {
    border: 1px solid var(--secondary-color) !important;
}

span.e-outline.descriptionText.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group:active {
    border: 1px solid #E7E7E7 !important;
}

.completed-activities-container {
    padding-top: 8px;
    display: inline-block;
    position: relative;
    width: 100% !important;
}

.completed-activities-descTextbox {
    padding: 12px;
    width: calc(100% - 28px);
    display: inline-block;
    float: var(--floatl);
    color: #777;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    border-radius: 12px;
    border: 1px solid #EAEAEA;
    background: #FFF;
    min-height: 64px;
}

.completed-activities-icon {
    width: 16px;
    display: inline-block;
    position: relative;
    padding-left: 0;
    min-height: 64px;
    float: var(--floatr);
    height: 100%;
    opacity: 1;
}

.updProgress .e-dlg-header-content {
    border-bottom: 1px solid #EAEAEA;
    margin: 0px;
    padding: 20px 24px 20px 26px;
    /* margin-bottom: 16px; */
}

.updProgress .e-dlg-content {
    padding: 16px 24px 32px 24px !important;
}

.left-side-panel {
    padding: 0;
    padding-right: 30px;
}

label.gridtitle {
    color: #777;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    font-family: 'InstrumentSans';
}

.sr-grid-title {
    padding: 0px 24px 0px 24px;
}

label.header {
    color: #1A1A1A;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 16px
}

label.main-header {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    padding-bottom: 20px;
}

.sr {
    padding: 0px !important;
    margin: 0px !important;
}

.card-container {
    border-radius: 4px;
    border: 1px solid #EAEAEA;
    background: #FFF;
    padding: 20px;
    margin-right: 0;
    min-height: 240px;
    width: 100%;
}

.activities-card {
    /* padding-top: 16px; */
}

.risks-part {
    margin-top: 40px;
}

label.manage {
    color: var(--secondary-color);
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-decoration-line: underline;
}

label.card-title {
    /* margin-left: 8px; */
    color: #1A1A1A;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}

.progresscard-container {
    border-radius: 4px;
    border: 1px solid #EAEAEA;
    background: #FFF;
    padding: 16px;
    margin-right: 16px;
    min-height: 80px;
    margin-bottom: 16px;
    width: 32%;
    min-width: 320px;
}

.progresscard-desc {
    color: #1A1A1A;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    display: block;
    width: calc(100% - 48px);
    float: var(--floatl);
}

.progresscard-status {
    border-radius: 4px;
    border: 1px solid #FBBA20;
    background: rgba(251, 186, 32, 0.10);
    display: block;
    text-align: center;
    width: 48px;
    height: 18px;
    float: var(--floatr);
    color: #000;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
}

.progresscard-progress {
    color: #777;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    display: block;
    float: var(--floatl);
}

.progresscard-duedate {
    color: #777;
    text-align: right;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

html.rtl .progresscard-duedate {
    text-align: left;
}

a.btn-secondary.save {
    width: auto;
    height: 33px !important;
    border-radius: 12px;
    color: #000 !important;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 33px;
    background: var(--main-color) !important;
    border: none !important;
    padding: 0 12px;
    box-shadow: none !important;
    display: block;
    float: var(--floatr);
}

button.btn-secondary.save {
    width: auto;
    height: 35px !important;
    border-radius: 12px;
    color: #000 !important;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    background: var(--main-color) !important;
    border: none !important;
    padding: 0 12px;
    box-shadow: none !important;
    float: right;
}

button.btn-secondary.reject-btn {
    width: auto;
    height: 33px !important;
    border-radius: 4px;
    color: #000 !important;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 80%;
    background: var(--main-color) !important;
    border: none !important;
    padding: 12px;
    box-shadow: none !important;
    margin-right: 16px;
}

.save-cancel-buttons {
    margin-right: 30px;
}

span.e-outline.completed-activities-descTextbox.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group.e-valid-input {
    border-radius: 4px;
    border: 1px solid var(--secondary-color) !important;
    background: #FFF;
    box-shadow: 0px 2px 4px 0px rgba(26, 26, 26, 0.07);
    width: calc(100% - 28px);
    color: #959595;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    padding: 0px;
}

span.e-outline.descriptionText.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group:hover {
    border-color: var(--main-color) !important;
    border: 1px solid #E7E7E7 !important;
}

/* Status-update View Design End*/


}

.grid-data {
    margin: 32px auto;
}

.chat-text-content {
    font-family: 'InstrumentSans';
    font-size: 14px;
    color: #777;
}

.chat-text-time {
    font-size: 12px;
    position: absolute;
    right: 25px;
    top: 30px;
}

    .chat-text-time b {
        font-weight: 700;
        color: #1A1A1A;
    }

.chat-text-inner .st-init-users {
    right: 11px;
    position: absolute;
    top: 6px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 12px;
    border-radius: 50%;
    background-size: cover;
    margin-right: 0px;
}

.chat-text-inner .from-user {
    right: 11px;
    position: absolute;
    top: 6px;
    width: 40px;
    height: 40px;
    background: #e8e8e8;
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 12px;
    border-radius: 50%;
}

.chat-container {
    min-height: 504px;
    display: block;
    overflow-y: auto;
}

.chats .row {
    height: 100%;
}

.bottom-abs {
    position: absolute;
    width: calc(100% - 120px);
    left: 40px;
    bottom: 0;
}

    .bottom-abs .e-outline {
        margin-bottom: 0;
        border: 0 !important;
    }

.chat-box-2 textarea {
    padding-top: 5px !important
}

.menu-items ul > li a span {
    font-size: 16px;
    font-weight: 400;
    color: #777;
}

i.sub-icon::before {
    content: '';
    background-image: url("/img/overview.svg?v=2");
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-top: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

a:hover i.sub-icon::before,
a.selected i.sub-icon::before {
    content: '';
    background-image: url("/img/overview-black.svg?v=1");
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-top: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

i.sub-icon {
    display: inline-block;
    width: 24px;
    height: 56px;
    float: var(--floatl);
    margin-right: 12px;
    padding-top: 6px;
}

.menu-items ul > li ul li span {
    float: var(--floatl);
    text-align: left;
    text-overflow: ellipsis;
    display: block;
    width: calc(100% - 36px);
    overflow: hidden;
}

html.rtl .menu-items ul > li ul li span {
    text-align: right;
}

.menu-items ul li ul li a {
    padding-left: 60px;
    padding-right: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
}
/*filter */
.e-chip-list.e-control.e-lib.filter-item span {
    color: var(--secondary-color);
    padding: 0px !important;
    font-size: 12px;
    line-height: 22px;
}
/*end*/
table.table.table-striped.table-bordered.table-normal {
    border: 1px solid #e3e3e3;
}


    table.table.table-striped.table-bordered.table-normal > thead {
        background: #FFF !important;
    }

.mx-width-600 {
    max-width: 697px;
    display: block;
    margin-left: 40px;
}

.mx-width-697 {
    max-width: 750px;
    display: block;
    margin: auto;
}

.mx-width-878 {
    max-width: 790px;
    display: block;
    margin-left: 40px;
}

.mx-width-580 {
    max-width: 580px;
    display: block;
    margin-left: 40px;
    margin-top: 25px;
}

span.btn-save-payment.add-srstage {
    float: var(--floatr);
}

.e-editable-value-container {
    padding: 4px !important;
}

.mx-width-624 {
    max-width: 680px;
    display: block;
    margin: auto;
}

.mx-width-900 {
    max-width: 900px;
    display: block;
    margin: 0 auto;
}

.mx-width-1000 {
    max-width: 1000px;
    display: block;
}

.mx-width-1200 {
    max-width: 1200px;
    display: block;
    margin: 0 auto;
}

.mx-width-700 {
    max-width: 700px;
    margin: 0 auto;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: #F6F6F6;
}

.e-toast-container.e-toast-top-right {
    right: 10px;
    top: 73px;
    z-index: 109105 !important;
}

.table-normal th {
    color: #575757;
    font-size: 10px;
    height: 30px;
    font-weight: 500;
    text-transform: uppercase;
    vertical-align: middle;
}

.table-normal td {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.table-normal thead tr {
    height: 30px !important;
}

.table-normal tr {
    height: 33px !important;
}

h6.activity-title {
    display: block;
    /* max-width: 700px;*/
    /* margin: 16px auto; */
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    margin: 20px auto;
    text-align: center;
}

.btn-img:first-child {
    margin-left: 0;
}

.btn-img {
    margin-left: 10px;
    cursor: pointer;
}

span.e-editable-value {
    border: none !important;
}

.e-gantt .e-gantt-chart .e-gantt-parent-taskbar-inner-div {
    border-radius: 12px;
    background: var(--notstartedColor);
    outline: none !important;
    height: 24px !important;
    margin-top: 0px !important;
}

.e-gantt .e-gantt-chart .e-gantt-parent-progressbar-inner-div {
    background-color: var(--secondary-color);
    border-radius: 12px;
    outline: none !important;
    border: none !important;
}

.e-gantt .e-gantt-chart .e-gantt-child-taskbar-inner-div {
    border-radius: 4px;
}

.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--third-color) !important;
    border-color: rgba(0,0,0,0) !important;
    color: #fff !important;
}

    .e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check:hover {
        background-color: var(--secondary-color) !important;
        border-color: rgba(0,0,0,0) !important;
        color: #FFF !important;
        !importan;
        !importa;
        !import;
        !impor;
        !impo;
        !imp;
        !im;
        !i;
        !;
    }

/* Project Details Component Start*/

.vendor-info-container {
    display: block;
    position: relative;
    border-radius: 4px;
    border: 1px solid #EAEAEA;
    background: #FFF;
    min-height: 143px !important;
    padding: 16px 0px 0px 16px;
}

.vendor-pm-info-top {
    border-radius: 4px 4px 0px 0px;
    background: #FFF;
}

.info-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
}

.info-title {
    color: #1B1B1B;
    /* H4 */
    font-family: InstrumentSans;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 23.8px */
}

.info-description {
    color: #777;
    /* Overline */
    font-family: InstrumentSans;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 14px */
    text-transform: uppercase;
}

.vendor-pm-info-container {
    display: block;
    position: relative;
    min-height: 143px !important;
    background: white;
    border: 1px solid #EAEAEA;
    padding: 16px 16px 14px 16px;
    border-radius: 4px;
}

.email-info {
    float: var(--floatr);
    padding: 4px 0px 4px 0px;
    /*    border-radius: 0px 0px 4px 4px;
    border-right: 1px solid #EAEAEA;
    border-bottom: 1px solid #EAEAEA;
    border-left: 1px solid #EAEAEA;*/
    background: #FFF;
}

span.email-txt {
    color: var(--secondary-color);
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 16.8px */
    text-decoration-line: underline;
    padding-left: 8px;
}

span.prj-name {
    /* H4 */
    /* 23.8px */
    min-width: 300px;
    display: block;
    text-align: left;
    font: normal normal 750 17px/17px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #242424;
    opacity: 1;
    /* float: var(--floatl); */
    padding: 0;
    margin: 0;
}

html.rtl span.prj-name {
    text-align: right;
}

span.prj-desc {
    /* 19.6px */
    min-height: 24px !important;
    min-width: 320px;
    display: block;
    text-align: left;
    font: normal normal normal 15px/23px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #888888;
    opacity: 1;
    margin-top: 4px;
    font-weight: 400;
}

html.rtl span.prj-desc {
    text-align: right;
}

.project-specific-top {
    background: #FFF;
    position: relative;
    padding: 20px 0px 0px 20px;
    height: 88px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 0;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    overflow: visible;
}

img.milestone-icon {
    width: 25px;
    height: 25px;
    margin-top: 15px;
    float: var(--floatl);
}

.project-name-title {
    float: var(--floatl);
    display: inline-block;
    position: relative;
    margin-left: 16px;
    max-width: calc(100% - 40px);
}

.payment-title {
    padding: 24px 0px 16px 0px;
    color: #1A1A1A;
    font-family: 'InstrumentSans';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
}

.main-selected-project-card {
    border-radius: 4px !important;
    background: linear-gradient(269deg, #A9B7E7 -22.25%, #4446B1 97.67%);
    display: block;
    padding: 16px 20px;
    min-height: 143px !important;
}

.selected-project-name h1 {
    color: #FFF;
    font-family: InstrumentSans;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 4px;
}

.selected-project-label {
    display: block;
    color: rgba(255, 255, 255, 0.70);
    font-family: InstrumentSans;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-transform: uppercase;
    padding-top: 4px;
}

.selected-project-pm {
    margin-top: 20px;
}

    .selected-project-pm h2 {
        color: #FFF;
        font-family: InstrumentSans;
        font-size: 17px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        margin-bottom: 4px;
    }

.selected-project-general-info {
    /*margin-top: 16px;
    margin-bottom: 16px;
    margin-left: 20px;*/
}

.selected-project-pm-label {
    color: rgba(255, 255, 255, 0.70);
    font-family: InstrumentSans;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-transform: uppercase;
    display: block;
}

.deliverable-container-top {
    border-radius: 4px 4px 0px 0px;
    border: 1px solid #EAEAEA;
    background: #FBFBFB;
    cursor: pointer;
    /*padding: 16px 16px 0px 16px;*/
}

.deliverable-container {
    padding: 24px 0px 0px 1px;
    min-width: 223px;
}

.deliverable-title {
    color: #777;
    /* H4 */
    font-family: InstrumentSans;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

.deliverable-description {
    color: #575757;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.deliverable-container-bottom {
    border-radius: 0px 0px 4px 4px;
    border-right: 1px solid #EAEAEA;
    border-bottom: 1px solid #EAEAEA;
    border-left: 1px solid #EAEAEA;
    background: #FFF;
    padding: 16px 16px 16px 16px;
    min-height: 100px !important;
}

.deliverable-date {
    padding: 12px 16px 12px 16px;
}

.date-txt {
    padding-left: 8px;
    color: #000;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.card.marginTop {
    margin-top: 20px;
}

/****Milestone Timeline****/

.bottom .milestone-element-line {
    width: 100%;
    height: 1px;
    display: block;
    background: #ebebeb;
    top: 44px;
    position: absolute;
}

.bottom.milestone-element-container {
    float: var(--floatl);
    position: relative;
    margin-top: 40px;
    height: 122px;
    width: auto;
    min-width: 151px;
    marker: none !important;
}

.bottom .milestone-element-status {
    position: absolute;
    left: calc(50% - 10px);
    top: 32px;
}

.milestone-stroke-line {
}

span.date-year {
    color: var(--secondary-color);
    text-align: center;
    font-family: 'InstrumentSans';
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.bottom .milestone-date-year {
    display: inline-block;
    position: absolute;
    text-align: center;
    width: 100%;
    top: 12px;
}

.milestone-date-year:before {
    /* display: inline-block; */
    /* position: absolute; */
    /* left: 50%; */
}

.bottom .milestone-stroke-line {
    position: absolute;
    left: 50%;
    width: 2px;
    background: #DFDFDF;
    height: 30px;
    top: 57px;
    bottom: auto;
}

span.date-year {
    color: var(--secondary-color);
    /* text-align: center; */
    font-family: 'InstrumentSans';
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: block;
    text-align: center;
}

li.timeline-list {
    marker: none !important;
}

.milestone-date-year::before {
    display: inline-block;
    position: absolute;
    content: attr();
}

.bottom .milestone-stroke-line::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #DFDFDF;
    position: absolute;
    bottom: -5px;
    left: -2px;
    border-radius: 50%;
    top: auto;
}

.milestone-element-container {
    float: var(--floatl);
    position: relative;
    margin-top: 0px;
    height: 120px;
    width: auto;
    min-width: 151px;
    marker: none !important;
}

.timeline-milestone-container {
    margin-top: 40px;
}

.milestone-date-year {
    display: inline-block;
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 2px;
}

.milestone-element-line {
    width: 100%;
    height: 1px;
    display: block;
    background: #ebebeb;
    bottom: 35px;
    position: absolute;
}

.milestone-element-status {
    position: absolute;
    left: calc(50% - 10px);
    bottom: 24px;
}

.milestone-stroke-line::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #DFDFDF;
    position: absolute;
    bottom: auto;
    top: -5px;
    left: -2px;
    border-radius: 50%;
}

.milestone-stroke-line {
    position: absolute;
    left: 50%;
    width: 2px;
    background: #DFDFDF;
    height: 30px;
    bottom: 48px;
}

.element-title {
    margin-top: 7px;
    font-size: 10px;
    position: absolute;
    top: -5px;
    bottom: auto;
    width: 200%;
    left: -40%;
}
/* Project Details Component End*/

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

/*Project Satge Details*/
label.lebel.draft-desc {
    display: block;
    margin-top: 16px;
    color: #777;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

span.simp-desc {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

span.tone-type {
    color: #777;
    font-family: InstrumentSans;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    margin-top: 20px;
    display: block;
    margin-bottom: 16px;
}

span.e-outline.h1full.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group.e-valid-input {
    min-height: 320px !important;
}

.h1full textarea {
    overflow: hidden;
    min-height: 300px !important;
}

.e-radio-wrapper.e-wrapper.radio-btn {
    padding-right: 8px;
}

.escalation {
    padding: 24px 4px;
}

span.e-outline.hfull.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group.e-valid-input {
    height: 491px !important;
}

.hfull textarea {
    height: 480px !important;
}

button.btn-secondary.cancel {
    /* float: var(--floatl); */
    border: 1px solid var(--secondary-color);
    background: #F2F4FC;
    border-radius: 12px;
    min-width: 52px;
    min-height: 33px;
    text-align: center;
    font-family: InstrumentSans;
    box-shadow: none !important;
    color: var(--secondary-color);
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    margin-right: 16px;
    min-width: 90px;
}

img.str-pr {
    margin-top: 4px;
}

/*.e-input-group.e-control-container.e-control-wrapper.e-outline.filter-sort.e-float-input::before {
    content: url("../wwwroot/Files/SharedImages/sort.svg");
    color: var(--secondary-color);
}*/

.e-search::before {
    content: '\e993';
    font-family: e-icons;
    color: var(--secondary-color);
    width: 14px;
    height: 14px;
}

span.initiative-number {
    background: #777;
    padding: 8px;
    border-radius: 50%;
    color: #FFF;
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 26px;
}

.col-lg-25 {
    flex: 0 0 auto;
    width: 19%;
}

.icon-title {
    display: flex;
}

.main-info-icon-str img {
    width: 36px;
    height: 36px;
}

.main-info-icon-str {
    margin: 7px 10px 0px 0px;
}

.main-info-description-str span {
    color: #747476;
    font-family: InstrumentSans;
    font-size: 14px;
    font-weight: 400;
    margin-top: 12px;
}

.main-info-description-str {
    min-height: 100px;
    margin-top: 8px;
}

/*end*/

/*Draft Email*/

.draft-email-footer {
    float: var(--floatr);
    margin-right: 4px;
}

.filter-row.wt .e-label-bottom {
    top: 0 !important;
}
/*End*/
/*Initiative overview*/
.initiative-strategy-container {
    border: 1px solid #ebebeb;
    box-shadow: 0px 2px 2px 0px rgba(26, 26, 26, 0.07);
    background: white;
    height: 483px;
    border-radius: 4px;
    padding: 16px 16px 8px 16px;
    margin-top: 0;
}

.projrct-milestone-container {
    border: 1px solid #ebebeb;
    box-shadow: 0px 2px 2px 0px rgba(26, 26, 26, 0.07);
    background: white;
    min-height: 200px;
    border-radius: 4px;
    padding: 16px 16px 16px 16px;
    margin-top: 20px;
}

.strategy-header img {
    width: 24px;
    height: 24px;
}

span.strategy-desc {
    display: block;
    color: #777;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-top: 8px;
    min-height: 60px;
}

span.strategy-header-icon {
    width: 24px !important;
    height: 24px !important;
}

.initiative-strategy-title {
    font-family: InstrumentSans;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    color: #1A1A1A;
    cursor: pointer;
}

.strategy-current-status-title img {
    float: var(--floatr);
    margin-top: 6px;
    cursor: pointer;
}

.strategy-current-status-title {
    display: block;
}

.strategy-middle-part {
    margin-top: 12px;
}

.strategy-current-status-title h4 {
    font-family: InstrumentSans;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: block;
    float: var(--floatl);
    width: 94%;
    float: var(--floatl);
}


.strategy-general-info {
    margin-right: 27px;
    /* display: inline-block; */
    border-radius: 30px;
    padding: 18px 28px;
    /* width: 85px; */
    height: 84px;
    text-align: center;
    float: var(--floatl);
    width: calc(100% - 225px);
}

.strategy-info {
    margin-top: 12px;
    display: inline-block;
    width: 309px;
}

.strategy-general-info.active-initiative {
    background: #F8FEEF;
}

.strategy-general-info.budget-percentage {
    background: #FBE4DD;
}

.strategy-general-info.overall-percentage {
    margin-right: 0px;
    background: #FBE4DD;
}

.strategy-general-info span {
    color: #1A1A1A;
    text-align: center;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.strategy-bottom-part {
    /* margin-top: 20px; */
    height: 215px;
    overflow-y: auto;
    overflow-x: hidden;
}


span.strategy-bottom-part {
    border-radius: 4px;
    float: var(--floatl);
    height: 24px;
    width: 36px;
    border: 1px solid #85DA75;
    background: rgba(133, 218, 117, 0.10);
    color: #1A1A1A;
    text-align: center;
    font-family: InstrumentSans;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    padding: 5px;
    line-height: 140%;
    margin-right: 8px;
    display: inline-block;
    overflow-y: hidden;
}

.initiative-strategy-project-details {
    margin-top: 18px
}

span.project-baseline-percentage {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    float: var(--floatl);
    line-height: 130%;
    display: inline-block;
    width: calc(100% - 55px);
}

.projrct-milestone-details {
    padding: 8px 0px 8px 0px;
}

span.projrct-milestone-Status {
    width: 42px;
    height: 24px;
    float: var(--floatr);
    border-radius: 4px;
    border: 1px solid #173966;
    background: rgba(23, 57, 102, 0.70);
    margin-right: 12px;
    color: #ede2e2;
    text-align: center;
    font-family: InstrumentSans;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.projrct-milestone-details img {
    width: 28px;
    height: 28px;
    border-radius: 28px;
    float: var(--floatr);
}

.projrct-milestone-title {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-right: 12px;
}

.milestone-container-title h4 {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}

span.projrct-milestone-Status.att-re {
    border-radius: 4px;
    border: 1px solid #FBBA20 !important;
    background: rgba(251, 186, 32, 0.10) !important;
    color: #1A1A1A !important;
}

.project-status-legend-container {
    border: 1px solid #ebebeb;
    /* box-shadow: 0px 2px 2px 0px rgba(26, 26, 26, 0.07); */
    background: white;
    min-height: 48px;
    border-radius: 4px;
    padding: 12px 16px 12px 12px;
    margin-top: 0;
    position: absolute;
    left: 0;
    width: calc(100% - 120px);
    bottom: 0;
    margin-left: 40px;
}

span.legend-container-title {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-right: 12px;
}

.status-legend {
    color: #1A1A1A;
    text-align: center;
    font-family: InstrumentSans;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    padding: 8px;
    margin-right: 12px;
}

.under-review-status {
    border-radius: 4px;
    border: 1px solid #888;
    background: rgba(136, 136, 136, 0.10);
}

.to-start-status {
    border-radius: 4px;
    border: 1px solid #173966;
    background: rgba(23, 57, 102, 0.10);
}

.on-track-status {
    border-radius: 4px;
    border: 1px solid #85DA75;
    background: rgba(133, 218, 117, 0.10);
}

.attention-required-status {
    border-radius: 4px;
    border: 1px solid #FBBA20;
    background: rgba(251, 186, 32, 0.10);
}

.delayed-status {
    border-radius: 4px;
    border: 1px solid var(--delayedColor);
    background: rgba(190, 77, 94, 0.10);
}

.atrisk-status {
    border-radius: 4px;
    border: 1px solid var(--atRiskColor);
    background: rgba(190, 77, 94, 0.10);
}

.complete-status {
    border-radius: 4px;
    border: 1px solid #173966;
    background: rgba(23, 57, 102, 0.70);
}

.tooltip-info img {
    margin-right: 10px;
}

/*End*/

.card-body.initiative-card-setting .main-info-title h3 {
    font-size: 16px;
    line-height: 40px;
}

.card-body.initiative-card-setting {
    min-height: 150px;
}

    .card-body.initiative-card-setting .main-info-title h3 {
        font-size: 16px;
        line-height: 40px;
    }

.card-body.initiative-card-setting {
    min-height: 150px;
}

.AI-activities-desc span {
    vertical-align: middle;
    display: table-cell;
}

.sectors-card-setting .main-info-icon {
    width: 40px;
    height: 40px;
    display: block;
    background: #777;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
}

    .sectors-card-setting .main-info-icon img {
        height: 30px;
        display: inline-block;
        text-align: center;
        margin-top: 5px;
    }

.sectors-card-setting .main-info-icon {
    width: 40px;
    height: 40px;
    display: block;
    background: #777;
    border-radius: 50%;
    text-align: center;
}

    .sectors-card-setting .main-info-icon img {
        height: 30px;
        display: inline-block;
        text-align: center;
        margin-top: 5px;
    }

.content {
    /*overflow-x: hidden;*/
}

/*Access roles*/
.role-item {
    padding: 10px 10px 10px 10px;
    cursor: pointer;
    color: #1A1A1A;
    font-family: InstrumentSans;
}

.card-body.Role-List {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px;
}

.role-item.selected a {
    text-align: left;
    /* font: normal normal 900 16px/43px InstrumentSans; */
    color: var(--secondary-color) !important;
    font-weight: 700;
    font-size: 16px;
}

html.rtl .role-item.selected a {
    text-align: right;
}

.role-item a {
    text-decoration: none;
    color: #888888;
    font-size: 16px;
    text-align: left;
    margin-left: 10px;
}

html.rtl .role-item a {
    text-align: right;
    margin-left: 0;
    margin-right: 10px;
}

.role-item:hover {
    background: #f2f4fc;
    /* padding: 0px; */
}

.parent-height-scroll-auto {
    height: 596px;
    overflow-x: hidden;
    overflow-y: auto;
}

.ess-view-btn {
    border: 1px solid #212529;
    padding: 1px;
    line-height: 39px;
    background: var(--secondary-color);
    color: #FFF !important;
    border-radius: 5px;
    text-align: center;
    width: 65%;
    height: 45px;
    margin: 15px 0px 0px 60px;
    /* color: wheat; */
}

.card-body.Role-List {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px;
}

.ess-view-btn a {
    color: #FFF !important;
}

h3.acsess-role-tilte {
    font-weight: 600;
}


/*end*/


.e-outline.filter-search.e-input-group.e-control-container.e-control-wrapper.e-float-input label.e-float-text.e-label-bottom {
    line-height: 46px !important;
}


.main-info-description-stage {
    min-height: 40px;
}

    .main-info-description-stage span {
        color: #747476;
        font-family: InstrumentSans;
        font-size: 14px;
        font-weight: 400;
        margin-top: 12px;
    }

/******* START - SECTOR OVERVIEW *******/

.sector-details-container {
    border-radius: 4px;
    /*background: #EAEAEA;*/
    padding: 4px;
}

.container-5 {
    /*background: rgba(0, 98, 195, 0.10);*/
}

.container-4 {
    /*background: rgba(255, 139, 195, 0.23);*/
}

.container-3 {
    /*background: rgba(69, 195, 188, 0.20);*/
}

.container-2 {
    /*background: rgba(0, 154, 70, 0.20);*/
}

.container-1 {
    /*background: rgba(242, 101, 36, 0.20);*/
}

.sector-container-title img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.sector-list-container {
    border-radius: 4px;
    background: #FFF;
    box-shadow: 0px 2px 2px 0px rgba(26, 26, 26, 0.10);
    padding: 12px 16px;
    margin-bottom: 8px;
}

.sector-container-title h4 {
    font-family: InstrumentSans;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: inline-block;
}

.sector-5:first-child {
    border-top: 4px solid #0062C3;
}

.sector-4:first-child {
    border-top: 4px solid #EF4065;
}

.sector-3:first-child {
    border-top: 4px solid #45C3BC;
}

.sector-2:first-child {
    border-top: 4px solid #009A46;
}

.sector-1:first-child {
    border-top: 4px solid #F26524;
}

.sector-upcoming-payment {
    color: #777;
    font-family: InstrumentSans;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: block;
}

.sector-total-payment-value {
    color: #111;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: block;
}

.sector-total-payment-title {
    color: #777;
    font-family: InstrumentSans;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: block;
}

.sector-list-container h4 {
    font-family: InstrumentSans;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: inline-block;
}

.ongoing-project-container {
    height: 420px;
    margin-top: 15px;
    overflow-y: auto;
}

.pipline-container {
    min-height: 196px;
    margin-top: 15px;
}

.kpis-container {
    min-height: 188px;
    padding: 12px 12px;
    margin-top: 15px;
}

span.view-all {
    color: var(--secondary-color);
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-decoration-line: underline;
    display: inline-block;
    float: var(--floatr);
    margin-top: 4px;
    cursor: pointer;
}

.sector-ongoing-project-container-content {
    margin-top: 4px;
}

.sector-pipline-project-container-content {
    margin-top: 4px;
}

.project-list-progress-container {
    border-radius: 4px;
    border: 1px solid #EAEAEA;
    background: #FFF;
    padding: 12px 12px;
    margin-bottom: 5px;
}

.sector-ongoing-project-container-title h4 {
    font-size: 15px !important;
}

.project-list-progress-title {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: block;
}

.project-list-progress-complated-per {
    color: #777;
    font-family: InstrumentSans;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    display: block;
}

.on-going-project-budget {
    /* width: 94px;*/
    width: 100px;
    float: var(--floatl);
}

.kpi-left-part {
    width: 58%;
    float: var(--floatl);
    min-height: 125px !important;
    border-radius: 4px 0px 0px 4px;
    border: 1px solid #EAEAEA;
    background: #FFF;
    padding: 16px 8px 16px 16px;
    overflow: hidden;
    color: #777;
    text-overflow: ellipsis;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.kpi-right-part {
    width: 38%;
    float: var(--floatl);
    min-height: 125px !important;
    border-radius: 0px 4px 4px 0px;
    border-top: 1px solid #EAEAEA;
    border-right: 1px solid #EAEAEA;
    border-bottom: 1px solid #EAEAEA;
    background: #FBFBFB;
    padding: 16px 12px 16px 18px;
    position: relative;
}

.kpi-left-part span {
    display: inline-block;
    margin-top: 30px;
}

.sector-kpis-project-container-content {
    height: auto;
}

span.current-kpis-value {
    color: #7CBAD5;
    text-align: center;
    font-family: InstrumentSans;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

.target-kpis {
    display: inline-block;
    position: absolute;
    bottom: 13px;
}

span.kpis-title {
    color: #777;
    font-family: InstrumentSans;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    display: block;
}

.current-kpis {
    display: inline-block;
    margin-right: 15px;
    position: absolute;
    top: 10px;
}

.pipline-budget {
    float: var(--floatl);
    margin-left: 26px;
    width: calc(100% - 144px);
}

.budget-container {
    min-height: 289px;
    margin-top: 15px;
}

.on-going-project-budget span {
    color: #777;
    text-align: center;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.pipline-budget span {
    color: #777;
    text-align: center;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-left: 42px;
}

.on-going-project-budget div {
    /*border-right: 1px solid #ededed;*/
}

.text_middle {
    margin: 0px 4px 67px 4px;
}

/******* END - SECTOR OVERVIEW *******/
/*Overview Page*/
.content.pr-60 {
    padding-right: 40px;
}

/*End - Overview Page*/
.report-year {
    height: 40px;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    background: #f3f3f3;
    line-height: 40px;
    border: 1px solid #e7e6e6;
    border-radius: 4px 4px 0 0;
}

.report-quarters > div {
    float: var(--floatl);
    width: 25%;
    height: 30px;
    background: #f3f3f3;
    line-height: 30px;
    border: 1px solid #e7e6e6;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    border-top: none;
    /* border-radius: 0 0 0px 4px; */
}

span.initiative-number {
    width: 40px;
    height: 40px;
    display: block;
    background: #777;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    color: #FFF;
    float: var(--floatl);
    margin-right: 5px;
}

.projects {
    position: relative;
    overflow: hidden;
}

.project-title {
    position: absolute;
    height: 30px;
    background: #3e3e3e;
    border-radius: 8px;
    text-align: left;
    line-height: 30px;
    color: #FFF !important;
    cursor: pointer;
    font-size: 13px;
    padding-left: 10px;
}

html.rtl .project-title {
    text-align: right;
    padding-right: 10px;
    padding-left: 0px;
}

.title-main {
    width: 100%;
    float: var(--floatl);
    margin-top: 10px;
    margin-bottom: 20px;
    font-weight: 600;
}

.initiative-title {
    display: block;
    width: 100%;
    border-bottom: 1px solid #b3b3b3;
    padding: 18px;
}

.report-quarters > div:first-child {
    border-radius: 0 0 0 4px;
}

.report-quarters > div:last-child {
    border-radius: 0 0px 4px 0px;
}

.project-main-info:hover {
    border-color: #8A1538;
}

.project-status-legend-container.full {
    width: 100%;
    margin-left: 0;
    bottom: 6px;
    padding-left: 22px;
    position: relative;
    margin-top: 12px;
}

.budget-nda-container {
    width: calc(50% - 10px);
    display: inline-block;
    float: var(--floatl);
    margin-right: 20px;
}

.budget-sector-container {
    width: calc(50% - 10px);
    display: inline-block;
}

.nda-chart-container {
    width: calc(50% - 10px);
    display: inline-block;
    float: var(--floatl);
    margin-right: 20px;
    height: 275px !important;
    background-color: white;
    padding: 16px
}

.sector-chart-container {
    width: calc(50% - 10px);
    display: inline-block;
    float: var(--floatl);
    height: 275px !important;
    background-color: white;
}

span.title-status-total {
    font-family: InstrumentSans;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-left: 0;
    margin-top: 8px;
    display: block;
    color: #000;
    border-right: 1px solid #e3e3e3;
    float: var(--floatl);
    padding-right: 10px;
}

span.title-status-ongoing {
    font-family: InstrumentSans;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-left: 16px;
    margin-top: 8px;
    display: block;
    float: var(--floatl);
    border-right: 1px solid #e3e3e3;
    padding-right: 10px;
    color: #85DA75;
}


span.title-status-planned {
    font-family: InstrumentSans;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-left: 16px;
    margin-top: 8px;
    display: block;
    float: var(--floatl);
    COLOR: #FBBA20;
}

.milstone-group-info {
    background: #FFF;
    margin-bottom: 12px;
}

    .milstone-group-info .milestone-status-info {
        padding: 15px;
    }

span.pages-title-main {
    /*padding: 0px 60px;*/
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
}

.initiatives-main-info-title h3 {
    color: #1A1A1A;
    font-family: InstrumentSans;
    font-size: 18px;
    font-weight: 700;
    margin-top: 12px;
}

.initiatives-main-info-title {
    height: 31px;
}
/*Structure Page*/

.w800 {
    width: calc(100% - 854px);
    float: var(--floatl);
    margin-right: 21px;
}

.col-lg-6.Left-content.w800 {
    float: var(--floatl);
    width: 633px !important;
}

.structure-left-part {
    float: var(--floatl);
    width: calc(100% - 420px);
    margin-right: 20px;
}

.structure-right-part {
    float: var(--floatl);
    width: 385px;
}

.card-body.structure-body {
    padding: 20px 20px 10px 20px;
}

.approval-struct-left {
    float: var(--floatl);
    width: 62px;
    margin-right: 20px;
}

.approval-struct-right {
    float: var(--floatl);
    width: calc(100% - 108px);
}

.level-list {
    margin-top: 67px;
}

span.add-level {
    float: var(--floatr);
    margin-top: 16px;
    cursor: pointer;
}

.card.main-overview-card.card-dep {
    height: auto;
}

span.dep-title {
    text-align: left;
    font: normal normal 800 16px/19px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #242424;
    opacity: 1;
}

html.rtl span.dep-title {
    text-align: right;
}
/*End*/
/*Payment Page*/
.col-lg-8.w1153 {
    width: 1153px;
}

.card-body.invoice-style {
    padding: 20px;
    padding-top: 0;
    overflow-y: auto;
    padding-bottom: 0;
    margin-bottom: 20px;
}

.invoice-members-container {
    display: block;
    /* margin-right: 40px; */
}

.form-group.main-uploader.invoice-uploader {
    margin-top: 20px !important;
    height: 70px !important;
    padding: 16px 0px;
    width: 100%;
}

    .form-group.main-uploader.invoice-uploader .main-drop-area-wrap invoice-drop-uploader img {
        width: 20px !important;
        height: 20px !important;
    }

.main-drop-area-wrap.invoice-drop-uploader img {
    width: 24px !important;
    height: 24px !important;
    margin: 0px !important;
    margin-right: 16px !important;
    text-align: center;
    float: none;
    display: inline-block;
}


.profile-img.p-approval-init {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0;
    background: #e8e8e8;
}

span.project-vendor-name {
    padding-left: 24px;
    color: #242424;
    font-weight: 600;
    line-height: 17px;
    display: flex;
    margin-top: -5px;
    font-size: 14px;
}

.text.incvoice-text {
    margin: 0px !important;
    display: inline-block;
    margin-top: 0px !important;
    float: none;
}

.small-text.incvoice-small-text {
    display: block;
    margin-top: 0px;
    margin-left: 59px;
}

.invoice-btns {
    float: var(--floatr);
    margin-top: 20px;
}

span.btn-save-payment {
    border-radius: 12px;
    background: var(--main-color);
    padding: 0px 12px;
    color: #000;
    text-align: center;
    font-family: 'InstrumentSans';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    margin-left: 12px;
    cursor: pointer;
    height: 35px;
    line-height: 35px;
}

span.cancel-payment-btn {
    border-radius: 4px;
    border: 1px solid var(--secondary-color);
    background: #F2F4FC;
    padding: 8px 12px;
    color: var(--secondary-color);
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 16.8px */
    cursor: pointer;
}

label.control-label.invoice-label {
    margin-bottom: 4px;
}

.payment-comment-container img {
    height: 33px;
    width: 35px;
    margin-right: 16px;
    float: var(--floatl);
}

.w508 {
    width: 508px;
    float: var(--floatl);
    margin-right: 21px;
}

.payment-comment-list-container {
    width: 436px;
    height: calc(100% - 70px);
    /* background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box; */
    /* border: 1px solid var(--unnamed-color-e7e7e7); */
    /* background: #FFFFFF 0% 0% no-repeat padding-box; */
    /* border: 1px solid #E7E7E7; */
    /* border-radius: 4px; */
    opacity: 1;
}

.comment-list-body {
    width: 100%;
    height: calc(100% - 70px);
    margin-bottom: 40px;
    overflow-x: hidden;
    overflow-y: auto;
}

.payment-comment-init {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0;
    background: var(--secondary-color);
    margin-right: 5px;
    margin-top: 14px;
}

    .payment-comment-init h4 {
        text-align: center;
        line-height: 28px;
        font-size: 13px;
        font-weight: 600;
        color: var(--secondary-color);
    }

.bottom-abs.payment-comment {
    width: calc(100% - 40px);
    bottom: 20px;
    left: 20px;
}

.message-contet {
    margin-top: 3px;
}

.comment-footer {
    /* border-top: 1px solid #E7E7E7; */
    /* padding: 10px; */
    /* background: #FFF; */
    /* height: 70px; */
    /* width: 100%; */
    /* display: block; */
}

.payment-comment-init.top-init {
    /* float: var(--floatl); */
    margin-left: 12px;
}

.payment-comment-container {
    display: block;
    /* margin-top: 20px; */
}

.payment-comment-init.top-init {
    float: var(--floatl);
    margin-left: 0;
    margin-right: 8px;
    margin-top: 5px;
    display: block;
    width: 28px;
    margin-bottom: 0;
    background: #e8e8e8;
    height: 28px;
    line-height: 28px;
}

.payment-comment-container {
}

.payment-comment {
    float: var(--floatl);
    width: calc(100% - 36px);
    display: block;
    margin-bottom: 8px;
    height: auto;
    position: relative;
    min-height: 40px;
    background: #EFEFEF;
    border-radius: 12px;
    padding: 10px;
}

span.comment-user {
    display: block;
    text-align: left;
    font-size: 12px;
    /*letter-spacing: 0px;*/
    color: #1B1B1B;
    opacity: 1;
    font-family: 'InstrumentSans';
}

html.rtl span.comment-user {
    text-align: right;
    line-height: 38px;
}

span.comment-txt {
    text-align: left;
    font: normal normal normal 14px/19px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #707070;
    opacity: 1;
}

html.rtl span.comment-txt {
    text-align: right;
}


.payment-comment-list-container {
    width: 100%;
    height: calc(100% - 70px);
}

.payment-comment-container span {
    width: calc(100% - 51px);
}

.w1118 {
    width: 1118px;
}

.w557 {
    width: calc(100% - 529px);
    float: var(--floatl);
}


span.e-outline.commentText.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group textarea {
    height: 112px !important;
}

span.e-outline.commentText.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group {
    background: #FFF;
    height: 125px;
}



span.btn-save-payment.add-invoice {
    float: var(--floatr);
    margin-top: 15px;
}

.profile-img.p-approval-init h4 {
    text-align: center;
    line-height: 38px;
    font-size: 12px;
    font-weight: 600;
    color: #FFF;
}

span.p-approval-status {
    display: block;
    color: var(--woodsmoke-500, #6D6D6D);
    font-family: 'InstrumentSans';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 16.8px */
    margin-bottom: 2px;
}

span.p-approval-user {
    display: block;
    overflow: hidden;
    color: var(--woodsmoke-950, #1A1A1A);
    text-overflow: ellipsis;
    font-family: 'InstrumentSans';
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%; /* 19.6px */
    margin-bottom: 1px;
}

span.p-approval-role {
    display: block;
    color: var(--woodsmoke-500, #6D6D6D);
    font-family: 'InstrumentSans';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 16.8px */
    margin-bottom: 4px;
}

.main-approval-left-part {
    float: var(--floatl);
}



.main-approval-right-part {
    float: var(--floatl);
    margin-right: 12px;
}

.main-approval-container {
    float: var(--floatl);
    /*    margin-right: 68px;*/
    position: relative;
    width: 190px;
    position: relative;
    display: block;
    height: 90px;
}

    .main-approval-container:last-child::after {
        display: none !important;
    }

span.p-approval-date {
    color: var(--woodsmoke-500, #6D6D6D);
    font-family: 'InstrumentSans';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 0; /* 16.8px */
    display: block;
    line-height: 50px;
}

.profile-img.p-approval-init img {
    position: absolute;
    top: 36px;
    left: 45%;
    width: 16px;
}
/*End*/

.ps-st-left {
    width: 30px;
    float: var(--floatl);
    margin-right: 21px;
}

.ps-st-right {
    float: var(--floatl);
    width: calc(100% - 30px);
}

    .ps-st-right .st-init-users {
        float: var(--floatr);
        margin-right: 0;
        margin-left: 5px;
        cursor: pointer;
    }
/*tabs */
.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text {
    color: #141414 !important;
    text-transform: capitalize;
    opacity: 1;
    font-weight: 600 !important;
}

.project-stage-tabs .e-control.e-toolbar.e-lib.e-tab-header.e-keyboard {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
    border-left: 0;
    border-right: 0;
    width: calc(100% - 2px) !important;
    border-bottom: 0;
}
/**/

/*Project Stage Details*/
.card.main-overview-card {
    height: 258px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: none;
    opacity: 1;
}

span.st-title {
    text-align: left;
    font: normal normal 700 17px/17px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #454545;
    opacity: 1;
    display: block;
    margin-top: 20px;
    height: 24px;
    font-weight: 750;
    margin-bottom: 10px;
    line-height: 24px;
}

html.rtl span.st-title {
    text-align: right;
}

span.st-name {
    text-align: left;
    font: normal normal normal 14px/30px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #888888;
    text-transform: capitalize;
    opacity: 1;
    display: block;
    line-height: 30px;
}

html.rtl span.st-name {
    text-align: right;
}

.card-border-left {
    content: "";
    position: absolute;
    top: 22px;
    left: 0px;
    width: 3px;
    height: 35px;
    background: var(--main-color);
    display: none;
}

.project-stakeholder-right-part {
    float: var(--floatl);
    margin-right: 6px;
}


.project-stakeholder-left-part {
    float: var(--floatl);
    margin-right: 13px;
}

span.stakeholder-name {
    display: block;
    color: #1A1A1A;
    font-family: 'InstrumentSans';
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    line-height: 140%;
    margin-bottom: 2px;
    width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*letter-spacing: 0.24px;*/
}

span.stakeholder-role {
    display: block;
    color: var(--woodsmoke-500, #6D6D6D);
    font-family: 'InstrumentSans';
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    margin-bottom: 2px;
    width: 82px;
    /*letter-spacing: 0.19px;*/
}

.project-stakeholder-right-part .profile-img.p-approval-init {
    width: 37px !important;
    height: 37px !important;
}

    .project-stakeholder-right-part .profile-img.p-approval-init h4 {
        font-size: 12px;
        line-height: 27px;
    }

span.budget-total {
    font: normal normal normal 14px/17px InstrumentSans;
    color: #888888;
}

span.btn-save-payment.show-srstage {
    float: var(--floatr);
    border: 1px solid var(--secondary-color);
    background: #F2F4FC;
    border-radius: 4px;
    min-width: 52px;
    min-height: 33px;
    text-align: center;
    box-shadow: none !important;
    color: var(--secondary-color);
}

.draft-btn {
    float: var(--floatr);
    margin-right: 2px;
}
/*end*/
.project-strucutre-group h5 {
    color: #000;
    margin-bottom: 0;
    font-size: 18px;
    margin-top: 0;
    font-weight: 700;
    font-family: 'InstrumentSans';
}

.other.st-init-users {
    background: #0000001A;
}

    .other.st-init-users h2 {
        color: #8F8F8F;
    }

.card.card-border.myprofile {
    margin-top: 50px !important;
}

.approval-element-bottom-left {
    float: var(--floatl);
    width: 198px;
    border-right: 2px solid #E7E7E7;
    margin-right: 18px;
    margin-left: 0;
}

span.last-app-submit {
    /* width: 154px; */
    /* height: 21px; */
    text-align: left;
    font: normal normal normal 14px/30px InstrumentSans;
    /*letter-spacing: 0px;*/
    color: #888888;
    opacity: 1;
    /* display: block; */
}

html.rtl span.last-app-submit {
    text-align: right;
}

.filter-enabled {
    height: 88px;
}

.notifications > .nav-link:active .dropdown-menu.notifications,
.notifications > .nav-link:focus .dropdown-menu.notifications {
    display: block;
}

.userprofile > .nav-link:active .dropdown-menu,
.userprofile > .nav-link:focus .dropdown-menu {
    display: block !important;
}

.toggle-card .form-group {
    cursor: pointer;
}

div#circle {
    background: #DB3E6D;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    color: WHITE;
    position: absolute;
    top: 24px;
    margin-left: 11px;
}

span.noti-count {
    font-size: 0;
    position: absolute;
    /* top: 0px; */
    margin: -2px 0px 0px 5px;
    font-weight: 600;
}

img.noti-green {
    position: absolute;
    width: 15px;
    height: 15px;
    left: 49px;
    margin-top: 3px;
}



.approval-data {
    position: absolute;
    right: 0;
    top: 30px;
    width: auto;
    /* max-width: 50%; */
    z-index: 8;
}


    .approval-data .card, .approval-data .card-body {
        padding: 0;
    }

    .approval-data .main-approval-container {
        float: var(--floatl);
    }

    .approval-data .top-part-invoice-container {
        float: var(--floatr);
    }

span.st-code {
    display: block;
    color: #676565;
    font-weight: 500;
    line-height: 23px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*letter-spacing: 0.24px;*/
}

span.st-sub-title {
    display: block;
    color: #888;
    font-weight: normal;
    font-size: 10px;
    cursor: pointer;
    float: none;
    line-height: 0px;
}


.strcuture-element span {
    line-height: 17px;
}


.milestone-date-year span {
    float: none;
}

.stk-init.approval.full {
    position: absolute;
}

.approval.full .st-init-users {
    width: 37px;
    height: 37px;
}


.card.main-overview-card.invoice .structure-title .st-title {
    height: 30px;
}

.invoice-row {
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.card.main-tab-card {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #E7E7E7;
    opacity: 1;
    margin-top: 25px;
}

img.add-payment-icon {
    width: 40px;
    height: 15px;
    text-align: center;
    cursor: pointer;
    margin-left: 12px;
}


.deliverables-titles, .deliverables-description, .deliverables-dates {
    width: calc(100% + 40px);
    margin-left: -20px;
}

    .deliverables-titles h5 {
        line-height: 44px;
        text-align: left;
        color: #888888;
        font-size: 14px;
        font-weight: 600;
        padding-left: 20px;
    }

html.rtl .deliverables-titles h5 {
    text-align: right;
    padding-right: 20px;
    padding-left: 0;
}

.deliverables-titles {
    background: #F6F6F6;
    height: 44px;
}

.deliverables-description span, .deliverables-dates span {
    color: #888888;
    text-align: left;
    font-size: 14px;
    display: block;
    width: 100%;
    margin-top: 8px;
    padding-left: 20px;
}

html.rtl .deliverables-description span, html.rtl .deliverables-dates span {
    text-align: right;
    padding-right: 20px;
    padding-left: 0;
}

.deliverables-Approvals .approval-element-bottom-right {
    width: 100%;
    margin-left: 0;
    margin-top: 12px;
}

.e-input-group, .e-input-group.drop-tree, .e-numeric {
    height: 40px;
}



.e-multi-line-input {
    height: auto;
}

.e-popup.combo-input {
    overflow: hidden !important;
    margin-bottom: 10px;
}

div#paymentGrid .e-input-group.e-control-container.e-disabled,
.main-table-style,
.main-table-style > input.e-control.e-input {
    height: 30px;
    min-height: 30px;
}

.e-popup-open {
    height: auto !important;
    min-height: auto !important;
}

.dropdown-toggle::after {
    display: inline-block;
    vertical-align: -0.3em;
    content: "";
    background: url('/img/notificationarrow.svg');
    background-position: center;
    background-size: cover;
    width: 16px;
    height: 16px;
    border: none;
    margin-left: 8px;
}

.top-header .notifications .nav-link {
    padding: 0;
}

.userprofile span {
    font-size: 12px;
}

.form-elements {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

.e-filter.has-filter .e-btn-icon.la-filter:after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    background: var(--main-color);
    border-radius: 5px;
    left: 13px;
    top: -4px;
}

/*controls style*/
.e-checkbox-wrapper.e-wrapper.normal-input.check-sty {
    border: none !important;
    background: none;
    box-shadow: none;
    margin-left: 48px;
    margin-top: 14px;
}

    .e-checkbox-wrapper.e-wrapper.normal-input.check-sty input {
        /* margin-top: 90px !important; */
        /* display: block; */
        /* margin-left: 65px !important; */
    }

label.lebel.check-box-l {
    margin-left: 58px;
    display: block;
}

/*End*/

span.e-input-group-icon.las.la-search::before {
    color: var(--secondary-color);
    rotate: 270deg;
}

.filter-sort {
    margin-right: 0;
}

.row.group-row {
    margin-bottom: 20px;
}

.user-tooltip.e-tooltip-wrap.e-popup {
    background-color: transparent;
    border: none;
    color: #000;
    opacity: 1;
}

.user-tooltip.e-tooltip-wrap .e-tip-content {
    color: #000;
}

.User-Profile-Tooltip a {
    font-size: 10px;
}

.User-Profile-Tooltip h4 {
    font-size: 13px;
}

.User-Profile-Tooltip .card-header {
    height: 29px;
    border-left: 2px solid var(--primary-color);
}

.User-Profile-Tooltip {
    background: #FFF;
}

td.table-title {
    font-weight: 500;
    text-align: left;
    height: 30px;
    border-top: 1px solid #e3e3e3;
}

html.rtl td.table-title {
    text-align: right;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text {
    text-transform: capitalize;
    font-size: 14px;
    font-family: 'InstrumentSans';
    font-weight: 400;
    /*letter-spacing: normal;*/
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
    background: transparent;
}

    .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text, .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
        color: #242424;
    }

.form-elements h5 {
    margin-bottom: 0;
    display: inline-block;
    /* border-bottom: 2px solid var(--primary-color); */
    padding-bottom: 2px;
    font-weight: 700;
}

.e-chip.e-active::before {
    display: none !important;
}

.User-Profile-Tooltip ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

    .User-Profile-Tooltip ul li {
        line-height: 21px;
        font: normal normal normal 14px/17px InstrumentSans;
        color: #888888 !important;
        margin-bottom: 3px;
    }

        .User-Profile-Tooltip ul li i {
            color: var(--primary-color);
            font-size: 18px;
            margin-right: 10px;
        }

ul {
}

.User-Profile-Tooltip ul li:first-child {
    font-weight: bold;
    /*letter-spacing: 0.49px;*/
}

.menu-items ul li ul li a.selected {
    background: var(--main-color);
}

.toolbar-container.wi.with-breadcrumbs {
    display: flex;
    clear: both;
    margin-bottom: 12px;
    margin-top: 12px;
    width: 100%;
    height: 48px;
}

    .toolbar-container.wi.with-breadcrumbs .toolbar {
        display: block;
        float: var(--floatr);
        width: auto;
    }

.page-breadcrumb.with-toolbar {
    margin: 0;
    float: var(--floatl);
    height: 48px;
    line-height: 48px;
}

button.toolbar-button.toolbar-edit-btn {
    min-width: 80px;
    height: 32px;
    border-radius: 11px;
    font-size: 12px;
    border-color: var(--secondary-color);
    margin-top: 8px;
    background: #F0F0FC;
    color: var(--secondary-color);
    padding: 0 10px;
    width: auto;
}

Button.toolbar-button.toolbar-cancel-btn {
    min-width: 80px;
    height: 32px;
    border-radius: 11px;
    font-size: 12px;
    background: #F0F0FC;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    margin-top: 8px;
    width: auto;
    padding: 0 10px;
}

button.toolbar-button.toolbar-save-btn {
    min-width: 80px;
    height: 32px;
    border-radius: 11px;
    font-size: 12px;
    border-color: var(--primary-color);
    margin-top: 8px;
    background-color: var(--primary-color);
    color: #000 !important;
    padding: 0 10px;
}

button.toolbar-button.toolbar-cancel-btn span {
    color: var(--secondary-color);
}

.invoice-style .e-input-group,
.invoice-style .e-input-group.drop-tree,
.invoice-style .e-numeric {
    height: 38px !important;
    padding: 0px 8px;
}

    .invoice-style .e-input-group input,
    .invoice-style .e-input-group.drop-tree input,
    .invoice-style .e-numeric input {
        min-height: 37px !important;
        height: 36px !important;
    }

.invoice-style a.send-chat-btn {
    position: absolute;
    bottom: 18px;
    right: 13px;
    width: 20px;
    height: 20px;
    text-align: center;
}

.invoice-style .e-multi-line-input {
    height: auto !important;
}

.field-view-mode {
    display: inline-block;
    float: var(--floatl);
}

.invoice-style .field-view-mode .text {
    padding-left: 0;
    color: #242424;
    font-weight: 600;
    line-height: 17px;
    display: flex;
    margin-top: -5px;
}

.top-part-invoice-container {
    display: block;
    margin: 0 auto;
    z-index: 2;
    position: relative;
}

.payment-comment-init.top-init .st-init-users {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-color);
    background-size: cover;
}

.comment-data {
    width: 100%;
    /*letter-spacing: var(--unnamed-character-spacing-0);*/
    text-align: left;
    /*letter-spacing: 0px;*/
    color: #707070;
    opacity: 1;
    font-size: 12px;
    line-height: 19px;
    margin-top: 8px;
    display: block;
}

html.rtl .comment-data {
    text-align: right;
}

.payment-comment-container {
    padding: 0 20px;
}

.comment-list-body .col-lg-12:nth-child(even) .payment-comment-container {
    background-color: transparent;
}



.card-body.invoice-style.np {
    padding: 0px;
    height: 100% !important;
}

.np .structure-title {
    padding-left: 20px;
}

span.p-approval-date img {
    margin-top: -4px;
    margin-left: -3px;
}

.light-table-sa .e-grid .e-gridheader table th[rowspan],
.light-table-sa .e-grid.e-device .e-gridheader table th[rowspan] {
    padding-bottom: 7px;
}

.light-table-sa .e-grid .e-altrow {
    background-color: #fafafa;
}

label.control-label.invoice-label img {
    width: 20px;
}

.prj-name .structure-tags {
    width: auto;
    float: none;
    margin-top: 1px;
    margin-bottom: 0;
    display: inline-block;
    margin-left: 10px;
    padding-top: 4px;
    overflow: visible;
    height: 18px;
}

    .prj-name .structure-tags span {
        margin-top: 0;
        height: 18px;
        line-height: 18px;
        margin-top: 0;
    }

.main-approval-right-part h4 {
    height: 30px;
    line-height: 30px !important;
    color: var(--secondary-color) !important;
}

.file-uploaded-container.sector.paymant-file-list {
    margin-bottom: 11px;
}

label.lebel.payment-files {
    color: #949595;
    font-family: InstrumentSans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    display: block;
    margin-top: 20px !important;
}

.main-drop-area-wrap.invoice-drop-uploader {
    margin: 0 auto;
    display: block;
    width: 351px;
}

.e-popup.e-popup-open.e-datepicker {
    background: #FFF;
}

span.deliverable-desc {
    cursor: pointer;
}

span.normal-input.e-input-group.e-control-container.e-control-wrapper.e-disabled.e-valid-input input {
    color: #1A1A1A !important;
}

.card.main-card {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: none;
    opacity: 1;
}

ol.activities-card {
    list-style: disc;
    padding-left: 15px;
}

.card-container-thread {
    overflow: hidden;
    overflow-y: auto;
}

.mt0 label.control-label {
    margin-top: 0 !important;
}

.sub-icon1 {
    display: inline-block;
    width: 24px;
    float: var(--floatl);
    margin-right: 12px;
    padding-top: 6px;
    margin-top: 12px;
    font-size: 23px;
    color: #7f7f7f;
}

.e-colorpicker-container.e-hide-opacity.normal-input-color {
    margin-left: 0;
}

.row.toggle-card .e-outline.budget-code.e-input-group.e-control-container.e-control-wrapper.e-float-input {
    height: 38px !important;
}

span.e-ddt.e-lib.e-show-dd-icon.e-input-group.e-control-container.e-control-wrapper.e-outline.drop-tree.e-keyboard {
    border: 1px solid #949595 !important;
    border-radius: 4px !important;
    padding: 5px 0px !important;
    box-shadow: 0px 2px 4px 0px rgba(26, 26, 26, 0.05);
    margin-top: 4px;
    border: 1px solid #E7E7E7 !important;
    border-radius: 12px !important;
    padding: 8px 12px;
    box-shadow: 0px 2px 4px 0px rgba(26, 26, 26, 0.05);
    margin-top: 4px;
}

button.e-css.e-btn.e-upload-browse-btn {
    display: none;
}

li.e-upload-file-list {
    margin-top: 0;
    border: 1px solid #e3e3e3;
}

ul.e-upload-files {
    border: none !important;
}

li.e-upload-file-list span.e-icons.e-file-delete-btn {
    display: none !important;
}


li.main-menu a.selected.main-level {
    background: var(--main-color);
}

span.e-file-drop {
    display: none;
}

.card.main-card.npt .card-body {
    padding-top: 0px;
}

.fullheight-uploader {
    height: auto;
    display: block;
}

    .fullheight-uploader .main-drop-area-wrap img {
        width: 100% !important;
        display: block;
        margin: 0 auto;
        margin-bottom: 5px
    }

    .fullheight-uploader span.upload-text,
    .fullheight-uploader span.upload-small-text {
        width: 100%;
        display: block;
        text-align: center;
        padding: 0px;
        margin: 0px;
    }

.e-footer-content {
    padding: 8px 20px !important;
}

.DP {
    display: block;
}

.multiselect-parent {
    width: 100%;
    display: block;
}

    .multiselect-parent .e-multiselect {
        height: 180px;
        max-width: auto !important;
        display: block;
        min-width: 100%;
    }

        .multiselect-parent .e-multiselect .e-multi-select-wrapper {
            height: 100%;
            min-height: 100%;
            display: block;
        }

        .multiselect-parent .e-multiselect .e-delim-hide {
            display: block !important;
        }

        .multiselect-parent .e-multiselect .e-delim-values {
            display: none !important;
        }

.role-item.add-new {
    position: absolute;
    bottom: 0px;
    background: white;
    border-top: 1px solid #e3e3e3;
    width: 100%;
    padding-top: 12px;
    font-weight: 700;
    border-radius: 0px 0px 22px 22px;
}

    .role-item.add-new a {
        font-weight: 700;
        font-size: 13px;
        /*letter-spacing: 0.95px;*/
    }

.fullheight-uploader .text,
.fullheight-uploader .small-text {
    display: block;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 12px;
}



.fullheight-uploader .main-drop-area-wrap {
    width: 100%;
}

.fullheight-uploader .text,
.fullheight-uploader .small-text {
    display: block;
    width: calc(100% - 32px) !important;
    margin-top: 0px;
    margin-bottom: 12px;
}



.fullheight-uploader .main-drop-area-wrap {
    width: 100%;
}

.card-wizard-new .main-card {
    margin-bottom: 0px;
}

.full-height-toolbar-filter.card-wizard-new .wizard-body {
    background: transparent;
    border: none;
}

.card-wizard-new .back-btn {
    left: 0px !important;
}


.card.upload-wizard .card {
    margin-bottom: 0px
}

span.comment-time {
    font-size: 10px;
}

span.comment-delete {
    position: absolute;
    top: 6px;
    right: 9px;
    width: auto;
    color: red;
    cursor: pointer;
    display: none;
}

.payment-comment-container.mine:hover span.comment-delete {
    display: block;
}

.payment-comment-container.mine.deleted:hover span.comment-delete {
    display: none;
}

.payment-comment-container.deleted span.comment-txt-comment {
    font-style: italic;
    color: #c3c3c3
}


label.payment-icon {
    /* float: var(--floatr); */
    margin-left: 10px;
    font-size: 15px;
    /* line-height: 33px; */
    cursor: pointer;
    color: var(--secondary-color);
}

label.payment-icon-full {
    font-size: 15px;
    /* line-height: 33px; */
    cursor: pointer;
    color: var(--secondary-color);
}

.e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
    background: var(--completedColor);
    border-radius: 0px !important;
}

.e-gantt-child-taskbar-inner-div.e-gantt-child-taskbar {
    background: #888888;
    outline: 1px solid #353535
}

.e-gantt .e-gantt-chart .e-gantt-child-taskbar-inner-div {
    background: var(--notstartedColor);
    outline: none !important;
    height: 24px !important;
    margin-top: 0px !important;
    border-radius: 12px !important;
}

.e-gantt .e-gantt-chart .e-gantt-milestone {
    background-color: var(--secondary-color);
    border-color: #353535;
}

.tree-ms span.e-overflow.e-show-text {
    padding: 0px !important;
    line-height: 27px;
}

.tree-ms .e-outline.e-input-group .e-clear-icon, .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    padding: 7px 10px;
    position: absolute;
    border: 2px;
    top: 7px;
}

.tree-ms
.e-ddt.e-lib.e-show-dd-icon.e-input-group.e-control-container.e-control-wrapper.e-outline.drop-tree {
    padding: 6px !important;
    border: 1px solid #949595 !important;
    border: 1px solid #E7E7E7 !important;
    border-radius: 12px !important;
}

.tree-ms
span.e-input-group-icon.e-ddt-icon.e-icons {
    margin: 0 !important;
    padding: 7px 10px !important;
    position: absolute !important;
    bottom: 2px !important;
    right: 0 !important;
}

.invoice-style .tree-ms .e-input-group input,
.invoice-style .tree-ms .e-input-group.drop-tree input,
.invoice-style .tree-ms .e-numeric input,
.tree-ms .e-input {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding-left: 0 !important;
}

.tree-ms .e-outline.e-input-group.e-icon-anim span.e-input-group-icon.e-ddt-icon.e-icons {
    padding-top: 2px !important
}

.tree-ms .e-outline.e-input-group.e-icon-anim .e-clear-icon, .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    padding-top: 0px !important
}

label.gantt-edit-text {
    font-size: 17px;
    text-align: center;
    cursor: pointer;
    padding-right: 7px;
}

.approval-template-body .col {
    min-width: 25%;
    max-width: 25%;
    margin-top: 20px;
}

.tree-ms span.e-ddt.e-lib.e-show-dd-icon.e-input-group.e-control-container.e-control-wrapper.e-outline.drop-tree.e-keyboard {
    padding: 6px !important;
}

.chat-text-inner {
    padding-top: 0;
}

.chat-text-content .st-init-users {
    position: absolute;
    background-size: cover;
}

.card-body.invoice-style.dialog-card {
    padding: 20px 0px;
    overflow-x: hidden;
}

.dialog-header
.e-dlg-header, .dialog-header .e-dlg-header * {
    color: #000 !important;
    /* H4 */
    font-family: InstrumentSans;
    font-size: 17px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 140%; /* 23.8px */
    margin: 0 !important;
    line-height: 24px !important;
}

.dialog-header
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    height: 24px;
    width: 24px;
    padding: 6px 6px 4px;
}

.dialog-header
.e-dlg-header {
    color: #000;
    /* H4 */
    font-family: InstrumentSans;
    font-size: 17px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 24px; /* 23.8px */
}

.offline-check.mtc10 {
    margin-top: 33px;
}

button.e-control.e-btn.e-lib.e-flat.btn-primary2.confirmation-dialog.dialog-header {
    padding: 0 12px;
    line-height: 33px;
}

button.toolbar-button.toolbar-edit-btn.circle-edit {
    height: 32px !important;
    width: 32px !important;
    border-radius: 50%;
    border: none;
    min-width: 32px;
}

.other-approvers {
    display: none;
    position: absolute;
    top: 60px;
    background: white;
    border: 1px solid #e3e3e3;
    padding: 14px;
    left: -14px;
    z-index: 999;
    border-radius: 12px;
}

.main-approval-container:hover .other-approvers {
    display: block;
}

.multi-approvers::before {
    position: absolute;
    top: -5px;
    width: 21px;
    height: 21px;
    background-image: url(/img/arrowdown.svg);
    display: block;
    content: '';
    right: 10%;
}

.other-approvers .main-approval-container {
    min-height: 76px;
}

    .other-approvers .main-approval-container .approve-btns {
        top: auto;
        bottom: 0;
    }

.multi-approvers {
    cursor: pointer;
}

.card-body.main-approval {
    overflow-x: clip;
    margin-right: 20px;
    position: relative;
}

div#parent-approval-data .left-arrow,
div#parent-approval-data .right-arrow {
    display: none;
}

div#parent-approval-data.hasScroll .right-arrow {
    display: block;
}


div#parent-approval-data .right-arrow::after {
    content: '';
    width: 20px;
    height: 19px;
    position: absolute;
    background-image: url('/img/right-arrow.svg');
    display: block;
    right: 8px;
    top: 17px;
    background-size: contain;
    cursor: pointer;
}

.ps-st-right .e-control.e-tooltip.e-lib {
    float: var(--floatr);
    margin-right: 0;
    margin-left: 5px;
    cursor: pointer;
}

.e-toolbar-item.e-template.e-ileft.e-active > div.e-tab-wrap {
    background: transparent !important;
}

.e-orgchart-template-div-style:hover {
    transform: scale(1.08);
}

.card.card-border.card-project.projectName {
}

    .card.card-border.card-project.projectName .structure-pr-header {
        margin-bottom: 8px;
        display: inline-block;
        width: 100%;
        height: 28px;
        float: var(--floatl);
        display: block;
        margin-top: 0px;
    }

    .card.card-border.card-project.projectName .pro-stucture-general-details {
        height: auto;
        float: var(--floatl);
        display: block;
        height: 54px;
        margin-top: 6px;
    }

.str-progress-bar {
    max-height: 41px;
    width: 100%;
    float: var(--floatl);
    margin-top: 14px;
    margin-bottom: 7px;
    position: relative;
}

.card.card-border.card-project.projectName h5.project-header-title {
    line-height: 18px;
    overflow-y: hidden;
    text-overflow: ellipsis;
    max-height: 19px;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    height: 20px;
    font-size: 17px;
}

.show-arrange1 .approval-element-bottom-left {
    width: 100px;
}


    .show-arrange1 .approval-element-bottom-left span {
        line-height: 10px;
    }

.general-list-titles .list-item {
    font: normal normal 400 14px/22px InstrumentSans;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 5px;
    margin-bottom: 6px;
    color: #3c3c3c;
}

.general-list-titles {
    height: auto;
    overflow: hidden;
    overflow-y: auto;
    margin-bottom: 20px;
}

.detail-list:last-child {
    margin-bottom: 0;
}


.general-list-main .card-body {
    height: 100%;
}

.general-list-main .structure-title {
    height: 100%;
}

.card.card-normal {
    border: 1px solid #E7E7E7;
    opacity: 1;
}

.field-view-mode.color-box .title {
    display: none;
}

.linked-milstone {
    width: 100%;
    margin-top: 4px;
    margin-bottom: 10px;
}

#add-activtit-card, button.btn-content.btn-sr {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    height: 35px;
    width: 105px;
    background: var(--main-color);
    border-radius: 12px;
    border: none;
}

span.activity-milstone {
    display: block;
    font-size: 11px;
}

span.activity-milstone-view {
    padding-left: 10px;
}

.content.has-filter.p0 {
    padding: 0;
    min-height: calc((100vh / var(--zoom)) - 68px );
    background: rgba(255,255,255,0);
}

.card.card-default, .card.card-default .card-body.p0 {
    height: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background: rgba(255,255,255,0);
}

button.btn-content.btn-right.mt16.disabled {
    opacity: 0.5;
    background: #F2F4FC !important;
    color: #000 !important;
    cursor: initial;
}

#my-arrow .e-input-group .e-input-group-icon, #my-arrow .e-input-group.e-control-wrapper .e-input-group-icon {
    margin-top: 2px !important;
}

.activity-milestone-title span i {
    padding-right: 3px;
}

.activity-milestone-title span {
    font-size: 14px;
    font-weight: 600;
}

.project-current-status.on-hold span {
    border-color: #888888;
    color: #888888;
    background-color: #E7E7E7;
}

.project-current-status.at-risk span {
    border-color: var(--atRiskColor);
    color: #1A1A1A;
    background-color: var(--atRiskColorLight);
}

.project-current-status.completed span {
    border-color: var(--completedColor);
    color: #1A1A1A;
    background-color: var(--completedColorLight);
}

.project-current-status.not-started span {
    border-color: var(--notstartedColor);
    color: #1A1A1A;
    background-color: var(--notstartedColorLight);
}

.project-current-status.delayed span {
    border-color: var(--delayedColor);
    color: #1A1A1A;
    background-color: var(--delayedColorLight);
}

.project-current-status.on-track span {
    border-color: var(--ontrackColor);
    color: #1A1A1A;
    background-color: var(--ontrackColorLight);
}

.status-btns {
    position: absolute;
    top: 16px;
    right: 20px;
}


button.btn.btn-hold {
    background: transparent;
    border: none;
    height: 20px;
    border-bottom: 1px solid #888888;
    padding: 0;
    min-width: auto !important;
    border-radius: 0;
    color: #888888;
    font-size: 12px;
    font-weight: 500;
    font-family: 'InstrumentSans';
}

button.btn.btn-resume {
    background: transparent;
    border: none;
    height: 20px;
    border-bottom: 1px solid var(--ontrackColor);
    padding: 0;
    min-width: auto !important;
    border-radius: 0;
    color: var(--ontrackColor);
    margin-right: 19px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'InstrumentSans';
    margin: 0;
}

.card.main-tab-card.project-general-list {
    height: 285px !important;
    overflow: hidden;
    overflow-y: auto;
    overflow-x: hidden;
}

.general-main-list-titles {
    margin-top: 20px;
}

    .general-main-list-titles .list-item {
        font: normal normal 400 14px / 22px InstrumentSans;
        border-bottom: 1px solid #e7e7e7;
        padding-bottom: 5px;
        margin-bottom: 6px;
        color: #3c3c3c;
        cursor: pointer;
    }

.list-item.list-item-selected {
    color: #000000;
    font: normal normal 503 14px / 22px InstrumentSans;
}

.e-checkbox-wrapper.e-wrapper.e-outline.support-needed {
    margin-top: 30px;
}

    .e-checkbox-wrapper.e-wrapper.e-outline.support-needed span {
        font-size: 12px;
        color: #777;
        font-weight: 400;
    }

button.e-control.e-btn.e-lib.btn-save-risk {
    float: var(--floatr);
}

    button.e-control.e-btn.e-lib.btn-save-risk.btn-secondary.save {
        float: var(--floatr) !important;
        margin-top: 24px;
        text-transform: capitalize;
        margin-right: 1px;
    }

button.e-control.e-btn.e-lib.btn-delete-entity {
    box-shadow: none;
    width: auto;
    float: var(--floatr);
    margin-top: 24px;
    /* position: absolute; */
    /* bottom: 106px; */
    /* left: 427px; */
}

button.btn-secondary.back.draft-btn {
    float: var(--floatr);
    position: absolute;
    right: 153px;
}

.filter-row.sr-filter {
    padding-right: 135px;
    margin-bottom: 0px !important;
}

    .filter-row.sr-filter .filter-container {
        height: 36px !important;
    }

    .filter-row.sr-filter .e-filter {
        margin-right: 0px !important;
    }


    .filter-row.sr-filter h4 {
        float: var(--floatl);
        width: 100%;
        font-size: 14px;
        font-weight: 700;
        padding: 0px 20px;
        display: block;
        max-width: 100%;
        line-height: 44px;
        margin-bottom: 0;
    }

    .filter-row.sr-filter button {
        height: 35px;
        margin-bottom: 0px;
        width: 42px;
    }

.sr-stage-tab-content {
    margin-top: 25px;
    margin-bottom: 20px;
}

tr.risk-details {
    cursor: pointer;
}

.sr-filter-content .filter-row.sr-filter {
    padding-right: 0;
    margin-right: 135px;
    height: 40px;
}

.right-side-panel.risk {
    height: 100%;
    position: relative;
}

tr.risk-details.selected {
    background: #93919194;
    --bs-table-accent-bg: none !important;
}

.activity-right-title .risk {
    padding-bottom: 0 !important;
}

.filter-row.sr-filter .filter-options-container {
    right: 0px;
}

span.del-title {
    cursor: pointer;
}

    span.del-title.red {
        color: #cd0000;
    }

    span.del-title.green {
        color: green;
    }


#side-menu {
    left: -278px;
    position: fixed;
    top: 0px;
    z-index: 999;
    transition: left 0.3s ease-in-out;
}

#main-view.slide #side-menu {
    left: 0px;
}

#main-view .page-wrapper {
    width: 100%;
}

#main-view.slide .page-wrapper {
    width: calc(100% - 278px);
}

label.switch-label {
    display: block;
    float: var(--floatl);
    width: calc(100% - 50px);
    text-align: left;
    vertical-align: middle;
}

html.rtl label.switch-label {
    text-align: right;
}

.activities-desc-card.act-risk {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #888888;
    font-family: InstrumentSans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    list-style-type: none;
    position: relative;
    padding-left: 15px;
    margin-left: 0;
}

    .activities-desc-card.act-risk::before {
        content: counter(list-item, disc);
        counter-increment: list-item;
        position: absolute;
        left: 0;
        top: 0;
        font-variant-numeric: tabular-nums;
        unicode-bidi: isolate;
        text-transform: none;
        text-indent: 0px;
        text-align: start;
        text-align-last: start;
        color: #747474;
    }

    .activities-desc-card.act-risk span {
        flex: 1;
    }

img.risk-escalation {
    width: 17px;
    height: 17px;
    margin-left: 8px;
    cursor: pointer;
    display: none;
}

li.activities-desc-card.act-risk:hover .risk-escalation {
    display: block;
}

.e-control.e-lib.e-treeview.custom.e-fullrow-wrap.e-touch.e-keyboard.e-interaction > .e-list-parent.e-ul {
    padding-left: 0px !important;
}

.e-list-parent.e-ul {
    padding-left: 15px !important;
}

.card.card-border.card-project.projectName {
    white-space: normal;
}

.e-treeview .e-list-item.e-hover > .e-fullrow, .e-treeview .e-list-item.e-node-foucs > .e-fullrow {
    background: none !important;
    border: none !important;
}

.e-treeview .e-list-item.e-hover > .e-fullrow, .e-treeview .e-list-item.e-active.e-node-foucs > .e-fullrow {
    background: none !important;
    border: none !important;
}

.e-treeview .e-list-item.e-active > .e-fullrow {
    background: none !important;
    border: none !important;
}

.e-icons.interaction.e-icon-expandable,
.e-icons.interaction.e-icon-collapsible {
    float: var(--floatl);
    margin-top: 5px;
    width: 12px !important;
    height: 12px !important;
}


.e-treeview .e-list-item.e-active.e-hover > .e-fullrow, .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrowm
.e-treeview .e-list-item.e-active, .e-treeview .e-list-item.e-hover, .e-treeview .e-list-item.e-node-focus {
    background: none !important;
    border: none !important;
}

.e-icons.interaction.e-icon-expandable {
    float: var(--floatl);
    margin-top: -1px;
    width: 24px !important;
    height: 12px !important;
}

.e-icons.interaction.e-icon-collapsible {
    float: var(--floatl);
    margin-top: 5px;
    width: 24px !important;
    height: 12px !important;
}

.e-list-item.e-active.e-has-child.e-node-focus {
    background: none !important;
    border: none !important;
}

.e-list-item.e-active.e-node-focus {
    background: none !important;
    border: none !important;
}

.e-treeview .e-list-item.e-active.e-hover > .e-fullrow, .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
    background: none !important;
    border: none !important;
}

.e-treeview .e-list-item.e-hover > .e-fullrow, .e-treeview .e-list-item.e-node-focus > .e-fullrow {
    background: none !important;
    border: none !important;
}

.progress-bar-container {
    width: 100%;
    height: 10px;
    margin-left: 0;
    display: block;
    background: #EBEBEB;
    border-radius: 10px;
}

.progress-bar-value {
    height: 11px;
    border-radius: 10px;
}

.project-current-status {
    display: inline-block;
    float: var(--floatr);
    margin-top: 9px;
    height: 18px;
    border: 0 !important;
}

.e-popup-open {
    overflow: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 20px !important;
}



.e-content.e-dropdownbase, .e-popup-content.e-dropdown {
    height: auto !important;
    max-height: auto !important;
    overflow: visible !important;
    margin-bottom: 0px;
}

.row {
    --bs-gutter-x: 20px !important;
}

.pro-stucture-general-details span {
    font-size: 14px;
    font-family: 'InstrumentSans';
    font-weight: 400;
}

ul.project-card-list li {
    font-family: 'InstrumentSans';
    font-weight: 400;
    color: #888888;
    line-height: 140%;
}

.three-dots {
    margin-top: 0px;
}


.baseline-data {
    position: absolute;
    top: -14px;
}


span.baseline-text.right {
    position: absolute;
    left: -150px;
    text-align: right;
}

span.baseline-text {
    position: absolute;
    top: -19px;
    width: 150px;
    display: block;
    text-align: center;
    left: -75px;
    color: #444444;
    font-size: 10px;
    font-weight: 400;
    font-family: 'InstrumentSans';
}

    span.baseline-text.left {
        left: 0;
        text-align: left;
    }

.project-current-progress {
    float: var(--floatl);
    margin-top: 9px;
}

.three-dots img {
    height: 21px;
    margin: 0;
}

.pro-stucture-desc ul {
    height: 147px;
    overflow: hidden;
}

.baseline-data img {
    margin-top: 7px;
}

button.toolbar-button.toolbar-add-btn.full {
    width: auto;
    min-width: 12px;
    border-radius: 12px !important;
    background: var(--main-color) !important;
    padding: 0 15px;
}

    button.toolbar-button.toolbar-add-btn.full span {
        color: #000;
        font-family: 'InstrumentSans';
        line-height: 40px;
        font-weight: 700;
        letter-spacing: normal;
    }

.combo-box-item-icon-contaner {
    position: relative;
    width: 187px;
    display: inline-block;
}

.combo-box-icon {
    position: absolute;
    z-index: 8;
    left: 12px;
    top: 11px;
    height: 17px;
}

.combo-box-item-icon-contaner .e-input-group {
    padding-left: 32px;
}

.combo-box-icon img {
    width: 20px;
    height: 20px;
    display: block;
}

    .combo-box-icon img.order-type {
        cursor: pointer;
    }

.filter-1 input {
    font-family: 'InstrumentSans' !important;
    color: #888 !important;
}

.e-treeview .e-list-text {
    padding: 0 !important;
}

.e-icons.interaction.e-icon-expandable {
    margin-left: -30px;
}

.card-header h4 {
    font-family: 'InstrumentSans';
    font-size: 17px;
    font-weight: 750;
}

.setting-card
label.lebel {
    font-family: 'InstrumentSans';
    font-size: 12px;
    line-height: 140%;
    color: #777777;
    margin-bottom: 0;
    display: block;
}

.mb-10 {
    margin-bottom: 10px;
}

.hor-label .form-group {
    margin-top: 0;
    margin-bottom: 10px !important;
}

.hor-label .form-group {
    margin-top: 0;
    margin-bottom: 10px !important;
    height: 18px !important;
}


.e-switch-wrapper.e-switch-disabled .e-switch-inner .e-switch-off, .e-css.e-switch-wrapper.e-switch-disabled .e-switch-inner .e-switch-off {
    opacity: 1;
    background: #B4B4B4;
    width: 30px;
    height: 16px;
}

.e-switch-wrapper.e-switch-disabled .e-switch-inner, .e-css.e-switch-wrapper.e-switch-disabled .e-switch-inner {
    width: 30px !important;
    height: 16px !important;
    border-radius: 20px !important;
    opacity: 1 !important;
    border: none !important;
    background-color: transparent !important;
}

span.e-switch-handle {
    width: 10px !important;
    height: 10px !important;
    background: #FFF !important;
    top: 3px !important;
    box-shadow: 0px 0px 1.5px 1px rgba(0,0,0,0.25) !important;
    bottom: auto !important;
}

.e-switch-wrapper.e-switch-disabled .e-switch-inner .e-switch-on, .e-css.e-switch-wrapper.e-switch-disabled .e-switch-inner .e-switch-on {
    background-color: #FBBA20 !important;
    opacity: 1 !important;
}

.e-switch-wrapper.e-switch-disabled, .e-css.e-switch-wrapper.e-switch-disabled {
    cursor: not-allowed;
}

span.e-switch-inner {
    height: 16px !important;
    width: 30px !important;
    opacity: 1 !important;
}

.e-switch-wrapper .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: #FBBA20 !important;
}

.e-switch-wrapper .e-switch-on, .e-css.e-switch-wrapper .e-switch-on {
    background-color: #FBBA20 !important;
}

.e-switch-wrapper .e-switch-handle, .e-css.e-switch-wrapper .e-switch-handle {
    left: 4px;
}

.e-switch-wrapper, .e-css.e-switch-wrapper {
    height: 16px !important;
    margin-top: 4px;
}

.milestone-element-container .element-title {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    text-wrap: pretty;
    display: -webkit-box;
    width: 180% !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.milestone-element-container:first-child .element-title {
    width: 100% !important;
    right: auto !important;
    left: 0px !important;
}

    .milestone-element-container:first-child .element-title span {
        text-align: center;
    }

.milestone-element-container:last-child .element-title {
    width: 100% !important;
    left: auto !important;
    right: 0px !important;
}

    .milestone-element-container:last-child .element-title span {
        text-align: center;
    }

.hor-label .form-group label {
    font-family: 'InstrumentSans';
    font-size: 12px;
    line-height: 140%;
    color: #777777;
    margin-bottom: 0;
    display: block;
    line-height: 24px;
}

button.toolbar-button.toolbar-save-btn span {
    color: #000;
    font-weight: 500;
    font-family: 'InstrumentSans';
}

.small-btns button.toolbar-button.toolbar-add-btn.full {
    height: 32px !important;
    width: 140px !important;
    border-radius: 11px !important;
    margin-top: 8px;
    line-height: 32px;
    overflow: hidden;
}

.small-btns button.toolbar-button.laslastable {
    height: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    margin-top: 8px;
}

.full-height-toolbar-filter.card-wizard-new.status-report {
}

    .full-height-toolbar-filter.card-wizard-new.status-report .wizard-body.card-wizard.small-items {
        margin-top: 25px;
    }

.card.card-dark {
    background: #FFF;
}

.full-height-toolbar-filter.card-wizard-new.status-report .wizard-btns {
    background: none;
    border: none;
    float: right;
    width: 100%;
}

.full-height-toolbar-filter.card-wizard-new.status-report h4 {
    font-family: 'InstrumentSans';
    font-weight: 750;
    /*letter-spacing: 0px;*/
    font-size: 17px;
}

span.e-outline.descriptionText.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group {
    border: 1px solid #E7E7E7 !important;
    border-radius: 12px !important;
    padding: 8px 12px;
    margin-top: 4px;
}

span.e-outline textarea {
    padding: 0 !important;
}

.right-side-panel span.e-outline textarea {
    padding: 15px !important;
}

.card.card-dark ul li {
    font-family: 'InstrumentSans';
    font-size: 14px;
    color: #888888;
    margin-bottom: 10px;
}

.card.card-dark ul {
    overflow: hidden;
    height: 100%;
    display: block;
}

.old-data {
    height: calc(50% - 50px) !important;
    overflow: hidden;
}

button.btn-secondary.save .e-icons {
    padding-top: 0;
    display: block;
    float: right;
    padding-left: 5px;
}



button.btn-secondary.back .e-icons {
    float: var(--floatl);
    padding-right: 5px;
    padding-top: 0;
}

.risk-grid.card-container-thread.mt {
    margin-top: 50px;
}

.slim-form .form-group {
    margin-top: 0px;
}

.status-report-form-card {
    height: calc((100vh / var(--zoom)) - 68px - 70px - 70px - 81px);
    overflow-y: auto;
}

.e-popup-open {
    padding-left: 0 !important;
    padding-top: 15px;
}

button.e-control.e-btn.e-lib.btn-delete-entity.delete-risk {
    margin-top: 10px;
    height: 35px;
    border-radius: 12px;
    width: 110px;
    float: var(--floatl);
    border: none !important;
}

.slim-form .normal-input {
    margin-top: 0px;
    margin-bottom: 10px;
}

.sr-risk-form {
    height: calc((100vh / var(--zoom)) - 411px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 15px;
}



.sr-risk-action-btns {
    padding-right: 15px;
}

button.on-off-btn {
    width: calc(50% - 8px);
    border: none;
    border-radius: 8px;
    height: 25px;
    font-size: 14px;
}

    button.on-off-btn:last-child {
        float: var(--floatr);
    }

    button.on-off-btn.sucess {
        background: #CDF9C1;
    }

    button.on-off-btn.danger {
        background: #F9C1C1;
    }


.filter-row.sr-filter .filter-l {
    height: 40px;
    float: var(--floatr);
    width: calc(100% - 50px);
}

    .filter-row.sr-filter .filter-l button {
        float: var(--floatr);
    }

span.st-description, .st-lastupdate {
    font-size: 14px;
    font-family: 'InstrumentSans';
    color: #888888;
    line-height: 1.4;
    text-wrap: pretty;
    display: -webkit-box;
    width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}

span.st-lastupdate {
    margin-bottom: 33px;
}

.stakeholder-list .st-init-users {
    width: 32px;
    height: 32px;
    float: var(--floatl);
}

.st-stakeholders .st-init-users {
    float: var(--floatl);
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.st-stakeholders {
    float: var(--floatl);
    width: 100%;
    margin-top: 10px;
}

.card.main-overview-card .structure-tags {
    width: 100%;
    height: 18px;
    margin-bottom: 10px;
}

    .card.main-overview-card .structure-tags span {
        height: 18px;
        margin-left: 0;
        margin-top: 0;
        line-height: 18px;
    }


span.st-title img {
    /* width: 15px; */
    /* height: 15px; */
    margin-right: 10px;
    float: var(--floatl);
}

.has-scroll .card-body {
    padding-right: 0;
}

    .has-scroll .card-body .card-container-thread {
        padding-right: 15px;
    }



.activity-milestone-title {
    font-family: 'InstrumentSans';
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

li.activities-desc-card {
    margin-left: 15px;
}

.milstone-box {
    float: none;
    height: 100%;
    width: auto;
    display: inline-block;
}

    .milstone-box h4 {
        text-align: center;
        font-family: 'InstrumentSans';
        font-weight: 750;
        font-size: 11px;
        margin-bottom: 0;
        padding: 0 15px;
        line-height: 49px;
        max-width: 500px;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0 auto;
    }

.activity-box {
    float: var(--floatl);
    position: relative;
    height: 100%;
    width: 105px;
}

    .activity-box h5, .activity-box span {
        font-weight: 400;
        font-size: 10px;
        width: 100%;
        text-align: center;
        font-family: 'InstrumentSans';
    }

    .activity-box.bottom-box h5, .activity-box.bottom-box span {
        position: absolute;
        bottom: 0px;
        text-align: center;
    }

    .activity-box.top-box h5, .activity-box.top-box span {
        top: 0px;
        text-align: center;
        position: absolute;
    }

.center-border {
    height: 8px;
    width: 100%;
    position: absolute;
    top: calc(50% - 4px);
    background: #EBEBEB;
    border-radius: 0;
    left: 0;
}

.activity-box img {
    top: calc(50% - 10px);
    position: absolute;
    z-index: 9;
    left: calc(50% - 12px);
    width: 20px;
    height: 20px;
}

.activity-box.bottom-box h5 {
    bottom: calc(50% - 52px);
}

.activity-box.bottom-box span {
    bottom: calc(50% - 65px);
}

.activity-box.top-box h5 {
    top: calc(50% - 44px);
}

.activity-box.top-box span {
    top: calc(50% - 67px);
}

.activity-box:first-child h5, .activity-box:last-child h5, .activity-box.last-elment h5 {
    width: 100%;
    text-align: center;
    left: 0;
}

.activity-box h5 {
    width: 180%;
    left: -40%;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.card.main-overview-card.milestone-details {
    overflow: hidden;
}

.sub-activities {
    height: 85px;
    position: relative;
    border-right: 1px solid #e3e3e3;
    margin-top: 17px;
    padding: 0;
}

.milstone-box:first-child .center-border {
    border-radius: 8px 0 0 8px;
}

.milstone-box:last-child .center-border {
    border-radius: 0 8px 8px 0;
}

.milstone-box:last-child .sub-activities {
    border-right: 0px;
}

.activity-box span img {
    float: left;
    display: block;
    margin-top: 1px;
    left: calc(50% - 50px);
    height: 10px;
    top: 0;
}


.activity-box span {
    margin-left: 5px;
}

.main-loading-content.full.chat-ai {
    margin-top: 56px;
    width: 100%;
    margin: 56px auto 0;
}

.chat-text.from-AI p {
    margin: 0;
}

span.e-outline.chat-box-2.e-input-group.e-control-container.e-control-wrapper {
    height: 55px !important;
    border-radius: 22px;
}

span.e-input-group.e-control-container.e-control-wrapper.e-outline.normal-input.chat-box-2 {
    background: #FFF;
}

span.e-input-group.e-control-container.e-control-wrapper.e-outline.normal-input.chat-box-2 {
    border-radius: 55px !important;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    background: #FFF !important;
}

    span.e-input-group.e-control-container.e-control-wrapper.e-outline.normal-input.chat-box-2 input {
        padding-left: 23px !important;
        padding-right: 23px !important;
    }

.chat-text p {
    margin-bottom: 0;
    min-width: 30px;
    padding-right: 20px;
}

.chat-text {
    display: inline-block;
}

.chat-line {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
}

.status-report-types {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 22px;
    margin-top: 15px;
}

.status-report-type {
    height: 50px;
    line-height: 50px;
    cursor: pointer;
}

    .status-report-type h5 {
        line-height: 50px;
        margin: 0;
        text-align: var(--floatl);
        font-size: 15px;
        padding-left: 15px;
    }

        .status-report-type h5 img {
            float: var(--floatl);
            height: 14px;
            margin-top: 18px;
            margin-right: 10px;
        }

    .status-report-type.active {
        background: #FBBA20;
        border-radius: 16px;
        box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.15);
    }

.card.card-border.card-project.projectName.AI-Project {
    height: auto;
}

.status-report-activity {
    background: #f4f4f4;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
    float: var(--floatl);
    position: relative;
}

.status-report-activity-text p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
}

.status-report-type-info > h5 {
    font-size: 14px;
    font-weight: 700;
    font-family: 'InstrumentSans';
}

.status-report-type-info {
    margin-top: 15px;
    display: inline-block;
    min-height: 179px;
    position: relative;
    width: 100%;
    height: auto;
}

.status-report-activity-icon {
    float: var(--floatl);
    margin-right: 10px;
    position: relative;
}

.status-report-activity-text {
    float: var(--floatl);
    width: calc(100% - 136px);
}

.status-report-activity-flags {
    float: var(--floatr);
}

img.arrow-icon {
    width: 20px;
    height: 20px;
    padding: 3px;
    margin-left: 10px;
    cursor: pointer;
}

img.flag-icon {
    width: 15px;
    margin-left: 10px;
}

.status-report-activity-details {
    display: inline-block;
    width: 100%;
}

.detail-line {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    float: var(--floatl);
}

.status-report-activity-text b {
    padding-right: 20px;
    width: 174px;
    display: block;
    float: var(--floatl);
    font-size: 14px;
    color: var(--secondary-color);
    font-weight: 700;
    font-family: 'InstrumentSans';
    line-height: 27px;
}

.status-report-activity-icon img {
    width: 11px;
    height: auto;
}

.detail-line .status-report-activity-text p {
    float: left;
    width: calc(100% - 200px);
}

.right-side-panel.risk h4 {
    margin-bottom: 15px;
}

.right-side-panel.risk h4 {
    margin-bottom: 15px;
}

.status-report-risk-list.sr-risk-form {
    padding-right: 0;
}

.l-element {
    float: var(--floatl);
    margin-right: 15px;
}

.sr-legeand {
    display: inline-block;
    float: var(--floatr);
    position: absolute;
    width: auto;
    bottom: 0px;
    right: 20px;
}

img.l-icon {
    width: 14px;
    margin-right: 10px;
    float: left;
    margin-top: 5px;
}

.l-element:last-child {
    margin-right: 0;
}

.l-element span {
    float: var(--floatl);
    display: block;
    font-size: 12px;
    line-height: 25px;
}

span.l-icon.ongoing {
    background: #eeeeee;
    width: 30px;
    height: 14px;
    margin-top: 5px;
    margin-right: 10px;
    border-radius: 10px;
}

span.l-icon.resolved {
    background: #CDF9C1;
    width: 30px;
    height: 14px;
    margin-top: 5px;
    margin-right: 10px;
    border-radius: 10px;
}

.card.status-report-list-card h4 {
    font-size: 17px;
    font-weight: 750;
    margin: 0;
    float: var(--floatl);
    max-width: calc(100% - 10px);
    text-overflow: ellipsis;
    height: 20px;
    overflow: hidden;
    text-wrap: nowrap;
    cursor: pointer;
}

.card.status-report-list-card .card-body {
    padding-top: 0;
}

.status-report-kpi {
    float: var(--floatl);
    display: block;
    width: 100%;
    height: 24px;
    margin-bottom: 10px;
}

    .status-report-kpi .icon img {
        width: 12px;
        height: 23px;
    }

    .status-report-kpi .icon {
        width: 18px;
        float: var(--floatl);
        height: 24px;
        display: block;
    }

    .status-report-kpi .text {
        font-size: 15px;
        font-weight: 600;
        color: #888888;
    }

.i-timline.sr-timeline {
    float: var(--floatl);
    display: block;
    position: relative;
    height: 80px;
    width: 100%;
}

.v-line {
    position: absolute;
    width: 5px;
    height: 96%;
    background: #EBEBEB;
    z-index: 0;
    top: 4%;
    border-radius: 5px;
    left: 3px;
}

.timeline-item {
    height: 20px;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
}

.timeline span {
    font-size: 14px;
    font-weight: 600;
    color: #888888;
    padding-left: 6px;
}

.col-lg-55 {
    flex: 0 0 auto;
    width: 20%;
}

.sr-expander {
    border: none;
    background: transparent;
}

    .sr-expander .e-acrdn-item,
    .sr-expander .e-acrdn-item .e-acrdn-content {
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
    }




.e-accordion .e-acrdn-item.e-expand-state.e-select {
    background: transparent !important;
    border: none;
}

.e-accordion .e-acrdn-item .e-acrdn-header,
.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
    background: transparent !important;
    padding: 0 !important;
    padding-left: 34px !important;
    margin-bottom: 10px;
}


    .e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
        right: auto;
        left: 0;
    }

.e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:active, .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:hover {
    background: transparent;
}

.sr-expander-header {
    font-size: 20px;
    font-weight: 600;
    color: #1A1A1A;
}

.card.status-report-list-card .str.menu-nav {
    width: 10px;
    cursor: pointer;
}

.card.status-report-list-card .card-header {
    position: relative;
}

.str.dropdown {
    right: 0;
    top: 0;
    z-index: 0;
    border-radius: 0;
    padding: 0;
    height: 0;
    width: 0px;
}

    .str.dropdown span {
        display: block;
        width: 100%;
        color: #1a1a1a;
        font-weight: 400;
        font-family: 'InstrumentSans';
        line-height: 23px;
    }

        .str.dropdown span:hover {
            color: var(--primary-color);
        }

        .str.dropdown span i {
            width: 26px;
            font-size: 14px;
            text-align: left;
        }

textarea.e-input:not(:valid),
textarea.e-input:valid,
.e-float-input.e-control-wrapper textarea:not(:valid),
.e-float-input.e-control-wrapper textarea:valid,
.e-float-input textarea:not(:valid),
.e-float-input textarea:valid,
.e-input-group.e-control-wrapper textarea:not(:valid),
.e-input-group.e-control-wrapper textarea:valid,
.e-input-group textarea:not(:valid),
.e-input-group textarea:valid {
    height: 60px;
}

.card.status-report-list-card h4.twolines {
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 40px;
    height: auto;
    width: 100%;
}

.card-header.twolines {
    margin-bottom: 10px;
    height: 58px;
}

.timeline-item a {
    color: var(--secondary-color) !important;
    text-decoration: underline;
    font-weight: 600;
}

.card.status-report-list-card h4.twolines img {
    float: var(--floatl);
    margin-right: 12px;
}

.card.status-report-list-card h4.twolines b {
    float: var(--floatl);
    width: calc(100% - 25px);
}


.bg-t {
    background-color: transparent !important;
}


.project-presentation {
    width: 976px;
    margin: 0px auto 0 auto;
    overflow-x: hidden;
    padding: 0 10px;
    padding-top: 20px;
}

    .project-presentation .selected-project {
        background: #FFF;
        border-radius: 22px;
        margin-bottom: 40px;
    }

        .project-presentation .selected-project h4 {
            width: 100%;
            text-align: center;
            font-weight: 750;
            font-size: 24px;
            line-height: 71px;
            padding: 0px;
            margin: 0px;
        }

.milstone-status span {
    font-size: 12px;
}

img.next-pres {
    position: fixed;
    right: calc((50vw / var(--zoom)) - 490px - 80px );
    top: calc((50vh / var(--zoom)) - 15px);
    cursor: pointer;
}

img.prev-pres {
    position: fixed;
    left: calc((50vw / var(--zoom)) - 490px - 80px);
    top: calc((50vh / var(--zoom)) - 15px);
    cursor: pointer;
}

img.close-pres {
    position: fixed;
    right: 40px;
    top: 25px;
    cursor: pointer;
}

.chat-inline .chats {
    position: fixed;
    bottom: 0px;
    width: 960px;
    height: auto;
    z-index: 999999;
    margin: 0 auto;
    left: 0;
    background: transparent;
    min-height: 95px;
    padding: 0 5px;
}

.chat-inline.style1 .chats {
    bottom: 6px !important;
}

.full-menu.thin .chat-inline .chats {
    left: calc(50% - 478px);
}

.chat-inline .chats.relative {
    left: 0;
}

.chat-inline .send-chat {
    height: 95px;
    background: transparent;
    z-index: 999;
    width: 960px;
    margin: 0 5px;
    left: calc(50% - 490px + 140px);
}

.chat-inline a.send-chat-btn {
    top: 10px;
    right: 5px;
    width: 45px;
    height: 45px;
}

.chat-inline .chat-container {
    height: auto !important;
    min-height: 0 !important;
}


.chat-inline .chats.relative {
    position: relative;
}

.cp {
    cursor: pointer;
}

.cd {
    cursor: default;
}

.e-treeview .e-list-item .e-ul {
    overflow-y: hidden;
}

.sr-kpis {
    margin-top: 5px;
}

.card.main-overview-card.milestone-details .card-body {
    padding-bottom: 0px;
}

.approvals-kpis {
    float: var(--floatl);
    margin-top: 20px;
}

img.approval-status-img {
    position: absolute;
    top: -6px;
    right: -4px;
    width: 16px;
}

.st-init-users {
    position: relative;
}

.chat-inline.style1 a.send-chat-btn {
    top: 10px !important;
}

.row.hor-label.full-wd .e-switch-wrapper {
    float: var(--floatr);
}

.card.card-disabled.full-height-toolbar-filter .card-project {
    border: 1px solid #E7E7E7;
}

.include_btn, .exceclude_btn {
    width: 48px;
    height: 48px;
    background: #FFF;
    border-radius: 10px;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
    margin: 0 auto;
    margin-bottom: 10px;
    position: absolute;
    top: calc(50% - 53px);
    left: calc(50% - 24px);
}

.exceclude_btn {
    top: calc(50% + 6px);
}

.selected-project {
    height: 68px;
    width: 100%;
    background: #FFF;
    font-size: 24px;
    border-bottom: 1px solid #F0F0F0;
}

    .selected-project h4 {
        text-align: center;
        line-height: 68px;
        font-size: 22px;
        margin: 0;
        font-weight: 700;
        color: #000;
    }

.chat-inline.style1.floating .send-chat {
    display: block;
    right: calc(-100% + 50px);
    left: auto;
    transition: right 0.3s ease-in-out;
}

.chat-inline.style1 .send-chat {
    right: auto;
    position: fixed;
    bottom: 0;
}


.chat-inline.style1.floating .chats.relative .send-chat {
    right: auto;
    left: auto;
    display: block;
    margin: 0 auto;
    position: fixed;
    bottom: 00px;
    width: 960px;
    left: calc(50% - 470px + 140px);
}

.chats.relative .chat-container {
    padding-bottom: 95px !important;
    width: 100%;
    padding: 0 calc(50% - 475px) 95px calc(50% - 475px);
}

.ai-floating {
    position: fixed;
    right: -901px;
    bottom: 41px;
    z-index: 999999;
    background: #FFF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 55px;
    height: 57px;
    width: 950px;
    line-height: 57px;
    padding-left: 6px;
    transition: right 0.1s ease-in;
    cursor: pointer;
}

    .ai-floating:hover {
        right: -826px;
    }

.bottom-abs.payment-comment-box {
    width: calc(100% - 40px);
    position: absolute;
    left: 20px;
    bottom: 20px;
}

    .bottom-abs.payment-comment-box .e-outline.normal-input {
        width: calc(100% - 36px) !important;
        border: 1px solid #E7E7E7 !important;
    }

    .bottom-abs.payment-comment-box .send-chat-btn {
        display: none;
    }

.e-filter-parent {
    margin-left: 20px;
    box-shadow: none;
}

.normal-input.e-input-focus {
    border-color: var(--main-color) !important;
    outline: none !important;
    box-shadow: none !important;
}


button.toolbar-button.toolbar-add-btn.full span img {
    margin-top: -3px;
    height: 14px;
    margin-left: 10px;
}

.la-filter:before {
    content: '';
    background-image: url(/img/filter.svg);
    height: 19px;
    display: block;
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: center;
}

.toolbar-container.wi.with-breadcrumbs.pr-60.small-btns button.toolbar-button.toolbar-add-btn.full span {
    line-height: 32px !important;
}

.tooltip-container {
    position: relative;
}

    .tooltip-container .tooltip-card {
        display: none;
    }

.rel {
    position: relative;
}


.tooltip-container:hover .tooltip-card {
    display: block;
    position: absolute;
    width: 273px;
    height: 72px;
    background: #FFF;
    z-index: 99999;
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
    border-radius: 22px;
    padding: 15px;
    right: -46px;
}

.tooltip-card {
}

    .tooltip-card .st-left {
        float: var(--floatl);
        height: 40px;
        width: 40px;
        margin-right: 10px;
    }

        .tooltip-card .st-left .st-init-users {
            height: 40px !important;
            width: 40px !important;
            line-height: 40px !important;
        }

            .tooltip-card .st-left .st-init-users h2 {
                line-height: 40px;
            }

    .tooltip-card .st-right {
        line-height: 40px;
        color: #000;
        float: var(--floatl);
        width: calc(100% - 50px);
        text-align: var(--floatl);
    }

        .tooltip-card .st-right span {
            display: block;
            width: 100%;
            text-align: var(--floatl);
            line-height: 20px;
            font-weight: 700;
            font-size: 13px;
            color: #000 !important;
        }

            .tooltip-card .st-right span:last-child {
                font-weight: 600;
                text-overflow: ellipsis;
                height: 19px;
                overflow: hidden;
                width: 100%;
                text-wrap: nowrap;
            }

.normal-input.e-input-focus.chat-box-2:hover,
.normal-input.e-input-focus.chat-box-2 {
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1) !important;
    background: #FFF !important;
    border: 1px solid #E7E7E7 !important;
    outline: none !important;
}

.completed-activities-icon img {
    opacity: 0.3;
}

    .completed-activities-icon img.steerco-icon {
        opacity: 1;
    }

.completed-activities-container:hover .completed-activities-icon img {
    opacity: 1;
}

.ai-floating span {
    font-size: 12px;
}

.full-menu.thin .chat-inline .send-chat {
    left: calc(50% - 490px);
}

.full-menu.thin .floating.chat-inline .send-chat {
    left: 200%;
}

img.logo-pres {
    position: fixed;
    left: 40px;
    top: 14px;
    cursor: pointer;
}

.AI-Project .ps-st-left .st-init-users,
.AI-Project .ps-st-left {
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: var(--floatr);
}



.AI-Project .structure-pr-header {
    margin: 0px !important;
}

.card.card-border.card-project.projectName.AI-Project .pro-stucture-general-details {
    margin-bottom: 15px;
}

.card.card-border.card-project.projectName.AI-Project h5.project-header-title {
    margin-bottom: 10px !important;
}

.status-report-activity:last-child {
    margin-bottom: 0;
}

.status-report-activity-text.full {
    width: calc(100% - 34px);
}


.status-report-type-info.risks {
    padding-bottom: 30px;
}

.project-presentation > div {
    margin-bottom: 40px;
}


.loading-chat:before {
    content: '';
    background: url(/img/ai.svg?v=1.1);
    width: 31px;
    height: 21px;
    position: absolute;
    left: 13px;
    top: 15px;
    background-position: center;
    background-repeat: no-repeat;
}

.project-presentation .e-accordion .e-acrdn-item {
    margin-bottom: 40px;
}

.timeline-item img {
    width: 11px;
    margin-top: -4px;
}

.detail-line {
    float: var(--floatl);
    width: 100%;
}

.st-init-users.op50 h2, .st-init-users.op50 img.approval-status-img {
    opacity: 0.4;
}


.st-init-users.op50 img {
    display: none;
}

.tooltip-container.right-tooltip:hover .tooltip-card {
    right: auto;
    left: 40px;
    opacity: 1;
    bottom: -15px;
}

.userprofile a {
    color: #000 !important;
}

.card.status-report-list-card .card-header h4 img {
    margin-right: 10px;
    width: 15px;
    line-height: 20px;
    margin-top: 3px;
}

.card.status-report-list-card .three-dots img {
    height: 14px;
    margin-top: 2px;
    float: var(--floatr);
    margin-right: 0;
    margin-left: 0;
}

.horizontal-timeline {
    position: absolute;
    height: 7px;
    width: 100%;
    top: calc(50% - 4px);
    background: #EBEBEB;
    border-radius: 8px;
    left: 20px;
}

.e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
    padding-right: 0px;
    padding-left: 0xp;
}

.chat-text.from-AI .chat-text-content h1 {
    margin-top: 20px;
    font-size: 22px;
    font-weight: 700;
}

.chat-text.from-AI .chat-text-content h2 {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 700;
}

.chat-text.from-AI .chat-text-content h3 {
    margin-top: 15px;
    font-size: 18px;
    font-weight: 700;
}

.chat-text.from-AI .chat-text-content h4 {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 700;
}

.por-60 {
    padding-right: 40px !important;
    padding-left: 0px !important;
}

.pol-60 {
    padding-left: 40px !important;
    padding-right: 0px !important;
}


.project-specific-top .str.menu-nav {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 20;
    cursor: pointer;
}

.project-specific-top .str.dropdown-container:focus .str.dropdown {
    right: -20px;
    width: 175px;
    top: 25px;
    min-height: 100px;
    height: auto;
}

.project-specific-top img.context-menu-icon {
    height: 12px;
    margin-right: 5px;
    margin-top: -3px;
}

.project-specific-top .str.dropdown-container:focus .str.dropdown .payment-icon-full {
    margin-bottom: 10px;
    line-height: 12px;
}

.ib {
    border: 1px solid #2f3068;
}

    .ib h2 {
        line-height: 31px;
    }

.chat-text-copy {
    position: absolute;
    top: 20px;
    right: 15px;
    cursor: pointer;
    width: 12px;
    height: 12px;
    display: block;
}

    .chat-text-copy .soh, .chat-text-copy .sof {
        display: none;
    }

    .chat-text-copy:hover .hoh {
        display: none;
    }

    .chat-text-copy:hover .soh {
        display: block;
    }

    .chat-text-copy.done:hover .soh, .chat-text-copy.done .hoh, .chat-text-copy.done .soh {
        display: none;
    }

    .chat-text-copy.done .sof, .chat-text-copy.done .sof {
        display: block;
    }

    .chat-text-copy img.sof {
        width: 12px;
    }

    .chat-text-copy img {
        float: var(--floatr);
    }

.spin-effect {
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.chat-text.from-AI .chat-text-content ol {
    padding-left: 2rem;
    padding-right: 0rem;
    margin-top: 10px;
}

.card-body.invoice-style.project-left-side {
    padding-top: 0px !important;
    overflow: auto;
    margin-bottom: 15px;
    padding-bottom: 0;
}

    .card-body.invoice-style.project-left-side h4 {
        text-align: left;
        font: normal normal 700 17px / 17px InstrumentSans;
        /* letter-spacing: 0px; */
        color: #454545;
        opacity: 1;
        display: block;
        margin-top: 20px;
        height: 24px;
        font-weight: 750;
        margin-bottom: 10px;
        line-height: 24px;
    }

.skeleton-custom .e-skeleton {
    border-radius: 22px;
}

.e-multi-line-input {
    padding-left: 8px;
    padding-right: 0px !important;
}

    .e-multi-line-input textarea {
        padding-right: 8px !important;
        padding-left: 0px !important;
    }

.e-ddt .e-ddt-icon::before, .e-ddt .e-ddt-icon::after {
    font-size: 12px;
}

.line-base {
    border: 1px solid #e7e7e7;
    border-radius: 0 0 12px 12px;
    margin-top: -11px;
    margin-bottom: 10px;
    min-height: 39px;
}

.custom-select-tag-base {
}

    .custom-select-tag-base .normal-input {
        border-radius: 12px 12px 0 0 !important;
    }

.tag-base {
    border: 1px solid #e7e7e7;
    border-radius: 0 0 12px 12px;
    margin-bottom: 10px;
    margin-top: -11px;
    min-height: 39px;
}

.line-base .e-chip {
    border: none !important;
    border-bottom: 1px solid #e7e7e7 !important;
    border-radius: 0 !important;
    width: 100%;
}

    .line-base .e-chip:last-child {
        border-bottom: none !important;
    }

div#paymentGrid, #DelivGrid {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e7e7e7;
}


    div#DelivGrid .e-gridheader,
    div#paymentGrid .e-gridheader {
        border-top: 0px;
    }

    div#DelivGrid th.e-headercell:first-child,
    div#paymentGrid th.e-headercell:first-child {
        border: 0;
    }

    div#DelivGrid span.e-headertext,
    div#paymentGrid span.e-headertext {
        font-weight: 700;
        font-size: 14px;
    }

    div#DelivGrid th.e-headercell,
    div#paymentGrid th.e-headercell {
        padding-bottom: 0 !important;
    }

    div#DelivGrid.e-grid .e-headercelldiv,
    div#paymentGrid.e-grid .e-headercelldiv {
        margin-bottom: 0;
        line-height: 40px;
    }

.sf-gantt {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e7e7e7;
}

    .sf-gantt .e-control.e-toolbar.e-lib.e-gantt-toolbar.e-keyboard {
        border-top: 0;
        border: none
    }

    .sf-gantt .e-control.e-splitter.e-lib.e-gantt-splitter.e-splitter-horizontal {
        border-left: none;
        border-right: none;
        border-bottom: none;
    }


.detail-list {
    width: 100%;
    min-height: 50px;
    padding: 15px;
    background: #f4f4f4;
    margin-bottom: 10px;
    border-radius: 12px;
    display: inline-block;
}

.detail-list-title {
    float: var(--floatl);
    width: 219px;
    line-height: 20px;
}

    .detail-list-title img {
        margin-top: -3px;
        height: 15px;
    }

    .detail-list-title span {
        font-size: 14px;
        font-weight: 700;
        color: var(--secondary-color);
        margin-left: 10px;
        margin-right: 10px;
    }

.detail-list-content {
    float: var(--floatl);
    font-size: 14px;
    font-weight: 500;
    width: calc(100% - 231px);
    display: inline-block;
}

    .detail-list-content span {
        display: block;
    }

.detail-list:last-child {
    margin-bottom: 0;
}

span.st-title {
}

.card-body.card-scroll {
    padding-bottom: 0;
    margin-bottom: 20px;
    overflow-y: auto;
    margin-top: 20px;
}

    .card-body.card-scroll span.st-title {
        margin-top: 0;
    }

.general-list-titles.custom-list {
    padding-left: 15px;
    padding-right: 15px;
}

.form-description {
    font-size: 12px;
    font-weight: 400;
    color: #777777;
    line-height: 1.4;
    margin-top: 5px;
}

.form-group.ha label small {
    line-height: 12px;
    float: left;
    display: block;
    font-weight: 400 !important;
    font-size: 12px;
    line-height: 1.4;
}

.form-group.ha {
    height: auto !important;
}

    .form-group.ha label {
        font-weight: 700;
        line-height: 1.4;
        font-size: 12px;
    }

.milestone-expand {
    width: 20px;
    cursor: pointer;
    float: var(--floatr);
    margin-left: 10px;
}

.structure-milestone {
    display: inline-block;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: inherit;
    transition: all 0.2s ease;
}


    .structure-milestone.expanded {
        position: fixed;
        width: calc((100vw / var(--zoom)) - 80px);
        min-width: 320px;
        z-index: 99999;
        top: calc(50% - 150px);
        height: 300px;
        transition: all 0.2s ease;
        left: calc(40px );
        background: white;
        padding: 15px;
        border: 1px solid #e7e7e7;
        border-radius: 22px;
        padding-bottom: 0;
        padding-top: 0;
    }

.expanded-overlay {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
}

.structure-milestone.expanded .str-milstone-timeline {
    height: calc(100% - 54px);
}

.structure-milestone.expanded .project-details {
    height: calc(100%);
}

.structure-milestone.expanded .st-title.active, .structure-milestone.expanded .st-title:hover {
    border-bottom: 2px solid var(--main-color) !important;
}

.structure-milestone.expanded .st-title {
    margin-right: 15px;
}

.approval-data .card {
    background: transparent;
    margin: 0;
}


button.toolbar-button.toolbar-save-btn img.toolbar-add-btn-icon {
    height: 13px;
    margin-left: 10px;
    margin-top: -2px;
}

button.toolbar-button.toolbar-cancel-btn.reject {
    border-color: #B94444;
    background-color: #FFF1F1;
    min-width: 80px;
    width: auto;
    padding: 0 10px;
    line-height: 32px;
}

    button.toolbar-button.toolbar-cancel-btn.reject img {
        margin-top: -3px;
        height: 12px;
        margin-left: 10px;
    }

button.toolbar-button.toolbar-edit-btn span {
    color: var(--secondary-color);
}

button.toolbar-button.toolbar-edit-btn img {
    height: 13px;
    margin-top: -2px;
    margin-left: 10px;
}

Button.toolbar-button.toolbar-cancel-btn img {
    height: 12px;
    margin-top: -2px;
    margin-left: 10px;
}

/*** Works on common browsers ***/
::selection {
    background-color: var(--main-color) !important;
    color: #fff;
}

/*** Mozilla based browsers ***/
::-moz-selection {
    background-color: var(--main-color) !important;
    color: #fff;
}

/***For Other Browsers ***/
::-o-selection {
    background-color: var(--main-color) !important;
    color: #fff;
}

::-ms-selection {
    background-color: var(--main-color) !important;
    color: #fff;
}

/*** For Webkit ***/
::-webkit-selection {
    background-color: var(--main-color) !important;
    color: #fff;
}

button.e-control.e-btn.e-lib.e-filter-status.e-primary {
    width: auto;
    min-width: 80px;
    border-radius: 12px !important;
    padding: 0 15px;
    height: 40px;
    box-shadow: none;
    margin-right: 12px;
    color: #888888;
    background: #FFF !important;
    line-height: 40px;
    padding: 0 10px;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 600;
}

button.e-control.e-btn.e-lib.e-filter-status.selected.e-primary {
    background: var(--secondary-color) !important;
    color: #FFF;
}

.text-muted {
    color: #242424 !important;
}

.no-expand.e-accordion .e-acrdn-item .e-acrdn-header {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

    .no-expand.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
        display: none;
    }

.no-expand.e-accordion .e-acrdn-item .e-acrdn-header, .no-expand.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, .no-expand.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.next-prev-sr {
    position: absolute;
    right: 73px;
    top: 20px;
    height: 32px;
}



    .next-prev-sr img {
        height: 20px;
        margin-right: 10px;
        margin-top: 5px;
    }

    .next-prev-sr .disabled {
        opacity: 0.1;
        cursor: not-allowed;
    }

.approval-data.main-project-approval {
    top: -9px;
}

    .approval-data.main-project-approval .main-approval {
        background: transparent;
    }

.e-grid.e-rtl .e-lastrowcell {
    border: none;
}

.content.pr-60.scroll {
    height: calc((100vh / var(--zoom)) - 147px) !important;
    overflow-y: auto;
    min-height: auto !important;
}

span.prj-desc.no-display-name {
    display: none;
}

span.prj-name.no-display-name {
    margin-top: 16px;
}

.approval-time-line {
    position: absolute;
    height: 10px;
    width: calc(100% - 30px);
    border-radius: 10px;
    background: #ebebeb;
    left: 15px;
    top: calc(50% - 5px);
    z-index: 1;
}

.approval-top-part {
    height: 40px;
    width: 100%;
    text-align: center;
}

    .approval-top-part img {
        display: none;
    }

.approval-bottom-part {
    height: auto;
    margin-top: 20px;
}



.approval-data.main-project-approval .approval-time-line {
    left: 0;
}

button.toolbar-button.toolbar-edit-btn.circle-edi.toolbar-button.toolbar-cancel-btn.reject.tagbtn.full {
    border: none;
}






.completed-activities-icon.has-steerco img.icons-remove {
    top: 30px;
}

.completed-activities-icon.has-steerco img.steerco-icon {
    top: 50px;
    position: absolute;
    height: 14px;
    text-align: center;
    right: 1px;
    left: 1px;
}

.status-report-activity .steerco-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    cursor: pointer;
}
.onhover .status-report-activity-flags {
    opacity: 0;
}
.onhover:hover .status-report-activity-flags {
    opacity: 1;
}
.rich-text p {
    font-family: 'InstrumentSans' !important;
    font-size: 14px !important;
}
.rich-text .text-content {
    overflow: hidden;
    padding: 20px;
    border: 1px solid #e3e3e3;
    border-radius: 0 0 12px 12px;
    overflow-y: auto;
}