/*b5 end ---------------------------------------------------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&display=swap");
:root {
  --primary-font: "Roboto", sans-serif;
}

.bg-primary {
  background: #2A7DE1 !important;
}

.btn-primary {
  background: #2A7DE1;
  border-color: #2A7DE1;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: rgba(42, 125, 225, 0.8) !important;
  border-color: #2A7DE1;
}

.btn-outline-primary {
  background: transparent;
  border-color: #2A7DE1;
  color: #2A7DE1;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: rgba(42, 125, 225, 0.8) !important;
  border-color: #2A7DE1;
  box-shadow: none;
  outline: none;
}

.text-primary {
  color: #2A7DE1 !important;
}

.bg-primary2 {
  background: #0263D1 !important;
}

.bg-light-primary {
  background: #D4E5F9 !important;
}

.bg-light-primary1 {
  background: #EAF2FC !important;
}

.bg-white {
  background: #fff !important;
}

.text-white {
  color: #fff !important;
}

.text-black {
  color: #000 !important;
}

.text-black1 {
  color: #1D1E1E !important;
}

.bg-secondary {
  background: #5F5F5F !important;
}

.btn-secondary {
  background: #5F5F5F;
  border-color: #5F5F5F;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background: rgba(95, 95, 95, 0.8) !important;
  border-color: #5F5F5F;
}

.text-secondary {
  color: #5F5F5F !important;
}

.bg-red {
  background: #E1251B !important;
}

.btn-red {
  background: #E1251B;
  border-color: #E1251B;
}
.btn-red:hover, .btn-red:focus, .btn-red:active {
  background: rgba(225, 37, 27, 0.8) !important;
  border-color: #E1251B;
}

.btn-outline-red {
  background: transparent;
  border-color: #E1251B;
  color: #E1251B;
}
.btn-outline-red:hover, .btn-outline-red:focus, .btn-outline-red:active {
  background-color: rgba(225, 37, 27, 0.8) !important;
  border-color: #E1251B;
  box-shadow: none;
  outline: none;
}

.text-red {
  color: #E1251B !important;
}

.bg-light-grey {
  background: #F6F6F6 !important;
}

.bg-green {
  background: #00AC69 !important;
}

.btn-green {
  background: #00AC69;
  border-color: #00AC69;
}
.btn-green:hover, .btn-green:focus, .btn-green:active {
  background: rgba(0, 172, 105, 0.8) !important;
  border-color: #00AC69;
}

.text-green {
  color: #00AC69 !important;
}

.bg-green1 {
  background: #00733B !important;
}

.bg-light-red {
  background: #FCE9E8 !important;
}

.bg-light-blue {
  background: #EAF2FC !important;
}

.bg-grey2 {
  background: #EDEDED !important;
}

.bg-light-black {
  background: #4D4D4D !important;
}

.text-light-black {
  color: #4D4D4D !important;
}

.bg-grey3 {
  background: #949494 !important;
}

.text-grey3 {
  color: #949494 !important;
}

.bg-grey4 {
  background: #B8B8B8 !important;
}

.text-grey4 {
  color: #B8B8B8 !important;
}

.bg-grey5 {
  background: #F1F1F1 !important;
}

.text-grey6 {
  color: #717171 !important;
}

.text-grey7 {
  color: #A6A6A6 !important;
}

.bg-black2 {
  background: #1D1E1E !important;
}

.text-black2 {
  color: #1D1E1E !important;
}

.btn-outline-primary {
  padding: 8px 16px;
  border-radius: 8px;
  background-color: #fff;
  color: #2A7DE1;
  display: inline-block;
  line-height: 18px;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 1200px) {
  .btn-outline-primary:hover {
    background-color: #2A7DE1;
    color: #fff;
  }
}

.btn-primary {
  padding: 8px 16px;
  border-radius: 8px;
  background-color: #2A7DE1;
  color: #fff;
  display: inline-block;
  line-height: 18px;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 1200px) {
  .btn-primary:hover {
    background-color: #2A7DE1;
    color: #fff;
  }
}
.btn-outline-primary {
  padding: 8px 16px;
  border-radius: 8px;
  color: #2A7DE1;
  border: 1px solid #2A7DE1;
  line-height: 18px;
  transition: all 0.3s ease-in-out;
  text-align: center;
}
@media (min-width: 1200px) {
  .btn-outline-primary:hover {
    background-color: #2A7DE1;
    color: #fff;
  }
}

body, html {
  margin: 0;
  direction: ltr;
  min-height: 100%;
}

body {
  font-size: 16px;
  font-family: var(--primary-font);
  font-weight: normal;
  background: #fff;
  overflow-x: hidden;
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  body {
    background-color: red;
  }
}

section {
  overflow: hidden;
}

.container-lg {
  max-width: 1484px;
}

.nav-tabs {
  border-bottom: none;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

a {
  transition: all 300ms;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  transition: all 300ms;
}

p, .btn,
button, input, select, textarea, .form-control, .form-select,
.dropdown-menu {
  font-size: 16px;
}

.form-control {
  padding: 10px;
}

[class*=" icon-"]:before, [class^=icon-]:before {
  margin: 0;
}

.h1, h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  .h1, h1 {
    font-size: 2.5rem;
  }
}

.h2 {
  font-size: 1.25rem;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.border-primary {
  border: 1px solid #2A7DE1;
}
.border-bottom-grey2 {
  border-bottom: 1px solid #EDEDED;
}
.border-dashed {
  border-top: 1px dashed #CACACA;
}
.border-grey2 {
  border: 1px solid #EDEDED;
}
.border-left {
  border-inline-start: 1px solid #E3E3E3;
}
.border-default {
  position: relative;
}
.border-default::after {
  position: absolute;
  content: "";
  inset-inline-end: 0;
  background-color: #EDEDED;
  width: 1px;
  top: 50%;
  transform: translateY(-50%);
  height: 12px;
}
.border-bottom-dashed {
  border-bottom: 1px dashed #EDEDED;
}
.size-8x9 {
  width: 8px;
  height: 9px;
}
@media (max-width: 575.98px) {
  .size-8x9 {
    width: 6px;
    height: 7px;
  }
}
.size-10 {
  width: 10px;
  height: 10px;
}
.size-13 {
  width: 13px;
  height: 13px;
}
.size-16 {
  width: 16px;
  height: 16px;
}
@media (max-width: 575.98px) {
  .size-16 {
    width: 18px;
    height: 18px;
  }
}
.size-20 {
  width: 20px;
  height: 20px;
}
.size-23 {
  width: 23px;
  height: 23px;
}
@media (max-width: 575.98px) {
  .size-23 {
    width: 18px;
    height: 18px;
  }
}
.size-24 {
  width: 24px;
  height: 24px;
}
.size-32 {
  width: 32px;
  height: 32px;
}
@media (max-width: 575.98px) {
  .size-32 {
    width: 26px;
    height: 26px;
  }
}
.size-40 {
  width: 40px;
  height: 40px;
}
@media (max-width: 575.98px) {
  .size-40 {
    width: 30px;
    height: 30px;
  }
}
.size-48 {
  width: 48px;
  height: 48px;
}
.size-56 {
  width: 56px;
  height: 56px;
}
.size-60 {
  width: 60px;
  height: 60px;
}
.size-18x20 {
  width: 18px;
  height: 20px;
}
.size-24x29 {
  width: 24px;
  height: 29px;
}
.size-120 {
  width: 120px;
  height: 120px;
}
@media (max-width: 767.98px) {
  .size-120 {
    width: 100px;
    height: 100px;
  }
}

.fs-12 {
  font-size: 12px;
}
.fs-14 {
  font-size: 14px;
}
.fs-16 {
  font-size: 16px;
}
@media (max-width: 767.98px) {
  .fs-16 {
    font-size: 16px;
  }
}
.fs-18 {
  font-size: 18px;
}
@media (max-width: 991.98px) {
  .fs-18 {
    font-size: 18px;
  }
}
@media (max-width: 575.98px) {
  .fs-18 {
    font-size: 16px;
  }
}
.fs-20 {
  font-size: 16px;
}
@media (min-width: 1200px) {
  .fs-20 {
    font-size: 20px;
  }
}
@media (max-width: 575.98px) {
  .fs-20 {
    font-size: 16px;
  }
}
.fs-24 {
  font-size: 24px;
}
@media (max-width: 1199.98px) {
  .fs-24 {
    font-size: 18px;
  }
}
@media (max-width: 575.98px) {
  .fs-24 {
    font-size: 16px;
  }
}
.fs-40 {
  font-size: 40px;
}
@media (max-width: 991.98px) {
  .fs-40 {
    font-size: 24px;
  }
}
@media (max-width: 575.98px) {
  .fs-40 {
    font-size: 25px;
  }
}

.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}

.gap-32 {
  -moz-column-gap: 32px;
       column-gap: 32px;
}
.gap-10 {
  -moz-column-gap: 10px;
       column-gap: 10px;
}

.gy-32 {
  row-gap: 32px;
}
@media (max-width: 767.98px) {
  .gy-32 {
    row-gap: 16px;
  }
}

.radius-4 {
  border-radius: 4px;
}
.radius-8 {
  border-radius: 8px;
}
.radius-16 {
  border-radius: 16px;
}
.radius-32 {
  border-radius: 32px;
}
.radius-50 {
  border-radius: 50%;
}

.radius-top-16 {
  border-start-start-radius: 16px;
  border-start-end-radius: 16px;
}

.radius-bottom-16 {
  border-end-start-radius: 16px;
  border-end-end-radius: 16px;
}

.mb-32 {
  margin-bottom: 32px;
}
@media (max-width: 991.98px) {
  .mb-32 {
    margin-bottom: 15px;
  }
}
.mb-56 {
  margin-bottom: 56px;
}
@media (max-width: 991.98px) {
  .mb-56 {
    margin-bottom: 20px;
  }
}
.mb-28 {
  margin-bottom: 28px;
}

.p-12 {
  padding: 12px;
}

.py-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}
.py-32 {
  padding-top: 32px;
  padding-bottom: 32px;
}
@media (max-width: 991.98px) {
  .py-32 {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: auto !important;
}

.p-inline-start-3 {
  padding-inline-start: 3px;
}
.p-inline-start-8 {
  padding-inline-start: 8px;
}

p a,
h6 a {
  color: #2A7DE1;
}
p a:hover,
h6 a:hover {
  color: #2A7DE1;
  text-decoration: underline;
}

body {
  background-color: #F6F6F6;
  font-family: "Roboto", sans-serif;
}
body .h2,
body .h3,
body .h4,
body .h5,
body .h6 {
  font-weight: 500;
}

.dropdown-toggle.arrow-primary::after {
  border-top: none;
  border-right: none;
  border-left: none;
  background-image: url(../images/down-arrow.svg);
  width: 12px;
  height: 7px;
  vertical-align: middle;
}

.arrow-size {
  width: 12px;
  height: 7px;
}

.content-holder {
  position: relative;
  transition: all 0.5s ease-in-out;
}

.page-holder {
  position: relative;
  overflow-x: hidden;
}

.section-holder {
  height: calc(100vh - 120px);
  overflow: hidden;
  overflow-y: auto;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-inline-start: 15px;
  padding-inline-end: 15px;
  transition: all 0.5s ease-in-out;
}
@media (min-width: 1200px) {
  .section-holder {
    margin-inline-start: 320px;
  }
}
@media (min-width: 1200px) {
  .section-holder {
    padding-inline-start: 32px;
    padding-inline-end: 32px;
    padding-top: 32px;
    padding-bottom: 38px;
  }
}
.section-holder::-webkit-scrollbar {
  width: 5px;
}
.section-holder::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.section-holder::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 3px;
}
@media (max-width: 767.98px) {
  .section-holder h1 {
    font-size: 25px !important;
  }
}

.sidebar-wrap {
  position: fixed;
  padding-inline-start: 32px;
  padding-bottom: 38px;
  padding-top: 32px;
  transition: all 0.5s ease-in-out;
  z-index: 99;
  top: 0px;
  bottom: 0px;
}

@media (max-width: 1199.98px) {
  .sidebar-wrap .page-aside {
    height: 100vh;
  }
}

@media (max-width: 1199.98px) {
  .page-holder.dashboard-close .sidebar-wrap {
    transform: translateX(0);
  }
}

.dashboard-close .sidebar-wrap {
  position: fixed;
  transform: translateX(-100%);
}
.dashboard-close .dashboard-icon {
  transition: all 0.5s ease-in-out;
  transform: rotate(180deg);
}

.section {
  height: 500px;
}

.text-name {
  max-width: 230px;
}

.daterange {
  border-radius: 8px !important;
  padding: 8px 40px !important;
  cursor: pointer;
  max-width: 230px;
}
@media (max-width: 1499px) {
  .daterange {
    padding: 5px 40px;
  }
}
.daterange::-moz-placeholder {
  color: #2A7DE1;
}
.daterange::placeholder {
  color: #2A7DE1;
}

.daterange-label {
  position: absolute;
  inset-inline-start: 16px;
  top: 48%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  z-index: 6;
  cursor: pointer;
}

.picker-group::after {
  position: absolute;
  content: "";
  background-image: url(../images/down-arrow.svg);
  width: 16px;
  height: 8px;
  background-repeat: no-repeat;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  pointer-events: none;
}

.timer-wrap {
  padding-inline-start: 24px;
  margin-inline-start: 24px;
  border-inline-start: 1px solid #EDEDED;
}
@media (max-width: 991.98px) {
  .timer-wrap {
    padding-inline-start: 0px;
    margin-inline-start: 0px;
    border-inline-start: 1px solid transparent;
  }
}

.status-card_wrap {
  margin: 0 -24px;
}

.status-card {
  position: relative;
  padding: 0 24px;
  overflow: hidden;
  inset-inline-start: -1px;
  flex: 0 0 100%;
  position: relative;
}
@media (max-width: 575.98px) {
  .status-card {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .status-card::before {
    position: absolute;
    content: "";
    width: calc(100% - 48px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    height: 1px;
    background-color: #EDEDED;
    bottom: 0;
  }
}
@media (min-width: 576px) {
  .status-card {
    flex: 0 0 50%;
    border-top: none;
  }
}
@media (min-width: 768px) {
  .status-card {
    flex: 0 0 33.3%;
  }
}
@media (min-width: 1200px) {
  .status-card {
    flex: 0 0 20%;
  }
}
.status-card::after {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  background-color: #EDEDED;
}
@media (min-width: 576px) {
  .status-card::after {
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 109px;
  }
}
.status-card.progress-card .count {
  color: #2A7DE1;
}
.status-card.progress-card .icon-wrap {
  background-color: #EAF2FC;
  border: 1px solid #D4E5F9;
}
.status-card.progress-card .icon-wrap i {
  background-color: #2A7DE1;
}
.status-card.completed-card .count {
  color: #00AC69;
}
.status-card.completed-card .icon-wrap {
  background-color: #E5F7F0;
  border: 1px solid #cceee1;
}
.status-card.completed-card .icon-wrap i {
  background-color: #00AC69;
}
.status-card.pending-card .count {
  color: #4D4D4D;
}
.status-card.pending-card .icon-wrap {
  background-color: #EDEDED;
  border: 1px solid #dbdbdb;
}
.status-card.pending-card .icon-wrap i {
  background-color: #5F5F5F;
}
.status-card.due-card .count {
  color: #E1251B;
}
.status-card.due-card .icon-wrap {
  background-color: #FCE9E8;
  border: 1px solid #f9d3d1;
}
.status-card.due-card .icon-wrap i {
  background-color: #E1251B;
}
.status-card.review-card .count {
  color: #FFB71B;
}
.status-card.review-card .icon-wrap {
  background-color: #FFF8E8;
  border: 1px solid #fff1d1;
}
.status-card.review-card .icon-wrap i {
  background-color: #FFB71B;
}

.graph-img {
  --bs-aspect-ratio: 14.02%;
  overflow: hidden;
}
.graph-img img {
  -o-object-fit: contain;
     object-fit: contain;
}

.time-add {
  overflow: hidden;
  margin: 0 -8px;
}

.gx-8 {
  -moz-column-gap: 8px;
       column-gap: 8px;
}

.p-24 {
  padding: 24px;
}

.px-16 {
  padding-inline: 16px;
}

.py-12 {
  padding-block: 12px;
}

.pb-21 {
  padding-bottom: 21px;
}

.clamp-text-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-member-name {
  min-width: 100px;
}

@media (max-width: 575.98px) {
  .name-wraper {
    max-width: 50px;
  }
}
.time-sheet-status .nav-pills,
.horiz-scroll .scroll-cls {
  overflow: auto;
  width: 100%;
  flex-wrap: nowrap;
}
.time-sheet-status .nav-pills::-webkit-scrollbar,
.horiz-scroll .scroll-cls::-webkit-scrollbar {
  height: 4px;
}
.time-sheet-status .nav-pills::-webkit-scrollbar-thumb,
.horiz-scroll .scroll-cls::-webkit-scrollbar-thumb {
  background-color: #D4E5F9;
  height: 2px;
  border-radius: 20px;
}
.time-sheet-status .nav-pills::-webkit-scrollbar-track,
.horiz-scroll .scroll-cls::-webkit-scrollbar-track {
  background-color: transparent;
  margin-inline: 15px;
}

.delete-modal {
  --bs-modal-width: 592px;
}
.delete-modal .modal-header {
  border-bottom: none;
}
.delete-modal .modal-footer {
  border-top: none;
}

.btn-close {
  -webkit-mask: url("../images/close-circle.svg") center no-repeat;
  background-color: #4D4D4D;
  width: 24px;
  height: 24px;
}

.name-wrap {
  display: inline-flex;
  background-color: white;
  border: 1px solid #ededed;
}

.radius-bottom-16 {
  border-end-end-radius: 16px;
  border-end-start-radius: 16px;
}

th {
  font-weight: 300;
}

.shadow1 {
  box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.0588235294);
}

.mt-adjt {
  margin-top: 2px;
}

.nav-pills .nav-link.active {
  background-color: #2A7DE1;
  color: White;
}

.nav-pills .nav-link {
  color: #2A7DE1;
}

@media (max-width: 1600px) {
  .proj-list .fs-16 {
    font-size: 16px;
  }
}

@media (max-width: 1600px) {
  .time-sheet-dashboard .fs-18 {
    font-size: 16px;
  }
}

.btn-dot {
  width: 20px;
  height: 20px;
  background-image: url("../images/dots.svg");
  background-size: cover;
  background-position: center;
  border: none;
  cursor: pointer;
  margin-inline-start: 16px;
}

.overflow-scroll {
  overflow-y: auto;
  max-height: 100%;
  border-radius: 50px;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

/* Scrollbar styling for WebKit (Chrome, Safari, Edge) */
.overflow-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.overflow-scroll::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 8px;
}

.overflow-scroll::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.bg-trans {
  background-color: transparent;
}

.bdr-trans {
  border-color: transparent;
}

#search-row {
  transition: all 0.3s ease-in-out;
}

.search-bar .card {
  border: 1px solid var(--Color-GreyScale-GreyScale300, #cacaca);
  border-radius: 16px;
}
.search-bar .input-group {
  border: 1px solid #EDEDED;
  border-radius: 8px;
}
.search-bar .form-control {
  padding: 5px !important;
  border-color: transparent;
}
.search-bar .input-group-text {
  background-color: transparent;
  border-color: transparent;
}

.filter-bar .bdr-top {
  border-top: 1px solid #EDEDED;
  margin-inline: -16px;
  padding-top: 16px;
}
@media (max-width: 991.98px) {
  .filter-bar .bdr-top {
    margin-inline: -8px;
  }
}
.filter-bar .btn-outline-primary {
  padding: 5px 8px;
  border-radius: 8px;
  color: #2A7DE1;
  border: 1px solid #2A7DE1;
  background-color: transparent;
}
.filter-bar .btn-outline-primary i {
  background-color: #2A7DE1;
}
.filter-bar .btn-outline-primary:hover, .filter-bar .btn-outline-primary:focus, .filter-bar .btn-outline-primary:active, .filter-bar .btn-outline-primary.active {
  background-color: #2A7DE1;
  color: #fff;
  border-color: #2A7DE1;
}
.filter-bar .btn-outline-primary:hover span.text-primary, .filter-bar .btn-outline-primary:focus span.text-primary, .filter-bar .btn-outline-primary:active span.text-primary, .filter-bar .btn-outline-primary.active span.text-primary {
  color: #fff !important;
}
.filter-bar .btn-outline-primary:hover i, .filter-bar .btn-outline-primary:focus i, .filter-bar .btn-outline-primary:active i, .filter-bar .btn-outline-primary.active i {
  background-color: #fff;
}
.filter-bar .form-select {
  --bs-form-select-bg-img: url("../images/select-downarrow.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
}

.export-modal {
  --bs-modal-width:388px;
}
.export-modal .export-excelsheet, .export-modal .export-doc, .export-modal .export-pdf {
  display: flex;
  gap: 10px;
  padding-block: 3px;
  padding-inline: 13px;
  align-items: center;
}
.export-modal .modal-footer {
  border-top: transparent;
}
.export-modal .modal-header {
  border-bottom: transparent;
}

.form-control {
  padding: 4px !important;
}

.nav-pills .nav-link.active {
  background-color: #2A7DE1;
}

.nav-link {
  color: #2A7DE1;
}