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

:root {
    --zoom: 1;
    --vw: 1px;
    --s-50: calc(50 * var(--vw));
    --s-40: calc(40 * var(--vw));
    --s-30: calc(30 * var(--vw));
    --s-20: calc(20 * var(--vw));
    --s-19: calc(19 * var(--vw));
    --s-18: calc(18 * var(--vw));
    --s-16: calc(16 * var(--vw));
    --s-15: calc(15 * var(--vw));
    --s-14: calc(14 * var(--vw));
    --s-13: calc(13 * var(--vw));
    --s-12: calc(12 * var(--vw));
    --s-11: calc(11 * var(--vw));
    --s-10: calc(10 * var(--vw));
    --s-9: calc(9 * var(--vw));
    --s-8: calc(8 * var(--vw));
    --s-7: calc(7 * var(--vw));
    --s-6: calc(6 * var(--vw));
    --s-5: calc(5 * var(--vw));
    --s-4: calc(4 * var(--vw));
    --s-3: calc(3 * var(--vw));
    --s-2: calc(2 * var(--vw));
    --s-1: calc(1 * var(--vw));
    --floatl: left;
    --floatr: right;
    --bs-gutter-x: var(--s-20) !important;
    --new-card-border-radius: var(--s-3);
    --entity-color: 31, 120, 180;
    --vendor-color: 88, 115, 255;
    --new-profile-size: var(--s-40);
    --new-card-title-size: var(--s-16);
    --new-card-title-size: var(--s-16);
    --new-card-title-weight: 800;
    --new-card-gap: var(--s-20);
    --new-card-padding: var(--s-12);
    --none-color: 127, 127, 127;
    --private-sector-color: 47, 48, 104;
    --government-entity-color: 65, 148, 179;
    --startup-color: 251, 186, 33;
    --academia-and-research-color: 123, 94, 167;
    --international-organization-color: 26, 140, 110;
    --internal-color: 146, 208, 80;
    --border-default-color: #D5DDF0;
}
.s-w20-h20 {
    width: var(--s-20) !important;
    height: var(--s-20) !important;
}
.s-w30-h30 {
    width: var(--s-30)!important;
    height: var(--s-30)!important;
}
/* All browsers */
::placeholder {
    font-size: var(--s-14);
}

/* WebKit/Blink (Chrome, Safari, Edge) */
::-webkit-input-placeholder {
    font-size: var(--s-14);
}

/* Firefox 18- */
:-moz-placeholder {
    font-size: var(--s-14);
    opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder {
    font-size: var(--s-14);
    opacity: 1;
}

/* IE 10+ */
:-ms-input-placeholder {
    font-size: var(--s-14);
}

.form-control {
    font-size: var(--s-14);
}

.border-r-3 {
    border-radius: var(--new-card-border-radius) !important;
    border: 1px solid var(--border-default-color) !important;
}

.mb-16 {
    margin-bottom: var(--s-16);
}

.p-16 {
    padding: var(--s-16);
}

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

.card-body {
    padding: var(--s-20);
}

.body-scroll.no-header {
    height: calc((100vh / var(--zoom)));
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Thin.ttf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-ThinItalic.ttf');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-ExtraLight.ttf');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-ExtraLightItalic.ttf');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Light.ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Italic.ttf');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-MediumItalic.ttf');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-SemiBoldItalic.ttf');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-ExtraBoldItalic.ttf');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Black.ttf');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-BlackItalic.ttf');
    font-weight: 900;
    font-style: italic;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--primary-color) !important;
}

.menu-title h1 {
    color: #111111;
    font-size: var(--s-20);
    padding-left: 0;
    line-height: calc(68 * var(--vw));
    margin-bottom: 0;
    font-weight: 600;
    /*letter-spacing: 0;*/
    font-family: 'Inter';
}

b, strong {
    font-weight: bold;
}

.menu-title {
    float: var(--floatl);
}

/*Panel Sizes*/
.w513 {
    width: calc(513 * var(--vw));
}

.p40 {
    padding: var(--s-40);
}

.pb20 {
    padding-bottom: var(--s-20);
}

.pb0 {
    padding-bottom: 0;
}

.p12 {
    padding: var(--s-12);
}

.mt20 {
    margin-top: var(--s-20);
}

.p0 {
    padding: 0;
}

.pl5 {
    padding-left: var(--s-5);
}

.h183 {
    height: calc(183 * var(--vw));
}

.h231 {
    height: calc(231 * var(--vw));
}

.mb12 {
    margin-bottom: var(--s-12);
}

.mt8 {
    margin-top: var(--s-8);
}

.w340 {
    width: calc(340 * var(--vw));
    float: var(--floatl);
    margin-right: var(--s-20) !important;
}

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

.pl60 {
    padding-left: var(--s-40);
}

.h47 {
    height: calc(47 * var(--vw));
}

.h207 {
    height: calc(207 * var(--vw));
}

.h163 {
    height: calc(163 * var(--vw));
}

.h655 {
    height: calc(655 * var(--vw));
}

.mb40 {
    margin-bottom: var(--s-40) !important;
}

.mt95 {
    margin-top: calc(95 * var(--vw));
}

.gantt-margin {
    margin: calc(22 * var(--vw));
    padding: 0;
}

.pr60 {
    padding-right: var(--s-40) !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: var(--s-14);
    height: calc(32 * var(--vw));
    font-family: 'Inter';
    color: #111;
    font-size: var(--s-14) !important;
    font-weight: 500 !important;
}

/* 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: var(--s-50)
}

.e-dialog .e-dlg-content {
    padding: var(--s-20);
}

.e-dialog .e-footer-content {
    /*    padding: var(--s-20);*/
    border-radius: 0 0 calc(4 * var(--vw)) calc(4 * var(--vw));
    border-top: var(--s-1) solid #EAEAEA;
}

.e-popup.e-popup-open.e-dialog {
    border-radius: var(--s-3);
}

.e-dialog.main-dialog .e-dlg-content {
    padding: var(--s-20) calc(24 * var(--vw)) !important;
}

.e-dialog .e-dlg-header-content {
    border-radius: calc(4 * var(--vw)) calc(4 * var(--vw)) 0 0;
    border-radius: calc(4 * var(--vw)) calc(4 * var(--vw)) 0 0;
    border-bottom: var(--s-1) solid #EAEAEA;
    background: #FFF;
    padding: var(--s-20) var(--s-20) var(--s-10) var(--s-20);
}

element.style {
}

.e-dialog .e-footer-content .e-btn {
    margin-left: calc(6 * var(--vw));
    /*border-radius: var(--s-10);*/
    min-width: calc(75 * var(--vw));
    border-radius: var(--s-3) !important;
}

.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: var(--s-1) 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 var(--s-3) var(--s-1) calc(-2 * var(--vw)) rgba(0,0,0,.2), 0 calc(2 * var(--vw)) calc(2 * var(--vw)) 0 rgba(0,0,0,.14), 0 var(--s-1) var(--s-5) 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: var(--s-1) solid;
    border-radius: calc(2 * var(--vw));
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: Inter, "Roboto","Segoe UI","GeezaPro","DejaVu Serif","sans-serif","-apple-system","BlinkMacSystemFont";
    font-size: var(--s-14);
    font-weight: 500;
    justify-content: center;
    line-height: 1.143em;
    outline: none;
    padding: calc(6 * var(--vw)) var(--s-12) calc(4 * var(--vw));
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}

.e-control, .e-css {
    font-family: 'Inter';
    font-size: var(--s-12);
    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: var(--s-8) var(--s-16) var(--s-10) var(--s-8) !important;
    border-radius: 0 0 calc(3 * var(--vw)) calc(3 * var(--vw));
}

.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: 0;
    height: calc(38 * var(--vw));
    border-radius: calc(4 * var(--vw));
}

.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: calc(39 * var(--vw));
}

.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: var(--s-8) !important;
    border-radius: calc(2 * var(--vw)) !important;
    height: calc(23 * var(--vw));
    margin-top: var(--s-1);
    /* border-radius: calc(119 * var(--vw)) !important; */
    position: relative;
    width: calc(26 * var(--vw)) !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: var(--s-14);
    padding: 0 calc(4 * var(--vw));
}

.dialog-title {
    font-size: calc(28 * var(--vw));
    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 0 calc(1000 * var(--vw)) #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: 0;
}

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

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
    height: calc(6 * var(--vw));
    width: calc(6 * var(--vw));
}

*::-webkit-scrollbar-track {
    border-radius: calc(6 * var(--vw));
    background-color: transparent;
}

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

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

*::-webkit-scrollbar-thumb {
    border-radius: calc(6 * var(--vw));
    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: 'Inter','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: calc(117 * var(--vw)) !important;
    margin-top: calc(50% + calc(42 * var(--vw)));
}

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

.section-title {
    color: #353535;
    font-size: calc(48 * var(--vw));
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: calc(80 * var(--vw));
    text-align: left;
}

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

.section-sub-title {
    color: #353535;
    font-size: calc(28 * var(--vw));
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: calc(80 * var(--vw));
    text-align: center;
}

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

.btn-primary {
    color: var(--secondary-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    border-radius: var(--s-3) !important;
    height: calc(48 * var(--vw));
    font-size: var(--s-16);
    font-weight: 700;
    font-family: 'Inter';
    min-width: calc(150 * var(--vw));
}

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

.btn-border {
    border-color: #EAEAEA !important;
    border-radius: var(--s-5) !important;
    height: calc(56 * var(--vw));
    font-size: var(--s-14);
    font-weight: 500;
    font-family: 'Inter';
    line-height: var(--s-50);
    width: 100%;
    padding: 0;
}

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

a.main-logo {
    position: absolute;
    top: var(--s-20);
    right: var(--s-20);
}

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

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

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

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

h2.section-title.forgotpw {
    font-size: calc(24 * var(--vw)) !important;
    font-weight: 700 !important;
    color: #1A1A1A;
    margin-bottom: var(--s-8) !important;
    margin-top: calc(28 * var(--vw)) !important;
}

label.sub-section {
    max-width: calc(460 * var(--vw)) !important;
    font-size: calc(17 * var(--vw));
    font-weight: 400;
    margin-bottom: var(--s-40);
}

label.email-text {
    font-size: var(--s-12);
    font-weight: 400;
    color: #777;
    margin-bottom: calc(4 * var(--vw));
}

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

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

button#login-submit {
    font-weight: 700 !important;
    font-size: calc(18 * var(--vw)) !important;
}

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

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

    .sign-options:before {
        stroke-width: var(--s-1);
        stroke: #EAEAEA;
        width: var(--s-40);
        height: var(--s-10);
    }

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

label.form-label.pw {
    font-size: var(--s-12) !important;
    font-weight: 400 !important;
    color: #626476 !important;
    margin-top: var(--s-3) !important;
    margin-left: var(--s-12) !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(calc(7 * var(--vw))) translateY(calc(-13 * var(--vw)));
    background: #fff;
    opacity: 1;
    padding: var(--s-1) calc(7 * var(--vw));
    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 calc(00 * var(--vw)) 0 var(--s-40);
}

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

.invalid {
    outline: var(--s-1) solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 calc(-1 * var(--vw)) calc(2 * var(--vw)) 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: calc(278 * var(--vw));
    background: #FFF;
    float: var(--floatl);
    height: 100%;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    border-right: var(--s-1) solid #F0f0f0;
}

.page-wrapper {
    float: var(--floatl);
    width: calc(100% - calc(278 * var(--vw)));
    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: var(--s-20);
    width: calc(100% - var(--s-40));
    display: block;
}

    #side-menu .menu-top a img {
        height: calc(46 * var(--vw));
        display: block;
    }

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

ul {
}

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

    .menu-items ul > li a {
        font-size: calc(18 * var(--vw));
        height: calc(38 * var(--vw));
        display: block;
        padding: 0 var(--s-20);
        line-height: calc(38 * var(--vw));
        display: flex;
        gap: var(--s-10);
        align-items: center;
        corner-bottom-left-shape: scoop;
    }

        .menu-items ul > li a i {
            color: #111111;
        }

    .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: #FFF;
        /* font-size: var(--s-16); */
        font-weight: 500;
    }

.menu-items span.e-icons.e-chevron-down {
    float: var(--floatr);
    line-height: calc(38 * var(--vw));
    color: #111111;
    font-size: calc(13 * var(--vw));
    font-weight: 400;
    max-width: var(--s-10);
}

a.s-parent.selected > i, a.s-parent.selected > span {
    color: #000 !important;
}

.menu-items ul > li a:hover span.e-icons.e-chevron-down {
    color: #111111 !important;
}

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

.menu-items ul > li > ul li a {
    height: calc(38 * var(--vw));
    padding: 0;
    line-height: calc(38 * var(--vw));
}

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

#toggle_btn {
    color: #999;
    float: none;
    font-size: calc(26 * var(--vw));
    line-height: calc(79 * var(--vw));
    padding: 0;
}

.bar-icon {
    display: inline-block;
    width: calc(21 * var(--vw));
}

    .bar-icon span:nth-child(2) {
        width: calc(15 * var(--vw));
    }

    .bar-icon:hover span:nth-child(2) {
        width: calc(21 * var(--vw));
    }

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

.form-group {
    margin-bottom: var(--s-10) !important;
    margin-top: calc(24 * var(--vw));
}

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

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

.boxed {
    position: relative;
    background: white;
    border: var(--s-1) solid #c2c2c2;
    /* width: calc(300 * var(--vw)); */
    height: calc(52 * var(--vw));
    border-radius: calc(4 * var(--vw));
}

.boxed-title {
    background: inherit;
    padding: 0 var(--s-5);
    position: absolute;
    left: var(--s-5);
    top: calc(-10 * var(--vw));
    color: #666666;
}

/*Start Header*/
.main-content {
    padding: 0;
    width: 100%;
    padding-top: 0;
    height: 100%;
    overflow-y: hidden;
}

.page-header {
    height: calc(68 * var(--vw));
    padding: 0 var(--s-40) 0 0;
    background: #FFFF;
    line-height: calc(68 * var(--vw));
    border-bottom: var(--s-1) solid #F0F0F0;
}

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

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

    .top-header .notifications {
        margin-top: calc(23 * var(--vw));
    }

    .top-header .userprofile img {
        width: calc(28 * var(--vw));
        margin-right: var(--s-8);
        border-radius: 50%;
        height: calc(28 * var(--vw));
    }

.nav-link {
    display: block;
    padding: 0 calc(24 * var(--vw));
    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: 0;
    }

.page-title h3 {
    font-size: calc(24 * var(--vw));
    font-weight: 700;
    font-family: 'Inter';
}

/*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: calc(74 * var(--vw)) !important;
}

.card.main-card.add-card {
    border: calc(2 * var(--vw)) dashed #dfdede;
    height: calc(350 * var(--vw));
    height: calc(350 * var(--vw));
}

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

.page-title h3 {
    font-size: calc(17 * var(--vw));
    font-family: 'Inter';
    font-weight: 700;
    line-height: calc(68 * var(--vw));
}

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

.card.main-card {
    border: none;
    margin-bottom: var(--s-20);
}

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

.main-card-header img {
    width: calc(25 * var(--vw));
    margin-top: calc(15 * var(--vw));
    fill: #FFF;
    height: calc(26 * var(--vw));
}

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

.main-card-body {
    min-height: calc(250 * var(--vw));
    border: var(--s-1) solid #dbdbdb;
    border-top: 0;
}

.main-card-icon img {
    width: var(--s-50);
    margin: 0 auto;
    display: block;
    margin-top: calc(125 * var(--vw));
}

.upload-secotr-icon {
    border: none;
    margin-top: var(--s-3) !important;
    position: absolute;
}

.upload-stage-icon {
    border: var(--s-1) solid #949595;
    margin-top: calc(4 * var(--vw)) !important;
}

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

element.style {
}

.main-card-info img {
    width: calc(30 * var(--vw));
    margin-left: 0;
    height: var(--s-20);
}

.main-card-info {
    margin-top: var(--s-10);
    position: relative;
    padding: 0 var(--s-10);
    min-height: calc(30 * var(--vw));
}

    .main-card-info span {
        margin-left: var(--s-3);
    }

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

.icon-sec {
    margin-left: calc(100 * var(--vw));
    margin-top: calc(22 * var(--vw)) !important;
    color: #ed0202;
    cursor: pointer;
}

.select-users {
    margin-top: var(--s-20) !important;
    height: var(--s-50) !important;
}

.uploded-file {
    border: var(--s-1) solid #C3c3c3;
    margin-top: 0;
    height: calc(42 * var(--vw));
    border-radius: var(--s-3);
    padding: var(--s-12);
}

.users-icon {
    font-size: calc(22 * var(--vw));
}

span.u-title {
    margin-left: calc(6 * var(--vw));
    margin-top: var(--s-3) !important;
}

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

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

ul.users-list li {
    margin-left: calc(4 * var(--vw));
    /* margin: 0; */
    padding: 0;
}

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

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

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

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

.users-title {
    margin-left: calc(23 * var(--vw));
    margin-top: calc(11 * var(--vw));
    font-weight: 600;
}

.sctr-num {
    margin-top: var(--s-10);
    margin-left: calc(15 * var(--vw));
    font-size: calc(15 * var(--vw));
}

.file-uploaded-container.sector {
    margin-top: var(--s-3);
    border: var(--s-1) 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: calc(74 * var(--vw)) !important;
}

/* End Initiative*/
li.main-menu a img {
    width: calc(18 * var(--vw));
}

    li.main-menu a img.white {
    }

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

    .main-card-header-bottom-part h3 span img {
        position: relative;
        width: calc(25 * var(--vw));
        height: calc(17 * var(--vw));
        margin-top: var(--s-5);
        margin-left: calc(2 * var(--vw));
    }

/*User*/
.usercard {
    border: var(--s-1) solid #ededed;
    box-shadow: 0 var(--s-1) var(--s-1) 0 rgba(0, 0, 0, 0.2);
    margin-bottom: calc(30 * var(--vw));
    height: calc(120 * var(--vw));
}

.profile-view {
    position: relative;
}

.user-icon img {
    width: var(--s-50);
    margin: 0 auto;
    display: block;
    margin-top: var(--s-20);
}

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

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

.usercard .card-body {
    padding: calc(15 * var(--vw));
}

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

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

.profile-view .profile-img {
    width: calc(48 * var(--vw));
    height: calc(48 * var(--vw));
    border-radius: 50%;
    margin: 0;
    padding: 0;
    background: #f6f6f6;
}

.profile-view .username {
    color: #242424;
    font-size: var(--s-16);
    font-weight: 800;
}

}

.thumbnail-img {
    border-radius: calc(4 * var(--vw));
    /* Rounded border */
    padding: var(--s-5);
    /* Some padding */
    width: var(--s-50);
    /* Set a small width */
}

.row.thumb-del {
    align-items: center;
    margin-top: calc(-12 * var(--vw)) !important;
}

/*.e-checkbox-wrapper.e-wrapper.e-outline.create-account {
    position: absolute;
    top: calc(117 * var(--vw));
    left: calc(348 * var(--vw));
}

span.create-account-btn {
    margin-left: calc(60 * var(--vw));
    font-size: var(--s-14);
    cursor: pointer;
}*/
.browse-input {
    border: none;
    margin-top: var(--s-10) !important;
}

.offline-check {
    margin-top: var(--s-10);
}

/*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: calc(320 * var(--vw));
    /* background: #FFF; */
    /* border: calc(2 * var(--vw)) solid #e3e3e3; */
    border-radius: calc(3 * var(--vw));
    padding: var(--s-20);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .element-loader-content h1 {
        color: #3c3c3c;
        text-align: center;
        font-size: var(--s-12);
        padding-left: calc(7 * var(--vw));
        padding-top: var(--s-5);
    }

    .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: calc(64 * var(--vw));
}

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

.content.fullheight .element-parent {
    height: 100%;
    display: block;
}

/*End loader*/
/*sub header*/
.breadcrumb {
    /*height: calc(47 * var(--vw));*/
    height: calc(32 * var(--vw));
    margin-bottom: 0 !important;
    line-height: calc(32 * var(--vw));
}

.toolbar-container {
    position: relative;
    height: calc(32 * var(--vw));
    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: calc(43 * var(--vw)); */
    /* height: var(--s-12); */
    /* line-height: calc(177 * var(--vw)); */
    /* display: block; */
}

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

    .breadcrumb ul li {
        float: var(--floatl);
        padding-right: calc(6 * var(--vw));
    }

        .breadcrumb ul li a {
            font-size: var(--s-12);
            font-family: 'Inter';
            font-weight: 400;
            color: #777 !important;
            line-height: calc(24 * var(--vw));
        }

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

        .breadcrumb ul li:after {
            content: '/';
            padding: 0 0 0 var(--s-10);
            font-size: var(--s-12);
            line-height: calc(6 * var(--vw));
            color: #A8B6D9 !important;
        }

        .breadcrumb ul li img {
            height: calc(18 * var(--vw));
            line-height: var(--s-16);
        }

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

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

button.toolbar-button {
    /* padding: var(--s-12) var(--s-16); */
    font-size: var(--s-14);
    font-family: 'Inter';
    height: calc(32 * var(--vw));
    /* margin-left: var(--s-12); */
    font-weight: 500;
    /*border-radius: 50%;*/
    min-width: calc(36 * var(--vw));
    background: #FFF;
    border: var(--s-1) solid #00000000;
    opacity: 1;
    margin-left: var(--s-12);
    width: auto;
    min-width: calc(112 * var(--vw)) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-10);
}

    button.toolbar-button.toolbar-add-btn {
        height: calc(32 * var(--vw)) !important;
        border-radius: var(--s-3);
        width: auto;
        min-width: calc(48 * var(--vw));
        color: #FFF;
    }

    button.toolbar-button.laslastable {
        height: calc(48 * var(--vw)) !important;
        border-radius: 50% !important;
        width: calc(48 * var(--vw)) !important;
    }

.breadcrumb ul li a.active {
    color: var(--secondary-color) !important;
    font-family: 'Inter';
    font-weight: 500;
    font-size: var(--s-12);
}

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

span.toolbar-icon {
    width: var(--s-20);
}

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

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

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

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

        .child-toolbar .search .e-outline {
            height: calc(48 * var(--vw));
        }

            .child-toolbar .search .e-outline input {
                line-height: calc(47 * var(--vw));
                height: calc(47 * var(--vw));
            }

.checkbox-view-mode .icon img {
    width: var(--s-20);
    margin: 0;
    padding: 0;
    line-height: var(--s-40);
}

.label-view-mode.checkbox-view-mode {
    height: calc(24 * var(--vw)) !important;
}

.label-view-mode .icon {
    line-height: var(--s-40);
    display: inline-block;
}

.check-box-title {
    display: inline;
    color: #1A1A1A;
    font-family: Inter;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-left: calc(6 * var(--vw));
}

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

.label-view-mode .text {
    display: block;
    margin-top: calc(4 * var(--vw));
    color: #1A1A1A;
    font-family: Inter;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.label-view-mode img {
    margin-right: var(--s-8);
}

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

/*End sub header*/
/*Card*/
.card {
    border-radius: var(--s-3) !important;
    border: none;
    margin-bottom: var(--s-20);
    margin-top: 0;
    background-color: #FFF;
}

.card-body h4 {
    font-size: calc(17 * var(--vw));
    /*letter-spacing: var(--s-1);*/
    font-family: 'Inter';
    font-weight: 400;
}

.card-header h3 {
    font-size: calc(18 * var(--vw));
    margin: 0;
    font-weight: 500;
    line-height: calc(31 * var(--vw));
}

.card-header {
    background-color: white;
    height: calc(48 * var(--vw));
    position: relative;
    border-radius: calc(3 * var(--vw)) calc(3 * var(--vw)) 0 0 !important;
    border: none;
    padding: var(--s-20) var(--s-20) 0 var(--s-20);
}

.pr-60 {
    padding-right: var(--s-40) !important;
}

/*End Card*/
/*company setting */
.upload-input {
    height: calc(49 * var(--vw)) !important;
}

    .upload-input.e-upload .e-file-select-wrap, .e-bigger.e-small .e-upload .e-file-select-wrap {
        padding: calc(9 * var(--vw)) 0 var(--s-16) var(--s-12) !important;
    }

.e-file-select-wrap button {
    height: calc(29 * var(--vw)) !important;
}

.e-numeric.e-outline.e-input-group.e-control-container.e-control-wrapper.e-float-input.text-input {
    margin-top: calc(25 * var(--vw));
}

.card.activit-log {
    margin-bottom: var(--s-14);
    border-left: calc(9 * var(--vw)) solid;
}

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

.card-body.company-style {
    padding: var(--s-20) calc(15 * var(--vw));
}

.lebel-without-border {
    color: #1A1A1A !important;
    font-family: Inter;
    font-size: var(--s-12) !important;
    font-weight: 400;
}

.middle-part-container {
    border-top: var(--s-1) solid #CFCFD2;
    margin-top: var(--s-1);
    padding-top: var(--s-20);
    height: calc(120 * var(--vw));
}

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

.bottom-part-container {
    border-top: var(--s-1) solid #CFCFD2;
    margin-top: calc(7 * var(--vw));
    padding-top: calc(13 * var(--vw));
}

.file-uploaded-container {
    border-radius: calc(4 * var(--vw));
    border: var(--s-1) solid #EAEAEA;
    background: #FFF;
    min-height: calc(41 * var(--vw));
    padding: calc(13 * var(--vw)) var(--s-12) var(--s-12) var(--s-12);
    position: relative;
    height: calc(51 * var(--vw));
}

.icon-uploaded span {
    margin-left: calc(4 * var(--vw));
    margin-right: var(--s-12);
    color: #000;
    font-family: Inter;
    font-size: var(--s-12);
}

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

.icon-uploaded img {
    width: var(--s-16) !important;
    height: var(--s-16) !important;
}

.file-size {
    color: #777 !important;
    font-family: Inter !important;
    font-size: var(--s-12) !important;
    font-weight: 400 !important;
}

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

.main-uploader-logo {
    display: block;
    margin-top: var(--s-16) !important;
    height: calc(70 * var(--vw));
    border: var(--s-1) dashed #8092DA;
    background: #F2F4FC;
    padding: var(--s-16) calc(27 * var(--vw)) var(--s-16) calc(24 * var(--vw));
}

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

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

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

span.click-edit {
    color: #1A1A1A !important;
    font-family: Inter;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.click-edit span {
    color: #1A1A1A;
    font-family: Inter;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.top-part-container {
    min-height: calc(389 * var(--vw));
}

.top-part-container {
    min-height: calc(389 * var(--vw));
}

.click-edit span {
    color: #1A1A1A;
    font-family: Inter;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

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

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

.main-drop-area-wrap .upload-text {
    font-family: Inter;
    font-size: var(--s-12);
    text-align: center;
    font-weight: 400;
    margin-left: var(--s-16);
}

.main-drop-area-wrap .upload-small-text {
    color: #707070;
    font-size: var(--s-12);
    margin-left: calc(25 * var(--vw));
    display: block;
    margin-left: calc(39 * var(--vw));
}

.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: calc(31 * var(--vw));
}

/*Stages */
h3.stage-name {
    cursor: pointer;
}

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

.main-info-description {
    min-height: calc(30 * var(--vw));
}

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

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

.main-info-title {
    height: calc(31 * var(--vw));
}

.main-info-description span {
    color: #747476;
    font-family: Inter;
    font-size: var(--s-14);
    font-weight: 400;
    margin-top: var(--s-12);
}

.main-info-icon img {
    width: calc(28 * var(--vw));
    height: calc(28 * var(--vw));
}

.budget-code {
    margin-top: calc(9 * var(--vw)) !important;
}

.file-uploaded-container.normal-input {
    /* height: calc(46 * var(--vw)) !important;*/
}

.upload-stage-template-icon {
    margin-top: var(--s-12) !important;
}

.e-upload.e-control-wrapper.e-control-container.e-lib.e-keyboard.normal-input.upload-stage-icon button {
    height: calc(19 * var(--vw)) !important;
    padding: 0 calc(15 * var(--vw));
    line-height: var(--s-20);
    font-size: var(--s-12);
}

.e-upload.e-control-wrapper.e-control-container.e-lib.e-keyboard.upload-stage-template-icon button {
    margin-top: calc(13 * var(--vw)) !important;
    height: calc(26 * var(--vw)) !important;
}

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

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

.main-drop-area-wrap .text.wiz {
    margin-left: var(--s-20) !important;
    float: none !important;
}

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

.pro-container {
    padding: 0 var(--s-20);
}

label.approv-title {
    font-size: calc(17 * var(--vw));
    font-weight: 700;
    margin-top: var(--s-12);
}

img.edit-project-icon {
    width: var(--s-20);
    margin-right: var(--s-8);
}

.card-wizard {
    border: var(--s-1) solid #EAEAEA;
}

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

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

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

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

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

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

.pro-st-end-date {
    display: block;
    margin-top: calc(2 * var(--vw));
}

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

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

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

.st-init-users {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    margin: 0;
    background: #E8E8E8;
    margin-right: calc(11 * var(--vw));
    background-size: contain;
    cursor: pointer;
}

    .st-init-users h2 {
        text-align: center;
        line-height: calc(33 * var(--vw));
        font-size: var(--s-12);
        font-weight: 600;
        color: #000;
        font-weight: 700;
    }

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

.structure-users-list {
    height: calc(28 * var(--vw));
    display: block;
}

.st-init-users span {
    text-align: center;
    line-height: calc(28 * var(--vw));
    font-size: var(--s-12);
    font-weight: 600;
    color: #FFF;
}

.structure-pr-header {
    display: block;
    height: var(--s-16);
    margin-bottom: var(--s-20);
}

.card-body.structure-project-card {
    flex: 1 1 auto;
    padding: var(--s-20) var(--s-20) !important;
}

.pro-stucture-desc span {
    font: normal normal normal var(--s-14)/calc(17 * var(--vw)) Inter;
    color: #888888;
    opacity: 1;
    font-size: var(--s-14);
    line-height: calc(17 * var(--vw));
    display: block;
}

.pro-stucture-general-details {
    display: block;
    margin-bottom: var(--s-10);
}

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: var(--s-1) solid #949595 !important;
    border-radius: calc(4 * var(--vw)) !important;
    padding: calc(6 * var(--vw)) !important;
    margin-top: calc(4 * var(--vw)) !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: var(--s-1) solid #949595 !important;
    border-radius: calc(4 * var(--vw)) !important;
    padding: calc(6 * var(--vw)) !important;
    margin-top: calc(4 * var(--vw)) !important;
    margin-bottom: calc(4 * var(--vw)) !important;
    border: var(--s-1) solid #E7E7E7 !important;
    border-radius: var(--s-12) !important;
}

/*end project stage*/
/*project stage view*/
.timeline-milestone-container {
    display: block;
    position: relative;
    float: var(--floatl);
    margin: 0;
    padding: var(--s-10);
    border-left: var(--s-1) solid #e3e3e3;
    padding: 0
}

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

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

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

.bottom .element-title {
    margin-top: calc(15 * var(--vw));
    font-size: var(--s-10);
    position: absolute;
    bottom: calc(-5 * var(--vw));
    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: calc(204 * var(--vw));
    overflow-y: hidden;
    white-space: nowrap;
}

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

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

.activity-date {
    margin-top: var(--s-16);
    color: #9e9e9ef5;
    font-size: var(--s-10);
}

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

    .progress-updates-container.st-pro {
        margin-top: calc(24 * var(--vw));
    }

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

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

span.progress-updates-title {
    color: #1A1A1A;
    font-family: Inter;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* calc(19.6 * var(--vw)) */
    padding-left: var(--s-16);
}

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

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

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

.activities-desc-card {
    /* calc(19.6 * var(--vw)) */
    margin-bottom: var(--s-10);
    font-size: var(--s-12);
    color: #2B4485;
    line-hight: calc(18 * var(--vw));
    align-items: self-start;
}

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

table.table.table-striped.table-bordered.table-normal {
    border: var(--s-1) solid #CCD3F1;
}

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

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

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

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

.approve-btns {
    position: absolute;
    right: 0;
    top: 97%;
    left: calc(52 * var(--vw));
    z-index: 999;
}

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

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

.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 var(--s-12)/calc(19 * var(--vw)) Inter;
    /*letter-spacing: 0;*/
    color: #B8B8B8;
    text-transform: capitalize;
    opacity: 1;
    cursor: pointer;
}

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

.str.dropdown span div {
    padding: var(--s-8) calc(15 * var(--vw));
}

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

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

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

/*end*/
/*project stage page*/
img.add-user-icon {
    height: var(--s-20);
}

.add-new-user {
    border: var(--s-1) solid #c2c2c2;
    position: absolute;
    padding: calc(7 * var(--vw));
    right: calc(550 * var(--vw));
    border-radius: calc(2 * var(--vw));
    height: var(--s-40);
    text-align: center;
    line-height: calc(24 * var(--vw));
    cursor: pointer;
}

.add-new-vendor {
    border: var(--s-1) solid #c2c2c2;
    position: absolute;
    padding: calc(7 * var(--vw));
    left: calc(706 * var(--vw));
    border-radius: calc(2 * var(--vw));
    height: var(--s-40);
    text-align: center;
    line-height: calc(24 * var(--vw));
    cursor: pointer;
}

.add-new-pm {
    border: var(--s-1) solid #c2c2c2;
    position: absolute;
    padding: calc(7 * var(--vw));
    right: calc(550 * var(--vw));
    border-radius: calc(2 * var(--vw));
    height: var(--s-40);
    text-align: center;
    line-height: calc(24 * var(--vw));
    cursor: pointer;
}

.act-sub-title {
    margin-top: calc(19 * var(--vw));
}

span.risk-title {
    font-size: var(--s-20);
}

.risk-sub-title {
    margin-bottom: calc(11 * var(--vw));
    margin-top: calc(17 * var(--vw));
}

.activities-container {
    border: var(--s-1) solid #9e9e9e33;
    height: calc(58 * var(--vw));
    margin-top: var(--s-12);
    border-radius: var(--s-5);
    width: 94%;
    margin-left: calc(17 * var(--vw));
}

.activities-desc {
    padding: var(--s-8);
}

.project-header-title {
    cursor: pointer;
    display: block;
    text-align: left;
    font: normal normal 700 calc(17 * var(--vw))/calc(22 * var(--vw)) Inter;
    letter-spacing: 0;
    color: #1A1A1A;
    text-transform: capitalize;
    opacity: 1;
    margin-bottom: calc(2 * var(--vw));
    font-weight: 700;
}

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

.project-img-container {
    float: var(--floatr);
    width: var(--s-20) !important;
    height: var(--s-20) !important;
    margin-right: var(--s-5);
    margin-top: calc(7 * var(--vw));
    cursor: pointer;
}

/*end */
/* projct stage view*/
.today {
    /* font-size: calc(19 * var(--vw)); */
    font-weight: bold;
}

.vertical-line {
    border-left: calc(2 * var(--vw)) solid #EBEBEB;
    height: 76%;
    position: absolute;
    left: 50%;
    width: var(--s-3);
    margin-left: var(--s-1);
    top: calc(71 * var(--vw));
}

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

    .add.btn-primary span {
        line-height: calc(43 * var(--vw));
        /* margin-left: var(--s-50); */
    }

span.e-icons.e-arrow-right.add-icon {
    margin-left: calc(7 * var(--vw));
}

.description {
    height: calc(133 * var(--vw)) !important;
}

.no-completed-activities {
    font-size: var(--s-14);
    color: #bdbdbd;
    margin-left: calc(18 * var(--vw));
    margin-top: var(--s-5);
}

label.completed-activities {
    font-size: var(--s-14);
    font-weight: 600;
    margin-left: calc(9 * var(--vw));
}

/*.completed-activities-container {
    border: var(--s-1) solid #9e9e9e26;
    width: calc(340 * var(--vw)) !important;
    height: calc(86 * var(--vw));*/
/* position: absolute; */
/*border-radius: var(--s-20);
    margin-left: calc(19 * var(--vw));
    margin-top: var(--s-12);
    top: calc(13 * var(--vw));
    left: calc(90 * var(--vw));
}*/
/*.completed-activities-desc {
    padding: calc(9 * var(--vw));
}*/
span.center-part {
    text-align: center;
    margin-left: calc(162 * var(--vw));
    font-size: var(--s-14);
    font-family: 'Inter';
}

span.main-dialog-title {
    font-size: var(--s-20);
    font-family: 'Inter';
    font-weight: 600;
}

span.step-center-part {
    font-size: var(--s-14);
    color: #9e9e9e;
    margin-left: calc(6 * var(--vw));
}

.add-new.btn-primary span.add-new-btn {
    margin-top: calc(19 * var(--vw)) !important;
    line-height: calc(47 * var(--vw));
}

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

.right-part.btn-primary {
    line-height: calc(30 * var(--vw));
    /*width: calc(191 * var(--vw));*/
    padding: var(--s-8) var(--s-12);
}

    .right-part.btn-primary img {
        /*margin-left: calc(22 * var(--vw));*/
    }

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

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

.risk-grid-title {
    margin: var(--s-20) 0 var(--s-16) 0;
}

.gantt-grid-title {
    margin: 0 0 var(--s-10) 0;
    padding-left: 0;
}

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

.add-new-risk {
    font-size: var(--s-20);
    font-weight: 600;
    font-family: 'Inter'
}

label.no-added-activities {
    color: #bdbdbd;
    margin-left: calc(37 * var(--vw));
}

span.activity-title {
    font-size: var(--s-20);
}

.row.payment {
    margin: 0;
    border-bottom: var(--s-1) solid #e3e3e3;
    padding-bottom: var(--s-10);
}

label.payment-title {
    margin-top: calc(25 * var(--vw));
}

.row-btns {
    margin: calc(15 * var(--vw)) 0 0 0;
}

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

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

.e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover {
    box-shadow: none !important;
}

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

.card-body.np.v {
    min-height: calc(130 * var(--vw));
}

.new-pm {
    left: calc(1000 * var(--vw));
}

.new-vendor {
    left: calc(710 * var(--vw));
}

.e-outline.address.e-input-group.e-control-container.e-control-wrapper.e-float-input {
    margin-top: var(--s-16);
}

.add-user-container {
    border: var(--s-1) solid #c2c2c2;
    margin-top: var(--s-16);
    border-radius: var(--s-12);
}

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

.card-header.ve img {
    width: calc(30 * var(--vw));
}

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

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

.prj-card-body {
    min-height: calc(224 * var(--vw));
    border: var(--s-1) solid #EAEAEA;
    border-radius: calc(4 * var(--vw));
    margin-top: calc(25 * var(--vw));
}

.prj-card-info {
    max-height: calc(30 * var(--vw));
    margin-top: var(--s-10);
}

.prj-card-date {
    display: block;
    margin: var(--s-16) 0 0 0;
}

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

    .prj-card-date span {
        margin-left: var(--s-5);
        font-size: var(--s-14);
        color: #777;
    }

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

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

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

a.phn-btn img, a.email-btn img {
    width: calc(18 * var(--vw));
}

a.phn-btn img {
    width: calc(18 * var(--vw));
    font: icon;
}

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

.prj-title {
    margin: 0;
    padding: 0;
    background: #F2F4FC;
    height: calc(56 * var(--vw));
}

.prj-card-body h5 img {
    position: absolute;
    top: calc(15 * var(--vw));
    right: 0;
}

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

span.btn-bckgnd:last-child {
    margin-right: 0;
}

/* End Project Card*/
.card-header img {
    float: var(--floatl);
    /* width: calc(30 * var(--vw)); */
    margin-top: 0;
    margin-right: var(--s-16);
}

.stage-bool-item {
    display: block;
    width: 100%;
    padding-bottom: var(--s-10);
    margin-top: var(--s-10);
    border-bottom: var(--s-1) solid #e3e3e3;
    height: calc(33 * var(--vw));
}

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

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

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

.attendance-type.selected {
    border: none;
    box-shadow: none;
    border-radius: calc(22 * var(--vw));
}

.attendance-type {
    background-color: white;
    border: var(--s-1) solid #e3e3e3;
    border-radius: calc(4 * var(--vw));
    margin: 0;
    padding: var(--s-10) calc(15 * var(--vw));
    height: calc(200 * var(--vw));
}

    .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: calc(35 * var(--vw));
    padding-top: 2rem;
}

    .attendance-type h4 img {
        width: calc(24 * var(--vw));
        position: absolute;
        right: calc(-7 * var(--vw));
        top: calc(-4 * var(--vw));
    }

.form-section-title {
    background: #F2F4FC;
    padding: calc(7 * var(--vw)) var(--s-20);
    height: var(--s-40);
    border-radius: calc(4 * var(--vw));
    margin-top: calc(18 * var(--vw));
    border: var(--s-1) solid #e3e3e3;
    box-shadow: 0 var(--s-1) var(--s-8) #e3e3e3;
}

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

.send-chat {
    height: calc(75 * var(--vw));
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-top: 0;
    width: calc(960 * var(--vw));
    margin: 0 auto;
}

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

.chat-box {
    height: calc(135 * var(--vw));
    background: #eeeeee !important;
}

    .chat-box textarea {
        height: calc(120 * var(--vw)) !important;
        background: transparent !important;
    }

a.send-chat {
}

a.send-chat-btn {
}

    a.send-chat-btn i {
        margin-top: var(--s-5);
        font-size: calc(30 * var(--vw));
    }

.relative {
    position: relative;
}

a.send-chat {
}

a.send-chat-btn {
    position: absolute;
    bottom: calc(23 * var(--vw));
    right: var(--s-12);
    width: var(--s-20);
    height: var(--s-20);
    text-align: center;
}

    a.send-chat-btn i {
        margin-top: var(--s-3);
        font-size: calc(30 * var(--vw));
        background: #fff;
        border: var(--s-1) 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: var(--s-1) solid #e3e3e3;
    height: 100%;
    padding: var(--s-10);
}

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

.chat-text {
    background: #FFF;
    /* border-bottom: var(--s-1) solid #EAEAEA; */
    display: block;
    height: auto;
    border-radius: calc(3 * var(--vw));
    padding: calc(15 * var(--vw)) calc(57 * var(--vw)) calc(15 * var(--vw)) calc(22 * var(--vw));
    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: calc(31 * var(--vw));
            height: calc(21 * var(--vw));
            position: absolute;
            left: calc(13 * var(--vw));
            top: calc(15 * var(--vw));
            background-position: center;
            background-repeat: no-repeat;
        }

.loading-chat {
    display: inline-block;
    width: calc(200 * var(--vw));
    height: var(--s-40);
    clear: both;
    position: relative;
    background: #FFF;
    border-radius: calc(22 * var(--vw));
    padding: calc(19 * var(--vw)) calc(22 * var(--vw)) calc(15 * var(--vw)) calc(57 * var(--vw));
    height: var(--s-50);
}

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

    .loading-chat .active-dot {
        background: #B9B9B9 !important;
    }

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

label.add-user-container-tiltle {
    font-size: calc(18 * var(--vw));
    margin-top: var(--s-8);
    font-weight: 800;
}

.add-user-container-btns {
    margin-bottom: var(--s-14);
}

.main-icon img {
    width: var(--s-20);
    height: var(--s-20);
    padding: 0;
    margin: var(--s-5) var(--s-3);
}

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

span.btn-save-vuser {
    font-size: var(--s-16);
    background-color: black;
    border: var(--s-1) solid;
    border-radius: calc(6 * var(--vw));
    box-shadow: rgba(27, 31, 35, 0.04) 0 var(--s-1) 0, rgba(255, 255, 255, 0.25) 0 var(--s-1) 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: var(--s-14);
    font-weight: 500;
    padding: calc(6 * var(--vw)) var(--s-16);
    position: relative;
    margin-top: calc(11 * var(--vw));
}

.btn-undo {
    font-size: calc(15 * var(--vw));
    font-weight: 800;
    text-decoration: underline;
    margin-right: calc(13 * var(--vw));
    cursor: pointer;
}

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

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

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

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

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

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

        .multi-input .e-multi-select-wrapper span.e-multi-searcher {
            color: red !important;
            margin-top: calc(-14 * var(--vw)) !important;
        }

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

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

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

.small a {
    font-size: var(--s-12);
}

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

.wizard-body {
    /* height: calc(582 * var(--vw)); */
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
    min-height: calc(100% - calc(113 * var(--vw)));
}

/* 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: var(--s-40);
    background-color: #FFF;
    box-shadow: none;
    border-color: var(--secondary-color);
    border-radius: calc(4 * var(--vw));
    color: var(--secondary-color);
    font-size: calc(11 * var(--vw));
    line-height: calc(18 * var(--vw));
    font-weight: 500;
}

.e-upload.full {
    height: calc(71 * var(--vw));
}

#Gantt {
    padding: 0;
}

.sub-title {
    margin-top: calc(30 * var(--vw));
    border-bottom: var(--s-1) solid #e3e3e3;
}

.row.payment label {
    font-size: calc(15 * var(--vw));
    font-weight: 400;
}

.e-tab .e-tab-header .e-toolbar-item {
    background: inherit;
    border: none;
    border-bottom: var(--s-1) solid transparent;
}

.mini-menu .sidebar {
    width: calc(56 * var(--vw)) !important;
}

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

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

.mini-menu #side-menu .menu-top a {
    margin: var(--s-40) calc(13 * var(--vw));
}

.menu-top {
    overflow: hidden;
    height: auto;
    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: 0 0 0 var(--s-40);
    /*height: calc(77 * var(--vw));*/
    display: block;
    clear: both;
    margin-bottom: var(--s-20);
    margin-top: calc(32 * var(--vw));
    /* float: var(--floatl); */
}

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

.card-np-title > .card-header, .card-sep > .card-header {
    background: #FFF;
    height: calc(48 * var(--vw));
    margin-bottom: var(--s-12);
    box-shadow: none;
    border-radius: calc(22 * var(--vw)) !important;
    border: none;
    box-shadow: none;
}

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

.card-header h5 {
    font-size: calc(17 * var(--vw));
    font-weight: 700;
    padding-bottom: 0;
    margin-bottom: 0;
    line-height: calc(31 * var(--vw));
}

.row.toggle-card .form-group {
    margin-top: 0;
    margin-bottom: var(--s-20) !important;
}

.attendance-type {
    border: none;
    box-shadow: none;
    border-radius: calc(22 * var(--vw));
}

.form-group:first-child {
    margin-top: calc(24 * var(--vw));
}

.side-content .card {
    /* margin-right: var(--s-20); */
}

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

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

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

.filter-l {
    float: var(--floatl);
    width: auto;
    position: relative;
    height: calc(32 * var(--vw));
    display: flex;
    align-items: center;
}

.filter-r {
    float: var(--floatr);
    width: auto;
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
}

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

.filter-row {
    padding: 0 0 0 var(--s-40);
    margin-bottom: var(--s-20);
    height: calc(32 * var(--vw));
    position: relative;
}

.filter-container {
    width: 100%;
    height: calc(42 * var(--vw));
    position: relative;
}

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

.toolbar-container.wi.with-breadcrumbs.pr-60 .toolbar {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.filter-row .e-filter {
    height: calc(32 * var(--vw));
    width: calc(32 * var(--vw));
    background: white !important;
    box-shadow: 0 var(--s-1) var(--s-1) #f9f9f9 !important;
    border-color: #EAEAEA !important;
    margin-right: 0;
    border-radius: var(--s-3);
}

    .filter-row .e-filter span {
        font-size: var(--s-20);
        /*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: calc(32 * var(--vw)) !important;
    border-radius: var(--s-3) !important;
    font-family: 'Inter' !important;
    color: #888 !important;
}

    .filter-row .e-outline input {
        min-height: calc(30 * var(--vw)) !important;
    }

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

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

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

.filter-sort {
    min-width: calc(187 * var(--vw)) !important;
    width: calc(187 * var(--vw)) !important;
    margin-right: calc(15 * var(--vw));
}

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

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

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

    span.card-header-icon img {
        height: calc(21 * var(--vw));
        width: auto;
        margin-top: var(--s-1);
    }

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

.card-project {
    height: calc(371 * var(--vw));
}

.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: var(--s-12); */
    /* height: calc(27 * var(--vw)); */
    text-align: left;
    font: normal normal normal var(--s-10)/calc(17 * var(--vw)) Inter;
    /*letter-spacing: 0;*/
    color: #888888;
    text-transform: capitalize;
    width: auto;
    font-size: var(--s-10);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - calc(80 * var(--vw)));
}

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

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

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

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

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

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

.e-progress-bar {
    /* width: 100%; */
    /* padding: 0 var(--s-8); */
}

.project-current-progress img {
    width: var(--s-10);
}

.e-chip {
    border: var(--s-1) solid var(--secondary-color) !important;
    background-color: #fff !important;
    /* color: var(--secondary-color) !important; */
    border-radius: var(--s-10) !important;
    height: calc(22 * var(--vw)) !important;
    line-height: calc(22 * var(--vw)) !important;
    font-size: var(--s-12) !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: calc(520 * var(--vw)) !important;
    !i;
    !;
}

.filter-1 {
    max-width: calc(187 * var(--vw)) !important;
}

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

h5.stage-name {
    cursor: pointer;
}

/*region Wizard*/
.elite-wizard .wizard-header {
    height: calc(32 * var(--vw));
    overflow: hidden;
    margin-bottom: calc(24 * var(--vw)) !important;
    margin: 0 auto;
    display: block;
    text-align: center;
}

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

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

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

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

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

.elite-wizard .wizard-header .wizard-step-header.active-tab {
    border: var(--s-1) 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: calc(360 * var(--vw));
}

    .card.upload-wizard .main-uploader {
        display: block;
        width: calc(549 * var(--vw));
        margin: calc(77 * var(--vw)) auto;
        height: calc(205 * var(--vw));
        border: var(--s-1) dashed #8092DA;
        background: #F2F4FC;
    }

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

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

.card.upload-wizard .main-uploader .main-drop-area-wrap img {
    margin-left: calc(242 * var(--vw)) !important;
    margin-top: var(--s-40);
    width: calc(60 * var(--vw));
    height: calc(60 * var(--vw));
}

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

.form-group.main-uploader .main-drop-area-wrap img {
    margin-left: var(--s-20) !important;
    margin-top: calc(21 * var(--vw));
    width: var(--s-40);
    height: var(--s-40);
    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: var(--s-12);
    text-align: center;
    margin-top: var(--s-8);
    margin-left: var(--s-16);
    float: var(--floatl);
}

.elite-wizard .wizard-header .wizard-step-header.finished-tab {
    border: var(--s-1) solid #49B136;
}

    .elite-wizard .wizard-header .wizard-step-header.finished-tab .wizard-step-index {
        background: #49B136;
        border: var(--s-1) 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: calc(23 * var(--vw)) !important;
    font-size: calc(13 * var(--vw));
}

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

.toolbar-item.toolbar-wizard-btn button {
    background: transparent;
    border: none;
    height: var(--s-20);
    border-bottom: var(--s-1) 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: var(--s-12);
    }

/*End Region*/
.normal-input {
    border: var(--s-1) solid #E7E7E7 !important;
    border-radius: var(--s-12) !important;
    padding: var(--s-8) var(--s-12);
    box-shadow: none;
    margin-top: calc(4 * var(--vw));
}

    .normal-input input {
        padding: 0 !important;
        margin: 0 !important;
        /* background: #ebe6e600 !important; */
        height: var(--s-20) !important;
        color: #111111 !important;
        font-size: var(--s-14) !important;
        font-weight: 500 !important;
    }

        .normal-input input::placeholder {
            color: #949595 !important;
            font-size: var(--s-14) !important;
            font-weight: 400 !important;
        }

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

    .normal-input.with-icon {
        max-width: calc(100% - var(--s-50)) !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !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: var(--s-1) solid #949595 !important;
    border-radius: calc(4 * var(--vw)) !important;
    box-shadow: 0 calc(2 * var(--vw)) calc(4 * var(--vw)) 0 rgba(26, 26, 26, 0.05);
    margin-top: calc(11 * var(--vw));
    height: calc(43 * var(--vw));
    display: block;
    width: calc(43 * var(--vw));
    height: calc(33 * var(--vw));
    margin-left: calc(59 * var(--vw)) !important;
}

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

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

.form-group.color-input {
    margin-top: calc(25 * var(--vw)) !important;
}

.normal-input-color span.e-btn-icon.e-icons.e-caret {
    font-size: var(--s-10) !important;
    margin-left: calc(19 * var(--vw)) !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: calc(-12 * var(--vw)) !important;
}

.e-file-select-wrap {
    margin-top: calc(-20 * var(--vw)) !important;
}

.form-group label {
    font-size: var(--s-12);
    color: #777;
    font-weight: 400;
    line-height: calc(18 * var(--vw));
    margin-bottom: calc(4 * var(--vw));
}

span.dialog-header {
    font-family: Inter;
    font-size: calc(17 * var(--vw));
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}

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

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

/* Status-update View Design Start*/
.updProgress .e-dlg-header {
    width: auto;
    /*border-bottom: var(--s-1) solid #EAEAEA;*/
}

.wizard-header.progressupdate {
    padding-left: var(--s-20);
    margin-bottom: 0 !important;
}

    .wizard-header.progressupdate .wizard-step-header {
        width: auto;
        min-width: calc(174 * var(--vw));
    }

a.btn-primary.save {
    color: #4E4009 !important;
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 600;
    text-align: center;
    padding: var(--s-12);
    border-radius: calc(4 * var(--vw));
}

.updProgress .e-footer-content {
    border-top: var(--s-1) solid #EAEAEA;
    padding: var(--s-12) calc(24 * var(--vw));
}

label.title-activity {
    color: #777777;
    font-family: 'Inter';
    font-size: var(--s-12);
    font-weight: 400;
    margin-bottom: calc(4 * var(--vw));
}

span.e-outline.descriptionText.e-input-group.e-control-container.e-control-wrapper {
    width: calc(422 * var(--vw));
    padding: 0 0 0 calc(2 * var(--vw));
    color: #949595;
    font-family: 'Inter';
    font-size: var(--s-14);
    font-weight: 400;
}

.descriptionText {
    height: calc(100 * var(--vw)) !important;
    width: 100% !important;
}

.btn-primary.add {
    margin: var(--s-16) var(--s-5) 0 0;
    min-width: calc(70 * var(--vw)) !important;
    height: calc(33 * var(--vw));
    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: calc(30 * var(--vw));
    font-size: var(--s-12);
    font-weight: 500;
    padding: 0 var(--s-3) 0 var(--s-5);
}

label.activity-right-title {
    font-size: calc(17 * var(--vw));
    font-weight: 700;
    font-family: 'Inter';
    margin-left: var(--s-12);
    width: 100% !important;
    margin: 0 !important;
    padding-bottom: var(--s-8);
}

img.progress-icons.addb {
    height: var(--s-20);
    margin-top: calc(18 * var(--vw));
}

img.progress-icons.notes {
    height: calc(60 * var(--vw));
    margin-left: calc(23 * var(--vw));
}

img.progress-icons.logo {
    height: var(--s-20);
    margin: var(--s-40) 0 0 var(--s-40)
}

img.progress-icons-toparrow {
    height: calc(80 * var(--vw));
    margin: 0 0 calc(35 * var(--vw)) 0;
}

img.progress-icons-botarrow {
    height: calc(30 * var(--vw));
    margin: var(--s-20) 0 0 calc(25 * var(--vw));
}

.row.icons {
    padding: calc(120 * var(--vw)) 0 calc(140 * var(--vw)) var(--s-10);
    display: flex;
    flex-direction: column;
    position: relative;
}

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

label.notes-desc {
    margin: calc(90 * var(--vw)) 0 0 calc(130 * var(--vw));
    display: flex;
    position: absolute;
}

img.icons-edit {
    position: absolute;
    top: var(--s-10);
    cursor: pointer;
}

img.icons-remove {
    position: absolute;
    bottom: var(--s-10);
    cursor: pointer;
}

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

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

    a.btn-content.cancel {
        font-weight: 400;
        line-height: calc(25 * var(--vw));
    }

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

h5.activity-right-title {
    font-size: calc(17 * var(--vw));
    font-weight: 700;
    font-family: 'Inter';
    margin-bottom: var(--s-16);
}

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

.right-side-panel {
    padding: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-position: calc(24 * var(--vw)) center;
    padding-right: 0;
}

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

    button.btn-content:hover {
    }

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

.mt32 {
    margin-top: calc(32 * var(--vw));
}

.mt16 {
    margin-top: var(--s-16);
}

span.suggetion-title {
    font-size: calc(17 * var(--vw));
    font-weight: 700;
    padding: var(--s-8);
}

.today {
    color: #777;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 400;
    padding: var(--s-8);
}

.activity-AI {
    display: inline-block;
    width: 100%;
    margin-top: calc(25 * var(--vw));
}

button.btn-content .e-icons {
    font-size: var(--s-10);
    padding: 0 var(--s-3);
}

a.btn-content.addrisk {
    margin: calc(24 * var(--vw)) var(--s-12) 0 0;
    cursor: pointer;
}

img.addicon-risk {
    margin-right: calc(4 * var(--vw));
}

.descriptionText textarea {
    height: 100% !important;
    margin: 0 !important;
    padding: var(--s-12) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.updProgress .e-dlg-header-content {
    border-bottom: var(--s-1) solid #EAEAEA;
    margin: 0;
    padding: var(--s-20) calc(24 * var(--vw)) var(--s-20) calc(26 * var(--vw));
    /* margin-bottom: var(--s-16); */
}

.updProgress .e-dlg-content {
    padding: var(--s-16) calc(24 * var(--vw)) calc(32 * var(--vw)) calc(24 * var(--vw)) !important;
}

.left-side-panel {
    padding: 0;
    padding-right: calc(30 * var(--vw));
}

label.gridtitle {
    color: #777;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 400;
    font-family: 'Inter';
}

.sr-grid-title {
    padding: 0 calc(24 * var(--vw)) 0 calc(24 * var(--vw));
}

label.header {
    color: #1A1A1A;
    font-size: calc(24 * var(--vw));
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: var(--s-16)
}

label.main-header {
    color: #1A1A1A;
    font-family: Inter;
    font-size: calc(17 * var(--vw));
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    padding-bottom: var(--s-20);
}

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

.card-container {
    border-radius: calc(4 * var(--vw));
    border: var(--s-1) solid #EAEAEA;
    background: #FFF;
    padding: var(--s-20);
    margin-right: 0;
    min-height: calc(240 * var(--vw));
    width: 100%;
}

.activities-card {
    /* padding-top: var(--s-16); */
}

.risks-part {
    margin-top: var(--s-40);
}

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

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

.progresscard-container {
    border-radius: calc(4 * var(--vw));
    border: var(--s-1) solid #EAEAEA;
    background: #FFF;
    padding: var(--s-16);
    margin-right: var(--s-16);
    min-height: calc(80 * var(--vw));
    margin-bottom: var(--s-16);
    width: 32%;
    min-width: calc(320 * var(--vw));
}

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

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

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

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

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

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

button.btn-secondary.save {
    width: auto;
    height: calc(32 * var(--vw)) !important;
    border-radius: var(--s-3);
    color: #000 !important;
    font-family: Inter;
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    background: var(--main-color) !important;
    border: none !important;
    padding: 0 var(--s-12);
    box-shadow: none !important;
    float: right;
    min-width: calc(112 * var(--vw));
}

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

.save-cancel-buttons {
    margin-right: calc(30 * var(--vw));
}

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

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: var(--s-1) solid #E7E7E7 !important;
}

/* Status-update View Design End*/
}

.grid-data {
    margin: calc(32 * var(--vw)) auto;
}

.chat-text-content {
    font-family: 'Inter';
    font-size: var(--s-14);
    color: #777;
}

.chat-text-time {
    font-size: var(--s-12);
    position: absolute;
    right: calc(25 * var(--vw));
    top: calc(30 * var(--vw));
}

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

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

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

.chat-container {
    min-height: calc(504 * var(--vw));
    display: block;
    overflow-y: auto;
}

.chats .row {
    height: 100%;
}

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

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

.chat-box-2 textarea {
    padding-top: var(--s-5) !important
}

.menu-items ul > li a span {
    font-size: calc(13 * var(--vw));
    font-weight: 400;
    color: #111111;
    flex: 1;
}

i.sub-icon::before {
    content: '';
    background-image: url("/img/overview.svg?v=2");
    width: calc(24 * var(--vw));
    height: calc(24 * var(--vw));
    display: inline-block;
    margin-top: var(--s-10);
    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: calc(24 * var(--vw));
    height: calc(24 * var(--vw));
    display: inline-block;
    margin-top: var(--s-10);
    background-position: center;
    background-repeat: no-repeat;
}

i.sub-icon {
    width: calc(18 * var(--vw));
}

.menu-items ul > li ul li span {
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

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

.menu-items ul li ul li a {
    padding-left: calc(45 * var(--vw));
    padding-right: var(--s-20);
    text-overflow: ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
    display: flex;
    align-items: center;
    gap: var(--s-10);
}

/*filter */
.e-chip-list.e-control.e-lib.filter-item span {
    color: var(--secondary-color);
    padding: 0 !important;
    font-size: var(--s-12);
    line-height: calc(22 * var(--vw));
}

/*end*/
table.table.table-striped.table-bordered.table-normal {
    border: var(--s-1) solid #e3e3e3;
}

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

.mx-width-600 {
    max-width: calc(697 * var(--vw));
    display: block;
    margin-left: var(--s-40);
}

.mx-width-697 {
    max-width: calc(750 * var(--vw));
    display: block;
    margin: auto;
}

.mx-width-878 {
    max-width: calc(790 * var(--vw));
    display: block;
    margin-left: var(--s-40);
}

.mx-width-580 {
    max-width: calc(580 * var(--vw));
    display: block;
    margin-left: var(--s-40);
    margin-top: calc(25 * var(--vw));
}

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

.e-editable-value-container {
    padding: calc(4 * var(--vw)) !important;
}

.mx-width-624 {
    max-width: calc(680 * var(--vw));
    display: block;
    margin: auto;
}

.mx-width-900 {
    max-width: calc(900 * var(--vw));
    display: block;
    margin: 0 auto;
}

.mx-width-1000 {
    max-width: calc(1000 * var(--vw));
    display: block;
}

.mx-width-1200 {
    max-width: calc(1200 * var(--vw));
    display: block;
    margin: 0 auto;
}

.mx-width-700 {
    max-width: calc(700 * var(--vw));
    margin: 0 auto;
}

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

.e-toast-container.e-toast-top-right {
    right: var(--s-10);
    top: calc(73 * var(--vw));
    z-index: 109105 !important;
}

.table-normal th {
    color: #575757;
    font-size: var(--s-10);
    height: calc(30 * var(--vw));
    font-weight: 500;
    text-transform: uppercase;
    vertical-align: middle;
}

.table-normal td {
    color: #1A1A1A;
    font-family: Inter;
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.table-normal thead tr {
    height: calc(30 * var(--vw)) !important;
}

.table-normal tr {
    height: calc(33 * var(--vw)) !important;
}

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

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

.btn-img {
    margin-left: var(--s-10);
    cursor: pointer;
}

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

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

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

.e-gantt .e-gantt-chart .e-gantt-child-taskbar-inner-div {
    border-radius: calc(4 * var(--vw));
}

.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: calc(4 * var(--vw));
    border: var(--s-1) solid #EAEAEA;
    background: #FFF;
    min-height: calc(143 * var(--vw)) !important;
    padding: var(--s-16) 0 0 var(--s-16);
}

.vendor-pm-info-top {
    border-radius: calc(4 * var(--vw)) calc(4 * var(--vw)) 0 0;
    background: #FFF;
}

.info-icon {
    width: calc(24 * var(--vw));
    height: calc(24 * var(--vw));
    margin-bottom: var(--s-8);
}

.info-title {
    color: #1B1B1B;
    /* H4 */
    font-family: Inter;
    font-size: calc(17 * var(--vw));
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    /* calc(23.8 * var(--vw)) */
}

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

.vendor-pm-info-container {
    display: block;
    position: relative;
    min-height: calc(143 * var(--vw)) !important;
    background: white;
    border: var(--s-1) solid #EAEAEA;
    padding: var(--s-16) var(--s-16) var(--s-14) var(--s-16);
    border-radius: calc(4 * var(--vw));
}

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

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

span.prj-name {
    /* H4 */
    /* calc(23.8 * var(--vw)) */
    display: block;
    text-align: left;
    font: normal normal 750 var(--s-16)/var(--s-16) Inter;
    /*letter-spacing: 0;*/
    color: #242424;
    opacity: 1;
    /* float: var(--floatl); */
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--s-10);
}

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

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

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

.project-specific-top {
    background: #FFF;
    position: relative;
    height: calc(60 * var(--vw));
    display: flex;
    align-items: center;
    gap: var(--s-10);
}

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

.project-name-title {
    display: inline-block;
    position: relative;
    flex: 1;
}

.payment-title {
    padding: calc(24 * var(--vw)) 0 var(--s-16) 0;
    color: #1A1A1A;
    font-family: 'Inter';
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* calc(19.6 * var(--vw)) */
}

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

.selected-project-name h1 {
    color: #FFF;
    font-family: Inter;
    font-size: var(--s-20);
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: calc(4 * var(--vw));
}

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

.selected-project-pm {
    margin-top: var(--s-20);
}

    .selected-project-pm h2 {
        color: #FFF;
        font-family: Inter;
        font-size: calc(17 * var(--vw));
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        margin-bottom: calc(4 * var(--vw));
    }

.selected-project-general-info {
    /*margin-top: var(--s-16);
    margin-bottom: var(--s-16);
    margin-left: var(--s-20);*/
}

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

.deliverable-container-top {
    border-radius: calc(4 * var(--vw)) calc(4 * var(--vw)) 0 0;
    border: var(--s-1) solid #EAEAEA;
    background: #FBFBFB;
    cursor: pointer;
    /*padding: var(--s-16) var(--s-16) 0 var(--s-16);*/
}

.deliverable-container {
    padding: calc(24 * var(--vw)) 0 0 var(--s-1);
    min-width: calc(223 * var(--vw));
}

.deliverable-title {
    color: #777;
    /* H4 */
    font-family: Inter;
    font-size: calc(15 * var(--vw));
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

.deliverable-description {
    color: #575757;
    font-family: Inter;
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.deliverable-container-bottom {
    border-radius: 0 0 calc(4 * var(--vw)) calc(4 * var(--vw));
    border-right: var(--s-1) solid #EAEAEA;
    border-bottom: var(--s-1) solid #EAEAEA;
    border-left: var(--s-1) solid #EAEAEA;
    background: #FFF;
    padding: var(--s-16) var(--s-16) var(--s-16) var(--s-16);
    min-height: calc(100 * var(--vw)) !important;
}

.deliverable-date {
    padding: var(--s-12) var(--s-16) var(--s-12) var(--s-16);
}

.date-txt {
    padding-left: var(--s-8);
    color: #000;
    font-family: Inter;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.card.marginTop {
    margin-top: var(--s-20);
}

/****Milestone Timeline****/
.bottom .milestone-element-line {
    width: 100%;
    height: var(--s-1);
    display: block;
    background: #ebebeb;
    top: calc(44 * var(--vw));
    position: absolute;
}

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

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

.milestone-stroke-line {
}

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

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

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

.bottom .milestone-stroke-line {
    position: absolute;
    left: 50%;
    width: calc(2 * var(--vw));
    background: #DFDFDF;
    height: calc(30 * var(--vw));
    top: calc(57 * var(--vw));
    bottom: auto;
}

span.date-year {
    color: var(--secondary-color);
    /* text-align: center; */
    font-family: 'Inter';
    font-size: var(--s-14);
    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: calc(6 * var(--vw));
    height: calc(6 * var(--vw));
    background: #DFDFDF;
    position: absolute;
    bottom: calc(-5 * var(--vw));
    left: calc(-2 * var(--vw));
    border-radius: 50%;
    top: auto;
}

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

.timeline-milestone-container {
    margin-top: var(--s-40);
}

.milestone-date-year {
    display: inline-block;
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: calc(2 * var(--vw));
}

.milestone-element-line {
    width: 100%;
    height: var(--s-1);
    display: block;
    background: #ebebeb;
    bottom: calc(35 * var(--vw));
    position: absolute;
}

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

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

.milestone-stroke-line {
    position: absolute;
    left: 50%;
    width: calc(2 * var(--vw));
    background: #DFDFDF;
    height: calc(30 * var(--vw));
    bottom: calc(48 * var(--vw));
}

.element-title {
    margin-top: calc(7 * var(--vw));
    font-size: var(--s-10);
    position: absolute;
    top: calc(-5 * var(--vw));
    bottom: auto;
    width: 200%;
    left: -40%;
}

/* Project Details Component End*/

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

span.simp-desc {
    color: #1A1A1A;
    font-family: Inter;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

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

span.e-outline.h1full.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group.e-valid-input {
    min-height: calc(320 * var(--vw)) !important;
}

.h1full textarea {
    overflow: hidden;
    min-height: calc(300 * var(--vw)) !important;
}

.e-radio-wrapper.e-wrapper.radio-btn {
    padding-right: var(--s-8);
}

.escalation {
    padding: calc(24 * var(--vw)) calc(4 * var(--vw));
}

span.e-outline.hfull.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group.e-valid-input {
    height: calc(491 * var(--vw)) !important;
}

.hfull textarea {
    height: calc(480 * var(--vw)) !important;
}

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

img.str-pr {
    margin-top: calc(4 * var(--vw));
}

/*.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: var(--s-14);
    height: var(--s-14);
}

span.initiative-number {
    background: #777;
    padding: var(--s-8);
    border-radius: 50%;
    color: #FFF;
    display: block;
    width: var(--s-40);
    height: var(--s-40);
    text-align: center;
    line-height: calc(26 * var(--vw));
}

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

.icon-title {
    display: flex;
}

.main-info-icon-str img {
    width: calc(36 * var(--vw));
    height: calc(36 * var(--vw));
}

.main-info-icon-str {
    margin: calc(7 * var(--vw)) var(--s-10) 0 0;
}

.main-info-description-str span {
    color: #747476;
    font-family: Inter;
    font-size: var(--s-14);
    font-weight: 400;
    margin-top: var(--s-12);
}

.main-info-description-str {
    min-height: calc(100 * var(--vw));
    margin-top: var(--s-8);
}

/*end*/
/*Draft Email*/
.draft-email-footer {
    float: var(--floatr);
    margin-right: calc(4 * var(--vw));
}

.filter-row.wt .e-label-bottom {
    top: 0 !important;
}

/*End*/
/*Initiative overview*/
.initiative-strategy-container {
    border: var(--s-1) solid #ebebeb;
    box-shadow: 0 calc(2 * var(--vw)) calc(2 * var(--vw)) 0 rgba(26, 26, 26, 0.07);
    background: white;
    height: calc(483 * var(--vw));
    border-radius: calc(4 * var(--vw));
    padding: var(--s-16) var(--s-16) var(--s-8) var(--s-16);
    margin-top: 0;
}

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

.strategy-header img {
    width: calc(24 * var(--vw));
    height: calc(24 * var(--vw));
}

span.strategy-desc {
    display: block;
    color: #777;
    font-family: Inter;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-top: var(--s-8);
    min-height: calc(60 * var(--vw));
}

span.strategy-header-icon {
    width: calc(24 * var(--vw)) !important;
    height: calc(24 * var(--vw)) !important;
}

.initiative-strategy-title {
    font-family: Inter;
    font-size: calc(24 * var(--vw));
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    color: #1A1A1A;
    cursor: pointer;
}

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

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

.strategy-middle-part {
    margin-top: var(--s-12);
}

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

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

.strategy-info {
    margin-top: var(--s-12);
    display: inline-block;
    width: calc(309 * var(--vw));
}

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

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

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

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

.strategy-bottom-part {
    /* margin-top: var(--s-20); */
    height: calc(215 * var(--vw));
    overflow-y: auto;
    overflow-x: hidden;
}

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

.initiative-strategy-project-details {
    margin-top: calc(18 * var(--vw))
}

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

.projrct-milestone-details {
    padding: var(--s-8) 0 var(--s-8) 0;
}

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

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

.projrct-milestone-title {
    color: #1A1A1A;
    font-family: Inter;
    font-size: calc(13 * var(--vw));
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-right: var(--s-12);
}

.milestone-container-title h4 {
    color: #1A1A1A;
    font-family: Inter;
    font-size: calc(17 * var(--vw));
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}

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

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

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

.status-legend {
    color: #1A1A1A;
    text-align: center;
    font-family: Inter;
    font-size: calc(11 * var(--vw));
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    padding: var(--s-8);
    margin-right: var(--s-12);
}

.under-review-status {
    border-radius: calc(4 * var(--vw));
    border: var(--s-1) solid #888;
    background: rgba(136, 136, 136, 0.10);
}

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

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

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

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

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

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

.tooltip-info img {
    margin-right: var(--s-10);
}

/*End*/
.card-body.initiative-card-setting .main-info-title h3 {
    font-size: var(--s-16);
    line-height: var(--s-40);
}

.card-body.initiative-card-setting {
    min-height: calc(150 * var(--vw));
}

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

.card-body.initiative-card-setting {
    min-height: calc(150 * var(--vw));
}

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

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

    .sectors-card-setting .main-info-icon img {
        height: calc(30 * var(--vw));
        display: inline-block;
        text-align: center;
        margin-top: var(--s-5);
    }

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

    .sectors-card-setting .main-info-icon img {
        height: calc(30 * var(--vw));
        display: inline-block;
        text-align: center;
        margin-top: var(--s-5);
    }

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

/*Access roles*/
.role-item {
    padding: var(--s-5) var(--s-10);
    cursor: pointer;
    color: #1A1A1A;
    font-family: Inter;
}

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

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

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

.role-item a {
    text-decoration: none;
    color: #888888;
    font-size: var(--s-14);
    text-align: left;
    margin-left: var(--s-10);
}

html.rtl .role-item a {
    text-align: right;
    margin-left: 0;
    margin-right: var(--s-10);
}

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

.parent-height-scroll-auto {
    height: calc(596 * var(--vw));
    overflow-x: hidden;
    overflow-y: auto;
}

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

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

.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: calc(46 * var(--vw)) !important;
}

.main-info-description-stage {
    min-height: var(--s-40);
}

    .main-info-description-stage span {
        color: #747476;
        font-family: Inter;
        font-size: var(--s-14);
        font-weight: 400;
        margin-top: var(--s-12);
    }

/******* START - SECTOR OVERVIEW *******/
.sector-details-container {
    border-radius: calc(4 * var(--vw));
    /*background: #EAEAEA;*/
    padding: calc(4 * var(--vw));
}

.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: calc(24 * var(--vw));
    height: calc(24 * var(--vw));
    margin-right: var(--s-8);
}

.sector-list-container {
    border-radius: calc(4 * var(--vw));
    background: #FFF;
    box-shadow: 0 calc(2 * var(--vw)) calc(2 * var(--vw)) 0 rgba(26, 26, 26, 0.10);
    padding: var(--s-12) var(--s-16);
    margin-bottom: var(--s-8);
}

.sector-container-title h4 {
    font-family: Inter;
    font-size: calc(17 * var(--vw));
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: inline-block;
}

.sector-5:first-child {
    border-top: calc(4 * var(--vw)) solid #0062C3;
}

.sector-4:first-child {
    border-top: calc(4 * var(--vw)) solid #EF4065;
}

.sector-3:first-child {
    border-top: calc(4 * var(--vw)) solid #45C3BC;
}

.sector-2:first-child {
    border-top: calc(4 * var(--vw)) solid #009A46;
}

.sector-1:first-child {
    border-top: calc(4 * var(--vw)) solid #F26524;
}

.sector-upcoming-payment {
    color: #777;
    font-family: Inter;
    font-size: var(--s-8);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: block;
}

.sector-total-payment-value {
    color: #111;
    font-family: Inter;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: block;
}

.sector-total-payment-title {
    color: #777;
    font-family: Inter;
    font-size: var(--s-8);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: block;
}

.sector-list-container h4 {
    font-family: Inter;
    font-size: calc(17 * var(--vw));
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: inline-block;
}

.ongoing-project-container {
    height: calc(420 * var(--vw));
    margin-top: calc(15 * var(--vw));
    overflow-y: auto;
}

.pipline-container {
    min-height: calc(196 * var(--vw));
    margin-top: calc(15 * var(--vw));
}

.kpis-container {
    min-height: calc(188 * var(--vw));
    padding: var(--s-12) var(--s-12);
    margin-top: calc(15 * var(--vw));
}

span.view-all {
    color: var(--secondary-color);
    font-family: Inter;
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-decoration-line: underline;
    display: inline-block;
    float: var(--floatr);
    margin-top: calc(4 * var(--vw));
    cursor: pointer;
}

.sector-ongoing-project-container-content {
    margin-top: calc(4 * var(--vw));
}

.sector-pipline-project-container-content {
    margin-top: calc(4 * var(--vw));
}

.project-list-progress-container {
    border-radius: calc(4 * var(--vw));
    border: var(--s-1) solid #EAEAEA;
    background: #FFF;
    padding: var(--s-12) var(--s-12);
    margin-bottom: var(--s-5);
}

.sector-ongoing-project-container-title h4 {
    font-size: calc(15 * var(--vw)) !important;
}

.project-list-progress-title {
    color: #1A1A1A;
    font-family: Inter;
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: block;
}

.project-list-progress-complated-per {
    color: #777;
    font-family: Inter;
    font-size: var(--s-10);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    display: block;
}

.on-going-project-budget {
    /* width: calc(94 * var(--vw));*/
    width: calc(100 * var(--vw));
    float: var(--floatl);
}

.kpi-left-part {
    width: 58%;
    float: var(--floatl);
    min-height: calc(125 * var(--vw)) !important;
    border-radius: calc(4 * var(--vw)) 0 0 calc(4 * var(--vw));
    border: var(--s-1) solid #EAEAEA;
    background: #FFF;
    padding: var(--s-16) var(--s-8) var(--s-16) var(--s-16);
    overflow: hidden;
    color: #777;
    text-overflow: ellipsis;
    font-family: Inter;
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.kpi-right-part {
    width: 38%;
    float: var(--floatl);
    min-height: calc(125 * var(--vw)) !important;
    border-radius: 0 calc(4 * var(--vw)) calc(4 * var(--vw)) 0;
    border-top: var(--s-1) solid #EAEAEA;
    border-right: var(--s-1) solid #EAEAEA;
    border-bottom: var(--s-1) solid #EAEAEA;
    background: #FBFBFB;
    padding: var(--s-16) var(--s-12) var(--s-16) calc(18 * var(--vw));
    position: relative;
}

.kpi-left-part span {
    display: inline-block;
    margin-top: calc(30 * var(--vw));
}

.sector-kpis-project-container-content {
    height: auto;
}

span.current-kpis-value {
    color: #7CBAD5;
    text-align: center;
    font-family: Inter;
    font-size: var(--s-20);
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

.target-kpis {
    display: inline-block;
    position: absolute;
    bottom: calc(13 * var(--vw));
}

span.kpis-title {
    color: #777;
    font-family: Inter;
    font-size: var(--s-10);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    display: block;
}

.current-kpis {
    display: inline-block;
    margin-right: calc(15 * var(--vw));
    position: absolute;
    top: var(--s-10);
}

.pipline-budget {
    float: var(--floatl);
    margin-left: calc(26 * var(--vw));
    width: calc(100% - calc(144 * var(--vw)));
}

.budget-container {
    min-height: calc(289 * var(--vw));
    margin-top: calc(15 * var(--vw));
}

.on-going-project-budget span {
    color: #777;
    text-align: center;
    font-family: Inter;
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.pipline-budget span {
    color: #777;
    text-align: center;
    font-family: Inter;
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-left: calc(42 * var(--vw));
}

.on-going-project-budget div {
    /*border-right: var(--s-1) solid #ededed;*/
}

.text_middle {
    margin: 0 calc(4 * var(--vw)) calc(67 * var(--vw)) calc(4 * var(--vw));
}

/******* END - SECTOR OVERVIEW *******/
/*Overview Page*/
.content.pr-60 {
    padding-right: var(--s-40);
}

/*End - Overview Page*/
.report-year {
    height: var(--s-40);
    text-align: center;
    font-weight: 700;
    font-size: calc(18 * var(--vw));
    background: #f3f3f3;
    line-height: var(--s-40);
    border: var(--s-1) solid #e7e6e6;
    border-radius: calc(4 * var(--vw)) calc(4 * var(--vw)) 0 0;
}

.report-quarters > div {
    float: var(--floatl);
    width: 25%;
    height: calc(30 * var(--vw));
    background: #f3f3f3;
    line-height: calc(30 * var(--vw));
    border: var(--s-1) solid #e7e6e6;
    text-align: center;
    font-size: var(--s-16);
    font-weight: 600;
    border-top: none;
    /* border-radius: 0 0 0 calc(4 * var(--vw)); */
}

span.initiative-number {
    width: var(--s-40);
    height: var(--s-40);
    display: block;
    background: #777;
    border-radius: 50%;
    text-align: center;
    line-height: calc(25 * var(--vw));
    color: #FFF;
    float: var(--floatl);
    margin-right: var(--s-5);
}

.projects {
    position: relative;
    overflow: hidden;
}

.project-title {
    position: absolute;
    height: calc(30 * var(--vw));
    background: #3e3e3e;
    border-radius: var(--s-8);
    text-align: left;
    line-height: calc(30 * var(--vw));
    color: #FFF !important;
    cursor: pointer;
    font-size: calc(13 * var(--vw));
    padding-left: var(--s-10);
}

html.rtl .project-title {
    text-align: right;
    padding-right: var(--s-10);
    padding-left: 0;
}

.title-main {
    width: 100%;
    float: var(--floatl);
    margin-top: var(--s-10);
    margin-bottom: var(--s-20);
    font-weight: 600;
}

.initiative-title {
    display: block;
    width: 100%;
    border-bottom: var(--s-1) solid #b3b3b3;
    padding: calc(18 * var(--vw));
}

.report-quarters > div:first-child {
    border-radius: 0 0 0 calc(4 * var(--vw));
}

.report-quarters > div:last-child {
    border-radius: 0 0 calc(4 * var(--vw)) 0;
}

.project-main-info:hover {
    border-color: #8A1538;
}

.project-status-legend-container.full {
    width: 100%;
    margin-left: 0;
    bottom: calc(6 * var(--vw));
    padding-left: calc(22 * var(--vw));
    position: relative;
    margin-top: var(--s-12);
}

.budget-nda-container {
    width: calc(50% - var(--s-10));
    display: inline-block;
    float: var(--floatl);
    margin-right: var(--s-20);
}

.budget-sector-container {
    width: calc(50% - var(--s-10));
    display: inline-block;
}

.nda-chart-container {
    width: calc(50% - var(--s-10));
    display: inline-block;
    float: var(--floatl);
    margin-right: var(--s-20);
    height: calc(275 * var(--vw)) !important;
    background-color: white;
    padding: var(--s-16)
}

.sector-chart-container {
    width: calc(50% - var(--s-10));
    display: inline-block;
    float: var(--floatl);
    height: calc(275 * var(--vw)) !important;
    background-color: white;
}

span.title-status-total {
    font-family: Inter;
    font-size: calc(32 * var(--vw));
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-left: 0;
    margin-top: var(--s-8);
    display: block;
    color: #000;
    border-right: var(--s-1) solid #e3e3e3;
    float: var(--floatl);
    padding-right: var(--s-10);
}

span.title-status-ongoing {
    font-family: Inter;
    font-size: calc(32 * var(--vw));
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-left: var(--s-16);
    margin-top: var(--s-8);
    display: block;
    float: var(--floatl);
    border-right: var(--s-1) solid #e3e3e3;
    padding-right: var(--s-10);
    color: #85DA75;
}

span.title-status-planned {
    font-family: Inter;
    font-size: calc(32 * var(--vw));
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-left: var(--s-16);
    margin-top: var(--s-8);
    display: block;
    float: var(--floatl);
    COLOR: #FBBA20;
}

.milstone-group-info {
    background: #FFF;
    margin-bottom: var(--s-12);
}

    .milstone-group-info .milestone-status-info {
        padding: calc(15 * var(--vw));
    }

span.pages-title-main {
    /*padding: 0 calc(60 * var(--vw));*/
    color: #1A1A1A;
    font-family: Inter;
    font-size: calc(17 * var(--vw));
    font-style: normal;
    font-weight: 700;
}

.initiatives-main-info-title h3 {
    color: #1A1A1A;
    font-family: Inter;
    font-size: calc(18 * var(--vw));
    font-weight: 700;
    margin-top: var(--s-12);
}

.initiatives-main-info-title {
    height: calc(31 * var(--vw));
}

/*Structure Page*/
.w800 {
    width: calc(100% - calc(854 * var(--vw)));
    float: var(--floatl);
    margin-right: calc(21 * var(--vw));
}

.col-lg-6.Left-content.w800 {
    float: var(--floatl);
    width: calc(633 * var(--vw)) !important;
}

.structure-left-part {
    float: var(--floatl);
    width: calc(100% - calc(420 * var(--vw)));
    margin-right: var(--s-20);
}

.structure-right-part {
    float: var(--floatl);
    width: calc(385 * var(--vw));
}

.card-body.structure-body {
    padding: var(--s-20) var(--s-20) var(--s-10) var(--s-20);
}

.approval-struct-left {
    float: var(--floatl);
    width: calc(62 * var(--vw));
    margin-right: var(--s-20);
}

.approval-struct-right {
    float: var(--floatl);
    width: calc(100% - calc(108 * var(--vw)));
}

.level-list {
    margin-top: calc(67 * var(--vw));
}

span.add-level {
    float: var(--floatr);
    margin-top: var(--s-16);
    cursor: pointer;
}

.card.main-overview-card.card-dep {
    height: auto;
}

span.dep-title {
    text-align: left;
    font: normal normal 800 var(--s-16)/calc(19 * var(--vw)) Inter;
    /*letter-spacing: 0;*/
    color: #242424;
    opacity: 1;
}

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

/*End*/
/*Payment Page*/
.col-lg-8.w1153 {
    width: calc(1153 * var(--vw));
}

.card-body.invoice-style {
    padding: var(--s-20);
    padding-top: 0;
    overflow-y: auto;
    padding-bottom: 0;
    margin-bottom: var(--s-20);
}

.invoice-members-container {
    display: block;
    /* margin-right: var(--s-40); */
}

.form-group.main-uploader.invoice-uploader {
    margin-top: var(--s-20) !important;
    height: calc(70 * var(--vw)) !important;
    padding: var(--s-16) 0;
    width: 100%;
}

    .form-group.main-uploader.invoice-uploader .main-drop-area-wrap invoice-drop-uploader img {
        width: var(--s-20) !important;
        height: var(--s-20) !important;
    }

.main-drop-area-wrap.invoice-drop-uploader img {
    width: calc(24 * var(--vw)) !important;
    height: calc(24 * var(--vw)) !important;
    margin: 0 !important;
    margin-right: var(--s-16) !important;
    text-align: center;
    float: none;
    display: inline-block;
}

.profile-img.p-approval-init {
    width: calc(28 * var(--vw));
    height: calc(28 * var(--vw));
    border-radius: 50%;
    margin: 0;
    background: #DDDDDD;
    cursor: default;
}

span.project-vendor-name {
    padding-left: calc(24 * var(--vw));
    color: #242424;
    font-weight: 600;
    line-height: calc(17 * var(--vw));
    display: flex;
    margin-top: calc(-5 * var(--vw));
    font-size: var(--s-14);
}

.text.incvoice-text {
    margin: 0 !important;
    display: inline-block;
    margin-top: 0 !important;
    float: none;
}

.small-text.incvoice-small-text {
    display: block;
    margin-top: 0;
    margin-left: calc(59 * var(--vw));
}

.invoice-btns {
    float: var(--floatr);
    margin-top: var(--s-20);
}

span.btn-save-payment {
    border-radius: var(--s-3);
    background: var(--main-color);
    padding: 0 var(--s-12);
    color: #111;
    text-align: center;
    font-family: 'Inter';
    font-size: var(--s-14);
    font-weight: 600;
    margin-left: var(--s-12);
    cursor: pointer;
    height: calc(32 * var(--vw));
    display: flex;
    align-items: center;
}

span.cancel-payment-btn {
    border-radius: calc(4 * var(--vw));
    border: var(--s-1) solid var(--secondary-color);
    background: #F2F4FC;
    padding: var(--s-8) var(--s-12);
    color: var(--secondary-color);
    font-family: Inter;
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* calc(16.8 * var(--vw)) */
    cursor: pointer;
}

label.control-label.invoice-label {
    margin-bottom: calc(4 * var(--vw));
}

.payment-comment-container img {
    height: calc(33 * var(--vw));
    width: calc(35 * var(--vw));
    margin-right: var(--s-16);
    float: var(--floatl);
}

.w508 {
    width: calc(508 * var(--vw));
    float: var(--floatl);
    margin-right: calc(21 * var(--vw));
}

.payment-comment-list-container {
    width: calc(436 * var(--vw));
    height: calc(100% - calc(70 * var(--vw)));
    /* background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box; */
    /* border: var(--s-1) solid var(--unnamed-color-e7e7e7); */
    /* background: #FFFFFF 0% 0% no-repeat padding-box; */
    /* border: var(--s-1) solid #E7E7E7; */
    /* border-radius: calc(4 * var(--vw)); */
    opacity: 1;
}

.comment-list-body {
    width: 100%;
    height: calc(100% - calc(70 * var(--vw)));
    margin-bottom: var(--s-40);
    overflow-x: hidden;
    overflow-y: auto;
}

.payment-comment-init {
    width: var(--s-40);
    height: var(--s-40);
    border-radius: 50%;
    margin: 0;
    background: var(--secondary-color);
    margin-right: var(--s-5);
    margin-top: var(--s-14);
}

    .payment-comment-init h4 {
        text-align: center;
        line-height: calc(28 * var(--vw));
        font-size: calc(13 * var(--vw));
        font-weight: 600;
        color: var(--secondary-color);
    }

.bottom-abs.payment-comment {
    width: calc(100% - var(--s-40));
    bottom: var(--s-20);
    left: var(--s-20);
}

.message-contet {
    margin-top: var(--s-3);
}

.comment-footer {
    /* border-top: var(--s-1) solid #E7E7E7; */
    /* padding: var(--s-10); */
    /* background: #FFF; */
    /* height: calc(70 * var(--vw)); */
    /* width: 100%; */
    /* display: block; */
}

.payment-comment-init.top-init {
    /* float: var(--floatl); */
    margin-left: var(--s-12);
}

.payment-comment-container {
    display: block;
    /* margin-top: var(--s-20); */
}

.payment-comment-init.top-init {
    float: var(--floatl);
    margin-left: 0;
    margin-right: var(--s-8);
    margin-top: var(--s-5);
    display: block;
    width: calc(28 * var(--vw));
    margin-bottom: 0;
    background: #e8e8e8;
    height: calc(28 * var(--vw));
    line-height: calc(28 * var(--vw));
}

.payment-comment-container {
}

.payment-comment {
    float: var(--floatl);
    width: calc(100% - calc(36 * var(--vw)));
    display: block;
    margin-bottom: var(--s-8);
    height: auto;
    position: relative;
    min-height: var(--s-40);
    background: #EFEFEF;
    border-radius: var(--s-12);
    padding: var(--s-10);
}

span.comment-user {
    display: block;
    text-align: left;
    font-size: var(--s-12);
    /*letter-spacing: 0;*/
    color: #1B1B1B;
    opacity: 1;
    font-family: 'Inter';
}

html.rtl span.comment-user {
    text-align: right;
    line-height: calc(38 * var(--vw));
}

span.comment-txt {
    text-align: left;
    font: normal normal normal var(--s-14)/calc(19 * var(--vw)) Inter;
    /*letter-spacing: 0;*/
    color: #707070;
    opacity: 1;
}

html.rtl span.comment-txt {
    text-align: right;
}

.payment-comment-list-container {
    width: 100%;
    height: calc(100% - calc(70 * var(--vw)));
}

.payment-comment-container span {
    width: calc(100% - calc(51 * var(--vw)));
}

.w1118 {
    width: calc(1118 * var(--vw));
}

.w557 {
    width: calc(100% - calc(529 * var(--vw)));
    float: var(--floatl);
}

span.e-outline.commentText.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group textarea {
    height: calc(112 * var(--vw)) !important;
}

span.e-outline.commentText.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group {
    background: #FFF;
    height: calc(125 * var(--vw));
}

span.btn-save-payment.add-invoice {
    float: var(--floatr);
    margin-top: calc(15 * var(--vw));
}

.profile-img.p-approval-init h4 {
    text-align: center;
    line-height: calc(35 * var(--vw));
    font-size: var(--s-10);
    font-weight: 700;
    color: #000;
}

span.p-approval-status {
    display: block;
    color: var(--woodsmoke-500, #6D6D6D);
    font-family: 'Inter';
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* calc(16.8 * var(--vw)) */
    margin-bottom: calc(2 * var(--vw));
}

span.p-approval-user {
    display: block;
    overflow: hidden;
    color: var(--woodsmoke-950, #1A1A1A);
    text-overflow: ellipsis;
    font-family: 'Inter';
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    /* calc(19.6 * var(--vw)) */
    margin-bottom: var(--s-1);
}

span.p-approval-role {
    display: block;
    color: var(--woodsmoke-500, #6D6D6D);
    font-family: 'Inter';
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* calc(16.8 * var(--vw)) */
    margin-bottom: calc(4 * var(--vw));
}

.main-approval-left-part {
    float: var(--floatl);
}

.main-approval-right-part {
    float: var(--floatl);
    margin-right: var(--s-12);
}

.main-approval-container {
    float: var(--floatl);
    /*    margin-right: calc(68 * var(--vw));*/
    position: relative;
    width: calc(190 * var(--vw));
    position: relative;
    display: block;
    height: calc(90 * var(--vw));
}

    .main-approval-container:last-child::after {
        display: none !important;
    }

span.p-approval-date {
    color: var(--woodsmoke-500, #6D6D6D);
    font-family: 'Inter';
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 400;
    line-height: 0;
    /* calc(16.8 * var(--vw)) */
    display: block;
    line-height: var(--s-50);
}

.profile-img.p-approval-init img {
    position: absolute;
    top: calc(36 * var(--vw));
    left: 45%;
    width: var(--s-16);
}

/*End*/
.ps-st-left {
    width: calc(30 * var(--vw));
    float: var(--floatl);
    margin-right: calc(21 * var(--vw));
}

.ps-st-right {
    float: var(--floatl);
    width: calc(100% - calc(30 * var(--vw)));
}

    .ps-st-right .st-init-users {
        float: var(--floatr);
        margin-right: 0;
        margin-left: var(--s-5);
        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% - calc(2 * var(--vw))) !important;
    border-bottom: 0;
}

/**/
/*Project Stage Details*/
.card.main-overview-card {
    height: calc(258 * var(--vw));
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: none;
    opacity: 1;
}

span.st-title {
    text-align: left;
    font: normal normal 700 var(--s-14)/var(--s-14) Inter;
    /*letter-spacing: 0;*/
    color: #000;
    opacity: 1;
    display: block;
    margin-top: var(--s-20);
    height: calc(24 * var(--vw));
    font-weight: 750;
    margin-bottom: var(--s-10);
    line-height: calc(24 * var(--vw));
    font-size: var(--s-16);
    font-weight: 700;
}

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

span.st-name {
    text-align: left;
    font: normal normal normal var(--s-14)/calc(30 * var(--vw)) Inter;
    /*letter-spacing: 0;*/
    color: #888888;
    text-transform: capitalize;
    opacity: 1;
    display: block;
    line-height: calc(30 * var(--vw));
}

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

.card-border-left {
    content: "";
    position: absolute;
    top: calc(22 * var(--vw));
    left: 0;
    width: var(--s-3);
    height: calc(35 * var(--vw));
    background: var(--main-color);
    display: none;
}

.project-stakeholder-right-part {
    float: var(--floatl);
    margin-right: calc(6 * var(--vw));
}

.project-stakeholder-left-part {
    float: var(--floatl);
    margin-right: calc(13 * var(--vw));
}

span.stakeholder-name {
    display: block;
    color: #1A1A1A;
    font-family: 'Inter';
    font-size: calc(13 * var(--vw));
    font-style: normal;
    font-weight: 800;
    line-height: 140%;
    margin-bottom: calc(2 * var(--vw));
    width: calc(110 * var(--vw));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*letter-spacing: calc(0.24 * var(--vw));*/
}

span.stakeholder-role {
    display: block;
    color: var(--woodsmoke-500, #6D6D6D);
    font-family: 'Inter';
    font-size: var(--s-10);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    margin-bottom: calc(2 * var(--vw));
    width: calc(82 * var(--vw));
    /*letter-spacing: calc(0.19 * var(--vw));*/
}

.project-stakeholder-right-part .profile-img.p-approval-init {
    width: calc(37 * var(--vw)) !important;
    height: calc(37 * var(--vw)) !important;
}

    .project-stakeholder-right-part .profile-img.p-approval-init h4 {
        font-size: var(--s-12);
        line-height: calc(27 * var(--vw));
    }

span.budget-total {
    font: normal normal normal var(--s-14)/calc(17 * var(--vw)) Inter;
    color: #888888;
}

span.btn-save-payment.show-srstage {
    float: var(--floatr);
    border: var(--s-1) solid var(--secondary-color);
    background: #F2F4FC;
    border-radius: calc(4 * var(--vw));
    min-width: calc(52 * var(--vw));
    min-height: calc(33 * var(--vw));
    text-align: center;
    box-shadow: none !important;
    color: var(--secondary-color);
}

.draft-btn {
    float: var(--floatr);
    margin-right: calc(2 * var(--vw));
}

/*end*/
.project-strucutre-group h5 {
    color: #000;
    margin-bottom: 0;
    font-size: var(--s-16);
    margin-top: 0;
    font-weight: 600;
    font-family: 'Inter';
}

.other.st-init-users {
    background: #0000001A;
}

    .other.st-init-users h2 {
        color: #8F8F8F;
    }

.card.card-border.myprofile {
    margin-top: var(--s-50) !important;
}

.approval-element-bottom-left {
    float: var(--floatl);
    width: calc(198 * var(--vw));
    border-right: calc(2 * var(--vw)) solid #E7E7E7;
    margin-right: calc(18 * var(--vw));
    margin-left: 0;
}

span.last-app-submit {
    /* width: calc(154 * var(--vw)); */
    /* height: calc(21 * var(--vw)); */
    text-align: left;
    font: normal normal normal var(--s-14)/calc(30 * var(--vw)) Inter;
    /*letter-spacing: 0;*/
    color: #888888;
    opacity: 1;
    /* display: block; */
}

html.rtl span.last-app-submit {
    text-align: right;
}

.filter-enabled {
    height: calc(88 * var(--vw));
}

.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: calc(11 * var(--vw));
    height: calc(11 * var(--vw));
    border-radius: 50%;
    color: WHITE;
    position: absolute;
    top: calc(24 * var(--vw));
    margin-left: calc(11 * var(--vw));
}

span.noti-count {
    font-size: 0;
    position: absolute;
    /* top: 0; */
    margin: calc(-2 * var(--vw)) 0 0 var(--s-5);
    font-weight: 600;
}

img.noti-green {
    position: absolute;
    width: calc(15 * var(--vw));
    height: calc(15 * var(--vw));
    left: calc(49 * var(--vw));
    margin-top: var(--s-3);
}

.approval-data {
    position: absolute;
    right: 0;
    top: calc(30 * var(--vw));
    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: calc(23 * var(--vw)) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*letter-spacing: calc(0.24 * var(--vw));*/
}

span.st-sub-title {
    display: block;
    color: #888;
    font-weight: normal;
    font-size: var(--s-10);
    cursor: pointer;
    float: none;
    line-height: 0;
}

.strcuture-element span {
    line-height: calc(17 * var(--vw));
}

.milestone-date-year span {
    float: none;
}

.stk-init.approval.full {
    position: absolute;
}

.approval.full .st-init-users {
    width: calc(37 * var(--vw));
    height: calc(37 * var(--vw));
}

.card.main-overview-card.invoice .structure-title .st-title {
    height: calc(30 * var(--vw));
}

.invoice-row {
    border-bottom: var(--s-1) solid #e3e3e3;
    padding-bottom: var(--s-10);
    margin-bottom: calc(15 * var(--vw));
}

.card.main-tab-card {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: var(--s-1) solid #E7E7E7;
    opacity: 1;
    margin-top: calc(25 * var(--vw));
}

img.add-payment-icon {
    width: var(--s-40);
    height: calc(15 * var(--vw));
    text-align: center;
    cursor: pointer;
    margin-left: var(--s-12);
}

.deliverables-titles, .deliverables-description, .deliverables-dates {
    width: calc(100% + var(--s-40));
    margin-left: calc(-20 * var(--vw));
}

    .deliverables-titles h5 {
        line-height: calc(44 * var(--vw));
        text-align: left;
        color: #888888;
        font-size: var(--s-14);
        font-weight: 600;
        padding-left: var(--s-20);
    }

html.rtl .deliverables-titles h5 {
    text-align: right;
    padding-right: var(--s-20);
    padding-left: 0;
}

.deliverables-titles {
    background: #F6F6F6;
    height: calc(44 * var(--vw));
}

.deliverables-description span, .deliverables-dates span {
    color: #888888;
    text-align: left;
    font-size: var(--s-14);
    display: block;
    width: 100%;
    margin-top: var(--s-8);
    padding-left: var(--s-20);
}

html.rtl .deliverables-description span, html.rtl .deliverables-dates span {
    text-align: right;
    padding-right: var(--s-20);
    padding-left: 0;
}

.deliverables-Approvals .approval-element-bottom-right {
    width: 100%;
    margin-left: 0;
    margin-top: var(--s-12);
}

.e-input-group, .e-input-group.drop-tree, .e-numeric {
    height: var(--s-40);
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.e-multi-line-input {
    height: auto;
}

.e-popup.combo-input {
    overflow: hidden !important;
    margin-bottom: var(--s-10);
}

div#paymentGrid .e-input-group.e-control-container.e-disabled, .main-table-style, .main-table-style > input.e-control.e-input {
    height: calc(30 * var(--vw));
    min-height: calc(30 * var(--vw));
}

.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: var(--s-16);
    height: var(--s-16);
    border: none;
    margin-left: var(--s-8);
}

.top-header .notifications .nav-link {
    padding: 0;
}

.userprofile span {
    font-size: var(--s-12);
}

.form-elements {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

.e-filter.has-filter .e-btn-icon.la-filter:after {
    content: '';
    width: var(--s-10);
    height: var(--s-10);
    position: absolute;
    background: var(--main-color);
    border-radius: var(--s-5);
    left: calc(13 * var(--vw));
    top: calc(-4 * var(--vw));
}

/*controls style*/
.e-checkbox-wrapper.e-wrapper.normal-input.check-sty {
    border: none !important;
    background: none;
    box-shadow: none;
    margin-left: calc(48 * var(--vw));
    margin-top: var(--s-14);
}

    .e-checkbox-wrapper.e-wrapper.normal-input.check-sty input {
        /* margin-top: calc(90 * var(--vw)) !important; */
        /* display: block; */
        /* margin-left: calc(65 * var(--vw)) !important; */
    }

label.lebel.check-box-l {
    margin-left: calc(58 * var(--vw));
    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: var(--s-20);
}

.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: var(--s-10);
}

.User-Profile-Tooltip h4 {
    font-size: calc(13 * var(--vw));
}

.User-Profile-Tooltip .card-header {
    height: calc(29 * var(--vw));
    border-left: calc(2 * var(--vw)) solid var(--primary-color);
}

.User-Profile-Tooltip {
    background: #FFF;
}

td.table-title {
    font-weight: 500;
    text-align: left;
    height: calc(30 * var(--vw));
    border-top: var(--s-1) 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: var(--s-14);
    font-family: 'Inter';
    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: calc(2 * var(--vw)) solid var(--primary-color); */
    padding-bottom: calc(2 * var(--vw));
    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: calc(21 * var(--vw));
        font: normal normal normal var(--s-14)/calc(17 * var(--vw)) Inter;
        color: #888888 !important;
        margin-bottom: var(--s-3);
    }

        .User-Profile-Tooltip ul li i {
            color: var(--primary-color);
            font-size: calc(18 * var(--vw));
            margin-right: var(--s-10);
        }

ul {
}

.User-Profile-Tooltip ul li:first-child {
    font-weight: bold;
    /*letter-spacing: calc(0.49 * var(--vw));*/
}

.menu-items ul li ul li a.selected {
    background: var(--main-color);
}

.toolbar-container.wi.with-breadcrumbs {
    display: flex;
    clear: both;
    margin-bottom: var(--s-20);
    margin-top: calc(32 * var(--vw));
    width: 100%;
    height: calc(32 * var(--vw));
}

    .toolbar-container.wi.with-breadcrumbs .toolbar {
        display: block;
        float: var(--floatr);
        width: auto;
        align-items: center;
    }

.page-breadcrumb.with-toolbar {
    margin: 0;
    float: var(--floatl);
    height: calc(32 * var(--vw));
    line-height: calc(32 * var(--vw));
}

button.toolbar-button.toolbar-edit-btn {
    min-width: calc(80 * var(--vw));
    height: calc(32 * var(--vw));
    border-radius: var(--s-3);
    font-size: var(--s-12);
    border-color: var(--secondary-color);
    margin-top: 0;
    background: #F0F0FC;
    color: var(--secondary-color);
    padding: 0 var(--s-10);
    width: auto;
}

Button.toolbar-button.toolbar-cancel-btn {
    min-width: calc(80 * var(--vw));
    height: calc(32 * var(--vw));
    border-radius: var(--s-3);
    font-size: var(--s-12);
    background: #FFF;
    border-color: var(--border-default-color) !important;
    color: var(--border-default-color);
    width: auto;
    padding: 0 var(--s-10);
    margin-top: 0;
}

button.toolbar-button.toolbar-save-btn {
    min-width: calc(80 * var(--vw));
    height: calc(32 * var(--vw));
    border-radius: var(--s-3);
    font-size: var(--s-12);
    border-color: var(--primary-color);
    margin-top: 0;
    background-color: var(--primary-color);
    color: #000 !important;
    padding: 0 var(--s-10);
    margin-bottom: 0;
}

button.toolbar-button.toolbar-cancel-btn span {
    color: var(--secondary-color);
    font-family: 'Inter';
    line-height: var(--s-40);
    font-weight: 700;
    letter-spacing: normal;
    font-size: var(--s-14);
    display: flex;
    align-items: center;
    gap: var(--s-8);
    width: fit-content !important;
}

.invoice-style .e-input-group, .invoice-style .e-input-group.drop-tree, .invoice-style .e-numeric {
    height: calc(38 * var(--vw)) !important;
    padding: 0 var(--s-8);
}

    .invoice-style .e-input-group input, .invoice-style .e-input-group.drop-tree input, .invoice-style .e-numeric input {
        min-height: calc(37 * var(--vw)) !important;
        height: calc(36 * var(--vw)) !important;
    }

.invoice-style a.send-chat-btn {
    position: absolute;
    bottom: calc(18 * var(--vw));
    right: calc(13 * var(--vw));
    width: var(--s-20);
    height: var(--s-20);
    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: calc(17 * var(--vw));
    display: flex;
    margin-top: calc(-5 * var(--vw));
}

.top-part-invoice-container {
    display: block;
    margin: 0 auto;
    z-index: 2;
    position: relative;
}

.payment-comment-init.top-init .st-init-users {
    width: calc(30 * var(--vw));
    height: calc(30 * var(--vw));
    text-align: center;
    line-height: calc(28 * var(--vw));
    font-size: calc(13 * var(--vw));
    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: 0;*/
    color: #707070;
    opacity: 1;
    font-size: var(--s-12);
    line-height: calc(19 * var(--vw));
    margin-top: var(--s-8);
    display: block;
}

html.rtl .comment-data {
    text-align: right;
}

.payment-comment-container {
    padding: 0 var(--s-20);
}

.comment-list-body .col-lg-12:nth-child(even) .payment-comment-container {
    background-color: transparent;
}

.card-body.invoice-style.np {
    padding: 0;
    height: 100% !important;
}

.np .structure-title {
    padding-left: var(--s-20);
}

span.p-approval-date img {
    margin-top: calc(-4 * var(--vw));
    margin-left: calc(-3 * var(--vw));
}

.light-table-sa .e-grid .e-gridheader table th[rowspan], .light-table-sa .e-grid.e-device .e-gridheader table th[rowspan] {
    padding-bottom: calc(7 * var(--vw));
}

.light-table-sa .e-grid .e-altrow {
    background-color: #fafafa;
}

label.control-label.invoice-label img {
    width: var(--s-20);
}

.prj-name .structure-tags {
    width: auto;
    float: none;
    margin-top: var(--s-1);
    margin-bottom: 0;
    display: inline-block;
    margin-left: var(--s-10);
    padding-top: calc(4 * var(--vw));
    overflow: visible;
    height: calc(18 * var(--vw));
}

    .prj-name .structure-tags span {
        margin-top: 0;
        height: calc(18 * var(--vw));
        line-height: calc(18 * var(--vw));
        margin-top: 0;
    }

.main-approval-right-part h4 {
    height: calc(30 * var(--vw));
    line-height: calc(30 * var(--vw)) !important;
    color: var(--secondary-color) !important;
}

.file-uploaded-container.sector.paymant-file-list {
    margin-bottom: calc(11 * var(--vw));
}

label.lebel.payment-files {
    color: #949595;
    font-family: Inter;
    font-size: var(--s-12);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    display: block;
    margin-top: var(--s-20) !important;
}

.main-drop-area-wrap.invoice-drop-uploader {
    margin: 0 auto;
    display: block;
    width: calc(351 * var(--vw));
}

.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: calc(15 * var(--vw));
}

.card-container-thread {
    overflow: hidden;
    overflow-y: auto;
}

.mt0 label.control-label {
    margin-top: 0 !important;
}

.sub-icon1 {
    display: inline-block;
    width: calc(18 * var(--vw));
    font-size: calc(18 * var(--vw));
    color: #111111;
}

.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: calc(38 * var(--vw)) !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: var(--s-1) solid #949595 !important;
    border-radius: calc(4 * var(--vw)) !important;
    padding: var(--s-5) 0 !important;
    box-shadow: 0 calc(2 * var(--vw)) calc(4 * var(--vw)) 0 rgba(26, 26, 26, 0.05);
    margin-top: calc(4 * var(--vw));
    border: var(--s-1) solid #E7E7E7 !important;
    border-radius: var(--s-3) !important;
    padding: var(--s-8) var(--s-12);
    box-shadow: none;
    margin-top: calc(4 * var(--vw));
}

button.e-css.e-btn.e-upload-browse-btn {
    display: none;
}

li.e-upload-file-list {
    margin-top: 0;
    border: var(--s-1) solid #e3e3e3;
}

ul.e-upload-files {
    border: none !important;
}

li.e-upload-file-list span.e-icons.e-file-delete-btn {
    display: none !important;
}

.menu-items ul > li a:hover {
    background: rgba(251,186,33,0.1) !important;
    color: #111111 !important;
}

    .menu-items ul > li a:hover > i, .menu-items ul > li a:hover > span {
        color: #111111 !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: 0;
}

.fullheight-uploader {
    height: auto;
    display: block;
}

    .fullheight-uploader .main-drop-area-wrap img {
        width: 100% !important;
        display: block;
        margin: 0 auto;
        margin-bottom: var(--s-5)
    }

    .fullheight-uploader span.upload-text, .fullheight-uploader span.upload-small-text {
        width: 100%;
        display: block;
        text-align: center;
        padding: 0;
        margin: 0;
    }

.e-footer-content {
    padding: var(--s-8) var(--s-20) !important;
}

.DP {
    display: block;
}

.multiselect-parent {
    width: 100%;
    display: block;
}

    .multiselect-parent .e-multiselect {
        height: calc(180 * var(--vw));
        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: 0;
    background: white;
    border-top: var(--s-1) solid #e3e3e3;
    width: 100%;
    padding-top: var(--s-5);
    font-weight: 700;
    border-radius: 0 0 calc(22 * var(--vw)) calc(22 * var(--vw));
}

    .role-item.add-new a {
        font-weight: 700;
        font-size: calc(13 * var(--vw));
        /*letter-spacing: calc(0.95 * var(--vw));*/
    }

.fullheight-uploader .text, .fullheight-uploader .small-text {
    display: block;
    width: 100%;
    margin-top: 0;
    margin-bottom: var(--s-12);
}

.fullheight-uploader .main-drop-area-wrap {
    width: 100%;
}

.fullheight-uploader .text, .fullheight-uploader .small-text {
    display: block;
    width: calc(100% - calc(32 * var(--vw))) !important;
    margin-top: 0;
    margin-bottom: var(--s-12);
}

.fullheight-uploader .main-drop-area-wrap {
    width: 100%;
}

.card-wizard-new .main-card {
    margin-bottom: 0;
}

.full-height-toolbar-filter.card-wizard-new .wizard-body {
    background: transparent;
    border: none;
}

.card-wizard-new .back-btn {
    left: 0 !important;
}

.card.upload-wizard .card {
    margin-bottom: 0
}

span.comment-time {
    font-size: var(--s-10);
}

span.comment-delete {
    position: absolute;
    top: calc(6 * var(--vw));
    right: calc(9 * var(--vw));
    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: var(--s-10);
    font-size: calc(15 * var(--vw));
    /* line-height: calc(33 * var(--vw)); */
    cursor: pointer;
    color: var(--secondary-color);
}

label.payment-icon-full {
    font-size: calc(15 * var(--vw));
    /* line-height: calc(33 * var(--vw)); */
    cursor: pointer;
    color: var(--secondary-color);
}

.e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
    background: var(--completedColor);
    border-radius: 0 !important;
}

.e-gantt-child-taskbar-inner-div.e-gantt-child-taskbar {
    background: #888888;
    outline: var(--s-1) solid #353535
}

.e-gantt .e-gantt-chart .e-gantt-child-taskbar-inner-div {
    background: var(--notstartedColor);
    outline: none !important;
    height: calc(24 * var(--vw)) !important;
    margin-top: 0 !important;
    border-radius: var(--s-3) !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: 0 !important;
    line-height: calc(27 * var(--vw));
}

.tree-ms .e-outline.e-input-group .e-clear-icon, .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    padding: calc(7 * var(--vw)) var(--s-10);
    position: absolute;
    border: calc(2 * var(--vw));
    top: calc(7 * var(--vw));
}

.tree-ms .e-ddt.e-lib.e-show-dd-icon.e-input-group.e-control-container.e-control-wrapper.e-outline.drop-tree {
    padding: calc(6 * var(--vw)) !important;
    border: var(--s-1) solid #949595 !important;
    border: var(--s-1) solid #E7E7E7 !important;
    border-radius: var(--s-12) !important;
}

.tree-ms span.e-input-group-icon.e-ddt-icon.e-icons {
    margin: 0 !important;
    padding: calc(7 * var(--vw)) var(--s-10) !important;
    position: absolute !important;
    bottom: calc(2 * var(--vw)) !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: calc(26 * var(--vw)) !important;
    min-height: calc(26 * var(--vw)) !important;
    max-height: calc(26 * var(--vw)) !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: calc(2 * var(--vw)) !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: 0 !important
}

label.gantt-edit-text {
    font-size: calc(17 * var(--vw));
    text-align: center;
    cursor: pointer;
    padding-right: calc(7 * var(--vw));
}

.approval-template-body .col {
    min-width: 25%;
    max-width: 25%;
    margin-top: var(--s-20);
}

.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: calc(6 * var(--vw)) !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: var(--s-20) 0;
    overflow-x: hidden;
}

.dialog-header .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    height: calc(24 * var(--vw));
    width: calc(24 * var(--vw));
    padding: calc(6 * var(--vw)) calc(6 * var(--vw)) calc(4 * var(--vw));
}

.dialog-header .e-dlg-header {
    color: #000;
    /* H4 */
    font-family: Inter;
    font-size: calc(17 * var(--vw)) !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: calc(24 * var(--vw));
    /* calc(23.8 * var(--vw)) */
}

.offline-check.mtc10 {
    margin-top: calc(33 * var(--vw));
}

button.e-control.e-btn.e-lib.e-flat.btn-primary2.confirmation-dialog.dialog-header {
    padding: 0 var(--s-12);
    line-height: calc(33 * var(--vw));
}

button.toolbar-button.toolbar-edit-btn.circle-edit {
    height: calc(32 * var(--vw)) !important;
    width: calc(32 * var(--vw)) !important;
    border-radius: 50%;
    border: none;
    min-width: calc(32 * var(--vw));
}

.other-approvers {
    display: none;
    position: absolute;
    top: calc(60 * var(--vw));
    background: white;
    border: var(--s-1) solid #e3e3e3;
    padding: var(--s-14);
    left: calc(-14 * var(--vw));
    z-index: 999;
    border-radius: var(--s-12);
}

.main-approval-container:hover .other-approvers {
    display: block;
}

.multi-approvers::before {
    position: absolute;
    top: calc(-5 * var(--vw));
    width: calc(21 * var(--vw));
    height: calc(21 * var(--vw));
    background-image: url(/img/arrowdown.svg);
    display: block;
    content: '';
    right: 10%;
}

.other-approvers .main-approval-container {
    min-height: calc(76 * var(--vw));
}

    .other-approvers .main-approval-container .approve-btns {
        top: auto;
        bottom: 0;
    }

.multi-approvers {
    cursor: pointer;
}

.card-body.main-approval {
    overflow-x: clip;
    margin-right: var(--s-20);
    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: var(--s-20);
    height: calc(19 * var(--vw));
    position: absolute;
    background-image: url('/img/right-arrow.svg');
    display: block;
    right: var(--s-8);
    top: calc(17 * var(--vw));
    background-size: contain;
    cursor: pointer;
}

.ps-st-right .e-control.e-tooltip.e-lib {
    float: var(--floatr);
    margin-right: 0;
    margin-left: var(--s-5);
    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: var(--s-8);
        display: inline-block;
        width: 100%;
        height: calc(28 * var(--vw));
        float: var(--floatl);
        display: block;
        margin-top: 0;
    }

    .card.card-border.card-project.projectName .pro-stucture-general-details {
        height: auto;
        float: var(--floatl);
        display: block;
        height: calc(54 * var(--vw));
        margin-top: calc(6 * var(--vw));
    }

.str-progress-bar {
    max-height: calc(41 * var(--vw));
    width: 100%;
    float: var(--floatl);
    margin-top: var(--s-14);
    margin-bottom: calc(7 * var(--vw));
    position: relative;
}

.card.card-border.card-project.projectName h5.project-header-title {
    line-height: calc(18 * var(--vw));
    overflow-y: hidden;
    text-overflow: ellipsis;
    max-height: calc(19 * var(--vw));
    margin-bottom: calc(18 * var(--vw));
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    height: var(--s-20);
    font-size: var(--s-16);
}

.show-arrange1 .approval-element-bottom-left {
    width: calc(100 * var(--vw));
}

    .show-arrange1 .approval-element-bottom-left span {
        line-height: var(--s-10);
    }

.general-list-titles .list-item {
    font: normal normal 400 var(--s-14)/calc(22 * var(--vw)) Inter;
    border-bottom: var(--s-1) solid #e7e7e7;
    padding-bottom: var(--s-5);
    margin-bottom: calc(6 * var(--vw));
    color: #3c3c3c;
}

.general-list-titles {
    height: auto;
    overflow: hidden;
    overflow-y: auto;
    margin-bottom: var(--s-20);
}

.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: var(--s-1) solid #E7E7E7;
    opacity: 1;
}

.field-view-mode.color-box .title {
    display: none;
}

.linked-milstone {
    width: 100%;
    margin-top: calc(4 * var(--vw));
    margin-bottom: var(--s-10);
}

#add-activtit-card, button.btn-content.btn-sr {
    padding-top: var(--s-10);
    padding-bottom: var(--s-10);
    margin-top: var(--s-10);
    height: calc(35 * var(--vw));
    width: calc(105 * var(--vw));
    background: var(--main-color);
    border-radius: var(--s-12);
    border: none;
}

span.activity-milstone {
    display: block;
    font-size: calc(11 * var(--vw));
}

span.activity-milstone-view {
    padding-left: var(--s-10);
}

.content.has-filter.p0 {
    padding: 0;
    min-height: calc((100vh / var(--zoom)) - calc(68 * var(--vw)) );
    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: calc(2 * var(--vw)) !important;
}

.activity-milestone-title span i {
    padding-right: var(--s-3);
}

.activity-milestone-title span {
    font-size: var(--s-12);
    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) !important;
    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: var(--s-16);
    right: var(--s-20);
}

button.btn.btn-hold {
    background: transparent;
    border: none;
    height: var(--s-20);
    border-bottom: var(--s-1) solid #888888;
    padding: 0;
    min-width: auto !important;
    border-radius: 0;
    color: #888888;
    font-size: var(--s-12);
    font-weight: 500;
    font-family: 'Inter';
}

button.btn.btn-resume {
    background: transparent;
    border: none;
    height: var(--s-20);
    border-bottom: var(--s-1) solid var(--ontrackColor);
    padding: 0;
    min-width: auto !important;
    border-radius: 0;
    color: var(--ontrackColor);
    margin-right: calc(19 * var(--vw));
    font-size: var(--s-12);
    font-weight: 500;
    font-family: 'Inter';
    margin: 0;
}

.card.main-tab-card.project-general-list {
    height: calc(285 * var(--vw)) !important;
    overflow: hidden;
    overflow-y: auto;
    overflow-x: hidden;
}

.general-main-list-titles {
    margin-top: var(--s-20);
}

    .general-main-list-titles .list-item {
        font: normal normal 400 var(--s-14) / calc(22 * var(--vw)) Inter;
        border-bottom: var(--s-1) solid #e7e7e7;
        padding-bottom: var(--s-5);
        margin-bottom: calc(6 * var(--vw));
        color: #3c3c3c;
        cursor: pointer;
    }

.list-item.list-item-selected {
    color: #000000;
    font: normal normal 503 var(--s-14) / calc(22 * var(--vw)) Inter;
}

.e-checkbox-wrapper.e-wrapper.e-outline.support-needed {
    margin-top: calc(30 * var(--vw));
}

    .e-checkbox-wrapper.e-wrapper.e-outline.support-needed span {
        font-size: var(--s-12);
        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: calc(24 * var(--vw));
        text-transform: capitalize;
        margin-right: var(--s-1);
    }

button.e-control.e-btn.e-lib.btn-delete-entity {
    box-shadow: none;
    width: auto;
    float: var(--floatr);
    margin-top: calc(24 * var(--vw));
    /* position: absolute; */
    /* bottom: calc(106 * var(--vw)); */
    /* left: calc(427 * var(--vw)); */
}

button.btn-secondary.back.draft-btn {
    float: var(--floatr);
    position: absolute;
    right: calc(153 * var(--vw));
}

.filter-row.sr-filter {
    padding-right: calc(135 * var(--vw));
    margin-bottom: 0 !important;
}

    .filter-row.sr-filter .filter-container {
        height: calc(32 * var(--vw)) !important;
    }

    .filter-row.sr-filter .e-filter {
        margin-right: 0 !important;
    }

    .filter-row.sr-filter h4 {
        float: var(--floatl);
        width: 100%;
        font-size: var(--s-14);
        font-weight: 700;
        padding: 0 var(--s-20);
        display: block;
        max-width: 100%;
        line-height: calc(44 * var(--vw));
        margin-bottom: 0;
    }

    .filter-row.sr-filter button {
        height: calc(32 * var(--vw));
        margin-bottom: 0;
        width: calc(37 * var(--vw));
    }

.sr-stage-tab-content {
    margin-top: calc(25 * var(--vw));
    margin-bottom: var(--s-20);
}

tr.risk-details {
    cursor: pointer;
}

.sr-filter-content .filter-row.sr-filter {
    padding-right: 0;
    margin-right: calc(135 * var(--vw));
    height: calc(32 * var(--vw));
}

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

span.del-title {
    cursor: pointer;
}

    span.del-title.red {
        color: #cd0000;
    }

    span.del-title.green {
        color: green;
    }

#side-menu {
    left: calc(-228 * var(--vw));
    position: fixed;
    top: 0;
    z-index: 1;
    transition: left 0.3s ease-in-out;
}

#main-view.slide #side-menu {
    left: 0;
}

#main-view .page-wrapper {
    width: calc(100% - calc(50 * var(--vw)));
}

#main-view.slide .page-wrapper {
    width: calc(100% - calc(278 * var(--vw)));
}

label.switch-label {
    display: block;
    float: var(--floatl);
    width: calc(100% - var(--s-50));
    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: Inter;
    font-size: var(--s-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    list-style-type: none;
    position: relative;
    padding-left: calc(15 * var(--vw));
    margin-left: 0;
    font-size: var(--s-12);
    color: #2B4485;
    line-hight: calc(18 * var(--vw));
    align-items: self-start;
}

    .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: 0;
        text-align: start;
        text-align-last: start;
        color: #747474;
    }

    .activities-desc-card.act-risk span {
        flex: 1;
    }

img.risk-escalation {
    width: calc(17 * var(--vw));
    height: calc(17 * var(--vw));
    margin-left: var(--s-8);
    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: 0 !important;
}

.e-list-parent.e-ul {
    padding-left: calc(15 * var(--vw)) !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: var(--s-5);
    width: var(--s-12) !important;
    height: var(--s-12) !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: calc(-1 * var(--vw));
    width: calc(24 * var(--vw)) !important;
    height: var(--s-12) !important;
}

.e-icons.interaction.e-icon-collapsible {
    float: var(--floatl);
    margin-top: var(--s-5);
    width: calc(24 * var(--vw)) !important;
    height: var(--s-12) !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: var(--s-10);
    margin-left: 0;
    display: block;
    background: #EBEBEB;
    border-radius: var(--s-10);
}

.progress-bar-value {
    height: calc(11 * var(--vw));
    border-radius: var(--s-10);
}

.project-current-status {
    display: inline-block;
    float: var(--floatr);
    margin-top: calc(9 * var(--vw));
    height: calc(18 * var(--vw));
    border: 0 !important;
}

.e-popup-open {
    overflow: hidden !important;
    overflow-y: auto !important;
    padding-bottom: var(--s-20) !important;
}

.e-content.e-dropdownbase, .e-popup-content.e-dropdown {
    height: auto !important;
    max-height: auto !important;
    overflow: visible !important;
    margin-bottom: 0;
}

.row {
    --bs-gutter-x: var(--s-20) !important;
}

.pro-stucture-general-details span {
    font-size: var(--s-14);
    font-family: 'Inter';
    font-weight: 400;
}

ul.project-card-list li {
    font-family: 'Inter';
    font-weight: 400;
    color: #888888;
    line-height: 140%;
}

.three-dots {
    margin-top: 0;
}

.baseline-data {
    position: absolute;
    top: calc(-14 * var(--vw));
}

span.baseline-text.right {
    position: absolute;
    left: calc(-150 * var(--vw));
    text-align: right;
}

span.baseline-text {
    position: absolute;
    top: calc(-19 * var(--vw));
    width: calc(150 * var(--vw));
    display: block;
    text-align: center;
    left: calc(-75 * var(--vw));
    color: #444444;
    font-size: var(--s-10);
    font-weight: 400;
    font-family: 'Inter';
}

    span.baseline-text.left {
        left: 0;
        text-align: left;
    }

.project-current-progress {
    float: var(--floatl);
    margin-top: calc(9 * var(--vw));
}

.three-dots img {
    height: calc(21 * var(--vw));
    margin: 0;
}

.pro-stucture-desc ul {
    height: calc(147 * var(--vw));
    overflow: hidden;
}

.baseline-data img {
    margin-top: calc(7 * var(--vw));
}

button.toolbar-button.toolbar-add-btn.full {
    width: auto;
    min-width: var(--s-12);
    border-radius: var(--s-3) !important;
    background: var(--main-color) !important;
    padding: 0 var(--s-14);
}

    button.toolbar-button.toolbar-add-btn.full span {
        color: #000;
        font-family: 'Inter';
        font-weight: 700;
        letter-spacing: normal;
        font-size: var(--s-14);
        display: flex;
        align-items: center;
        gap: var(--s-8);
        width: fit-content !important;
        padding: 0;
    }

.combo-box-item-icon-contaner {
    position: relative;
    width: calc(187 * var(--vw));
    display: inline-block;
}

.combo-box-icon {
    position: absolute;
    z-index: 8;
    left: var(--s-12);
    top: calc(7 * var(--vw));
    height: calc(17 * var(--vw));
}

.combo-box-item-icon-contaner .e-input-group {
    padding-left: calc(32 * var(--vw));
}

.combo-box-icon img {
    width: var(--s-20);
    height: var(--s-20);
    display: block;
}

    .combo-box-icon img.order-type {
        cursor: pointer;
    }

.filter-1 input {
    font-family: 'Inter' !important;
    color: #888 !important;
}

.e-treeview .e-list-text {
    padding: 0 !important;
}

.e-icons.interaction.e-icon-expandable {
    margin-left: calc(-30 * var(--vw));
}

.card-header h4 {
    font-family: 'Inter';
    font-size: var(--s-16);
    font-weight: 700;
}

.setting-card label.lebel {
    font-family: 'Inter';
    font-size: var(--s-12);
    line-height: 140%;
    color: #777777;
    margin-bottom: 0;
    display: block;
}

.mb-10 {
    margin-bottom: var(--s-10);
}

.mb-20 {
    margin-bottom: var(--s-20);
}

.hor-label .form-group {
    margin-top: 0;
    margin-bottom: var(--s-10) !important;
}

.hor-label .form-group {
    margin-top: 0;
    margin-bottom: var(--s-10) !important;
    height: calc(18 * var(--vw)) !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: calc(30 * var(--vw));
    height: var(--s-16);
}

.e-switch-wrapper.e-switch-disabled .e-switch-inner, .e-css.e-switch-wrapper.e-switch-disabled .e-switch-inner {
    width: calc(30 * var(--vw)) !important;
    height: var(--s-16) !important;
    border-radius: var(--s-20) !important;
    opacity: 1 !important;
    border: none !important;
    background-color: transparent !important;
}

span.e-switch-handle {
    width: var(--s-10) !important;
    height: var(--s-10) !important;
    background: #FFF !important;
    top: var(--s-3) !important;
    box-shadow: 0 0 calc(1.5 * var(--vw)) var(--s-1) 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: var(--s-16) !important;
    width: calc(30 * var(--vw)) !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: calc(4 * var(--vw));
}

.e-switch-wrapper, .e-css.e-switch-wrapper {
    height: var(--s-16) !important;
    margin-top: calc(4 * var(--vw));
}

.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: 0 !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: 0 !important;
}

    .milestone-element-container:last-child .element-title span {
        text-align: center;
    }

.hor-label .form-group label {
    font-family: 'Inter';
    font-size: var(--s-12);
    line-height: 140%;
    color: #777777;
    margin-bottom: 0;
    display: block;
    line-height: calc(24 * var(--vw));
}

button.toolbar-button.toolbar-save-btn span {
    color: #000;
    font-family: 'Inter';
    line-height: calc(32 * var(--vw));
    font-weight: 700;
    letter-spacing: normal;
    font-size: var(--s-14);
    display: flex;
    align-items: center;
    gap: var(--s-8);
    width: fit-content !important;
}

.small-btns button.toolbar-button.toolbar-add-btn.full {
    height: calc(32 * var(--vw)) !important;
    width: auto;
    border-radius: var(--s-3) !important;
    line-height: calc(32 * var(--vw));
    overflow: hidden;
    margin-top: 0;
}

.small-btns button.toolbar-button.laslastable {
    height: calc(32 * var(--vw)) !important;
    width: calc(32 * var(--vw)) !important;
    min-width: calc(32 * var(--vw)) !important;
    margin-top: var(--s-8);
}

.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: calc(25 * var(--vw));
    }

.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: 'Inter';
    font-weight: 750;
    /*letter-spacing: 0;*/
    font-size: calc(17 * var(--vw));
}

span.e-outline.descriptionText.e-control-container.e-control-wrapper.e-multi-line-input.e-input-group {
    border: var(--s-1) solid #E7E7E7 !important;
    border-radius: var(--s-12) !important;
    padding: var(--s-8) var(--s-12);
    margin-top: calc(4 * var(--vw));
}

span.e-outline textarea {
    padding: 0 !important;
}

.right-side-panel span.e-outline textarea {
    padding: calc(15 * var(--vw)) !important;
}

.card.card-dark ul li {
    font-family: 'Inter';
    font-size: var(--s-14);
    color: #888888;
    margin-bottom: var(--s-10);
}

.card.card-dark ul {
    /* overflow: hidden; */
    height: 100%;
    display: block;
    margin-bottom: 0;
    padding-bottom: var(--s-20);
}

.old-data {
    height: calc(50% - calc(56 * var(--vw))) !important;
    overflow: hidden;
    overflow-y: auto;
    margin-bottom: var(--s-10);
}

button.btn-secondary.save .e-icons {
    padding-top: 0;
    display: block;
    float: right;
    padding-left: var(--s-5);
}

button.btn-secondary.back .e-icons {
    float: var(--floatl);
    padding-right: var(--s-5);
    padding-top: 0;
}

.risk-grid.card-container-thread.mt {
    margin-top: var(--s-50);
}

.slim-form .form-group {
    margin-top: 0;
}

.status-report-form-card {
    height: calc((100vh / var(--zoom)) - calc(68 * var(--vw)) - calc(70 * var(--vw)) - calc(70 * var(--vw)) - calc(81 * var(--vw)));
    overflow-y: auto;
}

.e-popup-open {
    padding-left: 0 !important;
    padding-top: calc(15 * var(--vw));
}

button.e-control.e-btn.e-lib.btn-delete-entity.delete-risk {
    margin-top: var(--s-10);
    height: calc(35 * var(--vw));
    border-radius: var(--s-12);
    width: calc(110 * var(--vw));
    float: var(--floatl);
    border: none !important;
}

.slim-form .normal-input {
    margin-top: 0;
    margin-bottom: var(--s-10);
}

.sr-risk-form {
    height: calc((100vh / var(--zoom)) - calc(411 * var(--vw)));
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: calc(15 * var(--vw));
}

.sr-risk-action-btns {
    padding-right: calc(15 * var(--vw));
}

button.on-off-btn {
    width: calc(50% - var(--s-8));
    border: none;
    border-radius: var(--s-8);
    height: calc(25 * var(--vw));
    font-size: var(--s-14);
}

    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: calc(32 * var(--vw));
    float: var(--floatr);
    width: calc(100% - var(--s-50));
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

    .filter-row.sr-filter .filter-l button {
        float: var(--floatr);
    }

span.st-description, .st-lastupdate {
    font-family: 'Inter';
    text-wrap: pretty;
    display: -webkit-box;
    width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: calc(11 * var(--vw));
    color: #152238;
    font-weight: 500;
}

span.st-lastupdate {
    margin-bottom: calc(33 * var(--vw));
}

.stakeholder-list .st-init-users {
    width: calc(32 * var(--vw));
    height: calc(32 * var(--vw));
    float: var(--floatl);
}

.st-stakeholders .st-init-users {
    float: var(--floatl);
    width: calc(32 * var(--vw));
    height: calc(32 * var(--vw));
    cursor: pointer;
}

.st-stakeholders {
    float: var(--floatl);
    width: 100%;
    margin-top: var(--s-10);
}

.card.main-overview-card .structure-tags {
    width: 100%;
    height: calc(18 * var(--vw));
    margin-bottom: var(--s-10);
}

    .card.main-overview-card .structure-tags span {
        height: calc(18 * var(--vw));
        margin-left: 0;
        margin-top: 0;
        line-height: calc(18 * var(--vw));
    }

span.st-title img {
    /* width: calc(15 * var(--vw)); */
    /* height: calc(15 * var(--vw)); */
    margin-right: var(--s-10);
    float: var(--floatl);
}

.has-scroll .card-body {
    padding-right: 0;
}

    .has-scroll .card-body .card-container-thread {
        padding-right: calc(15 * var(--vw));
    }

.activity-milestone-title {
    font-family: 'Inter';
    font-size: var(--s-14);
    font-weight: 500;
    margin-bottom: var(--s-10);
}

li.activities-desc-card {
    margin-left: calc(15 * var(--vw));
}

.milstone-box {
    float: none;
    height: 100%;
    width: auto;
    display: inline-block;
}

    .milstone-box h4 {
        text-align: center;
        font-family: 'Inter';
        font-weight: 750;
        font-size: calc(11 * var(--vw));
        margin-bottom: 0;
        padding: 0 calc(15 * var(--vw));
        line-height: calc(49 * var(--vw));
        max-width: calc(500 * var(--vw));
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0 auto;
    }

.activity-box {
    float: var(--floatl);
    position: relative;
    height: 100%;
    width: calc(105 * var(--vw));
}

    .activity-box h5, .activity-box span {
        font-weight: 400;
        font-size: var(--s-10);
        width: 100%;
        text-align: center;
        font-family: 'Inter';
    }

    .activity-box.bottom-box h5, .activity-box.bottom-box span {
        position: absolute;
        bottom: 0;
        text-align: center;
    }

    .activity-box.top-box h5, .activity-box.top-box span {
        top: 0;
        text-align: center;
        position: absolute;
    }

.center-border {
    height: var(--s-8);
    width: 100%;
    position: absolute;
    top: calc(50% - calc(4 * var(--vw)));
    background: #EBEBEB;
    border-radius: 0;
    left: 0;
}

.activity-box img {
    top: calc(50% - var(--s-10));
    position: absolute;
    z-index: 9;
    left: calc(50% - var(--s-12));
    width: var(--s-20);
    height: var(--s-20);
}

.activity-box.bottom-box h5 {
    bottom: calc(50% - calc(52 * var(--vw)));
}

.activity-box.bottom-box span {
    bottom: calc(50% - calc(65 * var(--vw)));
}

.activity-box.top-box h5 {
    top: calc(50% - calc(44 * var(--vw)));
}

.activity-box.top-box span {
    top: calc(50% - calc(67 * var(--vw)));
}

.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: calc(85 * var(--vw));
    position: relative;
    border-right: var(--s-1) solid #e3e3e3;
    margin-top: calc(17 * var(--vw));
    padding: 0;
}

.milstone-box:first-child .center-border {
    border-radius: var(--s-8) 0 0 var(--s-8);
}

.milstone-box:last-child .center-border {
    border-radius: 0 var(--s-8) var(--s-8) 0;
}

.milstone-box:last-child .sub-activities {
    border-right: 0;
}

.activity-box span img {
    float: left;
    display: block;
    margin-top: var(--s-1);
    left: calc(50% - var(--s-50));
    height: var(--s-10);
    top: 0;
}

.activity-box span {
    margin-left: var(--s-5);
}

.main-loading-content.full.chat-ai {
    margin-top: calc(56 * var(--vw));
    width: 100%;
    margin: calc(56 * var(--vw)) 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: calc(55 * var(--vw)) !important;
    border-radius: calc(22 * var(--vw));
}

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: var(--s-3) !important;
    box-shadow: none;
    background: #FFF !important;
    border: var(--s-1) solid var(--border-default-color) !important;
}

    span.e-input-group.e-control-container.e-control-wrapper.e-outline.normal-input.chat-box-2 input {
        padding-left: calc(23 * var(--vw)) !important;
        padding-right: calc(23 * var(--vw)) !important;
    }

.chat-text p {
    margin-bottom: 0;
    min-width: calc(30 * var(--vw));
    padding-right: var(--s-20);
}

.chat-text {
    display: inline-block;
}

.chat-line {
    display: inline-block;
    margin-bottom: var(--s-20);
    width: 100%;
}

.status-report-types {
    background: #f4f4f4;
    padding: calc(15 * var(--vw));
    border-radius: calc(22 * var(--vw));
    margin-top: calc(15 * var(--vw));
}

.status-report-type {
    height: var(--s-50);
    line-height: var(--s-50);
    cursor: pointer;
}

    .status-report-type h5 {
        line-height: var(--s-50);
        margin: 0;
        text-align: var(--floatl);
        font-size: calc(15 * var(--vw));
        padding-left: calc(15 * var(--vw));
    }

        .status-report-type h5 img {
            float: var(--floatl);
            height: var(--s-14);
            margin-top: calc(18 * var(--vw));
            margin-right: var(--s-10);
        }

    .status-report-type.active {
        background: #FBBA20;
        border-radius: var(--s-16);
        box-shadow: 0 0 var(--s-5) 0 rgba(0,0,0,0.15);
    }

.card.card-border.card-project.projectName.AI-Project {
    height: auto;
}

.status-report-activity {
    background: #f4f4f4;
    border-radius: var(--s-12);
    padding: calc(15 * var(--vw));
    margin-bottom: var(--s-10);
    display: inline-block;
    width: 100%;
    float: var(--floatl);
    position: relative;
}

.status-report-activity-text p {
    margin: 0;
    font-size: var(--s-14);
    font-weight: 500;
    line-height: calc(25 * var(--vw));
}

.status-report-type-info > h5 {
    font-size: var(--s-14);
    font-weight: 700;
    font-family: 'Inter';
}

.status-report-type-info {
    margin-top: calc(15 * var(--vw));
    display: inline-block;
    min-height: calc(179 * var(--vw));
    position: relative;
    width: 100%;
    height: auto;
}

.status-report-activity-icon {
    float: var(--floatl);
    margin-right: var(--s-10);
    position: relative;
}

.status-report-activity-text {
    float: var(--floatl);
    width: calc(100% - calc(136 * var(--vw)));
}

.status-report-activity-flags {
    float: var(--floatr);
}

img.arrow-icon {
    width: var(--s-20);
    height: var(--s-20);
    padding: var(--s-3);
    margin-left: var(--s-10);
    cursor: pointer;
}

img.flag-icon {
    width: calc(15 * var(--vw));
    margin-left: var(--s-10);
}

.status-report-activity-details {
    display: inline-block;
    width: 100%;
}

.detail-line {
    display: inline-block;
    width: 100%;
    margin-top: var(--s-10);
    float: var(--floatl);
}

.status-report-activity-text b {
    padding-right: var(--s-20);
    width: calc(174 * var(--vw));
    display: block;
    float: var(--floatl);
    font-size: var(--s-14);
    color: var(--secondary-color);
    font-weight: 700;
    font-family: 'Inter';
    line-height: calc(27 * var(--vw));
}

.status-report-activity-icon img {
    width: calc(11 * var(--vw));
    height: auto;
}

.detail-line .status-report-activity-text p {
    float: left;
    width: calc(100% - calc(200 * var(--vw)));
}

.right-side-panel.risk h4 {
    margin-bottom: calc(15 * var(--vw));
}

.right-side-panel.risk h4 {
    margin-bottom: calc(15 * var(--vw));
}

.status-report-risk-list.sr-risk-form {
    padding-right: 0;
}

.l-element {
    float: var(--floatl);
    margin-right: calc(15 * var(--vw));
}

.sr-legeand {
    display: inline-block;
    float: var(--floatr);
    position: absolute;
    width: auto;
    bottom: 0;
    right: var(--s-20);
}

img.l-icon {
    width: var(--s-14);
    margin-right: var(--s-10);
    float: left;
    margin-top: var(--s-5);
}

.l-element:last-child {
    margin-right: 0;
}

.l-element span {
    float: var(--floatl);
    display: block;
    font-size: var(--s-12);
    line-height: calc(25 * var(--vw));
}

span.l-icon.ongoing {
    background: #eeeeee;
    width: calc(30 * var(--vw));
    height: var(--s-14);
    margin-top: var(--s-5);
    margin-right: var(--s-10);
    border-radius: var(--s-10);
}

span.l-icon.resolved {
    background: #CDF9C1;
    width: calc(30 * var(--vw));
    height: var(--s-14);
    margin-top: var(--s-5);
    margin-right: var(--s-10);
    border-radius: var(--s-10);
}

.card.status-report-list-card h4 {
    font-size: var(--s-14);
    font-weight: 750;
    margin: 0;
    float: var(--floatl);
    max-width: calc(100% - var(--s-10));
    text-overflow: ellipsis;
    height: var(--s-20);
    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: calc(24 * var(--vw));
    margin-bottom: var(--s-10);
}

    .status-report-kpi .icon img {
        width: var(--s-12);
        height: calc(23 * var(--vw));
    }

    .status-report-kpi .icon {
        width: calc(18 * var(--vw));
        float: var(--floatl);
        height: calc(24 * var(--vw));
        display: block;
    }

    .status-report-kpi .text {
        font-size: calc(13 * var(--vw));
        font-weight: 600;
        color: #888888;
    }

.i-timline.sr-timeline {
    float: var(--floatl);
    display: block;
    position: relative;
    height: calc(80 * var(--vw));
    width: 100%;
}

.v-line {
    position: absolute;
    width: var(--s-5);
    height: 96%;
    background: #EBEBEB;
    z-index: 0;
    top: 4%;
    border-radius: var(--s-5);
    left: var(--s-3);
}

.timeline-item {
    height: var(--s-20);
    margin-bottom: var(--s-10);
    z-index: 1;
    position: relative;
}

.timeline span {
    font-size: calc(13 * var(--vw));
    font-weight: 600;
    color: #888888;
    padding-left: calc(6 * var(--vw));
}

.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: calc(34 * var(--vw)) !important;
    margin-bottom: var(--s-10);
}

    .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: var(--s-20);
    font-weight: 600;
    color: #1A1A1A;
}

.card.status-report-list-card .str.menu-nav {
    width: var(--s-10);
    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: 0;
    display: none;
}

    .str.dropdown span {
        display: block;
        width: 100%;
        color: #1a1a1a;
        font-weight: 400;
        font-family: 'Inter';
        line-height: calc(23 * var(--vw));
    }

        .str.dropdown span:hover {
            color: var(--primary-color);
        }

        .str.dropdown span i {
            width: calc(26 * var(--vw));
            font-size: var(--s-14);
            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: calc(60 * var(--vw));
}

.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: var(--s-40);
    height: auto;
    width: 100%;
}

.card-header.twolines {
    margin-bottom: var(--s-10);
    height: calc(58 * var(--vw));
}

.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: var(--s-12);
}

.card.status-report-list-card h4.twolines b {
    float: var(--floatl);
    width: calc(100% - calc(25 * var(--vw)));
}

.bg-t {
    background-color: transparent !important;
}

.project-presentation {
    width: calc(976 * var(--vw));
    margin: 0 auto 0 auto;
    overflow-x: hidden;
    padding: 0 var(--s-10);
    padding-top: var(--s-20);
}

    .project-presentation .selected-project {
        background: #FFF;
        border-radius: calc(22 * var(--vw));
        margin-bottom: var(--s-40);
    }

        .project-presentation .selected-project h4 {
            width: 100%;
            text-align: center;
            font-weight: 750;
            font-size: calc(24 * var(--vw));
            line-height: calc(71 * var(--vw));
            padding: 0;
            margin: 0;
        }

.milstone-status span {
    font-size: var(--s-12);
}

img.next-pres {
    position: fixed;
    right: calc((50vw / var(--zoom)) - calc(490 * var(--vw)) - calc(80 * var(--vw)) );
    top: calc((50vh / var(--zoom)) - calc(15 * var(--vw)));
    cursor: pointer;
}

img.prev-pres {
    position: fixed;
    left: calc((50vw / var(--zoom)) - calc(490 * var(--vw)) - calc(80 * var(--vw)));
    top: calc((50vh / var(--zoom)) - calc(15 * var(--vw)));
    cursor: pointer;
}

img.close-pres {
    position: fixed;
    right: var(--s-40);
    top: calc(25 * var(--vw));
    cursor: pointer;
}

.chat-inline .chats {
    position: fixed;
    bottom: 0;
    width: calc(960 * var(--vw));
    height: auto;
    z-index: 999999;
    margin: 0 auto;
    left: 0;
    background: transparent;
    min-height: calc(95 * var(--vw));
    padding: 0 var(--s-5);
}

.chat-inline.style1 .chats {
    bottom: calc(6 * var(--vw)) !important;
}

.full-menu.thin .chat-inline .chats {
    left: calc(50% - calc(478 * var(--vw)));
}

.chat-inline .chats.relative {
    left: 0;
}

.chat-inline .send-chat {
    height: calc(95 * var(--vw));
    background: transparent;
    z-index: 999;
    width: calc(960 * var(--vw));
    margin: 0 var(--s-5);
    left: calc(50% - calc(480 * var(--vw)));
}

.chat-inline a.send-chat-btn {
    top: var(--s-10);
    right: var(--s-5);
    width: calc(45 * var(--vw));
    height: calc(45 * var(--vw));
}

.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: var(--s-5);
}

.card.main-overview-card.milestone-details .card-body {
    padding-bottom: 0;
}

.approvals-kpis {
    float: var(--floatl);
    margin-top: var(--s-20);
}

img.approval-status-img {
    position: absolute;
    top: calc(-6 * var(--vw));
    right: calc(-4 * var(--vw));
    width: var(--s-16);
}

.st-init-users {
    position: relative;
}

.chat-inline.style1 a.send-chat-btn {
    top: var(--s-10) !important;
}

.row.hor-label.full-wd .e-switch-wrapper {
    float: var(--floatr);
}

.card.card-disabled.full-height-toolbar-filter .card-project {
    border: var(--s-1) solid #E7E7E7;
}

.include_btn, .exceclude_btn {
    width: calc(48 * var(--vw));
    height: calc(48 * var(--vw));
    background: #FFF;
    border-radius: var(--s-10);
    text-align: center;
    line-height: calc(48 * var(--vw));
    cursor: pointer;
    margin: 0 auto;
    margin-bottom: var(--s-10);
    position: absolute;
    top: calc(50% - calc(53 * var(--vw)));
    left: calc(50% - calc(24 * var(--vw)));
}

.exceclude_btn {
    top: calc(50% + calc(6 * var(--vw)));
}

.selected-project {
    height: calc(68 * var(--vw));
    width: 100%;
    background: #FFF;
    font-size: calc(24 * var(--vw));
    border-bottom: var(--s-1) solid #F0F0F0;
}

    .selected-project h4 {
        text-align: center;
        line-height: calc(68 * var(--vw));
        font-size: calc(22 * var(--vw));
        margin: 0;
        font-weight: 700;
        color: #000;
    }

.chat-inline.style1.floating .send-chat {
    display: block;
    right: calc(-100% + var(--s-50));
    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: calc(00 * var(--vw));
    width: calc(960 * var(--vw));
    left: calc(50% - calc(470 * var(--vw)) + calc(140 * var(--vw)));
}

.chats.relative .chat-container {
    padding-bottom: calc(95 * var(--vw)) !important;
    width: 100%;
    padding: 0 calc(50% - calc(475 * var(--vw))) calc(95 * var(--vw)) calc(50% - calc(475 * var(--vw)));
}

.ai-floating {
    position: fixed;
    right: calc(-898 * var(--vw));
    bottom: calc(41 * var(--vw));
    z-index: 999999;
    background: #FFF;
    box-shadow: 0 0 calc(4 * var(--vw)) 0 rgba(0, 0, 0, 0.25);
    border-radius: calc(55 * var(--vw));
    height: calc(57 * var(--vw));
    width: calc(950 * var(--vw));
    line-height: calc(57 * var(--vw));
    padding-left: calc(6 * var(--vw));
    transition: right 0.1s ease-in;
    cursor: pointer;
}

    .ai-floating:hover {
        right: calc(-826 * var(--vw));
    }

.bottom-abs.payment-comment-box {
    width: calc(100% - var(--s-40));
    position: absolute;
    left: var(--s-20);
    bottom: var(--s-20);
}

    .bottom-abs.payment-comment-box .e-outline.normal-input {
        width: calc(100% - calc(36 * var(--vw))) !important;
        border: var(--s-1) solid #E7E7E7 !important;
    }

    .bottom-abs.payment-comment-box .send-chat-btn {
        display: none;
    }

.e-filter-parent {
    margin-left: var(--s-20);
    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: 0;
    height: calc(24 * var(--vw));
    margin-left: 0;
    margin-right: 0;
}

.la-filter:before {
    content: '';
    background-image: url(/img/filter.svg);
    height: calc(19 * var(--vw));
    display: block;
    background-repeat: no-repeat;
    background-size: calc(15 * var(--vw));
    background-position: center;
}

.toolbar-container.wi.with-breadcrumbs.pr-60.small-btns button.toolbar-button.toolbar-add-btn.full span {
    /* line-height: calc(32 * var(--vw)) !important; */
}

.tooltip-container {
    position: relative;
}

    .tooltip-container .tooltip-card {
        display: none;
    }

.rel {
    position: relative;
}

.tooltip-container:hover .tooltip-card {
    display: block;
    position: absolute;
    width: calc(273 * var(--vw));
    height: calc(72 * var(--vw));
    background: #FFF;
    z-index: 99999;
    box-shadow: 0 var(--s-3) var(--s-10) 0 rgba(0,0,0,0.1);
    border-radius: calc(22 * var(--vw));
    padding: calc(15 * var(--vw));
    right: calc(-46 * var(--vw));
}

.tooltip-card {
}

    .tooltip-card .st-left {
        float: var(--floatl);
        height: var(--s-40);
        width: var(--s-40);
        margin-right: var(--s-10);
    }

        .tooltip-card .st-left .st-init-users {
            height: var(--s-40) !important;
            width: var(--s-40) !important;
            line-height: var(--s-40) !important;
        }

            .tooltip-card .st-left .st-init-users h2 {
                line-height: var(--s-40);
            }

    .tooltip-card .st-right {
        line-height: var(--s-40);
        color: #000;
        float: var(--floatl);
        width: calc(100% - var(--s-50));
        text-align: var(--floatl);
    }

        .tooltip-card .st-right span {
            display: block;
            width: 100%;
            text-align: var(--floatl);
            line-height: var(--s-20);
            font-weight: 700;
            font-size: calc(13 * var(--vw));
            color: #000 !important;
        }

            .tooltip-card .st-right span:last-child {
                font-weight: 600;
                text-overflow: ellipsis;
                height: calc(19 * var(--vw));
                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: 0 var(--s-3) var(--s-10) 0 rgba(0, 0, 0, 0.1) !important;
    background: #FFF !important;
    border: var(--s-1) 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: var(--s-12);
}

.full-menu.thin .chat-inline .send-chat {
    left: calc(50% - calc(490 * var(--vw)));
}

.full-menu.thin .floating.chat-inline .send-chat {
    left: 200%;
}

img.logo-pres {
    position: fixed;
    left: var(--s-40);
    top: var(--s-14);
    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: 0 !important;
}

.card.card-border.card-project.projectName.AI-Project .pro-stucture-general-details {
    margin-bottom: calc(15 * var(--vw));
}

.card.card-border.card-project.projectName.AI-Project h5.project-header-title {
    margin-bottom: var(--s-10) !important;
}

.status-report-activity:last-child {
    margin-bottom: 0;
}

.status-report-activity-text.full {
    width: calc(100% - calc(34 * var(--vw)));
}

.status-report-type-info.risks {
    padding-bottom: calc(30 * var(--vw));
}

.project-presentation > div {
    margin-bottom: var(--s-40);
}

.loading-chat:before {
    content: '';
    background: url(/img/ai.svg?v=1.1);
    width: calc(31 * var(--vw));
    height: calc(21 * var(--vw));
    position: absolute;
    left: calc(13 * var(--vw));
    top: calc(15 * var(--vw));
    background-position: center;
    background-repeat: no-repeat;
}

.project-presentation .e-accordion .e-acrdn-item {
    margin-bottom: var(--s-40);
}

.timeline-item img {
    width: calc(11 * var(--vw));
    margin-top: calc(-4 * var(--vw));
}

.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: var(--s-40);
    opacity: 1;
    bottom: calc(-15 * var(--vw));
}

.userprofile a {
    color: #000 !important;
}

.card.status-report-list-card .card-header h4 img {
    margin-right: var(--s-10);
    width: calc(15 * var(--vw));
    line-height: var(--s-20);
    margin-top: var(--s-3);
}

.card.status-report-list-card .three-dots img {
    height: var(--s-14);
    margin-top: calc(2 * var(--vw));
    float: var(--floatr);
    margin-right: 0;
    margin-left: 0;
}

.horizontal-timeline {
    position: absolute;
    height: calc(7 * var(--vw));
    width: 100%;
    top: calc(50% - calc(4 * var(--vw)));
    background: #EBEBEB;
    border-radius: var(--s-8);
    left: var(--s-20);
}

.e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
    padding-right: 0;
    padding-left: 0;
}

.chat-text.from-AI .chat-text-content h1 {
    margin-top: var(--s-20);
    font-size: calc(22 * var(--vw));
    font-weight: 700;
}

.chat-text.from-AI .chat-text-content h2 {
    margin-top: calc(15 * var(--vw));
    font-size: var(--s-20);
    font-weight: 700;
}

.chat-text.from-AI .chat-text-content h3 {
    margin-top: calc(15 * var(--vw));
    font-size: calc(18 * var(--vw));
    font-weight: 700;
}

.chat-text.from-AI .chat-text-content h4 {
    margin-top: calc(15 * var(--vw));
    font-size: var(--s-16);
    font-weight: 700;
}

.por-60 {
    padding-right: var(--s-40) !important;
    padding-left: 0 !important;
}

.pol-60 {
    padding-left: var(--s-40) !important;
    padding-right: 0 !important;
}

.project-specific-top .str.menu-nav {
    position: absolute;
    right: var(--s-20);
    top: var(--s-20);
    z-index: 20;
    cursor: pointer;
}

.project-specific-top .str.dropdown-container:focus .str.dropdown {
    right: calc(-20 * var(--vw));
    width: calc(190 * var(--vw));
    top: calc(25 * var(--vw));
    min-height: calc(100 * var(--vw));
    height: auto;
    display: block;
}

.project-specific-top img.context-menu-icon {
    height: var(--s-12);
    margin-right: var(--s-5);
    margin-top: calc(-3 * var(--vw));
}

.project-specific-top .str.dropdown-container:focus .str.dropdown .payment-icon-full {
    margin-bottom: var(--s-10);
    line-height: var(--s-12);
}

.ib {
    border: var(--s-1) solid #2f3068;
}

    .ib h2 {
        line-height: calc(31 * var(--vw));
    }

.chat-text-copy {
    position: absolute;
    top: var(--s-20);
    right: calc(15 * var(--vw));
    cursor: pointer;
    width: var(--s-12);
    height: var(--s-12);
    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: var(--s-12);
    }

    .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: var(--s-10);
}

.card-body.invoice-style.project-left-side {
    padding-top: 0 !important;
    overflow: auto;
    margin-bottom: calc(15 * var(--vw));
    padding-bottom: 0;
}

    .card-body.invoice-style.project-left-side h4 {
        text-align: left;
        font: normal normal 700 calc(17 * var(--vw)) / calc(17 * var(--vw)) Inter;
        /* letter-spacing: 0; */
        color: #454545;
        opacity: 1;
        display: block;
        margin-top: var(--s-20);
        height: calc(24 * var(--vw));
        font-weight: 750;
        margin-bottom: var(--s-10);
        line-height: calc(24 * var(--vw));
    }

.skeleton-custom .e-skeleton {
    border-radius: calc(22 * var(--vw));
}

.e-multi-line-input {
    padding-left: var(--s-8) !important;
    padding-right: 0 !important;
}

    .e-multi-line-input textarea {
        padding-right: var(--s-8) !important;
        padding-left: 0 !important;
    }

.e-ddt .e-ddt-icon::before, .e-ddt .e-ddt-icon::after {
    font-size: var(--s-12);
}

.line-base {
    border: var(--s-1) solid #e7e7e7;
    border-radius: 0 0 var(--s-3) var(--s-3);
    margin-top: calc(-11 * var(--vw));
    margin-bottom: var(--s-10);
    min-height: calc(39 * var(--vw));
}

.custom-select-tag-base {
}

    .custom-select-tag-base .normal-input {
        border-radius: var(--s-12) var(--s-12) 0 0 !important;
    }

.tag-base {
    border: var(--s-1) solid #e7e7e7;
    border-radius: 0 0 var(--s-3) var(--s-3);
    margin-bottom: var(--s-10);
    margin-top: calc(-11 * var(--vw));
    min-height: calc(39 * var(--vw));
}

.line-base .e-chip {
    border: none !important;
    border-bottom: var(--s-1) solid #e7e7e7 !important;
    border-radius: 0 !important;
    width: 100%;
}

    .line-base .e-chip:last-child {
        border-bottom: none !important;
    }

div#paymentGrid, #DelivGrid {
    border-radius: var(--s-12);
    overflow: hidden;
    border: var(--s-1) solid #e7e7e7;
}

    div#DelivGrid .e-gridheader, div#paymentGrid .e-gridheader {
        border-top: 0;
    }

    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: var(--s-14);
    }

    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: var(--s-40);
    }

.sf-gantt {
    border-radius: var(--s-3);
    overflow: hidden;
    border: var(--s-1) 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: var(--s-50);
    padding: calc(15 * var(--vw));
    background: #f4f4f4;
    margin-bottom: var(--s-10);
    border-radius: var(--s-12);
    display: inline-block;
}

.detail-list-title {
    float: var(--floatl);
    width: calc(219 * var(--vw));
    line-height: var(--s-20);
}

    .detail-list-title img {
        margin-top: calc(-3 * var(--vw));
        height: calc(15 * var(--vw));
    }

    .detail-list-title span {
        font-size: var(--s-14);
        font-weight: 700;
        color: var(--secondary-color);
        margin-left: var(--s-10);
        margin-right: var(--s-10);
    }

.detail-list-content {
    float: var(--floatl);
    font-size: var(--s-14);
    font-weight: 500;
    width: calc(100% - calc(231 * var(--vw)));
    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: var(--s-20);
    overflow-y: auto;
    margin-top: var(--s-20);
}

    .card-body.card-scroll span.st-title {
        margin-top: 0;
    }

.general-list-titles.custom-list {
    padding-left: calc(15 * var(--vw));
    padding-right: calc(15 * var(--vw));
}

.form-description {
    font-size: var(--s-12);
    font-weight: 400;
    color: #777777;
    line-height: 1.4;
    margin-top: var(--s-5);
}

.form-group.ha label small {
    line-height: var(--s-12);
    float: left;
    display: block;
    font-weight: 400 !important;
    font-size: var(--s-12);
    line-height: 1.4;
}

.form-group.ha {
    height: auto !important;
}

    .form-group.ha label {
        font-weight: 700;
        line-height: 1.4;
        font-size: var(--s-12);
    }

.milestone-expand {
    width: var(--s-20);
    cursor: pointer;
    float: var(--floatr);
    margin-left: var(--s-10);
}

.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)) - calc(80 * var(--vw)));
        min-width: calc(320 * var(--vw));
        z-index: 99999;
        top: calc(50% - calc(150 * var(--vw)));
        height: calc(300 * var(--vw));
        transition: all 0.2s ease;
        left: calc(var(--s-40) );
        background: white;
        padding: calc(15 * var(--vw));
        border: var(--s-1) solid #e7e7e7;
        border-radius: calc(22 * var(--vw));
        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% - calc(54 * var(--vw)));
}

.structure-milestone.expanded .project-details {
    height: calc(100%);
}

.structure-milestone.expanded .st-title.active, .structure-milestone.expanded .st-title:hover {
    border-bottom: calc(2 * var(--vw)) solid var(--main-color) !important;
}

.structure-milestone.expanded .st-title {
    margin-right: calc(15 * var(--vw));
}

.approval-data .card {
    background: transparent;
    margin: 0;
}

button.toolbar-button.toolbar-save-btn img.toolbar-add-btn-icon {
    height: calc(13 * var(--vw));
}

button.toolbar-button.toolbar-cancel-btn.reject {
    border-color: #B94444;
    background-color: #FFF1F1;
    min-width: calc(80 * var(--vw));
    width: auto;
    padding: 0 var(--s-10);
    line-height: calc(32 * var(--vw));
    min-width: calc(80 * var(--vw));
    height: calc(32 * var(--vw));
    border-radius: calc(11 * var(--vw));
    font-size: var(--s-12);
    background: #F0F0FC;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    margin-top: var(--s-8);
    width: auto;
    padding: 0 var(--s-10);
    height: calc(32 * var(--vw)) !important;
    width: auto;
    border-radius: var(--s-3) !important;
    margin-top: var(--s-8);
    line-height: calc(32 * var(--vw));
    overflow: hidden;
    margin-top: 0;
}

    button.toolbar-button.toolbar-cancel-btn.reject img {
        margin-top: calc(-3 * var(--vw));
        height: var(--s-12);
        margin-left: var(--s-10);
    }

button.toolbar-button.toolbar-edit-btn span {
    color: var(--secondary-color);
    font-family: 'Inter';
    font-weight: 700;
    letter-spacing: normal;
    font-size: var(--s-14);
    display: flex;
    align-items: center;
    gap: var(--s-8);
    width: fit-content !important;
}

button.toolbar-button.toolbar-edit-btn img {
    height: calc(13 * var(--vw));
    margin-top: calc(-2 * var(--vw));
    margin-left: var(--s-10);
}

Button.toolbar-button.toolbar-cancel-btn img {
    height: var(--s-12);
}

/*** 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: calc(80 * var(--vw));
    border-radius: var(--s-3) !important;
    padding: 0 calc(15 * var(--vw));
    height: calc(32 * var(--vw));
    box-shadow: none;
    margin-right: var(--s-12);
    color: #888888;
    background: #FFF !important;
    line-height: calc(32 * var(--vw));
    padding: 0 var(--s-10);
    text-transform: capitalize;
    font-size: calc(13 * var(--vw));
    font-weight: 600;
    margin-bottom: 0 !important;
}

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: 0 !important;
    padding-right: 0 !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: calc(73 * var(--vw));
    top: var(--s-20);
    height: calc(32 * var(--vw));
}

    .next-prev-sr img {
        height: var(--s-20);
        margin-right: var(--s-10);
        margin-top: var(--s-5);
    }

    .next-prev-sr .disabled {
        opacity: 0.1;
        cursor: not-allowed;
    }

.approval-data.main-project-approval {
    top: calc(-9 * var(--vw));
}

    .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)) - calc(159 * var(--vw))) !important;
    overflow-y: auto;
    min-height: auto !important;
}

span.prj-desc.no-display-name {
    display: none;
}

span.prj-name.no-display-name {
}

.approval-time-line {
    position: absolute;
    height: var(--s-10);
    width: calc(100% - calc(30 * var(--vw)));
    border-radius: var(--s-10);
    background: #ebebeb;
    left: calc(15 * var(--vw));
    top: calc(50% - var(--s-5));
    z-index: 1;
}

.approval-top-part {
    height: var(--s-40);
    width: 100%;
    text-align: center;
}

    .approval-top-part img {
        display: none;
    }

.approval-bottom-part {
    height: auto;
    margin-top: var(--s-20);
}

.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: calc(30 * var(--vw));
}

.completed-activities-icon.has-steerco img.steerco-icon {
    top: var(--s-50);
    position: absolute;
    height: var(--s-14);
    text-align: center;
    right: var(--s-1);
    left: var(--s-1);
}

.status-report-activity .steerco-icon {
    position: absolute;
    top: var(--s-10);
    right: var(--s-10);
    width: var(--s-10);
    cursor: pointer;
}

.onhover .status-report-activity-flags {
    opacity: 0;
}

.onhover:hover .status-report-activity-flags {
    opacity: 1;
}

.rich-text p {
    font-family: 'Inter' !important;
    font-size: var(--s-14) !important;
}

.rich-text .text-content {
    overflow: hidden;
    padding: var(--s-20);
    border: var(--s-1) solid #e3e3e3;
    border-radius: 0 0 var(--s-12) var(--s-12);
    overflow-y: auto;
}

a.main-level > i {
    width: calc(18 * var(--vw));
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.ssp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(24 * var(--vw));
}

.ssp-topbar-title {
    font-size: 1rem;
    font-weight: 600;
    color: #3a3a3a;
    display: flex;
    align-items: center;
    gap: var(--s-10);
}

.ssp-topbar-desc {
    font-size: 0.82rem;
    color: #888;
    font-weight: 400;
}

.ssp-placeholder-title {
    color: #aaa;
    font-weight: 500;
}

.ssp-add-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--vw));
    padding: calc(4 * var(--vw)) calc(18 * var(--vw));
    border: none;
    border-radius: var(--s-3) !important;
    background: var(--main-color) !important;
    color: #000;
    font-family: 'Inter';
    line-height: var(--s-40);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: normal;
    cursor: pointer;
    transition: background 0.18s;
}

    .ssp-add-btn:hover {
        background: #16304f;
    }

/* ── History bar ─────────────────────────────────────────────────────────── */
.ssp-history-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8);
    margin-bottom: var(--s-20);
}

.ssp-history-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--vw));
    padding: var(--s-5) var(--s-14);
    border: calc(1.5 * var(--vw)) solid #d4dce8;
    border-radius: var(--s-20);
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
}

    .ssp-history-chip.active, .ssp-history-chip:hover {
        border-color: #1e3a5f;
        color: #1e3a5f;
        background: #eaf0f8;
    }

.ssp-history-date {
    font-weight: 400;
    color: #aaa;
    font-size: 0.72rem;
}

.ssp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(80 * var(--vw)) var(--s-40);
    background: #fff;
    border-radius: var(--s-3);
    border: calc(2 * var(--vw)) dashed #c8d6e5;
    text-align: center;
    color: #888;
    margin-right: var(--s-40);
}

.ssp-empty-icon {
    font-size: 3rem;
    color: #c8d6e5;
    margin-bottom: var(--s-12);
}

.ssp-empty p {
    margin-bottom: var(--s-20);
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN GRID
   Layout: [labels-panel] [columns-area]
   Rows inside both halves must be identical in height so they align.
   ═══════════════════════════════════════════════════════════════════════════ */
.ssp-grid-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--s-20);
}

/* ── Left: Labels panel ──────────────────────────────────────────────────── */
.ssp-labels-panel {
    width: calc(320 * var(--vw));
    flex-shrink: 0;
    padding-top: calc(75 * var(--vw));
}

/* Sector header row – height must equal .ssp-col-spacer */
.ssp-sector-header {
    display: flex;
    align-items: center;
    gap: calc(7 * var(--vw));
    padding: 0 calc(4 * var(--vw));
    width: 100%;
    margin: 0;
}

.ssp-sector-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.ssp-sector-name {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Project row – height must equal .ssp-approval-cell */
.ssp-project-row {
    height: calc(34 * var(--vw));
    display: flex;
    align-items: center;
    margin-bottom: 0;
    background: #ebebeb;
    border-radius: calc(6 * var(--vw));
    padding: 0 var(--s-12);
}

.ssp-project-name {
    font-size: 0.8rem;
    color: #3a3a3a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

/* ── Reviews section (bottom of left panel) ──────────────────────────────── */
.ssp-reviewer-row {
    background: #EFEFEF;
    border-radius: calc(6 * var(--vw));
    width: 100%;
}

    .ssp-reviewer-row:last-child {
        border-bottom: none;
    }

/* ── Right: columns area ─────────────────────────────────────────────────── */
.ssp-columns-area {
    display: flex;
    align-items: flex-start;
    gap: var(--s-20);
    overflow-x: auto;
    flex: 1;
}

/* ── Individual reviewer column card ─────────────────────────────────────── */
.ssp-reviewer-col {
    width: calc(230 * var(--vw));
    flex-shrink: 0;
    padding: 0;
}

/* Column header */
.ssp-col-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--vw));
    border-bottom: var(--s-1) solid #f2f2f2;
    padding: 0;
    height: calc(75 * var(--vw));
    position: relative;
}

.ssp-col-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e2a38;
    text-align: center;
}

.ssp-col-countdown {
    display: inline-flex;
    align-items: center;
    gap: var(--s-5);
    margin-top: calc(6 * var(--vw));
    padding: var(--s-3) var(--s-10);
    font-size: calc(11 * var(--vw));
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

    .ssp-col-countdown i {
        font-size: calc(13 * var(--vw));
        color: #f59e0b;
    }

    .ssp-col-countdown.overdue {
        /*background: #fef2f2;*/
        border-color: #fecaca;
        color: #dc2626;
    }

.ssp-col-spacer {
    height: calc(24 * var(--vw));
    margin-top: 0;
}

.ssp-approval-cell {
    background: #EFEFEF;
    border-radius: calc(4 * var(--vw));
    padding: calc(4 * var(--vw)) calc(6 * var(--vw));
    display: flex;
    align-items: center;
    min-height: calc(34 * var(--vw));
    max-height: calc(34 * var(--vw));
    flex-direction: row;
    width: 100%;
}

    .ssp-approval-cell:hover {
        background: #e0e0e0;
    }

    .ssp-approval-cell.approved {
        background: #ebebeb;
    }

.ssp-review-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(36 * var(--vw));
    /* margin: calc(4 * var(--vw)) calc(6 * var(--vw));
    border: var(--s-1) solid #e5e7eb;*/
    border-radius: calc(6 * var(--vw));
    background: #fff;
}

.ssp-thumb-icon {
    font-size: 1.15rem;
    color: #22c55e;
}

.ssp-thumb-icon {
    height: 80% !important;
    height: var(--s-20) !important;
    margin: 0 auto;
}

.ssp-confirm-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: #fff;
    border-radius: var(--s-10);
    box-shadow: 0 calc(4 * var(--vw)) var(--s-20) rgba(0, 0, 0, 0.18);
    padding: var(--s-14) var(--s-16);
    min-width: calc(160 * var(--vw));
    text-align: center;
    animation: ssp-popup-in 0.15s ease-out;
}

img.hoh.cp {
    width: calc(22 * var(--vw));
    height: calc(22 * var(--vw));
}

@keyframes ssp-popup-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.ssp-confirm-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(6 * var(--vw));
    margin-bottom: var(--s-12);
}

    .ssp-confirm-content span {
        font-size: 0.8rem;
        font-weight: 600;
        color: #1e2a38;
        white-space: nowrap;
    }

.ssp-confirm-actions {
    display: flex;
    gap: var(--s-8);
    justify-content: center;
}

.ssp-confirm-yes {
    padding: var(--s-5) calc(18 * var(--vw));
    border: none;
    border-radius: calc(6 * var(--vw));
    background: #22c55e;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

    .ssp-confirm-yes:hover {
        background: #1aad50;
    }

.ssp-confirm-no {
    padding: var(--s-5) calc(18 * var(--vw));
    border: none;
    border-radius: calc(6 * var(--vw));
    background: #e5e7eb;
    color: #555;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

    .ssp-confirm-no:hover {
        background: #d1d5db;
    }

span.ssp-structure-title {
    font-size: var(--s-14) !important;
    font-weight: 600;
}

/* ── Add-column card ─────────────────────────────────────────────────────── */
.ssp-addcol-card {
    width: calc(130 * var(--vw));
    flex-shrink: 0;
    background: #fff;
    border: calc(2 * var(--vw)) dashed #c8d6e5;
    border-radius: var(--s-14);
    padding: var(--s-14) var(--s-10);
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
    align-self: flex-start;
}

.ssp-addcol-input {
    width: 100%;
    border: none;
    border-bottom: calc(1.5 * var(--vw)) solid #e0e0e0;
    background: transparent;
    font-size: 0.78rem;
    color: #555;
    padding: var(--s-5) calc(2 * var(--vw));
    outline: none;
    box-sizing: border-box;
}

    .ssp-addcol-input::placeholder {
        color: #bbb;
    }

/* Override Syncfusion date picker to look minimal */
.ssp-addcol-date-wrap .e-input-group, .ssp-addcol-date-wrap .e-date-wrapper {
    border: none !important;
    border-bottom: calc(1.5 * var(--vw)) solid #e0e0e0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 0.78rem !important;
}

.ssp-addcol-date-wrap .e-input {
    font-size: 0.78rem !important;
    color: #555 !important;
}

.ssp-addcol-actions {
    display: flex;
    gap: calc(6 * var(--vw));
    margin-top: calc(4 * var(--vw));
}

.ssp-addcol-cancel {
    flex: 1;
    padding: calc(7 * var(--vw)) 0;
    border: none;
    border-radius: calc(7 * var(--vw));
    background: #1e2a38;
    color: #fff;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s;
}

    .ssp-addcol-cancel:hover {
        background: #0f1a28;
    }

.ssp-addcol-confirm {
    flex: 1;
    padding: calc(7 * var(--vw)) 0;
    border: none;
    border-radius: calc(7 * var(--vw));
    background: #f59e0b;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

    .ssp-addcol-confirm:hover:not(:disabled) {
        background: #d97706;
    }

    .ssp-addcol-confirm:disabled {
        background: #e0d9cc;
        cursor: not-allowed;
    }

/* ── Responsive: horizontal scroll on small screens ─────────────────────── */
@media (max-width: 900px) {
    .ssp-grid-wrapper {
        flex-direction: column;
    }

    .ssp-labels-panel {
        width: 100%;
    }

    .ssp-columns-area {
        padding-left: 0;
        padding-top: var(--s-10);
        width: 100%;
    }
}

.ssp-structure-header {
    display: flex;
    gap: var(--s-8);
    align-items: center;
    margin-top: 0;
}

    .ssp-structure-header img {
        width: var(--s-16);
    }

    .ssp-structure-header h3 {
        font-size: var(--s-20);
        font-weight: 700;
        margin: 0;
        flex: 1;
    }

.ssp-sector-projects {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    margin-top: var(--s-10);
    padding: 0 !important;
}

.ssp-sector-projects-item {
    background: #EFEFEF;
    border-radius: calc(4 * var(--vw));
    padding: calc(4 * var(--vw)) calc(6 * var(--vw));
    display: flex;
    align-items: center;
    min-height: calc(34 * var(--vw));
    max-height: calc(34 * var(--vw));
}

    .ssp-sector-projects-item h4 {
        font-size: calc(13 * var(--vw));
        font-weight: 400;
        color: #374151;
        padding: 0 var(--s-8);
        margin: 0;
        cursor: default;
    }

.ssp-structure-header h3 small {
    float: right;
}

/* The Core Animation: Slide Up and Fade In */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(var(--s-20));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Utility Class to apply to Cards or Elements */
.react-fade-in {
    opacity: 0;
    /* Starts invisible */
    animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Staggered Delays (Apply these to list items) */
.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.5s;
}

.delay-6 {
    animation-delay: 0.6s;
}

.delay-7 {
    animation-delay: 0.7s;
}

.delay-8 {
    animation-delay: 0.8s;
}

.delay-9 {
    animation-delay: 0.9s;
}

.delay-10 {
    animation-delay: 1s;
}

/* Subtle Hover Effect (Standard for React Cards) */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .card-hover:hover {
        transform: translateY(calc(-5 * var(--vw)));
        box-shadow: 0 calc(4 * var(--vw)) var(--s-20) rgba(0,0,0,0.05);
    }

.ssp-section {
    margin-top: 0;
    /*    padding-top: var(--s-14);
    border-top: var(--s-1) solid #e5e7eb;*/
    margin-bottom: var(--s-10);
}

.ssp-section-scroll {
    max-height: calc(180 * var(--vw)) !important;
    overflow-y: auto !important;
}

.ssp-hint {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 400;
    margin-left: var(--s-8);
}

.ssp-sector-block {
    padding: 0 calc(15 * var(--vw));
    margin-bottom: var(--s-20);
}

    .ssp-sector-block:last-child {
        border-bottom: none;
    }

.ssp-sector-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(6 * var(--vw));
}

.ssp-sector-count {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
}

.ssp-project-checks {
    display: flex;
    flex-wrap: wrap;
    gap: calc(4 * var(--vw)) var(--s-16);
    padding-left: calc(24 * var(--vw));
}

.ssp-proj-check-item {
    font-size: 0.82rem;
}

.ssp-projects-section {
    padding: 0 0;
    background: #FFF;
    border-radius: var(--s-12);
    /*box-shadow: 0 0 var(--s-3) rgba(0,0,0,0.1);*/
}

.ssp-reviewers-section {
    margin-top: var(--s-20);
    padding: calc(15 * var(--vw));
    background: #FFF;
    border-radius: var(--s-12);
    box-shadow: 0 0 var(--s-3) rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--s-10);
}

.ssp-reviewer-col .ssp-sector-projects {
    padding: 0;
}

.ssp-reviewers-section .ssp-approval-cell.approved {
    width: 100%;
}

.ssp-col-header button.list-delete-corner-btn {
    position: absolute;
    top: calc(-10 * var(--vw));
    right: var(--s-5);
    width: calc(22 * var(--vw));
    height: calc(22 * var(--vw));
    border-radius: 50%;
    border: none;
    background: #d93025;
    color: #fff;
    font-size: var(--s-16);
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}

.ssp-col-header {
    position: relative;
}

    .ssp-col-header:hover button.list-delete-corner-btn {
        opacity: 1;
    }

.card-list-delet-option {
    .list-edit-popup {
        position: absolute;
        top: 0;
        left: var(--s-8);
        right: var(--s-8);
        z-index: 100;
        background: #fff;
        border-radius: var(--s-10);
        box-shadow: 0 var(--s-8) calc(30 * var(--vw)) rgba(0,0,0,0.12), 0 calc(2 * var(--vw)) var(--s-8) rgba(0,0,0,0.08);
        padding: var(--s-8);
        animation: listPopupIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: top center;
    }

    @keyframes listPopupIn {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(calc(-4 * var(--vw)));
        }

        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .ssp-projects-section {
        position: relative;
    }

    .list-delete-confirm {
        text-align: center;
        padding: var(--s-12) var(--s-8);
    }

        .list-delete-confirm .delete-warn-icon {
            width: calc(28 * var(--vw));
            height: calc(28 * var(--vw));
            margin-bottom: var(--s-8);
            opacity: 0.6;
        }

        .list-delete-confirm .list-edit-btns {
            justify-content: center;
        }

    .list-edit-option {
        display: flex;
        align-items: center;
        gap: var(--s-10);
        padding: calc(9 * var(--vw)) var(--s-12);
        border: none;
        background: transparent;
        border-radius: calc(6 * var(--vw));
        cursor: pointer;
        font-size: calc(13 * var(--vw));
        font-weight: 500;
        color: #333;
        width: 100%;
        text-align: left;
        transition: background 0.15s;
    }

        .list-edit-option img {
            width: var(--s-16);
            height: var(--s-16);
            opacity: 0.7;
        }

        .list-edit-option:hover {
            background: #f0f3ff;
        }

        .list-edit-option.danger-option {
            color: #d93025;
        }

            .list-edit-option.danger-option:hover {
                background: #fce8e6;
            }

    .list-edit-panel {
        padding: calc(6 * var(--vw)) calc(4 * var(--vw));
        animation: listPanelFade 0.15s ease;
    }

    @keyframes listPanelFade {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .list-edit-panel h4 {
        margin: 0 0 var(--s-10);
        font-size: calc(13 * var(--vw));
        font-weight: 600;
        color: #333;
    }

    .list-edit-panel p {
        font-size: var(--s-12);
        color: #666;
        margin: 0 0 var(--s-12);
        line-height: 1.5;
    }

    .list-edit-btns {
        display: flex;
        align-items: center;
        gap: var(--s-8);
        margin-top: var(--s-10);
    }

        .list-edit-btns .btn {
            height: calc(30 * var(--vw));
            line-height: calc(30 * var(--vw));
            min-width: auto;
            padding: 0 var(--s-16);
            font-size: calc(13 * var(--vw)) !important;
            font-weight: 500 !important;
            border-radius: calc(6 * var(--vw));
        }

        .list-edit-btns .btn-danger {
            background: #d93025;
            color: #fff !important;
            border: none;
        }

            .list-edit-btns .btn-danger:hover {
                background: #c5221f;
                color: #fff !important;
            }

        .list-edit-btns .btn-secondary {
            background: #f1f3f4;
            color: #333 !important;
            border: none;
        }

            .list-edit-btns .btn-secondary:hover {
                background: #e2e5e8;
                color: #333 !important;
            }

        .list-edit-btns a {
            width: calc(30 * var(--vw));
            height: calc(30 * var(--vw));
            display: flex;
            padding: var(--s-8);
        }

    .list-delete-confirm {
        text-align: center;
        padding: var(--s-12) var(--s-8);
    }

        .list-delete-confirm .delete-warn-icon {
            width: calc(28 * var(--vw));
            height: calc(28 * var(--vw));
            margin-bottom: var(--s-8);
            opacity: 0.6;
        }

        .list-delete-confirm .list-edit-btns {
            justify-content: center;
        }
}

.ssp-approval-cell.cp.approved .st-init-users.tooltip-container.right-tooltip.ib {
    width: var(--s-50);
    border: none;
    margin: 0 auto;
    text-align: center;
}

.ssp-col-name a {
    font-weight: 700;
    color: #000 !important;
}

.stakeholder-item {
    padding: calc(4 * var(--vw)) calc(7 * var(--vw));
    font-size: var(--s-14);
    font-weight: 500;
    border-bottom: var(--s-1) solid #e3e3e3;
    width: 100%;
    cursor: pointer;
}

    .stakeholder-item.selected span {
        color: var(--primary-color);
        font-weight: 700;
    }

.entity-stakeholders {
    margin-bottom: var(--s-20);
    margin-top: var(--s-10);
}

.stakeholder-item span {
    color: #464545;
    line-height: calc(24 * var(--vw));
}

span.st-title.entity-title {
    margin-bottom: 0;
    font-size: var(--s-14);
    font-weight: 700;
    padding: calc(4 * var(--vw)) calc(6 * var(--vw));
    height: auto;
    border-radius: var(--s-12);
}

.ssp-projects-section .actions {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--vw));
    opacity: 0;
    width: 100%;
    padding: 0 calc(17 * var(--vw));
}

.ssp-col-header:hover .actions {
    opacity: 1;
}

.card.stakeholder-card {
    margin: 0;
    height: auto;
    margin-bottom: var(--s-10);
}

    .card.stakeholder-card .card-body {
        padding: var(--s-10) !important;
        min-height: auto;
        height: auto;
    }

.stakeholder-card:hover, .stakeholder-card.selected {
    box-shadow: 0 var(--s-1) var(--s-8) rgba(0, 0, 0, 0.12);
}

.project-presentation .ai-floating {
    right: calc(-900 * var(--vw));
}

    .project-presentation .ai-floating:hover {
        right: calc(-800 * var(--vw));
    }

.dialog-subheader {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: calc(2 * var(--vw));
    font-weight: 400;
}

.e-dlg-container:has(.cnr-right-panel) {
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 0 !important;
    position: fixed !important;
}

.cnr-right-panel {
    border-radius: 0 !important;
    box-shadow: none;
}

    .cnr-right-panel textarea {
        height: calc(42 * var(--vw)) !important;
    }

    .cnr-right-panel.e-dialog {
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        left: auto !important;
        margin: 0 !important;
        transform: none !important;
        height: calc(100vh / var(--zoom)) !important;
        max-height: calc(100vh / var(--zoom)) !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0;
        padding: 0;
        /* padding-bottom: 0!important; */
    }

    .cnr-right-panel .e-dlg-header-content {
        flex-shrink: 0;
    }

    .cnr-right-panel .e-dlg-content {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        height: 0 !important;
    }

    .cnr-right-panel .e-footer-content {
        flex-shrink: 0;
        display: flex;
        gap: var(--s-10);
        align-items: center;
        justify-content: flex-end;
        border: none;
    }

        .cnr-right-panel .e-footer-content button {
            margin: 0 !important;
            float: right !important;
            color: #111111 !important;
            font-size: var(--s-14);
            padding: 0 var(--s-12);
            line-height: calc(35 * var(--vw));
            height: calc(35 * var(--vw));
            width: calc(140 * var(--vw));
        }

.ssp-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-10);
}

    .ssp-section-row .st-title {
        margin-bottom: 0;
    }

.ssp-dlg-body .ssp-sector-block {
    border: var(--s-1) solid #e5e7eb;
    /*border-radius: var(--s-8);*/
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
}

.ssp-dlg-body .ssp-structure-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-8) var(--s-14);
    background: #f5f5f5;
    border-bottom: var(--s-1) solid #e5e7eb;
    gap: 0;
    margin-top: 0;
    max-height: calc(48 * var(--vw)) !important;
}

    .ssp-dlg-body .ssp-structure-header img {
        display: none;
    }

    .ssp-dlg-body .ssp-structure-header h3 {
        font-size: 0.82rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
        flex: 1;
        line-height: 1.4;
    }

.ssp-select-all-btn {
    background: none;
    border: none;
    font-size: 0.78rem;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

    .ssp-select-all-btn:hover {
        color: #d97706;
        text-decoration: underline;
    }

.ssp-reviewer-hint {
    padding: var(--s-8) var(--s-14);
    font-size: 0.8rem;
    color: #000;
    background: #f5f5f5;
    border-bottom: var(--s-1) solid #e5e7eb;
    font-weight: 600;
}

.ssp-dlg-body .ssp-sector-projects {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
}

.ssp-check-item {
    display: flex;
    align-items: center;
    gap: var(--s-12);
    padding: calc(9 * var(--vw)) var(--s-14);
    font-size: var(--s-14);
    color: #424242;
    cursor: pointer;
    /*border-bottom: var(--s-1) solid #f3f4f6;*/
    background: #ffffff;
    transition: background 0.12s;
    user-select: none;
    margin: 0;
    max-height: var(--s-40);
}

    .ssp-check-item:last-child {
        border-bottom: none;
    }

    .ssp-check-item:hover {
        background: #fef9ec;
    }

.ssp-check-item--selected {
    background: #fff8e8;
}

    .ssp-check-item--selected .ssp-check-item-label {
        font-weight: 600;
        color: #111827;
    }

.ssp-check-item-label {
    flex: 1;
}

.ssp-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: calc(18 * var(--vw));
    height: calc(18 * var(--vw));
    min-width: calc(18 * var(--vw));
    border: calc(1.8 * var(--vw)) solid #d1d5db;
    border-radius: calc(4 * var(--vw));
    background: #ffffff;
    cursor: pointer;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

    .ssp-checkbox:checked {
        background: #f59e0b;
        border-color: #f59e0b;
    }

        .ssp-checkbox:checked::after {
            content: '';
            position: absolute;
            top: calc(2 * var(--vw));
            left: var(--s-5);
            width: var(--s-5);
            height: calc(9 * var(--vw));
            border: calc(2 * var(--vw)) solid #ffffff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg);
        }

.ssp-order-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    margin-left: auto;
    padding-left: var(--s-8);
}

.ssp-grid-wrapper.ssp-board {
    gap: 0;
}

.ssp-board .ssp-labels-panel {
    width: calc(220 * var(--vw));
    padding-top: 0;
    border-right: var(--s-1) solid #eaecf2;
    background: #f6f6f6;
}

.ssp-board .ssp-columns-area {
    gap: 0;
}

.ssp-board .ssp-reviewer-col {
    border-right: var(--s-1) solid #eaecf2;
    background: #f6f6f6;
    align-items: stretch;
    height: 100%;
    position: relative;
}

.ssp-left-header {
    height: calc(75 * var(--vw));
    display: flex;
    align-items: center;
    padding: 0 calc(15 * var(--vw));
    font-size: var(--s-14);
    font-weight: 700;
    color: #1a2340;
    border-bottom: var(--s-1) solid #eaecf2;
    flex-shrink: 0;
    background: #FFF;
}

.ssp-board .ssp-sector-block {
    padding: 0;
    margin-bottom: 0;
    background: #FFF;
}

.ssp-board .ssp-structure-header {
    height: var(--s-40);
    padding: 0 var(--s-8);
    margin-top: 0;
    background: #F6F6F6;
    border-top: var(--s-1) solid #eaecf2;
    border-bottom: var(--s-1) solid #eaecf2;
}

    .ssp-board .ssp-structure-header h3 {
        font-size: calc(17 * var(--vw));
        margin: 0;
        flex: 1;
        font-weight: 700;
    }

.ssp-structure-header .ssp-col-spacer.header {
    display: none;
}

.ssp-board .ssp-col-spacer, .ssp-board .ssp-col-spacer.header {
    height: var(--s-40);
    background: #fafbfd;
    border-top: var(--s-1) solid #eaecf2;
    border-bottom: var(--s-1) solid #eaecf2;
    margin-top: 0;
}

.ssp-board .ssp-sector-projects {
    gap: var(--s-12);
    margin-top: 0;
}

.ssp-board .ssp-sector-projects-item {
    min-height: calc(35 * var(--vw));
    max-height: calc(35 * var(--vw));
    border-radius: 0;
    background: #fff;
    border-bottom: var(--s-1) solid #f0f2f7;
    padding: 0 calc(15 * var(--vw));
}

    .ssp-board .ssp-sector-projects-item h4 {
        font-size: calc(12.5 * var(--vw));
        font-weight: 500;
        color: #3d4b6b;
        max-height: none;
    }

.ssp-board .ssp-approval-cell {
    min-height: calc(35 * var(--vw));
    max-height: calc(35 * var(--vw));
    border-radius: 0;
    background: #fff;
    border-bottom: var(--s-1) solid #f0f2f7;
    justify-content: center;
    padding: 0 var(--s-10);
}

.ssp-approval-cell:last-child, .ssp-sector-projects-item:last-child {
    margin-bottom: var(--s-12);
}

.ssp-board .ssp-approval-cell:hover {
    background: transparent;
}

.ssp-board .ssp-approval-cell.approved {
    background: #fff;
}

.ssp-board .ssp-review-placeholder {
    cursor: default;
    pointer-events: none;
}

.ssp-board .ssp-col-header {
    padding: var(--s-10) var(--s-12) var(--s-8);
    align-items: flex-start;
    /*justify-content: space-between;*/
    border-bottom: var(--s-1) solid #eaecf2;
    gap: calc(4 * var(--vw));
    background: #FFF;
}

.ssp-col-title-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: calc(4 * var(--vw));
}

.ssp-col-title {
    font-size: calc(13 * var(--vw)) !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-align: start !important;
    color: #111827 !important;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
}

    .ssp-col-title:hover {
    }

.ssp-board .ssp-col-header .actions {
    width: auto;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ssp-board .ssp-col-countdown {
    font-size: calc(11 * var(--vw));
    color: #e67e22;
    border-radius: 0;
    padding: 0;
    margin: 0 !important;
    width: 100%;
    text-align: left;
}

.ssp-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(36 * var(--vw));
    border-radius: calc(4 * var(--vw));
    font-size: var(--s-12);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: opacity .15s;
}

    .ssp-status-pill.cp:hover {
        filter: brightness(.93);
        transform: scale(1.02);
        opacity: .85;
    }

    .ssp-status-pill.cp:active {
        transform: scale(.97);
    }

.ssp-status-completed {
    background: #D5F5E4;
    color: #0D9F50;
    border: var(--s-1) solid #b2dfca;
}

.ssp-status-drafting {
    background: #FEF1D2;
    color: #FBBA20;
    border: var(--s-1) solid #fce08a;
}

.ssp-status-notstarted {
    background: #F6F6F6;
    color: #9ba3b8;
    border: var(--s-1) solid #dde1ec;
}

.ssp-status-delayed {
    background: #fde8ec;
    color: #c0392b;
    border: var(--s-1) solid #f5aab4;
}

.ssp-not-started-text {
    font-size: var(--s-12);
    color: #9ca3af;
    font-weight: 400;
}

.ssp-board .ssp-reviewers-section {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    gap: 0;
    border-top: calc(2 * var(--vw)) solid #eaecf2;
    align-items: stretch;
    flex-direction: column;
}

.ssp-reviewer-section-header i {
    color: #111111 !important;
}

.ssp-reviewer-section-header {
    height: var(--s-40);
    display: flex;
    align-items: center;
    gap: calc(7 * var(--vw));
    padding: 0 var(--s-12);
    font-size: calc(17 * var(--vw));
    font-weight: 600;
    color: #111111;
    background: #F6F6F6;
    border-bottom: var(--s-1) solid #eaecf2;
    font-weight: 700;
}

    .ssp-reviewer-section-header i {
        font-size: calc(17 * var(--vw));
        color: #8794b0;
    }

.ssp-reviewer-col-spacer {
    height: var(--s-40);
    width: 100%;
    flex-shrink: 0;
    background: #F6F6F6;
    border-bottom: var(--s-1) solid #eaecf2;
}

.ssp-project-row.ssp-reviewer-label-row {
    height: calc(44 * var(--vw));
    max-height: calc(44 * var(--vw));
    background: #fff;
    border-radius: 0;
    border-bottom: var(--s-1) solid #f0f2f7;
    gap: calc(9 * var(--vw));
}

/* Left panel reviewers section — header only, no extra bottom space */
.ssp-reviewers-labels {
    padding-bottom: 0 !important;
}

.ssp-reviewer-cell {
    display: flex;
    align-items: center;
    gap: var(--s-8);
    padding: calc(6 * var(--vw)) var(--s-8);
    font-size: var(--s-12);
}

.ssp-approval-cell.ssp-reviewer-cell {
    justify-content: flex-start;
    gap: calc(7 * var(--vw));
    padding: 0 var(--s-10);
    min-height: calc(44 * var(--vw));
    max-height: calc(44 * var(--vw));
}

    .ssp-approval-cell.ssp-reviewer-cell .ssp-status-pill {
        width: auto;
        min-width: calc(80 * var(--vw));
        height: calc(26 * var(--vw));
        padding: 0 var(--s-10);
        font-size: calc(11.5 * var(--vw));
        flex-shrink: 0;
    }

.ssp-reviewer-avatar {
    width: calc(28 * var(--vw));
    height: calc(28 * var(--vw));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ssp-reviewer-avatar h4 {
        font-size: var(--s-10);
        color: #fff;
        margin: 0;
        font-weight: 600;
    }

.ssp-reviewer-short-name {
    flex: 1;
    font-size: var(--s-12);
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ssp-options-menu {
    position: absolute;
    top: calc(18 * var(--vw));
    right: 0;
    z-index: 1000;
    background: #fff;
    border: var(--s-1) solid #e0e0e0;
    border-radius: calc(4 * var(--vw));
    box-shadow: 0 calc(4 * var(--vw)) var(--s-16) rgba(0,0,0,.12);
    min-width: calc(160 * var(--vw));
    /*padding: calc(4 * var(--vw)) 0;*/
}

.ssp-options-item {
    display: flex;
    align-items: center;
    gap: var(--s-8);
    width: 100%;
    padding: var(--s-8) var(--s-14);
    background: none;
    border: none;
    font-size: calc(13 * var(--vw));
    color: #374151;
    cursor: pointer;
    text-align: left;
}

    .ssp-options-item:hover {
        background: #f3f4f6;
    }

.ssp-options-item--danger {
    color: #dc2626;
}

    .ssp-options-item--danger:hover {
        background: #fef2f2;
    }

.ssp-options-divider {
    height: var(--s-1);
    background: #e5e7eb;
}

.ssp-board .ssp-labels-panel {
    border-right: none;
}

.ssp-board .ssp-reviewer-col {
    border-right: none;
}

.ssp-left-header {
    border-bottom: none;
}

.ssp-board .ssp-structure-header {
    border-top: none;
    border-bottom: 0;
    margin-bottom: var(--s-12);
}

.ssp-board .ssp-col-spacer, .ssp-board .ssp-col-spacer.header {
    border-top: none;
    border-bottom: none;
}

.ssp-board .ssp-sector-projects-item {
    border-bottom: none;
}

.ssp-board .ssp-approval-cell {
    border-bottom: none;
}

.ssp-board .ssp-col-header {
    border-bottom: none;
}

.ssp-board .ssp-reviewers-section {
    border-top: none;
}

.ssp-reviewer-section-header {
    border-bottom: none;
}

.ssp-reviewer-col-spacer {
    border-bottom: none;
}

.ssp-status-completed, .ssp-status-drafting, .ssp-status-notstarted, .ssp-status-delayed {
    border: none;
}

.ssp-status-overdue, .ssp-status-overdue i {
    color: #E03131 !important;
}

.ssp-status-active, .ssp-status-active i {
    color: #FBBA20 !important;
}

.ssp-status-urgent, .ssp-status-urgent i {
    color: #BE4D5E !important;
}

.ssp-status-normal, .ssp-status-normal i {
    color: #777777 !important;
}

.ssp-status-file-completed, .ssp-status-file-completed i {
    color: #009A46 !important;
}

.e-outline.e-input-group.e-prepend .e-input-group-icon, .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
    font-size: var(--s-16);
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: var(--s-10) !important;
}

.new-card-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-20);
    /* row and column gap */
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-1 {
    flex: 1;
}

.gap-10 {
    gap: var(--s-10) !important;
}

.gap-16 {
    gap: var(--s-16) !important;
}

.gap-3 {
    gap: var(--s-3) !important;
}

.gap-4 {
    gap: calc(4 * var(--vw)) !important;
}

.gap-5 {
    gap: var(--s-5) !important;
}

.gap-6 {
    gap: calc(6 * var(--vw)) !important;
}

.gap-7 {
    gap: calc(7 * var(--vw)) !important;
}

.gap-8 {
    gap: var(--s-8) !important;
}

.gap-9 {
    gap: calc(9 * var(--vw)) !important;
}

.gap-10 {
    gap: var(--s-10) !important;
}

.gap-18 {
    gap: calc(18 * var(--vw)) !important;
}

.w-70 {
    min-width: calc(70 * var(--vw));
}

.new-card {
    border-radius: var(--new-card-border-radius) !important;
    margin: 0 !important;
    background: #FFF;
    padding: var(--new-card-padding);
    margin-bottom: calc(6 * var(--vw));
}

.tag-bg {
    border-radius: var(--new-card-border-radius);
}

.new-profile-img {
    width: var(--new-profile-size);
    height: var(--new-profile-size);
    border-radius: var(--new-profile-size);
}

    .new-profile-img h4 {
        font-size: var(--new-card-title-size);
        font-weight: var(--new-card-title-weight);
        color: #FFF;
        line-height: var(--new-profile-size);
        text-align: center;
        width: var(--new-profile-size);
    }

.new-card-sub-title {
    font-size: var(--s-14);
    font-weight: 500;
    color: #000;
}

.new-card-text {
    font-size: var(--s-12);
    font-weight: 500;
    color: #000;
}

.bg-Entity {
    background: rgba(var(--entity-color),1);
}

.bg-Vendor {
    background: rgba(var(--vendor-color),1);
}

.bg-5p.bg-Entity {
    background: rgba(var(--entity-color),0.05);
    color: rgba(var(--entity-color),1);
    text-align: center;
}

.bg-5p.bg-Vendor {
    background: rgba(var(--vendor-color),0.05);
    color: rgba(var(--vendor-color),1);
    text-align: center;
}

.bg-5p.bg-None {
    background: rgba(119,119,119,0.05);
    color: rgba(119,119,119,1);
    text-align: left;
    width: auto;
}

.tag-bg {
    font-size: var(--s-10);
    width: 100%;
    padding: 0 var(--s-12);
    font-weight: 600;
    line-height: var(--s-20);
}

.w-fit-content {
    width: fit-content !important;
}

.new-card-title {
    font-size: var(--new-card-title-size);
    font-weight: var(--new-card-title-weight);
    color: #000;
}

/* Tablet */
@media (max-width: 1024px) {
    .new-card-container {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cards per row */
    }
}

/* Mobile */
@media (max-width: 600px) {
    .new-card-container {
        grid-template-columns: 1fr;
        /* 1 card per row */
    }
}

.cnr-right-panel .dialog-subheader {
    color: #888888 !important;
    font-size: var(--s-14) !important;
    font-weight: 500 !important;
}

.cnr-right-panel span.dialog-header {
    margin-bottom: var(--s-10) !important;
}

.cnr-right-panel .st-title {
    font-size: var(--s-14);
    margin-top: 0;
}

.cnr-right-panel .form-group {
    margin-bottom: var(--s-10) !important;
}

.cnr-right-panel .ssp-dlg-body {
    margin-top: var(--s-10);
}

.ssp-reviewers-section .ssp-approval-cell {
    background: transparent;
    cursor: default;
}

.ssp-board .ssp-approval-cell.cp:hover {
    cursor: pointer;
}

.ssp-col-countdown {
    cursor: pointer;
}

    .ssp-col-countdown .full-date {
        display: none;
    }

    .ssp-col-countdown:hover .full-date {
        display: block;
    }

    .ssp-col-countdown:hover .count-down {
        display: none;
    }

/* ===== BOARD: FROZEN PANE (sticky left column + sticky header row) ===== */
/* Single scroll container for both axes */
.ssp-grid-wrapper.ssp-board {
    overflow: auto;
    max-height: calc((100vh / var(--zoom)) - calc(180 * var(--vw)));
    scroll-behavior: smooth;
    align-items: flex-start;
    overflow-x: auto;
    max-width: calc(100% - calc(2 * var(--vw)));
    /* background: #f6f6f6; */
}

/* Columns area must NOT create its own scroll – parent handles it */
.ssp-board .ssp-columns-area {
    overflow: visible;
    min-width: max-content;
}

/* Freeze left panel – sticky on the horizontal axis */
.ssp-board .ssp-labels-panel {
    position: sticky;
    left: 0;
    z-index: 3;
    flex-shrink: 0;
}

/* Freeze top-left corner cell – sticky on both axes */
.ssp-board .ssp-left-header {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #fff;
}

/* Freeze each tracker column header – sticky on the vertical axis */
.ssp-board .ssp-reviewer-col .ssp-col-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}

/* Scroll-state borders – shown only when scrolled away from origin */
.ssp-board .ssp-labels-panel, .ssp-board .ssp-left-header, .ssp-board .ssp-reviewer-col .ssp-col-header {
    transition: box-shadow 0.2s ease;
}

/* Vertical scroll: bottom shadow on sticky headers */
.ssp-board.is-scrolled-y .ssp-left-header, .ssp-board.is-scrolled-y .ssp-reviewer-col .ssp-col-header {
    box-shadow: 0 calc(4 * var(--vw)) var(--s-8) calc(-4 * var(--vw)) rgba(0, 0, 0, 0.12);
}

/* Horizontal scroll: right shadow on sticky left panel */
.ssp-board.is-scrolled-x .ssp-labels-panel {
    box-shadow: var(--s-3) 0 var(--s-8) calc(-2 * var(--vw)) rgba(0, 0, 0, 0.12);
}

.ssp-approval-cell.ssp-reviewer-cell.empty {
    background: transparent;
}

.new-style button.toolbar-button.toolbar-add-btn.full {
    border-radius: var(--new-card-border-radius) !important;
}

.new-style button.toolbar-button.nm.toolbar-edit-btn.circle-edi.toolbar-button.toolbar-cancel-btn.cancel.tagbtn.full {
    border-radius: var(--new-card-border-radius) !important;
    height: calc(32 * var(--vw)) !important;
}

.new-style span.toolbar-text i {
    margin: 0 !important;
}

.new-style span.toolbar-text {
    color: #000;
    font-family: 'Inter';
    line-height: var(--s-40);
    font-weight: 700;
    letter-spacing: normal;
    font-size: var(--s-14);
    display: flex;
    align-items: center;
    gap: var(--s-8);
    width: fit-content !important;
}

.wt.new-style .filter-search {
    height: calc(32 * var(--vw)) !important;
    border-radius: var(--s-3) !important;
    border: var(--s-1) solid var(--border-default-color) !important;
}

span.new-card-text {
    height: var(--s-16) !important;
    overflow-y: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.profile-info-left {
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--vw));
    align-items: flex-start;
}

h3.new-card-title.cp {
    margin-bottom: 0 !important
}

.color-w {
    color: #FFF !important;
}

.tag-big {
    height: var(--s-40);
    min-height: var(--s-40) !important;
    display: block;
    font-size: var(--s-12);
    line-height: var(--s-40);
    min-width: calc(100 * var(--vw));
    text-align: center;
    cursor: pointer;
}

.type-input {
    display: flex;
    gap: var(--s-10);
    width: max-content;
}

span.normal-input.new-form.e-input-group.e-control-container.e-control-wrapper {
    border-radius: var(--new-card-border-radius) !important;
    border-color: #E7E7E7;
}

.dialog-header .e-dlg-header .new-profile-img h4 {
    font-size: var(--new-card-title-size) !important;
    font-weight: var(--new-card-title-weight) !important;
    color: #FFF !important;
    line-height: var(--new-profile-size) !important;
    text-align: center !important;
    width: var(--new-profile-size) !important;
}

.dialog-header .e-dlg-header .new-card-title {
    font-size: var(--new-card-title-size) !important;
    font-weight: var(--new-card-title-weight) !important;
    color: #000 !important;
    margin: 0 !important;
    line-height: var(--s-20) !important;
}

.dialog-header .e-dlg-header .new-card-sub-title {
    font-size: var(--s-14) !important;
    font-weight: 500 !important;
    color: #000 !important;
}

.dialog-header .e-dlg-header .bg-5p.bg-Entity {
    background: rgba(var(--entity-color), 0.05) !important;
    color: rgba(var(--entity-color), 1) !important;
    text-align: center !important;
}

.dialog-header .e-dlg-header .tag-bg {
    font-size: var(--s-10) !important;
    width: 100% !important;
    padding: 0 var(--s-12) !important;
    font-weight: 600 !important;
    line-height: var(--s-20) !important;
    min-height: calc(25 * var(--vw)) !important;
    line-height: calc(25 * var(--vw)) !important;
    max-width: calc(100 * var(--vw)) !important;
    display: block !important;
}

.dialog-header .e-dlg-header .bg-5p.bg-Vendor {
    background: rgba(var(--vendor-color), 0.05) !important;
    color: rgba(var(--vendor-color), 1) !important;
    text-align: center !important;
}

.mt-10 {
    margin-top: var(--s-10) !important;
}

.img-18 img {
    width: calc(18 * var(--vw));
}

.project-card-list-st1 {
    border: var(--s-1) solid #EAE6E6;
    height: var(--s-40);
    padding: var(--s-8);
}

.bold-text {
    font-weight: 700 !important;
}

.form-group.element-label-end.ha {
    display: flex;
    align-items: start;
    gap: calc(30 * var(--vw));
    margin-bottom: calc(24 * var(--vw)) !important;
}

span.toolbar-text i {
    font-size: var(--s-20);
    line-height: var(--s-20);
}

span.e-ddt.e-lib.e-show-dd-icon.e-input-group.e-control-container.e-control-wrapper.e-outline.drop-tree.e-valid-input, .normal-input, .e-multiselect {
    border-radius: var(--s-3) !important;
}

/* ===== Vertical Approval Timeline ===== */
.vertical-approvals-popup .card-body.vertical-approval-body {
    padding: var(--s-16);
    overflow-y: auto;
    max-height: 70vh;
}

.vertical-timeline {
    position: relative;
    padding: var(--s-8) 0;
}

/* Animated entry for each level */
@keyframes vt-slide-in {
    from {
        opacity: 0;
        transform: translateY(calc(18 * var(--vw)));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vt-level {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--s-12);
    margin-bottom: 0;
    animation: vt-slide-in 0.35s ease both;
}

/* Left column: badge + connector line */
.vt-level-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: calc(32 * var(--vw));
}

.vt-level-badge {
    width: calc(32 * var(--vw));
    height: calc(32 * var(--vw));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter';
    font-size: calc(13 * var(--vw));
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    z-index: 1;
    box-shadow: none;
}

    .vt-level-badge.level-approved {
        background: #22c55e;
    }

    .vt-level-badge.level-rejected {
        background: #ef4444;
    }

    .vt-level-badge.level-pending {
        background: #f59e0b;
    }

.vt-level-connector {
    width: calc(2 * var(--vw));
    flex: 1;
    min-height: var(--s-20);
    background: #e5e7eb;
    margin-top: calc(4 * var(--vw));
}

    .vt-level-connector.last {
        background: transparent;
    }

/* Right column: approvers */
.vt-level-approvers {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
    padding-bottom: var(--s-16);
}

.vt-or-label {
    font-family: 'Inter';
    font-size: calc(11 * var(--vw));
    font-weight: 600;
    color: var(--woodsmoke-500, #6D6D6D);
    text-transform: uppercase;
    letter-spacing: calc(0.5 * var(--vw));
    margin-bottom: calc(2 * var(--vw));
}

/* Single approver card */
.vt-approver {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s-10);
    background: #f9fafb;
    border: var(--s-1) solid #e5e7eb;
    border-radius: var(--s-3);
    padding: var(--s-10) var(--s-12);
    transition: box-shadow 0.2s;
}

    .vt-approver:hover {
        box-shadow: 0 calc(2 * var(--vw)) var(--s-10) rgba(0,0,0,0.08);
    }

.vt-approver-avatar {
    position: relative;
    flex-shrink: 0;
    width: var(--s-40);
    height: var(--s-40);
}

    .vt-approver-avatar h4 {
        width: var(--s-40);
        height: var(--s-40);
        border-radius: 50%;
        background: #E8E8E8;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--s-14);
        font-weight: 600;
        margin: 0;
    }

    .vt-approver-avatar .st-init-users {
        width: var(--s-40);
        height: var(--s-40);
        border-radius: 50%;
        background-size: cover;
        background-position: center;
    }

img.vt-status-icon {
    position: absolute;
    bottom: calc(-4 * var(--vw));
    right: calc(-4 * var(--vw));
    width: var(--s-16);
    height: var(--s-16);
}

.vt-approver-info {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--vw));
    flex: 1;
    min-width: 0;
}

.vt-approver-name {
    font-family: 'Inter';
    font-size: calc(13 * var(--vw));
    font-weight: 600;
    color: var(--woodsmoke-800, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-approver-role {
    font-family: 'Inter';
    font-size: calc(11 * var(--vw));
    font-weight: 400;
    color: var(--woodsmoke-500, #6D6D6D);
}

.vt-approver-status-date {
    font-family: 'Inter';
    font-size: calc(11 * var(--vw));
    color: var(--woodsmoke-500, #6D6D6D);
    margin-top: calc(2 * var(--vw));
}

.vt-elapsed-time {
    display: inline-flex;
    align-items: center;
    gap: calc(4 * var(--vw));
    font-family: 'Inter';
    font-size: calc(11 * var(--vw));
    font-weight: 500;
    color: #fff;
    background: var(--primary-color, #3b82f6);
    border-radius: var(--s-20);
    padding: calc(2 * var(--vw)) var(--s-8);
    margin-top: 0;
    align-self: flex-start;
    margin-left: calc(17 * var(--vw));
    line-height: calc(15 * var(--vw));
}

    .vt-elapsed-time::before {
        font-size: var(--s-10);
    }

/* Status color overrides on card border */
.vt-approver[class*="Approved"] {
    border-left: var(--s-3) solid #22c55e;
}

.vt-approver[class*="Rejected"] {
    border-left: var(--s-3) solid #ef4444;
}

.vt-approver[class*="Notified"] {
    border-left: var(--s-3) solid #f59e0b;
}

/* Approve/Reject buttons inside vertical card */
.vt-approver-info .approve-btns {
    display: flex;
    gap: var(--s-8);
    margin-top: var(--s-8);
    position: relative;
    float: right;
    margin-left: auto;
    width: fit-content;
    left: 0;
    right: 0
}

/* ===== End Vertical Approval Timeline ===== */
.ellipsis {
    overflow-y: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* None = 0 */
.bg-5p.bg-None {
    background: rgba(var(--none-color), 0.05);
    color: rgba(var(--none-color), 1);
    text-align: center;
}

.bg-None {
    background: rgba(var(--none-color), 1);
}

/* Private Sector = 1 */
.bg-5p.bg-Private_Sector {
    background: rgba(var(--private-sector-color), 0.05);
    color: rgba(var(--private-sector-color), 1);
    text-align: center;
}

.bg-Private_Sector {
    background: rgba(var(--private-sector-color), 1);
}

/* Government Entity = 2 */
.bg-5p.bg-Government_Entity {
    background: rgba(var(--government-entity-color), 0.05);
    color: rgba(var(--government-entity-color), 1);
    text-align: center;
}

.bg-Government_Entity {
    background: rgba(var(--government-entity-color), 1);
}

/* Startup = 3 */
.bg-5p.bg-Startup {
    background: rgba(var(--startup-color), 0.05);
    color: rgba(var(--startup-color), 1);
    text-align: center;
}

.bg-Startup {
    background: rgba(var(--startup-color), 1);
}

/* Academia and Research = 4 */
.bg-5p.bg-Academia_and_Research {
    background: rgba(var(--academia-and-research-color), 0.05);
    color: rgba(var(--academia-and-research-color), 1);
    text-align: center;
}

.bg-Academia_and_Research {
    background: rgba(var(--academia-and-research-color), 1);
}

/* International Organization = 5 */
.bg-5p.bg-International_Organization {
    background: rgba(var(--international-organization-color), 0.05);
    color: rgba(var(--international-organization-color), 1);
    text-align: center;
}

.bg-International_Organization {
    background: rgba(var(--international-organization-color), 1);
}

/* Internal = 6 */
.bg-5p.bg-Internal {
    background: rgba(var(--internal-color), 0.05);
    color: rgba(var(--internal-color), 1);
    text-align: center;
}

.bg-Internal {
    background: rgba(var(--internal-color), 1);
}

.new-card-text-1 {
    font-size: var(--s-12);
    font-weight: 500;
    color: #000;
}

.stages-filter ul {
    padding: 0;
    list-style: none;
    display: flex;
    gap: calc(6 * var(--vw));
    margin: 0;
}

    .stages-filter ul li {
        display: flex;
        color: #1B2A4E;
        background: #EEF2FB;
        border-radius: var(--s-3);
        font-size: calc(11 * var(--vw));
        font-weight: 500;
        padding: var(--s-5) var(--s-10);
        cursor: pointer;
    }

.stages-filter {
    display: flex;
    /* width: 100%; */
    border-bottom: var(--s-1) solid var(--border-default-color);
    padding-bottom: var(--s-16);
    margin-bottom: var(--s-20);
    margin-right: var(--s-40);
}

    .stages-filter ul li.active {
        background: #1B2A4E;
        color: #FFF;
    }

.projects-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-16);
    padding-right: var(--s-40);
}

    .projects-cards .card {
        margin: 0 !important;
    }

.status-kpis {
    display: flex;
    gap: var(--s-12);
    margin-bottom: var(--s-20);
    padding-right: var(--s-40);
}

.kpi-st-1 {
    flex: 1;
    background: #FFFFFF;
    border-radius: var(--s-3);
    border: var(--s-1) solid var(--border-default-color);
    padding: var(--s-14);
    display: flex;
    cursor: pointer;
    flex-direction: column;
    gap: calc(4 * var(--vw));
}

    .kpi-st-1 h5 {
        font-size: var(--s-10);
        font-weight: 700;
        color: #2B4485;
        margin: 0;
    }

    .kpi-st-1 span {
        font-size: calc(24 * var(--vw));
        font-weight: 900;
    }

    .kpi-st-1.active {
        border-bottom: calc(4 * var(--vw)) solid var(--border-default-color);
    }

.project-filter-row {
    display: flex;
    padding: 0 var(--s-40);
    height: calc(34 * var(--vw));
    margin-bottom: var(--s-20);
    gap: var(--s-8);
}

    .project-filter-row > div.search-box {
        max-width: 90%;
        flex: 1;
        position: relative;
    }

        .project-filter-row > div.search-box i {
            height: calc(34 * var(--vw));
            position: absolute;
            line-height: calc(34 * var(--vw));
            left: var(--s-14);
            top: 0;
            color: #7B8FC2;
        }

        .project-filter-row > div.search-box input {
            height: calc(34 * var(--vw));
            border: var(--s-1) solid var(--border-default-color);
            border-radius: var(--s-3);
            font-size: calc(13 * var(--vw));
            color: var(--secondat-color);
            padding-left: calc(38 * var(--vw));
        }

input::-moz-placeholder, input:-ms-input-placeholder, input::placeholder, input::-webkit-input-placeholder {
    color: #7B8FC2 !important;
}

button.dropdown-toggle-filter {
    border: var(--s-1) solid var(--border-default-color);
    background: #FFFFFF;
    border-radius: var(--s-3);
    box-shadow: none;
    height: calc(34 * var(--vw));
    color: #1B2A4E;
    min-width: calc(153 * var(--vw));
}

    button.dropdown-toggle-filter span {
        font-size: calc(13 * var(--vw));
        color: #1B2A4E;
    }

.filter-row-dropdown-select {
    position: relative;
}

button.dropdown-toggle-filter {
    display: flex;
    height: calc(34 * var(--vw));
    line-height: calc(34 * var(--vw));
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--s-12);
}

.project-filter-row .dropdown-item {
    font-size: calc(13 * var(--vw));
    padding: calc(4 * var(--vw)) var(--s-14);
    border-bottom: var(--s-1) solid #e3e3e3;
    color: #1B2A4E;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-filter-row .dropdown-menu.show {
    right: 0 !important;
    left: 0 !important;
    width: 100%;
    padding-bottom: 0;
    padding-top: 0;
    box-shadow: 0 0 var(--s-3) rgba(0,0,0,0.1);
    overflow: hidden;
    border-radius: 0 0 var(--s-3) var(--s-3);
    min-width: var(--s-10);
}

span.card-project-label.label-Structure {
    background: #EEF2FB;
    color: #152238;
    text-transform: uppercase;
    letter-spacing: 6%;
}

span.card-project-label.label-Recoverable_Delay {
    background: var(--recoverableDelayedColorLight);
    color: var(--recovrableDelayedColor);
    border-radius: var(--s-20);
    border: var(--s-1) solid var(--recovrableDelayedColor);
}

span.card-project-label.label-OnTrack {
    background: #FFF;
    color: var(--ontrackColor);
    border-radius: var(--s-20);
    border: var(--s-1) solid var(--ontrackColor);
}

.card-project-labels {
    display: flex;
    gap: calc(6 * var(--vw));
}

span.card-project-label {
    padding: calc(4 * var(--vw)) var(--s-8);
    font-size: var(--s-10);
    font-weight: 700;
    border-radius: calc(4 * var(--vw));
    height: calc(22 * var(--vw));
}

    span.card-project-label.label-Stage {
        background: #EEF2FB;
        text-transform: uppercase;
        letter-spacing: 6%;
    }

    span.card-project-label.label-attention {
        float: right;
        background: #FEF2F2;
        color: #B91C1C;
        border-radius: var(--s-20);
        border: var(--s-1) solid #FECACA;
        height: calc(17 * var(--vw));
        font-size: calc(9 * var(--vw));
        padding: 0 var(--s-8);
        line-height: calc(17 * var(--vw));
        display: flex;
        align-items: center;
        gap: var(--s-3);
    }

    span.card-project-label.label-Delayed {
        background: var(--delayedColorLight);
        color: var(--delayedColor);
        border-radius: var(--s-20);
        border: var(--s-1) solid var(--delayedColor);
    }

    span.card-project-label.label-Completed {
        background: var(--completedColorLight);
        color: var(--completedColor);
        border-radius: var(--s-20);
        border: var(--s-1) solid var(--completedColor);
    }

    span.card-project-label.label-Action {
        background: rgba(251,186,32,0.1);
        color: #FBBA20;
        border-radius: var(--s-20);
        border: var(--s-1) solid #FBBA20;
    }

        span.card-project-label.label-Action.cp {
            border-radius: var(--s-3);
        }

    span.card-project-label.label-Risk {
        background: var(--atRiskColorLight);
        color: var(--atRiskColor);
        border-radius: var(--s-20);
        border: var(--s-1) solid var(--atRiskColor);
    }

.projects-cards h5.project-header-title {
    font-size: calc(15 * var(--vw)) !important;
    color: #152238
}

.projects-cards .structure-pr-header.cd {
    height: calc(22 * var(--vw)) !important;
    margin-bottom: var(--s-16) !important;
}

.projects-cards .card.card-border.card-project.projectName h5.project-header-title {
    margin-bottom: calc(4 * var(--vw)) !important;
}

.projects-cards span.last-update::before {
    content: '';
    width: var(--s-10);
    height: var(--s-10);
    background: #2B4485;
    display: inline-block;
    border-radius: 50%;
    margin-right: calc(4 * var(--vw));
    margin-top: var(--s-3);
}

span.last-update {
    font-size: calc(11 * var(--vw));
    color: #152238;
    font-weight: 500;
    display: flex;
}

.projects-cards .pro-stucture-general-details.cd {
    margin: 0;
    height: auto !important;
}

.projects-cards .pro-stucture-desc.cd {
    margin-top: var(--s-10);
    max-height: calc(36 * var(--vw));
}

.projects-cards .pro-stucture-desc ul li {
    font-size: var(--s-12);
    color: #2B4485;
    line-hight: calc(18 * var(--vw));
    align-items: self-start;
}

.projects-cards .pro-stucture-desc ul {
    padding-left: var(--s-14);
}

.project-current-progress {
    margin: 0;
}

    .project-current-progress span {
        color: #152238;
        font-size: var(--s-14);
        font-weight: 700;
    }

.baseline-data {
    bottom: 0;
    top: auto;
}

span.baseline-text {
    color: #D2B56F;
}

.str-progress-bar {
    margin-top: 0;
    height: calc(30 * var(--vw));
    max-height: 100% !important;
    margin: 0 !important;
    position: relative;
}

.baseline-data::after {
    content: '';
    width: calc(2 * var(--vw));
    height: var(--s-8);
    position: absolute;
    background: #D2B56F;
    top: calc(-30 * var(--vw));
    /* border-radius: 0 var(--s-5) var(--s-5) 0; */
}

.project-current-status {
    margin-top: 0;
    margin-bottom: var(--s-8);
}

.projects-cards .card-project {
    height: auto !important;
}

.progress-bar-container {
    height: var(--s-8);
    border-radius: var(--s-3) !important;
    overflow: hidden;
}

.project-current-progress {
    margin-bottom: var(--s-8) !important;
}

.progress-bar-value {
    height: var(--s-8);
    border-radius: var(--s-3) 0 0 var(--s-3);
}

.card.pending-action.card-project {
    border-left: calc(4 * var(--vw)) solid var(--primary-color);
}

.project-card-footer {
    display: inline-block;
    width: 100%;
    margin-top: var(--s-3);
    border-top: var(--s-1) solid #EEF2FB;
    padding-top: var(--s-10);
}

.project-card-pm .st-init-users.cd {
    width: calc(25 * var(--vw)) !important;
    height: calc(25 * var(--vw)) !important;
    margin: 0;
}

.project-card-pm {
    display: flex;
    align-items: center;
    gap: calc(4 * var(--vw));
}

    .project-card-pm > span {
        font-size: var(--s-10);
    }

    .project-card-pm .st-init-users h2 {
        font-size: var(--s-8) !important;
        line-height: calc(25 * var(--vw)) !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

.projects-cards .card-body.structure-project-card {
    padding: calc(15 * var(--vw)) !important;
}

.project-card-footer {
    display: flex;
    gap: calc(4 * var(--vw));
    align-items: center;
}

.project-card-vendor {
    display: flex;
    gap: calc(4 * var(--vw));
    align-items: center;
}

    .project-card-vendor span {
        font-size: var(--s-10);
    }

.project-display-types {
    display: flex;
    height: calc(27 * var(--vw));
    margin-bottom: var(--s-20);
    justify-content: end;
    padding: 0 var(--s-40);
    align-items: center;
    border-radius: var(--s-3);
}

.project-display-type {
    background: #FFF;
    padding: 0 var(--s-10);
    font-size: var(--s-12);
    font-weight: 600;
    color: #2B4485;
    line-height: calc(27 * var(--vw));
    border: var(--s-1) solid var(--border-default-color);
    border-right: 0;
    border-left: 0;
    cursor: pointer;
    border-radius: 0;
}

    .project-display-type.b-r {
        border-right: var(--s-1) solid var(--border-default-color) !important;
        border-radius: 0 var(--s-3) var(--s-3) 0;
    }

    .project-display-type.b-l {
        border-left: var(--s-1) solid var(--border-default-color) !important;
        border-radius: var(--s-3) 0 0 var(--s-3);
    }

    .project-display-type.active {
        background: #152238;
        color: #FFF;
    }

/* ── List View ── */
.projects-list-view {
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
    margin-right: var(--s-40);
}

.projects-list-view {
    .projects-list-legend {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: calc(6 * var(--vw));
        font-size: 0.8rem;
        color: #888;
        padding: 0 calc(4 * var(--vw)) calc(4 * var(--vw));
    }

    .pending-dot {
        display: inline-block;
        width: calc(28 * var(--vw));
        height: var(--s-8);
        border-radius: calc(4 * var(--vw));
        background: var(--warning-color, #f5a623);
        margin-right: calc(6 * var(--vw));
    }

    .projects-list-table {
        background: #fff;
        border-radius: var(--s-3);
        overflow: hidden;
        border: var(--s-1) solid var(--border-default-color);
    }

    .projects-list-header, .projects-list-row {
        display: grid;
        grid-template-columns: 2.5fr 1fr 1.2fr 1.8fr 1.8fr 1fr 1fr 1fr;
        align-items: center;
        gap: 0;
    }

    .projects-list-header {
        background: #F6F6F6;
        font-size: var(--s-10);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 8%;
        color: #000;
        padding: var(--s-12) var(--s-16);
    }

        .projects-list-header > div {
            padding: 0;
            font-size: calc(11 * var(--vw)) !important;
        }

    .projects-list-row > div {
        padding: 0;
    }

    .projects-list-body {
        display: flex;
        flex-direction: column;
    }

    .projects-list-row {
        padding: var(--s-14) var(--s-16);
        cursor: pointer;
        transition: background 0.15s;
        position: relative;
    }

        .projects-list-row:last-child {
            border-bottom: none;
        }

        .projects-list-row:hover {
            background: #f4f6fb;
        }

        .projects-list-row.pending-action {
            border-left: calc(4 * var(--vw)) solid var(--warning-color, #f5a623);
        }

    .projects-list-row {
        border-left: calc(4 * var(--vw)) solid transparent;
    }

    .col-project {
        display: flex;
        align-items: center;
        gap: var(--s-8);
        font-weight: 700;
        color: #222;
        font-size: var(--s-14);
    }

    .pending-indicator {
        display: inline-block;
        width: var(--s-8);
        height: var(--s-8);
        border-radius: 50%;
        background: var(--warning-color, #f5a623);
        flex-shrink: 0;
    }

    .list-stage-badge {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #555;
    }

    .list-health-badge {
        display: inline-block;
        padding: var(--s-3) var(--s-10);
        border-radius: var(--s-20);
        font-size: 0.75rem;
        font-weight: 500;
        border: var(--s-1) solid currentColor;
    }

    .health-at-risk {
        color: var(--atRiskColor, #e74c3c);
        background: rgba(231,76,60,0.08);
    }

    .health-recoverable {
        color: var(--delayedColor, #e67e22);
        background: rgba(230,126,34,0.08);
    }

    .health-on-track {
        color: var(--ontrackColor, #27ae60);
        background: rgba(39,174,96,0.08);
    }

    .health-delayed {
        color: var(--delayedColor, #e67e22);
        background: rgba(230,126,34,0.08);
    }

    .health-completed {
        color: var(--completedColor, #27ae60);
        background: rgba(39,174,96,0.08);
    }

    .health-on-hold {
        color: #7B8FC2;
        background: rgba(123,143,194,0.08);
    }

    .health-not-started {
        color: var(--notstartedColor, #95a5a6);
        background: rgba(149,165,166,0.08);
    }

    .list-sector-label {
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--secondary-color, #0078d4);
    }

    .list-completion-bars {
        display: flex;
        flex-direction: column;
        gap: var(--s-3);
        margin-bottom: calc(2 * var(--vw));
        gap: calc(4 * var(--vw));
    }

    .list-bar-row {
        display: flex;
        align-items: center;
        gap: var(--s-8);
    }

    .list-bar-track {
        width: 100%;
        height: var(--s-5);
        background: #EEF2FB;
        border-radius: var(--s-3);
        overflow: hidden;
        flex: 1;
    }

    .list-bar-actual {
        height: 100%;
        background: var(--secondary-color, #0078d4);
        border-radius: var(--s-3);
        transition: width 0.4s;
    }

    .list-bar-baseline {
        height: 100%;
        background: #D2B56F;
        border-radius: var(--s-3);
        transition: width 0.4s;
    }

    .list-completion-values {
        display: flex;
        flex-direction: column;
        font-size: 0.72rem;
        color: #666;
        line-height: 1.3;
    }

    .list-user-cell {
        display: flex;
        align-items: center;
        gap: calc(6 * var(--vw));
    }

    .list-user-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: calc(26 * var(--vw));
        height: calc(26 * var(--vw));
        border-radius: 50%;
        background: var(--secondary-color, #0078d4);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 600;
        flex-shrink: 0;
        text-transform: uppercase;
    }

    .list-user-name {
        font-size: 0.83rem;
    }

    .list-na {
        color: #bbb;
        font-size: 0.82rem;
    }

    .projects-list-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--s-10) calc(24 * var(--vw));
        font-size: 0.78rem;
        color: #8a8fa8;
        border-top: var(--s-1) solid #f0f2f7;
        background: #fafbfc;
    }

    .projects-list-legend > span {
        font-size: calc(11 * var(--vw));
        color: #2B4485;
    }

    span.card-project-label.label-OnTrack {
        border: var(--s-1) solid #2F3068;
        border-radius: var(--s-20);
        color: #2F3068;
    }

    .col-sector {
        max-width: fit-content;
    }

    .col-sector {
        max-width: fit-content;
    }

    .list-bar-row > span {
        flex: 1;
        font-size: calc(11 * var(--vw));
        color: #2B4485;
    }

    .list-bar-row:first-child > span {
        font-weight: 700;
        color: #152238;
    }

    .list-user-cell .st-init-users {
        width: calc(19 * var(--vw));
        height: calc(19 * var(--vw));
    }

    .list-user-cell span {
        font-size: var(--s-12);
        color: #4E68AB;
    }

    .list-user-cell .st-init-users h2 {
        height: calc(19 * var(--vw));
        line-height: calc(19 * var(--vw));
        font-size: calc(9 * var(--vw));
    }

    .projects-list-row > div.col-vendor > span, .projects-list-row > div.col-lastupdate > span {
        font-size: var(--s-12);
        color: #4E68AB;
    }
}

/* ==========================================================
   Reusable table / list view — .new-table-style
   Use this class alongside projects-list-table on any component
   that renders the same project-list layout.
   ========================================================== */
.new-table-style {
    background: #fff;
    border-radius: var(--s-3);
    overflow: hidden;
    border: var(--s-1) solid var(--border-default-color);

    .projects-list-header, .projects-list-row {
        display: grid;
        grid-template-columns: 2.5fr 1fr 1.2fr 1.8fr 1.8fr 1fr 1fr 1fr;
        align-items: center;
        gap: 0;
    }

    .projects-list-header {
        background: #F6F6F6;
        font-size: var(--s-10);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 8%;
        color: #000;
        padding: var(--s-12) var(--s-16);
    }

        .projects-list-header > div {
            padding: 0;
            font-size: calc(11 * var(--vw)) !important;
        }

    .projects-list-row > div {
        padding: 0;
    }

    .projects-list-row > .col-main span {
        font-size: var(--s-12);
        font-weight: 700;
    }

    .projects-list-row > .col-text span {
        font-size: var(--s-12);
        font-weight: 400;
    }

    .projects-list-row > .col-label span {
        font-size: var(--s-10);
        font-weight: 400;
        border-radius: var(--s-6);
    }

        .projects-list-row > .col-label span.label-Project {
            background-color: var(--ontrackColorLight);
            color: var(--ontrackColor);
        }

        .projects-list-row > .col-label span.label-late {
            border-left-color: #ef4444;
            background: #fff5f5;
        }

        .projects-list-row > .col-label span.label-due {
            border-left-color: #f97316;
            background: #fff7ed;
        }

    .projects-list-body {
        display: flex;
        flex-direction: column;
    }

    .projects-list-row {
        padding: var(--s-14) var(--s-16);
        cursor: pointer;
        transition: background 0.15s;
        position: relative;
        border-left: calc(4 * var(--vw)) solid transparent;
    }

        .projects-list-row:last-child {
            border-bottom: none;
        }

        .projects-list-row:hover {
            background: #f4f6fb;
        }

        .projects-list-row.pending-action {
            border-left: calc(4 * var(--vw)) solid var(--warning-color, #f5a623);
        }

    .col-project {
        display: flex;
        align-items: center;
        gap: var(--s-8);
        font-weight: 700;
        color: #222;
        font-size: var(--s-14);
    }

    .col-sector {
        max-width: fit-content;
    }

    .list-completion-bars {
        display: flex;
        flex-direction: column;
        gap: calc(4 * var(--vw));
        margin-bottom: calc(2 * var(--vw));
    }

    .list-bar-row {
        display: flex;
        align-items: center;
        gap: var(--s-8);
    }

        .list-bar-row > span {
            flex: 1;
            font-size: calc(11 * var(--vw));
            color: #2B4485;
        }

        .list-bar-row:first-child > span {
            font-weight: 700;
            color: #152238;
        }

    .list-bar-track {
        width: 100%;
        height: var(--s-5);
        background: #EEF2FB;
        border-radius: var(--s-3);
        overflow: hidden;
        flex: 1;
    }

    .list-bar-actual {
        height: 100%;
        background: var(--secondary-color, #0078d4);
        border-radius: var(--s-3);
        transition: width 0.4s;
    }

    .list-bar-baseline {
        height: 100%;
        background: #D2B56F;
        border-radius: var(--s-3);
        transition: width 0.4s;
    }

    .list-user-cell {
        display: flex;
        align-items: center;
        gap: calc(6 * var(--vw));
    }

        .list-user-cell .st-init-users {
            width: calc(19 * var(--vw));
            height: calc(19 * var(--vw));
        }

        .list-user-cell span {
            font-size: var(--s-12);
            color: #4E68AB;
        }

        .list-user-cell .st-init-users h2 {
            height: calc(19 * var(--vw));
            line-height: calc(19 * var(--vw));
            font-size: calc(9 * var(--vw));
        }

    .list-na {
        color: #bbb;
        font-size: 0.82rem;
    }

    .projects-list-row > div.col-vendor > span, .projects-list-row > div.col-lastupdate > span {
        font-size: var(--s-12);
        color: #4E68AB;
    }

    span.card-project-label.label-OnTrack {
        border: var(--s-1) solid #2F3068;
        border-radius: var(--s-20);
        color: #2F3068;
    }

    .projects-list-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--s-10) calc(24 * var(--vw));
        font-size: 0.78rem;
        color: #8a8fa8;
        border-top: var(--s-1) solid #f0f2f7;
        background: #fafbfc;
    }
}

@media (max-width: 1200px) {
    .new-table-style {
        .projects-list-header, .projects-list-row {
            grid-template-columns: 2fr 1fr 1.2fr 1.5fr 1.5fr 1fr 1fr 1fr;
        }
    }
}

@media (max-width: 900px) {
    .new-table-style {
        overflow-x: auto;

        .projects-list-header, .projects-list-row {
            min-width: calc(700 * var(--vw));
            grid-template-columns: 2fr 1fr 1.2fr 1.5fr 1.5fr 1fr 0 0;
        }

        .col-pm, .col-lastupdate {
            display: none;
        }
    }
}

@media (max-width: 600px) {
    .new-table-style {
        .projects-list-header, .projects-list-row {
            grid-template-columns: 2fr 1fr 1.2fr 1fr 0 0 0 0;
        }

        .col-completion, .col-vendor, .col-pm, .col-lastupdate {
            display: none;
        }
    }
}

/* 
.tl-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--s-10);
    margin-right: var(--s-40);
}

.tl-wrapper {
    /* top bar: legend + scale */
.tl-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-8);
    padding: 0;
    margin-bottom: var(--s-20);
}

.tl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-14);
    font-size: 0.76rem;
    color: #666;
}

.tl-legend-item {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--vw));
    font-size: calc(11 * var(--vw));
    color: #2B4485;
}

.tl-dot {
    display: inline-block;
    width: calc(9 * var(--vw));
    height: calc(9 * var(--vw));
    border-radius: 50%;
    flex-shrink: 0;
}

.tl-swatch {
    display: inline-block;
    width: calc(18 * var(--vw));
    height: var(--s-8);
    border-radius: calc(4 * var(--vw));
    flex-shrink: 0;
}

.tl-swatch-baseline {
    background: #D2B56F;
    opacity: 0.5;
}

.tl-diamond-sm {
    display: inline-block;
    width: var(--s-10);
    height: var(--s-10);
    background: #1B2A4E;
    transform: rotate(45deg);
    flex-shrink: 0;
}

.tl-scale-btns {
    display: flex;
    border: var(--s-1) solid var(--border-default-color) !important;
    border-radius: calc(4 * var(--vw));
    overflow: hidden;
}

.tl-scale-btn {
    background: #fff;
    border: none;
    padding: 0 var(--s-14);
    font-size: var(--s-12);
    cursor: pointer;
    color: #2B4485;
    transition: background 0.15s, color 0.15s;
    font-weight: 600;
    line-height: calc(27 * var(--vw));
}

    .tl-scale-btn + .tl-scale-btn {
        border-left: var(--s-1) solid #dde1ec;
    }

    .tl-scale-btn.active {
        background: #152238;
        color: #fff;
    }

/* main container */
.tl-container {
    background: #fff;
    border-radius: var(--s-3);
    overflow-x: auto;
    overflow-y: visible;
    box-shadow: none;
}

/* header row */
.tl-header-row {
    display: flex;
    border-bottom: calc(2 * var(--vw)) solid #eef0f5;
    background: #f7f8fa;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* info column (fixed left) */
.tl-col-info {
    flex: 0 0 calc(240 * var(--vw));
    min-width: calc(240 * var(--vw));
    padding: var(--s-10) var(--s-14);
    display: flex;
    align-items: center;
    gap: var(--s-8);
    border-right: var(--s-1) solid #eef0f5;
    background: inherit;
}

.tl-col-info-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a8fa8;
}

/* chart area */
.tl-col-chart {
    flex: 1 1 0;
    display: flex;
    position: relative;
    min-width: 0;
}

.tl-col-period {
    flex: 1 1 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a8fa8;
    padding: var(--s-10) var(--s-8);
    border-right: var(--s-1) solid #eef0f5;
    white-space: nowrap;
}

    .tl-col-period:last-child {
        border-right: none;
    }

/* group header */
.tl-group-header {
    display: flex;
    align-items: center;
    gap: var(--s-8);
    background: #f3f4f8;
    border-top: var(--s-1) solid #eef0f5;
    border-bottom: var(--s-1) solid #eef0f5;
    padding: calc(6 * var(--vw)) var(--s-14);
    position: relative;
    overflow: hidden;
}

.tl-group-name {
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #5a6080;
    flex-shrink: 0;
    min-width: auto;
}

.tl-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--s-20);
    height: var(--s-20);
    padding: 0 var(--s-5);
    border-radius: var(--s-10);
    background: #dde1ec;
    font-size: 0.72rem;
    font-weight: 700;
    color: #5a6080;
    flex-shrink: 0;
}

.tl-group-dividers {
    position: absolute;
    inset: 0;
    left: calc(240 * var(--vw));
    pointer-events: none;
}

.tl-col-period-bg {
    flex: 1 1 0;
    border-right: var(--s-1) solid #eef0f5;
}

    .tl-col-period-bg:last-child {
        border-right: none;
    }

/* project row */
.tl-row {
    display: flex;
    align-items: center;
    border-bottom: var(--s-1) solid #f0f2f7;
    cursor: pointer;
    transition: background 0.13s;
    min-height: calc(52 * var(--vw));
    position: relative;
    border-left: calc(4 * var(--vw)) solid transparent;
}

    .tl-row:last-child {
        border-bottom: none;
    }

    .tl-row:hover {
        background: #f7f8fb;
    }

.tl-row-pending {
    border-left: calc(4 * var(--vw)) solid var(--warning-color, #f5a623);
}

.tl-status-dot {
    width: calc(9 * var(--vw));
    height: calc(9 * var(--vw));
    border-radius: 50%;
    flex-shrink: 0;
}

.tl-pending-indicator {
    width: calc(28 * var(--vw));
    height: var(--s-8);
    border-radius: calc(4 * var(--vw));
    background: var(--warning-color, #f5a623);
    flex-shrink: 0;
}

.tl-info-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tl-project-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-pm-name {
    font-size: 0.73rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* chart cells backdrop */
.tl-cell-bg {
    height: 100%;
    position: absolute;
    top: 0;
}

/* bars */
.tl-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: var(--s-12);
    border-radius: calc(6 * var(--vw));
    pointer-events: none;
}

.tl-bar-baseline {
    background: var(--warning-color, #f5a623);
    opacity: 0.35;
    height: var(--s-10);
    z-index: 1;
}

.tl-bar-actual {
    height: var(--s-12);
    z-index: 2;
    display: flex;
    align-items: center;
    overflow: visible;
}

.tl-bar-label {
    position: absolute;
    right: calc(4 * var(--vw));
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
}

.tl-bar-baseline-label {
    position: absolute;
    left: 0;
    bottom: calc(-14 * var(--vw));
    font-size: 0.65rem;
    color: #aaa;
    white-space: nowrap;
    pointer-events: none;
}

/* milestones */
.tl-milestone {
    position: absolute;
    top: 50%;
    transform: no;
    z-index: 5;
    cursor: pointer;
}

.tl-diamond {
    display: block;
    width: calc(11 * var(--vw));
    height: calc(11 * var(--vw));
    background: #333;
    transform: rotate(45deg);
    border: calc(1.5 * var(--vw)) solid #fff;
    box-shadow: 0 var(--s-1) calc(4 * var(--vw)) rgba(0,0,0,0.22);
}

.tl-milestone:hover .tl-diamond {
    background: var(--secondary-color, #0078d4);
}

}

/* ═══════════════════════════════════════════════════
       TIMELINE VIEW
    ═══════════════════════════════════════════════════ */
.tl-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--s-10);
}

/* ── top bar ── */
.tl-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-8);
    padding: 0 calc(2 * var(--vw)) calc(4 * var(--vw));
}

.tl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-14);
    font-size: 0.76rem;
    color: #666;
}

.tl-legend-item {
    display: flex;
    align-items: center;
    gap: var(--s-5);
}

.tl-dot {
    display: inline-block;
    width: calc(9 * var(--vw));
    height: calc(9 * var(--vw));
    border-radius: 50%;
    flex-shrink: 0;
}

.tl-swatch {
    display: inline-block;
    width: calc(18 * var(--vw));
    height: calc(6 * var(--vw));
    border-radius: calc(2 * var(--vw));
    flex-shrink: 0;
}

.tl-swatch-baseline {
    background: #D2B56F;
    opacity: 0.9;
}

.tl-diamond-sm {
    display: inline-block;
    width: var(--s-8);
    height: var(--s-8);
    background: #4a4f6b;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ── breadcrumb + prev/next nav ── */
.tl-nav {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--vw));
}

.tl-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(30 * var(--vw));
    height: calc(30 * var(--vw));
    border-radius: var(--s-8);
    border: var(--s-1) solid #dde1ec;
    background: #fff;
    color: #555;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .tl-nav-btn:hover {
        background: var(--secondary-color, #0078d4);
        color: #fff;
        border-color: var(--secondary-color, #0078d4);
    }

.tl-breadcrumb {
    display: flex;
    align-items: center;
    gap: calc(4 * var(--vw));
    background: #f3f4f8;
    border: var(--s-1) solid #dde1ec;
    border-radius: var(--s-8);
    padding: calc(4 * var(--vw)) var(--s-12);
}

.tl-bc-item {
    font-size: 0.8rem;
    font-weight: 600;
}

.tl-bc-active {
    color: var(--secondary-color, #0078d4);
}

.tl-bc-link {
    color: #888;
    cursor: pointer;
    transition: color 0.15s;
}

    .tl-bc-link:hover {
        color: var(--secondary-color, #0078d4);
        text-decoration: underline;
    }

.tl-bc-sep {
    color: #ccc;
    font-size: 0.68rem;
    display: flex;
    align-items: center;
}

/* ── table container ── */
.tl-container {
    background: #fff;
    border-radius: var(--s-12);
    box-shadow: 0 calc(2 * var(--vw)) var(--s-12) rgba(0,0,0,0.06);
    overflow-x: auto;
}

/* ── sticky header row ── */
.tl-header-row {
    display: flex;
    border-bottom: calc(2 * var(--vw)) solid #eef0f5;
    background: #f7f8fa;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ── info column (fixed left) ── */
.tl-col-info {
    flex: 0 0 calc(240 * var(--vw));
    min-width: calc(240 * var(--vw));
    padding: var(--s-10) var(--s-14);
    display: flex;
    align-items: center;
    gap: var(--s-8);
    border-right: var(--s-1) solid #eef0f5;
    background: inherit;
}

.tl-col-info-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a8fa8;
}

/* ── chart area ── */
.tl-col-chart {
    flex: 1 1 0;
    display: flex;
    position: relative;
    min-width: 0;
}

.tl-col-period {
    flex: 1 1 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a8fa8;
    padding: var(--s-10) var(--s-8);
    border-right: var(--s-1) solid #eef0f5;
    white-space: nowrap;
}

    .tl-col-period:last-child {
        border-right: none;
    }

/* ── drillable column ── */
.tl-col-drillable {
    cursor: pointer;
    user-select: none;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: calc(4 * var(--vw));
    transition: background 0.15s, color 0.15s;
}

    .tl-col-drillable:hover {
        background: #eef0f7;
        color: var(--secondary-color, #0078d4);
    }

.tl-drill-icon {
    font-size: 0.65rem;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.tl-col-drillable:hover .tl-drill-icon {
    opacity: 1;
}

/* ── group header ── */
.tl-group-header {
    display: flex;
    align-items: center;
    gap: var(--s-8);
    background: #f3f4f8;
    border-top: var(--s-1) solid #eef0f5;
    border-bottom: var(--s-1) solid #eef0f5;
    padding: calc(6 * var(--vw)) var(--s-14);
    position: relative;
    overflow: hidden;
}

.tl-group-name {
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #5a6080;
    flex-shrink: 0;
    min-width: calc(210 * var(--vw));
}

.tl-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--s-20);
    height: var(--s-20);
    padding: 0 var(--s-5);
    border-radius: var(--s-10);
    background: #dde1ec;
    font-size: 0.72rem;
    font-weight: 700;
    color: #5a6080;
    flex-shrink: 0;
}

.tl-group-dividers {
    position: absolute;
    inset: 0;
    left: calc(240 * var(--vw));
    pointer-events: none;
}

.tl-col-period-bg {
    flex: 1 1 0;
    border-right: var(--s-1) solid #eef0f5;
}

    .tl-col-period-bg:last-child {
        border-right: none;
    }

/* ── project row ── */
.tl-row {
    display: flex;
    align-items: center;
    border-bottom: var(--s-1) solid #f0f2f7;
    cursor: pointer;
    transition: background 0.13s;
    min-height: calc(58 * var(--vw));
    position: relative;
}

    .tl-row:last-child {
        border-bottom: none;
    }

    .tl-row:hover {
        background: #f7f8fb;
    }

.tl-row-pending {
    border-left: var(--s-3) solid var(--warning-color, #f5a623);
}

.tl-status-dot {
    width: calc(9 * var(--vw));
    height: calc(9 * var(--vw));
    border-radius: 50%;
    flex-shrink: 0;
}

.tl-pending-indicator {
    display: inline-block;
    width: calc(9 * var(--vw));
    height: calc(9 * var(--vw));
    border-radius: 50%;
    background: var(--warning-color, #f5a623);
    flex-shrink: 0;
}

.tl-info-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.tl-project-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-pm-name {
    font-size: 0.73rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-cell-bg {
    position: absolute;
    top: 0;
    height: 100%;
    pointer-events: none;
}

/* ══════════════════════════════════════
       BAR GROUP
    ══════════════════════════════════════ */
.tl-bar-group {
    position: absolute;
    top: 50%;
    transform: translateY(-22%);
}

.tl-track {
    position: relative;
    height: var(--s-14);
    border-radius: calc(7 * var(--vw));
    background: var(--border-default-color);
    overflow: visible;
}

.tl-fill {
    position: absolute;
    inset-block: 0;
    left: 0;
    border-radius: calc(7 * var(--vw));
    transition: width 0.3s;
}

.tl-baseline-line {
    position: absolute;
    top: calc(-3 * var(--vw));
    bottom: calc(-3 * var(--vw));
    width: calc(2 * var(--vw));
    margin-left: calc(-1 * var(--vw));
    background: #D2B56F;
    border-radius: var(--s-1);
    z-index: 3;
    pointer-events: none;
}

.tl-bar-labels {
    position: relative;
    height: var(--s-14);
    margin-top: calc(2 * var(--vw));
}

.tl-actual-lbl, .tl-baseline-lbl {
    position: absolute;
    font-size: 0.63rem;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

.tl-actual-lbl {
    color: #555;
    font-weight: 600;
    top: 0;
}

.tl-baseline-lbl {
    color: #D2B56F;
    font-weight: 600;
    top: 0;
}

/* ══════════════════════════════════════
       MILESTONES
    ══════════════════════════════════════ */
.tl-milestone {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    cursor: pointer;
}

.tl-diamond {
    display: block;
    width: var(--s-12);
    height: var(--s-12);
    background: #4a4f6b;
    transform: rotate(45deg);
    border: calc(2 * var(--vw)) solid #fff;
    box-shadow: 0 var(--s-1) calc(4 * var(--vw)) rgba(0,0,0,0.25);
    transition: background 0.15s;
}

.tl-milestone:hover .tl-diamond {
    background: var(--secondary-color, #0078d4);
}

span.tl-group-name img {
    width: calc(15 * var(--vw));
    margin-right: var(--s-10);
}

span.tl-actual-lbl {
    top: calc(-16 * var(--vw));
    padding-right: calc(27 * var(--vw));
    color: #FFF;
}

span.last-update.update-from-ai i {
    color: var(--secondary-color);
    font-size: var(--s-12);
    line-height: var(--s-16);
    margin-right: calc(4 * var(--vw));
}

span.last-update.update-from-ai::before {
    display: none;
}

.ins-tabs {
    display: flex;
    gap: 0;
    margin: calc(32 * var(--vw)) 0 var(--s-20) 0;
    border: calc(2 * var(--vw)) solid var(--border-default-color);
    background: #FFF;
    width: fit-content;
    border-radius: var(--s-3);
}

.ins-tab {
    padding: var(--s-8) var(--s-20);
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: var(--s-12);
    font-weight: 600;
    color: var(--secondary-color);
    cursor: pointer;
}

    .ins-tab:first-child {
        border-radius: var(--s-3) 0 0 var(--s-3);
    }

    .ins-tab:last-child {
        border-radius: 0 var(--s-3) var(--s-3) 0;
    }

.ins-tab--active {
    background: var(--secondary-color);
    color: #ffffff;
    font-size: var(--s-12);
    font-weight: 700;
}

.ins-body {
    border-radius: var(--s-3);
    border: var(--s-1) solid var(--border-default-color);
    background: #FFF;
    padding: var(--s-16) var(--s-20);
}

.filter-row.wt.inner-filter.new-style.normal-rows {
    padding: 0;
}

tbody.access-body td {
    font-size: var(--s-14);
}

button.btn.btn-link.mx-auto.btn.btn-lg.btn-border {
    line-height: var(--s-40) !important;
    height: var(--s-40) !important;
    border-radius: var(--s-3) !important;
    border: 1px solid var( --secondary-color) !important;
    background: #F2F4FC !important;
    margin-bottom: 10px;
}

.changed-value {
    text-decoration: line-through;
}

td.e-rowcell label.task-new-1, td.e-rowcell span.task-new-1 {
    padding-left: calc(6 * var(--vw));
    color: var( --completedColor) !important;
}

td.e-rowcell label.task-changed-3, td.e-rowcell span.task-changed-3 {
    color: red !important;
}

td.e-rowcell label.task-changed-2, td.e-rowcell span.task-changed-2 {
    color: var( --completedColor) !important;
}

.notifications > a > img {
    height: var(--s-20);
}

.label-Deliverable {
    background: var(--main-color-light);
}

.label-Milestone {
    background: var(--atRiskColorLight);
}

.label-Payment {
    background: var(--recoverableDelayedColorLight);
}

/* ─── GANTT OVERRIDES v4 ─────────────────────────────────── */
/* ─── Container ──────────────────────────────────────────── */
.e-gantt {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--s-13);
    border: 0.5px solid #e2e2e2;
    border-radius: var(--s-3);
    overflow: hidden;
    box-shadow: none;
}

    /* ─── Toolbar — v1 style ─────────────────────────────────── */
    .e-gantt .e-toolbar {
        background: #f8f8f7;
        border-bottom: 0.5px solid #e2e2e2;
        padding: var(--s-6) var(--s-12);
        box-shadow: none;
        min-height: calc(46 * var(--vw));
    }

        .e-gantt .e-toolbar .e-toolbar-item .e-tbar-btn {
            background: #ffffff;
            border: 0.5px solid #d4d4d0;
            border-radius: var(--s-3);
            box-shadow: none;
            font-size: var(--s-12);
            color: #555;
            height: calc(30 * var(--vw));
            padding: 0 var(--s-10);
            transition: background 0.15s;
        }

            .e-gantt .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
                background: #f0efeb;
                border-color: #bbb;
            }

            .e-gantt .e-toolbar .e-toolbar-item .e-tbar-btn .e-btn-icon, .e-gantt .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
                color: #555;
                font-size: var(--s-12);
            }

    /* ─── Grid column headers ────────────────────────────────── */
    .e-gantt .e-gridheader .e-headercell {
        background: #f4f4f2;
        border-bottom: 0.5px solid #e0e0e0;
        border-right: none;
        color: #666;
        font-size: var(--s-11);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 0 var(--s-16);
        height: calc(38 * var(--vw));
    }

    /* ─── Timeline quarter/year headers ──────────────────────── */
    .e-gantt .e-timeline-header-row-cell {
        background: #f4f4f2;
        border-bottom: 0.5px solid #e0e0e0;
        border-right: 0.5px solid #e8e8e6;
        color: #666;
        font-size: var(--s-11);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        height: calc(38 * var(--vw));
    }

    /* ─── Grid rows ──────────────────────────────────────────── */
    .e-gantt .e-gridcontent .e-rowcell {
        border-bottom: 0.5px solid #ebebeb;
        border-right: none;
        padding: 0 var(--s-16);
        height: calc(40 * var(--vw));
        line-height: calc(40 * var(--vw));
        color: #1a1a1a;
        font-size: var(--s-13);
    }

    /* ─── Zebra striping ─────────────────────────────────────── */
    .e-gantt .e-gridcontent .e-row:nth-child(even) .e-rowcell {
        background: #f7f7f5;
    }

    .e-gantt .e-gridcontent .e-row:nth-child(odd) .e-rowcell {
        background: #ffffff;
    }

    /* chart pane matching zebra */
    .e-gantt .e-gantt-chart .e-chart-row:nth-child(even) {
        background: #f7f7f5;
    }

    .e-gantt .e-gantt-chart .e-chart-row:nth-child(odd) {
        background: #ffffff;
    }

    .e-gantt .e-gantt-chart .e-chart-row-border {
        border-bottom: 0.5px solid #ebebeb;
    }

    /* ─── Hover ──────────────────────────────────────────────── */
    .e-gantt .e-gridcontent tr:hover .e-rowcell {
        background: #eef0f8 !important;
        color: #1a1a1a;
    }

    /* ─── Parent rows ────────────────────────────────────────── */
    .e-gantt .e-gridcontent .e-row.e-parentrow .e-rowcell {
        font-weight: 500;
    }

    /* ─── Task bars ──────────────────────────────────────────── */
    .e-gantt .e-gantt-chart .e-gantt-child-taskbar {
        background: var(--ontrackColorLight);
        border: none;
        border-radius: var(--s-3);
        height: var(--s-18);
        box-shadow: none;
    }

    .e-gantt .e-gantt-chart .e-gantt-child-progressbar {
        background: var(--completedColor);
        border-radius: var(--s-3);
    }

    /* ─── Parent summary bar ─────────────────────────────────── */
    .e-gantt .e-gantt-chart .e-gantt-parent-taskbar {
        background: var(--ontrackColorLight);
        border: none;
        border-radius: var(--s-3);
        height: var(--s-6);
        opacity: 0.7;
        box-shadow: none;
    }

    .e-gantt .e-gantt-chart .e-gantt-parent-progressbar {
        background: var(--completedColor);
        border-radius: var(--s-3);
    }

    /* ─── Milestone ──────────────────────────────────────────── */
    .e-gantt .e-gantt-chart .e-milestone-top, .e-gantt .e-gantt-chart .e-milestone-bottom {
        border-top-color: var(--ontrackColorLight);
        border-bottom-color: var(--ontrackColorLight);
    }

    /* ─── Holiday markers ────────────────────────────────────── */
    .e-gantt .e-gantt-chart .e-holiday {
        display: block !important;
        background: rgb(0 0 0 / 0%) !important;
        border-left: calc(2 * var(--vw)) dashed #e3e3e3 !important;
    }

    .e-gantt .e-gantt-chart .e-holiday-label {
        display: block !important;
        color: #b07800 !important;
        font-size: var(--s-10) !important;
        font-weight: 500 !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        letter-spacing: 0.03em !important;
        opacity: 0.75 !important;
    }

    /* ─── Chart vertical grid lines ──────────────────────────── */
    .e-gantt .e-gantt-chart .e-line {
        stroke: #e8e8e6;
        stroke-width: calc(1 * var(--vw));
    }

    /* ─── Splitter ───────────────────────────────────────────── */
    .e-gantt .e-split-bar, .e-gantt .e-splitbar {
        background: #e0e0e0 !important;
        border: none !important;
        width: calc(1 * var(--vw)) !important;
    }

    /* ─── Selection ──────────────────────────────────────────── */
    .e-gantt .e-gridcontent .e-row.e-selectionbackground .e-rowcell {
        background: #eaeffa !important;
        color: #1a1a1a;
    }

    /* ─── Strip all stray shadows ────────────────────────────── */
    .e-gantt, .e-gantt .e-toolbar, .e-gantt .e-gridheader, .e-gantt .e-gantt-chart, .e-gantt .e-gantt-child-taskbar, .e-gantt .e-gantt-parent-taskbar {
        box-shadow: none !important;
    }

        /* ─── Scrollbar ──────────────────────────────────────────── */
        .e-gantt ::-webkit-scrollbar {
            width: calc(5 * var(--vw));
            height: calc(5 * var(--vw));
        }

        .e-gantt ::-webkit-scrollbar-track {
            background: transparent;
        }

        .e-gantt ::-webkit-scrollbar-thumb {
            background: #d0d0cc;
            border-radius: var(--s-3);
        }

            .e-gantt ::-webkit-scrollbar-thumb:hover {
                background: #aaa;
            }

        /* ─── Shadow between grid and chart (left panel elevation) ── */
        .e-gantt .e-gantt-tree-grid-pane {
            box-shadow: calc(4 * var(--vw)) 0 calc(12 * var(--vw)) rgba(0, 0, 0, 0.08);
            clip-path: inset(0px calc(-12 * var(--vw)) 0px 0px);
            /* only cast shadow to the right */
            position: relative;
            z-index: 2;
        }

        /* ensure chart pane sits behind */
        .e-gantt .e-gantt-chart-pane {
            position: relative;
            z-index: 1;
        }

        .e-gantt .e-gantt-chart .e-chart-root-container .e-nonworking-day-container {
            z-index: 99;
        }

.e-popup-open, .e-popup-open .e-ul {
    padding: 0 !important;
}

    .e-popup-open .e-ul li.e-list-item:not([role="treeitem"]) {
        border-bottom: 1px solid #e3e3e3 !important;
        font-size: calc(13 * var(--vw));
        padding: 0 var(--s-14) !important;
        border-bottom: var(--s-1) solid #e3e3e3;
        color: #1B2A4E;
        display: flex !important;
        text-align: left !important;
        align-items: center;
        max-height: var(--s-20) !important;
        height: var(--s-20) !important;
        line-height: var(--s-20) !important;
        margin: 0 !important;
        justify-content: flex-start;
        /* or justify-content: left; */
        flex-direction: row;
        width: 100%;
        flex: 1;
        text-align: left;
        direction: ltr;
    }

        .e-popup-open .e-ul li.e-list-item:not([role="treeitem"]) label {
            text-align: left;
            flex: 1;
            direction: ltr;
        }

div#diagram-space {
    width: calc(100% - var(--s-20));
    height: calc(100vh - (180 * var(--vw)));
}

.thin-side-menu {
    display: none !important;
}

.main-wrapper.full-menu.thin {
    #side-menu {
        width: calc(50 * var(--vw)) !important;
        left: 0 !important
    }

    a.navbar-brand img {
        display: none !important;
    }

        a.navbar-brand img.thin-side-menu {
            display: block !important;
            width: calc(30 * var(--vw)) !important;
            height: calc(30 * var(--vw)) !important;
        }

    a.navbar-brand {
        margin-left: var(--s-10) !important;
        margin-right: var(--s-10) !important;
        width: calc(50 * var(--vw)) !important;
    }

    .menu-items ul > li a {
        padding: 0 var(--s-10) !important;
    }

    .main-menu a > * {
        display: none;
    }

    .main-menu a i {
        display: block;
        width: calc(30 * var(--vw)) !important;
        min-width: calc(30 * var(--vw)) !important;
        text-align: center;
    }


    div#sidebar-menu {
        margin-top: var(--s-14) !important;
    }
}
.col-text ul{
    padding-left:0;
    padding-right:var(--s-6);
}


.report-dialog-host {
    .e-dlg-header-content {
        position: relative;
    }

    .e-dlg-closeicon-btn {
        position: absolute !important;
        top: var(--s-20);
        right: var(--s-20) !important;
        left: auto !important;
        z-index:9999;
    }

    .e-dialog .e-dlg-header {
        width: 100% !important;
    }

    .edit-button .btn.btn-cancel {
        margin: 0 !important;
        font-size: calc(14 * var(--vw)) !important;
        color: #111111 !important;
        line-height: normal !important;
        display: flex;
        gap: calc(10 * var(--vw));
        border: calc(1 * var(--vw)) solid #DADADA;
        font-weight: 400 !important;
        align-items: center;
        padding: calc(10 * var(--vw)) !important;
        width: calc(100 * var(--vw));
        height: calc(40 * var(--vw));
        justify-content: center;
    }
}

.flex-between {
    justify-content: space-between
}
.mt-20 {
    margin-top: var(--s-20);
}

.mt-25 {
    margin-top: calc(25 * var(--vw)) !important;
}
.mt-35 {
    margin-top: calc(35 * var(--vw)) !important;
}

.at-risk-color {
    color: var(--atRiskColor) !important;
}
.delayed-color {
    color: var(--delayedColor) !important;
}
.rec-delayed-color {
    color: var(--recovrableDelayedColor) !important;
}
.on-track-color {
    color: var(--ontrackColor) !important;
}
.completed-color {
    color: var(--completedColor) !important;
}

.dropdown-menu.style2.show {
    max-height: 350px;
    overflow-y: auto !important;
}

.dropdown-menu.style2 .dropdown-item {
    flex-wrap: wrap;
    height: auto !important;
    text-wrap: auto;
}
.ai-answer-kpis {
    display: flex;
    gap: var(--s-8);
    flex-wrap: wrap;
    margin-top: var(--s-14);
}

.ai-answer-kpi-item {
    padding: var(--s-8);
    border-radius: var(--new-card-border-radius) !important;
    border: 1px solid var(--border-default-color) !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

    .ai-answer-kpi-item .value {
        font-size: calc(26 * var(--vw));
        font-weight: 800;
        line-height: 1;
    }

    .ai-answer-kpi-item span.key {
        display: flex;
        align-items: center;
        gap: calc(4 * var(--vw));
        font-size: calc(9 * var(--vw));
        font-weight: 700;
        color: var(--secondary-color);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }


table.ai-answer-table thead th {
    font-size: calc(11 * var(--vw));
    border: 1px solid var(--border-default-color) !important;
    font-weight: 700;
    color: var(--secondary-color);
    padding: var(--s-5);
}
table.ai-answer-table tbody a {
    font-size: calc(11 * var(--vw));
}
table.ai-answer-table tbody td {
    font-size: calc(11 * var(--vw));
    border: 1px solid var(--border-default-color) !important;
    padding: var(--s-5);
}

progress {
    height: var(--s-8);
    appearance: none;
    -webkit-appearance: none;
}

    progress::-webkit-progress-bar {
        background: #ddd;
        border-radius: 10px;
    }

    progress::-webkit-progress-value {
        background: var(--secondary-color);
        border-radius: 10px;
    }

    progress::-moz-progress-bar {
        background: #2196F3;
        border-radius: 10px;
    }