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