@import url(font-awesome.css);
@import url(feather.css);
@import url(styles-RNJKPVL6.css);

/*:root {
  --yellow-: #F5C641;
  --color-2: #4c6edb;
  --color-3: #24aad8;
  --color-4: #1ac7c2;
  --color-5: #1ddea3;
}*/

@font-face {
  font-family: HelveticaNeue;
  src: url(../fonts/HelveticaNeue.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

html,
body {
  background-color: #f5f8ff !important;
  color: #000;
  overflow-x: hidden !important;
  vertical-align: top;
  font-family: "Cairo", sans-serif !important;
  min-height: 100vh;
}

[dir="rtl"] body {
  font-family: HelveticaNeue, sans-serif !important;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.3);
}

/*[dir="rtl"] */

.float-left {
  float: right;
}

[dir="rtl"] .float-left {
  float: left;
}

.fitmaster {
  padding: 0 12px;
  min-height: calc(100vh - 120px);
}

/*[dir="rtl"] .fitmaster {
  padding: 0 252px 0 12px;
}*/

.fitmaster.paddingicons {
  padding: 0 262px 0 12px;
}

[dir="rtl"] .fitmaster.paddingicons {
  padding: 0 12px 0 262px;
}

.fitmaster.paddingfirsticons {
  padding: 0 12px 0 262px;
}

[dir="rtl"] .fitmaster.paddingfirsticons {
  padding: 0 262px 0 12px;
}

.paddingfirsticons {
  width: calc(100% - 262px);
}

.fitmaster.paddingfirsticons.paddingicons {
  padding: 0 262px;
}

.paddingfirsticons.paddingicons {
  width: calc(100% - 524px);
}

.whitebox {
  background: #fff;
  border-radius: 10px;
  padding: 10px 0;
  -webkit-box-shadow: 0 0 8px 0 rgba(136, 136, 136, 0.08);
  box-shadow: 0 0 8px 0 rgba(136, 136, 136, 0.08);
}

.btn-add {
  color: #fff !important;
  font-size: 14px;
  border-radius: 5px;
  float: right;
  border: none;
  height: 36px;
  padding: 0 12px;
  background: #001a70;
}

[dir="rtl"] .btn-add {
  float: left;
}

.btn-add.btn-clone {
  background: #6c757d;
}

.btn-add i {
  margin-right: 6px;
  font-size: 18px;
  line-height: 36px;
  height: 36px;
  vertical-align: top;
}

[dir="rtl"] .btn-add i {
  margin-right: unset;
  margin-left: 6px;
}

.btn-add span {
  display: inline-block;
  line-height: 34px;
  height: 36px;
  font-size: 14px;
  vertical-align: top;
}

.btn-add.contractadd {
  float: unset;
  position: absolute;
  right: 015px;
  top: 9px;
}

.title-list {
  min-height: 36px;
  line-height: 34px;
  font-size: 24px !important;
  font-weight: 600;
}

.fitheightwhite {
  min-height: calc(100vh - 120px);
}

.btn-submitdone {
  color: #fff !important;
  border: none !important;
  background: #001a70 !important;
  border-radius: 8px !important;
}

.offcanvas-body sup {
  color: red;
}

[dir="rtl"] .form-control {
  padding: 0.25rem 0.75rem !important;
}

[dir="rtl"] .form-select {
  padding: 0.375rem 0.75rem 0.375rem 2.25rem !important;
  background-position: 2% 50%;
}

[dir="rtl"] .form-switch {
  padding-left: unset !important;
  padding-right: 2.5em;
}

[dir="rtl"] .form-switch .form-check-input {
  margin-left: unset !important;
  float: right !important;
  margin-right: -2.5em;
}

[dir="rtl"] .commentdetails .form-switch .form-check-input {
  margin-right: -7px;
  position: relative;
  top: 8px;
}

[dir="rtl"] .notifictionpart .form-switch {
  padding-right: unset !important;
  padding-left: 2.5em !important;
}

[dir="rtl"] .notifictionpart .form-switch .form-check-input {
  margin-left: -2.5em !important;
  float: left !important;
  margin-right: unset !important;
}

[dir="rtl"] .form-check {
  padding-right: 1.5em;
  padding-left: unset !important;
}

[dir="rtl"] .form-check.form-switch {
  padding-right: 1.5em;
}

[dir="rtl"] .form-check .form-check-input {
  margin-left: unset !important;
  margin-right: -1.5em;
  float: right !important;
}

[dir="rtl"] .form-check.form-switch .form-check-input {
  margin-right: -2.5em;
}

header {
  width: 100%;
  padding-right: 12px;
  margin-bottom: 20px;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0px;
  display: inline-block;
  vertical-align: top;
  background: #fff;
  border-bottom: 1px #f0eff6 solid;
  min-height: 55px;
  /* z-index: 9999999; */
}

[dir="rtl"] header {
  padding-right: unset;
  padding-left: 12px;
  left: auto;
  right: 0px;
}

[dir="rtl"] .logo {
  text-align: right !important;
}

[dir="rtl"] ul.menuside li a {
  padding: 7px 32px 7px 7px !important;
}

[dir="rtl"] ul.menuside li a::before {
  left: auto;
  right: 0;
}

[dir="rtl"] ul.menuside li a:hover::before {
  left: auto;
  right: 0;
}

[dir="rtl"] ul.menuside li a i {
  left: auto;
  right: 7px;
}

[dir="rtl"] .MyClass ul.menuside li a i {
  left: auto;
  right: 10px;
}

[dir="rtl"] ul.menuside li button {
  padding: 7px 32px 7px 7px !important;
  text-align: right !important;
}

[dir="rtl"] ul.menuside li button::before {
  left: auto !important;
  right: 0;
}

[dir="rtl"] ul.menuside li button::after {
  right: auto !important;
  left: 5px;
}

[dir="rtl"] ul.menuside li.active button::after {
  right: auto !important;
  left: 5px;
}

[dir="rtl"] ul.menuside li button:hover::before {
  left: auto !important;
  right: 0;
}

[dir="rtl"] ul.menuside li button i {
  left: auto !important;
  right: 7px;
}

[dir="rtl"] .MyClass ul.menuside li button i {
  left: auto !important;
  right: 10px;
}

[dir="rtl"] ul.footermenu li a {
  padding: 7px 32px 7px 7px !important;
}

[dir="rtl"] ul.footermenu li a::before {
  left: auto !important;
  right: 0;
}

[dir="rtl"] ul.footermenu li a:hover::before {
  left: auto;
  right: 0;
}

[dir="rtl"] ul.footermenu li a i {
  left: auto;
  right: 7px;
}

[dir="rtl"] .MyClass ul.footermenu li a i {
  left: auto;
  right: 10px;
}

ul.breadcramb {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0 12px;
  min-height: 55px;
}

ul.breadcramb li {
  display: inline-block;
  position: relative;
  list-style: none;
  padding-right: 15px;
  margin-right: 5px;
}

[dir="rtl"] ul.breadcramb li {
  padding-right: unset;
  margin-right: unset;
  padding-left: 15px;
  margin-left: 5px;
}

ul.breadcramb li::before {
  position: absolute;
  content: "\e844";
  right: -4px;
  top: 1px;
  font-size: 16px;
  color: #9da9c7;
  font-family: feather;
}

[dir="rtl"] ul.breadcramb li::before {
  right: auto;
  left: -4px;
  content: "\e843";
  top: 2px;
}

ul.breadcramb li:last-child {
  padding-right: 0;
  margin-right: 0;
}

[dir="rtl"] ul.breadcramb li:last-child {
  padding-left: 0;
  margin-left: 0;
}

ul.breadcramb li:last-child:before {
  display: none;
}

ul.breadcramb li a {
  display: inline-block;
  font-weight: 400;
  color: #001a70 !important;
  text-decoration: none !important;
  font-size: 12px;
  vertical-align: middle;
}

ul.breadcramb li a i {
  font-size: 17px;
  position: relative;
}

ul.breadcramb li:first-child a {
  color: #89898a !important;
}

ul.breadcramb li:last-child a {
  color: #001a70 !important;
}

.empview {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.empview img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  height: 100%;
  /*max-width: 120%;*/
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

.empname {
  display: inline-block;
  line-height: 20px;
  vertical-align: top;
  margin-top: 9px;
  margin-bottom: 0;
  margin-left: 5px;
}

[dir="rtl"] .empname {
  margin-left: unset;
  margin-right: 5px;
}

.filterlist {
  /*width: 340px;*/
  width: auto;
}

.filterlist .form-control {
  width: calc(100% - 5px);
  margin-right: 35px;
  display: inline-block;
  padding: 0.65rem 0.75rem !important;
  padding-left: 10px !important;
}

[dir="rtl"] .filterlist .form-control {
  padding-left: unset !important;
  padding-right: 10px !important;
  margin-right: unset !important;
  margin-left: 35px;
}

[dir="rtl"] .was-validated .form-control:invalid,
[dir="rtl"] .form-control.is-invalid {
  background-position: 2% 50%;
  background-image: none !important;
}

[dir="rtl"] .clientsproj td:last-child {
  text-align: left !important;
}

[dir="rtl"] .clientsproj th:last-child {
  text-align: left !important;
}

.filterstatePro.form-select {
  padding: 0.65rem 2.25rem 0.65rem 0.75rem !important;
}

[dir="rtl"] .filterstatePro.form-select {
  padding: 0.65rem 0.75rem 0.65rem 2.25rem !important;
}

.toastTrue {
  position: fixed;
  top: 50px;
  left: 20px;
  max-width: 240px !important;
  color: #155724 !important;
  padding: 10px 35px 10px 10px !important;
  background-color: #d4edda !important;
  font-weight: 600;
  border-color: #c3e6cb !important;
}

.toastTrue::before {
  position: absolute;
  font-family: feather;
  font-size: 20px;
  top: 6px;
  right: 10px;
  content: "\e83e";
  font-weight: 100;
}

.toastFalse {
  position: fixed;
  top: 100px;
  left: 20px;
  max-width: 240px !important;
  color: #721c24 !important;
  padding: 10px 35px 10px 10px !important;
  background-color: #f8d7da !important;
  font-weight: 600;
  border-color: #f5c6cb !important;
}

.toastFalse::before {
  position: absolute;
  font-family: feather;
  font-size: 20px;
  top: 6px;
  right: 10px;
  content: "\e81e";
  font-weight: 100;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.iconsearch {
  position: absolute;
  top: 50%;
  right: 20px;
  font-size: 20px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.tab-content .iconsearch {
  top: 14px;
  left: 13px;
}

[dir="rtl"] .iconsearch {
  right: auto;
  left: 20px;
}

[dir="rtl"] .tab-content .iconsearch {
  left: auto;
  right: 13px;
}

.itemsshow {
  position: absolute;
  right: 12px;
  top: 23px;
  color: #89898a;
  display: inline-block;
  padding: 5px 10px;
  font-size: 15px;
  background: none;
}

[dir="rtl"] .itemsshow {
  right: auto;
  left: 12px;
}

.page-number-buttons.donepagination {
  padding: 0 130px 0 17px !important;
}

[dir="rtl"] .page-number-buttons.donepagination {
  padding: 0 17px 0 130px !important;
}

.page-number-buttons.donepagination button {
  background-color: transparent !important;
  position: relative;
  font-size: 16px;
  border: 1px #e5e7eb solid !important;
  color: #6b7280 !important;
  border-radius: 6px;
  padding: 5px 8px !important;
  min-width: 38px;
  min-height: 38px;
}

.page-number-buttons.donepagination button:first-child {
  border: none !important;
}

.page-number-buttons.donepagination button:last-child {
  border: none !important;
}

.page-number-buttons.donepagination button:hover {
  background-color: #eff0f2 !important;
}

.page-number-buttons.donepagination button.current {
  background-color: #00b388 !important;
  color: #fff !important;
  border: 1px #00b388 solid !important;
}
.page-number-buttons.donepagination button {
  margin: 0 5px;
}

.page-number-buttons.donepagination button:first-child {
  font-size: 0 !important;
}

.page-number-buttons.donepagination button:first-child::before {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px !important;
  font-family: feather;
  content: "\e843";
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

[dir="rtl"] .page-number-buttons.donepagination button:first-child::before {
  content: "\e844";
}

.page-number-buttons.donepagination button:last-child {
  font-size: 0 !important;
}

.page-number-buttons.donepagination button:last-child::before {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px !important;
  font-family: feather;
  content: "\e844";
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

[dir="rtl"] .page-number-buttons.donepagination button:last-child::before {
  content: "\e843";
}

.btnholders {
  border-radius: 5px;
  background: #eff0f2;
  padding: 4px;
}

.btnholders button {
  border: none;
  background: transparent;
  color: #687eb1;
  font-size: 15px;
  width: 90px;
  border-radius: 5px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  margin: 0 3px;
}

.btnholders button.active {
  border: none;
  background: #fff;
  color: #000;
  -webkit-box-shadow: 0 0 8px 0 rgba(136, 136, 136, 0.08);
  box-shadow: 0 0 8px 0 rgba(136, 136, 136, 0.08);
}

.smallifo {
  color: #999;
  font-size: 11px;
}

.stats {
  background: #f6f7f8;
  border: 1px #eaedf6 solid;
  padding: 0 20px 0 8px;
  border-radius: 5px;
  height: 30px;
  line-height: 28px;
  color: #646669;
  font-size: 13px;
  position: relative;
}

.stats::before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  top: 10px;
  right: 7px;
}

[dir="ltr"] .stats {
  padding: 0 8px 0 20px;
}

[dir="ltr"] .stats::before {
  right: auto;
  left: 7px;
}

.completed.stats::before {
  background: #34c759;
}

.closed.stats::before {
  background: #7c8db5;
}

.opend.stats::before {
  background: #347ae2;
}

.risk.stats::before {
  background: #fa3545;
}

.filesloaded {
  min-height: 40px;
  border-radius: 5px;
  position: relative;
  border: 1px #f2f5ff solid;
  display: inline-block;
  width: 100%;
}

.filesloaded ul {
  display: inline-block;
  width: calc(100% - 55px);
  padding: 0;
  margin: 8px 5px 0 5px;
}

.filesloaded ul li {
  display: inline-block;
  margin: 0 3px 6px;
  list-style: none;
  background: #7c8db5;
  border-radius: 3px;
  position: relative;
  min-height: 20px;
  padding: 2px 5px 3px 25px;
  color: #fff;
}

.filesloaded ul li button {
  position: absolute;
  color: #fff;
  background: none;
  border: none;
  font-size: 15px;
  left: 0;
  top: 6px;
}

.filesloaded .btncloud {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40px;
  border: none;
  border-right: 1px #f2f5ff solid;
  color: #ff9500;
  background: transparent;
  font-size: 20px;
}

.emptytab {
  display: block;
  text-align: center;
  margin: 90px 0;
}

.btnattachdone {
  float: left;
}

.btnattachdone .p-fileupload span.p-button {
  color: #666;
  background: #c6c7c8 !important;
  border: 1px solid #c6c7c8 !important;
  font-family: Cairo;
  padding: 0.35rem 0.85rem !important;
  border-radius: 3px;
}

.btnattachdone .p-fileupload span.p-button-icon {
  display: none !important;
}
.box.activeAttach .btnattachdone.test .p-fileupload span.p-button {
  opacity: 0;
  width: 550px;
  height: 216px;
  position: absolute;
  margin: -83px 0;
  left: 0;
}

.btnattachmulti {
  display: inline-block;
  width: 100%;
}

.btnattachmulti .p-fileupload span.p-button {
  color: #666;
  background: #f9fafc;
  display: inline-block;
  width: 100%;
  height: 100px;
  border: none !important;
  font-family: Cairo;
  padding: 2.75rem 0.85rem !important;
  border-radius: 3px;
}

.btnattachmulti .p-fileupload span.p-button-icon {
  display: none !important;
}

.holdersidesBtn {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  top: 15px;
  float: right;
}

[dir="rtl"] .holdersidesBtn {
  float: left;
}

.holdersidesBtn2 {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  top: 15px;
  float: right;
  margin-right: 10px;
}

.holdersidesBtn2::before {
  position: absolute;
  content: "";
  top: 2px;
  right: -8px;
  width: 1px;
  height: 22px;
  background: #ddd;
}

[dir="rtl"] .holdersidesBtn2 {
  margin-right: 0;
  margin-left: 10px;
  float: left;
}

[dir="rtl"] .holdersidesBtn2::before {
  right: auto !important;
  left: -8px;
}

.iconopen {
  position: absolute;
  z-index: 3;
  width: 32px;
  height: 32px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  background: #fff;
  right: 0;
  top: 0;
}

.iconopen i {
  font-size: 20px;
  color: #fff;
  display: inline-block;
  height: 32px;
  line-height: 30px;
  transform: scale(-1);
  -webkit-transform: scale(-1);
}

.iconopen svg {
  transform: scale(1);
  -webkit-transform: scale(1);
}

[dir="rtl"] .iconopen svg {
  transform: scale(-1);
  -webkit-transform: scale(-1);
}

[dir="rtl"] .iconopen i {
  transform: scale(-1);
  -webkit-transform: scale(-1);
}

.iconopen2 {
  position: absolute;
  z-index: 3;
  width: 32px;
  height: 32px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  background: #fff;
  right: 0;
  top: 0;
}

.iconopen2 i {
  font-size: 20px;
  color: #fff;
  display: inline-block;
  height: 32px;
  line-height: 30px;
  transform: scale(-1);
  -webkit-transform: scale(-1);
}

.iconopen2 svg {
  transform: scale(-1);
  -webkit-transform: scale(-1);
}

[dir="rtl"] .iconopen2 svg {
  transform: scale(1);
  -webkit-transform: scale(1);
}

[dir="rtl"] .iconopen2 i {
  transform: scale(-1);
  -webkit-transform: scale(-1);
}

.overlay3 {
  position: absolute;
  z-index: 3;
  width: 32px;
  height: 32px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  background: #fff;
  right: 0;
  top: 0;
  /*box-shadow: -4px 6px 18px rgba(0, 0, 0, 0.1);*/
}

.overlay3 i {
  font-size: 20px;
  color: #fff;
  display: inline-block;
  height: 32px;
  line-height: 30px;
  transform: scale(-1);
  -webkit-transform: scale(-1);
}

.overlay3 svg {
  transform: scale(1);
  -webkit-transform: scale(1);
}

[dir="rtl"] .overlay3 svg {
  transform: scale(-1);
  -webkit-transform: scale(-1);
}

[dir="rtl"] .overlay3 i {
  transform: scale(-1);
  -webkit-transform: scale(-1);
}

.overlay4 {
  position: absolute;
  z-index: 3;
  width: 32px;
  height: 32px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  background: #fff;
  right: 0;
  top: 0;
  /*box-shadow: -4px 6px 18px rgba(0, 0, 0, 0.1);*/
}

.overlay4 i {
  font-size: 20px;
  color: #fff;
  display: inline-block;
  height: 32px;
  line-height: 30px;
  transform: scale(-1);
  -webkit-transform: scale(-1);
}

.overlay4 svg {
  transform: scale(-1);
  -webkit-transform: scale(-1);
}

[dir="rtl"] .overlay4 svg {
  transform: scale(1);
  -webkit-transform: scale(1);
}

[dir="rtl"] .overlay4 i {
  transform: scale(-1);
  -webkit-transform: scale(-1);
}

.paddingicons .iconopen {
  left: 44px;
}

[dir="rtl"] .paddingicons .iconopen {
  left: auto;
  right: 44px;
}

.paddingicons .iconopen2 {
  left: 44px;
}

[dir="rtl"] .paddingicons .iconopen2 {
  left: auto;
  right: 44px;
}

.paddingicons .overlay3 {
  left: 44px;
}

[dir="rtl"] .paddingicons .overlay3 {
  left: auto;
  right: 44px;
}

.paddingicons .overlay4 {
  left: 44px;
}

[dir="rtl"] .paddingicons .overlay4 {
  left: auto;
  right: 44px;
}

#cardview .p-inplace .p-inplace-display {
  font-size: 20px;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
}

#cardview .p-inputtext {
  font-size: 20px;
  font-weight: 600;
  box-shadow: inset 0 0 0 2px #388bff;
  padding: 0.35rem 0.75rem;
}

[dir="rtl"] .column .p-scrollpanel-bar-y {
  right: calc(100% - 10px) !important;
  opacity: 1 !important;
}

.p-scrollpanel-content {
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: auto !important;
}

[dir="rtl"] .p-scrollpanel-content {
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: auto !important;
}

/* ==============================================================
   Make every <p-scrollPanel> scroll, but hide the native scrollbar
   ============================================================= */

/* LTR + RTL share the same rules */
.p-scrollpanel-content,
[dir="rtl"] .p-scrollpanel-content {
  /* you already set these; repeat for clarity */
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: auto !important; /* scrolling restored */

  /* ---------- hide the browser’s own scrollbar ---------- */
  scrollbar-width: none; /* Firefox 64+        */
  -ms-overflow-style: none; /* IE / old Edge       */
}

.p-scrollpanel-content::-webkit-scrollbar {
  width: 0 !important; /* Chrome / Safari / Edge-Chromium */
  height: 0 !important; /* (in case of horizontal scroll)  */
}

/* Optional: be sure the wrapper hides the gap where the OS bar lived */
.p-scrollpanel-wrapper {
  overflow: hidden; /* keeps layout tight */
}

/* ----------------------------------------------------------------- */
/* PrimeNG’s custom thumb / rail are still visible – style them here */
.p-scrollpanel-bar-y,
.p-scrollpanel-bar-x {
  width: 6px; /* thickness (X-bar auto-handled) */
  background: #1a73e8; /* brand colour                  */
  border-radius: 4px;
  opacity: 0.8;
  transition: opacity 150ms ease, background 150ms ease;
}

.p-scrollpanel-bar-y:hover,
.p-scrollpanel-bar-x:hover,
.p-scrollpanel-bar-y:active,
.p-scrollpanel-bar-x:active {
  background: #0d58c6; /* darker shade on hover/drag    */
  opacity: 1;
}
/* ============================================================= */

[dir="rtl"] .p-scrollpanel-wrapper {
  float: right !important;
}

.p-scrollpanel-bar {
  background: #ddd !important;
}

.btn-addgreen {
  color: #fff !important;
  font-size: 14px;
  border-radius: 5px;
  float: left;
  border: none;
  height: 36px;
  padding: 0 12px;
  background: #22c55e;
}

.btn-addgreen i {
  margin-right: 6px;
  font-size: 18px;
  line-height: 36px;
  height: 36px;
  vertical-align: top;
}

[dir="rtl"] .btn-addgreen i {
  margin-left: 6px;
  margin-right: unset;
}

.btn-addgreen span {
  display: inline-block;
  line-height: 34px;
  height: 36px;
  font-size: 14px;
  vertical-align: top;
}

.loading {
  position: fixed;
  z-index: 20;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 0.6;
  background: #000000;
}

.loading .p-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

[dir="rtl"] .btnaddtask {
  left: auto;
  right: 12px;
}

.text-right {
  text-align: left !important;
}

[dir="rtl"] .text-right {
  text-align: right !important;
}

[dir="rtl"] .profilelist .btn-secondary {
  padding-right: 46px !important;
  text-align: right !important;
  padding-left: 24px !important;
}

[dir="rtl"] .profilelist .btn-secondary .imgavatar {
  left: auto !important;
  right: 0;
}

[dir="rtl"] .profilelist .btn-secondary::before {
  right: auto !important;
  left: 0;
}

[dir="rtl"] .usersstable td:last-child,
[dir="rtl"] .usersstable th:last-child {
  text-align: left !important;
}

[dir="rtl"] .managerlab {
  padding-left: unset;
  padding-right: 20px;
}

[dir="rtl"] .managerlab i {
  left: auto;
  right: 0;
}

[dir="rtl"] .dateprojcard {
  padding-left: unset !important;
  padding-right: 0;
}

[dir="rtl"] .dateprojcard i {
  left: auto !important;
  right: 0;
}

[dir="rtl"] .projectCard a.orangemoreproj {
  transform: scaleX(1) !important;
  -webkit-transform: scaleX(1) !important;
}

[dir="rtl"] .attachprojcard {
  padding-left: unset !important;
  padding-right: 20px;
}

[dir="rtl"] .attachprojcard i {
  left: auto !important;
  right: 0;
}

[dir="rtl"] .task h5 {
  float: left !important;
  text-align: left !important;
}

[dir="rtl"] .optioncol {
  right: auto !important;
  left: 0;
}

.clientstable td:last-child {
  text-align: right !important;
}

.clientstable th:last-child {
  text-align: right !important;
}

[dir="rtl"] .clientstable td:last-child {
  text-align: left !important;
}

[dir="rtl"] .clientstable th:last-child {
  text-align: left !important;
}

[dir="rtl"] .moreclients .btn-secondary {
  text-align: right !important;
}

[dir="rtl"] .moreclients .dropdown-menu li a {
  padding: 0 5px 8px !important;
  text-align: right !important;
}

[dir="rtl"] .moreclients .dropdown-menu li a i {
  left: auto !important;
  right: 0;
}

[dir="rtl"] .task strong {
  margin-right: unset !important;
  margin-left: 20px;
}

[dir="rtl"] .usersstable td:last-child {
  text-align: left !important;
}

[dir="rtl"] .usersstable th:last-child {
  text-align: left !important;
}

[dir="rtl"] .moreclients .dropdown-menu li a {
  padding: 0 0 8px !important;
  text-align: right !important;
}

[dir="rtl"] .usersstable td:last-child {
  text-align: left !important;
}

[dir="rtl"] .usersstable th:last-child {
  text-align: left !important;
}

[dir="rtl"] .totalprojectts {
  border-left: none !important;
  padding-left: unset !important;
  margin-left: unset !important;
  border-right: 1px #ddd solid;
  padding-right: 15px;
}

.totalprojectts svg {
  margin-right: 5px;
}

ul.logTimeline {
  display: inline-block;
  width: 100%;
  margin: 10px 0;
  padding: 10px 0 0;
}

ul.logTimeline li {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0 0 10px 90px;
  position: relative;
}

[dir="rtl"] ul.logTimeline li {
  padding: 0 90px 10px 0;
}

ul.logTimeline li:last-child {
  padding-bottom: 0 !important;
}

ul.logTimeline li::before {
  position: absolute;
  top: 0;
  left: 105px;
  width: 1px;
  height: 100%;
  background: #ddd;
  content: "";
  z-index: 0;
}

[dir="rtl"] ul.logTimeline li::before {
  left: auto;
  right: 105px;
}

ul.logTimeline li:last-child:before {
  display: none;
}

ul.listProjects {
  display: inline-block;
  width: 100%;
  padding: 10px;
  margin: 0;
  height: calc(100vh - 160px);
  overflow-y: auto;
}

ul.listProjects li {
  display: inline-block;
  width: 100%;
  border-radius: 5px;
  padding: 0;
  margin: 0 0 5px;
  list-style: none;
}

ul.listProjects li a {
  display: inline-block;
  padding: 5px 0 8px 28px;
  position: relative;
  color: #202020 !important;
  text-decoration: none !important;
}

ul.listProjects li.active {
  background: #00b288;
}

ul.listProjects li.active a {
  color: #fff !important;
}
ul.listProjects li a i {
  position: absolute;
  left: 6px;
  font-size: 16px;
  top: 8px;
}

[dir="rtl"] ul.listProjects li a {
  padding: 5px 28px 8px 0;
}

[dir="rtl"] ul.listProjects li a i {
  left: auto;
  right: 6px;
}

.filterprojlist {
  display: inline-block;
  width: 100%;
  border-bottom: 1px #ddd solid;
  padding: 0 30px 10px 0;
  position: relative;
}

.filterprojlist::before {
  position: absolute;
  right: 3px;
  top: 0px;
  font-size: 24px;
  font-family: feather;
  content: "\e8bd";
}

.filterprojlist input {
  display: inline-block;
  width: 100%;
  border: none;
  padding: 0 5px;
  line-height: 32px;
  height: 32px;
}

.filterprojlist input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

[dir="rtl"] .filterprojlist {
  padding: 0 0 10px 30px;
}

[dir="rtl"] .filterprojlist::before {
  left: 3px;
  right: auto;
}

ul.listProjectsfil {
  display: inline-block;
  width: 100%;
  padding: 10px 0;
  margin: 0;
  height: calc(100vh - 160px);
  overflow-y: auto;
}

ul.listProjectsfil li {
  display: inline-block;
  width: 100%;
  padding: 0;
  margin: 0 0 8px;
  list-style: none;
}

ul.listProjectsfil li a {
  display: inline-block;
  width: 100%;
  padding: 8px 30px;
  position: relative;
  color: #202020 !important;
  text-decoration: none !important;
  border-radius: 5px;
}

ul.listProjectsfil li.active a {
  color: #fff !important;
  background: #14b8a6;
}

ul.listProjectsfil li a i {
  position: absolute;
  left: 5px;
  font-size: 18px;
  top: 11px;
}

ul.listProjectsfil li a h5 {
  position: absolute;
  right: 5px;
  font-size: 13px;
  top: 8px;
  color: #fff;
  text-align: center;
  background: #14b8a6;
  height: 20px;
  line-height: 20px;
  min-width: 20px;
}

ul.listProjectsfil li.active a h5 {
  color: #14b8a6;
  background: #fff;
}

.addCustomProj::before {
  position: absolute;
  left: 50%;
  top: 46px;
  font-family: feather;
  z-index: 2;
  color: #001a70;
  font-size: 16px;
  content: "\e8b1";
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

[dir="rtl"] ul.listProjectsfil li a i {
  left: auto;
  right: 5px;
}

[dir="rtl"] ul.listProjectsfil li a h5 {
  left: 5px;
  right: auto;
}

[dir="rtl"] .totalprojectts svg {
  margin-right: unset;
  margin-left: 5px;
}

[dir="rtl"] .skelton span {
  text-align: right !important;
}

ul.logTimeline li span {
  position: absolute;
  left: 15px;
  top: 4px;
  font-size: 14px;
  color: #89898a;
}

[dir="rtl"] ul.logTimeline li span {
  left: auto;
  right: 15px;
}

ul.logTimeline li .imglogs {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

ul.logTimeline li .imglogs img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  max-width: 120%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

ul.logTimeline li h4 {
  display: inline-block;
  color: #202020;
  font-size: 16px;
  font-weight: 600;
  margin: 5px 10px 5px;
  vertical-align: top;
}

ul.logTimeline li a {
  display: inline-block;
  color: #89898a !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 400;
  margin: 0 0 5px;
  vertical-align: top;
  position: relative;
  top: 7px;
}

ul.logTimeline li h5 {
  display: inline-block;
  width: 100%;
  color: #89898a;
  font-size: 16px;
  font-weight: 400;
  padding: 0 38px;
  margin: 0 0 5px;
  vertical-align: top;
}

.sidedark {
  position: absolute;
  right: -250px;
  width: 238px;
  -webkit-transition: all ease-in-out 0.2s;
  -moz-transition: all ease-in-out 0.2s;
  -o-transition: all ease-in-out 0.2s;
  -ms-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
  top: 0;
}

.sidestart {
  position: absolute;
  max-height: calc(100vh - 78px);
  overflow-y: auto;
  left: -250px;
  width: 238px;
  -webkit-transition: all ease-in-out 0.2s;
  -moz-transition: all ease-in-out 0.2s;
  -o-transition: all ease-in-out 0.2s;
  -ms-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
  top: 0;
}

.endColumn {
  width: 238px;
  display: inline-block;
  vertical-align: top;
}

.float-last {
  float: right;
}

[dir="rtl"] .float-last {
  float: left;
}

[dir="rtl"] .sidedark {
  left: -250px;
  right: auto;
}

[dir="rtl"] .sidestart {
  right: -250px;
  left: auto;
}

.sidedark.MyClass {
  right: 12px;
}

.sidestart.MyfirstClass {
  left: 12px;
}

.sidestart.MyfirstClass::-webkit-scrollbar {
  width: 6px;
  background: #fff;
}

/* Track */
.sidestart.MyfirstClass::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* Handle */
.sidestart.MyfirstClass::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
}

/* Handle on hover */
.sidestart.MyfirstClass::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.3);
}

[dir="rtl"] .sidedark.MyClass {
  left: 12px;
  right: auto;
}

[dir="rtl"] .sidestart.MyfirstClass {
  right: 12px;
  left: auto;
}

.paddingsidbar {
  -webkit-transition: all ease-in-out 0.2s;
  -moz-transition: all ease-in-out 0.2s;
  -o-transition: all ease-in-out 0.2s;
  -ms-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
}

.paddingfirstsidbar {
  -webkit-transition: all ease-in-out 0.2s;
  -moz-transition: all ease-in-out 0.2s;
  -o-transition: all ease-in-out 0.2s;
  -ms-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
}

.whitesidechart {
  background: #fff;
  display: inline-block;
  width: 100%;
  margin: 0 0 12px;
  border-radius: 10px;
  padding: 10px;
  -webkit-box-shadow: 0 0 8px 0 rgba(136, 136, 136, 0.08);
  box-shadow: 0 0 8px 0 rgba(136, 136, 136, 0.08);
}

.projectcardmission {
  display: inline-block;
  vertical-align: top;
  border-left: 1px #e0e0e0 solid;
  padding-left: 12px;
  margin-left: 12px;
}

.projectcardmission {
  display: inline-block;
  vertical-align: top;
  border-left: 1px #e0e0e0 solid;
  padding-left: 12px;
  margin-left: 12px;
}

a:has(.projectcardmission) {
  color: #001a70 !important;
}

[dir="rtl"] .projectcardmission {
  border-right: 1px #e0e0e0 solid;
  border-left: none;
  padding-right: 12px;
  margin-right: 12px;
  padding-left: unset;
  margin-left: unset;
}

.projectcardmission svg {
  position: relative;
  margin-right: 3px;
  top: -1px;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}

[dir="rtl"] .projectcardmission svg {
  margin-right: unset;
  margin-left: 3px;
}

.missionpopup {
  position: absolute;
  top: 20px;
  right: 67px;
}

.missionpopup::before {
  position: absolute;
  top: 2px;
  right: -17px;
  content: "";
  width: 1px;
  height: 20px;
  background: #e0e0e0;
}

[dir="rtl"] .missionpopup::before {
  right: auto;
  left: -17px;
}

[dir="rtl"] .missionpopup {
  left: 67px;
  right: auto;
}

[dir="rtl"] .newDropstyle {
  top: -3px !important;
}

.newDropstyle .btn-secondary {
  position: relative;
  padding: 0.65rem 0.75rem 0.65rem 32px !important;
  min-height: 40.5px;
  min-width: 79px;
}

.newDropstyle .btn-secondary::before {
  position: absolute;
  left: 8px;
  top: 9px;
  font-family: "feather";
  content: "\e842";
  font-size: 15px;
}

[dir="rtl"] .newDropstyle .btn-secondary {
  padding: 0.5rem 32px 0.75rem 0.75rem !important;
}

[dir="rtl"] .newDropstyle .btn-secondary::before {
  left: auto;
  right: 8px;
}

.countprojectup {
  position: absolute;
  top: 80px;
  left: 50%;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  transform: translateX(-50%);
  padding-bottom: 30px;
  z-index: 5;
  text-align: center;
  -webkit-transform: translateX(-50%);
}

.countprojectup b {
  position: absolute;
  bottom: 0;
  left: 50%;
  color: #6b7280;
  font-size: 22px;
  font-weight: 700;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.countprojects {
  position: absolute;
  top: 50px;
  left: 50%;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  transform: translateX(-50%);
  padding-bottom: 30px;
  z-index: 5;
  text-align: center;
  -webkit-transform: translateX(-50%);
}

.countprojects b {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 50%;
  color: #6b7280;
  font-size: 22px;
  font-weight: 700;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.barproject .p-progressbar {
  height: 8px;
  border-radius: 4px;
  background: #d8d8da;
  max-width: calc(100% - 52px);
}

.barproject .p-progressbar .p-progressbar-value {
  background: #00b388;
}

.barproject .p-progressbar .p-progressbar-label {
  display: none !important;
}

.missionRemaining {
  position: absolute;
  left: calc(100% - 46px);
  font-size: 14px;
  color: #89898a;
  top: 0;
}

.missionRemaining i {
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  line-height: 24px;
  font-size: 13px;
  background: #00b388;
  text-align: center;
}

.missionRemaining small {
  display: inline-block;
  font-size: 14px;
  color: #202020;
}

[dir="rtl"] .missionRemaining {
  left: auto;
  right: calc(100% - 48px);
}

.emppics {
  display: inline-block;
  margin-right: 3px;
  position: relative;
  min-width: 24px;
  min-height: 24px;
}

.emppics::before {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  content: "";
  left: 0;
  top: 0;
  z-index: 0;
  background: #f9fafc url(../../images/anonmus_user.svg) center no-repeat;
  background-size: 15px;
}

[dir="rtl"] .emppics {
  margin-right: unset;
  margin-left: 3px;
}

[dir="rtl"] .emppics::before {
  left: auto !important;
  right: 0;
}

.imgEmp {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin-left: -10px;
  z-index: 2;
}

.imgEmp:first-child {
  margin-left: 0;
  z-index: 3;
}

.imgEmp:nth-child(3) {
  z-index: 1;
}

[dir="rtl"] .imgEmp {
  margin-left: unset;
  margin-right: -10px;
}

[dir="rtl"] .imgEmp:first-child {
  margin-left: unset;
  margin-right: 0;
}

.imgEmp img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  max-width: 120%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

.emppics a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  cursor: pointer;
}

.emppics span {
  display: inline-block;
  font-size: 14px;
  color: #757575;
  margin-left: 10px;
  vertical-align: top;
  padding-top: 1px;
}

.emppics strong {
  display: inline-block;
  font-size: 16px;
  color: #757575;
  margin-left: 10px;
  vertical-align: top;
  padding-top: 10px;
  margin-right: 10px;
}

[dir="rtl"] .emppics span {
  margin-left: unset;
  margin-right: 10px;
}

[dir="rtl"] .projectCard .moreclients {
  right: auto !important;
  left: 10px;
}

.projectCard .moreclients .dropdown-menu {
  left: -135px !important;
}

[dir="rtl"] .projectCard .moreclients .dropdown-menu {
  left: 0 !important;
  right: auto !important;
}

[dir="rtl"] .openprojcard {
  padding: 0 20px 0 8px !important;
}

[dir="rtl"] .openprojcard::before {
  left: auto;
  right: 7px;
}

[dir="rtl"] .worklist {
  padding: 0 20px 0 8px !important;
}

[dir="rtl"] .worklist::before {
  left: auto;
  right: 7px;
}

[dir="rtl"] .underreview {
  padding: 0 20px 0 8px !important;
}

[dir="rtl"] .underreview::before {
  left: auto;
  right: 7px;
}

.titleFilter {
  display: inline-block;
  width: 100%;
  padding: 9px 30px 12px;
  position: relative;
  color: #202020;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px rgba(28, 28, 28, 0.1) solid;
}

.titleFilter i {
  position: absolute;
  top: 10px;
  left: 2px;
  font-size: 20px;
  color: #89898a;
}

[dir="rtl"] .titleFilter i {
  left: auto;
  right: 2px;
}

.formFilter .form-control {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

.formFilter .form-select {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

.fitChart canvas {
  height: 230px !important;
}

.heightPie canvas {
  width: 210px !important;
  height: 210px !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

[dir="rtl"] .logoheader {
  margin-right: 15px;
  margin-left: unset !important;
}

.endSide {
  float: right;
  padding-top: 5px;
}

.endSide a {
  font-size: 24px;
  display: inline-block;
  color: #202020 !important;
  text-decoration: none !important;
  margin: 0 8px;
  position: relative;
}

.endSide a svg {
  position: relative;
  top: -3px;
  transform: scale(1.1);
}

.endSide a:last-child {
  padding-left: 20px;
}

.endSide a:last-child:before {
  content: "";
  left: 0;
  top: 5px;
  background: #ddd;
  width: 1px;
  height: 20px;
  position: absolute;
}

[dir="rtl"] .endSide {
  float: left;
  text-align: right;
}

[dir="rtl"] .endSide a:last-child {
  padding-right: 20px;
  padding-left: unset;
}

[dir="rtl"] .endSide a:last-child:before {
  left: auto;
  right: 0;
}

.projectMood {
  position: relative;
  display: inline-block;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #d8d8da;
  line-height: 28px;
  color: #202020;
  font-size: 14px;
  padding: 0 10px 0 26px;
}

[dir="rtl"] .projectMood {
  padding: 0 26px 0 10px;
}

.review::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #001a70;
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

[dir="rtl"] .review::before {
  left: auto;
  right: 8px;
}

.worknow::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2c71f6;
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

[dir="rtl"] .worknow::before {
  left: auto;
  right: 8px;
}

.workdone::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00b388;
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

[dir="rtl"] .workdone::before {
  left: auto;
  right: 8px;
}

.worklist::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8d8da;
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

[dir="rtl"] .worklist::before {
  left: auto;
  right: 8px;
}

[dir="rtl"] .accordion-button::after {
  margin-right: auto;
  margin-left: unset;
  background-position: 0px 50%;
}

.accordArrow {
  max-width: 40px;
  float: right;
  background-color: transparent !important;
  margin-right: 15px;
  box-shadow: none !important;
}

[dir="rtl"] .accordArrow {
  float: left;
  margin-right: unset;
  margin-left: 15px;
}

.projectPart {
  display: inline-block;
  margin: 18px 8px 17px;
  font-size: 18px;
  font-weight: 700;
}

[dir="rtl"] .bf-line {
  padding-left: unset !important;
  padding-right: 15px;
}

.bf-line svg {
  margin-right: 8px;
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
}

[dir="rtl"] .bf-line svg {
  margin-left: 8px;
  margin-right: unset !important;
}

[dir="rtl"] .bf-line::before {
  left: auto !important;
  right: 0;
}

[dir="rtl"] .title5::before {
  right: auto !important;
  left: 0;
}

[dir="rtl"] .addProjectOptions {
  float: left !important;
  text-align: right !important;
}

[dir="rtl"] .addProjectOptions::before {
  right: auto !important;
  left: 58px;
}

[dir="rtl"] .addProjectOptions a {
  margin-right: unset !important;
  margin-left: 15px;
}

[dir="rtl"] .newProjectFields .accordion-header svg {
  margin: 5px 15px 0 0 !important;
}

[dir="rtl"] .optionCollapse {
  right: auto !important;
  left: 60px;
}

[dir="rtl"] .btnaddTeam {
  right: auto !important;
  left: 60px;
}

[dir="rtl"] .btnaddTeam i {
  margin-right: unset !important;
  margin-left: 5px;
}

[dir="rtl"] .signapp .form-control {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

[dir="rtl"] .signapp .form-group i {
  left: auto !important;
  right: 8px;
}

[dir="rtl"] .signapp a {
  float: left !important;
}

[dir="rtl"] .signapp sup {
  left: auto !important;
  right: 2px;
}

[dir="rtl"] .teamTable td:last-child {
  text-align: right !important;
}

[dir="rtl"] .teamTable a.whats {
  margin-right: unset !important;
  margin-left: 10px;
}

[dir="rtl"] .teamTable a.phone {
  margin-right: unset !important;
  margin-left: 10px;
}

[dir="rtl"] .mainMenu button.btn-secondary {
  margin-left: unset !important;
  margin-right: 15px;
}

[dir="rtl"] .mainMenu .dropdown-menu li a {
  padding-left: unset !important;
  padding-right: 40px;
}

[dir="rtl"] .mainMenu .dropdown-menu li a svg {
  left: auto !important;
  right: 9px;
}

[dir="rtl"] .mainMenu .dropdown-menu li {
  text-align: right;
}

[dir="rtl"] .customType {
  padding: 0 20px 0 10px !important;
}

[dir="rtl"] .customType::before {
  left: auto !important;
  right: 7px;
}

.customType.completed::before {
  background-color: #00b388 !important;
}

.customType.reviewmission::before {
  background-color: #001a70 !important;
}

.customType.inproccess::before {
  background-color: #347ae2 !important;
}

[dir="rtl"] .mission-intro {
  padding: 0 0 0 130px !important;
}

[dir="rtl"] .closesubPopup {
  right: auto !important;
  left: 10px;
}

[dir="rtl"] .titlesubPopup {
  padding: 0 10px 0 50px !important;
}

[dir="rtl"] .mangarlist a.btn-default {
  padding-left: 20px !important;
  padding-right: 55px !important;
}

[dir="rtl"] .PMdropdown {
  left: auto !important;
  right: 8px;
}

[dir="rtl"] .mangarlist .dropdown-toggle::before {
  right: auto !important;
  left: 5px;
}

[dir="rtl"] .mangarlist .dropdown-item {
  text-align: right;
}

[dir="rtl"] .mangarlist a.btn-default span {
  text-align: right !important;
}

[dir="rtl"] .mangarlist a.btn-default small {
  text-align: right !important;
  direction: ltr;
}

[dir="rtl"] ul.listmagers li {
  text-align: right !important;
}

[dir="rtl"] ul.listmagers li button {
  padding: 0 48px 0 0 !important;
}

[dir="rtl"] ul.listmagers li button .avatar-med {
  left: auto !important;
  right: 0;
}

[dir="rtl"] ul.listmagers li button span {
  text-align: right !important;
}

[dir="rtl"] ul.listmagers li button small {
  text-align: right !important;
}

[dir="rtl"] .videoIntroOPtions button {
  border-right: none !important;
  border-left: 1px #ddd solid !important;
}

.file_liberary {
  display: inline-block;
  width: 100%;
  text-align: left;
}

[dir="rtl"] .file_liberary {
  text-align: right !important;
}

.folerCard {
  display: inline-block;
  width: 200px;
  height: 220px;
  border-radius: 5px;
  background: #fff;
  border: none;
  margin: 0 10px 15px 0;
  text-align: left;
  padding: 0;
  position: relative;
  vertical-align: top;
  -webkit-box-shadow: 0 0 8px 0 rgba(136, 136, 136, 0.15);
  box-shadow: 0 0 8px 0 rgba(136, 136, 136, 0.15);
}

[dir="rtl"] .folerCard {
  margin: 0 0 15px 10px !important;
  text-align: right !important;
}

.folerCard img {
  display: inline-block;
  border-radius: 5px 5px 0 0;
  vertical-align: top;
  position: relative;
  top: -5px;
  width: 100%;
  max-height: 176px;
  /* padding: 26px; */
}

.folerCard span {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 15px;
  height: 20px;
  border-radius: 10px;
  font-size: 13px;
  padding: 0 8px;
  line-height: 18px;
  border: 1px #ddd solid;
  background: #fff;
  -webkit-box-shadow: 0 0 8px 0 rgba(136, 136, 136, 0.08);
  box-shadow: 0 0 8px 0 rgba(136, 136, 136, 0.08);
}

[dir="rtl"] .folerCard span {
  right: auto !important;
  left: 15px;
}

.folerCard h4 {
  display: inline-block;
  width: calc(100% - 50px);
  padding: 0 15px;
  font-size: 13px;
  color: #000;
  margin: 14px 0 8px;
  text-align: left;
  height: 16px;
  overflow: hidden;
}

[dir="rtl"] .folerCard h4 {
  text-align: right !important;
}

[dir="rtl"] .folderOptions {
  right: auto !important;
  left: 8px;
}

.folderOptions .btn:first-child:active,
.folderOptions .btn.show {
  border: none !important;
}

.folderOptions .dropdown-menu {
  left: -105px !important;
}

[dir="rtl"] .folderOptions .dropdown-menu {
  left: auto !important;
  right: -105px !important;
}

[dir="rtl"] .filterGmholder {
  text-align: right !important;
}

[dir="rtl"] .filterGmholder button {
  float: left !important;
}

[dir="rtl"] ul.listEmpadded {
  text-align: right !important;
}

[dir="rtl"] ul.listEmpadded li {
  text-align: right !important;
  padding: 0 48px 0 0 !important;
}

[dir="rtl"] ul.listEmpadded li .avatar-med {
  left: auto !important;
  right: 0;
}

[dir="rtl"] ul.listEmpadded li span {
  text-align: right !important;
}

[dir="rtl"] ul.listEmpadded li small {
  text-align: right !important;
}

.subtitledir {
  text-align: left;
}

[dir="rtl"] .subtitledir {
  text-align: right;
}

[dir="rtl"] .optionRollEmp {
  right: auto !important;
  left: 0;
}

.imgEmpBig {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin-left: -10px;
  z-index: 2;
  background: #f9fafc url(../../images/anonmus_user.svg) center no-repeat;
  background-size: 30px;
}

.imgEmpBig:first-child {
  margin-left: 0;
  z-index: 3;
}

.imgEmpBig:nth-child(3) {
  z-index: 1;
}

[dir="rtl"] .imgEmpBig {
  margin-left: unset;
  margin-right: -10px;
}

[dir="rtl"] .imgEmpBig:first-child {
  margin-left: unset;
  margin-right: 0;
}

.imgEmpBig img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  max-width: 120%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

.tabsMission ul {
  padding: 0 !important;
}

.tabsMission li svg {
  stroke: #1f2937;
  display: inline-block;
  margin-right: 5px;
}

.tabsMission li.active svg {
  stroke: #001a70;
}

[dir="rtl"] .tabsMission li svg {
  margin-right: 0;
  margin-left: 5px;
}

.tabsMission .nav-link {
  color: #1f2937 !important;
  position: relative;
  border: none !important;
  padding-bottom: 10px;
}

.tabsMission .nav-tabs .nav-link.active,
.tabsMission .nav-tabs .nav-item.show .nav-link {
  color: #001a70 !important;
}

.tabsMission .nav-tabs .nav-link.active::before {
  background: #001a70;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 1;
  position: absolute;
}

.tabsMission .nav-tabs {
  border-bottom: 2px #e5e7eb solid;
}

.missionfilds {
  display: inline-block;
  width: 100%;
  margin: 0 10px;
}

.dateMission {
  display: inline-block;
  padding: 0 20px;
  border-left: 1px #ddd solid;
  border-right: 1px #ddd solid;
}

.dateMission svg {
  display: inline-block;
  margin-right: 10px;
}

[dir="rtl"] .dateMission svg {
  margin-right: 0;
  margin-left: 10px;
}

.dateMission button {
  display: inline-block;
  border: 1px #ddd solid;
  border-radius: 5px;
  height: 38px;
  line-height: 36px;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
}

.dateMission button i {
  display: inline-block;
  margin-right: 7px;
}

[dir="rtl"] .dateMission button i {
  margin-right: unset;
  margin-left: 7px;
}

.timeMission {
  display: inline-block;
}

.timeMission svg {
  display: inline-block;
  margin-right: 10px;
}

[dir="rtl"] .timeMission svg {
  margin-right: 0;
  margin-left: 10px;
}

.setMissionTime {
  display: inline-block;
  border: 1px #ddd solid;
  border-radius: 5px;
  height: 38px;
  line-height: 36px;
}

.setMissionTime input {
  display: inline-block;
  border: none;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  padding: 0 10px;
}

.setMissionTime i {
  display: inline-block;
  height: 36px;
  width: 36px;
  line-height: 36px;
  text-align: center;
  border-left: 1px #ddd solid;
}

[dir="rtl"] .setMissionTime i {
  border-left: none;
  border-right: 1px #ddd solid;
}

.maltiMedia {
  display: inline-block;
  height: 38px;
  border-radius: 6px;
  border: 1px #e5e7eb solid;
  padding: 0 36px;
  line-height: 36px;
  color: #1f2937;
  font-size: 13px;
  position: relative;
  margin: 0 40px;
  background: #fff;
}

.maltiMedia.fileModel::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
  background: url(../../images/doc_icon.svg) center no-repeat;
}

[dir="rtl"] .maltiMedia.fileModel::before {
  left: auto !important;
  right: 10px;
}

.maltiMedia.fileModel::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
  background: url(../../images/download_icon.svg) center no-repeat;
}

[dir="rtl"] .maltiMedia.fileModel::after {
  right: auto !important;
  left: 10px;
}

.maltiMedia.videoModel::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
  background: url(../../images/video_icon.svg) center no-repeat;
}

[dir="rtl"] .maltiMedia.videoModel::before {
  left: auto !important;
  right: 10px;
}

.maltiMedia.videoModel::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
  background: url(../../images/fluent_open-16-regular.svg) center no-repeat;
}

[dir="rtl"] .maltiMedia.videoModel::after {
  right: auto !important;
  left: 10px;
}

.commentsrow {
  display: inline-block;
  width: 100%;
  margin-top: 15px;
  border-bottom: 1px #e5e7eb solid;
  padding: 0 0 12px 53px;
  position: relative;
  min-height: 60px;
}

[dir="rtl"] .commentsrow {
  padding: 0 53px 12px 0;
}

.imgcommentUsers {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  overflow: hidden;
  background: #f9fafc url(../../images/anonmus_user.svg) center no-repeat;
  background-size: 23px 30px;
}

[dir="rtl"] .imgcommentUsers {
  left: auto;
  right: 0;
}

.imgcommentUsers img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  max-width: 120%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

.comNameTime {
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0 90px 0 0;
}

[dir="rtl"] .comNameTime {
  padding: 0 0 0 90px;
}

.comNameTime strong {
  display: inline-block;
  color: #202020;
  font-size: 15px;
  font-weight: 600;
  line-height: 32px;
}

.comNameTime small {
  display: inline-block;
  color: #89898a;
  font-size: 13px;
  line-height: 32px;
}

.commiTopic {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  color: #89898a;
}

.editComment {
  position: absolute;
  width: 90px;
  right: 0;
  top: 0;
}

[dir="rtl"] .editComment {
  right: auto;
  left: 0;
}

.editComment::before {
  position: absolute;
  width: 1px;
  height: 100%;
  content: "";
  background: #ddd;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.editCommentIcon {
  display: inline-block;
  background: none;
  border: none;
}

.removeCommentIcon {
  float: right;
  background: none;
  border: none;
}

[dir="rtl"] .removeCommentIcon {
  float: left;
}

a.addSubtask {
  background: none;
  border: none;
  margin-top: 20px;
  padding-left: 36px;
  position: relative;
  line-height: 26px;
  font-size: 15px;
  color: #202020 !important;
  font-weight: 600;
  margin: 20px 0;
  text-decoration: none !important;
}

[dir="rtl"] a.addSubtask {
  padding-left: unset;
  padding-right: 36px;
}

a.addSubtask img {
  position: absolute;
  left: 0;
  top: 0;
}

[dir="rtl"] a.addSubtask img {
  left: auto;
  right: 0;
}

ul.subTasksList {
  display: inline-block;
  width: 100%;
  padding: 0;
  margin: 10px 0;
}

ul.subTasksList li {
  display: inline-block;
  width: 100%;
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px #ddd solid;
}

.checkholder {
  display: block;
  position: relative;
  padding: 0 8px 0 32px;
  cursor: pointer;
  font-size: 18px;
  text-align: left;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[dir="rtl"] .checkholder {
  padding: 0 32px 0 8px;
  text-align: right;
}

.checkholder input {
  position: absolute;
  opacity: 0;
  display: none;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  display: block;
  top: 3px;
  left: 0;
  height: 24px;
  width: 24px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px #00b388 solid;
}

[dir="rtl"] .checkmark {
  left: auto;
  right: 0;
}

/* On mouse-over, add a grey background color */
.checkholder:hover input ~ .checkmark {
  background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.checkholder input:checked ~ .checkmark {
  background-color: #00b388;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkholder input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkholder .checkmark:after {
  left: 8px;
  top: 3px;
  width: 6px;
  height: 13px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.recordVideo {
  /* position: absolute;
  right: 0;
  top: 0; */
  padding: 0 20px;
  border-radius: 5px;
  border: 1px #e5e7eb solid;
  height: 36px;
  line-height: 34px;
  color: #1f2937;
  font-size: 15px;
  font-weight: 600;
  background: #fff;
}

/* [dir="rtl"] .recordVideo {
  right: auto;
  left: 0
} */

.titleColKan {
  display: inline-block;
  width: 100%;
  text-align: center;
  height: 48px;
  line-height: 46px;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  border-bottom: 4px #d8d8da solid;
  font-weight: 600;
  margin-bottom: 10px;
}

.titleColKan.workinprosses {
  border-bottom: 4px #2c71f6 solid;
}

.titleColKan.workreview {
  border-bottom: 4px #001a70 solid;
}

.titleColKan.workcomplate {
  border-bottom: 4px #00b388 solid;
}

.attachQuick {
  display: inline-block;
  width: 100%;
  margin: 20px 0 10px;
}

.attachQuick h4 {
  display: inline-block;
  color: #202020;
  font-size: 14px;
  font-weight: 600;
  height: 38px;
  line-height: 30px;
}

.attachQuick a {
  float: right;
  height: 38px;
  line-height: 36px;
  border: 1px #ddd solid;
  border-radius: 5px;
  padding: 0 15px;
  color: #89898a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.attachQuick a.attachtaske {
  margin-top: -8px;
}
.attachQuick a.AttachmentsList {
  float: unset;
  height: unset;
  line-height: unset;
  border: none;
  border-radius: 0;
  padding: unset;
  color: #89898a;
  font-size: unset;
  font-weight: unset;
  cursor: pointer;
}
.attachQuick a i {
  margin-right: 8px;
}

[dir="rtl"] .attachQuick a {
  float: left;
}

[dir="rtl"] .attachQuick a i {
  margin-left: 8px;
  margin-right: unset;
}

[dir="rtl"] .column .projectCard {
  margin-left: unset !important;
  margin-right: 15px;
}

[dir="rtl"] .column .projectCard.childCard {
  margin-left: unset !important;
  margin-right: 22px;
}

[dir="rtl"] .column .projectCard.childCard::before {
  right: -3px;
  left: auto !important;
}

[dir="rtl"] .column .projectCard.childCard::after {
  content: "\f0d9";
  position: absolute;
  left: auto !important;
  right: -3px;
  color: #fff;
  font-family: FontAwesome;
  font-size: 19px;
}

.emptyContent {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 60px 0;
}

.emptyContent img {
  display: inline-block;
  margin: 0 0 20px;
}

.emptyContent span {
  display: inline-block;
  width: 100%;
  color: #6b7280;
  font-size: 16px;
  font-weight: 600;
}

.endfloat {
  float: right;
}

[dir="rtl"] .endfloat {
  float: left;
}

[dir="rtl"] .column .coverproject {
  padding-right: unset !important;
  padding-left: 80px;
}

[dir="rtl"] .statusSelect button {
  text-align: right !important;
}

[dir="rtl"] .statusSelect ul {
  left: auto !important;
  right: 0;
}

[dir="rtl"] .statusSelect ul li a {
  text-align: right !important;
}

[dir="rtl"] .statusSelect button i {
  margin-right: unset !important;
  margin-left: 10px;
}

[dir="rtl"] .statusSelect ul li i {
  margin-right: unset !important;
  margin-left: 10px;
}

[dir="rtl"] .statusSelect button::before {
  right: auto !important;
  left: 10px;
}

[dir="rtl"] .statusSelect ul li a i.text-black:after,
[dir="rtl"] .statusSelect button i.text-black:after {
  left: auto !important;
  right: 14px;
}

.moreEmp {
  display: inline-block;
  margin-left: 6px;
  color: #757575 !important;
  font-size: 14px;
  vertical-align: top;
  position: relative;
  top: 1px;
  font-weight: 500;
}

[dir="rtl"] .moreEmp {
  margin-left: unset;
  margin-right: 6px;
}

.newProjectFields .accordion-item {
  border: none;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 8px 0 rgba(136, 136, 136, 0.08);
  box-shadow: 0 0 8px 0 rgba(136, 136, 136, 0.08);
}

.clientSelect {
  display: inline-block;
  position: relative;
  top: 8px;
}

.clientSelect::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  height: 24px;
  background: #ddd;
  width: 1px;
}

.clientSelect::after {
  content: "";
  position: absolute;
  right: 0;
  top: 4px;
  height: 24px;
  background: #ddd;
  width: 1px;
}

[dir="rtl"] .clientSelect .dropdown-menu {
  left: auto !important;
  right: 0 !important;
}

[dir="rtl"] .clientSelect .dropdown-menu li {
  text-align: right;
}

.clientSelect .dropdown-menu li a {
  cursor: pointer;
}

.clientSelect .dropdown-toggle:after {
  display: none !important;
}

.clientSelect .btn-check:checked + .btn,
.clientSelect :not(.btn-check) + .btn:active,
.clientSelect .btn:first-child:active,
.clientSelect .btn.active,
.clientSelect .btn.show {
  border: 1px #fff solid !important;
  outline: none !important;
}

[dir="rtl"] .clientstable td:nth-child(4) {
  padding-left: 30px !important;
  padding-right: unset !important;
}
[dir="rtl"] .fitmaster .ql-formats {
  text-align: left !important;
}

[dir="rtl"] .folderOptions li a {
  text-align: right;
}

.formFilter .btn-primary {
  background-color: #001a70 !important;
  padding-bottom: 12px !important;
  border-color: #001a70 !important;
}

.formFilter .btn-primary:hover {
  background-color: #001a70 !important;
  border-color: #001a70 !important;
}
.templateOptions {
  float: right;
  margin-top: -46px;
  position: relative;
  z-index: 2;
}

[dir="rtl"] .templateOptions {
  float: left;
}

.templateOptions .dropdown-toggle:after {
  display: none !important;
}

[dir="rtl"] .skelton span {
  float: right !important;
}

.templateOptions .dropdown-toggle:after {
  display: none !important;
}

.templateOptions .dropdown-menu {
  min-width: 180px;
}

.templateOptions .dropdown-menu li {
  margin-bottom: 2px;
}

.templateOptions button {
  width: calc(100% - 16px);
  margin-left: 8px;
  text-align: left;
}

[dir="rtl"] .templateOptions button {
  text-align: right;
}

[dir="rtl"] .templateOptions .dropdown-menu-end {
  --bs-position: start;
}

.templateOptions .btn:first-child:active {
  border: none !important;
  outline: 0 !important;
}
.p-editor-container .p-editor-toolbar {
  background: #fff !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

[dir="rtl"] .p-editor-container .p-editor-toolbar {
  text-align: right !important;
}

[dir="rtl"] .ql-formats {
  text-align: left !important;
}
.morebigEmp {
  display: inline-block;
  margin-left: 8px;
  color: #757575 !important;
  font-size: 16px;
  vertical-align: top;
  position: relative;
  top: 7px;
  font-weight: 500;
}

[dir="rtl"] .morebigEmp {
  margin-left: unset;
  margin-right: 8px;
}

.p-editor {
  user-select: text !important;
}

.ql-toolbar.ql-snow .ql-formats .ql-clean {
  display: none !important;
}

body,
* {
  user-select: text !important;
  pointer-events: auto;
  background-color: transparent;
}
::selection {
  background-color: rgba(0, 0, 255, 0.5); /* Change to your desired color */
  color: white; /* Change text color if needed */
}

::-moz-selection {
  /* For Firefox */
  background-color: rgba(0, 0, 255, 0.5);
  color: white;
}
.mangarlist ul li a.dropdown-item {
  white-space: normal !important;
}

[dir="rtl"] .quickTarck {
  right: auto !important;
  left: 0;
}

.dateprojcard.svg-sec span {
  min-width: 60px;
  display: inline-block;
}

.typingComment {
  display: inline-block;
  width: 100%;
  padding-left: 55px;
  position: relative;
}

[dir="rtl"] .typingComment {
  padding-left: unset;
  padding-right: 55px;
}

.btn-sendcomment {
  border: none !important;
  background-color: #001a70 !important;
  color: #fff !important;
}

.projectstitlereport {
  font-weight: 600;
}

.autocomplete-list {
  position: absolute;
}

.kanban-board {
  display: inline-block;
  width: 100%;
  overflow-x: auto;
}

[dir="ltr"] #EditQmission input.taskname {
  text-align: left !important;
}

.sidestart .mat-date-range-input-start-wrapper {
  min-width: 63px;
}

[dir="rtl"] .sidestart .p-autocomplete .p-autocomplete-panel {
  left: 0 !important;
}

.modal-content:has(.input-container) {
  min-height: 340px;
}

.custom-select {
  max-width: 100%; /* Adjust the width of the select box */
}

/* Targeting the dropdown list options */
.custom-select option {
  max-height: 200px; /* Maximum height of the dropdown */
  overflow-y: auto; /* Enable vertical scrolling */
}

.zindextitle {
  z-index: 3;
}

.noborderclient input {
  border: 0 !important;
}

.noborderclient .p-inputtext:enabled:focus {
  box-shadow: none;
  border-color: transparent;
}

.zindextitle {
  padding-bottom: 10px;
}

.zindextitle input {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 10px);
}

.zindextitle .form-control:focus {
  box-shadow: none !important;
}

.zindextitle .text-danger {
  position: relative;
  display: block;
  bottom: 0;
  left: 0;
}

.zindextitle .text-danger::before {
  position: absolute;
  content: "";
  top: -47px;
  left: 0;
  width: 100%;
  height: 46px;
  border-radius: 5px;
  z-index: 0;
  border: 1px #dc3545 solid;
}

[dir="rtl"] #addNewQmission input.taskname {
  top: 2px;
  padding-top: 0 !important;
}

.rushmission {
  display: inline-block;
  background: #fee2e2;
  height: 30px;
  border-radius: 15px;
  padding: 0 12px;
  margin: 0 15px;
  line-height: 30px;
  font-size: 14px;
  color: #991b1b;
}

.rushmission i {
  margin-right: 5px;
}

[dir="rtl"] .rushmission i {
  margin-right: unset;
  margin-left: 5px;
}

.input-container .col-9 .autocomplete-list {
  max-width: calc(100% - 21px);
}

.calendar .mat-date-range-input {
  display: inline-block;
  max-width: calc(100% - 40px);
}

.optionsClients {
  height: 200px;
  display: inline-block;
  overflow-y: auto;
}

[dir="rtl"] .logoSupplier {
  left: auto !important;
  right: 0;
}

[dir="rtl"] .supplierMore {
  right: auto !important;
  left: 0;
}

[dir="rtl"] a.addSupplier {
  right: auto !important;
  left: 10px;
}

[dir="rtl"] .paymentInput span {
  right: auto !important;
  left: -1px;
  border-radius: 5px 0 0 5px !important;
}

[dir="rtl"] .persentInput span {
  right: auto !important;
  left: -1px;
  border-radius: 5px 0 0 5px !important;
}

.countprojectFees {
  position: absolute;
  top: 58px;
  left: 50%;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  transform: translateX(-50%);
  padding-bottom: 30px;
  z-index: 5;
  text-align: center;
  -webkit-transform: translateX(-50%);
}

.countprojectFees b {
  position: absolute;
  bottom: 0;
  left: 50%;
  color: #6b7280;
  font-size: 22px;
  font-weight: 700;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.countprojectFees small {
  position: absolute;
  bottom: -35px;
  left: 50%;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

[dir="rtl"] .addPaymentsbtn i {
  margin: 0 0 0 5px !important;
}

[dir="rtl"] ul.keyChart li {
  padding: 0 17px 0 0 !important;
  margin: 0 0 10px 10px !important;
}

[dir="rtl"] ul.keyChart.columnKey li {
  margin: 0 0 3px 10px !important;
}

[dir="rtl"] ul.keyChart li::before {
  left: auto !important;
  right: 0;
}

[dir="rtl"] .tablePayment .checkholder {
  left: auto !important;
  right: 10px;
}

[dir="rtl"] .generalBalance {
  padding: 0 28px 0 0 !important;
}

[dir="rtl"] .generalBalance i {
  left: auto !important;
  right: 0;
}

.btn-darkblue {
  color: #fff !important;
  background: #001a70 !important;
  border-color: #001a70 !important;
}

.endSidechart {
  float: right;
}

[dir="rtl"] .endSidechart {
  float: left;
}

ul.tooltipTeam {
  position: absolute;
  top: 0;
  left: 50px;
  background: #fff;
  display: none;
  padding: 5px;
  z-index: 2;
  width: calc(100% - 60px);
  border: 1px #ddd solid;
}

.kanbenboard ul.tooltipTeam {
  position: absolute;
  top: 129px;
  left: 15px;
  background: #fff;
  display: none;
  padding: 5px;
  z-index: 99;
  width: calc(100% - 60px);
  border: 1px #ddd solid;
}
.kanbenboard ul.tooltipTeam.grid {
  position: absolute;
  top: auto;
  left: auto;
  width: auto;
  right: auto;
}
[dir="rtl"] ul.tooltipTeam {
  left: auto;
  right: 50px;
}

ul.tooltipTeam li {
  display: inline-block;
  width: 100%;
  list-style: none;
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.show-list {
  display: block !important;
}
.show-listt {
  display: block !important;
}

.tooltip-n {
  position: relative; z-index: 10;
  display: inline-block;
  cursor: pointer;
}

.tooltip-n .tooltiptext {
  visibility: hidden;
  max-width: 140px; white-space: nowrap;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 6px; font-size: 14px;
  position: absolute;
  z-index: 1;
  top: 125%; 
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-n:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.titleColKan  {
 position: relative;
}

.titleColKan .dropstart  {
  position: absolute; right:10px; top:7px; z-index: 10;
}

[dir="rtl"] .titleColKan .dropstart  {
  right:auto; left:10px
}

.titleColKan .dropstart .btn-light  {
  background-color: #f6f6f6 !important; border-color: #ddd !important; 
  border-radius: 15px !important; width: 30px !important; height: 30px !important;
}

.titleColKan .dropstart .btn-light i {
  position: absolute; top:50%; left:50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

.titleColKan .dropstart .dropdown-menu li  {
  height: 28px;
}

.titleColKan .dropstart .dropdown-menu li button  {
 text-align: left; font-weight: bold; vertical-align: top;
}

[dir="rtl"] .titleColKan .dropstart .dropdown-menu li button {
 text-align: right; font-weight: bold;
}

.titleColKan .dropstart .dropdown-menu .btn-check:checked+.btn, .titleColKan .dropstart .dropdown-menu :not(.btn-check)+.btn:active, .titleColKan .dropstart .dropdown-menu .btn:first-child:active, .titleColKan .dropstart .dropdown-menu .btn.active, .titleColKan .dropstart .dropdown-menu .btn.show 
{
  border-color: transparent !important;
}
.titleColKan .dropstart .dropdown-toggle:before  {
  display: none;
}

.tox-statusbar__wordcount  {
  display: none !important;
}

[dir="rtl"] .fixedheight-move .p-scrollpanel-bar-y {
  right: calc(100% - 10px) !important;
  opacity: 1 !important;
}

[dir="rtl"] .kanban-board-all .dropstart .dropdown-menu.show
 {
    left: auto !important;
    right: -142px !important;
    transform: unset !important;
}

[dir="rtl"] .outgoing .message-options  {
  left: auto !important; right:-30px !important
}

[dir="rtl"] .incoming .message-options  {
  right: auto !important; left:-30px !important
}

@media (min-width: 1600px) {
  html,
  body {
    font-size: 17px;
  }

  .titleColKan .dropstart {
    top: 4px;
}

  .titleColKan .dropstart .btn-light  {
   width: 37px !important;  height: 37px !important;
  border-radius: 19px !important;
}

  .modal-content:has(.input-container) {
    min-height: 360px;
  }

  .input-container .col-9 .autocomplete-list {
    max-width: calc(100% - 25px);
  }

  .iconsearch {
    font-size: 22px;
  }

  .stats {
    font-size: 16px;
  }

  .itemsshow {
    top: 20px;
    border-radius: 5px;
    font-size: 16px;
  }

  .page-number-buttons.donepagination button {
    font-size: 18px;
  }

  ul.breadcramb li a {
    font-size: 17px;
  }

  .title-list {
    font-size: 21px !important;
    margin-bottom: 10px;
  }

  .btn-add {
    font-size: 17px;
    border-radius: 6px;
    height: 42px;
    margin-top: -4px;
    padding: 0 15px;
  }

  .btn-add span {
    line-height: 38px;
    height: 40px;
    font-size: 17px;
  }

  .btn-add i {
    font-size: 20px;
    line-height: 40px;
    height: 40px;
  }

  .btnholders button {
    font-size: 18px;
    width: 120px;
    border-radius: 5px;
    height: 40px;
    line-height: 38px;
    margin: 0 5px;
  }

  .btnholders {
    padding: 6px 4px;
  }

  .filterlist.form-control {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
      .hide-mob {
        display: none !important;
    }
  .itemsshow {
    position: relative;
    right: unset;
    top: unset;
    margin-bottom: 10px;
  }

  .page-number-buttons.donepagination {
    padding: 0 !important;
  }
}

.morebigEmp {
  display: inline-block;
  margin-left: 8px;
  color: #757575 !important;
  font-size: 16px;
  vertical-align: top;
  position: relative;
  top: 7px;
  font-weight: 500;
}

[dir="rtl"] .morebigEmp {
  margin-left: unset;
  margin-right: 8px;
}

@media (min-width: 576px) {
  .rolllisttrans .modal-dialog {
    max-width: 640px !important;
  }
}

@media print {
  .fitmaster {
    padding: 0 !important;
  }

  header,
  .sidedark,
  .overlay3,
  .overlay4,
  .iconopen,
  .iconopen2,
  .optionreport,
  ul.tab-project.nav-tabs li .nav-link {
    display: none !important;
  }

  ul.tab-project.nav-tabs li .nav-link.active {
    display: block !important;
    border: 1px #000 solid !important;
  }
}

.p-datepicker-group-container {
  background: #ffff;
  padding: 34px;
  border-radius: 13px;
  width: 100%;
}

.p-calendar.p-calendar-w-btn {
  border: 1px solid #e5e7eb;
}

.example-form-field {
  margin-right: 20px;
}

.cancel {
  color: #6b7280; 
  border: none;
  height: 40px;
  letter-spacing: 0;
  font-size: 18px;
  background: none;
  margin: 0 5px;
}

.apply {
  background: #001a70 !important;
  border: none;
  color: #fff !important;
  letter-spacing: 0;
  font-size: 18px;
  border-radius: 10px;
  height: 40px;
  margin: 0 5px;
}

.mat-calendar-period-button {
  width: 100%;
}

.mat-calendar-body-cell-content.mat-focus-indicator {
  font-size: 14px;
  font-family: "Cairo";
}

.mat-calendar-table-header tr th span,
span#mat-calendar-button-1,
.mat-calendar-body-label,
.mat-button-wrapper,
.mat-date-range-input-inner {
  font-family: "Cairo" !important;
}

button.mat-focus-indicator.mat-calendar-previous-button.mat-icon-button.mat-button-base {
  position: absolute;
  left: 13px;
}

button.mat-focus-indicator.mat-calendar-next-button.mat-icon-button.mat-button-base {
  position: absolute;
  right: 13px;
}

.mat-calendar-table-header-divider {
  display: none;
}

.mat-calendar-body-selected {
  background-color: #001a70 !important;
}

.mat-calendar-body-in-range::before {
  background: #f8fafc !important;
}

.mat-calendar-body-today {
  background-color: #fff !important;
}

.mat-calendar-body-today.mat-calendar-body-selected {
  background-color: #001a70 !important;
}

.dates {
  color: #6b7280;
}

.mat-datepicker-content-touch .mat-datepicker-content-container {
  width: 53vh !important;
  height: auto !important;
}

.mat-datepicker-actions {
  border-top: 1px solid #80808042;
  padding: 18px 16px !important;
}

.mat-datepicker-content-touch {
  border-radius: 15px !important;
}

.mat-form-field-infix.ng-tns-c105-0 {
  border: 1px solid #e5e7eb;
  display: flex;
  padding: 12px;
  width: 100%;
  border-radius: 5px;
  box-shadow: 0px 1px 2px 0px #0000000d;
}

.mat-form-field-underline.ng-tns-c105-0.ng-star-inserted {
  display: none;
}

.mat-form-field-type-mat-date-range-input .mat-form-field-infix {
  width: 100%;
  padding: 2px 0;
}

.example-form-field.mat-form-field {
  display: inline;
}

.mat-date-range-input-container {
  height: 100%;
  padding: 0 12px;
}

.input-container {
  margin: 20px;
}

.input-with-chips {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  padding: 5px;
  align-items: center;
  border-radius: 5px;
  min-height: 50px;

  position: relative;
}

.input-container .chip {
  background-color: #2196f3;
  color: white;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}

.input-container .chip-remove {
  margin: 0px 9px;
  background: #e5e7eb;
  width: 19px;
  text-align: center;
  border-radius: 50%;
  height: 21px;
  color: #1f2937;
  font-size: 12px;
  cursor: pointer;
}

.input-container input {
  border: none;
  outline: none;
  flex-grow: 1;
  font-size: 14px;
  padding: 5px;
  background: transparent;
}

.input-container button {
  margin-top: 0;
  padding: 5px 10px;
  background-color: #001a70;
  color: white;
  border: none;
  border-radius: 5px;
  min-height: 50px;
  cursor: pointer;
  width: 100%;
  font-size: 15px;
}

.input-container button:hover {
  background-color: #001a70;
}

.input-container .table {
  margin-top: 20px;
  width: 100%;
  border-collapse: collapse;
}

.input-container .table,
.input-container .table th,
.input-container .table td {
  border: 1px solid black;
}

.input-container .table th,
.input-container .table td {
  padding: 10px;
  text-align: left;
}

.input-container .autocomplete-list {
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
  width: 100%;
  z-index: 1000;
  margin-top: 0px;
  padding: 0;
  list-style: none;
  border-radius: 5px;
}

.input-container .autocomplete-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.input-container .autocomplete-img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 50%;
}

.input-container .autocomplete-list li:hover {
  background-color: #f0f0f0;
}

.input-container .chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 0;
  background-color: #fff;
  border-radius: 16px;
  margin-right: 5px;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

.input-container .chip-img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 8px;
}

.input-container .table-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.input-container .list h4 {
  font-size: 16px;
  margin: 0 0 32px;
  display: flex;
  font-weight: 700;
  color: #1f2937;
  justify-content: space-between;
}

.input-container .list {
  margin: 27px 0;
  border-top: 1px solid #e5e7eb;
  padding: 22px 0;
  text-align: initial;
}

.input-container .list ul {
  padding: 0;
}

.input-container .list ul li {
  list-style: none;
  margin: 15px 0;
}

.input-container .list ul li .user {
  display: flex;
  gap: 12px;
  align-items: center;
}

.input-container .list ul li .user .user-email {
  color: #b3b3b3;
  font-size: 13px;
}

.input-container .list ul li .user .user-name {
  color: #202020;
  margin: 0 0;

  font-size: 15px;
  font-weight: 700;
}
.dateMission input {
  display: inline-block;
  border: 1px #ddd solid;
  border-radius: 5px;
  height: 38px;
  line-height: 36px;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
}
.mat-form-field {
  width: 100%;
}
.mat-form-field-appearance-outline .mat-form-field-wrapper {
  margin: 0 !important;
}
.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 2px 0 8px !important;
}
.btn.btn-primary {
  background: #001a70;
}
#mainContent, .offcanvass {
  margin-top: 65px;
}

@media (max-width: 768px) {
  #mainContent, .offcanvass {
    margin-top: 9rem;
  }
}

.modal.fade.d-none.show {
  display: block !important;
}
::ng-deep .p-button-icon.pi.pi-chevron-down {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 21px;
  height: 12px;
}
::ng-deep .p-button-icon.pi.pi-chevron-down::before {
  display: none;
}
::ng-deep .p-autocomplete-dd button.p-autocomplete-dropdown {
  background: none;
  border: none;
}
::ng-deep .p-autocomplete {
  border: 1px solid #dee2e6;
  border-radius: 7px;
}
::ng-deep .p-autocomplete-dd .p-autocomplete-input {
  border: none;
}
ul.tooltipTeam.popup {
  position: absolute;
  left: auto;
  top: 30px;
  background: #fff;
  display: none;
  padding: 5px;
  z-index: 2;
  width: max-content;
  border: 1px #ddd solid;
}
::ng-deep .contract .tox-tinymce {
  height: 502px !important;
}
[dir="rtl"] #addNewQmission input.taskname {
  text-align: right;
}
::ng-deep [dir="rtl"] .p-autocomplete-dd .p-autocomplete-input,
.p-autocomplete-dd .p-autocomplete-multiple-container {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
::ng-deep [dir="rtl"] .p-autocomplete-dd .p-autocomplete-dropdown {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}