/*# sourceMappingURL=custom.min.css.map */
html, body{
    height: 100%;
}
:root{
    --vz-vertical-menu-width: 250px;
    --vz-vertical-menu-width-md: 180px;
    --vz-vertical-menu-width-sm: 85px;
    --pr-status-purple: #5f55ee;
    --color-green: #008844;
    --color-yellow: #f8ae00;
    --color-pink: #ee5e99;
    --color-blue: #0e18a1;
    --color-purple: #5f55ee;
    --color-red: #d33d44;
    
    --text-color-green: #008844;
    --text-color-yellow: #f8ae00;
    --text-color-pink: #ee5e99;
    --text-color-blue: #0e18a1;
    --text-color-purple: #5f55ee;
    --text-color-red: #d33d44;

    /* Primary Colors */
    --vz-primary: #475be8;
    --vz-success: #399b5a;
    --vz-danger: #e63946;
    --vz-warning: #f4a261;
    --vz-info: #4aa8d8;
    --vz-purple: #6559cc;
    --vz-pink: #f672a7;

    /* RGB Values for Base Colors */
    --vz-primary-rgb: 71, 91, 232;
    --vz-success-rgb: 80, 200, 120;
    --vz-danger-rgb: 230, 57, 70;
    --vz-warning-rgb: 244, 162, 97;
    --vz-info-rgb: 74, 168, 216;
    --vz-purple-rgb: 101, 89, 204;
    --vz-pink-rgb: 246, 114, 167;

    /* Subtle Background Colors - 10% opacity of main color */
    --vz-primary-bg-subtle: rgba(var(--vz-primary-rgb), 0.1);
    --vz-success-bg-subtle: rgba(var(--vz-success-rgb), 0.1);
    --vz-danger-bg-subtle: rgba(var(--vz-danger-rgb), 0.1);
    --vz-warning-bg-subtle: rgba(var(--vz-warning-rgb), 0.1);
    --vz-info-bg-subtle: rgba(var(--vz-info-rgb), 0.1);
    --vz-purple-bg-subtle: rgba(var(--vz-purple-rgb), 0.1);
    --vz-pink-bg-subtle: rgba(var(--vz-pink-rgb), 0.1);

    /* Toast Colors */
    --toast-info-bg: var(--vz-info-bg-subtle);
    --toast-info-border: var(--vz-info);
    --toast-success-bg: var(--vz-success-bg-subtle);
    --toast-success-border: var(--vz-success);
    --toast-error-bg: var(--vz-danger-bg-subtle);
    --toast-error-border: var(--vz-danger);
}

:root, [data-bs-theme=light] {
    --vz-blue: #2563eb;
    --vz-indigo: #475be8;
    --vz-purple: #6559cc;
    --vz-pink: #f672a7;
    --vz-red: #e63946;
    --vz-orange: #f4a261;
    --vz-yellow: #f4a261;
    --vz-green: #50C878;
    --vz-teal: #3ba6dd;
    --vz-cyan: #4aa8d8;
    --vz-white: #fff;
    --vz-inverse: #ffff;
    --vz-black: #000;
    --vz-gray: #878a99;
    --vz-gray-dark: #343a40;
    --vz-gray-100: #f6f8fa;
    --vz-gray-200: #eff2f7;
    --vz-gray-300: #e9ebec;
    --vz-gray-400: #ced4da;
    --vz-gray-500: #adb5bd;
    --vz-gray-600: #878a99;
    --vz-gray-700: #495057;
    --vz-gray-800: #343a40;
    --vz-gray-900: #1e1e2e;

    /* Core Theme Colors */
    --vz-primary: #475be8;
    --vz-secondary: #3ba6dd;
    --vz-success: #50C878;
    --vz-info: #4aa8d8;
    --vz-warning: #f4a261;
    --vz-danger: #e63946;
    --vz-light: #f6f8fa;
    --vz-dark: #1e1e2e;

    /* RGB Values */
    --vz-primary-rgb: 71, 91, 232;
    --vz-secondary-rgb: 59, 166, 221;
    --vz-success-rgb: 80, 200, 120;
    --vz-info-rgb: 74, 168, 216;
    --vz-warning-rgb: 244, 162, 97;
    --vz-danger-rgb: 230, 57, 70;
    --vz-light-rgb: 246, 248, 250;
    --vz-dark-rgb: 30, 30, 46;

    /* Text Emphasis */
    --vz-primary-text-emphasis: #2e3a8c;
    --vz-secondary-text-emphasis: #2a71d0;
    --vz-success-text-emphasis: #2b9c64;
    --vz-info-text-emphasis: #1e7ca8;
    --vz-warning-text-emphasis: #c28a07;
    --vz-danger-text-emphasis: #b43d2d;
    --vz-light-text-emphasis: #bcc3cd;
    --vz-dark-text-emphasis: #2b2f36;

    /* Background Subtle */
    --vz-primary-bg-subtle: #e4e1f4;
    --vz-secondary-bg-subtle: #d8e8fc;
    --vz-success-bg-subtle: #d7f3e3;
    --vz-info-bg-subtle: #cceaf7;
    --vz-warning-bg-subtle: #fff2c2;
    --vz-danger-bg-subtle: #f7d1ce;
    --vz-light-bg-subtle: #f7f9fb;
    --vz-dark-bg-subtle: #d5d8dc;
    --vz-pink-bg-subtle: #f7d1ce;
    --vz-purple-bg-subtle: #e4e1f4;
    --vz-red-bg-subtle: #f7d1ce;
    --vz-orange-bg-subtle: #f4a261;
    --vz-yellow-bg-subtle: #f4a261;
    --vz-green-bg-subtle: #d7f3e3;
    --vz-teal-bg-subtle: #d8e8fc;
    --vz-cyan-bg-subtle: #cceaf7;
    --vz-white-bg-subtle: #f8f9fc;
    --vz-inverse-bg-subtle: #000;
    --vz-black-bg-subtle: #000;
    --vz-gray-bg-subtle: #e4e8ef;
    --vz-gray-dark-bg-subtle: #d5d8dc;
    --vz-gray-100-bg-subtle: #f6f8fa;
    --vz-gray-200-bg-subtle: #eff2f7;
    --vz-gray-300-bg-subtle: #e9ebec;
    --vz-gray-400-bg-subtle: #ced4da;
    --vz-gray-500-bg-subtle: #adb5bd;
    --vz-gray-600-bg-subtle: #878a99;
    --vz-gray-700-bg-subtle: #495057;
    --vz-gray-800-bg-subtle: #343a40;
    --vz-gray-900-bg-subtle: #1e1e2e;


    /* Borders */
    --vz-primary-border-subtle: #9ca8e0;
    --vz-secondary-border-subtle: #94c0f4;
    --vz-success-border-subtle: #94dbb6;
    --vz-info-border-subtle: #84cbe3;
    --vz-warning-border-subtle: #f2c361;
    --vz-danger-border-subtle: #e99b92;
    --vz-light-border-subtle: #e4e8ef;
    --vz-dark-border-subtle: #a3a7af;

    /* Typography & UI */
    --vz-body-color: #1b1c1e;
    --vz-body-bg: #f8f9fc;
    --vz-border-color: #e9ebec;
    --vz-border-radius: 0.15rem;
    --vz-font-sans-serif: "Inter", sans-serif;
    --vz-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --vz-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
    
}


[data-bs-theme=dark] {
    --vz-blue: #1e4db7;
    --vz-indigo: #3b46c4;
    --vz-purple: #5541c1;
    --vz-pink: #e05696;
    --vz-red: #d62839;
    --vz-orange: #dd8537;
    --vz-yellow: #c99e1f;
    --vz-green: #40b47f;
    --vz-teal: #2d8fad;
    --vz-cyan: #3d96c6;
    --vz-white: #ffffff;
    --vz-inverse: #000;
    --vz-black: #000000;
    --vz-gray: #b0b3c2;
    --vz-gray-dark: #6c757d;
    --vz-gray-100: #2e2e3a;
    --vz-gray-200: #393a45;
    --vz-gray-300: #454654;
    --vz-gray-400: #525461;
    --vz-gray-500: #6c757d;
    --vz-gray-600: #878a99;
    --vz-gray-700: #a4a6b3;
    --vz-gray-800: #c0c3cc;
    --vz-gray-900: #dee1e6;

    /* Core Theme Colors */
    --vz-primary: #475be8;
    --vz-secondary: #3ba6dd;
    --vz-success: #40b47f;
    --vz-info: #3d96c6;
    --vz-warning: #c99e1f;
    --vz-danger: #d62839;
    --vz-light: #2e2e3a;
    --vz-dark: #1e1e2e;

    /* RGB Values */
    --vz-primary-rgb: 71, 91, 232;
    --vz-secondary-rgb: 59, 166, 221;
    --vz-success-rgb: 64, 180, 127;
    --vz-info-rgb: 61, 150, 198;
    --vz-warning-rgb: 201, 158, 31;
    --vz-danger-rgb: 214, 40, 57;
    --vz-light-rgb: 46, 46, 58;
    --vz-dark-rgb: 30, 30, 46;

    /* Text Emphasis */
    --vz-primary-text-emphasis: #a2b2ff;
    --vz-secondary-text-emphasis: #8cc5e8;
    --vz-success-text-emphasis: #7ee6b6;
    --vz-info-text-emphasis: #72c8ec;
    --vz-warning-text-emphasis: #e8c77e;
    --vz-danger-text-emphasis: #f57373;
    --vz-light-text-emphasis: #c3c6d1;
    --vz-dark-text-emphasis: #e5e5e5;

    /* Background Subtle */
    --vz-primary-bg-subtle: #2b2f56;
    --vz-secondary-bg-subtle: #204c60;
    --vz-success-bg-subtle: #20583c;
    --vz-info-bg-subtle: #1f4e61;
    --vz-warning-bg-subtle: #65450f;
    --vz-danger-bg-subtle: #65262e;
    --vz-light-bg-subtle: #2e2e3a;
    --vz-dark-bg-subtle: #121217;
    --vz-pink-bg-subtle: #65262e;
    --vz-purple-bg-subtle: #2b2f56;
    --vz-red-bg-subtle: #65262e;
    --vz-orange-bg-subtle: #65450f;
    --vz-yellow-bg-subtle: #65450f;
    --vz-green-bg-subtle: #20583c;
    --vz-teal-bg-subtle: #204c60;
    --vz-cyan-bg-subtle: #1f4e61;
    --vz-white-bg-subtle: #2e2e3a;
    --vz-inverse-bg-subtle: #ffffff;
    --vz-black-bg-subtle: #000000;
    --vz-gray-bg-subtle: #2b2f56;
    --vz-gray-dark-bg-subtle: #121217;
    --vz-gray-100-bg-subtle: #2e2e3a;
    --vz-gray-200-bg-subtle: #393a45;
    --vz-gray-300-bg-subtle: #454654;
    --vz-gray-400-bg-subtle: #525461;
    --vz-gray-500-bg-subtle: #6c757d;
    --vz-gray-600-bg-subtle: #878a99;
    --vz-gray-700-bg-subtle: #a4a6b3;
    --vz-gray-800-bg-subtle: #c0c3cc;
    --vz-gray-900-bg-subtle: #dee1e6;

    /* Borders */
    --vz-primary-border-subtle: #3b46c4;
    --vz-secondary-border-subtle: #2d87b2;
    --vz-success-border-subtle: #2e996f;
    --vz-info-border-subtle: #2c7ba4;
    --vz-warning-border-subtle: #b48a1e;
    --vz-danger-border-subtle: #b32e3e;
    --vz-light-border-subtle: #3b3c4b;
    --vz-dark-border-subtle: #1a1b24;

    /* Typography & UI */
    --vz-body-color: #dee1e6;
    --vz-body-bg: #212121;
    --vz-border-color: #3b3c4b;
    --vz-border-radius: 0.25rem;
    --vz-font-sans-serif: "Inter", sans-serif;
    --vz-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --vz-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
}


.bg-purple{
    background-color: var(--vz-purple) !important;
}

.bg-pink{
    background-color: var(--vz-pink) !important;
}   
.bg-red{
    background-color: var(--vz-red) !important;
}
.bg-orange{
    background-color: var(--vz-orange) !important;
}
.bg-yellow{
    background-color: var(--vz-yellow) !important;
}
.bg-green{
    background-color: var(--vz-green) !important;
}
.bg-teal{
    background-color: var(--vz-teal) !important;
}
.bg-cyan{
    background-color: var(--vz-cyan) !important;
}
.bg-white{
    background-color: var(--vz-white) !important;
}
.bg-inverse{
    background-color: var(--vz-inverse) !important;
}


.toast-close{
    color:var(--vz-body-color);
}


.nav{
    --vz-nav-link-color: #3b3b3e;
}
.nav-tabs-custom .nav-item .nav-link::after{
    background-color: var(--vz-nav-link-color);
}
[data-bs-theme=dark] .nav{
    background-color: var(--vz-link-color);
    --vz-nav-link-color: #ced4da;
}
@media (min-width: 768px) {
    :is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] {
        min-height: auto;
    }
}

body{
    font-size:0.875em;
}
[data-bs-theme=light] body{
    background-color: #fff;
}
[data-bs-theme=light] .card{
    border:1px solid var(--vz-border-color);
}
.auth-page-content .card{
    border:none;
}
.page-content {
    padding: calc(40px + 1.5rem) calc(1.5rem* .5) 60px calc(1.5rem* .5);
}
.topbar-user {
    background-color: transparent !important;
}
.navbar-header{
    height:39px;
    padding:0;
}
.header-profile-user {
    width: 30px;
    height:30px;
}
.card{
    box-shadow: none;
    -webkit-box-shadow: none;
}
.table-card{
    margin:auto;
}

.table-card table th{
    font-weight: normal;
    font-size: 13px;
    white-space: nowrap;
}

.table-card table th.checkbox{
    width:40px;
}

.table-card table th.task-title, .table-card table td.task-title{
    width:640px;
}
.table-card table th.task-assignee{
    width:160px;
}
.table-card table th.task-due-date{
    width:140px;
}
.table-card table th.task-priority{
    width:110px;
}
.table-card table th.task-status{
    width:130px;
}
td.status-col{
    width:150px;
}
table.task-list td .assignee-fullname{
    text-overflow: ellipsis;
    overflow: hidden;
    max-width:100px;
    text-wrap: nowrap;
}
.avatar-sm{
    height:1.5rem;
    width:1.5rem;
}
.flatpickr-input[readonly]{
    background-color: transparent;
}
.ql-toolbar.ql-snow,.ql-container.ql-snow{
    border:none!important;
    padding: 0 !important;
}
.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button{
    padding: 1px 2px!important;
    height:18px!important;
}
header#page-topbar .ql-snow .ql-toolbar button{
    height:21px!important;
}
.bn-editor{
    padding-inline: 20px!important;
}
.bn-mantine .bn-side-menu{
    z-index: 1004!important;
    background:#333!important;
    border-radius: 5px!important;
}
#page-topbar .btn-check:checked+.btn, #page-topbar .btn.active, #page-topbar .btn.show, 
#page-topbar .btn:first-child:active, #page-topbar :not(.btn-check)+.btn:active{
    /* background-color: var(--vz-header-item-bg); */
}
#notesContainer p{
    margin-bottom:3px;
    word-break: break-all;
}
.assignee-name{
    display: inline-block;
    max-width: 90px;
    text-align: left;
}
.page-title-box .breadcrumb{
    margin-bottom: 0;
}
.breadcrumb a{
    color:var(--vz-vertical-menu-sub-item-color);
}
.breadcrumb:last-child::after{
    content:""!important;
}
.breadcrumb:last-child::after{
    margin-right: 0;
}
.breadcrumb::after{
    content:"\F0142";
    font-family: "Material Design Icons";
    font-size: 13px; 
    margin: 0 5px;
    color:var(--vz-vertical-menu-sub-item-color);
}
.btn{
    box-shadow: none;
    -webkit-box-shadow: none;
}
.card-title{
    font-size:15px;
}
.search-box{
    display: flex;
    align-items: center;
}

.search-box .form-control{
    padding:.25rem .9rem .25rem 30px;
}

.search-box .search-icon{
    top:auto;
    height:auto;
    align-items: center;
}

.search-box {
    position: relative;
}

.search-box .search-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vz-gray-600);
    font-size: 0.875rem;
}

/* #page-header-user-dropdown {
    border: solid 1px #e8e8e8;
    border-radius: 45px;
    padding: .25rem .5rem;
} */

.create-btn{
    border: solid 1px var(--vz-header-item-sub-color);
    border-radius: 45px;
    padding: .25rem .5rem;
} 


.empty-state {
    max-width:430px;
    align-items: center;
    text-align: center;
    flex:content;
}

.empty-state {
    padding: 2rem;
    margin: auto;
}

.empty-state-image {
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.empty-state:hover .empty-state-image {
    transform: scale(1.05);
}

.empty-state .btn {
    transition: all 0.3s ease;
}

.empty-state .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--vz-box-shadow-sm);
}

/* Project Empty State Animations */
.empty-state-image {
    width: 200px;
    height: 200px;
}

/* Folder hover effect */
.empty-state:hover .folder-base,
.empty-state:hover .folder-top {
    transform-origin: center;
    animation: folderBounce 1s ease-in-out;
}

/* Plus symbol animation */
.empty-state:hover .plus-symbol {
    animation: plusPulse 1.5s ease-in-out infinite;
}

/* Lines animation */
.empty-state:hover .line-1 {
    animation: lineSlide 1.5s ease-in-out infinite;
    animation-delay: 0.2s;
}

.empty-state:hover .line-2 {
    animation: lineSlide 1.5s ease-in-out infinite;
    animation-delay: 0.4s;
}

/* Animation keyframes */
@keyframes folderBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes plusPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.2);
        opacity: 0.8;
    }
}

@keyframes lineSlide {
    0% { transform: translateX(0); opacity: 0.3; }
    50% { transform: translateX(5px); opacity: 1; }
    100% { transform: translateX(0); opacity: 0.3; }
}

/* Improve empty state hover interaction */
.empty-state {
    transition: transform 0.3s ease;
}

.empty-state:hover {
    transform: translateY(-2px);
}

label.error {
    font-size:.85rem;
    color:#ff0000;
    font-weight: 400;
}

.toastify{
    background-color: var(--vz-secondary-bg);
    color:var(--vz-body-color);
}

.toastify::before{
    content: ""; 
    display: inline-block;
    width: 8px; 
    height: 8px; 
    border-radius: 50%;
    margin-right: 5px; 
}
.toast-error{
    background-color: var(--toast-error-bg) !important;
    border-left: 4px solid var(--toast-error-border) !important;
    color: var(--vz-danger) !important;
}

.toast-error::before{
    color: #b52525;
    width: auto!important;
    height: auto!important;
    content:"\F002A"!important;
    font-family:"Material Design Icons";
}
.toast-info{
    border-left: 4px solid var(--toast-info-border) !important;
    color: var(--vz-info) !important;
}
.toast-info::before{
    color: #007bff;
    width: auto!important;
    height: auto!important;
    content:"\F0E1E"!important;
    font-family:"Material Design Icons";
}
.toast-success{
    border-left: 4px solid var(--toast-success-border) !important;
    color: var(--vz-success) !important;
}

.toast-success::before{
    color: #4CAF50;
    width: auto!important;
    height: auto!important;
    content:"\F0E1E"!important;
    font-family:"Material Design Icons";
}

.toast-process{
    border: #0056A0 1px solid;
    border-left-width: 5px;
}
.toast-process::before{
    color: #0056A0;
    width: auto!important;
    height: auto!important;
    content:"\F1BA2"!important;
    font-family:"Material Design Icons";
}

.toast-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
}

.toast-button {
    transition: all 0.3s ease;
}

.toast-button:hover {
    transform: translateY(-1px);
}
.toastify-button {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.toastify-button:hover {
    background: rgba(255, 255, 255, 0.3);
}

.toastify-button i {
    font-size: 14px;
}

/* Button variants */
.toastify-button.btn-soft-success {
    background: rgba(21, 165, 43, 0.2);
}

.toastify-button.btn-soft-light {
    background: rgba(255, 255, 255, 0.2);
}

.card-border-default {
    border-color: #e4e4e4 !important;

}

.card-border-default .card-footer, .card-border-default .card-header {
    color: var(--vz-body-color) !important;
    background-color:var(--vz-header-item-sub-color);
}

.navbar-expand-lg.projectNavBar .navbar-nav .nav-link {
    padding-left:.75rem;
    padding-right: .75rem;
}

.navbar-expand-lg.projectNavBar .navbar-nav .nav-link.active {
    background:#eff2f7;
}

.navbar-menu .navbar-nav .nav-link{
    padding:0.4rem 1.3rem!important;
    font-size:0.875rem!important;
    position: relative;
    transition: all 0.3s ease;
}

:is([data-bs-theme = "light"]) .navbar-menu .navbar-nav .nav-link.active{
    background: #f2f2f7;
    color: #37352f;
    border-radius: 5px;
    font-weight: 500;
}
:is([data-bs-theme = "dark"]) .navbar-menu .navbar-nav .nav-link.active {
    border-radius: 5px;
    font-weight: 500;
}


.nav-tabs .nav-link {
    font-size:.9rem !important;
    color:rgb(102, 102, 102) !important;
}

.nav-tabs .ri {
    font-size: 1.1rem;
}

.bg-light.projectNavBar {
    background-color: #fff !important;
    border-top: solid 1px #e7e7e7;
    border-bottom: solid 1px #e7e7e7;
    padding: 0rem;
}


.projectNavBar .nav-link {
    font-size:.95rem !important;
    color:rgb(102, 102, 102) !important;
}

.projectNavBar .ri, .projectNavBar .mdi {
    font-size: 1.1rem;
}

#newTaskContentDiv {
    display: none;
}

.commenter-caret{
    margin-left:-30px;
    color:var(--vz-border-color)!important;
}

.collapsed .bx-caret-right {
    transform: rotate(0deg);
}

.bx-caret-right{
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.comment-card .card-header, .task-description-card .card-header,
.projects-card .card-header{
    /* background-color: #f3f6f9; */
    background-color:var(--vz-border-color);
    border-color: var(--vz-border-color);
}
[data-bs-theme=dark]
.ql-snow .ql-stroke{
    stroke:var(--vz-body-color);
}
[data-bs-theme=dark]
.ql-editor{
    background-color: var(--vz-body-bg);
    color:var(--vz-body-color);
}
[data-bs-theme=dark]
.ql-editor.ql-blank::before{
    color:var(--vz-body-color);
}
[data-bs-theme=dark]
.comment-avatar{
    background-color:#242528;
    border-radius: 42px;
}
[data-bs-theme=light]
.comment-avatar{
    background-color:#fff;
    border-radius: 42px;
    padding:5px;
}
.newTaskContentDiv .bx-calendar:before {
    font-size: 1.3rem;
}
.comment-avatar{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:2px;
    border:1px solid #ded8ff;
    max-width: 54px;
    max-height: 54px;
}

.comment-avatar img{
    border-radius: 42px;
}

.avatar-text{
    background-color:#4b38b3;
    color: #fff;
    display: flex;
    height:38px;
    width:38px;
    justify-content: center;
    align-items: center;
    border-radius: 38px;
    font-weight: 500;
}


.myTodaysTasks.table-bordered>:not(caption)>* {
    margin-bottom: .75rem;
    display: inline-flex;
    width: 100%;
    border-radius: 10px;
}

.myTodaysTasks.table-bordered>th, .myTodaysTasks.table-bordered>tr>* {
    border: none !important;
    border-width: 0 !important;
}

.sidebar-nav-bottom{
    position: absolute;
    bottom:0px;
}
.navbar-menu .navbar-nav .sidebar-projects li.nav-item a.nav-link{
    padding-top:0!important;
    padding-bottom:0!important;
    font-size: 13px!important;;
}
.navbar-menu .navbar-nav .sidebar-projects li.nav-item a.nav-link::before{
    top:8.5px;
}

.navbar-menu .navbar-nav .menu-dropdown{
    display: none;
    height: auto !important;
}
.navbar-menu .navbar-nav .nav-item:hover>.menu-dropdown{
    display: block;
    left: var(--vz-vertical-menu-width-sm);
    position: absolute;
    width: 200px;
    background: var(--vz-vertical-menu-bg);
    height: auto !important;
    padding: .5rem 0;
    border-radius: 0 0 3px 3px;
    -webkit-box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
    box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
    padding-left: 2.5rem;
}

.menu-dropdown .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.secondarybar {
    background-color: rgb(251 250 250);
    width: initial;
    min-width: 200px;
    min-height: 100px;
    inset: 70px 0px 0px 250px;
    max-width: 200px;
    height: initial;
    max-height: 100%;
    margin-right: auto;
    position: fixed;
    z-index: 1501;
    border-radius: 0px;
    opacity: 1;
    border: solid 1px #eee;
}

.twocolumn-content {
    margin:0 0 0 190px;
}

.profile-avatar img {
    border: solid 1px #eee;
    margin-bottom: 1rem;
}

.w-60{
    width: 60% !important;
}

.w-85{
    width: 85% !important;
}
.list-group-item.active{
    background-color: var(--vz-primary);
    border-color: var(--vz-primary);
    color: var(--vz-white);
}
.wiki-title{
    min-height: auto;
    width: auto;
}

.wiki-title:hover{
    border:1px solid;
    border-color: var(--vz-card-title-color);
}

.wiki-card{
    max-width: 1024px;
    margin:0 auto;
}
.wiki-list.list-group-item{
    padding-top:5px;
    padding-bottom:5px;
}
.link-btns{
    opacity: 0;
}

.link-card:hover .link-btns{
    opacity: 1;
}

.wiki-btns{
    opacity:0;
}

.wiki-item:hover .wiki-btns{
    opacity:1;
}

.revoke-btn{
    opacity: 0;
}

.invite:hover .revoke-btn{
    opacity:1;
}

#spinner-overlay {
    z-index: 10; /* Make sure it's on top of the table */
}

.auth-bg-cover{
    background: linear-gradient(-45deg, #4b38b3 50%, hsl(213, 56%, 53%));
}

.auth-one-bg .bg-overlay {
    background: -webkit-gradient(linear, left top, right top, from(#41319c), to(#4b38b3));
    background: linear-gradient(to right, #41319c, #4b38b3);
    opacity: .9;
}


.auth-one-bg {
    background-image: url(../images/pinrom-signup.png);
    background-position: center;
    background-size: cover;
}

.profile-menu {
    min-width:220px;
}
.dropdown-item{
    padding-left:0.6rem;
    padding-right:0.6rem;
}
li.dropdown-item{
    cursor:pointer;
    margin-bottom:0;
}
.dropdown-item a{
    padding:1px 10px;
}
.progress, .progress-stacked{
    --vz-progress-height:0.7rem;
}
.navbar-menu .navbar-nav .nav-sm .nav-link{
    font-size: 14px;
    padding-top: 0.3rem !important;;
}

.sidebar-nav{
    max-width:200px;
}

.project-nav:hover .add-project{
    transform:scale(1.2);
}

.header-item .icons{
    height: 45px;
}

.topbar-badge{
    top: 7px !important;
    right: -11px !important;
}

.navbar-header .btn-topbar{
    width:38px;
    height:38px;
}

#page-topbar{
    left:0;
}

@media (min-width: 768px){
    [data-layout=vertical]:is([data-sidebar-size=sm],[data-sidebar-size=sm-hover]) 
    #page-topbar {
        left:0;
    }
    [data-layout=vertical]:is([data-sidebar-size=sm],[data-sidebar-size=sm-hover]) 
    .navbar-menu{
        top:0;
    }
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-brand-box {
    position:relative;
    justify-content: center;
    padding:0 1.3rem 0.25rem 0;
    background-color: transparent;
} 
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=lg] .navbar-brand-box {
    padding-left:0 1.3rem 0.25rem;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu{
    padding-top:0;
    position: fixed;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu{
    padding-top:0;
    position: fixed;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-link i {
    font-size:18px;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .user-name,
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .user-name-arrow{
    display: none;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .logo span.logo-lg {
    
}

:is([data-bs-theme=light]) .navbar-menu{
    background: #f7f7f5;
    border-color:#00000006;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu.collapsed .navbar-nav .nav-item:hover>a.menu-link {
    width:auto;
    color:#5f5e5b;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover>a.menu-link span{
    padding-left:0;
    display: block;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover>.menu-dropdown{
    left:0;
    z-index: 2000;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item>a.menu-link {
    display: block;
    padding-right:0!important;
    padding-left:0!important;
    align-items: center;
    font-size: 12px!important;
    text-align: center;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-link span{
    display: block;
}

.navbar-menu{
    top:40px;
    z-index: 999;
}
.page-title-box .topnav-hamburger{
    display: none;
    padding-left:0;
}
.page-title-box .topnav-hamburger.open{
    display: inline-block!important;
}
.page-title-box .nav-tabs-custom .nav-item .nav-link.active{
    color: var(--vz-body-color);
}
.hamburger-icon{
    display: flex;
    align-items: center;
}
.hamburger-icon.open{
    -webkit-transform: none!important;
    transform: none!important;
}

.logo.header-item{
    line-height: 21px;
}
.logo .logo-sm{
    display: inline-block;
    margin-right: 5px;
}
:is([data-layout=vertical],[data-layout=semibox]) .horizontal-logo{
    display: flex;
}
:is([data-layout=vertical],[data-layout=semibox])[data-topbar=dark] .logo-light {
    display: inline-block;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar=light][data-topbar=dark] .logo-dark {
    display: none;
}
/* :is([data-layout=vertical],[data-layout=semibox],[data-bs-theme=dark])[data-topbar=dark] .logo-light {
    display: inline-block;
}
:is([data-layout=vertical],[data-layout=semibox],[data-bs-theme=light])[data-topbar=dark] .logo-dark {
    display: inline-block;
} 
:is([data-layout=vertical],[data-layout=semibox],[data-bs-theme=dark]) .logo-light {
    display: none;
}
:is([data-layout=vertical],[data-layout=semibox],[data-bs-theme=light]) .logo-light {
    display: none;
}
:is([data-layout=vertical],[data-layout=semibox],[data-bs-theme=light]) .logo-dark {
    display: inline-block;
}
:is([data-layout=vertical],[data-layout=semibox],[data-bs-theme=dark]) .logo-dark {
    display: none;
} */

.page-title-box{
    display: flex;
    padding:0 1.3rem;
    border-bottom: var(--vz-border-width) var(--vz-border-style) var(--vz-border-color) !important;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin-top:-24px;
}

.page-subtitle-box{
    height:auto;
    padding:0 1.3rem 0.25rem;
    align-items: center;
}
.page-title-box .d-flex{
    align-items: center;
}
.page-title-box .btn-sm{
    max-height:30px;
    align-items: center;
}

.page-title-box h4{
    text-transform: none;
    font-weight: normal;
    font-size: 14px;
}

.project-title{
    cursor: pointer;
    width:fit-content!important;
    border-color:var(--vz-white);
    font-size:1rem;
    font-weight: 600;
}

.project-title.edit{
    cursor:text!important;
    border-color:var(--vz-gray-dark);
    width: 350px!important;
    pointer-events: auto; 
}

.page-title-box p{
    margin-top:auto;
    margin-bottom:auto;
}

/* .navbar-menu .btn-vertical-sm-hover {
    display: inline-block;
    color: var(--vz-vertical-menu-item-color);
} */

@media (min-width: 768px) {
    [data-layout=vertical]:is([data-sidebar-size=sm],[data-sidebar-size=sm-hover]) .navbar-menu {
        top:40px;
        padding-right:2px;
        padding-left:2px;
    }
}

.navbar-brand-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--vz-border-width) var(--vz-border-style) var(--vz-border-color) !important;
}

.brand-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: 0 0.65rem;
    text-align: center;
}

[data-bs-theme=dark][data-sidebar=light] {
    --vz-vertical-menu-bg: #212529;
    --vz-vertical-menu-border: #212529;
    --vz-vertical-menu-item-color: #7c7f90;
    --vz-vertical-menu-item-bg: rgba(255, 255, 255, 0.15);
    --vz-vertical-menu-item-hover-color: #fff;
    --vz-vertical-menu-item-active-color: #fff;
    --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.15);
    --vz-vertical-menu-sub-item-color: #7c7f90;
    --vz-vertical-menu-sub-item-hover-color: #fff;
    --vz-vertical-menu-sub-item-active-color: #fff;
    --vz-vertical-menu-title-color: #5f6270;
    --vz-twocolumn-menu-iconview-bg: #292e32;
  }

  :root {
    --vz-vertical-menu-bg: #fffcf5;
    --vz-vertical-menu-border: #e0dbcf;
    --vz-vertical-menu-item-color: #6d7080;
    --vz-vertical-menu-item-bg: rgba(75, 56, 179, 0.15);
    --vz-vertical-menu-item-hover-color: #4b38b3;
    --vz-vertical-menu-item-active-color: #4b38b3;
    --vz-vertical-menu-item-active-bg: rgba(75, 56, 179, 0.15);
    --vz-vertical-menu-sub-item-color: #7c7f90;
    --vz-vertical-menu-sub-item-hover-color: #4b38b3;
    --vz-vertical-menu-sub-item-active-color: #4b38b3;
    --vz-vertical-menu-title-color: #919da9;
    --vz-vertical-menu-box-shadow: none;
    --vz-vertical-menu-dropdown-box-shadow: none;
  }

  .header-item{
    height:40px;
  }

  .quick-task-control {
        padding: .2rem;
        border: solid 1px #eee;
  }

  .remove-link-btn {
    cursor: pointer;
  }

  #searchResults {
    position: absolute;
    top: 49%;
    left: 7.3%;
    width: 500px;
    height: auto;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
}

#task-assignee .assignee{
    float:left!important;
}
ul#subtasks li{
    min-height: 33px;
    padding-left:5px;
}
ul#subtasks li:hover .subtask-meta{
    opacity: 1;
}
ul#subtasks li:hover,
ul#subtasks li.hover-active{
    background-color: var(--vz-border-color);
}
.btn-subtask{
    width: fit-content;
}
.assignee-lg-display{
    display:flex;
    align-items:center;
}
.assignee-avatar{
    text-align: center;
    color: #fff!important;
    display: flex; 
    align-items:center;
    justify-content:center
}
.assignee-avatar-text {
    background-color: #4b38b3;
}
.pr-rounded-20{
    height:20px;
    width:20px;
    border-radius:20px;
    font-size:11px;
}
.pr-rounded-20 img{
    width:20px;
    height:20px;
    border-radius:20px;
}
.pr-rounded-25{
    height:25px;
    width:25px;
    border-radius:25px;
    font-size:11px!important;
}
.pr-rounded-25 img{
    width:25px;
    height:25px;
    border-radius:25px;
}
.pr-rounded-30{
    height:30px;
    width:30px;
    border-radius:30px;
}
.pr-rounded-30 img{
    width:30px;
    height:30px;
    border-radius:30px;
}
.pr-rounded-40{
    height:40px;
    width:40px;
    border-radius:40px;
}
.pr-rounded-40 img{
    width:40px;
    height:40px;
    border-radius:40px;
}
.unassigned{
    background-color: var(--vz-gray-500)!important;
    display: flex; 
    align-items:center;
    justify-content:center
}
.task-title-block:hover .edit-title-btn{
    display: block!important;
}
.task-title-block.editing:hover .edit-title-btn{
    display: none!important;
}
.task-info-section{
    display: flex;
    align-items: center;
    padding-right: .25rem !important;
    padding-left: .25rem !important;
}
.task-icon{
    /* border: 1px solid var(--vz-border-color);
    padding:0.5rem 1.5rem; */
    margin-right:1.5rem;
}
.task-icon:hover, .task-icon:active{
    /* border: 2px solid var(--vz-border-color); */
}
.task-icon .badge{
    margin-right:-10px;
}
.task-icon::after{
    width: 8px; 
    height: 8px; 
    border-radius: 50%;
    margin-right: 5px; 
}
.task-icon .badge{
    font-size: 10px;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    top:-10px;
    left:-10px;
}
.big-icon{
    font-size:24px;
    font-weight: 400;
}
.task-info-count-badge{
    font-size: 12px;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
}
.task-info-icons{
    display: flex;
    align-items: center;
    padding-right: .25rem !important;
    padding-left: .25rem !important;
}
.project-title-block:hover .edit-title-btn{
    display: block!important;
}
.project-title-block.editing:hover .edit-title-btn{
    display: none!important;
}
.task-description-card:hover .edit-description-btn{
    display: block!important;
}
.task-description-card.editing:hover .edit-description-btn{
    display: none!important;
}
.assignee div.assignee-name{
    color:#fff;
    text-align: center;
}
.pr-rounded-25 div.assignee-name{
    font-size:10px!important;
}
.pr-rounded-30 div.assignee-name{
    font-size:12px!important;
}
.pr-rounded-40 div.assignee-name{
    font-size:14px!important;
}
.subtask-title{
    width:230px
}
.subtask-assignee{
    width:33px;
}
.subtask-priorit{
    width:25px;
}

table.task-list{
    margin-bottom:0;
}
.btn-status a{
    background-color: transparent; 
    padding-left:7px;
}
.status{
    padding:3px 5px 3px 4px;
    font-size:13px;
    border-radius: var(--vz-border-radius);
    font-weight: 500;
    display: inline-flex; 
    align-items: center;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.status-dot.color-blue { background-color: var(--vz-blue); }
.status-dot.color-red { background-color: var(--vz-red); }
.status-dot.color-green { background-color: var(--vz-success); }
.status-dot.color-brown { background-color: var(--vz-brown); }
.status-dot.color-grey { background-color: var(--vz-secondary); }
.status-dot.color-yellow { background-color: var(--vz-warning); }
.status-dot.color-neon-blue { background-color: var(--vz-info); }
.status-dot.default-color { background-color: var(--vz-gray-500); }

.dropdown-item {
    cursor: pointer;

}

.dropdown-item:hover .status-dot {
    opacity: 0.8;
}
.status-onhold{
    color: #f06548; 
    background-color: #FFF8E1;
    border:1px solid #ffcfc5;
}
.status-onhold::before {
    background-color: #f06548; 
    color: #f06548; 
}
.status-cancelled{
    color: #feb8b8; 
    background-color: #b52525;
    border:1px solid #d44949;
}
.status-cancelled::before {
    color: #feb8b8;
    width: auto!important;
    height: auto!important;
    content:"\F073A"!important;
    font-family:"Material Design Icons";
}

.status-list{
    padding: 0;
}
.status-list li.status-form{
    justify-content: space-between;
    padding: 0px;
    border:none!important;
}
.drag-icon{
    cursor: move;
}
.drag-icon.closed{
    cursor:not-allowed;
    opacity: 0.5;
}
.status-list li{
    position:relative;  
    display: flex;
    align-items: center;
    padding:5px;
    border:1px solid var(--vz-border-color);
    border-radius: 5px;
    margin-bottom: 5px;
}

.status-list li .selected-color-dot{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    margin-left:5px;
    margin-right:5px;
}

.status-list li .selected-color-dot::after {
    width: 13px;
    height: 13px;
    border: 1px solid currentColor; 
    background-color: transparent; 
    left: 0px; 
    position: absolute; 
    top:2px;
}

.status-list li .selected-color-dot::before,
.status-list li .selected-color-dot::after {
    content: ''; 
    display: inline-block;
    border-radius: 50%; 
    flex-shrink: 0; 
    position:absolute;
}

.status-list li .selected-color-dot::before {
    width: 7px;
    height: 7px;
    background-color: currentColor;
    left:3px;
    top:5px;
}
.status-list li .selected-color-dot.color-red::before {
    background-color: var(--pr-status-red, #e03e3e);
}
.status-list li .selected-color-dot.color-red::after {
    border-color: var(--pr-status-red, #e03e3e);
}
.status-list li .selected-color-dot.color-orange::before {
    background-color: var(--pr-status-orange, #f57c00);
}
.status-list li .selected-color-dot.color-orange::after {
    border-color: var(--pr-status-orange, #f57c00);
}
.status-list li .selected-color-dot.color-yellow::before {
    background-color: var(--pr-status-yellow, #fbc02d);
}
.status-list li .selected-color-dot.color-yellow::after {
    border-color: var(--pr-status-yellow, #fbc02d);
}
.status-list li .selected-color-dot.color-green::before {
    background-color: var(--pr-status-green, #2e7d32);
}
.status-list li .selected-color-dot.color-green::after {
    border-color: var(--pr-status-green, #2e7d32);
}
.status-list li .selected-color-dot.color-blue::before {
    background-color: var(--pr-status-blue, #1565c0);
}
.status-list li .selected-color-dot.color-blue::after {
    border-color: var(--pr-status-blue, #1565c0);
}
.status-list li .selected-color-dot.color-purple::before {
    background-color: var(--pr-status-purple, #7e57c2);
}
.status-list li .selected-color-dot.color-purple::after {
    border-color: var(--pr-status-purple, #7e57c2);
}
.status-list li .selected-color-dot.color-pink::before {
    background-color: var(--pr-status-pink, #ec407a);
}
.status-list li .selected-color-dot.color-pink::after {
    border-color: var(--pr-status-pink, #ec407a);
}
.status-list li .selected-color-dot.color-brown::before {
    background-color: var(--pr-status-brown, #8d6e63);
}
.status-list li .selected-color-dot.color-brown::after {
    border-color: var(--pr-status-brown, #8d6e63);
}
.status-list li .selected-color-dot.color-grey::before {
    background-color: var(--pr-status-grey, #607d8b);
}
.status-list li .selected-color-dot.color-grey::after {
    border-color: var(--pr-status-grey, #607d8b);
}
.status-list li .selected-color-dot.color-neon-blue::before {
    background-color: var(--pr-status-neon-blue, #448aff);
}
.status-list li .selected-color-dot.color-neon-blue::after {
    border-color: var(--pr-status-neon-blue, #448aff);
}
.status-list li .selected-color-dot.color-azure-blue::before {
    background-color: var(--pr-status-azure-blue, #1e88e5);
}
.status-list li .selected-color-dot.color-azure-blue::after {
    border-color: var(--pr-status-azure-blue, #1e88e5);
}
.status-list li .selected-color-dot.color-teal::before {
    background-color: var(--pr-status-teal, #00897b);
}
.status-list li .selected-color-dot.color-teal::after {
    border-color: var(--pr-status-teal, #00897b);
}
.status-list li .selected-color-dot.color-mint::before {
    background-color: var(--pr-status-mint, #26a69a);
}
.status-list li .selected-color-dot.color-mint::after {
    border-color: var(--pr-status-mint, #26a69a);
}
.status-list li .selected-color-dot.color-violet::before {
    background-color: var(--pr-status-violet, #ab47bc);
}
.status-list li .selected-color-dot.color-violet::after {
    border-color: var(--pr-status-violet, #ab47bc);
}
/* .status-list li .selected-color-dot.color-red::before {
    background-color: var(--pr-status-red, #d33d44);
}
.status-list li .selected-color-dot.color-red::after {
    border-color: var(--pr-status-red, #d33d44);
}
.status-list li .selected-color-dot.color-orange::before{
    background-color: var(--pr-status-orange, #e16b16);
}
.status-list li .selected-color-dot.color-orange::after {
    border-color: var(--pr-status-orange, #e16b16); 
}
.status-list li .selected-color-dot.color-yellow::before{
    background-color: var(--pr-status-yellow, #f8ae00);
}
.status-list li .selected-color-dot.color-yellow::after {
    border-color: var(--pr-status-yellow, #f8ae00);
}
.status-list li .selected-color-dot.color-green::before{
    background-color: var(--pr-status-green, #008844);
}
.status-list li .selected-color-dot.color-green::after {
    border-color: var(--pr-status-green, #008844);
}
.status-list li .selected-color-dot.color-blue::before{
    background-color: var(--pr-status-blue, #0e18a1);
}
.status-list li .selected-color-dot.color-blue::after {
    border-color: var(--pr-status-blue, #0e18a1);
}
.status-list li .selected-color-dot.color-purple::before{
    background-color: var(--pr-status-purple, #5f55ee);
}
.status-list li .selected-color-dot.color-purple::after {
    border-color: var(--pr-status-purple, #5f55ee);
}
.status-list li .selected-color-dot.color-pink::before{
    background-color: var(--pr-status-pink, #ee5e99);
}
.status-list li .selected-color-dot.color-pink::after {
    border-color: var(--pr-status-pink, #ee5e99);
}
.status-list li .selected-color-dot.color-brown::before{
    background-color: var(--pr-status-brown, #aa8d80);
}
.status-list li .selected-color-dot.color-brown::after {
    
}
.status-list li .selected-color-dot.color-grey::before{
    background-color: var(--pr-status-grey, #656f7d);
}
.status-list li .selected-color-dot.color-grey::after {
    
}
.status-list li .selected-color-dot.color-neon-blue::before {
    background-color: var(--pr-status-neon-blue, #4466ff);
}
.status-list li .selected-color-dot.color-neon-blue::after {
    border-color: var(--pr-status-neon-blue, #4466ff);
}
.status-list li .selected-color-dot.color-azure-blue::before{
    background-color: var(--pr-status-azure-blue, #1090e0);
}
.status-list li .selected-color-dot.color-azure-blue::after {
    border-color: var(--pr-status-azure-blue, #1090e0);
}
.status-list li .selected-color-dot.color-teal::before{
    background-color: var(--pr-status-teal, #0f9d9f);
}
.status-list li .selected-color-dot.color-teal::after {
    border-color: var(--pr-status-teal, #0f9d9f);
}
.status-list li .selected-color-dot.color-mint::before{
    background-color: var(--pr-status-mint, #3db88b);
}
.status-list li .selected-color-dot.color-mint::after {
    border-color: var(--pr-status-mint, #3db88b);
}
.status-list li .selected-color-dot.color-violet::before{
    background-color: var(--pr-status-violet, #b660e0);
}
.status-list li .selected-color-dot.color-violet::after {
    border-color: var(--pr-status-violet, #b660e0);
} */

.color-display {
    display: inline-flex;
    align-items: center;
    gap: 5px; 
    color: inherit; 
    position: relative; 
    padding-left: 9px;
}

.color-display::before,
.color-display::after {
    content: ''; 
    display: inline-block;
    border-radius: 50%; 
    flex-shrink: 0; 
}

.color-display::before{
    width: 6px;
    height: 6px;
    background-color: currentColor; /* Matches text color */
    margin-right:.15rem;
}


.color-display::after {
    width: 14px;
    height: 14px;
    border: 1px solid currentColor; /* Matches text color */
    background-color: transparent; /* Transparent circle */
    left: 2px; /* Adjust to position it before text */
    position: absolute; /* Ensure layout independence */
}

.dropdown-toggle::after {
    font-size: 12px !important;
}

.color-picker-container {
    position: relative;
    display: inline-block;
}

/* .selected-color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ccc;
} */


.color-dropdown {
    position: absolute;
    background-color: var(--vz-body-bg);
    border: 1px solid var(--vz-border-color);
    z-index: 1;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    width: 200px;
}

.color-option {
    display: inline-flex;
    align-items: center;
}

.color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.color-radio {
    display: none;
}

.color-radio:checked + .color-dot::after {
    content: '✔';
    color: white;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Purple */
.color-option .color-purple, .task-count-color-purple {
    background-color: var(--pr-status-purple, #5f55ee);
    color: white; /* High contrast for readability */
}

/* Neon Blue */
.color-option .color-neon-blue, .task-count-color-neon-blue {
    background-color: var(--pr-status-neon-blue, #4466ff);
    color: white;
}

/* Azure Blue */
.color-option .color-azure-blue, .task-count-color-azure-blue {
    background-color: var(--pr-status-azure-blue, #1090e0);
    color: white;
}

/* Teal */
.color-option .color-teal, .task-count-color-teal {
    background-color: var(--pr-status-teal, #0f9d9f);
    color: white;
}

/* Mint */
.color-option .color-mint, .task-count-color-mint {
    background-color: var(--pr-status-mint, #3db88b);
    color: white;
}

/* Green */
.color-option .color-green, .task-count-color-green {
    background-color: var(--pr-status-green, #008844);
    color: white;
}

/* Yellow */
.color-option .color-yellow, .task-count-color-yellow {
    background-color: var(--pr-status-yellow, #f8ae00);
    color: black; /* Dark text for light background */
}

/* Orange */
.color-option .color-orange, .task-count-color-orange {
    background-color: var(--pr-status-orange, #e16b16);
    color: white;
}

/* Red */
.color-option .color-red, .task-count-color-red  {
    background-color: var(--pr-status-red, #d33d44);
    color: white;
}

/* Blue */
.color-option .color-blue, .task-count-color-blue {
    background-color: var(--pr-status-blue, #0e18a1);
    color: white;
}

/* Pink */
.color-option .color-pink, .task-count-color-pink {
    background-color: var(--pr-status-pink, #ee5e99);
    color: white;
}

/* Violet */
.color-option .color-violet, .task-count-color-violet {
    background-color: var(--pr-status-violet, #b660e0);
    color: white;
}

/* Brown */
.color-option .color-brown, .task-count-color-brown {
    background-color: var(--pr-status-brown, #aa8d80);
    color: white;
}

/* Grey */
.color-option .color-grey, .task-count-color-grey {
    background-color: var(--pr-status-grey, #656f7d);
    color: white;
}


.color-option {
    display: inline-flex;
    align-items: center;
}

.color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.color-radio {
    display: none;
}

.color-radio:checked + .color-dot::after {
    content: '✔';
    color: white;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Refreshed Colors */

/* Purple */
.color-option .color-purple, .task-count-color-purple {
    background-color: var(--pr-status-purple, #7e57c2);
    color: white;
}

/* Neon Blue */
.color-option .color-neon-blue, .task-count-color-neon-blue {
    background-color: var(--pr-status-neon-blue, #448aff);
    color: white;
}

/* Azure Blue */
.color-option .color-azure-blue, .task-count-color-azure-blue {
    background-color: var(--pr-status-azure-blue, #1e88e5);
    color: white;
}

/* Teal */
.color-option .color-teal, .task-count-color-teal {
    background-color: var(--pr-status-teal, #00897b);
    color: white;
}

/* Mint */
.color-option .color-mint, .task-count-color-mint {
    background-color: var(--pr-status-mint, #26a69a);
    color: white;
}

/* Green */
.color-option .color-green, .task-count-color-green {
    background-color: var(--pr-status-green, #2e7d32);
    color: white;
}

/* Yellow */
.color-option .color-yellow, .task-count-color-yellow {
    background-color: var(--pr-status-yellow, #fbc02d);
    color: black;
}

/* Orange */
.color-option .color-orange, .task-count-color-orange {
    background-color: var(--pr-status-orange, #f57c00);
    color: white;
}

/* Red */
.color-option .color-red, .task-count-color-red {
    background-color: var(--pr-status-red, #e03e3e);
    color: white;
}

/* Blue */
.color-option .color-blue, .task-count-color-blue {
    background-color: var(--pr-status-blue, #1565c0);
    color: white;
}

/* Pink */
.color-option .color-pink, .task-count-color-pink {
    background-color: var(--pr-status-pink, #ec407a);
    color: white;
}

/* Violet */
.color-option .color-violet, .task-count-color-violet {
    background-color: var(--pr-status-violet, #ab47bc);
    color: white;
}

/* Brown */
.color-option .color-brown, .task-count-color-brown {
    background-color: var(--pr-status-brown, #8d6e63);
    color: white;
}

/* Grey */
.color-option .color-grey, .task-count-color-grey {
    background-color: var(--pr-status-grey, #607d8b);
    color: white;
}




li.dropdown-item.btn-status a, li.dropdown-item.btn-priority a{
    border:none;
    color:var(--vz-body-color);
    padding:1px 5px;
}

.priority{
    padding:2px 5px 2px 4px;
    font-size:13px;
    border-radius: var(--vz-border-radius);
    font-weight: 500;
    display: inline-flex; 
    align-items: center;
}
.priority::before, .btn-priority a::before {
    content:"\F0240";
    font-family: "Material Design Icons";
    font-size: 13px; 
    margin-right: 3px;
}
.btn-priority a.priority-low, .btn-priority a.priority-normal, 
.btn-priority a.priority-high, .btn-priority a.priority-urgent{
    background-color: transparent;

}
.priority-urgent{
    color:#f06548;
    background-color:#ffe9e4;
    border:1px solid #ffcfc5;
}
.priority-urgent::before{
    color:#f06548;
}
.priority-normal{
    color: #299cdb; 
    background-color: #dcf3ff;
    border:1px solid #a6e0ff;
}
.priority-normal::before{
    color: #299cdb; 
}
.priority-high{
    color: #4b38b3; 
    background-color: #cdc5fe;
    border:1px solid #b5a8ff;
}
.priority-high::before{
    color: #4b38b3; 
}
.priority-low{
    background-color: #F4F4F4;
    color: #555555;
    border:1px solid #ccc;
}
.priority-low::before{
    color: #555555; 
}

.recurrencePatternTypeDiv,.untilDateDiv {
    display:none;
}


tr.unread td {
    font-weight: 600;
}

#notificationsList tr {
    cursor: pointer;
}

#notificationsList tr:hover {
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #f7f7f5 !important;
    border: 1px solid #cccccc !important;
    color:#555555 !important;
}
.select2.select2-container{
    font-size:0.875rem;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    font-size: .875rem !important;
    border-radius: .40rem !important;
    height: auto;
    min-height: auto;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    width: .50rem !important;
    min-height:auto;
}


/* Dragula-specific styles */
.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 0.8;
    background-color: var(--vz-secondary-bg);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.gu-hide {
    display: none !important;
}

.gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.gu-transit {
    opacity: 0.2;
    background-color: var(--vz-secondary-bg);
}

/* Improve kanban board visualization */
.tasks-board {
    overflow-x: auto;
    padding: 1rem;
    min-height: calc(100vh - 100px);
}

.tasks-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--vz-gray-400) transparent;
}

.tasks-wrapper::-webkit-scrollbar {
    width: 4px;
}

.tasks-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--vz-gray-400);
    border-radius: 4px;
}

/* Animate new tasks */
.tasks-box {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.kanban-board {
    min-height: 600px;
}

.kanban-col {
    min-height: 580px;
    transition: background-color 0.2s ease;
    max-width:300px;
}
/* Minimized column styles */
.kanban-col.minimized {
    width: 10px; 
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0; 
    border: 1px solid #ccc; 
    margin-right: 20px;
    flex: 0 1 50px;
}

.kanban-col.minimized .tasks-list {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: auto;
    margin-right: 0!important;;
}

.kanban-col.minimized .tasks-list .task-card {
    display: none; /* Hide task cards in minimized view */
}
.kanban-col.minimized .add-board-task{
    display: none; 
}
.kanban-col.minimized .vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    text-align: center;
    margin:0;
    position:relative;
    font-size: 12px; /* Adjust font size as needed */
    font-weight: bold;
    color: #333; /* Adjust text color as needed */
    cursor: pointer; /* Indicate that the text is clickable */
}

.kanban-col.minimized .tasks-wrapper {
    display: none; /* Hide tasks in minimized view */
}

.minimize-btn {
    border: none;
    cursor: pointer;
}

.kanban-col.minimized .minimize-btn {
    display: none!important; 
}
.tasks-board .tasks-list{
    margin-right:inherit!important;
}
.tasks-wrapper{
    background-color: #f7f7f5;
    padding-bottom: 0.5rem;
    border-radius: 5px;
    margin-right:0.5rem;
    font-size:13px;
}
.tasks-box{
    margin:0.5rem;
    border-radius: 5px;
}
.tasks-box a.priority{
    padding:0px 2px;
}
.tasks-box a.priority
, .tasks-box a.priority::before{
    font-size:12px;
}
.kanban-col.gu-over {
    background-color: var(--vz-header-item-bg) !important;
}

.task-card.gu-mirror {
    transform: rotate(3deg);
    cursor: grabbing;
}

.task-card {
    transition: all 0.3s ease;
    border: 1px solid var(--vz-border-color);
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--vz-box-shadow-sm);
}

.task-card .card-title {
    line-height: 1.2;
}

.task-card .avatar-xxs {
    width: 24px;
    height: 24px;
}

.task-card .badge {
    font-weight: 500;
}

.subtask-row {
    background-color:#fffef1 !important;
}

/* Initially hide the subTaskCount span */
.subTaskCount {
    display: none;
}

/* Show the subTaskCount span on hover of the parent <tr> */
tr:hover .subTaskCount {
    display: inline;
}

/* Style the subtask row */

.subtask-row td {
    padding-left: 20px;
}


/* Subtask Line: Creates the L-shaped border */
tr.subtask-row td:first-child a::before{
    content:"";
    padding-left:15px;
    position: relative;
    display: inline-flex;
    width: 15px; /* Horizontal length */
    height: 20px; /* Vertical length */
    border-left: 1px solid #ccc; /* Vertical line */
    border-bottom: 1px solid #ccc; /* Horizontal line */
    margin-right: 5px; /* Spacing between line and text */
    top: -12px;
    left: 2px;
    border-radius: 0 0 0 3px;
}

.tasks-wrapper{
    max-height: calc(100vh - 118px)!important;
}


#recentFeatureUpdates .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #f3f0ff;
    color: #000;
    box-shadow: none !important;
}
#recentFeatureUpdates .nav-pills .nav-link {
    text-align: left;
}

#recentFeatureUpdates .nav-link span.update-date {
    font-size: 12px;
    color: #6c757d;
}

#recentFeatureUpdates .nav-pills {
    padding-right: .75rem;
    border-right: solid 1px #e9ebec;
}

#myNotesModal .nav-pills {
    padding-right: .75rem;
    border-right: solid 1px #e9ebec;
}

#myNotesModal .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #f3f0ff;
    color: #000;
    box-shadow: none !important;
}
#myNotesModal .nav-pills .nav-link {
    text-align: left;
}

#myNotesModal .nav-link span.update-date {
    font-size: 12px;
    color: #6c757d;
}

/* Notes Modal Styles */
.notes-sidebar .nav-pills .nav-link {
    padding: 0.75rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    text-align: left;
    background: var(--vz-light);
    border: 1px solid var(--vz-border-color);
}

.notes-sidebar .nav-pills .nav-link.active {
    background: var(--vz-primary-bg-subtle);
    color: var(--vz-primary);
    border-color: var(--vz-primary-border-subtle);
}

.notes-content .note-card {
    border: 1px solid var(--vz-border-color);
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

.notes-content .note-card:last-child {
    margin-bottom: 0;
}

/* Notes Tab Styles */
.notes-sidebar .nav-link {
    padding: 0.75rem;
    border-radius: 0.25rem;
    margin-bottom: 0.25rem;
    width: 100%;
    max-width: 100%;
}

.notes-sidebar .note-tab-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.notes-sidebar .note-title {
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--vz-body-color);
    max-width: 100%;
}

.notes-sidebar .note-time {
    font-size: 0.75rem;
    color: var(--vz-text-muted);
    display: block;
}

.notes-sidebar .nav-link.active {
    background-color: var(--vz-primary-bg-subtle);
    border-color: var(--vz-primary-border-subtle);
}

.notes-sidebar .nav-link.active .note-title {
    color: var(--vz-primary);
}

/* SimpleBar Custom Styles */
.simplebar-scrollbar:before {
    background: var(--vz-primary);
}

/*** responsive ****/


/* Mobile Breakpoint */
@media (max-width: 576px) {
    .logo.header-item {
        padding-right: 0.25rem;
    }

    .logo .logo-sm {
        height: 22px;
    }

    .logo .logo-lg {
        height: 22px;
    }

    .brand-box {
        padding: 0 0.4rem;
    }

    .btn-text{
        display:none;
    }
    
    :is([data-layout=vertical],[data-layout=semibox]) .navbar-brand-box {
        display: flex!important;
    }
}

/* Tablet Breakpoint */
@media (min-width: 577px) and (max-width: 991px) {
    .logo.header-item {
        padding-right: 0.4rem;
    }

    .logo .logo-sm {
        height: 24px;
    }

    .logo .logo-lg {
        height: 24px;
    }
}

/* Handle logo visibility */
:is([data-layout=vertical],[data-layout=semibox]) .horizontal-logo {
    display: flex;
    align-items: center;
}

:is([data-layout=vertical],[data-layout=semibox])[data-topbar=dark] .logo-light {
    display: inline-block;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar=light][data-topbar=dark] .logo-dark {
    display: none;
}


@media (max-width: 576px) {
    .navbar-brand-box {
        min-width: auto;
        padding: 0 0.5rem;
    }
    .nav-tabs-custom {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs-custom .nav-item {
        flex-shrink: 0;
    }

    .page-title-box {
        align-items: flex-start;
    }
}

.nav-tabs-custom {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.nav-tabs-custom::-webkit-scrollbar {
    display: none; /* Hide scrollbar for smoother scrolling */
}

@media only screen and (max-width: 768px) {
    #noteSection .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
        height:20px;
        width: 24px;
    }
}

.individualDiv, .companyDiv {
    display: none;
}

.form-radio-outline .form-check-input:checked[type=radio]::before {
    font-size: 9px !important;
    left: 2px !important;
}

/* Initially hide the subTaskCount span */
.addToFocusBucket {
    display: none;
}

/* Show the subTaskCount span on hover of the parent <tr> */
tr:hover .addToFocusBucket {
    display: inline;
}

.text-color-yellow {
    color:var(--text-color-yellow);
}

.text-color-green {
    color:var(--text-color-green);
}
.text-color-pink {
    color:var(--text-color-pink);
}
.text-color-blue {
    color:var(--text-color-blue);
}
.text-color-purple {
    color:var(--text-color-purple);
}
.text-color-red {
    color:var(--text-color-red);
}

/* Task Comments 
 * & Activity Log
 */

.timeline {
	width: 100%;
	margin-left: 25px;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	padding: 32px 0 32px 10px;
	font-size: 1.125rem;
	border-left: 2px solid #e3e3e3;
}

.timeline-item {
	display: flex;
	padding: 10px 20px !important;
    width: 100% !important;
    gap: 24px;
    
	& + * {
		margin-top: 24px;
	}
	& + .extra-space {
		margin-top: 48px;
	}
}

.timeline-item-description {
    display: flex;
    padding-top: 6px;
    gap: 8px;
    color: #7b7b7b;
}

.new-comment {
	width: 100%;
	input {
		border: 1px solid #e3e3e3;
		border-radius: 6px;
		height: 48px;
		padding: 0 16px;
		width: 100%;
		&::placeholder {
			color: #b2b2b2;
		}

		&:focus {
			border-color: #b2b2b2;
			outline: 0; /* Don't actually do this*/
			box-shadow: 0 0 0 4px #f4f6f8;
		}
	}
}

.timeline-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-left: -52px;
	flex-shrink: 0;
	overflow: hidden;
	box-shadow: 0 0 0 6px #fff;
    .ri {
        font-size:20px;
    }
	svg {
		width: 20px;
		height: 20px;
	}

	&.faded-icon {
		background-color: #f4f6f8;
		color: #7b7b7b;
	}

	&.filled-icon {
		background-color: #688afd;
		color: #fff;
	}
}

.timeline-item-description {
	display: flex;
	padding-top: 2px;
	gap: 8px;
	color: #7b7b7b;
    font-size: .9rem;

	img {
		flex-shrink: 0;
	}
	a {
		color: #3d3d3d;
		font-weight: 500;
		text-decoration: none;
		&:hover,
		&:focus {
			outline: 0; /* Don't actually do this*/
			color: #688afd;
		}
	}
}

.avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	&.small {
		width: 28px;
		height: 28px;
	}

	img {
		object-fit: cover;
	}
}

.avatar-xs {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.avatar-title {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.assignee-avatar {
    min-width: 24px;
}

.dropdown-item {
    white-space: nowrap;
}

.dropdown-menu-sm {
    min-width: 200px;

}

.priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.priority-dot.priority-urgent {
    background-color: var(--vz-danger);
}

.priority-dot.priority-high {
    background-color: var(--vz-warning);
}

.priority-dot.priority-normal {
    background-color: var(--vz-info);
}

.priority-dot.priority-low {
    background-color: var(--vz-success);
}

.dropdown-item:hover .priority-dot {
    opacity: 0.8;
}

.views .dropdown-item-text {
    color: var(--vz-gray-600);
    font-size: 0.875rem;
}

.views .dropdown-item i {
    font-size: 1rem;
    color: var(--vz-gray-600);
}

.views .btn-soft-secondary {
    background-color: rgba(var(--vz-secondary-rgb), 0.1);
    color: var(--vz-secondary);
}

#createTaskModal .modal-body {
    padding: 1.5rem;
}

#createTaskModal .form-label.required:after {
    content: "*";
    color: var(--vz-danger);
    margin-left: 2px;
}

#createTaskModal .ql-container {
    font-size: 0.875rem;
}

#createTaskModal .ql-toolbar {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#createTaskModal .ql-container {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#createTaskModal .small {
    font-size: 0.875rem;
}

.task-filter-btn{
    color:var(--vz-color-grey-600);
    background-color: var(--vz-light);
    border: 1px solid var(--vz-border-color);
    border-radius: 0.25rem;
}

.task-filter-btn:hover, .task-filter-btn:focus,
.task-filter-btn:checked+.btn, .task-filter-btn.active, .task-filter-btn.show, 
.task-filter-btn:first-child:active, 
:not(.task-filter-btn-check)+.task-filter-btn:active {
    background-color: var(--vz-light);
    border: 1px solid var(--vz-primary)!important;
    color: var(--vz-primary);
}

#saveFilterModal .modal-dialog {
    max-width: 400px;
}

#saveFilterModal .form-check {
    margin-bottom: 0;
}

#saveFilterModal .modal-body {
    padding: 1.5rem;
}

#saveFilterModal .form-label {
    font-weight: 500;
}

/* Task Filter specific styles */
.task-filter-dropdown .dropdown-menu {
    min-width: 200px;
}

.task-filter-dropdown .dropdown-item {
    cursor: pointer;
    user-select: none;
}

.task-filter-dropdown .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.task-filter-dropdown .dropdown-divider {
    margin: 0.5rem 0;
}

.task-filter-dropdown .form-check-input:checked {
    background-color: var(--vz-primary);
    border-color: var(--vz-primary);
}

/* Filter indicators containers */
.task-filter-dropdown .status-dots-container,
.task-filter-dropdown .priority-dots-container,
.task-filter-dropdown .assignee-avatars,
.task-filter-dropdown .label-icons {
    display: flex;
    gap: 2px;
    max-width: 60px;
    overflow: hidden;
}

/* Filter specific avatar sizes */
.task-filter-dropdown .avatar-xs {
    width: 20px;
    height: 20px;
    font-size: 10px;
}

/* Filter dots styling */
.task-filter-dropdown .status-dot,
.task-filter-dropdown .priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Hover effects for filter items */
.task-filter-dropdown .dropdown-item:hover .status-dot,
.task-filter-dropdown .dropdown-item:hover .priority-dot {
    opacity: 0.8;
}

.task-filter-dropdown .dropdown-toggle.pending-changes {
    color: var(--vz-primary);
}

.task-filter-dropdown .dropdown-toggle.pending-changes::after {
    border-top-color: var(--vz-primary);
}

.task-filter-dropdown .pending-changes .status-text {
    font-style: italic;
}

.comment {
	margin-top: 12px;
	color: #3d3d3d;
	border: 1px solid #e3e3e3;
	box-shadow: 0 4px 4px 0 #f4f6f8;
	border-radius: 6px;
	padding: 16px;
    font-size: .9rem;
}

.comment p {
    margin-bottom:0.875rem;
}

.comment p:last-child {
    margin-bottom:0;
}

.button {
	border: 0;
	padding: 0;
	display: inline-flex;
	vertical-align: middle;
	margin-right: 4px;
	margin-top: 12px;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	height: 32px;
	padding: 0 8px;
	background-color: #f4f6f8;
	flex-shrink: 0;
	cursor: pointer;
	border-radius: 99em;

	&:hover {
		background-color: #e3e3e3;
	}

	&.square {
		border-radius: 50%;
		color: #7b7b7b;
		width: 32px;
		height: 32px;
		padding: 0;
		svg {
			width: 24px;
			height: 24px;
		}

		&:hover {
			background-color: #e3e3e3;
			color: #3d3d3d;
		}
	}
}

.show-replies {
	color: #b2b2b2;
	background-color: transparent;
	border: 0;
	padding: 0;
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 1rem;
	cursor: pointer;
	svg {
		flex-shrink: 0;
		width: 24px;
		height: 24px;
	}

	&:hover,
	&:focus {
		color: #3d3d3d;
	}
}

.avatar-list {
	display: flex;
	align-items: center;
	& > * {
		position: relative;
		box-shadow: 0 0 0 2px #fff;
		margin-right: -8px;
	}
}

.add-color {
    color:#403098;
}

.edit-color {
    color:#d9a209;
}

.delete-color {
    color:#cc563d;
}

.green-color {
    color:#3bad71;
}

.info-color {
    color:#2385ba;
}

.move-color {
    color:#2d65cd;
}

.fs-50 {
    font-size: 40px !important;
}

.project-onboarding .card {
    transition: all 0.3s ease;
}

.project-onboarding .card-body {
    height: 100%;
}

.project-onboarding .avatar-sm {
    width: 48px;
    height: 48px;
}

.project-onboarding .avatar-title {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-onboarding .badge {
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
}

.project-onboarding .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.project-sub-nav .nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.project-sub-nav .nav-link i {
    transition: all 0.3s ease;
}

.project-sub-nav .nav-link:not(.active):hover i {
    transform: scale(1.1);
}

.project-sub-nav .nav-link.active i {
    transform: scale(1.2);
}

.project-sub-nav .dropdown-item.active i {
    transform: scale(1.1);
}

.project-sub-nav .nav-link:hover i {
    transform: scale(1.2);
}

.project-sub-nav .nav-link.active {
    font-weight: 500;
}

.project-sub-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--vz-primary);
}

.project-sub-nav .dropdown-menu {
    min-width: 200px;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
    z-index: 1050; /* Increased z-index to appear above other content */
}

/* Additional positioning for the More dropdown specifically */
.project-sub-nav .nav-item.dropdown {
    position: static; /* or relative depending on your needs */
}

.project-sub-nav .dropdown-menu.dropdown-menu-end {
    position: absolute;
    right: 0;
    margin-top: 2px;
    z-index: 1050;
}

.project-sub-nav .dropdown-item {
    padding: 0.5rem 1rem;
}

.project-sub-nav .dropdown-item:hover {
    background-color: var(--vz-light);
}

.project-sub-nav .dropdown-item.active {
    background-color: var(--vz-primary-subtle);
    color: var(--vz-primary);
}

/* Enhance toast with action buttons */
.toastify-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toastify-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.toastify-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}

/* Style action buttons without affecting existing buttons */
.toastify-action-button {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
}

.toast-info .toastify-action-button {
    background: rgba(0, 123, 255, 0.2);
    color: #007bff;
}

/* Preserve existing toast types */
.toast-success .toastify-action-button {
    background: rgba(46, 125, 50, 0.2);
    color: #2E7D32;
}

.toast-error .toastify-action-button {
    background: rgba(181, 37, 37, 0.2);
    color: #b52525;
}

.toast-process .toastify-action-button {
    background: rgba(0, 86, 160, 0.2);
    color: #0056A0;
}

/* Project Modal Specific Styles */
.project-modal {
    max-width: 800px;
}

/* Fix flatpickr input styling */
.flatpickr-input[readonly] {
    background-color: var(--vz-input-bg) !important;
    cursor: pointer;
}

/* Status button styling */
.project-status-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
}

/* Fix dropdown alignment */
.project-modal .dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
}

/* Member selection styles */
.member-selection {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
}

/* Status dot indicators */
.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}

/* Disabled dropdown styles */
.dropdown-toggle.disabled {
    background-color: var(--vz-input-disabled-bg);
    opacity: 0.75;
    pointer-events: none;
    cursor: not-allowed;
}

.avatar-xs img {
    width: 16px;
    height: 16px;

}

.avatar-title {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
}

/* Wiki Empty State */
.wiki-empty-state {
    padding: 3rem 2rem;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}

.wiki-empty-state .empty-state-image {
    width: 200px;
    height: 200px;
    margin-bottom: 2rem;
    opacity: 0.9;
    transition: transform 0.3s ease;
}

.wiki-empty-state:hover .empty-state-image {
    transform: translateY(-5px);
}

.wiki-empty-state .btn {
    transition: all 0.3s ease;
    padding: 0.5rem 1.5rem;
}

.wiki-empty-state .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(71, 91, 232, 0.2);
}

/* Override general empty state if needed */
.wiki-empty-state.empty-state {
    background: transparent;
    border: none;
}

/* Animation for the pen in SVG */
@keyframes writing {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-5px, 5px); }
    100% { transform: translate(0, 0); }
}

.wiki-empty-state:hover .empty-state-image path:last-child {
    animation: writing 2s ease-in-out infinite;
    transform-origin: center;
}

/* Project Overview Navigation */
.project-overview-nav {
    --nav-link-padding: 0.75rem 1rem;
}

.project-overview-nav .nav-link {
    color: var(--vz-body-color);
    padding: 0.75rem 1rem;
    border-radius: 0;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
}

.project-overview-nav .nav-link:hover {
    background-color: var(--vz-light);
    color: var(--vz-primary);
}

.project-overview-nav .nav-link.active {
    background-color: var(--vz-primary-bg-subtle);
    color: var(--vz-primary);
    border-left-color: var(--vz-primary);
}

/* Overview Content */
.tab-content {
    min-height: 400px;
}

/* Stats Cards */
.avatar-xs {
    width: 32px;
    height: 32px;
}

.bg-primary-subtle {
    background-color: var(--vz-primary-bg-subtle);
}

/* Settings Navigation */
.settings-nav .nav-link {
    color: var(--vz-body-color);
    padding: 0.75rem 1rem;
    border-radius: 0;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
}

.settings-nav .nav-link:hover {
    background-color: var(--vz-light);
    color: var(--vz-primary);
}

.settings-nav .nav-link.active {
    background-color: var(--vz-primary-bg-subtle);
    color: var(--vz-primary);
    border-left-color: var(--vz-primary);
}

/* Settings Content */
#settingsTabContent .card {
    margin-bottom: 0;
}

#settingsTabContent .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--vz-border-color);
}

/* Status Management Styles */
.status-section {
    padding: 1rem;
    background-color: var(--vz-card-bg-custom);
    border-radius: 0.25rem;
}

.status-item {
    background-color: var(--vz-card-bg);
    transition: all 0.3s ease;
}

.status-item:hover {
    background-color: var(--vz-card-bg-custom);
}

.status-item .status-actions {
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
}

.status-item:hover .status-actions {
    visibility: visible;
    opacity: 1;
}

.status-color .badge {
    width: 2rem;
    height: 0.5rem;
}

#daysAgo {
    font-weight: 600;
}

#lastUpdatedMember {
    font-weight: 600;

}

#lastWeekCompletedTaskCount, #lastWeekAddedTaskCount {
    font-weight: 600;
}

/* Task subtasks-modal starts */

.modal-lg {
    max-width: 900px;
}

.subtasks-container {
    max-height: 70vh;
    overflow-y: auto;
}

.subtask-form {
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

.modal-xl {
    max-width: 1100px; /* Increased width */
}

.subtasks-container {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.subtask-meta .row {
    margin-right: 0;
    margin-left: 0;
}

.list-group-item {
    padding: 1rem;
    border: none;
    border-bottom: 1px solid #dee2e6;
}

.list-group-item:last-child {
    border-bottom: none;
}

/* Ensure dropdowns don't cause horizontal scroll */
.dropdown-menu {
    max-width: 100%;
}

/* Make sure long task titles don't break layout */
.form-check-label a {
    word-break: break-word;
    display: block;
}

/* Task subtasks-modal ends */

/* Task View Styling */
.nav-tabs-custom .nav-link {
    padding: 0.5rem 1.25rem;
    font-weight: 500;
}

.nav-tabs-custom .nav-link.active {
    color: var(--vz-primary);
    background-color: var(--vz-primary-bg-subtle);
    border-bottom: 2px solid var(--vz-primary);
}

.nav-tabs-custom .nav-link:not(.active):hover {
    color: var(--vz-primary);
    background-color: var(--vz-gray-100);
}

/* Comments & Activities */
.comments-list .comment-item {
    margin-bottom: 1.5rem;
}

.comments-list .comment-item:last-child {
    margin-bottom: 0;
}

.activities-list .activity-item {
    padding: 0.75rem;
    border-radius: 0.25rem;
    background-color: var(--vz-light);
    margin-bottom: 0.75rem;
}

.comment-editor {
    border: 1px solid var(--vz-border-color);
    border-radius: 0.25rem;
}

/* Scrollbar Styling */
[data-simplebar]::-webkit-scrollbar {
    width: 5px;
}

[data-simplebar]::-webkit-scrollbar-track {
    background: var(--vz-gray-100);
}

[data-simplebar]::-webkit-scrollbar-thumb {
    background: var(--vz-gray-300);
    border-radius: 5px;
}


/* Task Attachments Starts */
.attachments-container {
    max-height: 60vh;
    overflow-y: auto;
}

.attachments-container .list-group-item {
    transition: background-color 0.2s;
}

.attachments-container .list-group-item:hover {
    background-color: #f8f9fa;
}

.modal-lg {
    max-width: 800px;
}

.list-group-item .btn-light {
    padding: 0.25rem 0.5rem;
}

.list-group-item .btn-light:hover {
    background-color: #e9ecef;
}
/* Task Attachments ENDS */

.estimated-hrs-group{
    display: flex;
    align-items: center;
    max-width: 200px;
}

.edit-task-fields-btn{
    display: flex;
    align-items: center;
    padding:0;
    background-color: transparent;
    color: var(--vz-secondary-color);
    border: 0;
}

.edit-task-fields-btn:hover{
    background-color: transparent;
    color: var(--vz-primary);
}

@media (min-width: 768px) {
    .edit-task-fields-btn{
        display: none;
        padding:0;
    }
    .task-fields-section:hover .edit-task-fields-btn{
        display: flex;
        padding:0;
    }
}

/* Label Management Styles */
.badge-label-primary { background-color: var(--vz-primary-bg-subtle); }
.badge-label-success { background-color: var(--vz-success-bg-subtle); }
.badge-label-warning { background-color: var(--vz-warning-bg-subtle); }
.badge-label-danger { background-color: var(--vz-danger-bg-subtle); }
.badge-label-info { background-color: var(--vz-info-bg-subtle); }
.badge-label-dark { background-color: var(--vz-dark-bg-subtle); }
.badge-label-purple { background-color: var(--vz-purple-bg-subtle); }
.badge-label-pink { background-color: var(--vz-pink-bg-subtle); }

.badge-label-primary, 
.badge-label-success,
.badge-label-warning,
.badge-label-danger,
.badge-label-info,
.badge-label-dark,
.badge-label-purple,
.badge-label-pink {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    border-radius: 50%;
}

.label-name {
    font-size: 0.875rem;
    color: var(--vz-body-color);
}

.form-check-input:checked[type="radio"] {
    background-color: var(--vz-primary);
    border-color: var(--vz-primary);
}

.table td {
    vertical-align: middle;
}

/* Task Label Styling */
.task-label {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    border-radius: 2rem;
    white-space: nowrap;
}

.task-label .btn-close {
    font-size: 0.575rem;
    opacity: 0.5;
}

.task-label .btn-close:hover {
    opacity: 1;
}

.task-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dropdown-labels {
    scrollbar-width: thin;
    scrollbar-color: var(--vz-gray-400) transparent;
}

.dropdown-labels::-webkit-scrollbar {
    width: 4px;
}

.dropdown-labels::-webkit-scrollbar-thumb {
    background-color: var(--vz-gray-400);
    border-radius: 4px;
}

/* Label Colors */
.task-label.label-primary {
    background-color: var(--vz-primary-bg-subtle);
    color: var(--vz-primary);
}

.task-label.label-success {
    background-color: var(--vz-success-bg-subtle);
    color: var(--vz-success);
}

.task-label.label-danger {
    background-color: var(--vz-danger-bg-subtle);
    color: var(--vz-danger);
}

.task-label.label-warning {
    background-color: var(--vz-warning-bg-subtle);
    color: var(--vz-warning);
}

.task-label.label-info {
    background-color: var(--vz-info-bg-subtle);
    color: var(--vz-info);
}

.task-label.label-purple {
    background-color: var(--vz-purple-bg-subtle);
    color: var(--vz-purple);
}

.task-label.label-pink {
    background-color: var(--vz-pink-bg-subtle);
    color: var(--vz-pink);
}

/* Ghost buttons */
.btn-ghost-primary, .btn-ghost-danger {
    background-color: transparent;
    border-color: transparent;
}

.btn-ghost-primary:hover {
    background-color: var(--vz-primary-bg-subtle);
    color: var(--vz-primary);
}

.btn-ghost-danger:hover {
    background-color: var(--vz-danger-bg-subtle);
    color: var(--vz-danger);
}

.text-truncate.workspace {
    width:150px !important;
}

/* Workspace Dropdown Styles */
.topbar-workspace .dropdown-toggle {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    color: var(--vz-white);
}
.topbar-workspace:hover .dropdown-toggle,
.topbar-workspace:active .dropdown-toggle,
.topbar-workspace .dropdown-toggle.show {
    background-color: var(--vz-primary-bg-subtle);
    color: var(--vz-primary);
}
.topbar-workspace .dropdown-toggle:after {
    margin-left: 0.5rem;
}

.workspace-list {
    scrollbar-width: thin;
    scrollbar-color: var(--vz-gray-400) transparent;
}

.workspace-list::-webkit-scrollbar {
    width: 4px;
}

.workspace-list::-webkit-scrollbar-thumb {
    background-color: var(--vz-gray-400);
    border-radius: 4px;
}

.workspace-list .dropdown-item {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    margin: 0 0.25rem;
    width: calc(100% - 0.5rem);
}

.workspace-list .dropdown-item:hover {
    background-color: var(--vz-primary-bg-subtle);
}

.workspace-list .dropdown-item.active {
    background-color: var(--vz-primary-bg-subtle);
    color: var(--vz-primary);
}

/* Label Container Styles */
.task-tags {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Individual Label Styles */
.task-label {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    border-radius: 2rem;
    white-space: nowrap;
}

/* Label Color Variants */
.task-label.label-red { 
    background-color: var(--vz-danger-bg-subtle);
    color: var(--vz-danger);
}

.task-label.label-blue {
    background-color: var(--vz-primary-bg-subtle);
    color: var(--vz-primary);
}

.task-label.label-green {
    background-color: var(--vz-success-bg-subtle);
    color: var(--vz-success);
}

.task-label.label-yellow {
    background-color: var(--vz-warning-bg-subtle);
    color: var(--vz-warning);
}

.task-label.label-purple {
    background-color: var(--vz-purple-bg-subtle);
    color: var(--vz-purple);
}

.task-label.label-pink {
    background-color: var(--vz-pink-bg-subtle);
    color: var(--vz-pink);
}

/* Label Close Button */
.task-label .btn-close {
    padding: 0.25rem;
    font-size: 0.505rem;
    opacity: 0.5;
    margin-left: 0.5rem;
}

.task-label .btn-close:hover {
    opacity: 1;
}

/* Label Dropdown Styles */
.label-dropdown .dropdown-menu {
    min-width: 200px;
    padding: 0.5rem;
}

.label-dropdown .dropdown-labels {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--vz-gray-400) transparent;
}

.label-dropdown .dropdown-labels::-webkit-scrollbar {
    width: 4px;
}

.label-dropdown .dropdown-labels::-webkit-scrollbar-thumb {
    background-color: var(--vz-gray-400);
    border-radius: 4px;
}

/* Label Dot in Dropdown */
.task-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Label Dropdown Items */
.label-dropdown .dropdown-item {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
}

.label-dropdown .dropdown-item:hover {
    background-color: var(--vz-gray-100);
}

.label-dropdown .dropdown-item.disabled {
    opacity: 0.75;
    background-color: var(--vz-gray-100);
    cursor: default;
}

/* Label Management Link */
.label-dropdown .dropdown-divider {
    margin: 0.5rem -0.5rem;
    border-color: var(--vz-border-color);
}

.label-dropdown .label-management-link {
    color: var(--vz-primary);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.dropdown-item.disabled {
    opacity: 0.75;
    cursor: default;
    background-color: var(--vz-dropdown-link-hover-bg);
}

.dropdown-item.disabled:hover {
    background-color: var(--vz-dropdown-link-hover-bg);
}

.task-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dropdown-labels {
    scrollbar-width: thin;
    scrollbar-color: var(--vz-gray-400) transparent;
}

.dropdown-labels::-webkit-scrollbar {
    width: 4px;
}

.dropdown-labels::-webkit-scrollbar-thumb {
    background-color: var(--vz-gray-400);
    border-radius: 4px;
}

/* Task Label Dropdown Styles */
.dropdown-item.task-label.disabled {
    opacity: 0.75;
    background-color: var(--vz-dropdown-link-hover-bg);
    cursor: pointer; /* Keep cursor pointer to indicate clickable for feedback */
}

.dropdown-item.task-label.disabled:hover {
    background-color: var(--vz-dropdown-link-hover-bg);
}

.dropdown-item.task-label .ri-check-line {
    opacity: 0.8;
    font-size: 1rem;
}

/* Animation for feedback */
@keyframes labelShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.label-exists-animation {
    animation: labelShake 0.4s ease-in-out;
}

/* Invite Modal Styles */
#inviteModal .modal-content {
    border: 0;
    box-shadow: var(--vz-box-shadow-lg);
}

#inviteModal .form-label.required:after {
    content: "*";
    color: var(--vz-danger);
    margin-left: 3px;
}

#inviteModal .invite-field-group {
    transition: all 0.3s ease;
}

#inviteModal .invite-field-group:hover {
    background-color: var(--vz-gray-100);
    border-radius: 0.25rem;
}

#inviteModal .form-control:focus,
#inviteModal .form-select:focus {
    border-color: var(--vz-primary);
    box-shadow: none;
}

/* Comments Wrapper */
.comments-wrapper {
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--vz-gray-400) transparent;
}

.comments-wrapper::-webkit-scrollbar {
    width: 4px;
}

.comments-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--vz-gray-400);
    border-radius: 4px;
}

.comment-thread {
    position: relative;
    padding: 1.25rem;
    transition: background-color 0.2s ease;
}

.comment-thread:hover {
    background-color: var(--vz-gray-100);
}

.comment-thread:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2.5rem);
    border-bottom: 1px solid var(--vz-border-color);
}

.comment-avatar {
    width: 2.5rem;
    height: 2.5rem;
}

.avatar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--vz-primary-subtle);
    color: var(--vz-primary);
    font-weight: 500;
    border-radius: 50%;
}

.comment-card {
    position: relative;
    transition: all 0.2s ease;
}

.comment-card:hover {
    transform: translateY(-1px);
}

.comment-content {
    font-size: 0.9375rem;
    line-height: 1.6;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

.comment-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--vz-border-color);
}

.attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: var(--vz-light);
    border-radius: 1rem;
    font-size: 0.8125rem;
    color: var(--vz-body-color);
    transition: all 0.2s ease;
}

.attachment-chip:hover {
    background-color: var(--vz-primary-subtle);
    color: var(--vz-primary);
    text-decoration: none;
}

.comment-actions {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.comment-thread:hover .comment-actions {
    opacity: 1;
}

.comment-editor {
    border: 1px solid var(--vz-border-color);
    border-radius: 0.25rem;
}

.comment-editor-toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--vz-border-color);
}

.comment-editor-content {
    min-height: 100px;
    padding: 1rem;
}

[contenteditable=true]:empty:before {
    content: attr(data-placeholder);
    color: var(--vz-gray-500);
    pointer-events: none;
}

/* Task Subtitle Responsive Styles */

/* Stack elements on mobile */
@media (max-width: 767.98px) {

    .page-subtitle-box {
        --spacing: 1rem;
        padding: var(--spacing);
    }

    .page-subtitle-box .dropdown-toggle {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .page-subtitle-box .btn-sm {
        padding: 0.25rem 0.5rem;
    }

    /* Optimize dropdown menus for mobile */
    .page-subtitle-box .dropdown-menu {
        position: fixed;
        top: auto !important;
        bottom: 0;
        left: 0 !important;
        right: 0 !important;
        margin: 0;
        border-radius: 1rem 1rem 0 0;
        max-height: 75vh;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    .page-subtitle-box .dropdown-menu.show {
        transform: translateY(0);
    }

    /* Improve touch targets */
    .page-subtitle-box .dropdown-item {
        padding: 0.75rem 1rem;
    }

    /* Optimize search on mobile */
    .page-subtitle-box .search-box {
        width: 100%;
    }

    /* Better breadcrumb wrapping */
    .breadcrumb-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .breadcrumb-wrapper::-webkit-scrollbar {
        display: none;
    }
}

/* Tablet and up */
@media (min-width: 768px) {
    .page-subtitle-box {
        --spacing: 1.5rem;
    }

    .page-subtitle-box .dropdown:not(:last-child) {
        margin-right: 0.5rem;
    }

    /* Hover effects for larger screens */
    .page-subtitle-box .btn:hover {
        transform: translateY(-1px);
    }

    .page-subtitle-box .dropdown-item:hover {
        background-color: var(--vz-primary-bg-subtle);
    }
}

/* Smooth transitions */
.page-subtitle-box .btn,
.page-subtitle-box .dropdown-menu {
    transition: all 0.2s ease;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    .page-subtitle-box .btn-soft-primary,
    .page-subtitle-box .btn-soft-secondary {
        border: 1px solid currentColor;
    }
}

/* Project Meta Styles */
.project-meta {
    --spacing: 0.5rem;
    position: relative;
}

.project-meta-item {
    position: relative;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.project-meta-item:hover {
    background-color: var(--vz-gray-100);
}

/* Make dates look clickable when editable */
.project_due_date {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.project_due_date:hover {
    background-color: var(--vz-primary-subtle);
    color: var(--vz-primary);
}

/* Status dropdown improvements */
.project-meta .dropdown-toggle {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.project-meta .dropdown-toggle::after {
    margin-left: 0.5rem;
}

.project-meta .dropdown-menu {
    min-width: 150px;
    padding: 0.25rem;
    margin: 0;
    border: 1px solid var(--vz-border-color);
    box-shadow: var(--vz-box-shadow-sm);
}

.project-meta .dropdown-item {
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.project-meta .dropdown-item:hover {
    background-color: var(--vz-primary-subtle);
    color: var(--vz-primary);
}

/* Responsive Breakpoints */
@media (max-width: 767.98px) {
    .project-meta {
        flex-direction: column;
        gap: 0.75rem;
    }

    .project-meta-item {
        width: 100%;
        justify-content: space-between;
    }

    .project-meta-item:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: -0.375rem;
        left: 0;
        right: 0;
        height: 1px;
        background-color: var(--vz-border-color);
        opacity: 0.5;
    }
}

@media (min-width: 768px) {
    .project-meta {
        --spacing: 1rem;
    }

    .project-meta-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: calc(var(--spacing) * -0.5);
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 1rem;
        background-color: var(--vz-border-color);
        opacity: 0.5;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: more) {
    .project-meta-item {
        border: 1px solid currentColor;
    }
}