@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    /* Global Colors */
    --background-color: #fff;
    --background-color2: #f8f9fb;
    --sidebar-gradient: linear-gradient(
        0deg,
        rgba(7, 37, 46, 1) 0%,
        rgba(25, 83, 83, 1) 50%,
        rgba(8, 37, 47, 1) 100%
    );
    --button-gradient: linear-gradient(
        90deg,
        rgba(3, 49, 58, 1) 0%,      
        rgba(23, 78, 79, 1) 100%
    );
    --button-gradient-hover: linear-gradient(
        90deg,
        rgba(23, 78, 79, 1) 0%,
        rgba(3, 49, 58, 1) 100%
    );
    --icon-gradient: #195353;
    --div-gradient: linear-gradient(180deg, #02383f 0%, #034a4d 100%);

    /* Font Color */

    --text-white: #ffffff;
    --text-black: #000000;
    --text-secondary: #515151;

    /* Font-Family */
    --primary-font: "Roboto", sans-serif;
    --secondary-font: "Jost", sans-serif;
}

/* Global Css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    width: 100%;
}

body {
    font-family: var(--primary-font);
    font-size: 16px;
    background-color: var(--background-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-black);
    margin: 0;
}

h1 {
    font-size: 30px;
    font-weight: 700;
    min-height: 52px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
}

h2 {
    font-size: 24px;
    font-weight: 700;
}

h3 {
    font-size: 20px;
    font-weight: 500;
}

h4 {
    font-size: 18px;
    font-weight: 500;
}

i.fa-pen-to-square {
    color: blue;
}

i.fa-solid.fa-trash {
    color: red;
}
i.fa-solid.fa-eye {
    color: green;
}

p,
span {
    color: var(--text-black);
    margin: 0;
}

a {
    text-decoration: none;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

li {
    list-style: none;
    font-size: 16px;
}

i {
    font-size: 18px;
}

/* Edge default eye icon remove -start */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* End  */

/* Loader */
 
.loader {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;
    display: flex;
    }
    .loader::before {
      content: "";
      box-sizing: border-box;
      position: absolute;
      inset: 0px;
      border-radius: 50%;
      border: 5px solid #fff;
      animation: prixClipFix 2s linear infinite ;
    }

    @keyframes rotate {
      100%   {transform: rotate(360deg)}
    }

    @keyframes prixClipFix {
        0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
        25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
        50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
        75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
        100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
    }

    .spin-animation {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
 
 
 
 
/* End of Loader */

/* Scrollbar */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #d2d2d2;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: #999797;
    border-radius: 6px;
}

/* End of Scrollbar */

.success-badge {
    padding: 1px 15px;
    background-color: #d8f5df;
    color: #2b844c;
    font-weight: 600;
    border-radius: 3px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pending-badge {
    padding: 1px 15px;
    background-color: #f9f2d8;
    color: #736619;
    font-weight: 600;
    border-radius: 3px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.danger-badge {
    padding: 1px 15px;
    background-color: #ffdede;
    color: #fe0700;
    font-weight: 600;
    border-radius: 3px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inactive-badge {
    padding: 1px 15px;
    background-color: #ebebeb;
    color: #8d8a8a;
    font-weight: 600;
    border-radius: 3px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.complete-badge {
    padding: 1px 15px;
    background-color: #ccfffd;
    color: #0da49f;
    font-weight: 600;
    border-radius: 3px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.required::after {
    content: " *" !important;
    color: red !important;
    font-size: 13px !important;
    position: absolute !important;
    right: -10px !important;
    top: -5px !important;
}

/* End Of Global Css */

/* Swal */

.swal2-close {
    display: block !important;
    color: #000 !important;
}

.swal2-actions {
    gap: 10px;
}

/* End Of Swal */

/* Start of  Main Wrapper , Sidebar  */

.main-wrapper {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.new-sidebar {
    background: var(--sidebar-gradient);
    border-radius: 0 30px 30px 0;
    transition: all 0.2s ease;
    max-width: 310px;
    width: 100%;
    position: fixed;
    height: 100%;
    z-index: 2;
}

.new-main-content-container {
    width: 100%;
    max-width: calc(100% - 310px);
    margin-left: 310px;
}

.new-sidebar-header {
    padding: 40px 15px 20px;
    border-bottom: 1px solid #ffffff;
    position: relative;
}

.new-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.new-sidebar-toggle {
    position: absolute;
    right: -15px;
    border-radius: 100%;
    border: none;
    background-color: #195353;
    transition: all 0.2s ease;
}

.new-sidebar-toggle img {
    rotate: 180deg;
}

.new-sidebar-tabs {
    padding: 20px 15px;
    height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
}

.new-sidebar-tabs .new-sidebar-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: all 0.1s ease-in-out;
}

.new-sidebar-tabs .new-sidebar-item:hover,
.new-sidebar-tabs .new-sidebar-item:focus,
.new-sidebar-tabs
    .new-sidebar-item:focus-within.new-sidebar-tabs
    .new-sidebar-item:active,
.new-sidebar-tabs .sidebar-item-active {
    background-color: #195353;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
}

.new-sidebar-link {
    display: flex;
    transition: all 0.1s ease;
    width: 100%;
    padding: 15px;
    height: 100%;
    gap: 10px;
    border: 1px solid #4a727200;
    border-radius: 5px;
}
.new-sidebar-tabs .new-sidebar-item:hover .new-sidebar-link,
.new-sidebar-tabs .sidebar-item-active {
    transition: all 0.1s ease;
    border: 1px solid #4a7272;
}

.new-sidebar-link span {
    font-weight: 600;
    font-size: 18px;
    color: #fff;
}

.new-sidebar-tab {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Sidebar Collapse */

.new-sidebar.collapse-menu {
    max-width: 90px;
    width: 100%;
    transition: all 0.2s ease;
}

.new-sidebar.collapse-menu .new-sidebar-link span,
.new-sidebar.collapse-menu #logo-name {
    display: none;
}

.new-sidebar.collapse-menu + .new-main-content-container {
    max-width: calc(100% - 90px);
    margin-left: 90px;
}

.new-sidebar.collapse-menu .new-sidebar-toggle img {
    rotate: 0deg;
}

.new-sidebar.collapse-menu + .new-main-content-container .sticky-bar {
    width: calc(100% - 75px);
}

/* End of Collapse menu */

/* End of Sidebar, Main Wrapper */

/* Start of Main Content */

/* Topbar - Start */

.new-topbar {
    padding: 10px 80px 10px 40px;
    border-bottom: 1px solid #d9d9d9;
}

.new-topbar-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.new-topbar-content {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* New Topbar Style */

.new-topbar-style h3{
    font-size:24px;
}

.new-topbar-style .notification-button{
    padding:5px;
    /* background:transparent; */
    /* border:none; */
}
.new-topbar-style .notification-count{
    position: absolute;
    background-color: #f93030;
    padding: 5px;
    border-radius: 100%;
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -8px;
    right: -8px;

}
.new-topbar-style .admin-icon{
    padding:5px;
}


.new-topbar-style .admin-icon img{
    width:95%;
    height:95%;
}


/* End of New Topbar Style */

.notification-button {
    background-color: #f6f6f6;
    padding: 15px;
    border-radius: 100%;
    position: relative;
    border: 1px solid #d9d9d9;
    cursor: pointer;
}

.notification-count {
    position: absolute;
    background-color: #f93030;
    padding: 5px;
    border-radius: 100%;
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
}

.notification-count p {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.admin-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-left: 1px solid #d9d9d9;
    padding-left: 15px;
    cursor: pointer;
    position: relative;
}

.admin-icon {
    padding: 15px;
    border-radius: 100%;
    background-color: #ea9d15;
    border: 1px solid #d3840a;
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin-profile h3 {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size:20px;
}

.admin-profile p {
    font-family: var(--secondary-font);
    font-size: 14px;
}

.admin-name {
    position: relative;
}

.dropdown-icon {
    position: absolute;
    top: 0;
    right: -25px;
    padding-left: 10px;
}

/* End of Main Content */
/* Dropdown Topbar */
.admin-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: -20px;
    min-width: 170px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 999;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
}

/* Show on hover */
.admin-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.admin-profile.show .admin-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.admin-dropdown a {
    display: block;
    padding: 10px 16px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease;
}

.admin-dropdown a:hover {
    background: #f3f4f6;
    color: #111827;
}

.admin-dropdown .dropdown-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

.admin-dropdown .dropdown-danger {
    color: #dc2626;
}

.admin-dropdown .dropdown-danger:hover {
    background: #fef2f2;
    color: #b91c1c;
}

.logout-button {
    height: 100%;
    width: 100%;
    border: none;
    border-radius: 6px;
    padding: 10px 15px;
    display: flex;
    justify-content: space-around;
    background: #195353;
    color: white;
    font-weight: 600;
}

/* End of Dropdown Topbar */

/* Topbar - End */

/* Main - Start */

.new-main {
    margin: 20px 25px;
    padding: 20px;
    background: var(--background-color2);
    border-radius: 6px;
    min-height: calc(100vh - 130px);
}

/*  Main - End */

/* Dashbaord - Start  */

.new-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* h1.dashboard-heading {
    font-size: 20px;
    color: var(--text-black);
    font-family: var(--secondary-font);
} */

.legal-solutions-content {
    position: relative;
    max-width: 600px;
}

.waving-hand {
    position: absolute;
    top: 0;
    left: 290px;
    padding: 0 0 0 30px;
}

.dashboard-description {
    font-size: 18px;
    font-family: var(--secondary-font);
    color: var(--text-secondary);
    margin-top: 10px;
}

.banner-right-content {
    display: flex;
    justify-content: space-between;
    background: var(--div-gradient);
    background-image: url("/new-images/get-a-call-bg-image.webp");
    padding: 30px 110px 30px 40px;
    border-radius: 9px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    margin-left: 50px;
}

.call-an-expert-content {
    max-width: 350px;
}

.call-an-expert-content h4 {
    color: #fbcb5e;
    font-size: 20px;
    font-weight: 700;
}

.call-an-expert-content p {
    margin-top: 10px;
    color: var(--text-white);
    font-size: 14px;
}

.call-an-expert-button {
    margin-top: 10px;
    background-color: #fcc95c00;
    border-radius: 6px;
    max-width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px solid #fff;
    padding: 2px 7px;
}

.call-an-expert-button:hover,.call-an-expert-button:active{
    background: #fbcb5e;
    border: 1px solid #fbcb5e;
}

.call-an-expert-button span {
    font-size: 18px;
    font-weight: 600;
    color: #ffff;
}

.call-an-expert-button:hover span,.call-an-expert-button:active span{
    color:#195353;
}

.call-an-expert-button img {
    padding: 2px;
    border-radius: 100%;
    background-color: #207163;
}

/* .cta-image-container {
    position: absolute;
    right: 100px;
    bottom: -7px;
    height: auto;
} */

.cta-image {
    height: 100%;
    width: auto;
}

.dasboard-new-info-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-card {
    padding: 25px 20px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 25px;
    word-break: break-all;
}

.stat-green {
    background-color: #e5f1ef;
    border: 1px solid #bfe5df;
}

.stat-purple {
    background-color: #dedaf3;
    border: 1px solid #c1baea;
}

.stat-blue {
    background-color: #d9edf8;
    border: 1px solid #b8dff5;
}

.stat-yellow {
    background-color: #fff2de;
    border: 1px solid #fbddaf;
}

h2.stat-value {
    font-size: 32px;
    font-weight: 700;
}

p.stat-label {
    margin-top: 7px;
}

.stat-icon {
    padding: 15px;
    background: white;
    border-radius: 100%;
}

.new-service-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.new-service-card {
    display: flex;
    flex-direction: column;
    padding: 40px 20px 20px 20px;
    border-radius: 12px;
    border: 1px solid #d9d9d9;
    background-color: #fff;
    gap: 20px;
}

.service-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px;
}

.service-meta .meta-item {
    flex: 0 0 19%;
}

.service-other-meta {
    display: flex;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #d9d9d9;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.meta-label {
    color: var(--text-secondary);
    font-weight: 400;
}

.meta-val {
    color: #000;
    font-weight: 600;
}

.meta-val.milestone {
    color: #f95e00;
}

.view-details-container {
    margin-left: auto;
}

.meta-items {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.meta-items .meta-item {
    display: flex;
    flex-direction: column;
}

.service-header {
    display: flex;
    position: relative;
    align-items: center;
}

.service-name {
    font-size: 20px;
    font-weight: 500;
    padding-left: 50px;
}

.service-ico {
    padding: 10px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--icon-gradient);
    position: absolute;
}

.progress-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.progress-item {
    position: absolute;
    top: -30px;
    right: 0;
}

.progress-content .meta-label,
.progress-content .meta-val {
    font-size: 12px;
}

.progress-line-container {
    width: 100%;
    background-color: #d9d9d9;
    border-radius: 6px;
    height: 6px;
}

.progress-line {
    width: 50%;
    height: 6px;
    border-radius: 6px;
    background: #5990f2;
}

.new-cta-banner {
    padding: 25px 30px;
    border: 1px solid #f5c754;
    background-color: #fffbeb;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.new-cta-banner h3 {
    font-size: 20px;
    font-weight: 500;
    color: #000;
}

.apply-service-image {
    position: absolute;
    bottom: 0px;
    left: 6px;
}

.apply-service-content {
    padding-left: 100px;
    max-width: 1100px;
    font-size: 14px;
    color: #383838;
}

/* Dashbaord - End  */

/* Dashboard (Before Purchase) - Start */

.dashboard-alert {
    padding: 8px;
    background: #fff4e2;
    border: 2px solid #ed1c24;
    margin: 10px 0 0;
    border-radius: 6px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.dashboard-alert.pending-approval h4 {
    color: #ed1c24;
    font-size: 20px;
    font-weight: 700;
    margin-right: 10px;
}

.dashboard-alert.pending-approval span {
    color: #000;
    font-weight: 500;
}

.dashboard-alert span {
    font-family: var(--secondary-font);
    font-size: 18px;
    font-weight: 600;
    color: #ed1c24;
}

.new-popular-services {
    padding: 12px 12px;
    background-color: #2c7b7b;
    border-radius: 12px;
}

.popular-services-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.popular-box {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
}

.new-popular-service-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 25px 20px;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    gap: 15px;
    transition: all 0.2s ease-in-out;
    justify-content: space-between;
}

.popular-services-content h2 {
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
}

.popular-card-header {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 15px;
}

.image-icon {
    padding: 10px;
    border-radius: 12px;
}

.new-popular-service-card:nth-child(1) .image-icon {
    border: 1px solid #ffdaf2;
}

.new-popular-service-card:nth-child(2) .image-icon {
    border: 1px solid #fae5d2;
}

.new-popular-service-card:nth-child(3) .image-icon {
    border: 1px solid #cde0ff;
}

.new-popular-service-card:nth-child(4) .image-icon {
    border: 1px solid #a2f4c2;
}

.new-popular-service-card h3 {
    font-size: clamp(1rem, 1.2rem + 0.75vw, 1.4rem);
    font-weight: 700;
    margin: auto 0;
}

.new-popular-service-card:nth-child(1) h3 {
    color: #c62c91;
}

.new-popular-service-card:nth-child(2) h3 {
    color: #f39643;
}

.new-popular-service-card:nth-child(3) h3 {
    color: #0465fe;
}

.new-popular-service-card:nth-child(4) h3 {
    color: #04a30b;
}

.new-popular-service-card:nth-child(1):hover {
    /* border: 4px solid #C62C91; */
    box-shadow: 0 0 12px 4px rgba(68, 254, 31, 0.48);
    outline: 4px solid #c62c91;
    outline-offset: -1px;
}

.new-popular-service-card:nth-child(2):hover {
    outline: 4px solid #f39643;
    outline-offset: -1px;
    box-shadow: 0 0 12px 4px rgba(68, 254, 31, 0.48);
}

.new-popular-service-card:nth-child(3):hover {
    outline: 4px solid #0465fe;
    outline-offset: -1px;
    box-shadow: 0 0 12px 4px rgba(68, 254, 31, 0.48);
}

.new-popular-service-card:nth-child(4):hover {
    outline: 4px solid #04a30b;
    outline-offset: -1px;
    box-shadow: 0 0 12px 4px rgba(68, 254, 31, 0.48);
}

.popular-card-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.popular-service-card-content p {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    margin-bottom: 15px;
}

.popular-card-tasks {
    position: relative;
    list-style: none;
}

.popular-card-tasks li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    margin-bottom: 5px;
}

.popular-card-tasks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url("/./new-images/lick-icon.svg") no-repeat center;
    background-size: contain;
}

.popular-card-tasks li.more-task::before {
    background: transparent;
}

.popular-card-tasks li.more-task {
    padding-left: 0;
    padding: 8px;
}

.popular-card-important-details {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-top: 0.5px solid #d9d9d9;
    gap: 10px;
}

.total-price h4 {
    font-size: 24px;
    font-weight: 700;
}

.duration h4 {
    font-size: 18px;
    font-weight: 700;
}

.popular-car-service-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.popular-car-service-buttons form button {
    width: 100%;
}

.popular-car-service-buttons form {
    width: 50%;
}

.service-details-btn {
    padding: 10px 8px;
    border: 1px solid #f5c754;
    border-radius: 6px;
    background-color: #fff2de;
    font-weight: 600;
    color: #f95e00;
    width: 45%;
    text-align: center;
    transition: all 0.4s ease;
    font-size: 18px;
}

.service-details-btn:hover,
.service-details-btn:active,
.service-details-btn:focus {
    border: 1px solid #fff2de;
    background-color: #fba70e;
    color: #fff2de;
}

.subscription-btn {
    padding: 10px 8px;
    border: 1px solid #195353;
    border-radius: 6px;
    background-color: #195353;
    font-weight: 600;
    color: #fff;
    isolation: isolate;
    width: 45%;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    font-size: 22px;
}

.subscription-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(45, 173, 173, 1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

/* Hover effect */
.subscription-btn:hover::before {
    width: 100%;
    left: 0;
    right: auto;
}

.more-task {
    padding: 5px;
    border: 1px solid #d2ecff;
    background: #d2ecff;
    color: #007aff;
    font-weight: 600;
    display: flex;
    width: fit-content;
    border-radius: 3px;
    margin-left: 30px;
}

.more-task::before {
    display: none;
}

.view-all-services {
    display: flex;
    justify-content: center;
    align-items: center;
}

.primary-button,
.subcribe-service-btn {
    padding: 10px 20px;
    border: 1px solid #195353;
    border-radius: 6px;
    background-color: #195353;
    font-weight: 600;
    color: #fff;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    font-size: 18px;
}

.primary-button::before,
.subcribe-service-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(45, 173, 173, 1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.primary-button:hover::before,
.primary-button:active::before,
.primary-button:focus::before,
.subcribe-service-btn:hover::before,
.subcribe-service-btn:active::before,
.subcribe-service-btn:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

.primary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ccc;
    border-color: #ccc;
}
.primary-button:disabled::before,
.primary-button:disabled::after {
    display: none;
}

.primary-button:disabled:hover {
    background-color: inherit;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ccc;
    border-color: #ccc;
    color:#757575
}
button:disabled::before,
button:disabled::after {
    display: none;
}

.disable-button {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ccc !important;
    border-color: #ccc !important;
}
.disable-button::before,
.disable-button::after {
    display: none;
}

.disable-button:hover {
    background-color: #ccc;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}




.disabled-service-btn {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ccc;
    border-color: #ccc;
}
.disabled-service-btn::before,
.disabled-service-btn::after {
    display: none;
}


#requestBtn{
    display: flex;
    margin: auto;
    gap: 10px; 
    align-items: center;
    justify-content: center;
}
.disabled-service-btn:hover {
    /* background-color: none; */
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}
.request-subscribe-service-btn {
    padding: 10px 20px;
    border: 1px solid #d97706;
    border-radius: 6px;
    background-color: #d97706;
    font-weight: 600;
    color: #fff;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    cursor: default;
    font-size: 18px;
}

.request-subscribe-service-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        #f09e41 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.request-subscribe-service-btn:hover::before,
.request-subscribe-service-btn:active::before,
.request-subscribe-service-btn:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

.subscribed-service-btn {
    padding: 10px 18px;
    border: 1px solid #2e7d32;
    border-radius: 6px;
    background-color: #2e7d32;
    font-weight: 600;
    color: #fff;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    cursor: default;
    font-size: 18px;
}

.subscribed-service-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        #43a147 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.subscribed-service-btn:hover::before,
.subscribed-service-btn:active::before,
.subscribed-service-btn:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

/* Processing Dashboard */
.proccessing .legal-solutions-content {
    max-width: none;
}

.proccessing .banner-right-content {
    padding: 15px 30px;
    margin-left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    cursor:pointer;
}
.proccessing .banner-right-content:hover .call-an-expert-button{
    background: #fbcb5e;
    border: 1px solid #fbcb5e;
}

.proccessing .banner-right-content:hover .call-an-expert-button span{
    color:#195353;

}

.proccessing .cta-image-container {
    max-width: 70px;
    background: #F9681B;
    padding: 10px;
    border-radius: 100%;
    border: 2px solid #fff;
}

.proccessing .cta-image-container .cta-image {
    height: 100%;
    width:100%;
}

.proccessing .cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-right:auto;
}

/* .proccessing .call-an-expert-content {
    border-left: 0.3px solid rgba(255, 255, 255, 0.3);
    padding-left: 20px;
    margin-left: 100px;
} */
/* End Processing Dashboard */

/* Dashboard (Before Purchase) - End */

/* Subscription Page - Start */

.table-container {
    margin-top: 18px;
}

.tabulator {
    padding: 22px 16px;
    border-radius: 6px;
    outline: 1px solid #d9d9d9;
    outline-offset: -1px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tabulator
    .tabulator-header
    .tabulator-col
    .tabulator-col-content
    .tabulator-col-title {
    font-size: 16px;
    font-weight: 700;
    color: #000014;
}

.tabulator .tabulator-header {
    border-bottom: 3px solid #d9d9d9 !important;
}

.tabulator-row .tabulator-cell {
    font-size: 14px;
    font-weight: 400;
    color: #383838;
}

.tabulator .tabulator-row {
    min-height: auto !important;
}

.tabulator .tabulator-cell {
    height: auto !important;
    line-height: 1.4;
    padding-top: 8px;
    padding-bottom: 8px;
}

.tabulator .tabulator-cell{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important
}
.tabulator .tabulator-cell button {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.tabulator .tabulator-cell a {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
.tabulator .tabulator-cell:has([class$="-badge"]),
.tabulator .tabulator-cell:has([class*="-badge "]) {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
/* Reset for divs */

.service-charge {
    padding: 2px 5px;
    background-color: #f5c754;
    border-radius: 3px;
    color: #000;
    font-weight: 600;
    display: inline-block;
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
}

.tabulator-row {
    border-bottom: 1px solid #d9d9d9 !important;
    cursor: default !important;
}

.tabulator-row.tabulator-selectable:hover {
    background: #f8f9fb !important;
}
.table-containter .tabulator .tabulator-tableholder {
    overflow-y: hidden !important;
}

.pay-now-button {
    padding: 8px 25px;
    background: #04a30b;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border: none;
    gap: 8px;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}

.pay-now-button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgb(50, 212, 10) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.pay-now-button:hover::before,
.pay-now-button:active::before,
.pay-now-button:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

.reject-button {
    padding: 8px 25px;
    background: #a31c04;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border: none;
    gap: 8px;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.reject-button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgb(212, 57, 10) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.reject-button:hover::before,
.reject-button:active::before,
.reject-button:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

.manage-button {
    padding: 8px 25px;
    background: #0d6efd;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border: none;
    gap: 8px;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.manage-button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        #4a92ff 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.manage-button:hover::before,
.manage-button:active::before,
.manage-button:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

.add-link-button,
.update-link-button {
    width: 180px;
}

.add-link-button {
    padding: 8px 25px;
    background: #7c3aed;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border: none;
    gap: 8px;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.add-link-button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        #9e6ff0 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.add-link-button:hover::before,
.add-link-button:active::before,
.add-link-button:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

.update-link-button {
    padding: 8px 25px;
    background: #f97316;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border: none;
    gap: 8px;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.update-link-button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        #f7b17f 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.update-link-button:hover::before,
.update-link-button:active::before,
.update-link-button:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

.disabled-button {
    padding: 8px 25px;
    background: #d9d9d9;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border: none;
    gap: 8px;
    flex: 0 0 auto;
}

.paid-button {
    padding: 8px 25px;
    background: #0b6326;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border: none;
    gap: 8px;
}

.history-button {
    padding: 8px 25px;
    background: #ef8262;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border: none;
    gap: 8px;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.history-button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgb(251 58 0) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.history-button:hover::before,
.history-button:active::before,
.history-button:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

.details-button {
    padding: 8px 25px;
    background: #8775ff;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border: none;
    gap: 8px;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.details-button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgb(142 60 217) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.details-button:hover::before,
.details-button:active::before,
.details-button:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

/* Tabulator Extra Css - Start */
.tabulator-tableholder:empty {
    overflow: hidden !important;
}

.tabulator-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0px !important;
}

.tabulator-tableholder:has(.tabulator-placeholder) {
    overflow: hidden !important;
}

.tabulator-tableholder {
    overflow-y: auto;
}

.tabulator-tableholder .tabulator-placeholder {
    position: relative;
}

/* .tabulator-tableholder:not(:empty) {
    overflow-y: auto !important;
} */

/* Tabulator Extra Css - End */

/* Subscription Page - End */

/* My Account - Start */

.form-container {
    margin-top: 20px;
    width: 100%;
}

label {
    font-size: 14px;
    font-weight: 600;
    color: #383838;
}

.field-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 10px;
}

input,
textarea,
select,
.select2-selection--multiple,
.form-select,.custom-dropdown {
    padding: 15px;
    border: 1px solid #d9d9d9 !important;
    border-radius: 6px !important;
    width: 100% !important;
}

input:disabled:hover,
select:disabled:hover,
textarea:disabled:hover,.select2-selection--multiple:disabled:hover,.form-select,.custom-dropdown:disabled:hover {
    background-color: #F5F6F7 !important;
    border-color:  #d9d9d9 !important; ;
    color: inherit !important;
    cursor: not-allowed;
    box-shadow: none !important;
}
.select2-selection--multiple {
    padding: 10px !important;
    margin-top: 4px;
}

input:hover,
textarea:hover,
select:hover,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
input:focus,
textarea:focus,
select:focus,
input:active,
textarea:active,
select:active,
.select2-selection--multiple:hover,
.select2-selection--multiple:active,

.form-select:hover,
.form-select:active,
.form-select:focus,
.form-select:focus-within {
    background-color: #f2f3f8 !important;
    border: 1px solid #878dab !important;
    outline: none;
    
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
input:focus,
textarea:focus,
select:focus,.select2-selection--multiple:focus,
.select2-selection--multiple:focus-visible{
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

/* .select2-container{
    width:100% !important;
} */

.select2-container--default .select2-selection--multiple {
    padding: 13px;
    min-height: 55px;
    margin-top: 0;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
     background-color: #cfe2ff !important;
}

.select2-search__field {
    display: none;
}

.select2-selection__choice__display {
    font-size: 14px;
}

.doc-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.uploaded-general-documents-container .doc-list .doc-name {
    margin-right: auto;
}

.doc-list li {
    background: #f2f3f8;
    border: 1px solid #d9d9d9;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: border-color 0.15s;
    border-radius: 12px;
}

.select2-results__option--selectable span {
    position: relative;
    padding-left: 60px;
    display: inline-block;
    width: 100%;
}

.select2-results__option--selectable span input {
    margin: 0 auto;
    position: absolute;
    left: -46%;
    top: 4px;
}

#permission {
    overflow: hidden;
    height: 53px;
}

#permission option {
    display: none;
}

.upload-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1.5px dashed #bbb;
    border-radius: 7px;
    padding: 15px;
    font-size: 15px;
    color: #515151;
    cursor: pointer;
    transition: border-color 0.15s;
    justify-content: center;
}

.uploaded-items-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.uploaded-items {
    background: #f2f3f8;
    border: 1px solid #d9d9d9;
    padding: 12px 18px;
    padding-left: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: border-color 0.15s;
    position: relative;
    border-radius: 6px;
}

.upload-content,
.upload-details {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 40%;
}

.download-control {
    flex: 0 0 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.footer-actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
}

.btn-save {
    padding: 10px 20px;
    border: 1px solid #195353;
    border-radius: 6px;
    background-color: #195353;
    font-weight: 600;
    color: #fff;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    max-width: 180px;
    width: 100%;
}

.btn-save::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(45, 173, 173, 1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-save:hover::before,
.btn-save:active::before,
.btn-save:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

.btn-cancel {
    padding: 10px 20px;
    border: 1px solid #ababab;
    border-radius: 6px;
    background-color: #ababab;
    font-weight: 600;
    color: #fff;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    max-width: 180px;
    width: 100%;
}

.btn-cancel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgb(95 95 95) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-cancel:hover::before,
.btn-cancel:active::before,
.btn-cancel:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

select {
    text-align: left;
}
select option {
    direction: ltr;
    padding-right: 20px;
}

/* My Account - End */

/* Hover Staff */

.members-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 40px;
    padding: 5px 12px 5px 8px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.members-trigger:hover {
    background: rgba(255, 255, 255, 0.28);
}

.avatar-stack {
    display: flex;
    align-items: center;
}

.av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    margin-left: -7px;
    flex-shrink: 0;
}

.av:first-child {
    margin-left: 0;
}

.av-a {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fef3c7;
}

.av-b {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #ede9fe;
}

.av-c {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #e0f2fe;
}

.trigger-label {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

.chevron {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.chevron.open {
    transform: rotate(180deg);
}

.members-popup {
    display: none;
    position: absolute;
    right: 20px;
    top: calc(100% + 10px);
    width: 260px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
    z-index: 200;
    overflow: hidden;
    animation: popIn 0.18s ease;
}

.members-popup.visible {
    display: flex;
    flex-wrap: wrap;
    max-height: 400px;
    overflow-y: auto;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.popup-head {
    padding: 12px 16px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f3f4f6;
    width: 100%;
}

.popup-head-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

.member-count-badge {
    background: #e8f9f0;
    color: #16a34a;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    transition: background 0.1s;
    cursor: default;
    width: 100%;
}

.member-row:hover {
    background: #f9fafb;
}

.m-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
}

.m-info {
    flex: 1;
    min-width: 0;
}

.m-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

.tag-admin {
    background: #fef3c7;
    color: #92400e;
}

.tag-client {
    background: #ede9fe;
    color: #5b21b6;
}

.tag-staff {
    background: #e0f2fe;
    color: #075985;
}

/* Hover Staff - End  */

/* Notification Panel */

.page-wrap {
    position: absolute;
    top: 5%;
    right: 5%;
    z-index: 100;
    width: 100%;
    max-width: 440px;
}

/* ── Panel ── */
.notif-panel {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding: 0 0 8px;
    overflow: hidden;
    position: relative;
    margin-top: 30px; /* space for the floating bell */
}

/* ── Header ── */
.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px 14px;
}
.notif-header h6 {
    font-size: clamp(15px, 4vw, 17px);
    font-weight: 700;
    color: #111827;
    margin: 0;
    letter-spacing: -0.3px;
}
.gear-btn {
    background: none;
    border: none;
    padding: 0;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}
.gear-btn:hover {
    color: #374151;
}
.gear-btn svg {
    width: 20px;
    height: 20px;
}

/* ── Items ── */
.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 13px 20px;
    border-top: 1px solid #f3f4f6;
    transition: background 0.15s;
    cursor: pointer;
}

.notif-item a {
    display: flex;
    gap: 7px;
    gap:20px;
}
.notif-item:hover {
    background: #fafafa;
}
.notif-item.unread {
    background: #f8f9fb;
}
.notif-item.unread:hover {
    background: #f8f9fb;
}

/* Avatar */
.avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: #6b7280;
    overflow: hidden;
    padding: 25px;
}
.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 20rem;
    background: #000014;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: #6b7280;
    overflow: hidden;
    padding: 25px;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
}
.dot-green {
    background: #22c55e;
}
.dot-blue {
    background: #3b82f6;
}
.dot-orange {
    background: #f97316;
}
.dot-teal {
    background: #14b8a6;
}
.dot-purple {
    background: #a855f7;
}

/* Text */
.notif-body {
    flex: 1;
    min-width: 0;
}
.notif-text {
    font-size: clamp(12.5px, 3.5vw, 13.5px);
    color: #000;
    line-height: 1.5;
    margin: 0 0 4px;
    word-break: break-word;
    font-weight: 500;
}
.notif-text strong {
    color: #111827;
    font-weight: 600;
}
.notif-meta {
    font-size: clamp(10.5px, 2.8vw, 11.5px);
    color: #7f7f7f;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.meta-tag {
    display: inline-flex;
    align-items: center;
    background: #f3f4f6;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: clamp(10px, 2.6vw, 11px);
    color: #6b7280;
    font-weight: 500;
}

/* Kebab */
.kebab-btn {
    background: none;
    border: none;
    padding: 4px 0 4px 6px;
    color: #d1d5db;
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
    /* larger tap area on mobile */
    min-width: 32px;
    min-height: 32px;
    justify-content: center;
}
.kebab-btn:hover {
    color: #6b7280;
}
.kebab-btn svg {
    width: 18px;
    height: 18px;
}

/* Scrollbar polish */
.notif-scroll {
    max-height: 500px;
    overflow-y: unset;
}
.notif-scroll::-webkit-scrollbar {
    width: 4px;
}
.notif-scroll::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 99px;
}
.notify-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 15px;
}
#notifyfooter {
    font-size: 14px;
    font-weight: 400;
    color: #000014;
    cursor: pointer;
}
#notifyfooter:hover {
    font-size: 14px;
    font-weight: 400;
    color: #ca970b;
}

.notification-icon.service-request {
    background-color: #ffeec2;
}

.notification-icon.error {
    background-color: #ffe6e9;
}

.notification-icon.chat {
    background-color: #d3ecf3;
}

.notification-icon.account {
    background-color: #cdefc9;
}
.notification-icon {
    position: absolute;
    top: -4px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 100%;
}

.notify-footer a {
    color: #000;
}

/* End of Notification Panel */

/* Service Request Section -- Start */
.service-request-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 15px;
}
.heading-description {
    margin-left: 35px;
    margin-top: 12px;
}

.new-common-box {
    padding: 15px 30px;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    background-color: #fff;
}

.sub-icon-heading {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sub-icon {
    padding: 10px;
    background: #fffbeb;
    border: 1px solid #f5c754;
    border-radius: 6px;
}

.new-tasks-list-box-section {
    margin-top: 15px;
}

.new-tasks-list-box-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
    gap: 15px;
}

.tasks-list-box-items span {
    white-space: pre-wrap;
}

.service-request-info-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-request-info-card {
    padding: 15px 30px;
    border-radius: 6px;
}

.service-request-info-card:nth-child(1) {
    background-color: #f2eae1;
}
.service-request-info-card:nth-child(2) {
    background-color: #dbece9;
}
.service-request-info-card:nth-child(3) {
    background-color: #e0f2ff;
}

.service-request-info-card {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.service-request-info-card-content {
    display: flex;
    align-items: center;
    gap: 10px;
    border-right: 1px solid #979a9c;
    padding-right: 15px;
}

.service-request-info-card-content p {
    font-size: 20px;
    font-weight: 500;
}

.service-request-info-card-result p {
    font-size: 24px;
    font-weight: 700;
}

.service-request-info-card-result {
    flex: 0 0 auto;
    display: flex;
}

.service-request-info-card-result p {
    flex: 0 0 auto;
}

.payment-description {
    margin-top: 12px;
}

.milestone-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.request-milestone-card {
    padding: 15px 20px;
    background: #f5f6f8;
    border-radius: 9px;
    border-left: 3px solid #b9b9b9;
}

.payment-content {
    border-right: 0.5px solid #b9b9b9;
    border-left: 0.5px solid #b9b9b9;
}

.payment-name {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    position: relative;
    padding-left: 50px;
}

.tab-number {
    padding: 2px 13px;
    background: linear-gradient(
        90deg,
        rgba(194, 194, 194, 1) 0%,
        rgba(252, 252, 252, 1) 100%
    );
    border-radius: 100%;
    position: absolute;
    left: 0;
    box-shadow: 0.5px 0px 1px 1px rgba(0, 0, 0, 0.32);
    font-size: 24px;
    font-weight: 700;
}

.payment-content p {
    padding-right: 5px;
    padding-left: 10px;
}

.milestone-title {
    font-size: 20px;
    font-weight: 500;
}
.payment-price {
    flex: 0 0 auto;
}

.payment-price p {
    font-size: 24px;
    font-weight: 700;
    color: #04a30b;
    word-break: break-all;
    text-align: end;
}

.total-payment-content {
    font-weight: 700;
    border-right: 0.5px solid #b9b9b9;
    margin-right: 25px;
    padding-right: 10px;
    text-align: right;
    margin-left: -10px;
}

.total-payment-price {
    font-size: 24px;
    font-weight: 700;
    word-break: break-all;
    margin-left: -10px;
}

.total-payment-price p {
    color: #04a30b;
}

.service-request-section .total-payement-structure-tab .col-xl-2 {
    text-align: right;
    border-left: 0.5px solid #b9b9b9;
    margin-left: -38px;
}

/* Sticky Bar - Start */

.sticky-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: #2a2a2a;
    padding: 16px;
    display: flex;
    justify-content: center;
    /* z-index: 1000; */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
    width: calc(100% - 285px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 15px;
}

/* The green button */
.request-btn {
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 10px 24px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.request-btn:hover {
    background-color: #218838;
}

/* Sticky Bar - End */

/* Service Request Section -- End */

/* All Service - Start */

.all-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
    align-items: stretch;
}

.all-service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    border-right: 0.5px solid #d9d9d9;
    /* border-radius: 12px; */
    padding: 15px 20px;
    gap: 12px;
}

.all-service-icon-heading {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.all-service-icon-heading h3 {
    font-size: clamp(1rem, 1.2rem + 0.75vw, 1.4rem);
}

.all-service-icon-heading h3 {
    margin: auto 0;
}

.all-service-icon {
    padding: 10px;
    background: #fff;
    border: 1px solid #f9d8bb;
    border-radius: 12px;
}

.all-service-card:hover {
    background: linear-gradient(
        180deg,
        rgba(229, 238, 255, 1) 0%,
        rgba(255, 255, 255, 1) 100%
    );
}

.service-listing {
    overflow: hidden auto;
    padding-right: 10px;
    margin-top: 20px;
}

.service-listing .main-service-container {
    max-height: calc(100vh - 270px);
}

.service-list-heading-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.search-bar-container {
    display: flex;
    width: 350px;
    position: relative;
    padding-left: 15px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
}
.search-bar-container input {
    border: none !important;
    background-color: transparent !important;
}

.search-bar-container input::placeholder {
    font-size: 18px;
    color: #383838;
    font-weight: 500;
}

.search-bar-container input {
    font-size: 18px;
    color: #383838;
    font-weight: 500;
}

.search-bar-container input:focus,.search-bar-container input:focus-visible{
    box-shadow:none;
}

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

.all-service-card .popular-card-important-details {
    border: none;
}

/* All Service - End */

/* Track Your Progress */
.track-prgress-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.track-prgress-content .track-progress-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.track-prgress-content .track-progress-section .overall-progress-bar-section {
    display: flex;
    flex-direction: column;
}

.track-prgress-content .main-progress {
    background-color: #e2e3e5;
    height: 8px;
    border-radius: 6px;
    margin-top: 10px;
}

.track-prgress-content .main-progress .progress-bar {
    background-color: #5990f2;
    height: 8px;
    border-radius: 6px;
    width: 25%;
}

.track-prgress-content .track-progress-section .overall-progress {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.track-prgress-content .overall-progress-heading {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.track-prgress-content
    .track-progress-section
    .overall-progress
    .progress-percent {
    font-size: 20px;
    font-weight: 500;
    color: #000;
}

.milestone-step-section {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.milestone-step-section .milestone-cotainer {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
    overflow-x: auto;
    position: relative;
}

.milestone-step-section .step {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.milestone-step-section .step .milestone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
}

.milestone-step-section .step .milestone .check {
    padding: 18px;
    background-color: #f2f3f8;
    border-radius: 50%;
}

.milestone-step-section .step .milestone .check.completed {
    background-color: #60d669;
}

.milestone-step-section .step .milestone .check.process {
    background-color: #f5c754;
}

.milestone-step-section .step .milestone .check .check-comp {
    display: none;
}

.milestone-step-section .step .milestone .check.completed .check-comp {
    display: block;
}

.milestone-step-section .step .milestone .check.completed .pen-comp {
    display: none;
}

.milestone-step-section .step .milestone .step-name p {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.formation-task-list-section {
    display: flex;
    flex-direction: column;
}

.formation-task-list-section .task-list-heading {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    background-color: #172133;
    border-radius: 12px 12px 0 0;
    padding: 20px 25px;
    border: 1px solid #172133;
}

.formation-task-list-section .task-list-heading .task-list-icon {
    padding: 7px;
    background-color: #fffbeb;
    border: 1px solid #f5c754;
    border-radius: 6px;
}

.formation-task-list-section .task-list-heading .task-heading-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.about-company-formation-content .short-description,
.about-company-formation-content .extended-description {
    color: #515151;
}

.track-task-list-section .task-list-heading .task-heading-content p {
    color: #d9d9d9;
}

.formation-task-list-section .task-list-content-section {
    background-color: #fff;
    border: 1px solid #d9d9d9;
    padding: 20px;
    width: 100%;
    border-radius: 12px;
}

.formation-task-list-section .task-list-container {
    background-color: #f1f5f9;
    border: 1px solid #a3a3a3;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.formation-task-list-section .task-list-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* inner — this scrolls */
.formation-task-list-section .task-list-inner {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.formation-task-list-section .task-list-container .milestone-heading {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    font-weight: 500;
    color: #000;
    font-size: 20px;
}

.formation-task-list-section
    .task-list-container
    .milestone-heading
    .milestone-icon {
    background-color: #fffbeb;
    border: 1px solid #f5c754;
    width: 45px;
    height: 45px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.formation-task-list-section .task-list-container .task-list-content {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 85px;
}

.formation-task-list-section
    .task-list-container
    .task-list-content
    .task-list-item {
    display: flex;
    gap: 10px;
    color: #5c5858;
}

.formation-task-list-section
    .task-list-container
    .task-list-content
    .task-list-item.completed {
    color: #4cca8b;
}

.formation-task-list-section
    .task-list-container
    .task-list-content
    .task-list-item
    .comp-tick {
    display: none;
    width: 20px;
    height: 20px;
}

.formation-task-list-section
    .task-list-container
    .task-list-content
    .task-list-item.completed
    .comp-tick {
    display: block;
    width: 20px;
    height: 20px;
}

.formation-task-list-section
    .task-list-container
    .task-list-content
    .task-list-item.completed
    .pen-tick {
    display: none;
    width: 20px;
    height: 20px;
}

.formation-task-list-section .download-documents-section {
    background-color: #f1f5f9;
    border: 1px solid #a3a3a3;
    /* padding: 15px 0; */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* height: 100%; */
    padding-bottom: 0;
}

.formation-task-list-section
    .download-documents-section
    .download-heading-section {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 5px !important;
}

.formation-task-list-section .download-innner {
    overflow-y: auto;
}

.formation-task-list-section .download-innner .download-content {
    /* max-height: 100px; */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.formation-task-list-section .download-documents-section .download-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d9d9d9;
    padding: 0 8px;
    padding: 10px;
}

.formation-task-list-section
    .download-documents-section
    .download-item:first-child {
    border: none;
}

.formation-task-list-section
    .download-documents-section
    .download-item:nth-child(2) {
    border-top: 1px solid #d9d9d9;
}

.formation-task-list-section
    .download-documents-section
    .download-item:last-child {
    border-bottom: none;
}

.formation-task-list-section
    .download-documents-section
    .download-item
    .download-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.formation-task-list-section .upload-documents-section {
    padding: 20px;
    background-color: #f1f5f9;
    border: 1px solid #a3a3a3;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.formation-task-list-section .upload-documents-section .upload-heading-section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.formation-task-list-section .upload-documents-section .main-upload {
    width: 100%;
}

.formation-task-list-section .upload-documents-section .main-upload form {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.formation-task-list-section
    .upload-documents-section
    .main-upload
    form
    .upload-fields {
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: start;
    position: relative;
    padding-right: 20px;
}

.formation-task-list-section
    .upload-documents-section
    .main-upload
    form
    .upload-fields
    .upload-file-name {
    display: flex;
    flex-direction: column;
    width: 60%;
}

.formation-task-list-section
    .upload-documents-section
    .main-upload
    form
    .upload-fields
    .upload-file-name
    input {
    border-radius: 6px;
    padding: 8px;
    border: 1px solid #f5c754;
}

.formation-task-list-section
    .upload-documents-section
    .main-upload
    form
    .upload-fields
    .upload-file-name
    input::placeholder {
    font-size: 15px;
    text-align: start;
}

.formation-task-list-section
    .upload-documents-section
    .main-upload
    form
    .upload-fields
    .upload-file-section {
    width: 40%;
    text-align: center;
}

.formation-task-list-section
    .upload-documents-section
    .main-upload
    form
    .upload-fields
    .upload-file {
    padding: 8px;
    border: 1px dashed #a3a3a3;
    background-color: #fff;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.formation-task-list-section
    .upload-documents-section
    .main-upload
    form
    .upload-fields
    .upload-file-name
    small {
    align-self: flex-end;
}

.formation-task-list-section
    .upload-documents-section
    .main-upload
    form
    .upload-fields
    small {
    font-size: 12px;
    color: #515151;
}

.formation-task-list-section .upload-documents-section .main-upload .add-field {
    padding: 0 10px;
    position: absolute;
    right: -15px;
    padding: 0;
    border: 0;
    background-color: transparent;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.formation-task-list-section .upload-documents-section .uploaded-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    position: relative;
    padding-left: 30px;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items
    .upload-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items
    .pdf-icon {
    position: absolute;
    left: 2px;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items
    .upload-content
    p {
    font-family: var(--seondary-font);
    font-size: 14px;
    color: #535151;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items
    .upload-details
    p {
    font-family: var(--seondary-font);
    font-size: 12px;
    color: #8e8a8a;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items.processsing
    .upload-content
    .upload-name {
    display: flex;
    gap: 8px;
    align-items: center;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items.processing {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    padding-left: 30px;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items.processing
    .upload-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items.processing
    .upload-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items.processing
    .upload-name
    .pdf-icon {
    position: absolute;
    left: 0;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items.processing
    .processing-percent {
    font-family: var(--seondary-font);
    font-size: 14px;
    color: #535151;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items.processing
    .processing-details {
    border: 2px solid #d0cbcb;
    width: 100%;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items.processing
    .processing-details {
    background-color: #d0cbcb;
    height: 2px;
    border: none;
}

.formation-task-list-section
    .upload-documents-section
    .uploaded-items.processing
    .processing-details
    .processing-line {
    width: 50%;
    background-color: #f5c754;
    height: 2px;
}

.track-prgress-content .milestone-section .payment-structure-content {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payement-structure-tab {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #f8fafc;
    padding: 15px 10px;
    border-radius: 12px;
    border: 1px solid #d9d9d9;
    gap: 10px;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payement-structure-tab.completed {
    background-color: #f5fff9;
    border: 1px solid #60d669;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payement-structure-tab.completed
    .tab-number {
    background-color: #60d669;
    padding: 18px;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payement-structure-tab.completed
    .tab-number
    img {
    display: block;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payement-structure-tab.completed
    .tab-number
    span {
    display: none;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payement-structure-tab.process {
    background-color: #fffbeb;
    border: 1px solid #f5c754;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payement-structure-tab.process
    .tab-number {
    background-color: #ca970b;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payment-tab-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payment-tab-content
    .tab-number {
    padding: 10px 20px;
    font-size: 24px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #10192c;
    border-radius: 100%;
    font-weight: 600;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payment-tab-content
    .tab-number
    img {
    display: none;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payment-tab-content
    .payment-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payment-tab-content
    .payment-content
    h5 {
    font-size: 20px;
    margin-bottom: 0;
    color: #000;
    font-weight: 500;
}

.track-prgress-content .milestone-section .payment-structure .payment-price {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    flex: 0 0 auto;
}

.track-prgress-content
    .milestone-section
    .payment-structure
    .payement-structure-tab
    .payment-price
    h4 {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin-bottom: 0;
    flex: 0 0 auto;
}

.total-payement-structure-tab .payment-price h4 {
    display: flex;
    flex: 0 0 auto;
}

/* topbar - Service Details */
.serivce-details-topbar {
    margin: 20px 0;
    padding: 20px 25px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 12px;
    gap: 25px;
    flex-wrap: wrap;
}

.service-side {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border-right: 1px solid #d9d9d9;
    padding-right: 15px;
    width: 100%;
    max-width: 25%;
}

.service-icon {
    padding: 10px;
    background-color: #fffbeb;
    border-radius: 6px;
    border: 1px solid #f5c754;
}

.info-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.status-large {
    padding: 7px 40px;
}

.status-small {
    padding: 5px 20px;
    border-radius: 6px;
}

.client-details-top-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-service-side {
    display: flex;
    align-items: center;
    gap: 10px;
}

.new-service-heading {
    display: flex;
    flex-direction: column;
}

.details-header {
    border-bottom: 1px solid #d9d9d9;
}
.details-body {
    margin-top: 20px;
}
.details-items {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 0;
    margin-bottom: 15px;
}

.service-heading {
    display: flex;
    flex-direction: column;
    /* text-align: center; */
}

.service-heading div {
    margin-top: 15px;
}
.success-stick {
    background-color: #e0f6e8;
    color: #45c276;
}

.service-details-side {
    padding-left: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    width: calc(100% - 30%);
}

.service-details-item {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    position: relative;
    gap: 5px;
    padding-left: 25px;
}

.service-details-item:last-child {
    position: relative;
}

.service-details-item .edit-icon {
    position: absolute;
    right: 100px;
    top: -5px;
}

.service-details-item img {
    position: absolute;
    top: 0px;
    left: 0px;
}

.service-details-item p {
    font-size: 14px;
}

.service-details-item p:last-child {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
}

.service-details-item .shirt-description,
.service-details-item .extended-description {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
}

.service-details-item .view-btn {
    display: inline-block;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #ca970b;
}


.view-btn {
    display: inline-block;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #ca970b;
}

.task-new-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.task-new-container {
    padding: 15px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #f8f9fb;
}

.task-new-not-approve-container {
    padding: 0;
    border: none;
    border-radius: 0;
    background: white;
}

.task-new-not-approve-container .sub-icon-heading h4 {
    font-size: 20px;
    font-weight: 500;
}

.track-progress-section-wrapper .tasks-list-box-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(60px, 1fr));
    justify-content: flex-start;
    margin-top: 20px;
    gap: 10px;
    margin-bottom: 20px;
}

.tasks-list-box-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    justify-content: flex-start;
    margin-top: 20px;
    gap: 10px;
    /* margin-bottom: 20px; */
}

.tasks-list-box-items {
    margin-bottom: 10px;
    position: relative;
    margin-left: 20px;
    padding-right:55px;
}

.tasks-list-box-items.completed svg path {
    fill: #43a047;
}
.tasks-list-box-items.completed span {
    color: #43a047;
}

.tasks-list-box-items.process svg path {
    fill: #ca970b;
}

.tasks-list-box-items.process span {
    color: #ca970b;
}

.form-list-showcase {
    margin-top: 15px;
}

.form-list-header {
    display: flex;
    gap: 8px;
    align-items: center;
}

.form-list-header h5 {
    font-size: 16px;
    color: #000000;
    font-weight: 600;
    margin: 0;
}

.form-list-body {
    margin-top: 15px;
}

.task-list-box-icon {
    position: absolute;
    top: 5px;
    left: -23px;
}

.task-new-container .sub-icon-heading h4 {
    font-size: 20px;
    font-weight: 500;
}

.pdf-icon {
    display: flex;
    gap: 5px;
    position: relative;
}
/* .new-list-table-wrapper tbody tr td{
        white-space: pre-wrap;
} */

.pdf-icon svg,
.pdf-icon img {
    position: absolute;
    top: 0;
    left: 0;
}

.pdf-icon p {
    margin-left: 25px;
}

.new-list-table-wrapper thead tr th:first-child,
.new-list-table-wrapper thead tr th:last-child,
.new-list-table-wrapper tbody tr td:first-child,
.new-list-table-wrapper tbody tr td:last-child {
    border-radius: 0;
}

.new-list-table-wrapper thead tr th:first-child,
.new-list-table-wrapper tbody tr td:first-child {
    width: 60%;
    white-space: normal;
    word-break: break-all;
}

.new-list-table-wrapper thead tr th:nth-child(2),
.new-list-table-wrapper thead tr th:last-child,
.new-list-table-wrapper tbody tr td:nth-child(2),
.new-list-table-wrapper thead tr th:last-child {
    width: 20%;
    white-space: normal;
    word-break: break-all;
}

.form-list-body .table-responsive {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    padding: 15px;
    background: #fff;
}

.form-list-body .table-responsive .table {
    margin-bottom: 0;
    min-width: 520px;
}

.table-responsive .table thead tr th {
    border-bottom: 3px solid #d9d9d9;
}

.table-responsive .table tbody tr td {
    padding: 15px 0.5rem;
}

.table-responsive .table tbody tr {
    border-bottom: 1px solid #d9d9d9;
}

.table-responsive .table tbody tr:hover td {
    background-color: #e9ebf3;
}

.table-responsive .table tr td {
    font-size: 14px;
    color: #515151;
}

.form-list-body .table-responsive thead tr {
    border-bottom: 3px solid #d9d9d9;
}

.new-list-table-wrapper tbody tr td,
.new-list-table-wrapper tbody tr td p {
    font-size: 14px;
    color: #515151;
}

.new-list-table-wrapper.added-new-task-list thead tr th:first-child,
.new-list-table-wrapper.added-new-task-list tbody tr td:first-child {
    width: 30%;
    white-space: normal;
    word-break: break-all;
}

.new-list-table-wrapper.added-new-task-list thead tr th:nth-child(2),
.new-list-table-wrapper.added-new-task-list thead tr th:last-child,
.new-list-table-wrapper.added-new-task-list tbody tr td:nth-child(2),
.new-list-table-wrapper.added-new-task-list thead tr th:last-child {
    width: 15%;
    white-space: normal;
    word-break: break-all;
}

.new-list-table-wrapper.added-new-task-list thead tr th:nth-child(3),
.new-list-table-wrapper.added-new-task-list tbody tr td:nth-child(3) {
    width: 40%;
    white-space: normal;
    word-break: break-all;
}

.form-box-container.transparent-bg {
    background-color: transparent;
    border: none;
    padding: 0;
}

.phase-container > p {
    color: #000014;
    font-weight: 500;
    font-size: 14px;
    margin: 0;
}

.phase-container p span {
    font-weight: 700;
    font-size: 16px;
    color: #f95e00;
}

.overall-progress-text {
    font-size: 14px;
    margin: 0;
}

.progress-percent {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.phase-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.formation-task-list-section .task-list-container.task-list-new-container {
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 0 15px 0;
}

.custom-select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #a3a3a3;
    background: #fff;
    font-size: 15px;
    color: #4b5563;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='14' viewBox='0 0 27 14' fill='none'%3E%3Cpath d='M19.2808 2.73586L20.4572 3.90591L14.0865 10.3196C13.9844 10.423 13.8629 10.5052 13.7289 10.5614C13.595 10.6177 13.4512 10.6469 13.3059 10.6473C13.1606 10.6478 13.0167 10.6195 12.8824 10.5641C12.7481 10.5087 12.626 10.4273 12.5233 10.3246L6.10847 3.95165L7.27741 2.77523L13.2982 8.7567L19.2808 2.73586Z' fill='%23515151'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.custom-select:focus {
    outline: none;
    border-color: #ca970b;
    box-shadow: 0 0 0 2px rgba(43, 125, 233, 0.15);
}

.custom-input {
    width: 100%;
    border-radius: 6px;
    padding: 12px 14px;
    color: #000;
    border: 1px solid #a3a3a3;
}

.custom-input::placeholder {
    font-size: 14px;
}

.custom-input:focus,
.custom-input:hover,
.custom-input:active {
    border: 1px solid #ca970b;
 
}


.label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #515151;
    margin-bottom: 8px;
    font-size: 15px;
}

.label-row svg {
    width: 18px;
    height: 18px;
    color: #7c8aa5;
}

.service-request-milestone .payment-name {
    border: none;
}

.service-request-milestone .payment-content {
    border: none;
}

.service-request-milestone .payment-price {
    justify-content: end;
    gap: 15px;
    flex-wrap: wrap;
}

.milestone-container .small-info-box.process .tab-number {
    background-color: #ca970b;
}

.additional-new-task-list-table-wrapper tr th:first-child,
.additional-new-task-list-table-wrapper tr td:first-child {
    width: 30%;
    white-space: normal;
    word-break: break-all;
}

.additional-new-task-list-table-wrapper tr th:nth-child(2),
.additional-new-task-list-table-wrapper tr td:nth-child(2) {
    width: 20%;
    white-space: normal;
    word-break: break-all;
}

.additional-new-task-list-table-wrapper tr th:last-child,
.additional-new-task-list-table-wrapper tr td:last-child {
    width: 50%;
    white-space: normal;
    word-break: break-all;
}

tr.process td {
    background-color: #fffbeb !important;
}

tr.completed td {
    background-color: #f5fff9 !important;
}

.service-request-details-milestone-container {
    margin-top: 0;
}

.service-request-details-milestone-container .payment-content {
    border: none;
    margin-top: 15px;
}

.request-milestone-card {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.track-progress-section-wrapper .payment-content {
    border: none;
}

.request-milestone-card .payment-price {
    flex: 0 0 auto;
}

.task-list-content-section .milestone-container {
    margin-top: 0;
}

.total-payement-structure-tab {
    display: flex;
    justify-content: end;
    align-items: center;
    /* margin-left: -10px; */
    width: 100%;
    border-top: 3px solid #d9d9d9;
    /* border-radius: 9px; */
    padding-top: 11px;
}

.track-progress-section-wrapper .payment-content p {
    padding-left: 50px;
}

.track-progress-section-wrapper .tab-number {
    top: 25%;
}

.track-progress-section-wrapper .total-payement-structure-tab {
    padding-right: 20px;
}

.track-progress-section-wrapper .payment-price p {
    color: #000;
}

.track-progress-section-wrapper .process .request-milestone-card {
    border-left: 3px solid #f5c754;
}

.track-progress-section-wrapper .process .tab-number {
    background: linear-gradient(90deg, #f5c754 0%, rgba(252, 252, 252, 1) 100%);
}

.track-progress-section-wrapper .process .payment-price p {
    color: #b58e2c;
}

.track-progress-section-wrapper .completed .request-milestone-card {
    border-left: 3px solid #04a30b;
}

.track-progress-section-wrapper .completed .tab-number {
    background: linear-gradient(90deg, #04a30b 0%, rgba(252, 252, 252, 1) 100%);
}

.track-progress-section-wrapper .completed .payment-price p {
    color: #04a30b;
}

.track-progress-section-wrapper .chat-footer{
    width:100%;
}


/* End of Track Progress Section */

/* Notes Table  */
.notes-table {
    margin-top: 15px !important;
    /* border-spacing: 10px !important; */
    min-width: 380px !important;
}
.notes-table tbody tr {
    /* margin-bottom: 5px !important; */
    border: 0px solid #d9d9d9 !important;
    display: block !important;
    margin-bottom: 10px !important;
}
.notes-table tbody tr td {
    background: #1850500f !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    position: relative !important;
    width:100vw !important;
}

.notes-table tbody tr td span,
.notes-table tbody tr td p {
    font-size: 16px !important;
}
.notes-table a.delete-btn {
    position: absolute;
    top: 7px;
    right: 9px;
    margin-left: 10px;
}

.notes-table .pdf-icon img {
    width: 20px !important;
}
/* End of Notes Table */
/* End of Track of Progress */

/* Messageing */

.chat-wrapper {
    background: #ededee;
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 0;
}

.chat-wrapper p {
    margin-bottom: 0px;
}

/* Header */

.chat-header {
    background: #1c6566;
    padding: 15px 20px;
    border-radius: 12px 12px 0 0;
}

/* Chat area */

.chat-body {
    overflow-y: auto;
    padding: 25px;
    transition: height 0.3s ease;
    min-height: 500px;
    max-height: 670px;
    overflow-y: auto;
}

.day {
    font-family: var(--secondary-font);
    color: #494949;
    font-size: 14px;
}

/* Chat bubble */

.chat-bubble-left {
    max-width: 350px;
    border-radius: 6px;
    padding: 6px 50px 25px 15px;
    font-size: 14px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
}

.chat-bubble-right {
    max-width: 350px;
    padding: 6px 50px 25px 15px;
    border-radius: 6px;
    font-size: 14px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
    margin: 0 0 0 auto;
    position: relative;
}

.chat-bubble-left p,
.chat-bubble-left strong {
    word-break: break-all;
}

.chat-bubble-right p {
    text-align: left;
    word-break: break-all;
}

.chat-right-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Left bubble */

.chat-left {
    background: #ffffff;
}

/* Right bubble */

.chat-right {
    background: #000000;
    color: #ffffff;
    background-color: #007aff;
    min-width: 80px;
}

.chat-bubble-right.chat-right .icon-msg {
    position: absolute;
    right: -15px;
    top: 0;
}

.chat-bubble-right.chat-right {
    position: relative;
}

.chat-bubble-left.chat-left {
    position: relative;
}

.chat-left .icon-msg {
    position: absolute;
    top: -3px;
    left: -12px;
}

.chat-right p {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: left;
}

/* Timestamp */

.chat-right + .chat-time {
    color: #fff;
}

.chat-left + .chat-time {
    color: #515151;
}

.chat-time {
    position: absolute;
    right: 3%;
    bottom: 5%;
    font-size: 12px;
    margin-top: 4px;
}

/* Footer */

.chat-footer {
    background: #ededee;
    padding: 12px;
}

.chat-input {
    border: none;
    border-radius: 6px;
    padding: 20px;
    width: 100%;
}

.chat-input:focus {
    outline: none;
}

.send-btn {
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
}

button#sendMessageBtn {
    position: absolute;
    top: 10%;
    right: 1%;
    padding: 14px;
    background: #007aff;
}

.user-name {
    font-size: 20px;
    color: #ffffff;
    font-weight: 700;
    margin-right: 40px;
}

.user-status {
    font-size: 14px;
    color: #515151;
    font-weight: 400;
}

.members-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 40px;
    padding: 5px 12px 5px 8px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}
.members-trigger:hover {
    background: rgba(255, 255, 255, 0.28);
}

.avatar-stack {
    display: flex;
    align-items: center;
}
.av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    margin-left: -7px;
    flex-shrink: 0;
}
.av:first-child {
    margin-left: 0;
}
.av-a {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fef3c7;
}
.av-b {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #ede9fe;
}
.av-c {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #e0f2fe;
}

.trigger-label {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

.chevron {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.chevron.open {
    transform: rotate(180deg);
}
.members-popup {
    display: none;
    position: absolute;
    right: 20px;
    top: calc(100% + 10px);
    width: 260px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
    z-index: 200;
    overflow: hidden;
    animation: popIn 0.18s ease;
}
.members-popup.visible {
    display: flex;
    flex-wrap: wrap;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.popup-head {
    padding: 12px 16px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f3f4f6;
    width: 100%;
}
.popup-head-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}
.member-count-badge {
    background: #e8f9f0;
    color: #16a34a;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    transition: background 0.1s;
    cursor: default;
    width: 100%;
}
.member-row:hover {
    background: #f9fafb;
}

.m-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
}
.m-info {
    flex: 1;
    min-width: 0;
}
.m-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}
.tag-admin {
    background: #fef3c7;
    color: #92400e;
}
.tag-client {
    background: #ede9fe;
    color: #5b21b6;
}
.tag-staff {
    background: #e0f2fe;
    color: #075985;
}

/* End of Chat */

.tabulator-cell a[data-action="message"] {
    background-color: #000000;
    padding: 0.2rem 2rem;
    color: #ffffff;
    border: 1px solid #000000;
    font-size: 16px;
    font-weight: 500;
    outline: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    color: #ffffff !important;
}

.tabulator-cell a[data-action="message"]:hover {
    background-color: var(--primary-hover-color);
}

/* End of Message */

/* Notification Page - Start */
.notification-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    width: 100%;
    flex-direction: column;
}

.notification-item {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 15px 15px;
    width: 100vw;
    margin-left: 15px;
    align-items: center;
    border: 1px solid #efefef;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.notification-item.unread {
    background-color: #f2f3f8;
    border: 1px solid #efefef;
}

.notification-item:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.notification-content {
    position: relative;
    padding-left: 70px;
}

.notification-icon {
    position: absolute;
    top: -4px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #d3f3dc;
    border-radius: 10px;
}

.notification-icon.service-request {
    background-color: #ffeec2;
}

.notification-icon.error {
    background-color: #ffe6e9;
}

.notification-icon.chat {
    background-color: #d3ecf3;
}

.notification-icon.account {
    background-color: #cdefc9;
}

.notification-details {
    display: flex;
    gap: 3px;
    flex-direction: column;
}

.notification-item h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.notification-item p {
    color: #5c5858;
    margin-bottom: 0;
}

.notification-time {
    text-align: right;
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-time p {
    font-size: 12px;
    color: #999;
}

.badge-count-unread {
    /* display: inline-block; */
    background-color: #fceee2;
    color: #963525;
    border-radius: 50%;
    margin: 0;
    line-height: 1;

    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    margin-left: 8px;
    line-height: 1;
    font-weight: 700;
}

.badge-count-read {
    /* display: inline-block; */
    background-color: #eff3ff;
    color: #2f6c8a;
    border-radius: 50%;
    margin: 0;
    line-height: 1;

    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    margin-left: 8px;
    line-height: 1;
    font-weight: 700;
}
.badge-count-all {
    /* display: inline-block; */
    background-color: #e9f7ec;
    color: #2e5836;
    border-radius: 50%;
    margin: 0;
    line-height: 1;

    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    margin-left: 8px;
    line-height: 1;
    font-weight: 700;
}

.badge-count-inactive {
    /* display: inline-block; */
    background-color: #bbbbbb;
    color: #ececec;
    border-radius: 50%;
    margin: 0;
    line-height: 1;

    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    margin-left: 8px;
    line-height: 1;
    font-weight: 700;
}

.badge-count-pending {
    /* display: inline-block; */
    background-color: #feffb0;
    color: #545403;
    border-radius: 50%;
    margin: 0;
    line-height: 1;

    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    margin-left: 8px;
    line-height: 1;
    font-weight: 700;
}

.pagination {
    justify-content: center;
    margin-top: 30px;
}

.dropdown-menu {
    min-width: 120px;
    z-index: 2;
}
.clients-tabs .nav-link {
    padding: 0;
    display: flex;
    background-color: transparent;
    border-bottom: 3px solid #b9b9b9;
    padding: 10px 20px;
}
.clients-tabs .nav-link p {
    font-weight: 500;
}

.clients-tabs .nav-link:hover,
.clients-tabs .nav-link:active,
.clients-tabs .nav-link:focus,
.clients-tabs .nav-tab-link-active {
    border-bottom: 3px solid #195353;
}
/* .clients-tabs .nav-item{
    margin-right: 10px;
} */

/* Notification Page End */

/* T&C Modal - Buy Service */
.swal2-popup:has(.tandc-popup) {
    max-width:800px;
}
.tandc-popup ul,
.tandc-popup ul li {
    list-style: unset !important;
}
.tandc-popup ul {
    margin-top: 15px;
    margin-bottom: 15px;
}
.tandc-popup ul li {
    margin-left: 25px;
    margin-bottom: 5px;
    color: #000;
}

.tandc-popup p {
    margin-bottom: 5px;
    font-size: 16px;
    color: #000;
}

.tandc-popup #termsContainer {
    max-height: 250px;
    overflow-y: auto;
    padding: 15px;
    border: 1px solid #8d8d8d;
    border-radius: 8px;
    background: #0d2b2c0a;
    text-align: left;
}

.tandc-popup .text-start h5 {
    font-size: 23px;
    color: #000;
}

.trans-title{
    font-size:32px;
}
/* End T&C Modal - Buy Service */


/* Reason Modal */

.rejection-i-button{
    max-width:800px;
}
/* End of Reason Modal */


/* custom dropdown talk to expert */
.contact-modal .modal-body {
    text-align: left;
}

.contact-modal .field-optional {
    font-size: 13px;
    font-weight: 500;
    color: #878dab;
}

#contactModal #expertService {
    overflow: hidden;
    height: 53px;
}

#contactModal #expertService option {
    display: none;
}

#contactModal .select2-container {
    z-index: 1060 !important;
}

#contactModal .select2-dropdown {
    z-index: 1061 !important;
}

/* Expert service multi-select — match permission select2 chips */
#contactModal .expert-service-select + .select2-container--default .select2-selection--multiple {
    padding: 3px !important;
    height: 70px !important;
    margin-top: 0 !important;
    border: 1px solid #a3a3a3 !important;
    border-radius: 8px !important;
    background: #fff;
    overflow-y: auto;
}
.expert-multi-select-sec span.select2-selection.select2-selection--multiple.select2-selection--clearable ul#select2-expertService-container {
    display: flex;
    padding-right: 20px;
    flex-wrap: wrap;
}

#contactModal .modal-header .modal-icon{
    border-radius: 25%;
    padding:21px 20px;
} 

#contactModal .expert-service-select + .select2-container--default .select2-selection--multiple:hover,
#contactModal .expert-service-select + .select2-container--default.select2-container--open .select2-selection--multiple,
#contactModal .expert-service-select + .select2-container--default .select2-selection--multiple:focus {
    background-color: #f2f3f8 !important;
    border-color: #878dab !important;
    outline: none;
}

#contactModal .expert-service-select + .select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 3px 20px;
    margin: 4px;
    padding-right: 6px;
}

#contactModal .expert-service-select + .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    padding: 3px 4px;
}

#contactModal .expert-service-select + .select2-container--default .select2-selection--multiple .select2-selection__choice__display,
#contactModal .expert-service-select + .select2-container--default .select2-selection--multiple .expert-service-selection {
    font-size: 14px;
}

#contactModal .expert-service-select + .select2-container--default .select2-selection--multiple .select2-search--inline {
    margin: 0;
}

#contactModal .expert-service-select + .select2-container--default .select2-selection--multiple .select2-search__field {
    display: none !important;
}

#contactModal .expert-service-select + .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #878dab;
    font-size: 15px;
    line-height: 1.5;
}

#contactModal .select2-dropdown.expert-service-dropdown .select2-results__option--selectable .expert-service-option,
#contactModal .select2-dropdown.expert-service-dropdown .select2-results__option--selectable .expert-service-option-main,
#contactModal .select2-dropdown.expert-service-dropdown .select2-results__option--selectable .expert-service-name {
    position: static !important;
    padding-left: 0 !important;
    width: auto;
}

#contactModal .select2-dropdown.expert-service-dropdown .select2-results__option--selectable .expert-service-checkbox {
    /* position: static !important; */
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

#contactModal .expert-service-option-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.contact-modal .expert-service-select + .select2-container--default .select2-selection--single {
    padding: 12px 40px 12px 14px;
    min-height: 48px;
    height: auto;
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
}

.contact-modal .expert-service-select + .select2-container--default .select2-selection--single:hover,
.contact-modal .expert-service-select + .select2-container--default.select2-container--open .select2-selection--single,
.contact-modal .expert-service-select + .select2-container--default .select2-selection--single:focus {
    background-color: #f2f3f8 !important;
    border-color: #878dab !important;
    outline: none;
}

.contact-modal .expert-service-select + .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    padding-right: 8px;
    line-height: 1.5;
    /* width: 100%; */
    text-align:left;
}

#contactModal .select2-results__option--selectable span{
    padding-left: 0 !important;
}
#contactModal .select2-results__option--selectable{
    display:flex;
    justify-content:space-between;
}
#contactModal .success-badge{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 118px;
    width: 100%;
    max-width: fit-content;
    padding: 0;
}

#contactModal .pending-badge{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 118px;
    width: 100%;
    max-width: fit-content;
    padding: 0;
}


.contact-modal .expert-service-select + .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #878dab;
    font-size: 15px;
}

.contact-modal .expert-service-select + .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 12px;
    top: 0;
}

.contact-modal .expert-service-select + .select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 6px;
    color: #878dab;
    font-size: 18px;
    line-height: 1;
}

.contact-modal .select2-dropdown.expert-service-dropdown {
    border: 1px solid #878dab;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.contact-modal .select2-dropdown.expert-service-dropdown .select2-search--dropdown {
    padding: 10px 12px 6px;
}

.contact-modal .select2-dropdown.expert-service-dropdown .select2-search__field {
    display: block;
    padding: 10px 12px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 6px !important;
    font-size: 14px;
    color: #383838;
}

.contact-modal .select2-dropdown.expert-service-dropdown .select2-search__field:focus {
    border-color: #878dab !important;
    outline: none;
}

.contact-modal .select2-results__option {
    padding: 11px 14px;
}

.contact-modal .select2-results__option--highlighted {
    background-color: #f2f3f8 !important;
    color: #383838 !important;
}

.contact-modal .select2-results__option--highlighted .expert-service-name {
    color: #383838;
}

#contactModal .expert-service-option {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100% !important;
}

.expert-service-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000;
    font-size: 16px;
    font-weight: 400;
}

.subscribed-tag {
    flex-shrink: 0;
    padding: 3px 10px;
    background-color: #2e7d32;
    color: #ffffff;
    font-weight: 600;
    font-size: 11px;
    border-radius: 999px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    white-space: nowrap;
}


/* New Service Request - Design */

.service-request-section-wrapper .new-service-details-topbar{
    flex-direction:column;
    max-width: none;
}
.service-request-section-wrapper .new-service-details-topbar .service-side{
    max-width:none;
    border:none;
    justify-content: space-between;
    flex-direction:row;
    flex-wrap:wrap;
    align-items: center;
}

.service-request-section-wrapper .new-service-details-topbar .service-details-side{
    width:100%;
    padding-left:0;
    border-radius: 6px;
    border: 1px solid #d9d9d9;
    background: #f8f9fb;
    padding:15px;
}
.service-request-section-wrapper .new-service-details-topbar .status-button-container{
    display:flex;
    flex-direction:row-reverse;
    align-items:center;
    justify-content: center;
    gap:20px;
    flex-wrap:wrap;
}

.service-request-section-wrapper .new-service-details-topbar .btn-wrap{
    margin:0;
}

.service-request-section-wrapper .new-service-details-topbar .service-details-item .edit-icon{
    position:relative;
    right:unset;
    top:unset;
}

.service-request-section-wrapper .new-service-details-topbar  .edit-container{
    display:flex;
    align-items: center;
    gap:10px;
}

.service-request-section-wrapper .new-service-details-topbar .staff-assigned-edit-icon{
    position:relative;
    right:unset;
    top:unset;
}

.new-service-details-topbar .service-header-service-request{
    display:flex;
    justify-content:center;
    align-items:start;
    gap:10px;
}

.task-list-service-request-details {
    padding-right: 0;
}

.task-list-service-request-details>* {
    padding-right: 0;
}

.payment-structure-service-request-details{
    padding-bottom: 50px;
}

.request-milestone-card .col-xl-2 {
    margin-bottom: auto;
    height: 100%;
}


.additional-task-new-container{
    margin-top:10px;
}



/* End New Service Request - Design */


/* ======================================End of Client====================================== */
/* ===============================Login & Register========================================== */

/* Start Of Login Page */

.login .form-side,
.register .form-side {
    background-color: #ffffff;
}

.login .form-side h1 {
    font-family: "Roboto", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 30px;
    color: #000;
}

.register .form-side h1 {
    font-family: "Roboto", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 30px;
    color: #000;
}

.login .row > *,
.register .row > * {
    padding-right: 0px;
    padding-left: 0px;
}

.login .form-side .logo-icon,
.register .form-side .logo-icon {
    width: 100%;
    max-width: 200px;
}

.login .form-side .login-to-continue {
    font-size: 24px;
    font-weight: 500;
    color: #000;
}
.login .form-container {
    height: 100%;
    width: 100%;
    padding: 5rem 2.5rem 5rem 7rem;
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 0;
}

.login .form-side label {
    font-size: 18px;
    font-weight: 500;
    color: #000;
}

.register .form-side label {
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

.register .form-side label {
    margin-bottom: 0.3rem;
}

.login .form-container .input-group input,
.register .form-container .input-group input,
.register .form-container .input-group textarea,
.register .form-container .input-group select {
    border: none;
    background-color: transparent;
}

.login .form-container img,
.register .form-container img {
    width: 30px;
}

/* .login form,.register form{
    max-width: 650px;
} */

.login .form-container .input-group,
.register .form-container .input-group {
    background-color: #d9d9d9;
}

.login .form-container .input-group input,
.register .form-container .input-group input,
.register .form-container .input-group textarea,
.register .form-container .input-group select {
    font-size: 20px;
    font-weight: 500;
    color: #000;
}

.login .form-container p a,
.register .form-container p a {
    color: #195353;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
}

.login .form-container p a:hover,
.register .form-container p a:hover {
    color: #000014;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
}

.register .image-side {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* border-radius: 32px 0px 0px 32px; */
    background-color: #c2ad7e;
    /* padding: 0rem 2.5rem; */
    overflow: hidden;
    background: url("/new-images/register-image.webp");
    background-size: cover;
    background-repeat: no-repeat;
}

.login .image-side {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* border-radius: 32px 0px 0px 32px; */
    background-color: #c2ad7e;
    /* padding: 0rem 2.5rem; */
    overflow: hidden;
    background: url("/new-images/login-new-image.webp");
    background-size: cover;
    background-repeat: no-repeat;
}

.login .image-side img,
.register .image-side img {
    height: 100%;
    width: 100%;
}

.login .form-container .input-group input,
.register .form-container .input-group input,
.register .form-container .input-group textarea,
.register .form-container .input-group select {
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

.login small,
.register small {
    font-size: 12px;
}

.login .form-container .input-group input::placeholder,
.register .form-container .input-group input::placeholder,
.register .form-container .input-group textarea::placeholder,
.register .form-container .input-group select::placeholder {
    font-size: 16px;
    color: #d9d9d9;
    font-weight: 400;
}

.login .form-container .form-control:focus,
.register .form-container .form-control:focus,
.register .form-container .form-select:focus {
    box-shadow: none;
}

.register .form-container textarea:focus-within {
    border: none;
}

#name-input-group:focus-within,
#email-input-group:focus-within,
#phone-input-group:focus-within,
#company-registered-address-input-group:focus-within,
#nature-of-business-input-group:focus-within,
#type_of_company-input-group:focus-within,
#company-name-input-group:focus-within,
#password-input-group:focus-within,
#confirm-password-input-group:focus-within,
#login-email-input-group:focus-within,
#login-password-input-group:focus-within {
    border: 1px solid #195353;
    background: #f2f3f8 !important;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);

}

.login .form-container .input-group:hover,
.register .form-container .input-group:hover {
    background: #f2f3f8;
}


.login .form-container .input-group {
    background-color: #fff;
    border: 1px solid #a1a3a3;
    border-radius: 6px;
    padding: 10px 20px;
    color: #000;
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
}

.login .form-container .input-group:hover {
    background: #f2f3f8 !important;
}

.login .form-container .input-group input {
    border: none !important;
}



.login .form-container .input-group input::placeholder {
    font-size: 20px;
}

.login .form-container img,
.register .form-container img {
    width: 24px;
}

.login .button-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}

.main-button {
    width: 45%;
    padding: 10px 15px;
    font-size: 24px;
    border: 1px solid #195353;
    border-radius: 6px;
    background-color: #195353;
    font-weight: 600;
    color: #fff;
    isolation: isolate;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.main-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ccc;
    border-color: #ccc;
}
.main-button:disabled::before,
.main-button:disabled::after {
    display: none;
}
.main-button span {
    color: #fff;
}

.main-button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(45, 173, 173, 1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.4s ease;
    z-index: -1;
}

.main-button:hover::before,
.main-button:active::before,
.main-button:focus::before {
    width: 100%;
    left: 0;
    right: auto;
}

.secondary-button {
    width: 100%;
    padding: 20px 30px;
    background-color: transparent;
    color: #000;
    border: 1px solid #000;
    border-radius: 12px;
    font-size: 24px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}

.admin-button {
    width: 100%;
    padding: 20px 30px;
    background-color: #ca970b;
    color: #fff;
    border: 1px solid #ca970b;
    border-radius: 12px;
    font-size: 24px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}

.admin-button:hover,
.admin-button:focus-within {
    background: transparent;
    border: 1px solid #ca970b;
    color: #ca970b;
}

#loginBtn,
#registerBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.login #login-email-label:hover + #login-email-input-group,
.login #login-password-label:hover + #login-password-input-group {
    border: 1px solid #195353;
    background: #f2f3f8 !important;
}

/* End of Login */
/* Start of Register */

.register .form-container .input-group {
    background-color: #ffffff;
    border: 1px solid #a1a3a3;
    border-radius: 6px;
    padding: 2px 8px;
    color: #000;
    flex-wrap: nowrap;
    gap: 5px;
}

.register .form-container .input-group input,
.register .form-container .input-group textarea,
.register .form-container .input-group select {
    border: none !important;
}

.register .form-container {
    height: 100%;
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 7rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

.register .button-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}

.register .form-side .login-to-continue {
    font-size: 24px;
    font-weight: 500;
    color: #000;
    margin-bottom: 5px;
}

.register .form-container .toggle-password {
    position: absolute;
    right: 8px;
    top: 20%;
    width: 27px;
}

.register #type_of_company {
    color: #d9d9d9;
}

.register #type_of_company:valid {
    font-size: 16px;
    font-weight: 400;
    color: #515151;
}

.register #password,
.register #confirm-password {
    max-width: 300px;
    width: 250px !important;
}

#password-rules {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
}

.task-creation-form .profile-password-input-group {
    position: relative;
}

.task-creation-form .profile-password-input-group input[type="password"] {
    padding-right: 48px;
    width: 100%;
}

.task-creation-form .profile-password-input-group .toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.profile-password-section .profile-password-input-group .field-input,
.profile-password-section .profile-password-input-group input[type="password"] {
    padding-right: 48px;
}

.profile-password-section .profile-password-input-group {
    position: relative;
}

.profile-password-section .profile-password-input-group .toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.profile-password-section #password-rules small {
    font-size: 13px;
    line-height: 1.6;
}

/* #password-rules small.text-success {
    background: #f6fff6;
    padding: 5px;
    border-radius: 6px;
    border: 1px solid green;
} */
.register .form-select {
    padding: 0.375rem 0.75rem;
}

.register-modal .modal-dialog {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-modal .modal-title {
    font-size: 30px;
    font-weight: 700;
}

.register-modal .modal-body {
    padding: 1.5rem 2rem !important;
}

.register-modal .modal-body h6 {
    text-align: start;
    font-size: 20px;
    margin-bottom: 10px;
}

.register-modal ul,
.register-modal li {
    list-style: unset !important;
}

.register-modal.modal ul {
    text-align: start;
    padding-left: 40px;
}

.register-modal .modal-body p {
    margin-top: 10px;
}

#copy-password {
    border: none;
}

#copy-password:hover svg path {
    stroke: #fff;
    background: transparent;
}

#confirm-password-error {
    position: absolute;
    padding-top: 5px;
}
.register #company-name-label:hover + #company-name-input-group,
.register #name-label:hover + #name-input-group,
.register #email-address-label:hover + #email-input-group,
.register #phone-number-label:hover + #phone-input-group,
.register #nature-of-business-label:hover + #nature-of-business-input-group,
.register
    #company-registered-address-label:hover
    + #company-registered-address-input-group,
.register #type_of_company-label:hover + #type_of_company-input-group,
.register #password-label:hover + #password-input-group,
.register #confirm-password-label:hover + #confirm-password-input-group {
    background-color: #f2f3f8 !important;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);

}
.terms-conditions-popup h2{
    text-align: left;
}
  .country-code{
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
    margin:auto;
}
/* End of Register */

/* Modal Design  */

/* popup backdrop change */
.modal-backdrop {
    background-color: #2c2c2c71;
    opacity: 1 !important;
    transition: all 0.1s ease !important;
}

.modal .modal-header .btn-close {
    background-color: transparent !important;
    border: none !important;
    margin-right: 10px !important;
    margin: auto;
}

.modal-backdrop.show {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.2);
}

/* End of popup backdrop change */
.modal {
    border: none;
    background-color: transparent;
    padding: 0;
    --bs-modal-width: 800px;
    padding: 1.5rem 1rem;
}

.modal .modal-content {
    border: none;
    background-color: #ffffff;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
}

.modal .modal-header {
    background-color: #fff;
    padding: 1rem 1rem;
}

.modal .modal-body {
    padding: 1.5rem 1rem;
    text-align: center;
}

.modal .modal-header .modal-header-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

.modal .modal-header img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 21px 20px;
    border-radius: 25%;
    background: var(--icon-gradient);
}
.modal .modal-header .modal-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 100%;
    background: var(--icon-gradient);
    /* background-color: transparent; */
}

.modal .modal-header .modal-icon svg path{
    stroke:white;
}

.modal .modal-header h2 {
    font-size: 24px;
    margin-bottom: 0;
    color: #000;
}

.modal .modal-body h4 {
    font-size: 20px;
    margin-bottom: 0;
    color: #000;
    font-weight: 700;
    margin-bottom: 15px;
}

.service-summary .modal .modal-body .service-details .sub-service-title {
    padding: 1rem 0.5rem;
    font-weight: 700;
}

.service-summary .modal .modal-body .service-details .sub-service {
    padding: 1rem 0.5rem;
    /* display: flex;
    justify-content: space-between; */
}

.modal .modal-body .popup-content {
    max-height: 450px;
    overflow-y: auto;
}

.modal .modal-body .popup-content {
    max-height: 450px;
    overflow-y: auto;
}

.modal .modal-body p {
    font-size: 16px;
    word-break: break-all;
    padding-top: 0;
    text-align: left !important;
    padding-bottom: 15px;
    padding-left: 0;
    padding-right: 0;
}

.modal .modal-footer {
    border: none;
    padding: 1rem;
}

.modal .modal-footer .popup-action {
    width: 100%;
}

.modal .modal-footer .popup-action .popup-action-content {
    display: flex;
    align-items: center;
}

.modal .modal-footer .popup-action .popup-action-content span {
    font-weight: 700;
    color: #000;
}

.modal .modal-footer .popup-action .popup-action-content .price {
    font-size: 20px;
    border: 3px solid #000;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    margin: 0px 5px;
}

.modal .modal-footer .popup-action .popup-button button {
    background-color: #000;
    color: #ffffff;
    border: 1px solid #000;
    padding: 0.8rem 2rem;
    font-size: 20px;
    font-weight: 500;
    outline: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    gap: 10px;
}

.modal .modal-body #subServiceContainer {
    /* border-top: 1px solid #00000020; */
    padding-top: 10px;
}

.modal .modal-body #subServiceContainer .form-check {
    display: flex;
    justify-content: center;
}

.modal .modal-body #subServiceContainer .form-check-input[type="checkbox"] {
    border-radius: 0.25em;
    padding: 0.5rem;
    border: 1px solid black;
}

.modal .modal-body #subServiceContainer .form-check-label {
    text-transform: uppercase;
    font-weight: 600;
}

.modal .info-modal-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.modal .info-modal-section .info-modal-item {
    text-align: start;
    padding: 10px 8px;
    border-radius: 6px;
    border: 1px solid #123e3e3d;
    background: #3c959512;
}

/* ===============================End of Login & Register========================================== */

/* ===============================Admin========================================== */

/* Dashboard */

.new-admin-dashboard .legal-solutions-content {
    max-width: none;
}

.new-admin-dashboard .waving-hand {
    top: -3px;
    left: 190px;
}

a.view-all-link {
    font-size: 14px;
    color: #000;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 5px;
}

.admin-dashboard-new-registration-table {
    min-width: 650px;
}

.admin-dashboard-new-registration-table tr th:first-child,
.admin-dashboard-new-registration-table tr td:first-child {
    width: 5%;
}

.admin-dashboard-new-registration-table tr th:nth-child(2),
.admin-dashboard-new-registration-table tr td:nth-child(2) {
    width: 20%;
    white-space: pre-wrap;
}

.admin-dashboard-new-registration-table tr th:nth-child(3),
.admin-dashboard-new-registration-table tr td:nth-child(3) {
    width: 20%;
    white-space: pre-wrap;
}
.admin-dashboard-new-registration-table tr th:nth-child(4),
.admin-dashboard-new-registration-table tr td:nth-child(4) {
    width: 30%;
    white-space: pre-wrap;
    word-break: break-all;
}
.admin-dashboard-new-registration-table tr th:nth-child(5),
.admin-dashboard-new-registration-table tr td:nth-child(5) {
    width: 15%;
    white-space: pre-wrap;
}

.admin-dashboard-new-registration-table tr th:nth-child(6),
.admin-dashboard-new-registration-table tr td:nth-child(6) {
    width: 10%;
    white-space: pre-wrap;
}

.admin-dashboard-staff-listing-table {
    min-width: 450px;
}

.admin-dashboard-staff-listing-table tr th:first-child,
.admin-dashboard-staff-listing-table tr td:first-child {
    width: 15%;
}

.admin-dashboard-staff-listing-table tr th:nth-child(2),
.admin-dashboard-staff-listing-table tr td:nth-child(2) {
    width: 25%;
    white-space: pre-wrap;
}

.admin-dashboard-staff-listing-table tr th:nth-child(3),
.admin-dashboard-staff-listing-table tr td:nth-child(3) {
    width: 35%;
    white-space: pre-wrap;
    word-break: break-all;
}

.admin-dashboard-staff-listing-table tr th:nth-child(4),
.admin-dashboard-staff-listing-table tr td:nth-child(4) {
    width: 25%;
    white-space: pre-wrap;
}

.quick-link-container {
    padding: 20px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.add-service-containter {
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.add-service-container-content {
    position: relative;
    padding-left: 60px;
}

.add-service-container-content p {
    font-size: 14px;
    color: #515151;
}

.add-service-container-arrow {
    padding: 2px 5px;
    border-radius: 100%;
    background-color: #195353;
}

.add-service-icon {
    background: #faeeff;
    border: 1px solid #af01ee;
    border-radius: 6px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -10px;
}

.add-staff-icon {
    background: #e4fcff;
    border: 1px solid #07a9d0;
    border-radius: 6px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -10px;
}

/* End of Dashboard */

/* Service */

.form-checkbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.form-check-input {
    width: 1em !important;
    padding: 0.5em !important;
    margin-right: 12px;
}

.form-check-input:checked,
.form-check-input:active,
.form-check-input:hover,
.form-check-input:focus {
    background-color: #0d6efd !important;
}

.field-add-button.add-document,
.field-add-button.remove-document {
    border: none;
    background: transparent;
    padding: 5px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.field-add-button.add-document:hover,
.field-add-button.add-document:focus,
.field-add-button.add-document:active,
.field-add-button.remove-document:hover,
.field-add-button.remove-document:focus,
.field-add-button.remove-document:active {
    background: #195353;
}

.field-add-button.add-document:hover img,
.field-add-button.add-document:focus img,
.field-add-button.add-document:active img,
.field-add-button.remove-document:hover img,
.field-add-button.remove-document:focus img,
.field-add-button.remove-document:active img {
    filter: invert(1);
}

.payment-terms-section .milestone-title {
    font-weight: 400;
    font-size: 16px;
}

/* Modal Admin */

.modal-header-content {
    width: 100%;
}

/* End Modal Admin */

/* End Service */

/* Payment History */

.payment-history-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.search-input-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: 500px;
    background: #fff;
    border: 1px solid #d9d9d9;
    padding-right: 10px;
    border-radius: 6px;
}

.search-input-wrap input {
    background: transparent;
    border: none !important;
}

.search-input-wrap:hover,
.search-input-wrap:focus,
.search-input-wrap:active {
    background-color: #f2f3f8 !important;
}

/* End Payment History */

/* Client */

.clients-section {
    width: 100%;
}

.clients-tabs {
    width: 100%;
}

.client-details-section .client-details-top-info {
    margin: 20px 0;
}

.client-details-section .email-result {
    white-space: pre-wrap;
    word-break: break-all;
}

.client-details-section .sub-icon-heading {
    padding-bottom: 10px;
}

.client-details-section + .assigned-staff-list-container {
    margin: 20px 0;
}

.client-details-section .deactive-button a,
.client-details-section .active-button a {
    width: 100%;
}

/* End Client */

/* Service Request Details */

.service-request-section-wrapper .deactive-button .danger-badge,
.service-request-section-wrapper .active-button .success-badge {
    width: 100%;
    text-align: center;
}

.staff-assigned-edit-icon {
    position: absolute;
    right: -61px;
    top: 0;
}

.service-request-section-wrapper
    .formation-task-list-section
    .task-list-container.task-list-new-container {
    margin-top: 10px;
}

.service-request-section-wrapper .tasks-list-box-section {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    padding: 0 10px;
}

.service-request-section-wrapper .tasks-list-not-approve-box-section {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    padding: 0 10px;
    display: grid;
}

.service-request-section-wrapper .form-box-container {
    margin-top: 10px;
}

.service-request-section-wrapper .total-payement-structure-tab .col-xl-2 {
    text-align: right;
    border-left: 0.5px solid #b9b9b9;
    margin-left: -38px;
}

.track-progress-section-wrapper .about-company-formation-content .short-description,.track-progress-section-wrapper .about-company-formation-content .extended-description{
    margin-top:10px;
    margin-right: 10px;
    text-align: justify;
}

.track-progress-section-wrapper .tasks-list-box-items{
    margin-bottom: 0;
}

/* End Service Request Details */

/* Modal */

.staff-listing-wrapper + .modal .modal-body,
.admin-staff-list-wrapper + .modal .modal-body,
.assign-client-details-section + .modal .modal-body,.client-details-section + .modal .modal-body  {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.staff-list-modal .modal-body{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.staff-list-modal .modal-body .modal-item{
    text-align: start;
    padding: 10px 8px;
    border-radius: 6px;
    border: 1px solid #123e3e3d;
    background: #3c959512;
}

.staff-listing-wrapper + .modal .modal-body .modal-item,
.admin-staff-list-wrapper + .modal .modal-body .modal-item,
.assign-client-details-section + .modal .modal-body .modal-item, .client-details-section + .modal .modal-body .modal-item {
    text-align: start;
    padding: 10px 8px;
    border-radius: 6px;
    border: 1px solid #123e3e3d;
    background: #3c959512;
}

#paymentLinkModal .modal-dialog,
#additionalTaskModal .modal-dialog,
#addAdditionalTaskModal .modal-dialog,
#viewDocumentsModal .modal-dialog,
#editTaskModal .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 850px;
}

#paymentLinkModal .modal-dialog form {
    width: 600px;
}

.reject-reason-modal .modal-footer{
    margin:0 auto;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.reject-reason-modal .modal-footer .reject-button{
    max-width:180px;
    padding:10px 20px;
    width:100%; 
}

/* End Modal */

/* Staff Details */

.staff-details-section ul.permission-list,
.service-details-section ul.permission-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.staff-details-section ul.permission-list li,
.service-details-section ul.permission-list li {
    text-align: start;
    padding: 10px 8px;
    border-radius: 6px;
    border: 1px solid #123e3e3d;
    background: #3c959512;
}

.btn-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-deactivate {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    background: #fff6f5;
    color: #fe0700;
    border: 2px solid #fe0700;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition:
        transform 0.15s ease,
        background 0.2s ease;
    animation: breathe 3s ease-in-out infinite;
}

.btn-activate {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    background-color: #eefff4;
    color: #20ab4c;
    border: 2px solid #20ab4c;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition:
        transform 0.15s ease,
        background 0.2s ease;
    animation: breathe-green 3s ease-in-out infinite;
}

.btn-completed {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    background-color: #0d702c;
    color: #fff;
    border: 2px solid #0d702c;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition:
        transform 0.15s ease,
        background 0.2s ease;
    animation: breathe-green 3s ease-in-out infinite;
}

@keyframes breathe {
    0%,
    100% {
        box-shadow: 0 0 8px 2px rgba(192, 57, 43, 0.4);
    }
    50% {
        box-shadow: 0 0 22px 8px rgba(192, 57, 43, 0.15);
    }
}

@keyframes breathe-green {
    0%,
    100% {
        box-shadow: 0 0 8px 2px rgba(32, 171, 76, 0.4);
    }
    50% {
        box-shadow: 0 0 22px 8pxrgba (32, 171, 76, 0.15);
    }
}

@keyframes breathe-green-dark {
    0%,
    100% {
        box-shadow: 0 0 8px 2px rgba(1, 106, 34, 0.5);
    }
    50% {
        box-shadow: 0 0 22px 8px rgba(1, 106, 34, 0.15);
    }
}
.btn-activate .btn-icon svg{fill:#20ab4c}
.btn-icon {
    display: inline-flex;
    animation: tap 2.5s ease-in-out infinite;
    flex-shrink: 0;
    position: absolute;
    right: 0;
    top: 16px;
    rotate: -23deg;
}

.btn-icon svg {
    fill: #fe0700;
}
@keyframes tap {
    0%,
    75%,
    100% {
        transform: scale(1) rotate(0deg);
    }
    85% {
        transform: scale(0.82) rotate(-12deg);
    }
    93% {
        transform: scale(1.15) rotate(5deg);
    }
}

.ring {
    position: absolute;
    width: 75%;
    height: 85%;
    border-radius: 10px;
    border: 2px solid #fe0700;
    animation: ripple-out 2.4s ease-out infinite;
    pointer-events: none;
    z-index: 0;
}

.activate .ring {
    border: 2px solid #20ab4c;
}

.completed .ring {
    border: 2px solid #0d702c;
}

.activate .ring:nth-child(2) {
    animation-delay: 0.8s;
    border-color: rgba(32, 171, 76, 0.45);
}

.completed .ring:nth-child(2) {
    animation-delay: 0.8s;
    border-color: rgba(1, 106, 34, 0.45);
}

.activate .ring:nth-child(3) {
    animation-delay: 0.8s;
    border-color: rgba(32, 171, 76, 0.25);
}

.completed .ring:nth-child(3) {
    animation-delay: 0.8s;
    border-color: rgba(1, 106, 34, 0.25);
}

.ring:nth-child(2) {
    animation-delay: 0.8s;
    border-color: rgba(192, 57, 43, 0.45);
}
.ring:nth-child(3) {
    animation-delay: 1.6s;
    border-color: rgba(192, 57, 43, 0.25);
}

@keyframes ripple-out {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.55);
        opacity: 0;
    }
}

.staff-details-section .client-details-top-info {
    gap: 20px;
}

.service-details-section .header-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.service-details-section .header-content .heading-name {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.service-details-section .sub-icon-heading.sub-heading-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.service-details-section .heading-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.payment-terms-box .details-items {
    border-top: 1px solid #d9d9d9;
    padding-top: 20px;
}

.payment-terms-box .details-items:first-child {
    border-top: 0;
    padding-top: 0;
}

/* End of Staff Details */

/* Tabs for Steps */

.add-service .clients-tabs .nav .nav-item:nth-child(2),
.add-service .clients-tabs .nav .nav-item:nth-child(3),
.payment-terms-section .clients-tabs .nav .nav-item:nth-child(1),
.payment-terms-section .clients-tabs .nav .nav-item:nth-child(3),
.add-tasks-section .clients-tabs .nav .nav-item:nth-child(1),
.add-tasks-section .clients-tabs .nav .nav-item:nth-child(2) {
    opacity: 0.5;
}

.add-service .clients-tabs.edit .nav .nav-item:nth-child(2),
.add-service .clients-tabs.edit .nav .nav-item:nth-child(3),
.payment-terms-section .clients-tabs.edit .nav .nav-item:nth-child(1),
.payment-terms-section .clients-tabs.edit .nav .nav-item:nth-child(3),
.add-tasks-section .clients-tabs.edit .nav .nav-item:nth-child(1),
.add-tasks-section .clients-tabs.edit .nav .nav-item:nth-child(2) {
    opacity: 1;
}

/* End Tabs for Steps */

/* Search Input */
.search-input {
    max-width: 320px;
    width: 100%;
    position: relative;
}

.search-input input {
    padding: 10px 44px 10px 10px;
    width: 100%;
}

.search-input::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23374151' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.099zm-5.242 1.156a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* End of Search Input */
/* Service Request Details */

.service-request-listing .search-input {
    max-width: 400px;
    width: 100%;
}

.service-request-section-wrapper .header-and-status-section {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.service-request-section-wrapper .service-side {
    flex-direction: column;
}

.service-request-section-wrapper .btn-wrap {
    margin-top: 10px;
    margin-left: 50px;
}

.service-details-item .edit-icon {
    position: absolute;
    right: 100px;
    top: -5px;
}

.task-new-container.additional-task-new-container {
    padding: 0;
    border: 0;
}

.task-new-container.additional-task-new-container .tasks-list-box-section {
    grid-template-columns: 1fr;
}
.task-new-container.additional-task-new-container .action-items {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    right: 0;
}

.additional-task-new-container .sub-icon-heading {
    width: 100%;
}

.additional-task-new-container .add-additional-task-btn {
    /* margin-left: auto; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #CA970B;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

.additional-task-new-container .add-additional-task-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.additional-task-new-container .add-additional-task-btn:not(:disabled):hover {
    background: #fffbeb;
}

.payment-table-wrapper {
    min-width: 1000px !important;
}

.payment-table-wrapper tr {
    vertical-align: middle !important;
}

.payment-table-wrapper td select.form-select {
    padding: 10px !important;
}

/* End of service Request Detatils */

/* Staff */

.form-small-container {
    display: flex;
    flex-direction: column;
}

.form-small-container #confirm-password-error {
    top: 60px;
}

/* End Staff */


/* Payment */

.multi-search-wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.multi-search-wrapper .search-input-wrap{
    max-width: none;
}
/* --------need to chnage------- */
.custom-window-height-modal .modal-dialog {
    min-height: 100vh;
    height: 100% !important;
    margin: 0 auto;
}

.custom-window-height-modal div#addAdditionalTaskModal {
    padding: 0 !important;
}
/* --------need to chnage------- */

/* End of Payment */
/* ===============================End of Admin========================================== */
/* ===============================Admin Staff========================================== */

/* Assign Client Details */
.assign-client-details-section .client-details-top-info {
    margin-top: 20px;
}
.assign-client-details-section .new-common-box {
    margin-top: 20px;
}

.assign-client-details-section .doc-list {
    margin-top: 15px;
}

.assign-client-details-section .doc-name {
    margin-right: auto;
    margin-left: 0;
}

.assign-client-details-section .email-result {
    white-space: pre-wrap;
    word-break: break-all;
}
/*End of Assign Client Details */

/* Assigned Client Payments History */
.assign-payment-history-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* End Assigned Client Payments History */
/* Admin Dashaboard */

.new-admin-staff-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.new-admin-staff-dashboard .legal-solutions-content {
    max-width: none;
}

.new-admin-staff-dashboard .waving-hand {
    top: -3px;
    left: 128px;
}

.new-admin-staff-dashboard .dasboard-new-info-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.expert-service-dropdown input.expert-service-checkbox {
    display: none;
}
.phn-no-ins > span {
    position: absolute;
    top: 16px;
    left: 15px;
}

.phn-no-ins {
    position: relative;
}


.phn-no-ins input[type="text"] {
    padding-left: 51px;
}
button.swal2-close {
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 21px;
}
/* End Admin Dashboard */

/* ===============================End of Admin Staff========================================== */

/* ===============================MEDIA QUERY========================================== */

/* Global Css - Start */
@media (max-width: 768px) {
    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 22px;
    }
}

@media (max-width: 578px) {
    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }
}

/* Global Css - End  */

/* Responsive Sidebar - Start */

@media (max-width: 992px) {
    .new-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1000;
    }

    .new-main-content-container {
        padding-left: 90px;
        max-width: 100%;
        margin-left: 0;
    }

    .new-sidebar.collapse-menu + .new-main-content-container {
        max-width: 100%;
        margin: 0;
    }
}

/* Responsive Sidebar - End */

/* Global Css - Start */
@media (max-width: 768px) {
    h1 {
        font-size: 26px;
    }
}

@media (max-width: 578px) {
    h1 {
        font-size: 24px;
    }
}

/* Global Css - End  */

@media (max-width: 992px) {
    /* Topbar */
    .new-topbar {
        padding: 20px 40px;
    }

    .admin-icon {
        padding: 10px;
    }

    .notification-button {
        padding: 10px;
    }
}

@media (max-width: 768px) {
    .new-topbar-content {
        gap: 0px;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .admin-profile {
        border: none;
    }

    .notification-button {
        margin-right: auto;
    }
}

/* End of Topbar */

/* Dashboard */

@media (max-width: 1700px) {
    .cta-image-container {
        right: 0;
    }

    .call-an-expert-content {
        padding-right: 30px;
    }
}

@media (max-width: 1660px) {
    .service-meta .meta-item {
        flex: 0 0 32.33%;
        margin-bottom: 5px;
    }

    .progress-item {
        top: -35px;
    }
    .proccessing .cta-image-container {
        display: none;
    }
    .proccessing .call-an-expert-content {
        margin-left: 0 !important;
        border-left: none;
        padding-left: 0;
        padding-right: 0;
    }
    .proccessing .cta-image-container{
        display:none;
    }
    .proccessing .cta-content {
        margin-left: 0;
        margin-right: 0;
    }
    .proccessing .banner-right-content{
        padding: 10px;
        display:flex;
        align-items:center;
        justify-content: center;
    }
}

@media (max-width: 1440px) {
    .dasboard-new-info-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .new-service-cards {
        grid-template-columns: repeat(1, 1fr);
    }

    .service-meta .meta-item {
        flex: 0 0 19%;
    }

    .new-cta-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .new-cta-banner .primary-button {
        margin: 10px 0 0 auto;
    }

    .apply-service-content {
        max-width: none;
    }
}


@media (max-width: 1200px) {
    .call-an-expert-content {
        max-width: 500px;
    }

    .banner-right-content {
        margin-left: 0;
        padding: 40px 110px 40px 40px;
    }

    .legal-solutions-content {
        max-width: none;
    }

    .cta-image-container {
        right: 30px;
    }
}

@media (max-width: 1024px) {
    .tasks-list-not-approve-box-section {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

@media (max-width: 992px) {
    .sticky-bar {
        width: calc(100% - 65px);
    }
    .proccessing .call-an-expert-content {
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .cta-image-container {
        display: none;
    }

    .call-an-expert-content {
        max-width: none;
    }

    .banner-right-content {
        padding: 20px;
    }

    .dasboard-new-info-cards {
        grid-template-columns: repeat(1, 1fr);
    }

    .view-details-container {
        margin-right: auto;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .service-meta .meta-item {
        flex: 0 0 32.33%;
    }

    .apply-service-image {
        bottom: auto;
    }

    .new-cta-banner .primary-button {
        margin: 10px auto 0;
    }
}

@media (max-width: 676px) {
    .service-meta .meta-item {
        flex: 0 0 49%;
        margin-bottom: 5px;
    }

    .new-service-card {
        padding: 40px 20px 20px 20px;
    }

    .progress-line-container {
        width: 150px;
    }

    .stat-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .new-service-card {
        padding: 40px 10px 10px 10px;
    }
    .tasks-list-not-approve-box-section {
        grid-template-columns: repeat(1, minmax(280px, 1fr));
    }
}

@media (max-width: 576px) {
    h2.stat-value {
        font-size: 24px;
    }

    .waving-hand {
        display: none;
    }

    .meta-items {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        width: 100%;
    }

    .service-other-meta {
        flex-direction: column;
    }

    .service-meta .meta-item {
        flex: 0 0 100%;
    }

    .apply-service-image {
        display: none;
    }

    .apply-service-content {
        padding: 0;
    }
    .new-tasks-list-box-section {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

/* End Dashboard */

/* Dashboard Before Purchase - Start */

@media (max-width: 1700px) {
    .popular-car-service-buttons {
        flex-direction: column;
    }
    .popular-car-service-buttons form {
        width: 100%;
    }

    .service-details-btn,
    .subscription-btn {
        width: 100%;
    }
}

@media (max-width: 1600px) {
    .popular-box {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
    .all-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .popular-box {
        grid-template-columns: repeat(1, minmax(150px, 1fr));
    }
}

@media (max-width: 567px) {
    .popular-card-important-details {
        flex-direction: column;
        gap: 10px;
    }

    .popular-card-important-details .vr {
        display: none;
    }

    .popular-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .popular-services-content h2 {
        font-size: 24px;
    }

    .new-popular-service-card h3 {
        font-size: 20px;
    }
}

/* Dashboard Before Purchase - End */

/* My Account - Start */

@media (max-width: 1200px) {
    .doc-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .doc-list {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* My Account - End */

/* Edit Profile - Start */

@media (max-width: 992px) {
    .footer-actions {
        flex-direction: column-reverse;
    }

    .btn-save,
    .btn-cancel {
        max-width: 100%;
    }
}

@media (max-width: 676px) {
    .uploaded-items {
        flex-direction: column;
        align-items: flex-start;
        padding-right: 40px;
    }
    .download-control {
        position: absolute;
        top: 10px;
        right: 10px;
    }
}

/* Edit Profile - End */

/* Mobile: full-screen feel, no rounded bottom */

@media screen and (max-width: 600px) {
    .page-wrap {
        max-width: 325px;
    }
}
@media (max-width: 480px) {
    .page-wrap {
        max-width: 230px;
    }
    .bell-wrap {
        top: 12px;
        right: 12px;
        margin-top: 0;
    }
    .notif-panel {
        box-shadow: none;
        margin-top: 0;
    }
    .notif-scroll {
        max-height: 500px;
        overflow-y: unset;
    }
    .page-wrap {
        right: 0%;
    }
    .notif-item {
        padding: 15px 16px;
        gap: 12px;
    }
}

/* End of Notification - Media Query */

/* Service Request Section - Start */

@media (max-width: 1660px) {
    .service-request-info-card {
        gap: 20px;
        padding: 15px;
    }
    .service-request-info-card-content p {
        font-size: 16px;
    }

    .service-request-info-card-result p {
        font-size: 19px;
    }
}

@media (max-width: 1300px) {
    .service-request-info-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-request-info-card:nth-child(3) {
        grid-column: 1/-1;
        width: 50%;
        justify-self: center;
    }
}

@media (max-width: 1200px) {
    .payment-content {
        border: none;
    }
    .service-request-section .total-payement-structure-tab .col-xl-2 {
        border: none;
        text-align: start;
    }
    .service-request-section .payment-price p {
        text-align: start;
    }
    .payment-content p {
        padding: 0;
    }
    .total-payment-content {
        text-align: start;
        border-right: none;
    }
    .total-payment-price {
        margin: 0;
    }
    .total-payment-price p {
        padding-left: 40px;
    }
}

@media (max-width: 1024px) {
    .service-request-info-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .service-request-info-card:nth-child(3) {
        grid-column: 0;
        width: 100%;
        justify-self: none;
    }
}

@media (max-width: 676px) {
    .service-request-info-card {
        flex-direction: column;
        gap: 15px;
    }
    .service-request-info-card-content {
        border: none;
    }
    .tab-number {
        font-size: 22px;
    }

    .payment-name {
        flex-direction: column;
        align-items: flex-start;
        /* padding-left:0; */
    }
    .milestone-title {
        margin-top: 42px;
    }
    .service-request-info-card-content p {
        text-align: center;
    }
}

/* Service Request Section - End */

/* All Service - Start */

@media (max-width: 1200px) {
    .service-list-heading-section {
        flex-direction: column;
    }
    .all-service-header-content {
        width: 100%;
    }

    .service-list-heading-section form {
        width: 100%;
    }
    .search-bar-container {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .all-services-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 676px) {
    .all-service-icon-heading {
        flex-direction: column;
    }
}

/* All Service - End */

/* Service Request Details  */

@media (max-width: 1760px) {
     .service-side {
        max-width: 40%;
    }

    .service-details-side {
        width: calc(100% - 45%);
    }
}

@media (max-width: 1200px) {
    .service-side {
        border: none;
        max-width: 100%;
        justify-content: start;
    }

    .service-details-side {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .serivce-details-topbar {
        flex-direction: column;
    }
    .service-side {
        border: none;
        max-width: 100%;
        justify-content: start;
    }
    .service-details-side {
        width: 100%;
        margin-top: 10px;
        padding-left: 0;
    }

    .request-milestone-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .track-progress-section-wrapper .payment-price p {
        padding-left: 50px;
    }

    .track-progress-section-wrapper .total-payment-price p {
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    .track-progress-section-wrapper .tasks-list-box-section {
        grid-template-columns: repeat(1, minmax(60px, 1fr));
    }
}

@media (max-width: 676px) {
    .track-progress-section-wrapper .milestone-title {
        margin-top: 0;
    }
}

@media (max-width: 576px) {
    .service-side {
        flex-direction: column;
    }
    .service-details-side {
        padding-left: 0;
    }
    .total-payement-structure-tab {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
}

/* Service Request Details  */

/* Notification Page - Media Query */

@media screen and (max-width: 991px) {
    .notification-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .notification-time {
        padding-left: 70px;
        max-width: none;
        text-align: left;
        margin-top: 10px;
    }
}

@media screen and (max-width: 567px) {
    .notification-icon {
        position: relative;
        width: fit-content;
        margin-bottom: 5px;
    }

    .notification-content,
    .notification-time {
        padding-left: 0;
    }
}

/* Start of login Page - Media Queries */
@media (min-width: 1361px) and (max-width: 1440px) {
    .login .form-container {
        padding: 3rem 2.5rem 3rem 7rem;
    }
    .login .form-container .button-container {
        margin-top: 15px;
    }
}

@media (min-width: 992px) and (max-width: 1360px) {
    .login .form-container {
        padding: 2rem 1.5rem;
        gap: 10px;
    }
    .login .form-container h1 {
        font-size: 28px;
        line-height: 30px;
    }
    .login .form-container .input-group input {
        font-size: 18px;
    }
    .login .form-container .input-group input::placeholder {
        font-size: 18px;
    }
    .login .form-container .input-group {
        padding: 0.7rem 0.8rem;
    }

    .login .form-container .button-container {
        margin-top: 15px;
    }
}

@media screen and (max-width: 1200px) {
    .login .container-fluid .row .col-lg-6:last-child,
    .register .container-fluid .row .col-lg-6:last-child {
        display: none !important;
    }
    .login,
    .register {
        background-color: #195353;
    }

    .login .form,
    .register .form {
        max-width: none;
    }
    .login .form-side,
    .register .form-side {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 25px;
        background-color: transparent;
    }

    .login .form-container,
    .register .form-container {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 2rem 1.5rem;
    }
    .login .login-content,
    .register .login-content {
        text-align: center;
    }

    .register .image-side,
    .login .image-side {
        display: none;
    }

    .login .form-side .logo-icon,
    .register .logo-icon {
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .login .container-fluid .row .col-lg-6:last-child,
    .register .container-fluid .row .col-lg-6:last-child {
        display: none !important;
    }
    .login,
    .register {
        background-color: #195353;
    }

    .login .form,
    .register .form {
        max-width: none;
    }
    .login .form-side,
    .register .form-side {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 25px;
        background-color: transparent;
    }

    .login .form-container,
    .register .form-container {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 2rem 1.5rem;
    }
    .login .login-content,
    .register .login-content {
        text-align: center;
    }

    .login .form-container .input-group,
    .register .form-container .input-group {
        padding: 0.5rem 0.8rem;
    }

    .login .form-side,
    .register .form-side {
        background-color: transparent;
        margin: 10px 15px;
    }

    .login .form-side > div,
    .register .form-side > div {
        width: 100%;
    }

    .login .form-side .form-container .logo-icon,
    .register .form-side .form-container .logo-icon {
        max-width: 200px;
    }

    .login .button-container,
    .register .button-container {
        flex-direction: column;
        gap: 10px;
    }
    .login .form-container,
    .register .form-container {
        max-width: 100%;
        padding: 1.8rem 1rem;
        gap: 20px;
        background-color: #ffffff;
    }
    .login .form-container .input-group input,
    .login .form-container .input-group input::placeholder,
    .register .form-container .input-group input,
    .register .form-container .input-group input::placeholder {
        font-size: 18px;
    }
    .login .form-container h1,
    .register .form-container h1 {
        font-size: 28px;
        line-height: 30px;
        margin-bottom: 20px;
        border-radius: 20px;
    }
}

/* End of login Page  - Media Queries*/

/* Register Page - Media Queries */

@media (min-width: 1360px) and (max-width: 1440px) {
    .register .form-side .logo-icon {
        width: 100%;
        max-width: 180px;
    }

    .register .form-side input {
        padding: 0.5rem;
    }

    .register .form-side h1 {
        font-size: 28px;
        font-weight: 700;
        line-height: 30px;
        color: #000;
    }

    .form-side .login-to-continue {
        font-size: 18px;
        font-weight: 500;
        color: #000;
        margin-bottom: 5px;
    }

    .register .form-container {
        padding: 0.5rem 2.5rem 0.5rem 7rem;
        gap: 5px;
    }

    .register .button-container {
        margin-top: 10px;
    }

    .register .form-container img {
        width: 25px;
    }

    .register .form-container .input-group {
        padding: 0.3rem 0.5rem;
    }
}

@media (min-width: 1200px) and (max-width: 1360px) {
    .register .form-side .logo-icon {
        width: 100%;
        max-width: 180px;
    }
    .register .form-container {
        padding: 0.5rem 2.5rem;
        gap: 5px;
    }

    .register .form-side h1 {
        font-size: 28px;
        font-weight: 700;
        line-height: 30px;
        color: #000;
    }

    .register .form-container img {
        width: 20px;
    }
    .register .form-side .login-to-continue {
        font-size: 18px;
    }
    .register .form-container .input-group {
        padding: 0.2rem 0.5rem;
    }
    .register .form-container .input-group input::placeholder {
        font-size: 18px;
    }
    .register .form-side label {
        font-size: 16px;
    }

    .main-button,
    .secondary-button {
        padding: 15px 25px;
        font-size: 18px;
        width: 100%;
    }

    .register label {
        margin-bottom: 2px;
    }
}

@media screen and (max-width: 767px) {
    .main-button {
        width: 100%;
    }
}

/* End of Register Page - Media Queries  */

/* ===============================ADMIN========================================== */

/* Dashboard */

@media (max-width: 567px) {
    .add-service-containter {
        flex-direction: column;
        align-items: flex-start;
    }
    .add-service-icon,
    .add-staff-icon {
        top: 0;
    }
    .add-service-container-content {
        padding-left: 0;
        padding-top: 65px;
    }
}

/*end Dashboard */

/* Client */

@media (max-width: 676px) {
    .sticky-bar {
        flex-direction: column;
    }
    .client-details-section .info-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .client-details-section .client-details-top-info {
        flex-direction: column;
    }
    .deactive-button,
    .active-button {
        margin-top: 10px;
    }
}

/* End Client */

/* Service Request Details */

@media (max-width: 1760px) {
    .service-request-section-wrapper .service-side {
        max-width: 40%;
    }

    .service-request-section-wrapper .service-details-side {
        width: calc(100% - 45%);
    }
}

@media (max-width: 1200px) {
    .service-request-section-wrapper .service-side {
        border: none;
        max-width: 100%;
        justify-content: start;
    }

    .service-request-section-wrapper .service-details-side {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .service-request-section-wrapper .tasks-list-box-section {
        grid-template-columns: repeat(1, minmax(80px, 1fr));
    }
}

@media (max-width: 696px) {
    .service-request-section-wrapper .header-and-status-section {
        flex-direction: column;
    }
    .service-request-section-wrapper .btn-wrap {
        margin-left: 0;
    }
}
/* end Service Request Details */

/* ===============================ADMIN - END========================================== */
/* ===============================ADMIN STAFF========================================== */

/* Assigned Client Details */

@media (max-width: 676px) {
    .assign-client-details-section .info-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .new-admin-staff-dashboard .dasboard-new-info-cards {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* End Assigned Client Details */

.remove-assigned-staff-btn {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    opacity: 0.7;
    margin-left: 6px;
    flex-shrink: 0;
}

.remove-assigned-staff-btn:hover {
    opacity: 1;
}

.member-row .remove-assigned-staff-btn {
    margin-left: auto;
}

.assigned-staff-single {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===============================ADMIN STAFF - END========================================== */
/* ===============================MEDIA QUERY========================================== */