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

/*[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: .25rem .75rem !important;
}

[dir="rtl"] .form-select {
  padding: .375rem .75rem .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: relative;
  left: 0px;
  display: inline-block;
  vertical-align: top;
  background: #fff;
  border-bottom: 1px #F0EFF6 solid;
  min-height: 40px;
}

[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-block;
  padding: 14px 0 0;
  margin: 0 12px;
}

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

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

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

.filterlist .form-control {
  width: calc(100% - 5px);
  margin-right: 35px;
  display: inline-block;
  padding: .65rem .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: .65rem 2.25rem .65rem .75rem !important;
}

[dir="rtl"] .filterstatePro.form-select {
  padding: .65rem .75rem .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: .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: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: .35rem 0.85rem !important;
  border-radius: 3px;
}

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


.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: .35rem .75rem
}

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

[dir="rtl"] .column .p-scrollpanel-bar-y {
  right: 297px !important;
  opacity: 1 !important;
}

.p-scrollpanel-content {
  padding: 0 18px 18px 0 !important;
}

[dir="rtl"] .p-scrollpanel-content {
  padding: 0 0 18px 18px !important;
}

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

.profilelist {
  margin-left: 10px;
}

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

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

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

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

[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: .65rem .75rem .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:.5rem 32px .75rem .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: 92px;
  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;
  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;
}

.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: .65rem !important;
  padding-bottom: .65rem !important;
}

.formFilter .form-select {
  padding-top: .65rem !important;
  padding-bottom: .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
}

.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"] .column .p-scrollpanel .p-scrollpanel-bar  {
  right:calc(0% - 300px) !important
}

[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: -18px;
  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;
}

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

  @media (min-width: 1600px)  {

  html,
  body {
    font-size: 17px;
  }

  .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) {
  .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;
  font-weight: 700;
  color: #1F2937;
}

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