/* common css */

.flex {
    display: flex !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-col {
    flex-direction: column !important;
}

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

.gap-14 {
    gap: 14px;
}

.gap-16 {
    gap: 16px;
}

.gap-24 {
    gap: 24px;
}

.pl-3 {
    padding-left: 36px;
}

.w-auto {
    width: auto;
}

.w-full {
    width: 100% !important;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.p-0 {
    padding: 0;
}

.m-0 {
    margin: 0;
}

body {
    font-family: "inter", sans-serif;
    height: 100vh;
  }
  

.sidebar {
    left: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: start;
    background-color: rgb(33, 33, 33);
    transition: all .25s ease-in-out;
    top: 0;
}

@media (max-width: 1150px) {
    .sidebar {
        position: fixed;
        left: -100%;
    }
}

.site-logo {
    background-color: rgb(255, 255, 255);
}

.site-logo-link {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    min-height: 64px;
    padding: 10px;
}


.navigation .nav-pills .nav-link.active,
.navigation .nav-pills .show>.nav-link {
    color: #FA4B00;
    border-radius: 0;
    background-color: #fff;
}

.navigation .nav-pills .nav-link:hover {
    background-color: #FA4B00;
    border-radius: 0;
    color: #fff;
}

.navbar-expand .navbar-nav .dropdown-menu {
    right: 0;
}

.header-right {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    min-height: 56px;
    width: calc(100% + 24px);
    height: 64px;
    background-color: rgb(243 243 243);
    padding-left: 16px;
    padding-right: 0px;
    box-shadow: rgba(0, 0, 0, 0.1) 80px 0px 80px -80px inset;
    margin-right: -12px;
    margin-left: -12px;
    justify-content: space-between;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    background-color: white;
}

#userDropdown {
    /* display: flex; */
    /* justify-content: center; */
    align-items: center;
    gap: 14px;
}

.header-right .img-profile {
    max-width: 54px;
    padding: 0px;
    display: flex;
    aspect-ratio: 1/1;
}

.main {
    background: #f3f3f4;
    transition: all .25s ease-in-out;
    min-height: calc(100vh - 48px);
    /* z-index: 1055; */
}

/* Action icons style */
.table .actions .edit_icon {
    display: flex;
    align-items: center;
    padding: 5px;
    width: min-content;
}

.table .actions .edit_icon a {
    display: flex;
}

.table .actions .edit_icon img {
    max-width: 12px;
}

.icon {
    margin: 10px;
}

/* Form styles */
.form .form-group {
    padding-top: 16px;
}

.form-control {
    margin-bottom: 16px;
}

.color_input_div {
    flex-direction: row;
}

[type="color"] {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

.btn.btn-primary {
    background-color: #FA4B00;
    border-color: #FA4B00;
}

.btn.btn-primary:active {
    background-color: #FA4B00;
    border-color: #FA4B00;
}

.btn.btn-outline-primary {
    border-color: #FA4B00;
    color: #FA4B00;
}

.btn.btn-outline-primary:hover {
    border-color: #ffffff;
    color: #ffffff;
    background-color: #FA4B00;
}

.bg-primary {
    background-color: #FA4B00 !important;
}

.row-name {
    font-weight: bold;
}

.avatar_img_div {
    max-width: 100px;
}

.avatar_img_div img {
    width: 100%;
    border: 1px solid #ccc;
    padding: 5px;
}

.action_btn_div {
    padding-top: 24px;
}

/* Sidebar */

.sidebar .nav-link {
    color: white;
}

.sidebar .nav-link:focus,
.nav-link:hover {
    color: white;
    background-color: unset;
}

/* Dashboard cards */

.small-box>.inner {
    padding: 32px 16px;
}

.small-box .inner .card-title{
    display: flex;
    align-items: center;
}

.small-box .inner .card-title p{
    margin: 0;
}

.small-box .inner .card-title .title p{
    text-transform: uppercase;
    color: #475569;
}
.small-box {
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
    display: block;
    margin-bottom: 20px;
    position: relative;
}

.small-box .icon {
    color: rgba(0, 0, 0, .15);
    z-index: 0;
    padding: 8px;
    margin-left: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    height: 36px;
    width: 36px;
}

.small-box .icon.desktop {
    background: #DCF0EA;
}

.small-box .inner .card-info .card-total{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
}

.small-box .inner .card-info .card-total .percentage .percentage_text span{
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
.small-box .inner .card-info .card-total .percentage .percentage_text{
    color: #17A952;
}

.small-box .inner .card-info .card-total .percentage .percentage_text.down{
    color:  #E02A2A;
}
.small-box .inner .card-info .card-total .percentage .percentage_icon{
    display: flex;
    justify-content: center;
    align-items: center;
}
.small-box .inner .card-info .card-total .percentage .percentage_icon img{
    height: 10px;
    width: 10px;
}

.small-box .inner .card-info .card-total .percentage{
    display: flex;
    gap: 12px;
    align-items: center;
}
.small-box .inner .card-info .card-total .total{
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;

}

.small-box>.small-box-footer {
    background-color: rgba(0, 0, 0, .1);
    color: rgba(255, 255, 255, .8);
    display: block;
    padding: 3px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 10;
}

.sidebar .nav-link {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}

.sidebar .nav-link .css-vubbuv {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    fill: currentcolor;
    flex-shrink: 0;
    font-size: 1.5rem;
    transform: rotate(180deg);
    transition: 0.2s linear;
}


.sidebar .nav-link.collapsed .css-vubbuv {
    transform: rotate(0deg);
    transition: 0.2s linear;
}

a {
    color: black;
    text-decoration: none;
}

tbody tr[data-href] {
    cursor: pointer;
}

tbody tr:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-in-out;
}

.mlr2em {
    margin: 2em 0;
}

.nav-link {
    color: black;
    font-weight: bold;
    height: 41px;
}

.nav-tabs .nav-link:hover {
    color: #FA4B00;
}

.select2-selection--multiple:before {
    content: "";
    position: absolute;
    right: 7px;
    top: 42%;
    border-top: 8px solid #888;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    content: "";
    position: absolute;
    left: 20%;
    top: 63%;
    border-top: 8px solid #888;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.ck-editor__editable_inline {
    min-height: 150px;
}

.border-gainsboro {
    border-color: gainsboro;
}

.table>tbody {
    vertical-align: middle;
}

.select2-container .select2-selection--single {
    height: 37px !important;
}

.select2-search__field {
    cursor: pointer;
}

.select2-search__field,
.select2-selection--multiple {
    cursor: pointer !important;
}

.w-25>p {
    margin: 0;
}

.navigation li {
    list-style: none;
}

.footer-container {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    height: 48px;
    padding-left: 32px;
    padding-right: 32px;
    background-color: rgb(255, 255, 255);
    border-top: 1px solid rgb(224, 225, 225);
}

p.footer-copyright,
p.footer-poweredby {
    margin: 0px;
    font-family: Karla;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: rgb(166, 166, 166);
}




a.footer-copyright-text,
a.footer-poweredby-text {
    margin: 0px;
    color: rgb(250, 75, 0);
    text-decoration: underline rgba(250, 75, 0, 0.4);
}

.comment-button {
    border: none;
    padding: 0;
    background: none;
    margin-top: 50px;
    margin-left: -60px;
}

.reply-button {
    border: none;
    padding: 0;
    background: none;
    margin-top: 39px;
    margin-left: -60px;
}

.pr-50 {
    padding-right: 50px;
}

.alert-danger {
    padding: 0px !important;
    background: transparent !important;
    border: none !important;
    margin: 0px !important;

}



.tables_paginate {
    /* text-align: center; */
}

.tables_info {
    /* text-align: center; */
    margin-bottom: 25px;
    font-size: 0.9rem;
    margin-top: 5px;
    color: #9c9c9c;
}


.paginate_button {
    background-color: #f3f3f3;
    display: inline-block;
    color: #8e9499;
    vertical-align: top;
    border-radius: 50%;
    margin: 0 1px 0 2px;
    font-size: 12px;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    transition: background-color 300ms, color 300ms;
}

@media (prefers-reduced-motion: reduce) {
    .paginate_button {
        transition: none;
    }
}

.paginate_button.current {
    background-color: rgb(250, 75, 0);
    color: #FFFFFF;
    cursor: default;
}

.paginate_button:not(.current):not(.disabled):hover,
.paginate_button:not(.current):not(.disabled):focus {
    background-color: #e6e6e6;
    color: #5c6165;
}

.paginate_button.current,
.paginate_button.disabled {
    cursor: default;
}

.paginate_button.previous,
.paginate_button.next {
    font-size: 0;
    position: relative;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {

    .paginate_button.previous,
    .paginate_button.next {
        font-size: 1rem;
    }
}

.paginate_button.previous:before,
.paginate_button.next:before {
    font-family: "Material-Design-Iconic-Font";
    font-size: 1rem;
    line-height: 2.55rem;
}

.paginate_button.previous:before {
    content: "\f2ff";
}

.paginate_button.next:before {
    content: "\f301";
}

.paginate_button.disabled {
    opacity: 0.6;
}

.paginate_button.disabled:hover,
.paginate_button.disabled:focus {
    color: #8e9499;
}

.required-label {
    color: #111928;
}

.modal-content {
    box-shadow: 0 10px 80px rgba(0, 0, 0, .6);
}

.modal-backdrop {
    --bs-backdrop-bg: transparent;
}

.modal {
    backdrop-filter: blur(4px);
}

.close-sidebar {
    color: #fff;
    font-size: 20px;
    text-align: right;
    padding: 5px 10px;
}

.close-sidebar i {
    cursor: pointer;
}

.hamburger i {
    padding: 8px 10px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: all .25s ease-in-out;
}

.hamburger i:hover {
    background: rgb(206, 206, 206);
}


.sidebar-closed .sidebar {
    text-wrap: nowrap;
    width: 0;
    overflow: hidden;
    z-index: 1;
}

.sidebar-closed .main {
    width: 100%;
}

.btn-icon {
    background-color: #ffffff;
    font-weight: 500;
    color: dimgray;
    border: 1px solid lightgray;
    transition: background-color 0.3s, border-color 0.3s;
    margin: 3px;
}
  
.btn-icon:hover {
    background-color: #ffffff;
    border-color: black;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.btn-icon .icon {
    transition: transform 0.1s;
}

.btn-icon:hover .icon {
    transform: scale(1.3);
}

.icon .fas {
    margin: 5px;
}

.color-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

.cell-alligned {
    vertical-align: middle;
    padding: 0;
}

.table td {
    padding: 1.2rem !important;
}

.table th {
    padding: 1.2rem !important;
}



.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
  }

  .action-trash:hover .fa-trash {
    color: red;
  }

  .action-edit:hover .fa-edit {
    color: orange;
  }

  .action-create {
    background-color: #fa4b00;
    color: white;
  }
  .action-export {
    background-color: #ffffff;
    color: #fa4b00;
  }
  
  .action-create:hover .fa-plus {
    color: green;
  }


  .action-export:hover svg {
    path: blue;
  }

  .action-trash-history:hover .fa-undo {
    color: maroon;
  }

  .action-restore:hover .fa-trash-restore {
    color: green;
  }

  .action-logs:hover .fa-history {
    color: blue;
  }

  .action-list:hover .fa-th-list {
    color: lightblue;
  }
  
@media (max-width: 1150px) {
    /* .main {
        z-index: 1;
    } */
    .sidebar {
        z-index: 2;
        border-right: 1px solid rgb(33, 33, 33);
    }
    .sidebar-closed .sidebar {
        left: 0;
        width: 100%;
        z-index: 15;
    }

    .close-sidebar {
        position: absolute;
        color: rgb(33, 33, 33);
        right: 5px;
        top: 5px;
        font-size: 30px;
    }
}


.filter-dropdown-menu {    
    width: 35rem !important;
   height: auto;
}

.filter-input-col {
   width: 100%;
}

.filter-order-by,.filter-per-page {
   width:50%;
}

.filter-order-by-section {
   width: 100%;
}

.filter-form-button-wrapper {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: none;
}

.filter-search-wrapper .input-group .form-control {
    border-top-right-radius: 0;
    border-right: none;
    border-bottom-right-radius: 0;
}

.filter-form-dropdown-wrapper button#filterDropdown {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 18px;
}

.filter-form-page-wrapper input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.filter-search-wrapper {
    width: 31rem !important;
}

.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-form-button-wrapper i.fa-solid.fa-xmark {
	color: #f76707;
	font-size: 20px;
}

.filter-form-search-button:hover,
.filter-form-reset-button:hover {
	background-color: #667382;
	border-color: #667382;
	color: #ffffff;
	text-decoration: none;
}

input.fadeIn.fourth.login-button {
    color: rgb(255, 255, 255);
    background-color: #fa4b00;
    margin-top: 30px;
}

p.powered-by-wrapper {
    margin: 100px 0px 0px;
    font-family: Karla;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: rgb(29, 29, 29);
}

a.site-link {
    margin: 0px;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: rgb(250, 75, 0);
    text-decoration: underline rgba(250, 75, 0, 0.4);
}

img.site-logo-footer {
    display: inline-block;
    margin-left: 12px;
}


a.underlineHover {
    margin: 0px;
    font-family: Karla;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.66;
    color: rgb(33, 33, 33);
    text-decoration: underline rgba(33, 33, 33, 0.4);
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: relative;
    float: right;
    padding-left: 6px;
    z-index: 10;
    cursor: pointer;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: inline-block;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    background: #fa4b00;
    color: white;   
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link{
    background: #F1F5F9;
    color: #64748B;   
    width: 148px;
    padding: 12px;
}

.tbl-card {
    border-top: none; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
}

.bbl-card {
    border-bottom: none; 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
}

.desc-border {  
    border: 1px solid #E2E8F0;
    border-width: 0px 1px 0px 0px;
}

.desc {
    padding: 12px 20px;
}

.desc-row-border {
    border: 1px solid #E2E8F0;
    border-width: 1px 0px;
}

.table.dataTable thead th {
    border-bottom: 0;
}

.table.dataTable tfoot th {
    border-top: 0;
}


/* Dashboard style start */

.justify-end{
    justify-content: end;
}

.see_more p{
    color: #FA4B00;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

/* estimation hours label */
tbody > tr > td small.estimation-hours-label, .status-label{
	/* font-family: Inter; */
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	text-align: center;
	padding: 2px 10px 2px 10px;
	border-radius: 24px;
}
 /* dev pill */
 tbody > tr > td small.estimation-hours-label.dev {
	border: 1px solid #cce0ff;
	background: #ebf3ff;
	color: #3385ff;
}
 /* QA pill */
 tbody > tr > td small.estimation-hours-label.qa {
	border: 1px solid #c2e9c1;
	background: #e7fce7;
	color: #1fb51c;
}
 /* design pill */
 tbody > tr > td small.estimation-hours-label.design {
	border: 1px solid #dfccff;
	background: #f1ebff;
	color: #6941c6;
}

.activity_chart{
    margin-top: 20px;
}

.activity_chart_title{
    padding-top: 24px;
}
.activity_chart_title h2{
    font-size: 24px;
    line-height: 36px;
    font-weight: 600;
}

.dashboard_filter{
    position: sticky;
    top: 0;
    background: #FFFFFF;
    padding: 20px 0 0 0;
    z-index: 9;
}

.hidden{
    display: none;
}

.clockpicker-popover {
    position: absolute !important;  /* Force absolute positioning */
    z-index: 1055 !important;       /* Ensure it's on top of the modal */
}

.am-button {
    z-index: 9999;
    position: relative;
}

.clockpicker-popover .popover-title {
    background-color: #212121 !important;
    color: #fff !important;
    padding: 13px 0px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.text-active{
    color: #fa4b00;
}

.clockpicker-button{
    background-color: #212121 !important;
    color: #fff !important;
}

.clockpicker-canvas-bg {
    stroke: none;
    fill: #fa4b0063 !important;
}

.clockpicker-canvas-bg-trans {
    fill: #fa4b004f !important;
}

.clockpicker-canvas-bearing, .clockpicker-canvas-fg {
    stroke: none;
    fill: #fa4b0085 !important;
}

.clockpicker-canvas line {
    stroke: #fa4b00 !important;
    stroke-width: 1;
    stroke-linecap: round;
}

.form-check-input:checked {
    background-color: #fa4b00 !important;
    border-color: #fa4b00 !important;
}

#create_timesheet_modal
    .popover.clockpicker-popover.top.clockpicker-align-left {
    padding: 0px !important;
}
#create_timesheet_modal .clockpicker-dial {
    margin: 0 !important;
}

#create_timesheet_modal .clockpicker-canvas {
    margin: 0 !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
    width: auto;
    height: 40px !important;
}

.clockpicker-span-hours, .clockpicker-span-minutes{
    background: #334155;
    padding: 0px 10px;
    border-radius: 8px;
    color: #FFF;
}

.btn-am, .btn-pm {
    padding: 5px;
    background: rgba(128, 128, 128, 0.3);
    color: darkslategray;
}

.btn-am{
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.btn-pm{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.btn-am:hover, .btn-pm:hover, .clockpicker-span-hours:hover, .clockpicker-span-minutes:hover{
    color: white;
}

.inactive-time{
    background: rgba(128, 128, 128, 0.3);
    color: darkslategray;
}

.active-time-format{
    background: #334155;
    color: #FFF;
}

.clockpicker-popover{
    padding: 20px 20px 5px 20px !important;
}
.clockpicker-popover .popover-header{
    background-color: transparent !important;
    color: darkslategray !important;
    border-bottom: 0px !important;
}

.clock-cancel, .clock-cancel:hover{
    padding: 0 35px !important;
    color: darkslategray;
}

.clock-done, .clock-done:hover{
    color: #fa4b00;
}

.project-details, .task-details{
    color: #fa4b00 !important;
}

.sub-module-list span{
    font-size: 14px;
    font-weight: 400;
    line-height: 16.94px;
    letter-spacing: 0.01em;
    color: #334155;
}

.alert-danger{    
    color: red !important;
    margin-top: -11px !important;
    font-size: 12px !important;
    margin-bottom: 11px !important;
}
a:hover {
    color: #fa4b00;
}
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover {
    background-color: #fa4b00;
    color: #FFF;
}

.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-img {
    width: 100px; /* Adjust size */
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100px;
    height: 100px;
    background-color: #ccc; /* Change to your preferred background color */
    color: white;
    font-size: 40px; /* Adjust font size */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15%;
    text-transform: uppercase;
}

.clockpicker-label{
    font-size: 20px;
    padding: 10px;
    font-weight: bold;
    color: #2f4f4f7a;
}

.clock-label{
    padding-bottom: 10px;
}

/* profile page start*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* utils */
.btn.connect-to-trello-btn {
    background-color: #fa4b00;
    border-color: #fa4b00;
    width: 149px;
    height: 40px;
    padding: 10px 16px 10px 16px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}
.btn.upload-image-button {
    background-color: #64748b;
    border: 1px solid #64748b;
    height: 28px;
    padding: 4px 16px 4px 16px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    display: flex;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
}
.btn.white-button {
    height: 28px;
    padding: 4px 16px 4px 16px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #cbd5e1;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: #1e293b;
    display: flex;
}
.profile-page-area {
    display: flex;
    flex-direction: column;
}

.profile-chagne-password{
    text-decoration: underline;
}

.page-heading-and-connect-with-trello-area {
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
}
.page-heading h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    color: #1e293b;
}
.profile-info-area {
    display: flex;
    flex-direction: column;
    gap: 55px;
}
.profile-image-and-upload-area {
    display: flex;
    gap: 16px;
}
.profile-image-area img {
    width: 100px;
    height: 100px;
    border-radius: 15px;
}
.upload-image-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.person-name p {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #1e293b;
}
.upload-image-area .upload-and-remove-button {
    display: flex;
    align-items: center;
    gap: 8px;
}
.user-info-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.user-info-details .user-info {
    display: flex;
    gap: 24px;
}
.user-info-details .user-info .user-info-label {
    width: 128px;
}
.user-info-details .user-info .user-info-label p {
    font-size: 14px;
    font-weight: 600;
    line-height: 16.94px;
    letter-spacing: 0.01em;
    color: #0f172a;
}
.user-info-details .user-info .user-info-data p,
.user-info-details .user-info .user-info-data a {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.94px;
    letter-spacing: 0.01em;
    color: #334155;
}

.profile-password-section{
    padding-bottom: 12px;
}

.profile-password-show{
    height: 20px;
}

.avatar-icon{
    width: 40px; 
    height: 40px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-color: #f0f0f0; 
    color: #555; 
    font-weight: bold; 
    border-radius: 50%; 
    font-size: 16px; 
    text-transform: uppercase;
}
/* profile page end*/


.daterange-dropdown {
    width: 175px !important; /* Set your desired width */
}

#datepicker_calendar{
    max-width: unset;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.date-filter .select2-selection.select2-selection--single, .select2-selection.select2-selection--multiple, .form-control:not(textarea){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 2.25rem !important;
}

.date-filter 
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  left: 0 !important;
}

.select2.select2-container.select2-container--default.select2-container--above, .select2.select2-container.select2-container--default{
    width: 100% !important;
}
li.select2-selection__choice{
    margin: 3px 3px !important;
}


.select2-selection__choice {
    background: white !important;
    font-size: 15px;
    box-shadow: 0px 0px 3.5px grey;
}

.select2-selection.select2-selection--multiple {
	padding: 5px !important;
}

ul.select2-selection__rendered + span.select2-search.select2-search--inline > textarea {
	margin-top: 0px !important;
	margin-bottom: 2px !important;
}

ul.select2-selection__rendered {
	padding: 0px !important;
}

.date-column {
    white-space: nowrap;
}

/* moin bhai css start */

/* site logo */
.site-logo-link {
    width: 66%;
}
/* hamburger icon*/
.sidebar-closed #hamburger-icon > i {
    margin-left: 0px;
}
#hamburger-icon > i {
    margin-left: -50px;
}
/*  page bredcrum */
div.breadcrumb.col-6.col-md-6 > a {
    margin-top: -5px;
}
ol.breadcrumb > li.breadcrumb-item {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: #374151;
    font-family: "Inter";
}
ol.breadcrumb > li.breadcrumb-item.active {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: #6b7280;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: url("data:image/svg+xml;utf8,<svg width='6' height='11' viewBox='0 0 6 11' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M0.292787 10.2074C0.105316 10.0199 0 9.76557 0 9.50041C0 9.23524 0.105316 8.98094 0.292787 8.79341L3.58579 5.50041L0.292787 2.20741C0.110629 2.0188 0.00983372 1.7662 0.0121121 1.50401C0.0143906 1.24181 0.11956 0.990997 0.304968 0.805589C0.490376 0.620181 0.741189 0.515012 1.00339 0.512733C1.26558 0.510455 1.51818 0.611249 1.70679 0.793408L5.70679 4.79341C5.89426 4.98094 5.99957 5.23524 5.99957 5.50041C5.99957 5.76557 5.89426 6.01988 5.70679 6.20741L1.70679 10.2074C1.51926 10.3949 1.26495 10.5002 0.999786 10.5002C0.734622 10.5002 0.480314 10.3949 0.292787 10.2074Z' fill='%236B7280'/></svg>");
}
/* top profile name area */
#userDropdown:hover {
    color: #000;
}
/* side bar before hover*/
.nav-pills .nav-link {
    border-radius: 0;
}
/* side bar active icon */
div.sidebar > nav ul > li.nav-item > a.active svg path {
    fill: #fa4b00;
}
div.sidebar > nav ul > li.nav-item > a.active:hover svg path {
    fill: #fff;
}
/* side nav all ul li space bottom*/
nav > div > ul > li.nav-item {
    margin-bottom: 14px;
    position: relative;
}
/* side nav inner ul li */
a.nav-link.pl-3 {
    padding-left: 90px;
}
/* inner ul li active orange bar left*/
nav > div > ul > li.nav-item ul li.nav-item.active {
    position: relative;
}
/* sidebar 1st text alignment (dashbord) */
/* dashboard page */
/* Dashboard cards */
.small-box > .inner {
    padding: 21px 16px !important;
}
div:nth-child(1) > .small-box > .inner {
    background-color: #fafffd;
}
div:nth-child(2) > .small-box > .inner {
    background-color: #fffdfa;
}
div:nth-child(3) > .small-box > .inner {
    background-color: #fefbfb;
}
div:nth-child(4) > .small-box > .inner {
    background-color: #fafcff;
}
.small-box .inner .card-title .title p {
    margin: 0;
    color: #475569;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-transform: uppercase;
}
.small-box .inner .card-info .card-total .total {
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    color: #1e293b;
}
/* dashbord task table */
#taskTable > thead > tr > th {
    color: #3d4a5c;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    background-color: #fcfcfd;
}
#taskTable > tbody > tr > td {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #3d4a5c;
    vertical-align: top;
}
/* dashbord task table status column */
#taskTable > tbody > tr > td.vertical-center-align {
    vertical-align: middle;
}
/* dashbord task table hover */
table#taskTable tbody tr:hover {
    box-shadow: none;
    cursor: pointer;
    background-color: #e2e8f0;
}
tr td div.total_time {
    margin-bottom: 4px;
    background: #fff;
    padding: 2px 4px 2px 4px;
    border-radius: 24px;
    max-width: fit-content;
}
/* dashbord task table status pills */
tbody > tr > td small.estimation-hours-label,
.status-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    padding: 2px 10px 2px 10px;
    border-radius: 24px;
    max-width: max-content;
}
/* dashbord hours spent by clients graph selector*/
div.main > div.main-body > div.container-fluid > div:nth-child(5) > div.activity_chart div.input-group span > span.selection > span {
    width: 200px;
    padding: 10px 12px 10px 12px;
    border-radius: 6px;
    border: 1px solid #eaecf0;
    background: #fff;
    margin-top: 31px;
    margin-left: 17px;
    position: relative;
}
/* dashbord hours spent by clients graph title */
.activity_chart_title {
    padding-top: 30px;
}
.activity_chart {
    margin-top: 4px;
}
/* dashbord hours spent by clients graph select tag inner text selected */
#select2-chart_client_id-container {
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    color: #334155;
    margin-left: -8px;
}
/* drop down menu */
body > span.select2-container.select2-container--default.select2-container--open > span.select2-dropdown.select2-dropdown--below {
}
/* dashbord filter button left position */
.row.dashboard_filter #filterForm > div > div:nth-child(1) {
    margin-left: 0px;
}
/* dashbord filter button top position */
.row.dashboard_filter {
    padding-top: 16px;
    margin-top: -14px;
}
/*dashboard task table name pills */
.table-responsive .estimations-pill {
    display: flex;
    margin-top: 8px;
    gap: 8px;
}
/* dashboard task table time column pill uper text */
.total_time {
    margin-left: 4px;
}
/* dashbord task table status column text */
.status-label span {
    font-size: 12px;
    font-weight: 500;
    line-height: 16.8px;
    padding: 2px 8px 2px 8px;
    border-radius: 24px;
    white-space: nowrap;
}
/* dashbord task table see all tests/tasks button */
.row.dashboard_filter + div.container-fluid.pt-1 > div:nth-child(2) > div:nth-child(2) > div > div > p > a,
.row.dashboard_filter + div.container-fluid.pt-1 > div:nth-child(2) > div:nth-child(2) > div > div > p > a:hover {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #fa4b00;
    margin-right: 3px;
}
nav > div > ul > li:nth-child(1) > a > div:nth-child(1) > span {
    padding-left: 5px;
}
/* sidebar drop down icon */
body > div.container-fluid > div > div.sidebar > nav > div > ul > li > a {
    justify-content: space-between;
    padding-left: 32px;
}
/* side nav active orange bar */
div.navigation ul.nav.nav-pills.flex-column li.nav-item.active:before {
    content: "";
    position: absolute;
    width: 10px;
    background: #fa4b00;
    height: 41px;
}
div.navigation ul.nav.nav-pills.flex-column li.nav-item.active:hover:before {
    background: #fff;
}
/*  page title icon */
/*  page title */
div.page-title > div > h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    font-family: "Inter";
    color: #1e293b;
    margin-bottom: 0px;
}
/*  search and filter row */
/* filter pill area*/
/* filter pill wrapper */
.pill-wrapper-container {
    display: flex;
    justify-content: flex-start; /* delete line*/
    align-items: center;
    flex-shrink: unset;
    overflow: auto;
    margin-left: -300px;
}
.pill-wrapper-container.shift-right {
    margin-left: 0px;
}
.filter-pill-wrapper {
    max-width: 860px;
    display: flex;
    justify-content: unset;
    gap: 16px;
    overflow: auto;
    flex-grow: 1;
    width: 100%;
}
.filter-pill-wrapper::-webkit-scrollbar {
    height: 4px;
}

/* Track */
.filter-pill-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.filter-pill-wrapper::-webkit-scrollbar-thumb {
    background: #fa4b00;
}

/* Handle on hover */
.filter-pill-wrapper::-webkit-scrollbar-thumb:hover {
    background: #3d4a5c;
}
/* filter pills */
.filter-pill-wrapper span.filter-pill-data {
    padding: 7px 8px 7px 8px;
    border-radius: 24px;
    background: #f7f7f8;
    border: 1px solid #e9eaec;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    color: #5a6272;
    max-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.filter-pill-wrapper span.filter-pill-data:first-child {
    margin-left: 0px; /* change to delete*/
}
/* search and filter row buttons */
#filterForm > div {
    margin: -2px 0px -4px -12px;
    flex-wrap: nowrap;
}
#filterForm > div > div:nth-child(1),
#filterForm > div > div:nth-child(2) {
    margin-left: 8px;
}
.date-filter {
    max-width: 170px;
}
#dropdownMenuClickableInside {
    border: 2px solid #eaecf0 !important;
    background: #fff;
    color: #64748b;
    border-radius: 5px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    padding: 10px 12px;
    max-height: 36px;
}
#dropdownMenuClickableInside:after {
    display: none;
}
/* Filter button inner menu*/
.filter-dropdown-menu {
    max-width: 392px;
}
#filterForm div.filter-form-dropdown-wrapper > div > div > div:nth-child(2) > div.input-group {
    margin-bottom: 20px;
}
#filterForm div.filter-form-dropdown-wrapper div.row.pb-3 > div.filter-title.col-6 {
    font-size: 24px;
    font-weight: 600;
    line-height: 28.8px;
    text-align: left;
    color: #3d4a5c;
}
/* inner filter titles */
#filterForm div.filter-form-dropdown-wrapper label.form-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: #3d4a5c;
}
input[type="date"].form-control.has-value,
input.dark-text,
.select2-selection__rendered.dark-text {
    color: #334155 !important;
}
/* inner filter cross button */
.closeDropdown {
    cursor: pointer;
}
/* inner filter selectors */
#filterForm div.filter-form-dropdown-wrapper span > span.selection > span {
    /* width: 345px; */
    display: flex;
    justify-content: start;
}
#filterForm div.filter-form-dropdown-wrapper span > span.selection > span span.select2-selection__rendered {
    margin-left: 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #3b434f;
}
/* rest and apply button row */
#filterForm div.filter-form-dropdown-wrapper > div > div > div.col-md-12 {
    margin-top: 20px;
}
#filterForm div.filter-form-dropdown-wrapper > div > div > div.col-md-12 > div {
    display: flex;
    justify-content: end;
    gap: 16px;
    margin-right: 0px;
}
#filterForm div.filter-form-dropdown-wrapper > div > div > div.col-md-12 > div button#resetButton {
    border: 2px solid #eaecf0;
}
/* reset button */
#filterForm div.filter-form-dropdown-wrapper > div > div > div.col-md-12 > div button#resetButton {
    border: 2px solid #eaecf0;
    width: 71px;
    height: 40px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
}
/* apply button */
#filterForm div.filter-form-dropdown-wrapper > div > div > div.col-md-12 > div button.filter-form-filter-button.col-4 {
    width: 68px;
    height: 40px;
    padding: 8px 5px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    line-height: 22.4px;
    text-align: center;
}
#filterForm > div > div:nth-child(2) > div > span {
    max-width: fit-content;
    max-height: 36px;
}
/* date filter drop down scroll bar hide*/
#select2-date_filter-results::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}
/* date filter drop down border*/
body > span > span.select2-dropdown.select2-dropdown--below {
    border: 2px solid #eaecf0;
}
/* date filter drop down height*/
.select2-container--default .select2-results > .select2-results__options {
    max-height: 240px;
    overflow-y: auto;
}
#select2-date_filter-results li:last-child {
    padding-bottom: 7px;
    padding-left: 30px;
    position: relative;
}
/* date filter select date cell icon  */
#select2-date_filter-results li:last-child::before {
    content: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13 6.66683L0.999999 6.66683M9.66667 1.3335L9.66667 4.00016M4.33333 1.3335L4.33333 4.00016M4.2 14.6668L9.8 14.6668C10.9201 14.6668 11.4802 14.6668 11.908 14.4488C12.2843 14.2571 12.5903 13.9511 12.782 13.5748C13 13.147 13 12.5869 13 11.4668L13 5.86683C13 4.74673 13 4.18667 12.782 3.75885C12.5903 3.38253 12.2843 3.07657 11.908 2.88482C11.4802 2.66683 10.9201 2.66683 9.8 2.66683L4.2 2.66683C3.07989 2.66683 2.51984 2.66683 2.09202 2.88482C1.71569 3.07656 1.40973 3.38252 1.21799 3.75885C1 4.18667 0.999999 4.74672 0.999999 5.86683L0.999998 11.4668C0.999998 12.5869 0.999998 13.147 1.21798 13.5748C1.40973 13.9511 1.71569 14.2571 2.09202 14.4488C2.51984 14.6668 3.07989 14.6668 4.2 14.6668Z' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    position: absolute;
    margin-left: -22px;
}

#select2-date_filter-results li.select2-results__option--highlighted:last-child::before {
    content: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13 6.66683L0.999999 6.66683M9.66667 1.3335L9.66667 4.00016M4.33333 1.3335L4.33333 4.00016M4.2 14.6668L9.8 14.6668C10.9201 14.6668 11.4802 14.6668 11.908 14.4488C12.2843 14.2571 12.5903 13.9511 12.782 13.5748C13 13.147 13 12.5869 13 11.4668L13 5.86683C13 4.74673 13 4.18667 12.782 3.75885C12.5903 3.38253 12.2843 3.07657 11.908 2.88482C11.4802 2.66683 10.9201 2.66683 9.8 2.66683L4.2 2.66683C3.07989 2.66683 2.51984 2.66683 2.09202 2.88482C1.71569 3.07656 1.40973 3.38252 1.21799 3.75885C1 4.18667 0.999999 4.74672 0.999999 5.86683L0.999998 11.4668C0.999998 12.5869 0.999998 13.147 1.21798 13.5748C1.40973 13.9511 1.71569 14.2571 2.09202 14.4488C2.51984 14.6668 3.07989 14.6668 4.2 14.6668Z' stroke='white' stroke-width='1.5' stroke-linecap='round'  stroke-linejoin='round'/></svg>");
}
/* date filter inner row border bottoom */
#select2-date_filter-results li {
    border-bottom: 2px solid #eaecf0;
}
/* date filter drop down font */
#select2-date_filter-results > li {
    color: #64748b;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}
#select2-date_filter-results > li.select2-results__option--selected.select2-results__option--highlighted,
#select2-date_filter-results > li:hover {
    color: #fff;
}
/* date filter finder font */
#select2-date_filter-container {
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    color: #64748b;
}
/* date filter background and border */
#filterForm > div > div:nth-child(2) > div > span > span.selection > span {
    background: #fff !important;
    border: 2px solid #eaecf0;
}
/*  time range drop down */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #fa4b00;
    color: white !important;
}
#select2-date_filter-results li:hover {
    background: #fa4b00;
}
#select2-date_filter-container::before {
    content: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13 6.66683L0.999999 6.66683M9.66667 1.3335L9.66667 4.00016M4.33333 1.3335L4.33333 4.00016M4.2 14.6668L9.8 14.6668C10.9201 14.6668 11.4802 14.6668 11.908 14.4488C12.2843 14.2571 12.5903 13.9511 12.782 13.5748C13 13.147 13 12.5869 13 11.4668L13 5.86683C13 4.74673 13 4.18667 12.782 3.75885C12.5903 3.38253 12.2843 3.07657 11.908 2.88482C11.4802 2.66683 10.9201 2.66683 9.8 2.66683L4.2 2.66683C3.07989 2.66683 2.51984 2.66683 2.09202 2.88482C1.71569 3.07656 1.40973 3.38252 1.21799 3.75885C1 4.18667 0.999999 4.74672 0.999999 5.86683L0.999998 11.4668C0.999998 12.5869 0.999998 13.147 1.21798 13.5748C1.40973 13.9511 1.71569 14.2571 2.09202 14.4488C2.51984 14.6668 3.07989 14.6668 4.2 14.6668Z' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    position: absolute;
    margin: 1px 0px 0px -20px;
}
/* date filter button icon position */
#select2-date_filter-container {
    padding-left: 28px !important;
}
/* calender box area */
#filterForm > div > div:nth-child(3) {
    margin-left: 0px;
    width: 300px;
}
#date_range {
    border-radius: 6px;
    max-width: fit-content;
    margin-bottom: 0px;
}
.select2-container .select2-selection--single {
    height: 37px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 6px;
}
/* date filter  search box */
input.select2-search__field[aria-controls="select2-date_filter-results"] {
    display: none;
}
.select2-container--default .select2-selection--single {
    border: 2px solid #eaecf0;
    padding: 10px 12px;
    padding-left: 0px;
}
.filter-search-wrapper .input-group .form-control {
    border: 2px solid #eaecf0;
    border-top-left-radius: 0;
    border-top-right-radius: 10px;
    border-left: none;
    border-right: 2px solid #eaecf0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 10px;
}
.filter-search-wrapper .input-group .form-control::placeholder {
    color: transparent;
}
.filter-form-button-wrapper {
    border: 2px solid #eaecf0;
    border-bottom-left-radius: 10px;
    border-bottom-rifght-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 0;
    border-left: 2px solid #eaecf0;
    border-right: none;
}
.filter-search-wrapper {
    width: 100%;
    max-width: 420px !important;
}
/* time tracking tab */
/* all times tab add new button button */
button#create_timesheet_button {
    padding-left: 11px;
    padding-right: 16px;
}

/* all times tab export button */
.action-export {
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #fa4b00;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.action-export:hover {
    background: #fa4b00;
    color: #ffffff;
    border: 1px solid #fa4b00 !important;
}

.action-export:hover svg path {
    stroke: #FFF;
}
/* .action-export:hover::before {
    content: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6.66663 13.3333L9.99996 10M9.99996 10L13.3333 13.3333M9.99996 10V17.5M16.6666 13.9524C17.6845 13.1117 18.3333 11.8399 18.3333 10.4167C18.3333 7.88536 16.2813 5.83333 13.75 5.83333C13.5679 5.83333 13.3975 5.73833 13.3051 5.58145C12.2183 3.73736 10.212 2.5 7.91663 2.5C4.46485 2.5 1.66663 5.29822 1.66663 8.75C1.66663 10.4718 2.36283 12.0309 3.48908 13.1613' stroke='%23344054' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    margin-bottom: -5px;
} */
/* creat modal */
/* horizontal line before save  */
.modal-footer {
    border-top: none;
}
/* tab input inner */
#create_timesheet_modal form > div:nth-child(12) > span > span.selection > span {
    padding-bottom: 38px;
}
/* input box text and no color */
.form-control {
    font-size: 14px;
    font-weight: 400;
    line-height: 17.5px;
    color: #3b434f;
}
/* start time and end time hover */
.ui-timepicker-standard a:hover {
    background: #fa4b00;
    color: #fff;
}
/* alignment for input box */
#create_timesheet_modal #select2-user_id-container {
    margin-left: 0px;
}
#select2-create_project_id-container,
#select2-create_task_id-container,
#select2-create_time_activity_id-container,
#select2-create_client_id-container {
    margin-left: 0px;
}
/* no data yellow alert */
div.container-fluid div.main-body > div.card.tbl-card > div.list > div.alert.alert-warning.alert-important {
    margin: 16px 0px;
    margin-right: 16px;
}
/* all table sorting icon  */
table.dataTable thead tr .sorting {
    background-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6.96667 4.47998L4.48665 2L2.00667 4.47998' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round'/><path d='M4.48665 14V2' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round'/><path d='M9.03333 11.52L11.5133 14L13.9933 11.52' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round'/><path d='M11.5133 2V14' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
table.dataTable thead tr .sorting_asc {
    background-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6.96667 4.47998L4.48665 2L2.00667 4.47998' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round'/><path d='M4.48665 14V2' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
table.dataTable thead tr .sorting_desc {
    background-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9.03333 11.52L11.5133 14L13.9933 11.52' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round'/><path d='M11.5133 2V14' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
/* time tracking tab => table top */
.card-body {
    margin-top: -12px;
}
/* time tracking tab export page */
.export-page ul.select2-selection__rendered {
    margin: 0px !important;
}
/* time tracking tab export page  search button*/
div.main-body form > div > div > div.modal-footer {
    justify-content: start;
}
/* time tracking tab export page below search button*/
div.main-body form > div.card.tbl-card + .card.mt-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
/* area heading */
div.main-body form > div.card.tbl-card + .card.mt-4 h5 {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    padding-left: 20px !important;
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    color: #1e293b;
}
/* button area */
div.main-body form > div.card.tbl-card + .card.mt-4 div.col-6:nth-child(2) {
    width: 100%;
}
div.main-body form > div.card.tbl-card + .card.mt-4 .btn-group {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin: 20px auto;
    margin-right: 12px;
}
/* hr tag */
div.main-body form > div.card.tbl-card + .card.mt-4 hr {
    grid-area: 2 / 1 / span 1 / span 2;
}
/* customer details area */
div.main-body form > div.card.tbl-card + .card.mt-4 > hr + .card-body {
    grid-area: 3 / 1 / span 1 / span 2;
}
/* customer area alignment */
.card-body .list .table-responsive table.table {
    display: flex;
}
.card-body .list .table-responsive table.table::before,
.card-body .list .table-responsive table.table::after {
    content: "";
    background-color: #e2e8f0;
    height: 1px;
    width: 100%;
    position: absolute;
    z-index: 100;
    left: 0px;
}
.card-body .list .table-responsive table.table::before {
    top: 50%;
    transform: translateY(-50%);
}
.card-body .list .table-responsive table.table::after {
    bottom: 40px;
    height: 2px;
}
.card-body .list .table-responsive table.table thead tr {
    display: grid;
}
.card-body .list .table-responsive table.table thead tr th {
    justify-self: flex-start;
    border: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 16.94px;
    letter-spacing: 0.01em;
    color: #0f172a;
}
.card-body .list .table-responsive table.table thead tr th:first-child {
    padding-top: 34px !important;
    padding-bottom: 19px !important;
}
.card-body .list .table-responsive table.table tbody {
    display: flex;
    max-width: 1370px;
    overflow-x: auto;
    position: relative;
}
.card-body .list .table-responsive table.table tbody tr {
    display: grid;
    margin: 0 auto;
}
.card-body .list .table-responsive table.table tbody tr td {
    justify-self: flex-start;
    border: none;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.94px;
    letter-spacing: 0.01em;
    color: #334155;
}
.card-body .list .table-responsive table.table tbody tr td:first-child {
    padding-top: 35px !important;
    padding-bottom: 5 px !important;
}
/* project info area */
div.main-body form > div.card.tbl-card + .card.mt-4 > .card-body + div {
    grid-area: 4 / 1 / span 1 / span 2;
    margin-top: -30px;
}
/* table header */
div.main-body form > div.card.tbl-card + .card.mt-4 > .card-body + div > .list.ps-3 > .table-responsive table.table thead {
}
div.main-body form > div.card.tbl-card + .card.mt-4 > .card-body + div > .list.ps-3 > .table-responsive table.table thead tr th {
    margin-right: 50px;
}
div.main-body form > div.card.tbl-card + .card.mt-4 > .card-body + div > .list.ps-3 > .table-responsive table.table thead tr th:nth-child(1) {
    width: 140px;
}
div.main-body form > div.card.tbl-card + .card.mt-4 > .card-body + div > .list.ps-3 > .table-responsive table.table thead tr th:nth-child(2) {
    width: 350px;
}
div.main-body form > div.card.tbl-card + .card.mt-4 > .card-body + div > .list.ps-3 > .table-responsive table.table thead tr th:nth-child(3) {
    width: 350px;
}
div.main-body form > div.card.tbl-card + .card.mt-4 > .card-body + div > .list.ps-3 > .table-responsive table.table thead tr th:nth-child(4) {
    width: 340px;
}
/* customer info table body */
div.main-body form > div.card.tbl-card + .card.mt-4 > .card-body + div > .list.ps-3 > .table-responsive table.table tbody tr {
}
div.main-body form > div.card.tbl-card + .card.mt-4 > .card-body + div > .list.ps-3 > .table-responsive table.table tbody tr td {
    border: none;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #3d4a5c;
}
div.main-body form > div.card.tbl-card + .card.mt-4 > .card-body + div > .list.ps-3 > .table-responsive table.table tbody tr td a {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #3d4a5c;
}
div.main-body form > div.card.tbl-card + .card.mt-4 > .card-body + div > .list.ps-3 > .table-responsive table.table tbody tr td a:hover {
    color: #3d4a5c;
}

/* hide pagination */
div.main-body form > div.card > div div.tables_paginate.paging_simple_numbers.text-end > span {
    display: none;
}
/* customer info */
/* task tab */
/* creat task page */
/* add new task editable text box inner text */
.ck.ck-toolbar.ck-toolbar_grouping {
    border-radius: 8px 8px 0px 0px !important;
}
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused,
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #3b434f;
    border-radius: 0px 0px 8px 8px;
}
div.main-body div.card.bbl-card > div.row div.page-title a {
    margin-bottom: 6px;
}
/*  table area */
.dataTable {
    width: 101% !important;
    margin-left: -1rem !important;
    border-bottom: 0 !important;
}
/*  table padding for new class add  */
.table td {
    padding: 8px 10px;
}
table.dataTable thead th {
    border-bottom: 0;
    color: #3d4a5c;
    background-color: #fcfcfd !important ;
    font-family: "Inter";
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    border-bottom: 2px solid #eaecf0 !important;
    border-top: 2px solid #eaecf0 !important;
}
table.dataTable tbody tr td {
    border-bottom: 2px solid #eaecf0;
}
table.dataTable tbody tr:hover {
    box-shadow: none;
    cursor: pointer;
    background-color: #e2e8f0;
}
/*  table row  common */
.dataTable > tbody > tr > td {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    text-align: left;
    vertical-align: unset;
}
/*  table row  name with pill data area */
.dataTable > tbody > tr > td:nth-child(2) {
    font-weight: 500 !important;
}
/*  name text area */
.dataTable > tbody > tr > td:nth-child(2) > p {
    margin-bottom: 8px;
}
/*  table row  name estimation pill */
.dataTable > tbody > tr > td:nth-child(2) > div {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
small.estimation-label {
    white-space: nowrap;
    display: flex;
    align-items: center;
}

tr > td small.estimation-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    padding: 2px 10px 2px 10px;
    border-radius: 24px;
    white-space: nowrap;
}
/*  Frontend Dev pill */
tr > td small.estimation-label.frontend-dev {
    border: 1px solid #cce0ff;
    background: #ebf3ff;
    color: #3385ff;
}
/*  Backend Dev pill */
tr > td small.estimation-label.backend-dev {
    border: 1px solid #abdce7;
    background: #ebfffe;
    color: #07a1c3;
}
/*  Frontend QA pill */
tr > td small.estimation-label.frontend-qa {
    border: 1px solid #c2e9c1;
    background: #e7fce7;
    color: #1fb51c;
}
/*  Backend QA pill */
tr > td small.estimation-label.backend-qa {
    border: 1px solid #dee9c1;
    background: #f4fce7;
    color: #84b51c;
}
/*  design pill */
tr > td small.estimation-label.design {
    border: 1px solid #dfccff;
    background: #f1ebff;
    color: #6941c6;
}
tr > td small.estimation-label.client {
    border: 1px solid #ffccfd;
    background: #ffecfe;
    color: #d805cf;
}
/*  pill if the deadline is crossed */

tbody > tr > td small.estimation-hours-label.frontend-dev.deadline-crossed,
tbody > tr > td small.estimation-hours-label.frontend-qa.deadline-crossed,
tbody > tr > td small.estimation-hours-label.backend-dev.deadline-crossed,
tbody > tr > td small.estimation-hours-label.backend-qa.deadline-crossed,
tbody > tr > td small.estimation-hours-label.design.deadline-crossed,
.dataTable .estimation-time.frontend-dev.deadline-crossed,
.dataTable .estimation-time.backend-dev.deadline-crossed,
.dataTable .estimation-time.frontend-qa.deadline-crossed,
.dataTable .estimation-time.backend-qa.deadline-crossed,
.dataTable .estimation-time.design.deadline-crossed {
    color: #e02a2a !important;
}
/*  table row estimated time capsul  data area */

/*  table filter */
.dataTables_filter {
    display: none;
}
/*  table area */
.dataTables_wrapper {
    display: grid;
}
.dataTable {
    order: -1;
    padding-bottom: 15px;
}
.dataTables_info {
    justify-self: flex-end;
    margin-top: -24px;
    padding-top: 0px !important;
    margin-right: 90px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #64748b !important;
}
/*  table pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    box-shadow: none !important;
}
.dataTables_paginate > span {
    display: none;
}
.dataTables_paginate {
    margin-top: -35px;
    margin-right: 2px;
}
a.dataTable _previous,
a.dataTable _next {
    background: none;
    color: #5e718d !important;
}
/* next button icon */
.paginate_button.next {
    background: none !important;
    border: none !important;
}
.paginate_button.next:before {
    content: url("data:image/svg+xml;utf8,<svg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 13L6.92929 7.07071C6.96834 7.03166 6.96834 6.96834 6.92929 6.92929L1 1' stroke='%235E718D' stroke-width='2' stroke-linecap='round'/></svg>");
}
.paginate_button.next.disabled:before {
    content: url("data:image/svg+xml;utf8,<svg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 13L6.92929 7.07071C6.96834 7.03166 6.96834 6.96834 6.92929 6.92929L1 1' stroke='%235E718D' stroke-width='2' stroke-linecap='round'/></svg>") !important;
}
.paginate_button.next:hover:before {
    content: url("data:image/svg+xml;utf8,<svg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 13L6.92929 7.07071C6.96834 7.03166 6.96834 6.96834 6.92929 6.92929L1 1' stroke='%23FA4B00' stroke-width='2' stroke-linecap='round'/></svg>");
}
/* previous button icon */
.paginate_button.previous {
    background: none !important;
    border: none !important;
}

.paginate_button.previous:before {
    content: url("data:image/svg+xml;utf8,<svg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7 13L1.07071 7.07071C1.03166 7.03166 1.03166 6.96834 1.07071 6.92929L7 1' stroke='%235E718D' stroke-width='2' stroke-linecap='round'/></svg>");
}
.paginate_button.previous.disabled:before {
    content: url("data:image/svg+xml;utf8,<svg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7 13L1.07071 7.07071C1.03166 7.03166 1.03166 6.96834 1.07071 6.92929L7 1' stroke='%235E718D' stroke-width='2' stroke-linecap='round'/></svg>") !important;
}
.paginate_button.previous:hover:before {
    content: url("data:image/svg+xml;utf8,<svg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7 13L1.07071 7.07071C1.03166 7.03166 1.03166 6.96834 1.07071 6.92929L7 1' stroke='%23FA4B00' stroke-width='2' stroke-linecap='round'/></svg>");
}
/*  per page table row count */
.dataTables_length label {
    font-size: 0px;
    display: flex;
    align-items: center;
    width: max-content;
    position: relative;
}
.dataTables_length label::after {
    content: url("data:image/svg+xml;utf8,<svg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0.983511 0.5H7.01398C7.43117 0.5 7.63976 1.00391 7.34445 1.29922L4.33039 4.31562C4.14757 4.49844 3.84992 4.49844 3.66711 4.31562L0.653042 1.29922C0.35773 1.00391 0.566324 0.5 0.983511 0.5Z' fill='%235E718D'/></svg>");
    position: absolute;
    right: 5px;
}
.dataTables_length label p.page-count-static-text {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #64748b;
    margin-bottom: 0px;
}

.dataTables_length select {
    border: none !important;
    color: #64748b;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    appearance: none;
    position: relative;
    padding-right: 12px !important;
}
.dataTables_length {
    width: 30%;
}
/*  pagination area */
.dataTables_paginate {
    width: 30%;
    justify-self: end;
}
.dataTable > tbody > tr td:nth-child(7) div {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
tbody > tr td small.estimation-time {
    padding: 2px 10px 2px 10px;
    border-radius: 24px;
    /* font-family: Inter; */
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
}
/*   estimation and actual time pills (dev) */
tbody > tr > td small.estimation-hours-label.frontend-dev,
tr td small.estimation-time.frontend-dev {
    border: 1px solid #cce0ff;
    background: #ebf3ff;
    color: #3385ff;
}
tbody > tr > td small.estimation-hours-label.backend-dev,
tr td small.estimation-time.backend-dev {
    border: 1px solid #abdce7;
    background: #ebfffe;
    color: #07a1c3;
}
/*   estimation and actual time pills (design) */
tbody > tr > td small.estimation-hours-label.design,
tr td small.estimation-time.design {
    border: 1px solid #dfccff;
    background: #f1ebff;
    color: #6941c6;
}
/*   estimation and actual time pills (qa) */
tbody > tr > td small.estimation-hours-label.frontend-qa,
tr td small.estimation-time.frontend-qa {
    border: 1px solid #c2e9c1;
    background: #e7fce7;
    color: #1fb51c;
}
tbody > tr > td small.estimation-hours-label.backend-qa,
tr td small.estimation-time.backend-qa {
    border: 1px solid #dee9c1;
    background: #f4fce7;
    color: #84b51c;
}
/*  estimation time total on count */
.dataTable > tbody > tr td:nth-child(7) > p {
    margin-bottom: 4px;
    background: #fff;
    padding: 2px 4px 2px 4px;
    border-radius: 24px;
    max-width: fit-content;
}
/* user collum all pill */
/* pill parent */
.dataTable > tbody > tr > td:nth-child(8) {
    display: table-cell !important;
}
.dataTable > tbody > tr > td:nth-child(8) div {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
/* all chilk*/
#taskTable > tbody > tr > td:nth-child(8) span {
    padding: 2px 10px 2px 10px;
    border-radius: 24px;
    max-width: fit-content;
    white-space: nowrap;
}
/* qa pill */
.dataTable > tbody > tr > td:nth-child(8) span.qa {
    color: #1fb51c;
    border: 1px solid #c2e9c1;
    background: #e7fce7;
}
/* dev pill */
.dataTable > tbody > tr > td:nth-child(8) span.dev {
    color: #3385ff;
    border: 1px solid #cce0ff;
    background: #ebf3ff;
}
/* design pill */
.dataTable > tbody > tr > td:nth-child(8) span.design {
    color: #6941c6;
    border: 1px solid #dfccff;
    background: #f1ebff;
}

/* Task discription page */
/* description tab */
/* data labels */
#description > div.card.shadow label {
    font-size: 14px;
    font-weight: 600;
    line-height: 16.94px;
    letter-spacing: 0.01em;
    color: #0f172a;
}
/* paragraph tag under labels */
#description > div.card.shadow p.form-control-plaintext {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    text-align: left;
    color: #334155;
}
/* bug reports tab */
/* main table */
table#taskIssueTable {
    padding-left: 15px;
}
/* 1st collum # */
.table.dataTable > tbody > tr > td.sorting_1 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #3d4a5c;
}
/* all td */
.table.dataTable > tbody > tr > td {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.94px;
    letter-spacing: 0.01em;
    color: #3d4a5c;
    vertical-align: middle;
}
/* task table status column */
#taskTable > tbody > tr > td:has(.status-label) {
    vertical-align: middle;
}
/* estimated time / actual time collum */

/* issue evidence collum with icon */
.table.dataTable > tbody > tr > td:nth-child(6) > a {
    padding-left: 30px;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}
/* creat estimation tab */
ul#select2-assigned_users-container {
    margin: 0px;
}
/*  bug report and estimation top button row  */
#estimation > div > div.row,
#issue > div > div.row {
    margin-top: 0px;
    margin-bottom: 8px;
}
.table.dataTable > tbody > tr > td:nth-child(6) > a::before {
    content: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(%23clip0_267_12612)'><path d='M6.6668 9.16666C6.9531 9.54942 7.31837 9.86612 7.73783 10.0953C8.1573 10.3245 8.62114 10.4607 9.0979 10.4949C9.57466 10.529 10.0532 10.4602 10.501 10.2932C10.9489 10.1261 11.3555 9.86471 11.6935 9.52666L13.6935 7.52666C14.3007 6.89799 14.6366 6.05598 14.629 5.18199C14.6215 4.308 14.2709 3.47196 13.6529 2.85394C13.0348 2.23591 12.1988 1.88535 11.3248 1.87775C10.4508 1.87016 9.60881 2.20614 8.98013 2.81333L7.83347 3.95333M9.33347 7.83333C9.04716 7.45058 8.68189 7.13388 8.26243 6.9047C7.84297 6.67553 7.37913 6.53925 6.90237 6.50511C6.4256 6.47096 5.94708 6.53975 5.49924 6.70681C5.0514 6.87387 4.64472 7.13528 4.3068 7.47333L2.3068 9.47333C1.69961 10.102 1.36363 10.944 1.37122 11.818C1.37881 12.692 1.72938 13.528 2.3474 14.1461C2.96543 14.7641 3.80147 15.1147 4.67546 15.1222C5.54945 15.1298 6.39146 14.7939 7.02013 14.1867L8.16013 13.0467' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></g><defs><clipPath id='clip0_267_12612'><rect width='16' height='16' fill='white' transform='translate(0 0.5)'/></clipPath></defs></svg>");
    position: absolute;
    margin: 2px 0px;
    margin-left: -20px;
}
/* export icon */
#issue a.action-export {
    padding-left: 26px;
    border: 1px solid #FA4B00;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}
#issue a.action-export > i::before {
    content: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6.66699 12.3333L10.0003 9M10.0003 9L13.3337 12.3333M10.0003 9V16.5M16.667 12.9524C17.6849 12.1117 18.3337 10.8399 18.3337 9.41667C18.3337 6.88536 16.2816 4.83333 13.7503 4.83333C13.5682 4.83333 13.3979 4.73833 13.3054 4.58145C12.2187 2.73736 10.2124 1.5 7.91699 1.5C4.46521 1.5 1.66699 4.29822 1.66699 7.75C1.66699 9.47175 2.3632 11.0309 3.48945 12.1613' stroke='%23344054' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/></svg>");

    position: absolute;
    margin-top: -8px;
    margin-left: -18px;
}
/* creat task issue page */
/* input file area  */
.row.file-upload-main {
    display: flex;
    flex-wrap: nowrap;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    margin: 0px;
    border-radius: 8px;
}
.file-upload {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.drop-file {
    width: 48%;
}
p.file-upload-or {
    width: 3%;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-align: center;
    color: #3b434f;
}
div#paste-area {
    width: 48%;
    padding: 37px 20px !important;
    background-color: #fff;
    border-radius: 8px;
}
label#drop-area {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
}
div#file-preview {
    display: none;
}
div#file-preview.with-content {
    display: flex;
    max-width: 40% !important;
    width: auto;
    gap: 8px;
    align-items: start;
    max-height: 109px;
    overflow: hidden;
}
div#file-preview.with-content > div {
    width: 95px !important;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
}
div#file-preview.with-content > div svg {
    margin-top: -8px;
}
div#file-preview.with-content > div.extra-counter-text {
    height: auto !important;
    align-self: center;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 21px;
}
div#file-preview.with-content > div img {
    min-height: 109px;
}
div#file-preview.with-content + .file-upload {
    min-width: 59% !important;
    flex: 1;
}
.row.file-upload-main .file-upload label#drop-area .attach-icon {
    margin-bottom: 10px;
}
.row.file-upload-main #paste-area,
.row.file-upload-main label#drop-area {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #3b434f;
}
/* issue type input position */
#select2-categories-container {
    margin: 0px;
}
div.main-body > div:nth-child(2) form > div > div:nth-child(5) > span > span.selection > span {
    padding: 0px;
}
ul.select2-selection__rendered + span.select2-search.select2-search--inline > textarea {
    margin-top: 9px;
    margin-left: 10px;
}
/* creat page issue evidance link upper gap */
div.main-body form > div > div.row > div:nth-child(2) {
    margin-bottom: 0px !important;
}
div.main-body > div:nth-child(2) form > div > div input.form-control::placeholder {
    font-size: 14px;
    font-weight: 400;
    line-height: 17.5px;
    color: #94a3b8;
}
/* creat issue page */
.select2-selection.select2-selection--single,
.select2-selection.select2-selection--multiple,
.form-control {
    border: 1px solid #d1d5db;
    background: #f9fafb;
    /* max-width: 1532px; */
    max-height: 80px;
    border-radius: 8px;
    display: flex;
    justify-content: start;
    height: 36px;
}
.select2-selection.select2-selection--multiple {
    /* padding-bottom: 38px; */

    padding: 0;
    height: unset !important;
    max-height: unset !important;
    align-items: center;
    
}
.select2-selection.select2-selection--single::before,
.select2-selection.select2-selection--multiple::before,
.form-control::before {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    bottom: 0;
    height: 28px;
}
ul.select2-selection__rendered {
    margin-top: 1px;
    margin-bottom: 0;
    padding: 3px 3px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 0;
}
/* labels for form */
label.form-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: #111928;
    display: flex;
    gap: 2px;
}
div.container-fluid > div > div.col-12.col-md-10.main > div.main-body.p-3.pt-4 > div.card.tbl-card > div > div > div > div > div {
    margin-left: 12px;
}
div.container-fluid > div > div.col-12.col-md-10.main > div.main-body.p-3.pt-4 > div.card.tbl-card > div > div > div > div:nth-child(8) > div > div.col-1,
div.container-fluid > div > div.col-12.col-md-10.main > div.main-body.p-3.pt-4 > div.card.tbl-card > div > div > div > div:nth-child(9) > div > div.col-1 {
    width: 12%;
}
div.card.tbl-card div.desc-row-border:nth-child(8) div.desc.desc-border > div.col-3,
div.card.tbl-card div.desc-row-border:nth-child(9) div.desc.desc-border > div.col-3 {
    max-width: 180px;
}
/* issue details all key data */
div.main > div.main-body > div.card.tbl-card > div > div > div > div.desc-row-border > div.desc.desc-border > div.col-3 > label {
    font-size: 14px;
    font-weight: 600;
    line-height: 16.94px;
    letter-spacing: 0.01em;
    color: #0f172a;
}
/* issue details all value data */
div.main > div.main-body > div.card.tbl-card div:nth-child(8) div.col-md-9 > p:nth-child(2),
div.main > div.main-body > div.card.tbl-card > div > div > div > div.desc-row-border > div.desc.desc-border > div.col-md-9 span {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.94px;
    letter-spacing: 0.01em;
    /* color: #334155; */
}
/* comment and reply font */
/* comment and reply upper gape */
div.main > div.main-body > div.col-md-12.mt-4 > div > div > div > div {
    margin-top: -30px;
}
/* person name */
div.main-body.p-3.pt-4 > div.col-md-12.mt-4 > div > div > div > div > div.row > div.col-md-10 strong {
    font-size: 16px !important;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.01em;
}
/* comment and time only font */
div.main-body.p-3.pt-4 > div.col-md-12.mt-4 > div > div > div > div > div.row > div.col-md-10 > div > p.mb-1.mt-1.fs-5 {
    font-size: 16px !important;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.01em;
}
/* comment time only*/
div.main-body.p-3.pt-4 div > div > div > div > div.row > div.col-md-10 > div.ms-5 > p.text-secondary.fs-6,
div.main-body.p-3.pt-4 div > div > div > div > div.row > div.col-md-10 > div.mt-5 > p.text-secondary {
    font-size: 12px !important;
}
/* all send buttons for comment and reply */
div.main > div.main-body form > div > div {
    position: relative;
}
div.main > div.main-body form button.comment-button {
    margin: 35px 0px;
    position: absolute;
    right: -47.5%;
}
/* only comment reply button */
div.main > div.main-body form button.reply-button {
    position: absolute;
    top: -6px;
    right: -47.5%;
}
/* reply content area */
div.container-fluid div.main-body > div.col-md-12.mt-4 > div > div > div > div > div.row > div:nth-child(1) {
    width: 4%;
}
/* reply box */
div.main > div.main-body.p-3.pt-4 > div.col-md-12.mt-4 > div > div > div > div > div.reply-form.ms-5 > form > div > div > div {
    width: 96%;
    margin-left: 56px;
}
/* comment and reply area padding bottom */
div.main > div.main-body > div.col-md-12.mt-4 > div > div.card-body {
    padding-bottom: 40px;
}
/* site wide all dropdown icons */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    content: "";
    position: absolute;
    top: 63%;
    border: none;
}
.select2-selection--multiple:before,
.select2-container--default .select2-selection--single .select2-selection__arrow b:before {
    content: url("data:image/svg+xml;utf8,<svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 1L5 5L9 1' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    bottom: -13px;
    position: absolute;
    border: none;
}
.select2-selection--multiple:before {
    top: 0px;
}
/* creat task page */
/* stacks placeholder */
textarea.select2-search__field::placeholder {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 400;
    line-height: 17.5px;
}
/* creat task all placeholder */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 14px;
    font-weight: 400;
    line-height: 17.5px;
    color: #3b434f;
}

.select2-container--default .select2-selection--single .select2-selection__rendered[title="Select an option"] {
    color: #94a3b8;
}
/* edit task page */
/* edit task mark as complete button */
button.btn.btn-outline-success.mark-complete {
    cursor: pointer;
}
button.btn.btn-success.mark-complete:hover {
    cursor: default;
    background-color: #198754;
}
.btn-outline-success.mark-complete:hover svg path {
    stroke: #fff;
}
/* edit task completed button */
.btn-success.mark-complete svg {
    margin-top: -3px;
}
.btn-success.mark-complete svg path {
    stroke: #fff;
}
/* edit task and add estimation 1st input box */
div.main > div.main-body.p-3.pt-4 > div:nth-child(2) form > div > div:nth-child(1) > span > span.selection > span,
div.main > div.main-body.p-3.pt-4 > div:nth-child(2) form > div > div:nth-child(4) > span > span.selection > span,
div.main > div.main-body.p-3.pt-4 > div:nth-child(2) form > div > div:nth-child(4) > span > span.selection > span {
    padding-left: 3px;
}
.btn.btn-outline-success.mark-complete svg {
    margin-top: -5px;
}
/* estimation breakdown row */
div.main-body.p-3.pt-4 > div.row.justify-content-center > div > div > div > div:nth-child(5) > div:nth-child(1) {
    border-bottom: 1px solid #e2e8f0;
}
/* estimation edit review text box*/
/*
#select2-reviewer_id-container {
    margin-left: 0px;
}
*/
/*  estimation row side line  */
div.main > div.main-body > div.row.justify-content-center > div > div > div > div > div {
    margin-left: 8px;
}
/* table responsive */

.table-responsive {
    overflow-x: visible;
}

/* client page */
.table.dataTable > tbody > tr > td > a {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #3d4a5c;
}
/* client page main table project a tag */
#clientTable > tbody > tr > td > span > a {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #3d4a5c;
}
/* client and project page  details page*/
div.main > div.main-body.p-3.pt-4 > div.card.tbl-card > div > div,
div.main > div.main-body > div.py-4 > div > div > div > div.card-body.two-column-details > div {
    border-bottom: 1px solid #e2e8f0;
    padding-top: 12px;
    padding-bottom: 12px;
    /* margin-top: -16px; */
}
/* project page */
/* project page details edit page client and team input left gap */
div.main > div.main-body > div:nth-child(2) > div > div > div > div.card-body > form > div > span > span.selection > span {
    padding-left: 3px;
}
/* project tabb => details page tasks white space */
div.main > div.main-body > div.card.tbl-card > div > div:nth-child(5) > div > p.form-control-plaintext {
    display: none;
}
/* client page => details page table top padding */
.card-body.two-column-details {
    padding-top: 12px;
}
/* client page => details page table top line */
hr {
    color: #808080d6;
}
/* client tab tab => details page tasks list */
div.main > div.main-body > div.card.tbl-card > div > div:nth-child(6) > div > div,
/* project tab => details page tasks list */
div.main > div.main-body > div.card.tbl-card > div > div:nth-child(5) > div > div {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #3d4a5c;
    margin-bottom: 8px;
}
/* project tab => add project page => connect with trello slider button area */
div.main > div.main-body.p-3.pt-4 > div form > div.form-check.form-switch {
    display: flex;
    flex-direction: column-reverse;
    padding: 0px;
    gap: 8px;
    margin-bottom: 16px;
}
/* slider button */
input#is_trello_connected {
    width: 48px;
    height: 24px;
    margin: 0px;
}
/* Employee page */
/* add employee page */
/* add employee input title */
div.main > div.main-body.p-3.pt-4 > div.card.tbl-card > div > form > div > div > div > label {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: #111928;
    /* may break after re-structure of the layout */
}
/* add employee role input box */
#select2-role_id-container {
    margin-left: 0px;
}
/* employee page details */
/* employee avatar */
img.rounded.mx-auto.d-block {
    margin: 0px !important;
}
/* page heading */
div.main > div.main-body div.card-header > h5 {
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    color: #1e293b;
}
/* row border bottom */
div.main > div.main-body > div.py-4 > div > div > div > div.card-body > div {
    border-bottom: 1px solid #e2e8f0;
}
/* employee details page key font details */
div.main > div.main-body > div.card.tbl-card > div > div > label {
    font-size: 14px;
    font-weight: 600;
    line-height: 16.94px;
    letter-spacing: 0.01em;
    color: #0f172a;
}
/* employee details page values font details */
div.main > div.main-body > div.card.tbl-card > div > div > div > p > a,
div.main > div.main-body > div.card.tbl-card > div > div > div > p {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.94px;
    letter-spacing: 0.01em;
    color: #334155;
}
/*  */
/* Laptop CSS */
@media screen and (max-width: 1600px) {
    #filterForm > div > div:nth-child(3) {
        margin-left: -10px;
    }

    /* site logo */
    .site-logo-link {
        width: 85%;
    }

    /* time tracking tab export page customers and duration scroll*/
    .card-body .list .table-responsive table.table tbody {
        max-width: 1000px;
    }
}
/* TAB / MOBILE CSS */
@media screen and (max-width: 1150px) {
    /* hamburger icon*/
    #hamburger-icon > i {
        margin-left: 0px;
    }
}

/* moin bhai css end/ */

.dragable-description:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}


.dragable-description {
    padding: .375rem .75rem;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17.5px;
    color: #3b434f;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    border-radius: 8px;
    display: flex;
    justify-content: start;
    width: 100%;
    min-height: calc(5em + .75rem + 2px) !important;
    max-height: 400px !important;
}

.login-error {
    margin-top: 1rem !important;
    margin-bottom: unset !important;
}

.nav.nav-pills>li>a{
    white-space: nowrap;
}

th {
    white-space: nowrap;
}

@media screen and (max-width: 1300px) {
    .nav.nav-pills>li>a  {
        font-size: 14px !important;
        padding-left: 12px !important;
    }

    a.nav-link {
        font-size: 14px !important;
        padding-left: 70px !important;
    }
}

@media screen and (max-width: 1150px) {
    .main {
        width: 100%;
    }
    
    .navigation {
        height: 100vh;
        overflow-y: auto;
    }

    .site-logo {
        text-align: -webkit-center;
    }
}

.table-responsive {
    overflow: auto;
}

.small-box>.inner {
    height: 9.5rem;
}

.nav-item {
    line-height: 18px;
}

.total_duration_wrap {
    font-size: 18px;
    color: #fa4b00;
}

.task-wrap {
    word-break: break-word;
    white-space: normal;
}

.dashboard-task-table tbody tr{
    cursor: unset !important;
}

 .select2-selection__choice__display {
    word-break: break-word;
    white-space: normal;
    display: block;
    width: fit-content;
}

.select2-selection__choice__remove{
    height: 100%;
}


.select2-selection__choice {
    padding-top: 5px;
    padding-bottom: 5px;
    max-width: none !important;
}

.modal-content .select2-selection__choice {
    /* min-width: 515px;
    width: 100%; */
}
.modal-content .select2-selection--multiple{
    display: flex;
    flex-wrap: wrap;
}
.card-body .select2-selection__choice {
    min-width: 515px;
    width: auto;
    min-width: unset;
}
.card-body .select2-selection__choice .select2-selection__choice__display {
    white-space: nowrap;
}

.select2-search--inline {
    width: 100%;
}

.select2-selection__rendered {
    flex: none;
    max-width: 100%;
} 

#avatar-preview {
    object-fit: cover;
    object-position: top;
}

.img-profile {
    object-fit: cover;
    object-position: top;
}

#taskIssueTable > tbody > tr > td {
    padding: 0.5rem !important;
}

#taskIssueTable > tbody > tr > td > select{
    font-size: 12px !important;
}

#taskIssueTable > tbody > tr > td > input{
    font-size: 12px !important;
}

#taskIssueTable > tbody > tr > td > textarea{
    font-size: 12px !important;
}

#taskIssueTable .select2-selection__rendered
{
    font-size:12px !important;
}

/* #taskIssueTable  > tbody > tr > td:nth-child(8) span {
    border-radius: 8px;
    padding: unset;
    max-width: unset;
    white-space: unset;
} */

#taskIssueTable  .select2-selection__choice__display {
    word-break: unset;
}

#taskIssueTable .select2-selection__choice {
    font-size: 12px !important;
    padding: 4px 20px;
}

#taskIssueTable .form-control {
    margin-bottom: unset !important;
}

.offcanvas.offcanvas-end {
    width: 600px;
}


#issueForm  .select2-selection__rendered {
    width: 100%;
} 

#taskIssueTable .select2-selection__rendered {
    width: 100%;
} 

#taskIssueTable th:not(:nth-child(1)):not(:nth-child(2)),
#taskIssueTable td:not(:nth-child(1)):not(:nth-child(2)) {
    min-width: 200px;
}



/* .link-pill {
    background-color: #e0f0ff;
    color: #0077cc;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    text-decoration: none;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .link-pill:hover {
    background-color: #cde9ff;
  }
  
  .link-pill a {
    color: inherit;
    text-decoration: none;
    margin-right: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .link-pill .remove-pill {
    cursor: pointer;
    font-weight: bold;
    color: #555;
  } */


  .tag-input-container {
        min-height: 42px;
        cursor: text;
        gap: 0.5rem;
        flex-wrap: wrap;
        background-color: #ffffff;
    }

    .tag-input-container:focus {
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    }

    .tag-input-container input.example_url {
        outline: none;
        background: transparent;
        flex-grow: 1;
        min-width: 120px;
        border: none !important;
        padding: 4px 0;
        box-shadow: none !important;

    }

    .tag-pill {
        background-color: #f0f0f0;
        border: 1px solid #ddd;
        border-radius: 20px;
        padding: 4px 8px;
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        max-width: 100%;
        border-radius: 9999px !important;
        box-shadow: 0px 0px 3.5px grey;
    }

    #taskIssueTable_info {
        display: none;
    }

    .tag-input-container input.issue_evidence_1 {
        outline: none;
        background: transparent;
        flex-grow: 1;
        min-width: 120px;
        border: none !important;
        padding: 4px 20px;
        box-shadow: none !important;
    }

    #taskIssueTable tbody .clickable-row {
        color: #fa4b00;
    }

    input[type="checkbox"] {
        accent-color: #fa4b00;
    }

    #taskIssueTableWrapper {
        max-height: 60vh;
        min-height: 55vh;
    }

    .taskissue-row-control {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #ddd;
    }

    .new-row-add-dropdown {
        width: 60px;
        height: 40px;
        border: 1px solid #ced4da;
        border-radius: 8px;
        text-align: center;
        font-size: 16px;
        color: #495057;
        background-color: #fff;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none; /* Remove default dropdown arrow */
        position: relative;
        overflow: hidden;
    }

    .new-row-add-dropdown select {
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
        padding: 0;
        font-size: 16px;
        color: #495057;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .new-row-add-dropdown select option {
        text-align: center;
        padding: 5px;
    }

    .add-row-btn {
        height: 40px;
        padding: 0 20px;
        border: 1px solid #007bff;
        border-radius: 8px;
        background-color: #fff;
        color: #007bff;
        font-size: 16px;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: background-color 0.3s, color 0.3s;
    }

    .add-row-btn:hover {
        background-color: #007bff;
        color: #fff;
    }

    .add-row-btn .plus {
        font-size: 18px;
        line-height: 1;
    }

    .select2-selection__choice__remove {
        border-right: unset !important;
        padding-left: 8px !important;
    }

    .select2-selection__choice {
        border-radius: 9999px !important;
    }

    .tag-pill a {
        font-size: 12px;
        color: #3d4a5c;
    }

    .row-number-wrapper {
        background: #a5a5a5;
        width: 35px;
        height: 35px;
        font-weight: 700;
        color: white;
        display: block;
        border-radius: 99999999px;
        align-content: center;
        text-align: center;
    }

    #qa_date_range {
        border-radius: 6px;
        max-width: fit-content;
        margin-bottom: 0px;
    }

    .qa-date-wrapper {
        position: absolute;
        top: 0;
        margin-top: 10px;
    }