/* Global CSS variables */
:root {
    --primary-color: #007bff;
    --secondary-color: #606060;
    --primary-bgcolor: #007bff;
    --secondary-bgcolor: #abc1d8;
    --gray-color: #e0e0e0;
    --third-bgcolor: #8c80ff;
    --navprimary-bgcolor: #007bff;
    --navsecondry-bgcolor: #f9f9f9;
    --nav-bgcolor: #f9f9f9;
    --text-color: #333;
    --font-family: "Poppins";
    --font-size-base: 16px;
    --btn-padding: 10px 20px;
    --border-radius: 5px;
    --padding-global: 6px 10px;
    --padding-primary: 6px 10px;
    --border-global: 1px solid #ccc;
    --border-radius-global: 5px;
    --text-color-white: #ffffff;
    --text-color-black: #000000;
    --white-color: #ffffff;
}

/* Global styles applied to the entire document */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--text-color);
    line-height: 1.6;
    background-color: #f4f4f4;
}

h1 {
    color: var(--primary-color);
}

p {
    margin-bottom: 20px;
}

.modal-xxl {
    max-width: 96%;
}

button {
    padding: var(--btn-padding);
    font-size: var(--font-size-base);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn {
    padding: 0.6rem 1.25rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color) !important;
}

.attachfile-btn {
    background-color: var(--gray-color);
    color: var(--text-color-black);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

button:hover {
    opacity: 0.8;
}

.pri-fc-color {
    color: #007bff;
}

.sec-fc-color {
    color: #abc1d8;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px;
}

.fs-17 {
    font-size: 17px;
}

.fs-18 {
    font-size: 18px;
}

.fs-19 {
    font-size: 19px;
}

.fs-20 {
    font-size: 20px;
}

.fw-800 {
    font-size: 800;
}

.m-body .m-content {
    padding-top: 0;
}

.form-control.m-input--solid {
    background-color: white;
}

.m-portlet {
    margin: 20px 0;
}

.primary-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 7px;
    font-size: 15px;
    font-weight: 500;
    background-color: var(--primary-color);
    color: var(--text-color-white) !important;
    padding: var(--padding-global);
    border-radius: var(--border-radius);
    cursor: pointer;
}

.primary-button:hover {
    background-color: var(--primary-color);
    color: var(--text-color-white) !important;
}

/* Header Section Start */
.header-right-icon {
    font-size: 20px;
    font-weight: 800;
    color: #007bff;
}

.m-topbar
    .m-topbar__nav.m-nav
    > .m-nav__item
    > .m-nav__link
    .m-topbar__userpic {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
    width: 30px;
    height: 50px;
    overflow: hidden;
}

.__pageHeaderSec {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 20px 0;
}

.software-title-sec {
    position: relative;
    display: flex;
    height: 40px;
}

.__pageHeaderLeftSec {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.__pageHeaderLeftSec .title-section:before {
    content: "";
    font-size: 11px;
    position: absolute;
    top: -19px;
    left: 0;
    font-weight: 500;
    color: rgb(114, 124, 127);
}

.title-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.__pageHeaderLeftSec span img {
    max-width: 14px;
    height: auto;
}

.__pageHeaderLeftSec h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    color: var(--primary-color);
}

.__pageHeaderRightSec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.search-container {
    position: relative;
    width: 200px;
    margin: 20px auto;
}

.__viewPageHeaderSec {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    margin: 20px 0;
    width: 100%;
}

.__viewPageHeaderLeftSec {
    display: flex;
    flex-direction: column;
    width: 74%;
    gap: 20px;
}

.__viewPageHeaderLeftSec .heading-secton {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.view-title-section h3 {
    font-size: 15px;
    font-weight: 500;
}

.view-description-section h3 {
    font-size: 15px;
    font-weight: 500;
}

.view-title-section p {
    font-size: 14px;
    font-weight: 400;
    color: #888;
}

.view-description-section p {
    font-size: 14px;
    font-weight: 400;
    color: #888;
    height: auto;
}

.view-button-innersection {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.view-button-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-bottom: 30px;
}

.view-button-section h3 {
    font-size: 15px;
    font-weight: 500;
}

.view-button-section .data-display-button {
    font-size: 12px;
    font-weight: 400;
}

.view-document-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    width: 150px;
    background: rgb(134, 134, 134);
    background: linear-gradient(
        151deg,
        rgba(134, 134, 134, 1) 0%,
        rgba(186, 186, 186, 1) 50%
    );
    color: white;
    border-radius: 5px;
}

.__viewPageHeaderRightSec {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 0;
    width: 23%;
}

/* Styling for the search icon */
.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #888;
}

/* Styling for the search box */
.search-box {
    width: 100%;
    padding: 6px 10px 6px 35px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    box-sizing: border-box;
}

.search-box:focus {
    border-color: #333;
}

/* Select option start */
.select-stageSec {
    width: 100%;
}

.custom-dropdown-select {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: var(--font-family);
}

.select-DropdownBtn {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: var(--padding-global);
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select-DropdownBtn .DropdownSelectIcon {
    width: 15px;
    height: 14px;
    margin-top: -14px;
    margin-right: 10px;
}

.dropdownSelectText {
    font-size: 13px;
    font-weight: 500;
    color: #888;
}

.select-DropdownBtn img {
    width: 100%;
    height: auto;
}

.select-DropdownBtn::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    color: #7a7777;
    position: relative;
    top: -2px;
    right: 10px;
    background-repeat: no-repeat;
    border-style: solid;
    border-color: #000000;
    border-width: 0px 1px 1px 0px;
    transform: rotate(45deg);
    transition: border-width 150ms ease-in-out;
}

#selectLabelWithAddIcon .select-DropdownBtn::after,
#selectVersionWithAddIcon .select-DropdownBtn::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    color: #7a7777;
    position: relative;
    top: -2px;
    right: 30px;
    background-repeat: no-repeat;
    border-style: solid;
    border-color: #000000;
    border-width: 0px 1px 1px 0px;
    transform: rotate(45deg);
    transition: border-width 150ms ease-in-out;
    right: 30px;
}

#selectLabelWithAddIcon .dropdownAddIcon,
#selectVersionWithAddIcon .dropdownAddIcon {
    position: absolute;
    right: 10px;
    top: 4px;
    cursor: pointer;
}

.dropdownAddIcon .fa-solid,
.dropdownAddIcon .fas {
    color: #686363;
    font-size: 13px;
    font-weight: 400;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.dropdown-item {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
}

.dropdown-item:hover {
    background-color: #f1f1f1;
}

.dropdown-item .DropdownSelectIcon {
    width: 14px;
    height: 22px;
    margin-right: 10px;
}

.dropdown-item img {
    max-width: 15px;
    width: 100%;
    height: auto;
}

.custom-dropdown-select.active .dropdown-content {
    display: block;
}

.dropdown-item.active {
    background-color: #ddd;
}

#resultVersionList .dropdown-item .DropdownSelectIcon {
    display: none;
}

#resultLavelList .dropdown-item .DropdownSelectIcon {
    display: none;
}
#parentList .dropdown-item .DropdownSelectIcon {
    display: none;
}

/* Text editor start */

.textEditorSec {
    border: 1px solid lightgray;
    padding: 5px;
    height: auto;
}

#editor {
    min-height: 120px;
    height: auto;
    position: relative;
    display: block;
}

.data-display-text-editor-sec {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 5px;
}

.data-display-button {
    background-color: var(--primary-color);
    color: #ffffff !important;
    padding: 7px 20px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    border-radius: var(--border-radius-global);
}

.data-display-button:first-child img {
    max-width: 13px;
    width: 100%;
    height: auto;
}

.data-display-button:last-child img {
    max-width: 21px;
    width: 100%;
    height: auto;
}

/* Text editor end */

/* All stage dropdown sec start  */
.form-control-color-picker {
    position: relative;
    height: 34px;
    border-color: #dee4e5;
    box-shadow: none;
    border-radius: 4px;
}

.form-control-color-picker > .form-control-color-picker-value {
    font-size: 13px;
    padding: 6px 15px;
    cursor: default;
}

.form-control-color-picker > .form-control-color-picker-dropdown {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    z-index: 10;
    background: #fff;
    display: none;
}

.form-control-color-picker
    > .form-control-color-picker-dropdown
    > .form-control-color-picker-dropdown-item {
    padding: 6px 15px;
    position: relative;
    cursor: pointer;
    font-size: 1.2em;
}

.form-control-color-picker
    > .form-control-color-picker-dropdown
    > .form-control-color-picker-dropdown-item:hover:before,
.form-control-color-picker
    > .form-control-color-picker-dropdown
    > .form-control-color-picker-dropdown-item:focus:before,
.form-control-color-picker
    > .form-control-color-picker-dropdown
    > .form-control-color-picker-dropdown-item.selected:before {
    background-color: #fff;
}

.form-control-color-picker > .form-control-color-picker-triangle:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid #00000000;
    border-right: 6px solid transparent;
    border-top: 6px solid rgb(122 119 119);
    right: 12px;
    top: 15px;
    z-index: 10;
}

.form-control-color-picker:focus {
    background: #fff !important;
    color: #4f4f4f !important;
}

.form-control-color-picker:focus > .form-control-color-picker-dropdown {
    display: block;
}

.form-control-color-picker:focus > .form-control-color-picker-triangle {
    border-top: 9px solid #333;
}

.form-control-color-picker:focus > .form-control-color-picker-triangle:after {
    border-top: 6px solid #4f4f4f;
}

.in-progress {
    background-color: #e1eefd;
    color: #007bff;
    /* border: 1px solid #007BFF; */
}

.document {
    background-color: #c1ffc3;
    color: #4caf50;
    /* border: 1px solid #4CAF50; */
}

.to-do {
    background-color: #fff3d1;
    color: #ffc107;
    /* border: 1px solid #FFC107; */
}

.qa {
    background-color: #ffd5c8;
    color: #ff5722;
    /* border: 1px solid #FF5722; */
}

.uat {
    background-color: #d6edf7;
    color: #03a9f4;
    /* border: 1px solid #03A9F4; */
}

.observation {
    background-color: #e7b5ef;
    color: #9c27b0;
    /* border: 1px solid #9C27B0; */
}

.done {
    background-color: #9af9f0;
    color: #009688;
    /* border: 1px solid #009688; */
}

.hold {
    background-color: #f4433678;
    color: #f44336;
    /* border: 1px solid #F44336; */
}

.cancel {
    background-color: #05273933;
    color: #6db4b0f5;
    /* border: 1px solid #B0BEC5; */
}

/* All stage dropdown sec end  */

/* Select option end */

/* Header Section End */

/* Left Sidebar Start */
.m-quick-sidebar {
    width: 350px !important;
}

.m-aside-menu .m-menu__nav {
    list-style: none;
    padding: 10px;
}

.m-aside-left {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    width: 210px;
}

.m-aside-menu a.m-menu__link .icon-container {
    font-size: 20px;
    padding: 0;
    float: left;
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-background-size: contain;
}

.m-aside-menu .m-menu__nav .m-menu__item {
    display: block;
    float: none;
    height: auto;
    padding: 0;
}

.m-aside-menu.m-aside-menu--skin-dark
    .m-menu__nav
    > .m-menu__item
    > .m-menu__link
    .m-menu__ver-arrow {
    color: #525672;
    font-size: 20px;
}

.m-aside-menu .m-menu__nav .m-menu__subnav {
    padding: 12px;
    width: 100%;
    margin: 0;
    list-style: none;
}

.m-aside-menu .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item {
    margin: 0;
    padding: 0 17px;
}

.m-menu__link-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard_icon {
    font-size: 27px;
    background-image: url('data:image/svg+xml,%3Csvg width="18" height="18" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1H9V19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V3ZM13 1H19C19.5304 1 20.0391 1.21071 20.4142 1.58579C20.7893 1.96086 21 2.46957 21 3V8H13V1ZM13 12H21V17C21 17.5304 20.7893 18.0391 20.4142 18.4142C20.0391 18.7893 19.5304 19 19 19H13V12Z" stroke="%23007BFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

.project_icon {
    font-size: 27px;
    background-image: url('data:image/svg+xml,%3Csvg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M11.25 21.7506L2.25 18.0006V6.00063L11.25 2.25063V21.7506ZM0.9225 19.8846C0.649268 19.7706 0.415875 19.5784 0.251716 19.332C0.0875577 19.0856 -2.46932e-05 18.7962 5.22232e-09 18.5001V5.50113C-2.46932e-05 5.20507 0.0875577 4.91563 0.251716 4.66926C0.415875 4.42289 0.649268 4.23061 0.9225 4.11663L10.3845 0.173126C10.7265 0.0306157 11.0983 -0.0252471 11.4671 0.0104977C11.8358 0.0462424 12.1901 0.172489 12.4983 0.378026C12.8065 0.583564 13.0592 0.862032 13.234 1.18871C13.4087 1.51538 13.5001 1.88015 13.5 2.25063V3.00063H15.375C16.824 3.00063 18 4.17513 18 5.62563V18.3756C18 19.0718 17.7234 19.7395 17.2312 20.2318C16.7389 20.7241 16.0712 21.0006 15.375 21.0006H13.5V21.7506C13.5001 22.1211 13.4087 22.4859 13.234 22.8125C13.0592 23.1392 12.8065 23.4177 12.4983 23.6232C12.1901 23.8288 11.8358 23.955 11.4671 23.9908C11.0983 24.0265 10.7265 23.9706 10.3845 23.8281L0.9225 19.8846ZM13.5 18.7506H15.375C15.4745 18.7506 15.5698 18.7111 15.6402 18.6408C15.7105 18.5705 15.75 18.4751 15.75 18.3756V5.62563C15.75 5.52617 15.7105 5.43079 15.6402 5.36046C15.5698 5.29013 15.4745 5.25063 15.375 5.25063H13.5V18.7506Z" fill="white"/%3E%3C/svg%3E');
}

.allTask_icon {
    font-size: 27px;
    background-image: url('data:image/svg+xml,%3Csvg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M11.25 21.7506L2.25 18.0006V6.00063L11.25 2.25063V21.7506ZM0.9225 19.8846C0.649268 19.7706 0.415875 19.5784 0.251716 19.332C0.0875577 19.0856 -2.46932e-05 18.7962 5.22232e-09 18.5001V5.50113C-2.46932e-05 5.20507 0.0875577 4.91563 0.251716 4.66926C0.415875 4.42289 0.649268 4.23061 0.9225 4.11663L10.3845 0.173126C10.7265 0.0306157 11.0983 -0.0252471 11.4671 0.0104977C11.8358 0.0462424 12.1901 0.172489 12.4983 0.378026C12.8065 0.583564 13.0592 0.862032 13.234 1.18871C13.4087 1.51538 13.5001 1.88015 13.5 2.25063V3.00063H15.375C16.824 3.00063 18 4.17513 18 5.62563V18.3756C18 19.0718 17.7234 19.7395 17.2312 20.2318C16.7389 20.7241 16.0712 21.0006 15.375 21.0006H13.5V21.7506C13.5001 22.1211 13.4087 22.4859 13.234 22.8125C13.0592 23.1392 12.8065 23.4177 12.4983 23.6232C12.1901 23.8288 11.8358 23.955 11.4671 23.9908C11.0983 24.0265 10.7265 23.9706 10.3845 23.8281L0.9225 19.8846ZM13.5 18.7506H15.375C15.4745 18.7506 15.5698 18.7111 15.6402 18.6408C15.7105 18.5705 15.75 18.4751 15.75 18.3756V5.62563C15.75 5.52617 15.7105 5.43079 15.6402 5.36046C15.5698 5.29013 15.4745 5.25063 15.375 5.25063H13.5V18.7506Z" fill="white"/%3E%3C/svg%3E');
}

.tickets_icon {
    font-size: 27px;
    background-image: url('data:image/svg+xml,%3Csvg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M10 7.75V8.25M10 4V4.5M10 11.5V12M17 15C17.5304 15 18.0391 14.7893 18.4142 14.4142C18.7893 14.0391 19 13.5304 19 13V10C18.4696 10 17.9609 9.78929 17.5858 9.41421C17.2107 9.03914 17 8.53043 17 8C17 7.46957 17.2107 6.96086 17.5858 6.58579C17.9609 6.21071 18.4696 6 19 6V3C19 2.46957 18.7893 1.96086 18.4142 1.58579C18.0391 1.21071 17.5304 1 17 1H3C2.46957 1 1.96086 1.21071 1.58579 1.58579C1.21071 1.96086 1 2.46957 1 3V6C1.53043 6 2.03914 6.21071 2.41421 6.58579C2.78929 6.96086 3 7.46957 3 8C3 8.53043 2.78929 9.03914 2.41421 9.41421C2.03914 9.78929 1.53043 10 1 10V13C1 13.5304 1.21071 14.0391 1.58579 14.4142C1.96086 14.7893 2.46957 15 3 15H17Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* Left Sidebar End */

/* Tab start */
.m-tabs-line.m-tabs-line--success.nav.nav-tabs .nav-link:hover,
.m-tabs-line.m-tabs-line--success.nav.nav-tabs .nav-link.active,
.m-tabs-line.m-tabs-line--success a.m-tabs__link:hover,
.m-tabs-line.m-tabs-line--success a.m-tabs__link.active {
    font-size: 15px;
    font-weight: 600;
    color: #007bff;
    border-bottom: 3px solid #007bff;
}

.m-tabs-line.m-tabs-line--success.nav.nav-tabs .nav-link:hover > i,
.m-tabs-line.m-tabs-line--success.nav.nav-tabs .nav-link.active > i,
.m-tabs-line.m-tabs-line--success a.m-tabs__link:hover > i,
.m-tabs-line.m-tabs-line--success a.m-tabs__link.active > i {
    color: #007bff;
}

/* Tab End */

/* Add Label start */

.popup-container {
    display: none;
    position: fixed;
    top: -30px;
    left: -50px;
    width: 100vw;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 99;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    text-align: center;
}

.popup-content h3 {
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #606060;
}

.popup-content label {
    display: flex;
    justify-content: flex-start;
    font-size: 15px;
    font-weight: 500;
    color: #606060;
}

.popup-content input {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding: 4px 10px;
    border: 1px solid lightgray;
    border-radius: 5px;
}

.popup-content button {
    background-color: #007bff;
}

.popup-content button {
    background-color: #007bff;
    color: white;
    padding: 6px 25px;
}

.popup-content .icon-list {
    display: flex;
    justify-content: space-around;
    margin: 0;
    gap: 0;
    margin-bottom: 20px;
}

.popup-content .icon {
    width: 40px;
    height: 20px;
    padding: 0;
    cursor: pointer;
    border-radius: 5px;
    border: 0px solid transparent;
}

.popup-content .icon.selected {
    box-shadow: 3px 2px 5px #4f4f4f;
}

#resultList li {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 5px 13px;
}

#resultList img {
    margin-right: 10px;
}

/* Add Label end */

/* Add Version start */
.popupVersion-container {
    display: none;
    position: fixed;
    top: -30px;
    left: -50px;
    width: 100vw;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 99;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    text-align: center;
}

.popup-content h3 {
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #606060;
}

.popup-content label {
    display: flex;
    justify-content: flex-start;
    font-size: 15px;
    font-weight: 500;
    color: #606060;
}

.popup-content input {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding: 4px 10px;
    border: 1px solid lightgray;
    border-radius: 5px;
}

.popup-content button {
    background-color: #007bff;
}

.popup-content button {
    background-color: #007bff;
    color: white;
    padding: 6px 25px;
}

#resultVersionList li {
    font-size: 13px;
    list-style: none;
    padding: 5px 10px;
}

/* Add Version end */

/* Attach button start */
.attachSec {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}

.attach-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    background-color: #d9d9d9;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    gap: 10px;
    width: 150px;
    height: 45px;
    line-height: 13px;
    font-size: 12px;
}

.attach-btn.active {
    background-color: #413f3f;
    color: #fff;
}

.attach-btn:hover {
    background-color: #606060;
}

.collapse-box {
    display: none;
    padding: 10px;
    border: 1px solid #ccc;
    margin-top: 10px;
}

.collapse-box.active {
    display: block;
}

/* Attach button styling start */
/* Table Start */

.task-table {
    width: 100%;
    border-collapse: collapse;
}

.task-table th,
.task-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.task-table th {
    background-color: #f9f9f9;
}

.task-table .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.task-table thead tr th {
    font-size: 13px;
    font-weight: 600;
}

.task-table tbody tr td {
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}

.sts-btn {
    padding: 2px 10px;
    font-size: 11px;
    display: block;
    min-width: 70px;
    border-radius: 3px;
    line-height: 20px;
    text-align: center;
}

/* Collapsable table start */

.task-table .toggle-btn {
    background-color: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.task-table .toggle-btn:focus {
    outline: none;
}

.task-table .collapse-content {
    padding: 0;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.content-row {
    display: none;
}

/* Collapsable table end */

/* Table End */
.comment-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.comment-box textarea {
    height: 110px;
    border: 0 !important;
    text-align: left;
}

.comment-box textarea::-webkit-scrollbar {
    display: none;
}

.comment-box textarea::placeholder {
    font-size: 15px;
    color: #1d1919;
    font-weight: 700;
}

textarea:-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
}

textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
}

textarea:-ms-input-placeholder {
    color: #fff;
}

.commentBox {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: end;
    vertical-align: middle;
    gap: 10px;
    border: 1px solid lightgray;
    border-radius: 5px;
    background-color: var(--white-color);
    padding: 0 10px;
}

.commentBox button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 7px;
    font-size: 15px;
    font-weight: 500;
    background-color: var(--primary-color);
    color: #ffffff !important;
    cursor: pointer;
}

.commentBox button:hover {
    background-color: var(--primary-color);
    color: #ffffff !important;
}

/* .commentBox textarea::placeholder {
       color: red !important;

   } */

.thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-base);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--third-bgcolor);
    color: var(--text-color-white);
}

.thumb-small {
    width: 25px;
    height: 25px;
    background: #8c80ff;
    color: #ffffff;
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
}

a.attached-files {
    display: block;
    width: 17px;
    height: 17px;
    line-height: 17px;
    color: var(--text-color-black);
    float: right;
    text-align: center;
}

a.attached-files:hover {
    display: block;
    width: 17px;
    height: 17px;
    line-height: 17px;
    color: var(--primary-color);
    float: right;
    text-align: center;
}

/* Comment box end */

/* Task Meta section start */
.task-meta {
    padding: 20px;
    box-shadow: 0px -1px 6px lightgray;
}

.task-meta-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid lightgray;
    font-weight: 600;
}

.task-meta label {
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 3px;
}

.task-meta .form-group {
    margin-bottom: 0.3rem;
}

.task-meta input {
    padding: 7px !important;
    margin: 0;
    color: #888;
    font-size: 12px;
    font-weight: 500;
}

.task-meta input::placeholder {
    color: var(--gray-color);
}

.dropdown-item {
    font-size: 13px;
    padding: 3px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
}

.task-metaButtonSec {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.task-metaButtonSec button {
    width: 50%;
}

.cancle-button {
    background: transparent;
    border: 1px solid lightgray;
    border-radius: 5px;
}

.cancle-button:hover {
    background-color: var(--primary-bgcolor);
    color: var(--text-color-white);
}

/* Parent Task section start */
.parentTaskSection {
    display: flex;
    flex-direction: column;
    justify-content: start;
    font-size: 13px;
    margin: 20px 0;
}

.parentTaskSection ul {
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}

.parentTaskSection ul li {
    font-size: 12px;
    display: flex;
    justify-content: start;
    align-items: start;
    padding: 2px 0;
}

.parentTaskSection ul li span.parentTaskSectionIcon {
    margin-right: 7px;
}

.parentTaskSection ul li span.parentTaskSectionTitle {
    margin-right: 7px;
}

.parentTaskSection p {
    font-size: 11px;
    font-weight: 400;
    color: rgb(12, 0, 245);
    padding: 2px 0;
    margin: 0;
}

.parentTaskSection p span {
    font-size: 11px;
    font-weight: 600;
}

.dateSection input.form-control.m-input {
    padding: 7px;
    font-size: 14px;
    font-weight: 500;
    color: #888;
}

.dateSection .form-control input,
.dateSection .select2-selection__rendered {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    padding: 7px !important;
    font-size: 14px;
    font-weight: 500;
    color: #888;
}

/* Date Time Picker start */

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

.datetime-picker label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #333;
    cursor: pointer;
}

.datetime-input {
    padding-left: 35px;
    /* Space for the icon */
    font-size: 16px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 250px;
}

.datetime-input:focus {
    outline: none;
    border-color: #007bff;
}

/* Date Time Picker end */

/* Parent Task section end */

/* Task Meta section end */

/* Attach section start */
.creatTaskTypeForm,
.creatTaskTypeForm h4 {
    font-size: 12px !important;
}

/* Attach section end */

/* Tooltip Start */
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-base);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--third-bgcolor);
    color: var(--text-color-white);
    margin-right: 10px;
}

.tooltip-text {
    visibility: hidden;
    background-color: #555;
    color: #fff;
    text-align: left;
    padding: 5px 10px;
    border-radius: 5px;
    position: absolute;
    top: 80%;
    left: 80%;
    transform: translateY(-50%);
    white-space: nowrap;
    z-index: 10;
    display: flex;
    align-items: center;
}

.tooltip-text i.icon {
    margin-right: 8px;
    width: 15px;
    height: 15px;
    background-color: #fff;
    display: inline-block;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

.fade-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black */
    z-index: 5;
}

.tooltip-container:hover + .fade-background {
    display: block;
}

/* Tooltip end */

/* attached file section start */
.collapse-box {
    display: none;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    box-shadow: 3px 2px 5px lightgray;
    border-radius: 0 0 5px 5px;
}

.collapse-box.open {
    display: block;
}

.btn-up {
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    background-color: white;
    color: black;
    border: 2px solid #008cba;
    border-radius: 15px;
}

/* attached file section end */

.select-btn .icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.select-btn img {
    width: 100%;
    height: auto;
}

.select-btn::after {
    content: "▼";
    font-size: 12px;
    margin-left: auto;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    box-shadow: -1px 1px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 0 0 5px 5px;
    border: 0px solid #ccc;
    z-index: 9;
}

.dropdown-item {
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
}

.dropdown-item:hover {
    background-color: #f1f1f1;
}

.dropdown-item .icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.dropdown-item img {
    width: 100%;
    height: auto;
}

.custom-select.active .dropdown-content {
    display: block;
}

.dropdown-item.active {
    background-color: #ddd;
}

/* Text Editor End */

/* Add project Modal start */
.addProjectModal {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.addProjectModal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    width: 600px;
}

.addProjectModal-content .header {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    height: 40px;
}

.addProjectModal-content .header h4 {
    margin: 0;
    padding: 0;
}

.addProjectModal-content .main {
    padding: 10px;
}

.addProjectModal-content .main .form-group {
    display: flex;
    flex-direction: column;
}

.addProjectModal-content .main .form-group input,
.addProjectModal-content .main .form-group textarea {
    font-size: 13px;
    font-weight: 400;
    padding: 5px;
    border: 2px solid black;
    border-radius: 4px;
}

.icon-list {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.icon {
    cursor: pointer;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.icon.selected {
    border-color: blue;
}

.modal-buttons {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

#cancelBtn {
    width: 50%;
}

#createBtn {
    width: 50%;
    background-color: #007bff;
    color: #ffffff !important;
    border-radius: 3px;
}
/* Add project Modal start */

/* connect to Parent section start */
.connenctToParentSec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    width: 100%;
    height: auto;
    border: 1px solid lightgray;
    border-radius: 5px;
}

.itemsConnectParentSec {
    width: 90%;
}

.itemConnectParentSec {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: max-content;
    border: 1px solid lightgray;
    padding: 2px 5px;
    border-radius: 20px;
    gap: 5px;
}

.itemConnectParentSec-icon {
    max-width: 18px;
    width: 100%;
    height: auto;
    overflow: hidden;
    object-fit: cover;
}

.itemConnectParentSec-name {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    font-size: 13px;
}

.itemConnectParentSec-close {
    width: 10px;
    height: 10px;
}

.itemConnectParentSec-close i {
    font-size: 10px;
    cursor: pointer;
}

.connenctToParentSearchSec {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.connenctToParentSearchSec i {
    cursor: pointer;
}

.arrow-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    background-color: #007bff;
    color: #ffffff;
}

/* connect to Parent section start */

/* Pop-up start */
.activity-section {
    height: auto;
    background: #efefef;
    padding: 3%;
    display: inline-grid;
}
.activity-section h4 {
    font-size: 15px;
    font-weight: 500;
}
.toggle-box {
    display: none;
}
.toggle-box + label {
    cursor: pointer;
    font-size: 17px;
    font-weight: 500;
    line-height: 21px;
    margin-bottom: 5px;
    color: var(--primary-bgcolor);
    display: flex;
    align-items: center;
}

.toggle-box + label + .activity-section {
    display: none;
    margin-bottom: 10px;
}

.toggle-box:checked + label + .activity-section {
    display: grid;
}

.toggle-box + label:before {
    background-color: #007bff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #ffffff;
    content: "+";
    display: block;
    float: left;
    font-size: 20px;
    font-weight: 400;
    height: 30px;
    line-height: 30px;
    margin-right: 5px;
    text-align: center;
    width: 30px;
}
.toggle-box:checked + label:before {
    content: "\2212";
}
/* Pop-up end */

/* Bundle files start */
.btn.m-btn--hover-accent:hover,
.btn.m-btn--hover-accent.active,
.btn.m-btn--hover-accent:active,
.btn.m-btn--hover-accent:focus,
.show > .btn.m-btn--hover-accent.dropdown-toggle {
    border-color: #007bff !important;
    color: #ffffff !important;
    background-color: #007bff !important;
}

button.cancle-button:focus-visible {
    border: none;
    outline: none;
}
.nav-active {
    color: #007bff !important;
}

/* loader css */

.loader,
.loader:before {
    border: 5px solid transparent;
}
.loader:after,
.loader:before {
    content: "";
    position: absolute;
}
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.loader {
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-top-color: #007bff;
    border-radius: 100%;
    -webkit-animation: 2s linear infinite spin;
    animation: 2s linear infinite spin;
    z-index: 1001;
}

.loader:before {
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-top-color: #007bff;
    border-radius: 100%;
    -webkit-animation: 3s linear infinite spin;
    animation: 3s linear infinite spin;
}

.loader:after {
    top: 14px;
    left: 14px;
    right: 14px;
    bottom: 14px;
    border: 5px solid transparent;
    border-top-color: #fff;
    border-radius: 100%;
    -webkit-animation: 1.5s linear infinite spin;
    animation: 1.5s linear infinite spin;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    background: #0000002e;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.loaded .loader {
    opacity: 0;
    transition: 0.3s ease-out;
}

.loaded .loader-wrapper {
    visibility: hidden;
    /* transform: translateY(-100%); */
    /* transition: 0.3s ease-out 1s; */
}

/* Bundle files end */