@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
/*  ============================== 
    Global
    ================================*/
    :root {
        --textlight:#637381;
        --colorgreen:#01684b;
        --lightbg:fbf7f2;
        --textdark:#000;
        --textlight:#666;
        --bs-table-hover-bg:#f3f2f2;
    }

    body, html {
      font-family: "Outfit", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
    }
    button, input, optgroup, select, textarea {font-family: "Outfit", sans-serif;}

    a {text-decoration: none;}
    .btn, .form-control {border-radius:3px;}
    .form-control, .form-select { /*font-size: inherit;*/}
    .form-control:focus, .form-select:focus, .form-select:focus-visible,.accordion-button:focus
    {
        box-shadow:none;
    }
    .card { border:none;}
    .nav-underline .nav-link.active, .nav-underline .show > .nav-link {font-weight: 500;}
    .btn-small { 
        font-size: 12px !important;
        padding: 3px 0.5rem !important;
        line-height: 1;
    }
    .dropdown-menu {font-size: 14px;}
    table { font-size: 14px;}
    .table-hover > tbody > tr:hover > * {
      --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.035);
    }
    .table > :not(caption) > * > * { background: transparent;}
    .daterangepicker {color:#666;}


    /* ----- Task -------- */
    .indicator {width:6px; height:6px;}
    .indicator {
        display: inline-block;
        width: .6em;
        height: .6em;
        margin-right: .5em;
        border-radius: 50%;
        background-color: currentColor;
    }
    
    /*
    .avatar {
        height: 28px;
        width: 28px;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .avatar-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .avatar-group .avatar + .avatar {margin-left: -5.6px;}
    .avatar .avatar-img {max-width: 100%;height: auto;}
    .avatar, .avatar .avatar-img, .avatar .avatar-text {border-radius: 50%;}
    .avatar-group .avatar:not(:last-child) {
      -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i0KHQu9C+0LlfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNNTQsNTBDNTQsMjcuODAyNDI5Miw2Ny4xNTc0NzA3LDguNjg5NzU4Myw4Ni4wOTIxNjMxLDBIMHYxMDBoODYuMDkyMTYzMUM2Ny4xNTc0NzA3LDkxLjMxMDI0MTcsNTQsNzIuMTk3NTcwOCw1NCw1MHoiLz4NCjwvc3ZnPg0K);
      mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i0KHQu9C+0LlfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNNTQsNTBDNTQsMjcuODAyNDI5Miw2Ny4xNTc0NzA3LDguNjg5NzU4Myw4Ni4wOTIxNjMxLDBIMHYxMDBoODYuMDkyMTYzMUM2Ny4xNTc0NzA3LDkxLjMxMDI0MTcsNTQsNzIuMTk3NTcwOCw1NCw1MHoiLz4NCjwvc3ZnPg0K);
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
    }
*/

    .projectgroup-tasks-all-tabs,
    .projectgroup-tasks-all-tabs .accordion-button,
    .projectgroup-tasks-all-tabs .btn
    {
        font-size: 14px;
    }
    .projectgroup-tasks-all-tabs .table > :not(caption) > * > * {padding:.3rem;}
    .projectgroup-tasks-all-tabs .avatar {width:25px; height: 25px;}

    .projectgroup-tasks-all-tabs table {}
    /*
        .projectgroup-tasks-all-tabs table tr td:nth-of-type(2n),
        .projectgroup-tasks-all-tabs table tr td:nth-of-type(3n),
        .projectgroup-tasks-all-tabs table tr td:nth-of-type(4n),
        .projectgroup-tasks-all-tabs table tr td:nth-of-type(5n),
        .projectgroup-tasks-all-tabs table tr td:nth-of-type(6n)
    {
        background: #f8f9fa;
        width: 13%;
    }
    */
    table thead td { font-weight: 500;}
    .projectgroup-tasks-all-tabs {position:relative; margin:0 -10px;}
    .projectgroup-tasks-all-tabs table tr td:last-child { width:30px;}
    .projectgroup-tasks-all-tabs tr:last-child td { background: none;}

    .projectgroup-tasks-all-tabs .accordion-header { position: relative; z-index: 0; --bs-accordion-btn-padding-y: 0.7rem;}
    .projectgroup-tasks-all-tabs .accordion-header > .dot-drag,
    .task-list tr.ui-sortable-handle .dot-drag {
        position:absolute;
        left:-11px;
        top:11px;
        opacity:0.2;
        transition:all 0.2s;
        z-index:9;
    }
    .projectgroup-tasks-all-tabs .project-task-group-tabs { padding: 0 7px;}
    .projectgroup-tasks-all-tabs .accordion-header:hover > .dot-drag {opacity:1;}
    .task-list tr.ui-sortable-handle:hover .dot-drag {opacity:1;transition: all 0.2s;}
    .project-task-group-tabs > .accordion-item { border:none;}
    .project-task-group-tabs .accordion-button {padding-left:1.3em; color: #000000;}
    .project-task-group-tabs .accordion-button:hover { background-color: #f3f8fd;}

    .project-task-group-tabs .accordion-button::after {position: absolute; left:3px; width: 12px; height: 12px;background-size: contain;opacity: 0.3;}
    .project-task-group-tabs .accordion-button:hover::after {opacity:1;}
    .project-task-group-tabs .accordion-button::after {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3e%3c/svg%3e");}
    .project-task-group-tabs .accordion-button:not(.collapsed) {background:no-repeat;box-shadow:none; font-weight: 600;}
    .project-task-group-tabs > .accordion-item > .accordion-button:not(.collapsed) {color:#0C007D;}
    .project-task-group-tabs .accordion-button::after {opacity:0.3;}
    .project-task-group-tabs .accordion-button:not(.collapsed)::after {rotate:-90deg; opacity:1;}

    .project-task-group-tabs .accordion-button:hover::after {opacity:1;}
    .project-task-group-tabs .accordion-body {padding-bottom:0;padding-top:0;}
    .project-task-group-tabs > .accordion-item > .accordion-collapse.show { border-bottom: solid 1px var(--bs-border-color) !important;}

    .project-task-tabs .task-activity-title {padding-left:0.6em !important; display:flex;}
    .project-task-tabs table tr:last-child, .project-task-tabs table tr:last-child td {border-bottom:none !important;}
    .project-task-group-tabs .accordion-body { background-color:#f3f8fd;}

    .btnTaskStatus {color: var(--textlight);}
    .btnTaskStatus:hover {color: var(--colorgreen);}

    .project-task-group-tabs .task-group-wrapper .accordion-button.collapsed::after { opacity: 0.5;}
    .project-task-group-tabs .task-group-wrapper .accordion-button::after {width:12px; height:12px;background-image: url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9ImN1cnJlbnRDb2xvciIgIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1maWxsZWQgaWNvbi10YWJsZXItY2lyY2xlLWFycm93LXJpZ2h0Ij48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIgMmwuMzI0IC4wMDVhMTAgMTAgMCAxIDEgLS42NDggMGwuMzI0IC0uMDA1em0uNjEzIDUuMjFhMSAxIDAgMCAwIC0xLjMyIDEuNDk3bDIuMjkxIDIuMjkzaC01LjU4NGwtLjExNyAuMDA3YTEgMSAwIDAgMCAuMTE3IDEuOTkzaDUuNTg0bC0yLjI5MSAyLjI5M2wtLjA4MyAuMDk0YTEgMSAwIDAgMCAxLjQ5NyAxLjMybDQgLTRsLjA3MyAtLjA4MmwuMDY0IC0uMDg5bC4wNjIgLS4xMTNsLjA0NCAtLjExbC4wMyAtLjExMmwuMDE3IC0uMTI2bC4wMDMgLS4wNzVsLS4wMDcgLS4xMThsLS4wMjkgLS4xNDhsLS4wMzUgLS4xMDVsLS4wNTQgLS4xMTNsLS4wNzEgLS4xMTFhMS4wMDggMS4wMDggMCAwIDAgLS4wOTcgLS4xMTJsLTQgLTR6IiAvPjwvc3ZnPg=="); opacity: 0.2;}    
    .project-task-group-tabs .task-group-wrapper .accordion-button:not(.collapsed)::after,
    .project-task-group-tabs .task-group-wrapper .accordion-button:hover::after {opacity:1;}
    
    .task-list tr.ui-sortable-handle {position: relative;}
    .task-list tr.ui-sortable-handle .dot-drag {top:2px;left: -14px;}

    /*---- Dark mode---*/
    body.night-mode .project-task-group-tabs .accordion-button::after {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ccc'%3e%3cpath fill-rule='evenodd' d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3e%3c/svg%3e");}
    body.night-mode .project-task-group-tabs .task-group-wrapper .accordion-button::after {width: 16px;height: 16px;background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI2ZmZiIgY2xhc3M9ImJpIGJpLWFycm93LXJpZ2h0LXNob3J0IiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTQgOGEuNS41IDAgMCAxIC41LS41aDUuNzkzTDguMTQ2IDUuMzU0YS41LjUgMCAxIDEgLjcwOC0uNzA4bDMgM2EuNS41IDAgMCAxIDAgLjcwOGwtMyAzYS41LjUgMCAwIDEtLjcwOC0uNzA4TDEwLjI5MyA4LjVINC41QS41LjUgMCAwIDEgNCA4Ii8+Cjwvc3ZnPg=="); opacity: 0.2;}
    body.night-mode .project-task-group-tabs > .accordion-item > .accordion-collapse.show { border-bottom: solid 1px hsla(0,0%,100%,.1) !important;}
    body.night-mode .dot-drag svg { color: #ffffff; fill:#ffffff;}
    body.night-mode .btnTaskStatus:hover { color: #39da71;}
    body.night-mode .project-task-group-tabs .accordion-body,
    body.night-mode .project-task-group-tabs .accordion-button:hover { background:none;}

    /*---- Dark mode---*/
    .logo-task {font-size: 20px;color: #FFF;font-weight: 400;margin-top:0;}
    .logo-task span{color: #39da71}
    .toggle-arrow-none:after {display: none;}
    .user-panel {
         padding: 1.2em 10px 0;
         position: relative;
     }
    .title-staffonline {
        color: #fff;
        text-align:center;
        background-color:rgba(255, 255, 255,0.2);
        padding:5px;
        border-radius:25px;
        margin-bottom: 0.6em;
    }
    .dot-new span {color: #fff;}
    .dot-new:before {
       font-family: "bootstrap-icons";
       content: "\F287";
       display: inline-block;
       padding-right: 6px;
       vertical-align: middle;
       color:#ccc;
       font-size:7px;
    }
    .green-dot:before {color:#79bd21;}
    .red-dot:before {color:#f56954;}
    .blue-dot:before {color:#2aaad5;}

    .figure-section { margin-top:4em; margin-bottom:8px; background-color:#f8f8f8;}

/*  =================================================
    Parners
    ================================================= */
    /* container */
    .responsive-two-columns {
        display:flex;
        flex-wrap:wrap;
    }

    /* columns */
    .responsive-two-columns > * {
        width:100%;
        padding:1rem;
    }

    /* tablet breakpoint */
    @media (min-width:768px) {
        .responsive-two-columns {height: 100vh;}
        .responsive-two-columns > *:nth-child(1) {
            width:50%;
        }
        .responsive-two-columns > *:nth-child(2) {
            width:50%;
        }
    }
    @media (max-width:767px) {
        html, body, .responsive-two-columns {height:100% !important;}
        .responsive-two-columns > *:nth-child(1) { display:none !important;} 
    }
    .carousel-indicators [data-bs-target] {border: solid 1px #fff;margin-right: 5px;margin-left: 5px;}
    .carousel-indicators button.active {background-color: #fff;}

    .carousel-indicators button {
      width: 9px !important;
      height: 9px !important;
      border-radius: 50%;
      background: 0 0;
      border: solid 1px #333;
    }    

    
    .text-gradient {
        background-image: linear-gradient(135deg, color(display-p3 .6196078431 .4784313725 1 / 1) 0%, color(display-p3 .9960784314 .5450980392 .7333333333 / 1) 33.33%, color(display-p3 1 .7411764706 .4784313725 / 1) 66.67%, color(display-p3 .9725490196 .9176470588 .7647058824 / 1) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        display: block;
    }
    :root {
        --d: 5500ms;
        --angle: 90deg;
        --gradX: 100%;
        --gradY: 50%;
        --c1: rgba(255, 0, 98, 0.8);
    --c2: rgba(10, 0, 125, 0.1);
    }
    @property --angle {
      syntax: '<angle>';
      initial-value: 90deg;
      inherits: true;
    }

    @property --gradX {
      syntax: '<percentage>';
      initial-value: 50%;
      inherits: true;
    }

    @property --gradY {
      syntax: '<percentage>';
      initial-value: 0%;
      inherits: true;
    }

    .border-rorate-gradient {
        border: 3px solid;
        border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 20;
        animation: borderRotate var(--d) linear infinite forwards;
    }

    @keyframes borderRotate {
        100% {
            --angle: 420deg;
        }
    }

    @keyframes borderRadial {
        20% {
            --gradX: 100%;
            --gradY: 50%;
        }
        40% {
            --gradX: 100%;
            --gradY: 100%;
        }
        60% {
            --gradX: 50%;
            --gradY: 100%;
        }
        80% {
            --gradX: 0%;
            --gradY: 50%;
        }
        100% {
            --gradX: 50%;
            --gradY: 0%;
        }
    }

/* Animation for the toast sliding down from the top */
@keyframes slideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Apply the slideDown animation to the toast */
.toast.show {
    animation: slideDown 0.5s ease-out;
    top: 0;
    right: 0;
}

/*===============*/
.table-select-dropdown .select2-container--default  .select2-selection--single {
 border:none;
}
/* .table-select-dropdown:hover .select2-container--default  .select2-selection--single {}

.loading-container .spinner { } */

/*----------Daily Task Report---css-----start------*/

.daily-task-report-sec .btn, .btn-green{
/* background-color:rgba(16, 177, 67, 1); */
/* border-color:rgba(16, 177, 67, 1); */
border-radius:5px;
font-size:13px;
font-weight:500;
}
.btn-green:hover{
   background-color:rgb(27, 211, 85);
border-color:rgba(27, 211, 85); 
}
.daily-task-report-sec {
background-color:#fff;
padding:1.5rem;
}
.daily-task-report-sec .top-user-panel .figure-hold img{
border-radius:10px;	
}
.daily-task-report-sec .top-user-panel .task-user-caption{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.daily-task-report-sec .top-user-panel .task-user-caption h4{
font-size:20px;
font-weight:600;
}
.daily-task-report-sec .top-user-panel .task-user-caption li{
font-size:13px;	
}
.daily-task-report-sec .top-user-panel .task-user-caption span{
display:inline-block;
margin-right:7px;
}
.daily-task-report-sec .select-hold .form-select, .daily-task-report-sec .top-input-date input{
font-size:13px;
border-radius:5px;
font-weight:500;
}
.form-select:focus{
border-color:rgba(16, 177, 67, 1);
}
.daily-task-report-sec .top-input-date input:focus{
box-shadow:none;
border-color:rgba(16, 177, 67, 1);
}
.daily-task-report-sec  .table-task-time tr{
	border:none;
	
}
.daily-task-report-sec  .table-task-time tr > td{
height:49px;
}
.daily-task-report-sec  .table-task-time tr > td table td{
	height:8px;
}
.daily-task-report-sec  .table-task-time th{
font-size:12px;
color:rgba(145, 145, 145, 1);
font-weight:400;
border-bottom:1px solid #E8E8E8;
}
.daily-task-report-sec  .table-task-time td{
	border-bottom:1px solid #E8E8E8;
}
.daily-task-report-sec  .table-task-time .time{
color:rgba(145, 145, 145, 1);
font-weight:600;
font-size:11px;
position: relative;
top: -6px;
}
.daily-task-report-sec .table-task-time  td{
padding:0px 0.5rem;
align-content: baseline;
font-size:12px;
color:rgba(0, 0, 0, 1);
font-weight:400;
}
.daily-task-report-sec .table-task-time  td > table tr td{
padding:0px 0.5rem;
border:none;
}
.daily-task-report-sec .table-task-time tr td:last-child{
	padding:0px;
	
}
.daily-task-report-sec .table-task-time tr td:first-child{
	border-right:1px solid #e8e8e8;
	border-bottom:none;
}
.daily-task-report-sec .table-task-time tr td table td:first-child{
border-right:none;

}
.daily-task-report-sec .table-task-time tr th{
	width:9.57%;
}
.daily-task-report-sec .table-task-time td table tr td{
	width:10.28%;
	    align-content: center;
}
.daily-task-report-sec .table-task-time tr th:nth-child(2), .daily-task-report-sec .table-task-time tr th:nth-child(3){
	width:13%;
}
.daily-task-report-sec .table-task-time td table tr td:nth-child(1), .daily-task-report-sec .table-task-time td table tr td:nth-child(2){
	/* width:14%; */
}

.daily-task-report-sec .table-task-time tr td table td:first-child{
	border-bottom: 1px solid #f3f3f3;
}
.daily-task-report-sec .table-task-time .second-tb{
	position:relative;
}
.daily-task-report-sec .table-task-time .second-tb::before{
	content: '';
    position: absolute;
    top: -2px;
    left: -10px;
    width: 15px;
    height: 2px;
    background-color: #efefef;
}

.daily-task-report-sec .animated-progress {
width:80%;
height:10px;
border-radius: 30px;
overflow: hidden;
position: relative;
background-color:rgba(156, 230, 179, 1);
}
.daily-task-report-sec .animated-progress span {
height: 100%;
display: block;
width: 0;
color: rgb(255, 251, 251);
position: absolute;
text-align: end;
padding-right: 5px;
font-size:10px;
border-radius:30px;
    display: flex;
    justify-content: end;
    align-items: center;
}
.progress-green span {
background-color: rgba(16, 177, 67, 1);
border: 1px solid rgba(16, 177, 67, 1);
}
.daily-task-report-sec .circle-brand-color{
width:11px;
height:11px;
border-radius:50%;
display:inline-block;
margin-right: 3px;
min-width:11px;
min-height:11px;
}
.daily-task-report-sec .task-priority span{

font-size:10px;
font-weight:500;
min-width:55px;
line-height:normal;
padding:2px 6px;
}
.daily-task-report-sec .task-priority .high{
	background-color:#ff5959;
}
.daily-task-report-sec .task-priority .medium{
	background-color:#f5a623;
}
.daily-task-report-sec .task-priority .low{
	background-color:#51d266;
}
.daily-task-report-sec .task-priority .none{
		background-color:#ffd04e;
}
.daily-task-report-sec .task-time-bar {
color: rgba(96, 82, 218, 1);
padding: 4px 6px; 
border-radius: 1px;
cursor: pointer;
transition: box-shadow 0.3s ease;
font-weight:500;
font-size:10px;
}
.daily-task-report-sec .task-time-bar:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.daily-task-report-sec .task-title {
text-align:left;
font-size:10px;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
 white-space: normal;
overflow: hidden;
}
.daily-task-report-sec .project-name{
	display:flex;
	align-items:center;
}
.daily-task-report-sec .project-name span:nth-child(2){
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
 white-space: normal;
overflow: hidden;	
}
.daily-task-report-sec .task-time-bar{
max-width:225px;
}
.table-task-time td > table {
  width: 100%;
  table-layout: fixed;
}

.table-task-time td > table td {
  padding: 8px;
  vertical-align: top;
  border: none; /* Remove nested borders if not needed */
}

.task-time-bar {
  position: relative;

}

.task-tooltip {
  position: absolute;
      bottom: 27px;
	  min-width:200px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      text-wrap: auto;
}

.task-tooltip::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.task-time-bar:hover .task-tooltip {
  opacity: 1;
}
.task-time-bar {
  min-height: 10px;
}
.daily-task-report-sec .table-task-time tr th{
	    position: sticky;
    top: 49px;
    z-index: 5;
	background-color:#fff;
}

/*----------Desktop------css------*/
@media(min-width:767px){
	.daily-task-report-sec .table-responsive{
		overflow: visible;
	}
}
/*----------Desktop------css--end----*/


/*----------Mobile------css--start----*/
@media(max-width:767px){

.daily-task-report-sec .table-task-time tr th:nth-child(2), .daily-task-report-sec .table-task-time tr th:nth-child(3) {
    width: 22%;
}
.daily-task-report-sec .table-task-time tr th{
	width:7.57%;
}
.daily-task-report-sec .table-task-time tr th{
	        top: 1px;
}
}

@media(max-width:1024px){
	.daily-task-report-sec .table-task-time td{
	  font-size: 8px;
	}
	.daily-task-report-sec .task-title, .daily-task-report-sec .table-task-time .time, .daily-task-report-sec .task-priority span, .daily-task-report-sec .animated-progress span{
		font-size:8px;
	}
	.daily-task-report-sec .table-task-time th{
		font-size:9px;
	}
	.daily-task-report-sec .task-priority span{
		    padding: 1px 3px;
	}
	.daily-task-report-sec .circle-brand-color{
	   width: 9px;
       height: 9px;
	   min-width:9px;
       min-height:9px;
	}
	.daily-task-report-sec .top-user-panel .task-user-caption h4{
		font-size:17px;
	}
	.daily-task-report-sec .top-user-panel .task-user-caption li, .daily-task-report-sec .btn{
		font-size:10px;
	}
	.daily-task-report-sec .select-hold .form-select, .daily-task-report-sec .top-input-date input{
		font-size:10px;
	}
}

/*----------Mobile------css--end----*/

/*----------Daily Task Report---css-----end------*/



/*----------Project Report---css-----start------*/
.project-report-sec{
   background-color: #fff;
    padding: 1.5rem;
}
.top-projcet-logo-hold{
    max-width: 90px;
    max-height: 90px;
    width: 100%;
    height: 100%;
    background-color: #210B00;
    border-radius: 10px;
    padding: 5px;
}
.top-projcet-logo-hold figure img{
    border-radius: 10px;
}
.project-report-sec  .top-user-panel{
    background-color: #F8F8F8;
    padding: 1rem;
    border-radius: 5px;
}
.project-report-sec .top-user-panel .animated-progress {
   max-width: 100px;
   width: 100%;
    height: 15px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    background-color: rgba(156, 230, 179, 1);
    min-width: 100px;
}
.project-report-sec .animated-progress {
   max-width: 100px;
   width: 100%;
    height: 15px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    background-color: rgba(156, 230, 179, 1);
    min-width: 100px;
}
.project-report-sec  .top-user-panel .animated-progress span {
    height: 100%;
    display: block;
    width: 0;
    color: rgb(255, 251, 251);
    position: absolute;
    text-align: end;
    padding-right: 5px;
    font-size: 10px;
    border-radius: 30px;
    display: flex;
    justify-content: end;
    align-items: center;
}
.project-report-sec .animated-progress span {
    height: 100%;
    display: block;
    width: 0;
    color: rgb(255, 251, 251);
    position: absolute;
    text-align: end;
    padding-right: 5px;
    font-size: 10px;
    border-radius: 30px;
    display: flex;
    justify-content: end;
    align-items: center;
}
.project-report-sec  .top-user-panel ul{
    list-style: none;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 15px;
}
.project-report-sec  .top-user-panel .text-icon-hold .icon-hold span, .project-report-sec  .top-user-panel .text-icon-hold .icon-hold  svg{
    color: var(--bs-text-muted-color) !important;
    font-size: 10px;
}
.project-report-sec  .top-user-panel .text-icon-hold p{
    font-size: 12px;
    color: #4B4B4B;
}
.project-report-sec  .task-groups-sec-top select, .project-report-sec .task-groups-sec-top input{
    font-size: 13px;
    border-radius: 5px;
    font-weight: 500;
}

.project-report-sec  input:focus {
    box-shadow: none;
    border-color: rgba(16, 177, 67, 1);
}
.project-groups-main-sec{
    border: 1px solid #E8E8E8;
}

.project-groups-main-sec .table-light tr th{
    color: #919191;
    font-weight: 500;
}
.project-groups-main-sec .assignee {
  margin-left:10px;
  color:#6b7280;
  font-size:12px;
}
.project-groups-main-sec .total-time-bar td{
    padding-top: 12px;
    padding-bottom: 12px;
}
.project-groups-main-sec table, .project-groups-main-sec table td, .project-groups-main-sec tr, .project-groups-main-sec th{
    border: none;
}

/* Table */
.task-table {
  font-size: 14px;
}

.task-table td,
.task-table th {
  vertical-align: middle;
}

.status-progress { color: #01A3FF;  }
.status-complete { color: #10B143 !important; }
.status-hold { color: #EF9121;  }

.status-blue-pro{
    background-color: #C2E6FA !important;
}
.status-blue-pro span{
background-color: #01A3FF;
}
.status-green-pro{
 background-color: #10B143 !important;
}
.status-green-pro span{
    background-color: #10B143;
}
.status-hold-pro{
    background-color: #F9D5AB !important;
}
.status-over-time-bar{
     background-color: #EA0D0D !important;
}
.status-over-time-bar span{
     background-color: #EA0D0D !important;
}
.status-overtime{
    color: #EA0D0D;
}
.status-hold-pro span{
    background-color: #EF9121 ;
}
.project-groups-main-sec .project-user-image-hold{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 7px;

}
.project-groups-main-sec .project-user-image-hold figure{
    border-radius: 50%;
}
.project-groups-main-sec .project-user-image-hold figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}
.project-groups-main-sec .main-td-text-color > td{
    color: #2C3947;
    font-weight: 700;
}
.project-groups-main-sec .second-td-text-color > td{
    color: #2C3947;
    font-weight: 600;
}
.project-groups-main-sec .total-time-bar > td{
    font-weight: 700;
    color: #000000;
    font-size: 15px;
}
.project-groups-main-sec .light-color-project td{
    color: #373737;
    font-size: 14px;
}

.project-groups-main-sec .main-td-text-color .collapse-icon-main{
        position: relative;
        padding-left: 2.5rem;
}
.project-groups-main-sec .main-td-text-color .collapse-icon-main::before{
    content: '\F4FD';
    position: absolute;
    left: 7px;
    top: 4px;
    transition: transform .2s ease-in-out;
    font-family: bootstrap-icons !important;
    font-size: 20px;
    font-weight: 500;
}
.project-groups-main-sec .main-td-text-color:not(.collapsed) .collapse-icon-main::before{
 content: '\F2EA';
  top: 2px;
}

.project-groups-main-sec .second-td-text-color .second-icon-arrow{
        position: relative;
        padding-left: 3rem !important;
} 
.project-groups-main-sec .second-td-text-color .second-icon-arrow::before{
      content: '\F282';
    position: absolute;
    left: 20px;
    top: 8px;
    transition: transform .2s ease-in-out;
    font-family: bootstrap-icons !important;
    font-size: 13px;
}
.project-groups-main-sec .second-td-text-color:not(.collapsed) .second-icon-arrow::before{
 content: '\F286';
}
.project-groups-main-sec  table{
        width: 100%;
    table-layout: fixed;
}
.project-table th,
.project-table td {
  vertical-align: middle;

}
.project-report-sec .task-title {
    padding-right: 4px;
    padding-left: 8px;
    line-height: normal;
}
.project-groups-main-sec .accordion-collapse {
  transition: height 0.45s ease, opacity 0.35s ease, transform 0.35s ease;
}

.project-groups-main-sec .accordion-collapse.collapse:not(.show) {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
}

.project-groups-main-sec .accordion-collapse.collapse.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.project-groups-main-sec tr[aria-expanded="true"] .collapse-icon-main::after,
.project-groups-main-sec tr[aria-expanded="true"] .second-icon-arrow::after {
  transform: rotate(90deg);
}

.project-groups-main-sec tr[aria-expanded="true"] {
  background: linear-gradient(
    90deg,
    rgba(13,110,253,0.08),
    rgba(13,110,253,0.02)
  );
  box-shadow: inset 4px 0 0 #0d6efd;
  transition: all 0.3s ease;
}
.project-groups-main-sec tr[data-bs-toggle="collapse"] {
  transition: background 0.25s ease, transform 0.2s ease;
}

.project-groups-main-sec tr[data-bs-toggle="collapse"]:hover {
  background-color: rgba(13,110,253,0.05);
  transform: translateX(2px);
}
.project-groups-main-sec .accordion-collapse.show .animated-progress span {
  animation: progressFill 1.1s ease forwards;
}

@keyframes progressFill {
  from { width: 0; }
  to { width: attr(data-progress percentage); }
}

.fade-collapse {
  opacity: 0;
  transform: translateY(-1px);
  transition:
    opacity 0.14s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.14s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-collapse.show {
  opacity: 1;
  transform: translateY(0);
}
.project-report-sec .top-user-panel .project-start-box{
    position: relative;
}
.project-report-sec .top-user-panel .project-start-box::after{
    content: '';
    width: 20px;
    height: 2px;
    position: absolute;
    right: -4px;
    top: 0px;
    bottom: 0px;
    background-color: #E8E8E8;
    margin: auto;
}
/* -------------desktop----------css---------start--------- */
@media(min-width:768px){
    .project-report-sec  .top-user-panel .col-2{
        width: 20%;
    }
}
@media(min-width:1320px){
  .project-report-sec  .top-user-panel .text-icon-hold .icon-hold span, .project-report-sec  .top-user-panel .text-icon-hold .icon-hold  svg{
    font-size: 12px;
}
.project-report-sec  .top-user-panel .text-icon-hold p{
    font-size: 14px;
} 
.light-color-project td{
    font-size: 15px;
} 
}
/* -------------desktop----------css---------end--------- */


/* -------------mobile----------css---------start--------- */
@media(max-width: 767px){
 .project-report-sec  .top-user-panel .col-2{
              width: 33.33%;
    }
     .project-report-sec  .top-user-panel .row.g-2{
            --bs-gutter-y: 1.5rem;
            justify-content: center;
     }
    .project-report-sec  .top-user-panel  .text-icon-hold{
        text-align: center;
    }
       .project-report-sec  .top-user-panel .text-icon-hold .icon-hold span{
        display: block;
        padding: 0px !important;
        padding-top: 5px !important;
       }
        .project-report-sec  .top-user-panel .text-icon-hold p{
            font-size: 10px;
            padding-top: 5px !important;
        }
        .project-report-sec .top-user-panel .project-start-box::after{
            right: -17px;
        }

        .project-groups-main-sec {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.project-groups-main-sec::after {
  content: "";
  position: sticky;
  right: 0;
  top: 0;
  width: 30px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0),
    rgba(0,0,0,0.08)
  );
}
 .project-groups-main-sec td,
  .project-groups-main-sec th {
    font-size: 12px;
    white-space: nowrap;
  }
   .project-groups-main-sec table {
    min-width: 1020px;
  }

  /* Group / Task name ko wide rakho */
  .project-groups-main-sec td[colspan="5"],
  .project-groups-main-sec td[colspan="3"] {
    min-width: 220px;
  }

  /* Progress */
  .project-groups-main-sec td:nth-child(8) {
    min-width: 120px;
  }

  /* Status */
  .project-groups-main-sec td:nth-child(9) {
    min-width: 110px;
  }
}

/* -------------mobile----------css---------end--------- */


/*----------Project Report---css-----end------*/


.task-progress-bar {
    width: 100%;
    height: 20px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.animated-progress span {
    display: block;
    height: 100%;
    background-color: #28a745;
    color: white;
    font-weight: bold;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    transition: width 1s ease;
    white-space: nowrap;
}

.task-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
}

.task-time-bar {
    position: relative;
}

.task-time-bar:hover .task-tooltip {
    opacity: 1;
}

.task-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
}

/* Fix nested table styling */
.second-tb {
    padding: 0 !important;
}

.second-tb table {
    margin: 0 !important;
}

.second-tb table td {
    padding: 8px !important;
    vertical-align: middle !important;
}

.progress-green span {
    background-color: #28a745 !important;
}

.progress-blue span {
    background-color: #007bff !important;
}

.progress-warning span {
    background-color: #ffc107 !important;
}

.progress-light span {
    background-color: #e9ecef !important;
}

.status-green-pro span {
    background-color: #28a745 !important;
}

.status-blue-pro span {
    background-color: #007bff !important;
}

.status-light-pro span {
    background-color: #e9ecef !important;
    color: #6c757d !important;
}

.status-over-time-bar span {
    background-color: #dc3545 !important;
}

.status-complete {
    background-color: #28a745;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
}

.status-progress {
    background-color: #007bff;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
}

.status-not-started {
    background-color: #6c757d;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
}

.status-overtime {
    background-color: #dc3545;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
}
.task-progress-bar {
    position: relative;
    overflow: hidden;
}
.task-progress-bar span {
    min-width: 40px;    
    height: 100%;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}


/* new css */

.table-task-time {
    background: white;
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.table-task-time thead th {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    padding: 12px;
    border: none;
}

.table-task-time tbody td {
    padding: 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

.table-task-time tbody tr:hover {
    background-color: #f8f9fa;
}

.task-time-bar {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    cursor: pointer;
}

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

.task-time-bar:hover .task-tooltip {
    visibility: visible;
}

.circle-brand-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.project-name {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.badge {
    font-size: 11px;
    padding: 4px 10px;
    font-weight: 500;
}

.bg-high {
    background-color: #dc3545 !important;
}

.bg-medium {
    background-color: #ffc107 !important;
}

.bg-low {
    background-color: #28a745 !important;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    gap: 5px;
}

.pagination li {
    display: inline-block;
}

.pagination a,
.pagination span {
    display: block;
    padding: 8px 14px;
    color: #6052da;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
}

.pagination a:hover {
    background: #6052da;
    color: white;
    border-color: #6052da;
}

.pagination .active a,
.pagination .active span {
    background: #6052da;
    color: white;
    border-color: #6052da;
}

.pagination .disabled a,
.pagination .disabled span {
    color: #6c757d;
    background: #f8f9fa;
    border-color: #dee2e6;
    cursor: not-allowed;
}

.progress {
    background-color: #e9ecef;
}