@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Coiny&family=Corinthia&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body {
    /* font-family: "Inter", sans-serif; */
    background: #fff;
    color: #111;
}
p{
    margin-bottom: 0;
}

/* header */
.navbar {
    padding: 6px 0;
}
.navbar .nav-link {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0;
    color: #222;
}

.navbar .nav-link {
    font-weight: 400;
    font-size: 16px;
}

.navbar .nav-link.active {
    font-weight: 600;
}

.navbar .nav-link i {
    /* width: 32px;
    height: 32px; */
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-text-stroke: 0.4px;
    padding-right: 10px;
}

.navbar .nav-link:hover {
    color: #000;
}

.navbar-nav {
    margin-right: 30px;
}

.navbar-brand {
    letter-spacing: 1px;
}

.navbar-brand img {
    width: 170px;
    height: auto;
    object-fit: contain;
}

.btn-light {
    background: #f7e6ca;
    border-radius: 10px;
    padding: 10px 20px;

    display: flex;
    align-items: center;
    gap: 12px;

    text-decoration: none;
    color: #1c1c1e;
}

.btn-light i {
    -webkit-text-stroke: 0.4px;
}

.profile-divider {
    font-weight: 300;
    color: #1c1c1e;
}

@media (max-width: 991px) {
    .navbar-collapse {
        padding-top: 20px;
        justify-content: flex-end;
    }

    .navbar-nav {
        align-items: flex-start !important;
    }
}

@media (max-width: 768px) {
    .navbar-brand img {
        width: 130px;
    }
}

/* Hero Section */
.hero-section {
    background: url("../../homeimages/images/hero-banner.jpg") center
        center/cover no-repeat;
    min-height: 700px;

    display: flex;
    align-items: center;

    padding: 80px 0;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.hero-title {
    font-size: 58px;
    font-weight: 600;
    line-height: 120%;
    color: #000000;

    margin-bottom: 16px;
}

.hero-subtitle {
    font-size: 48px;
    font-weight: 400;
    line-height: 130%;
    color: #000000;

    margin-bottom: 24px;
}

.hero-description {
    max-width: 675px;
    margin: 0 auto 40px;
    font-size: 24px;
    line-height: 170%;
    color: #4b4b4b;
    font-weight: 500;
}

.hero-search {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;

    margin-bottom: 40px;
}

.search-input-wrapper {
    width: 100%;
    max-width: 620px;
    /* height: 64px; */
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 14px 20px;
}

.search-input-wrapper i {
    font-size: 18px;
    color: #888;
    margin-right: 12px;
}

.search-input-wrapper input {
    width: 100%;
    border: none;
    outline: none;

    font-size: 16px;
    color: #111;
}

.search-btn {
    /* height: 64px; */
    padding: 14px 32px;
    border: none;
    border-radius: 12px;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s;
}

.search-btn:hover {
    background: #222;
}

.explore-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 24px;
    font-weight: 600;

    color: #111;
    text-decoration: none;
}

.explore-link i {
    transition: 0.3s;
}

.explore-link:hover i {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .hero-section {
        min-height: auto;
        padding: 100px 0;
    }

    .hero-title {
        font-size: 42px;
    }

    .hero-subtitle {
        font-size: 34px;
    }

    .hero-search {
        flex-direction: column;
    }

    .search-input-wrapper {
        max-width: 100%;
    }

    .search-btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 20px;
    }

    .hero-description {
        font-size: 14px;
    }

    .search-input-wrapper {
        height: 58px;
    }

    .search-btn {
        height: 58px;
    }
}

/* Categories */
.categories-section {
    padding: 50px 0;
    padding-bottom: 0px;
    background: #fff;
}

.categories-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 40px;
}

.categories-top h2 {
    font-size: 26px;
    font-weight: 700;
    color: #111;

    margin: 0;
}

.categories-top a {
    font-size: 20px !important;
    font-weight: 400;

    color: #111;
    text-decoration: none;
}

.categories-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.category-card {
    width: calc((100% - 112px) / 8);
    min-width: 120px;
    height: 140px;

    border: 1px solid #e5e5e5;
    border-radius: 14px;

    padding: 20px 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    text-decoration: none;

    transition: 0.3s ease;
}

.category-card:hover {
    border-color: #000;
    transform: translateY(-4px);
}

.category-card img {
    width: 56px;
    height: 56px;
    object-fit: contain;

    margin-bottom: 18px;
}

.category-card span {
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;

    color: #111;
}

@media (max-width: 1200px) {
    .category-card {
        width: calc((100% - 48px) / 4);
    }
}

@media (max-width: 991px) {
    .categories-section {
        padding: 80px 0;
    }

    .categories-top h2 {
        font-size: 32px;
    }

    .categories-top a {
        font-size: 24px;
    }

    .category-card span {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .category-card {
        width: calc((100% - 16px) / 2);
    }

    .categories-section {
        padding: 50px 0;
        padding-bottom: 0px;
        background: #fff;
    }

    .categories-top {
        margin-bottom: 30px;
    }

    .categories-top h2 {
        font-size: 26px;
    }

    .categories-top a {
        font-size: 18px;
    }

    .category-card {
        min-height: 150px;
        padding: 20px 16px;
    }

    .category-card img {
        width: 46px;
        height: 46px;
    }

    .category-card span {
        font-size: 18px;
    }
}

/* Featured Products */
.featured-products-section {
    padding: 100px 0;
    background: #fff;
}

.featured-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 40px;
}

.featured-top h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #111;
}

.featured-top a {
    font-size: 20px;
    font-weight: 400;

    color: #111;
    text-decoration: none;
}

.products-grid {
    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px; */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;

}

.product-card {
    border-radius: 10px;
    overflow: hidden;

    background: #f7f7f7;

    border: 1px solid #e5e5e5;

    transition: 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image {
    width: 100%;
    height: 180px;

    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 0.4s ease;
}

.product-card:hover img {
    transform: scale(1.05);
}

.product-content {
    padding: 16px;
}

.product-content h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;

    color: #111;

    margin-bottom: 8px;
}

.product-content .company {
    font-size: 12px;
    color: #8b8b8b;
    margin-bottom: 8px;
}

.product-content .moq {
    font-size: 12px;
    color: #111;

    margin: 0;
}

.product-btn {
    height: 44px;

    background: #d7d7d7;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 600;

    color: #000000;
    text-decoration: none;

    transition: 0.3s ease;
}

.product-btn:hover {
    background: #111;
    color: #fff;
}

@media (max-width: 991px) {
    .featured-products-section {
        padding: 80px 0;
    }

    .featured-top h2 {
        font-size: 30px;
    }

    .featured-top a {
        font-size: 22px;
    }

    .product-content h3 {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .featured-top {
        margin-bottom: 30px;
    }

    .featured-top h2 {
        font-size: 24px;
    }

    .featured-top a {
        font-size: 18px;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-image {
        height: 220px;
    }

    .product-content h3 {
        font-size: 18px;
    }
}

/* How It Works */
.how-it-works-section {
    padding: 100px 0;
    background: #fafafa;
}

.section-heading {
    margin-bottom: 70px;
}

.section-heading h2 {
    font-size: 42px;
    font-weight: 600;
    color: #111;
    margin: 0;
}

.how-it-works-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.work-step {
    width: 240px;
    text-align: center;
}

.step-icon {
    width: 100px;
    height: 100px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 28px;
}

.step-icon img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.work-step h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;
    color: #111;

    margin-bottom: 14px;
}

.work-step p {
    font-size: 16px;
    line-height: 170%;
    color: #4b4b4b;

    margin: 0;
}

.step-line {
    width: 140px;
    border-top: 3px solid #bdbdbd;
    margin-top: 42px;
}

@media (max-width: 1199px) {
    .how-it-works-wrapper {
        flex-wrap: wrap;
        gap: 40px;
    }

    .step-line {
        display: none;
    }
}

@media (max-width: 991px) {
    .how-it-works-section {
        padding: 80px 0;
    }

    .section-heading {
        margin-bottom: 50px;
    }

    .section-heading h2 {
        font-size: 38px;
    }

    .work-step {
        width: calc(50% - 20px);
    }
}

@media (max-width: 767px) {
    .section-heading h2 {
        font-size: 30px;
    }

    .how-it-works-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .work-step {
        width: 100%;
        max-width: 320px;
    }

    .step-icon {
        width: 74px;
        height: 74px;
    }

    .step-icon img {
        width: 74px;
        height: 74px;
    }

    .work-step h3 {
        font-size: 20px;
    }

    .work-step p {
        font-size: 15px;
    }
}

/* Footer */
.footer-section {
    background: #000;
    padding: 18px 0;

    border-top: 1px solid #2a2a2a;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.footer-content p {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0;

    color: #fff;
}

@media (max-width: 767px) {
    .footer-section {
        padding: 16px 0;
    }

    .footer-content p {
        font-size: 13px;
        line-height: 170%;
    }
}

/* css from other  */
/* Breadcrumb */
.breadcrumb-section {
    background: #000;
    padding: 18px 0;
}

.custom-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.custom-breadcrumb li a,
.custom-breadcrumb li.active {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;

    color: #fff;
    text-decoration: none;
}

.custom-breadcrumb .separator {
    color: #bdbdbd;
    font-size: 14px;
}

.custom-breadcrumb li a:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .breadcrumb-section {
        padding: 14px 0;
    }

    .custom-breadcrumb {
        gap: 8px;
    }

    .custom-breadcrumb li a,
    .custom-breadcrumb li.active {
        font-size: 14px;
    }
}

/* Product Details */
.product-details-section {
    padding: 60px 0;
    background: #fff;
}

/* Main Image */
/* Gallery */
.product-gallery {
    width: 100%;
}

/* Main Slider */
.main-slider {
    position: relative;
    border-radius: 14px;
    overflow: visible;
}

/* Main Image */
.main-product-image {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 14px;

    transition: 0.3s ease;
}

/* Arrows */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: #f7e6ca;
    color: #111;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 2;
}

.gallery-arrow.left {
    left: -20px;
}

.gallery-arrow.right {
    right: -20px;
}

.gallery-arrow i {
    font-size: 18px;
    color: #000;
}

/* Thumbnails Row */
.product-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 10px;

    margin-top: 14px;

    width: 100%;
}

/* Thumbnail */
.thumbnail {
    width: 100%;
    height: 70px;

    border-radius: 10px;
    object-fit: cover;

    cursor: pointer;

    border: 2px solid transparent;

    transition: 0.3s ease;
}

/* Active */
.thumbnail.active {
    border-color: #111;
}

/* Documents */
.documents-card {
    border: 1px solid #e5e5e5;
    border-radius: 14px;

    padding: 24px;
    margin-top: 20px;
}

.documents-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Smooth Image Transition */
.main-product-image {
    width: 100%;
    height: 327px;
    object-fit: cover;
    border-radius: 14px;
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
    border: 1px solid #D7D7D7;
}

/* Animation State */
.main-product-image.changing {
    opacity: 0.4;
    transform: scale(1.03);
}

/* Document Item */
.document-item {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: #111;
    margin-bottom: 12px;
}

.document-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.document-left i {
    font-size: 22px;
}

.document-left h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.document-left p {
    font-size: 13px;
    color: #777;
    margin: 0;
}

/* Product Info */
.product-info h1 {
    font-size: 42px;
    font-weight: 700;
    margin: 10px 0 20px;
}

/* Verified */
.verified-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: 14px;
    color: #6d8b5b;
}

/* Tags */
.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 20px;
}

.product-tags span {
    background: #f7e6ca;
    padding: 10px 18px;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 500;
}
.bg-yellow{
    background: #FFF7EA;
}

/* Description */
.product-description {
  font-size: 14px;
    color: #000;
    margin-bottom: 24px;
}

/* Specifications */
.specifications-wrapper h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.specifications-table {
    border: 1px solid #e5e5e5;
}

.specifications-table td {
    padding: 14px 16px;
    font-size: 14px;
    vertical-align: middle;
}

/* Supplier Card */
.supplier-card {
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 24px;
}

.supplier-top {
    display: flex;
    gap: 16px;

    padding-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.supplier-logo {
    width: 56px;
    height: 56px;
    border: 0.5px solid rgb(59, 59, 59);
    border-radius: 50%;
    object-fit: cover;
}

.supplier-top h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.supplier-address {
    font-size: 14px;
    color: #777;

    margin: 4px 0;
}

.supplier-rating {
    font-size: 14px;
    color: #ff9800;
}

/* Blocks */
.supplier-block {
    padding: 20px 0;
    border-bottom: 1px solid #e5e5e5;
}

.supplier-block:last-child {
    border-bottom: none;
}

.supplier-block h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.supplier-block p,
.supplier-block li {
    font-size: 14px;
    color: #555;
}

.supplier-block ul {
    padding-left: 18px;
    margin: 0;
}

/* Actions */
.supplier-actions {
    margin-top: 24px;
}

.mission-btn,
.quote-btn {
    width: 100%;
    height: 54px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
}

.mission-btn {
    background: #f7e6ca;
    color: #111;
}

.quote-btn {
    border: 1px solid #e5e5e5;
    color: #111;
}
/* Responsive */
@media (max-width: 991px) {
    .product-info h1 {
        font-size: 34px;
    }

    .main-product-image {
        height: 300px;
    }
}

@media (max-width: 767px) {
    .product-details-section {
        padding: 40px 0;
    }

    .product-info h1 {
        font-size: 28px;
    }

    .main-product-image {
        height: 240px;
    }

    .product-thumbnails {
        flex-wrap: wrap;
    }

    .supplier-top {
        flex-direction: column;
    }
}

/**** Active Missions  *****/
.active-mission-tabs .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background: #000;
    border-radius: 0;
    padding: 10px 20px;
    /* white-space: nowrap; */
}
.active-mission-tabs .nav-pills .nav-link {
    border-radius: 0;
    color: #000;
    padding: 10px 20px;
    font-weight: 500;
    white-space: nowrap;
}
.active-mission-tabs {
    overflow-x: auto;
}

.active-mission-tabs::-webkit-scrollbar {
    height: 0;
}
.active-mission-tabs ul#pills-tab {
    border: 1px solid #d7d7d7;
    /* width: fit-content; */
    overflow: auto;
    width: 100%;
    max-width: fit-content;
    /* margin-bottom: 0 !important; */
}
.active-mission-tabs .nav {
    flex-wrap: nowrap;
}
.active-mission-tabs tbody,
td,
tfoot,
th,
thead,
tr {
    border-color: unset;
    border-style: unset;
    border-width: unset;
}
/* .nav-border {
    border: 1px solid #D7D7D7;
    width: -webkit-fill-available;
} */

/* Section */
.production-table-card {
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 10px;
    /* padding: 10px 14px; */
}

/* Table */
/* .production-data-table {
  min-width: 1050px;
} */

/* Head */
.production-data-table thead th {
    font-size: 12px;
    font-weight: 500;
    color: #888888;
    border-bottom: 1px solid #f1f1f1;
    padding: 14px 16px;
    white-space: nowrap;
}

/* Body */
.production-data-table tbody td {
    padding: 14px 12px;
    /* border-bottom: 1px solid #F5F5F5; */
    vertical-align: middle;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
}

.production-data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Product */
.production-item-info {
    display: flex;
    align-items: center;
    gap: 14px;
    /* min-width: 260px; */
}

.production-item-info img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.production-item-info h6 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
}

.production-item-info p {
    font-size: 12px;
    color: #888888;
    margin: 0;
}

/* Progress */
.production-progress-area {
    display: flex;
    align-items: center;
    gap: 10px;
    /* min-width: 140px; */
}

.production-progress-track {
    width: 95px;
    height: 6px;
    background: #e7e7e7;
    border-radius: 100px;
    overflow: hidden;
}

.production-progress-fill {
    height: 100%;
    background: #28a745;
    border-radius: 100px;
}

/* Status */
.production-status-chip {
    /* height: 28px; */
    padding: 4px 8px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    max-width: 100px;
    width: 100%;
}

.status-sampling {
    background: #fff4d4;
    color: #735b14;
}

.status-approved {
    background: #e4f9e0;
    color: #104e00;
}

.status-quality {
    background: #c5d4f6;
    color: #153c96;
}

/* Button */
.production-view-action {
    height: 36px;
    padding: 0 14px;
    border: 1px solid #e5e5e5;
    background: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: 0.3s ease;
}

.production-view-action:hover {
    background: #f8f8f8;
}
.production-view-action {
    height: 36px;

    padding: 0 14px;

    border: 1px solid #e5e5e5;
    background: #fff;

    border-radius: 10px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 13px;
    font-weight: 500;

    transition: 0.3s ease;

    box-shadow: none !important;
}

.production-view-action:hover,
.production-view-action:focus {
    background: #f8f8f8;
    border-color: #e5e5e5;
}

/* Remove Bootstrap Arrow Style */
/* .production-view-action::after {
    margin-left: 8px;
} */
.production-view-action i {
    font-size: 11px;

    transition: 0.3s ease;
}

/* Rotate when open */
.production-view-action.show i {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu {
    border-radius: 12px;

    border: 1px solid #ececec;

    padding: 8px;

    min-width: 180px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.dropdown-toggle::after {
    display: none;
}

.dropdown-item {
    border-radius: 8px;

    font-size: 13px;

    padding: 10px 12px;

    transition: 0.2s ease;
}

.dropdown-item:hover {
    background: #f7f7f7;
}

/* Responsive */
@media (max-width: 991px) {
    .production-table-card {
        padding: 10px;
    }
}

@media (max-width: 575px) {
    /* .production-item-info {
    min-width: 220px;
  } */

    .production-item-info img {
        width: 50px;
        height: 50px;
    }
}
/* pagination  */
/* Pagination Wrapper */
.custom-pagination-wrapper {
    margin-top: 24px;

    display: flex;
    justify-content: center;
}

/* Pagination */
.custom-pagination {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 0;
    margin: 0;

    list-style: none;
}

/* Links */
.custom-pagination li a {
    min-width: 30px;
    height: 30px;

    padding: 0 10px;

    border: 1px solid #e5e5e5;
    background: #fff;

    border-radius: 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    text-decoration: none;

    font-size: 11px;
    font-weight: 500;

    color: #111;

    transition: 0.3s ease;
}

/* Hover */
.custom-pagination li a:hover {
    background: #f8f8f8;
}

/* Active */
.custom-pagination li a.active {
    background: #000;
    color: #fff;

    border-color: #000;
}

/* Dots */
.custom-pagination .dots {
    font-size: 12px;
    color: #999;

    padding: 0 2px;
}

/* Icons */
.custom-pagination li a i {
    font-size: 10px;
}

/* Responsive */
@media (max-width: 575px) {
    .custom-pagination {
        gap: 4px;
    }

    .custom-pagination li a {
        min-width: 28px;
        height: 28px;

        padding: 0 8px;

        font-size: 10px;
    }
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*----- create Mission  ------*/
/* basic info page  */
.banner-basic-info {
    background: url(../../homeimages/images/create-mission/basic-info-banner.png)
        no-repeat;
    padding: 70px 100px;
    background-position: center;
    background-size: cover;
}

.banner-basic-info h1 {
    font-size: 32px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 10px;
}
.banner-basic-info p {
    font-size: 16px;
    color: #1c1c1e;
    margin: 0;
    font-weight: 500;
}

/* Steps Section */
/* Steps Section */
.mission-steps-section {
    padding: 60px 0;
}

.mission-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Step */
.mission-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* min-width: 120px; */
}

/* Circle */
.mission-step-circle {
    width: 50px;
    height: 50px;
    border: 1px solid #D7D7D7;
    border-radius: 50%;
    background: #fff;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s ease;
}

/* Active */
.mission-step.active .mission-step-circle {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* Label */
.mission-step-label {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    white-space: nowrap;
}
.mission-step-label.active {
    font-weight: 600;
}

/* Connector */
.mission-step-line {
    width: 90px;
    height: 1px;
    background: #D7D7D7;
    margin-top: 21px;
    margin-inline: 18px;

    flex-shrink: 0;
}
/* Form Container */
.mission-form-card {
    background: #fff;
    border: 1px solid #E7E7E7;
    border-radius: 8px;
    padding: 32px;
    margin-bottom: 60px;
}

.form-section-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.form-label {
    font-size: 12px;
    font-weight: 500;
    color: #111;
    margin-bottom: 8px;
}

.custom-input {
    /* height: 44px; */
    padding: 10px 16px;
    border: 1px solid #D7D7D7;
    border-radius: 4px;
    font-size: 13px;
    box-shadow: none !important;
}

textarea.custom-input {
    height: auto;
    resize: none;
    padding-top: 12px;
}

.qty-addon {
    background: #fff;
    border-left: none;
    font-size: 12px;
    color: #666;
}

.input-group .form-control {
    border-right: none;
}

.text-muted {
    font-size: 11px;
}

.continue-btn {
    /* min-width: 130px; */
    /* height: 44px; */
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    width: fit-content;
    padding: 8px 30px;
    background: #000000;
}
.continue-btn-wrap{
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .mission-form-card {
        padding: 15px;
    }

    .continue-btn {
        width: 100%;
    }
    .mission-steps {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 10px;
        scrollbar-width: none;
    }

    .mission-steps::-webkit-scrollbar {
        display: none;
    }

    .mission-step {
        min-width: 110px;
    }

    .mission-step-line {
        width: 60px;
        margin-inline: 12px;
    }

    .mission-step-label {
        font-size: 13px;
    }
     .mission-step-line {
        width: 50px;
}
.mission-steps-section {
    padding: 40px 0;
}
}

/* Responsive Design */
@media (max-width: 992px) {
    .steps-container::before {
        left: 50px;
        right: 50px;
    }

    .step-circle {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .step-label {
        font-size: 12px;
    }
}



@media (max-width: 480px) {
    /* .banner {
        padding: 50px 15px;
    }

    .banner h1 {
        font-size: 20px;
    } */

    .steps-wrapper {
        padding: 30px 15px;
    }

    .steps-container {
        flex-direction: column;
        gap: 20px;
    }

    .steps-container::before {
        display: none;
    }

    .step-circle {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .step-label {
        font-size: 10px;
    }

    .form-label {
        font-size: 12px;
    }

    .form-control,
    .form-select {
        font-size: 12px;
        padding: 8px 10px;
    }

    .btn-continue {
        padding: 10px 30px;
        font-size: 12px;
    }
    .banner-basic-info {
    padding: 30px 20px;
    }
    .banner-basic-info h1 {
    font-size: 22px;
    }
    .banner-basic-info p {
    font-size: 14px;
}
}

/****** Requirements *****/
.mission-card {
    background: #fff;
    border: 1px solid #D7D7D7;
    border-radius: 6px;
    padding: 30px;
}

.mission-section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 30px;
}

.mission-label {
    font-size: 12px;
    font-weight: 500;
    color: #222;
    margin-bottom: 6px;
}

.optional {
    color: #888888;
    font-weight: 400;
}

.mission-input {
    /* height: 42px; */
    padding: 10px 16px;
    border: 1px solid #D7D7D7;
    font-size: 13px;
    border-radius: 10px;
}

.mission-textarea {
    height: 110px;
    resize: none;
    border: 1px solid #D7D7D7;
    font-size: 13px;
    color: #888888;
    padding: 14px;
    border-radius: 10px;
}

.delivery-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.delivery-option {
    height: 38px;
    padding: 0 16px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;

    display: flex;
    align-items: center;
    gap: 8px;

    cursor: pointer;
    font-size: 12px;
}

.delivery-option.active {
    background: #FDF3E3;
    border-color: #FDF3E3;
}

/* .delivery-option input {
    accent-color: #F59E0B;
} */

.upload-box {
    border: 1px dashed #D7D7D7;
    border-radius: 6px;
    padding: 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.upload-icon {
    font-size: 38px;
    color: #000;
    margin-bottom: 10px;
}

.upload-box h6 {
    font-size: 13px;
    margin-bottom: 4px;
}

.upload-box p {
    font-size: 12px;
    color: #999;
    margin-bottom: 16px;
}

.upload-btn {
    border: 1px solid #D7D7D7;
    background: #fff;
    padding: 8px 20px;
    font-size: 12px;
    width: fit-content;
    color: #000;
    border-radius: 10px;
}

.mission-actions {
    margin-top: 24px;

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

.btn-back {
   width: 90px;
    padding: 8px 16px;
    border: 1px solid #DADADA;
    background: #fff;
    border-radius: 4px;
    border-radius: 10px;
    font-size: 13px;
}

.btn-continue {
    min-width: 120px;
    padding: 8px 16px;
    border: none;
    background: #000;
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
}

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

    .mission-card {
        padding: 16px;
    }

    .mission-actions {
        flex-direction: column;
        gap: 12px;
    }

    .btn-back,
    .btn-continue {
        width: 100%;
    }

    .delivery-options {
        flex-direction: column;
    }
}

.mission-card .form-select:focus {
    border-color: #f8e3c3;
    outline: 0;
    box-shadow: unset;
}
.mission-card .form-control:focus {
    border-color: #f8e3c3;
    box-shadow: unset;
}
     /* Label */
        .form-label {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            margin-bottom: 16px;
            display: block;
        }

        .form-label .required {
            color: #dc3545;
        }

        /* Radio Button Group */
        .radio-group {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        /* Custom Radio Button */
        .radio-wrapper {
            position: relative;
        }

        .radio-wrapper input[type="radio"] {
            display: none;
        }

        .radio-label {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #f9f9f9;
            font-size: 13px;
            font-weight: 500;
            color: #666;
        }

        .radio-label:hover {
            border-color: #ccc;
            background: #fafafa;
        }

        /* Custom Radio Circle */
        .radio-circle {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.3s ease;
            background: #ffffff;
        }

        .radio-circle::after {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: transparent;
            transition: all 0.3s ease;
        }

        /* Standard Option (Not Selected) */
        .radio-wrapper input[type="radio"]:not(:checked) + .radio-label {
            background: transparent;
            border-color: #e0e0e0;
            color: #000000;
        }

        .radio-wrapper input[type="radio"]:not(:checked) + .radio-label .radio-circle {
            border-color: #ccc;
            background: #ffffff;
        }

        /* Standard Option (Selected) */
        .radio-wrapper input[type="radio"]:checked + .radio-label {
            background: transparent;
            border-color: #999;
            color: #333;
        }

        .radio-wrapper input[type="radio"]:checked + .radio-label .radio-circle {
            border-color: #999;
            background: #ffffff;
        }

        .radio-wrapper input[type="radio"]:checked + .radio-label .radio-circle::after {
            background: #999;
        }

        /* Express Option Styling */
        .radio-wrapper.express input[type="radio"]:not(:checked) + .radio-label {
            background: #FFF7EA;
            border-color: #D7D7D7;
            color: #000;
        }

        .radio-wrapper.express input[type="radio"]:not(:checked) + .radio-label .radio-circle {
            border-color: #f0a030;
            background: #fff5e6;
        }

        .radio-wrapper.express input[type="radio"]:checked + .radio-label {
            background: #FFF7EA;
            border-color: #D7D7D7;
            color: #000;
        }

        .radio-wrapper.express input[type="radio"]:checked + .radio-label .radio-circle {
                border-color: #FF9529;
                background: transparent;
        }

        .radio-wrapper.express input[type="radio"]:checked + .radio-label .radio-circle::after {
            background: #ff9800;
        }

        /* Responsive */
        @media (max-width: 480px) {
            .radio-group {
                gap: 12px;
            }

            .radio-label {
                padding: 10px 16px;
                font-size: 12px;
            }

            .radio-circle {
                width: 18px;
                height: 18px;
            }

            .radio-circle::after {
                width: 7px;
                height: 7px;
            }
        }

        /***** Files and techpacks  *****/
    .files-tech-card {
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    padding: 30px;
}

.files-tech-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #000000;
}

.upload-section {
    margin-bottom: 28px;
}

.upload-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #000000;
}

.upload-label span {
    color: #888888;
    font-weight: 400;
}

.upload-dropzone {
    border: 1px dashed #DADADA;
    border-radius: 6px;
    padding: 32px 20px;
    text-align: center;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.upload-dropzone i {
    font-size: 24px;
    margin-bottom: 8px;
}

.upload-dropzone h6 {
    font-size: 13px;
    margin-bottom: 4px;
}

.upload-dropzone p {
    font-size: 11px;
    color: #999;
    margin-bottom: 14px;
}

.browse-btn {
    border: 1px solid #DADADA;
    background: #fff;
    font-size: 12px;
    padding: 8px 28px;
    width: fit-content;
    color: #000000;
    font-weight: 600;
}

.uploaded-file {
    height: 40px;
    background: #FAFAFA;
    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 12px;
    margin-bottom: 8px;
}

.file-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-left h6 {
    font-size: 12px;
    margin: 0;
    font-weight: 500;
}

.file-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-right span {
    font-size: 11px;
    color: #999;
}

.file-right button {
    border: none;
    background: transparent;
    color: #666;
}

.additional-textarea {
    height: 100px;
    resize: none;
    font-size: 13px;
    color: #888888;
}

.step-actions {
    margin-top: 24px;

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

.btn-back-step {
    width: 90px;
    height: 42px;

    border: 1px solid #DADADA;
    background: #fff;
    border-radius: 4px;
}

.btn-next-step {
    width: 120px;
    height: 42px;

    border: none;
    background: #000;
    color: #fff;
    border-radius: 4px;
}

/* Responsive */

@media (max-width: 767px) {

    .files-tech-card {
        padding: 16px;
    }

    .uploaded-file {
        height: auto;
        padding: 10px;
        gap: 10px;
        /* flex-direction: column; */
        align-items: flex-start;
    }

    .file-right {
        width: 100%;
        justify-content: space-between;
    }

    .step-actions {
        flex-direction: column;
        gap: 12px;
    }

    .btn-back-step,
    .btn-next-step {
        width: 100%;
    }
}

/* --------Review and submit---------- */
.review-mission-card {
    background: #fff;
    border: 1px solid #D7D7D7;
    border-radius: 10px;
    padding: 30px;
}

.review-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #000;
}

.review-subtitle {
    font-size: 12px;
    color: #888888;
    margin-bottom: 24px;
}

.review-section {
    border: 1px solid #D7D7D7;
    border-radius: 10px;
    padding: 18px 26px;
    margin-bottom: 20px;
}

.review-section-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.review-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.review-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.review-row span {
    font-size: 12px;
    color: #888888;
}

.review-row strong {
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    max-width: 420px;
    color: #000000;
}

.review-row.align-start {
    align-items: flex-start;
}

/* Checkbox */
.confirmation-check {
    margin-top: 24px;
}

.confirmation-check label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.confirmation-check input {
    width: 14px;
    height: 14px;
    accent-color: #000;
}

.confirmation-check span {
    font-size: 12px;
    color: #888888;
}

/* Info Box */
.mission-info-box {
   background: #FDF3E3;
    border-radius: 6px;
    padding: 20px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #D7D7D7;
}

.info-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    margin-bottom: 0;
}

.mission-info-box p {
    font-size: 12px;
    margin: 0;
}

.mission-info-box small {
    font-size: 11px;
    color: #666;
}

/* Buttons */
.review-actions {
    margin-top: 20px;

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

.review-btn-back {
    width: 90px;
    height: 42px;

    border: 1px solid #DADADA;
    background: #fff;
    border-radius: 4px;
}

.review-btn-submit {
    width: 140px;
    height: 42px;

    border: none;
    background: #000;
    color: #fff;
    border-radius: 4px;
}

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

    .review-mission-card {
        padding: 16px;
    }

    .review-row {
        flex-direction: column;
        gap: 4px;
    }

    .review-row strong {
        text-align: left;
        max-width: 100%;
    }

    .mission-info-box {
        align-items: flex-start;
    }

    .review-actions {
        flex-direction: column;
        gap: 12px;
    }

    .review-btn-back,
    .review-btn-submit {
        width: 100%;
    }
    .review-section {
    padding: 14px;
    margin-bottom: 14px;
}
.confirmation-check {
    margin-top: 16px;
}
}

/* mission detail page css  */
/* Gallery */
.product-gallery {
  width: 100%;
}

/* Main Slider */
.main-slider {
  position: relative;
  border-radius: 14px;
  overflow: visible;
}

/* Main Image */
.main-product-image {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 14px;

  transition: 0.3s ease;
}

/* Arrows */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 42px;
  height: 42px;

  border: none;
  border-radius: 50%;

  background: #F7E6CA;
  color: #111;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2;
}

.gallery-arrow.left {
  left: -20px;
}

.gallery-arrow.right {
  right: -20px;
}

.gallery-arrow i {
  font-size: 18px;
}

/* Thumbnails Row */
.product-thumbnails {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  gap: 10px;

  margin-top: 14px;

  width: 100%;
}

/* Thumbnail */
.thumbnail {
  width: 100%;
  height: 70px;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid #D7D7D7;
  transition: 0.3s ease;
}

/* Active */
.thumbnail.active {
  border-color: #F7E6CA;
}

.category-text{
    font-size: 14px;
    color: #888888;
}

.mission-product-info{
    padding:20px;
    padding-top: 0;
}

.mission-product-info h2{
    font-size:28px;
    font-weight:600;
    margin-bottom: 5px;
}

.mission-id{
    color: #888888;
    font-size: 14px;
    font-weight: 500;
}

.mission-top-info{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:20px 0;
}

.info-box,
.spec-box{
    border:1px solid #e5e5e5;
    padding:8px;
    border-radius:8px;
}

.info-box label,
.spec-box label{
    display: block;
    color: #1C1C1E;
    font-size: 13px;
    font-weight: 400;
}

.info-box span,
.spec-box span{
    font-weight: 500;
    font-size: 14px;
}

.spec-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.mission-tabs .nav-link{
    color:#111;
    border-radius:0;
}

.mission-tabs .nav-link.active{
    background:#000;
    color:#fff;
}

.overview-card{
    padding:20px;
    margin:30px 0;
    border: 1px solid #D7D7D7;
    border-radius: 10px;
}

.overview-row{
    display:flex;
    align-items: center;
    padding:10px 0;
    gap: 60px;
}
.overview-row strong {
    font-size: 14px;
    font-weight: 500;
}
.overview-row span {
    color: #888888;
}

.supplier-card,
.progress-card{
    padding: 20px;
    border: 1px solid #D7D7D7;
    border-radius: 10px;
     margin-top: 30px;

}
.progress-card h6 {
    font-size: 18px;
    font-weight: 600;
    color: #000;
}
.progress-card strong {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
}
.supplier-info-detail{
    display:flex;
    gap:20px;
    margin:15px 0;
}

.supplier-logo{
    width:80px;
    height:80px;
    border-radius:50%;
    background:#000;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}
.supplier-info-detail h5 {
    font-size: 22px;
    font-weight: 600;
}
.supplier-btn{
    display:block;
    width:100%;
    text-align: center;
    background: #F5E5C5;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #000000;
    font-weight: 500;
    font-size: 16px;
}
.supplier-info-detail .verify{
    font-size: 16px;
    color: #3EAC23;
}
.verified-supplier small{
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
}
.verified-supplier {
    display: flex;
    align-items: center;
    gap: 6px;
}
.star-rating{
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}
.star-rating i{
    color: #FF8000;
}
.star-rating .review{
    font-size: 14px;
}

.custom-progress{
    height:8px;
    margin:15px 0;
}

.custom-progress .progress-bar{
    background: #28A745;
    border-radius: 8px;
}

.order-track-widget{
    background:#fff;
    border:1px solid #E5E5E5;
    border-radius:12px;
    padding:24px;
}

.order-track-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.order-track-top h4{
    margin:0;
    font-size:16px;
    font-weight:600;
    color:#111;
}

.order-track-top span{
    font-size:16px;
    font-weight:600;
    color:#111;
}

.order-track-bar{
    width:100%;
    height:8px;
    background:#E6E6E6;
    border-radius:50px;
    overflow:hidden;
    margin-bottom:24px;
}

.order-track-bar-fill{
    width:35%;
    height:100%;
    background:#39B54A;
    border-radius:50px;
}

.order-track-list{
    position:relative;
}

.order-track-row{
    display:grid;
    grid-template-columns:28px 1fr auto;
    align-items:center;
    gap:12px;
    position:relative;
    padding-bottom:18px;
}

.order-track-row:last-child{
    padding-bottom:0;
}

.order-track-row:not(:last-child)::after{
    content:"";
    position:absolute;
    left:8px;
    top:16px;
    width:2px;
    height:100%;
    background:#E5E5E5;
}

/* Default Upcoming Step */
.order-track-dot{
    width:18px;
    height:18px;
    border:2px solid #D9D9D9;
    border-radius:50%;
    background:#fff;
    position:relative;
    z-index:2;
}

/* Inner grey dot */
.order-track-dot::after{
    content:"";
    width:8px;
    height:8px;
    background:#BDBDBD;
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

/* Completed */
.order-track-row.done .order-track-dot{
    background:#F7931E;
    border-color:#F7931E;
    display:flex;
    align-items:center;
    justify-content:center;
}

.order-track-row.done .order-track-dot::after{
    display:none;
}

.order-track-row.done .order-track-dot i{
    color:#fff;
    font-size:11px;
}

/* Current */
.order-track-row.current .order-track-dot{
    background:#F7931E;
    border-color:#F7931E;
}

.order-track-row.current .order-track-dot::after{
    width:8px;
    height:8px;
    background:#fff;
}

.order-track-title{
    font-size:13px;
    font-weight:500;
    color:#888888;
}
.order-track-title.active{
    color: #000000;
}

.order-track-row:not(.done):not(.current) .order-track-title{
    color:#9A9A9A;
}

.order-track-time{
    font-size:13px;
    font-weight:500;
    color:#111;
}

.order-track-time.muted{
    color:#9A9A9A;
}
.supplier-card h6 {
    font-size: 18px;
    font-weight: 600;
}
/* ===== Breadcrumb ===== */

.mission-detail-breadcrumb{
    background:#000;
    padding: 18px 0;
    margin-bottom:40px;
}

.mission-detail-breadcrumb-inner{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.mission-detail-breadcrumb a{
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:400;
}

.mission-detail-breadcrumb span{
    color:#fff;
    font-size:10px;
}

.mission-detail-breadcrumb .current-page{
    color:#fff;
    font-size:12px;
}
.overview-card h5 {
    font-size: 18px;
    font-weight: 600;
}
.supplier-logo img {
    width: 75px;
}

@media(max-width:991px){

    .mission-top-info,
    .spec-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:576px){

    .mission-top-info,
    .spec-grid{
        grid-template-columns:1fr;
    }

    .mission-product-info h2{
        font-size:24px;
    }

    .gallery-thumbs{
        overflow:auto;
    }

    .overview-row{
        flex-direction:column;
        gap:5px;
    }
     .mission-detail-breadcrumb{
        padding:10px 15px;
    }

    .mission-detail-breadcrumb-inner{
        gap:8px;
    }

    .mission-detail-breadcrumb a,
    .mission-detail-breadcrumb .current-page{
        font-size:11px;
    }
     .order-track-widget{
        padding:18px;
    }

    .order-track-row{
        grid-template-columns:24px 1fr;
        row-gap:4px;
    }

    .order-track-time{
        grid-column:2;
        font-size:12px;
    }

    .mission-product-info {
        padding: 0px;
    }
    .supplier-card, .progress-card {
        margin: 20px 0;
}
}

/**** company side quote  ****/
.factory-order-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.factory-order-card{
    background:#fff;
    border:1px solid #E5E5E5;
    border-radius:10px;
    padding:16px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.09);
    /* margin-bottom: 30px; */
}

.factory-order-left{
    display:flex;
    gap:16px;
    flex:1;
}

.factory-order-image{
    width: 150px;
    height: 150px;
    border-radius: 10px;
    overflow:hidden;
    flex-shrink:0;
}

.factory-order-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.factory-order-content{
    flex:1;
}

.factory-order-heading{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:5px;
}

.factory-order-heading h4{
    margin:0;
    font-size:20px;
    font-weight:600;
}

.factory-order-meta{
    display:flex;
    gap:14px;
    margin-bottom:12px;
    flex-wrap:wrap;
}

.factory-order-meta span{
    font-size:12px;
    color:#888888;
    font-weight: 500;

}

.factory-order-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}

.factory-order-tag{
    padding: 5px 12px;
    border: 1px solid #D8D8D8;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    background: #F8F8F8;
    font-weight: 500;
}

.factory-order-company{
    display:flex;
    align-items:center;
    gap:10px;
}

.factory-order-logo{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#000;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:600;
}
.factory-order-logo img {
    width: 45px;
}

.factory-order-company span{
    font-size:13px;
    font-weight:500;
}

.factory-order-verified{
    background: #E4F9E0;
    color: #104E00;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.status-quality-check {
    background: #C5D4F6;
    color: #153C96;
}

.factory-order-badge{
    padding:4px 12px;
    border-radius:20px;
    font-size:11px;
    font-weight:500;
}
.check-sign{
    color: #27C200;
}

.badge-sample{
    background: #FFF4D4;
    color: #735B14;
}

.badge-approved{
    background:#E3F6E3;
    color:#34A853;
}

.badge-quality{
    background:#DCE7FF;
    color:#2F62FF;
}

.factory-order-right{
    width: 200px;
    border-left: 1px solid #D7D7D7;
    padding-left: 30px;
}

.factory-order-info{
    margin-bottom:14px;
}
.factory-order-tag img {
    width: 16px;
    height: 16px;
}

.factory-order-info label{
    display:block;
    color: #888888;
    font-size: 12px;
    margin-bottom:2px;
}

.factory-order-info strong{
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.factory-order-btn{
    /* width:100%;
    height:38px; */
    border-radius: 10px;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    padding: 10px 26px;
    width: fit-content;
    min-width: 122px;
}

.factory-order-btn:hover{
    color:#fff;
}
.msg-supplier-btn {
    border: 1px solid #D7D7D7;
    padding: 10px 20px;
    border-radius: 10px;
    color: #000000;
    text-decoration: none;
    display: flex;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
}
.company-side{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 30px;
    /* margin-bottom: 20px; */
    border-bottom: 1px solid #D7D7D7;
}
.quote-sort-bar{
    display: flex;
    justify-content: flex-end;
    /* margin-bottom: 20px; */
}

.quote-sort-wrap{
    display: flex;
    align-items: center;
    gap: 12px;
}

.quote-sort-label{
    font-size: 13px;
    font-weight: 500;
    color: #000;
    white-space: nowrap;
}

.quote-sort-select{
    /* width: 170px; */
    /* height: 42px; */
    border: 1px solid #D7D7D7;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #000;
    background: #fff;
    cursor: pointer;
    outline: none;
}

.quote-sort-select:focus{
    border-color: #d8c19b;
    box-shadow: none;
}

@media(max-width:991px){

    .factory-order-card{
        flex-direction:column;
    }

    .factory-order-right{
        width:100%;
        border-left:none;
        border-top:1px solid #ECECEC;
        padding-left:0;
        padding-top:16px;
    }
}

@media(max-width:576px){

    .factory-order-left{
        flex-direction:column;
    }

    .factory-order-image{
        width:100%;
        height:220px;
    }

    .factory-order-heading{
        flex-wrap:wrap;
    }

    .factory-order-heading h4{
        font-size:18px;
    }
    .msg-supplier-btn {
    padding: 7px 15px;
    gap: 8px;
    font-size: 12px;
}
.company-side {
    padding-bottom: 20px;
}
}

/* ********** Quote Detail Page  ******** */
.supplier-quote-wrap{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:10px;
    padding:20px 0;
}

.supplier-quote-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #D7D7D7;
    padding: 0px 20px 20px;
}

.supplier-quote-company{
    display:flex;
    gap:14px;
}

.supplier-quote-logo{
    width:90px;
    height:90px;
    border-radius:50%;
    background:#000;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.supplier-quote-name{
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

.supplier-verified-badge{
    background:#E9F8EA;
    color:#2E9E45;
    font-size:11px;
    padding: 4px 10px;
    border-radius:30px;
    margin-left:8px;
}

.supplier-quote-location{
    font-size: 14px;
    color: #888888;
}

.supplier-quote-rating{
    color: #FF9529;
    font-size: 13px;
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}
.supplier-quote-rating span {
    color: #000000;
}
.supplier-quote-meta span{
    color: #000000;
}

.supplier-quote-meta{
    text-align:right;
    font-size:12px;
    color:#888888;
}

.supplier-quote-stats{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    margin-bottom:25px;
    padding: 0 20px 24px;
    border-bottom: 1px solid #D7D7D7;
}

.quote-stat-box{
    background:#F7F1E4;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #D7D7D7;
}

.quote-stat-box span{
    /* display:block; */
    font-size: 13px;
    color: #1C1C1E;
}

.quote-stat-box strong{
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}

.quote-stat-box small{
    display: block;
    margin-top: 4px;
    color: #1C1C1E;
    font-size: 12px;
    display: flex;
    gap: 4px;
}

.supplier-info-card{
    border-right:1px solid #ececec;
    padding:0 20px;
    /* height:100%; */
}

.quote-section-title{
    font-size: 18px;
    font-weight: 600;
    margin: 0px 0 16px;
    color: #000000;
}

.quote-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}
.product-detailing {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.quote-detail-grid label{
   color: #888888;
   font-size: 12px;
   margin-bottom: 4px;
   font-weight: 500;
}

.quote-detail-grid strong{
    font-size: 14px;
    max-width: 160px;
    width: 100%;
    font-weight: 500;
    color: #000000;
}
.quote-includes h6 {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
}

.quote-includes{
    margin-top:25px;
}

.quote-includes ul{
    list-style:none;
    padding:0;
}

.quote-includes li{
    margin-bottom: 8px;
    font-size: 12px;
    color: #000000;
}

.quote-includes li::before{
    content:"\F633";
     font-family: "bootstrap-icons";
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    color:#2BA84A;
    margin-right:8px;
}

.supplier-note-box{
    background:#fafafa;
    border:1px solid #ececec;
    border-radius:8px;
    padding:16px;
}

 .suplier-notes-right{
    padding-left: 0 !important;
}

.quote-symbol{
    font-size:28px;
    color:#888;
}
.quote-symbol img {
    width: 20px;
}

.supplier-note-box p{
    font-size:12px;
    margin:10px 0;
    padding-left: 10px;
}

.supplier-note-box strong{
    display:block;
    text-align:right;
    font-size: 12px;
    font-weight: 600;
}


.attachment-list{
    border:1px solid #ececec;
    border-radius:8px;
    padding: 10px 10px 0;
}

.attachment-row{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 10px;
    background: #F8F8F8;
    border-radius: 10px;
    margin-bottom: 10px;
    /* border-bottom:1px solid #ececec; */
}
.attachment-row span {
    font-size: 12px;
}
.attachment-row small {
    color: #888888;
    font-size: 10px;
}

.attachment-row:last-child{
    border-bottom:none;
}
/* .bottom-section{
    padding: 0 20px;
} */

.quote-info-alert{
    /* margin-top:20px; */
    background:#EEF4FF;
    border-radius:8px;
    padding:14px 18px;
    font-size:14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.send-img img {
    width: 32px;
}

.quote-action-footer{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:24px;
}

.quote-btn-decline{
    background:#FFDEDE;
    border: 1px solid #FFDEDE;
    border-radius: 10px;
    color:#D33;
    min-width:150px;
    width: fit-content;
    color: #520505;
    font-weight: 400;
    font-size: 14px;
    padding: 0 20px;
}

.quote-btn-approve{
    background:#000;
    color:#fff;
    min-width:150px;
    width: fit-content;
    font-weight: 400;
    font-size: 14px;
    padding: 0 20px;
}
.color-green{
    color: #398945 !important;
}

@media(max-width:1024px){
    .product-detailing {
    gap: 6px;
    flex-direction: column;
}
.quote-detail-grid {
    gap: 12px;
}
.supplier-quote-stats {
    grid-template-columns: repeat(3,1fr);
}
}

@media(max-width:991px){

    .supplier-quote-top{
        flex-direction:column;
    }

    .supplier-quote-meta{
        text-align:left;
    }

    .supplier-quote-stats{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:576px){

    .supplier-quote-stats{
        grid-template-columns:1fr;
    }

    .quote-detail-grid{
        grid-template-columns:1fr;
    }

    .quote-action-footer{
        flex-direction:column;
    }

    .quote-btn-decline,
    .quote-btn-approve{
        width:100%;
    }
    .quote-section-title {
    margin: 0px 12px 16px;
    }
    .supplier-quote-logo {
    width: 60px;
    height: 60px;
    }
    .supplier-quote-logo img {
    width: 55px;
    }
}

/******** message chat css ******/
.chat-page-layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:20px;
    min-height:850px;
}

.chat-sidebar-panel{
    /* background:#fff;
    border:1px solid #e9e9e9; */
    /* border-radius:12px; */
    padding: 14px 0 14px 20px;
    background: #FBFBFB;
}
.chat-header-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    background: #FFF7EA;
    padding: 14px 20px;
    border-radius: 7px;
}
.chat-room-company {
    display: flex;
    gap: 10px;
    align-items: center;
}
.chat-room-company img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
}
.chat-room-company h6 {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 2px;
}
.green-online-dot {
    width: 8px !important;
    height: 8px !important;
    background: #39B85B;
    border-radius: 100%;
}
.online-status {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #686882;
    font-size: 12px;
}

.chat-sidebar-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.chat-search-box{
    position:relative;
    margin-bottom:15px;
}

.chat-search-box input{
    width:100%;
    /* height:42px; */
    border: 1px solid #D7D7D7;
    border-radius: 10px;
    padding-left: 40px;
    padding: 10px 10px 10px 35px;
    font-size: 14px;
    box-shadow: 0px 6px 15px 0px rgba(64, 79, 104, 0.06);
}
.chat-search-box input:focus-visible{
    outline: 0;
    border: 1px solid #F7E6CA;
}

.chat-search-box i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
}

.chat-contact-card{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:10px;
    border-bottom: 1px solid #D7D7D7;
}

.chat-contact-card.active{
    background:#f8f1e4;
}

.chat-contact-thumb img{
    width:60px;
    height:60px;
    border-radius:7px;
    object-fit:cover;
}
.chat-contact-info h6 {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin-bottom: 2px;
}
.chat-contact-info p {
    font-size: 12px;
    color: #888888;
}
.chat-contact-info span {
    color: #888888;
    font-size: 12px;
}
.chat-main-panel{
    background:#fff;
    border:1px solid #e9e9e9;
    /* border-radius:12px; */
    display:flex;
    flex-direction:column;
}

.chat-room-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px;
    padding-bottom: 0;
}

.chat-message-area{
    padding: 0 20px 6px;
    flex:1;
}
.chat-contact-card small {
    font-size: 9px;
}
.chat-contact-list {
    border: 1px solid #D7D7D7;
    border-radius: 10px;
}

.msg-row-left,
.msg-row-right{
    display:flex;
    gap:10px;
    margin-bottom:16px;
    /* margin-left: 50px; */
}

.msg-row-right{
    justify-content:flex-end;
}

.msg-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    object-fit:cover;
}

.msg-bubble-light{
    background: #F7F8F9;
    border-radius: 12px;
    padding: 12px;
    max-width: 325px;
    font-size: 10px;
}

.msg-bubble-user{
    background: #F5E9DC;
    border-radius: 12px;
    padding: 12px;
    max-width: 245px;
    font-size: 10px;
}

.quote-chat-card{
    background: rgba(234, 255, 238, 0.5);
    border: 1px solid #D7D7D7;
    border-radius: 10px;
    overflow: hidden;
    max-width: 850px;
}

.quote-card-top{
    padding: 12px 15px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #D7D7D7;
}
.new-quote-btn {
    background: #000;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 15px;
    border-radius: 30px;
    white-space: nowrap;
}

.quote-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding: 10px 0;
    border-bottom: 1px solid #D7D7D7;
}
.quote-summary-grid label {
    font-size: 13px;
    display: block;
    font-weight: 400;
}
.quote-summary-grid strong {
    font-size: 13px;
    font-weight: 600;
    display: block;
}
.quote-summary-grid small {
    font-size: 10px;
    color: #888888;
}

.quote-summary-grid > div{
    padding:15px;
    border-right:1px solid #D7D7D7;
}
.quote-detail-box {
    padding: 20px 12px 20px 12px;
}
.quote-details-list {
    display: flex;
    gap: 10px;
}

.quote-check-list{
    list-style:none;
    padding:0;
    padding-top: 10px;
}

.quote-check-list li{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-bottom:10px;
    font-size:12px;
    font-weight:500;
    line-height:1.5;
}

.quote-check-list li:before{
     content:"\F633";
    font-family:"bootstrap-icons";
    color:#54A361;
    font-size:14px;
    flex-shrink:0;
    margin-top:2px;
}
.doc-file-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 8px;
    background:#fff;
    border:1px solid #DCDCDC;
    border-radius:12px;
    width:100%;
    max-width:320px;
    transition:.3s ease;
    margin-top: 12px;
}
button.quote-review-btn {
    background: #F7E6CA;
    padding: 10px 18px;
    border-radius: 7px;
    border: 0;
    font-size: 13px;
    font-weight: 500;
}
.quote-card-footer {
    display: flex;
    justify-content: flex-end;
    padding: 20px 12px;
    border-top: 1px solid #D7D7D7;
}

.doc-file-item:hover{
    border-color:#CFCFCF;
}

.doc-file-left{
    display:flex;
    align-items:center;
    gap:4px;
    min-width:0;
}
.doc-file-left i {
    color: #FF0000;
}

.quote-detail-box h6 {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
}

.doc-file-info h6{
    margin:0;
    font-size:11px;
    font-weight:500;
    color:#222;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.doc-file-right{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
}

.doc-file-size{
    font-size:11px;
    color:#9A9A9A;
}
.doc-file-download i {
    font-size: 14px;
}

.doc-file-download{
    color:#8D8D8D;
    font-size:18px;
    text-decoration:none;
    transition:.3s ease;
}

.doc-file-download:hover{
    color:#000;
}

.chat-send-area{
    border:1px solid #D7D7D7;
    padding:6px 10px;
    display:flex;
    gap:10px;
    border-radius: 7px;
}

.chat-send-area input{
    flex:1;
    border:none;
    padding: 0 5px;
    font-size: 13px;
}
.chat-send-area input::placeholder{
    font-size: 13px;
}
.chat-send-area input:focus-visible{
    outline: 0;
}
.chat-sidebar-head h5 {
    font-size: 22px;
    font-weight: 600;
    color: #000000;
}
a.chat-compose-btn {
    color: #000;
    border: 1px solid #D7D7D7;
    padding: 6px;
    border-radius: 10px;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chat-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    width: 100%;
}

.chat-date-divider::before,
.chat-date-divider::after {
    content: "";
    width: 160px;
    height: 1px;
    background: #E5E5E5;
}
.chat-date-divider span {
    background: #F8F8F8;
    padding: 11px 20px;
    border-radius: 4px;
    color: #888888;
    font-size: 10px;
}
.chat-date-label {
    padding: 10px 22px;
    margin: 0 20px;
    background: #F7F7F7;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #8A8A8A;
    white-space: nowrap;
}
.msg-row-left img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
}
.msg-bubble-light small {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    color: #A3A3A3;
}
.msg-bubble-user small {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    gap: 2px;
}
.msg-row-right img {
    width: 40px;
    height: 40px;
}
.chat-file-card{
    display:flex;
    align-items:center;
    gap:6px;
    width:fit-content;
    padding: 10px 7px;
    background:#fff;
    border:1px solid #DCDCDC;
    border-radius:12px;
    margin-left: 50px;
    margin-bottom: 20px;
}

.chat-file-icon{
    position:relative;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.chat-file-icon i{
    font-size:34px;
    color:#E6E6E6;
}

.chat-file-icon span{
    position:absolute;
    bottom:2px;
    left:50%;
    transform:translateX(-50%);
    background:#FF5A3D;
    color:#fff;
    font-size:9px;
    font-weight:600;
    padding:2px 5px;
    border-radius:4px;
    line-height:1;
}

.chat-file-content h6{
    margin:0;
    font-size:12px;
    font-weight:500;
    color:#000000;
}

.chat-file-content p{
    margin:4px 0 0;
    font-size: 10px;
    color: #888888;
}

.quote-details-section{
    display:grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap:40px;

    border-top:1px solid #D7D7D7;
    border-bottom:1px solid #D7D7D7;

    padding:18px 0;
    margin:10px 0 18px;
}
.chat-send-padding {
    padding: 0 20px 30px;
}
.attachment-btn {
    border: 0;
    background: transparent;
     border-right: 1px solid #D7D7D7;
    padding: 0 15px 0 0;
}
.attachment-btn i {
    color: #888888;
    font-size: 16px;

}
.emoji-btn {
    border: 0;
    background: transparent;
    padding: 0 3px;
    color: #888888;
    font-size: 15px;
}
.msg-bubble-user i {
    font-size: 12px;
    color: #569443;
    margin-top: -3px;
}

.chat-input-actions{
    position:relative;
}

.attach-trigger-btn{
    width:40px;
    height:40px;
    border:none;
    background:transparent;
    font-size:20px;
    color:#666;
}

.attachment-menu{
    min-width:180px;
    border:none;
    border-radius:12px;
    padding:8px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.attachment-menu .dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    padding:10px 12px;
    border-radius:8px;
}

.attachment-menu .dropdown-item:hover{
    background:#F8F8F8;
}

/* modal css  */
.library-modal-box{
    border-radius:12px;
}

.library-search{
    width:100%;
    height:42px;
    border:1px solid #E4E4E4;
    border-radius:8px;
    padding:0 14px;
    margin-bottom:15px;
}

.library-file-list{
    max-height:450px;
    overflow-y:auto;
}

.library-file-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px;
    border-radius:8px;
    cursor:pointer;
}

.library-file-item:hover{
    background:#F8F8F8;
}

.library-file-item img{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
}

.library-file-item h6{
    margin:0;
    font-size:14px;
}

.library-file-item small{
    color:#888;
}
#libraryModal .modal-header {
    padding: 20px;
}
#libraryModal.modal-title {
    font-size: 18px;
    font-weight: 600;
}
#libraryModal .modal-body {
    padding: 0;
}
#libraryModal .library-search {
    border-bottom: 1px solid #D7D7D7 !important;
    border-radius: 0;
    border: 0;
}
#libraryModal .library-search:focus-visible{
    outline: 0;
    border-bottom: 1px solid #F7E6CA !important;
}
#libraryModal .library-file-list {
    padding: 0 8px 30px;
}
@media(max-width:1024px){
    .quote-summary-grid {
    grid-template-columns: repeat(2,1fr);
}
.doc-file-item {
    max-width: 100%;
}
}
@media(max-width:991px){

    .chat-page-layout{
        /* grid-template-columns:1fr; */
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .quote-summary-grid{
        grid-template-columns:1fr 1fr;
    }
    .chat-sidebar-panel {
    padding: 14px 14px 14px 20px;
}
}

@media(max-width:576px){

    .quote-summary-grid{
        grid-template-columns:1fr;
    }

    .msg-bubble-light,
    .msg-bubble-user{
        max-width: 240px;
    }
    .chat-sidebar-panel {
    padding: 14px;
}
.chat-message-area {
    padding: 0px 12px 6px;
}
.new-quote-btn {
    padding: 6px 15px;
}
.chat-contact-thumb img {
    width: 50px;
    height: 50px;
}
.chat-room-company img {
    width: 40px;
    height: 40px;
}
.chat-header-top {
    padding: 12px 8px;
}
.chat-date-divider::before, .chat-date-divider::after {
    width: 70px;
    height: 1px;
}
.chat-date-divider {
    margin: 12px 0;
}
.chat-date-divider span {
    padding: 8px 14px;
}
.msg-bubble-light {
    padding: 10px;
    max-width: 250px;
    font-size: 10px;
}
.chat-room-header {
    padding: 16px 12px;
}
.quote-card-top {
    padding: 12px;
}
}

/****** Request Quote modal  *****/
.rq-modal{
    border-radius:12px;
    border:none;
}

.rq-header{
    padding:20px 24px;
    border-bottom:1px solid #eee;
}

.rq-title{
    font-size:20px;
    font-weight:600;
    margin-bottom:3px;
}

.rq-subtitle{
    font-size:12px;
    color:#666666;
    margin:0;
}

.rq-section-title{
    font-size:16px;
    font-weight:600;
    margin: 12px 0;
}

.rq-section-title span{
    color:#888;
    font-weight:400;
}

.rq-label{
    font-size:13px;
    font-weight:400;
    margin-bottom:6px;
    display:block;
}

.rq-product-card{
    display:flex;
    gap:12px;
    align-items:center;
    border:1px solid #D7D7D7;
    border-radius:6px;
    padding: 13px 12px;
}

.rq-product-card img{
    width:60px;
    height:60px;
    border-radius:6px;
    object-fit:cover;
}

.rq-product-card h6{
    margin:0;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
}

.rq-product-card span{
    font-size: 12px;
    color: #888888;
    font-weight: 500;
}

.rq-input-group{
    position:relative;
}

.rq-unit{
    position:absolute;
    right:30px;
    top:50%;
    transform:translateY(-50%);
    color:#777;
    font-size:13px;
}
.rq-input-group input {
    border: 1px solid #D7D7D7;
    padding: 8px 16px;
}

.rq-select,
.rq-date,
.rq-textarea{
    border-color:#E5E5E5;
}

.rq-upload-box{
    border:1px dashed #D8D8D8;
    border-radius:8px;
    text-align:center;
    padding:35px 20px;
}

.rq-upload-icon{
    font-size:28px;
    margin-bottom:10px;
}

.rq-upload-box p{
    font-size:14px;
    margin-bottom:4px;
}

.rq-upload-box small{
    display:block;
    color:#999;
    margin-bottom:15px;
}

.rq-upload-btn{
    border: 1px solid #D7D7D7;
    background: #fff;
    padding: 8px 22px;
    font-size: 13px;
    width: fit-content;
    color: #000;
    padding: 10px 40px;
    border-radius: 10px;
}

.rq-note-box{
    margin-top: 15px;
    background: #F7F1E6;
    border: 1px solid #D7D7D7;
    border-radius: 6px;
    padding: 11px 20px;
    font-size: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;

}
.rq-note-box i {
    font-size: 20px;
}

.rq-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #eee;
    padding:18px 24px;
}

.rq-security{
    font-size:12px;
    color:#000;
    display: flex;
    align-items: center;
}
.rq-security img {
    width: 22px;
}
.btn.rq-submit-btn {
    width: fit-content;
    padding: 10px 16px;
    font-size: 12px;
    min-height: unset;
    font-weight: 400;
}

.rq-submit-btn{
    background:#000;
    color:#fff;
    padding:10px 24px;
    border-radius:6px;
    font-size:13px;
}

.rq-submit-btn:hover{
    background:#000;
    color:#fff;
}
#requestQuote.modal-body {
    padding: 20px !important;
}

/* color  */

.color-multi-dropdown{
    position:relative;
    width:100%;
}

.color-dropdown-header{
    min-height:42px;
    border:1px solid #D7D7D7;
    border-radius:8px;
    padding:8px 12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    background:#fff;
}

.selected-color-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.color-chip{
    background:#f2f2f2;
    border-radius:20px;
    padding:4px 10px;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:6px;
}

.color-chip span{
    cursor:pointer;
}

.color-dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    border:1px solid #D7D7D7;
    border-radius:8px;
    margin-top:4px;
    z-index:9999;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.color-dropdown-menu.show{
    display:block;
}

.color-dropdown-menu label{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 15px;
    cursor:pointer;
    font-size:14px;
}

.color-dropdown-menu label:hover{
    background:#f8f8f8;
}

textarea.form-control.rq-textarea::placeholder{
    font-size: 12px;
    max-width: 350px;
}
input.form-control.rq-date {
    padding: 8px 16px;
}


@media(max-width:767px){

    .rq-footer{
        flex-direction:column;
        gap:15px;
        align-items:center;
    }

    .rq-submit-btn{
        width:100%;
    }

    .modal-dialog{
        margin:10px;
    }
    .rq-upload-btn {
    padding: 7px 24px;
    min-height: unset;
}
}

/* company register  */
.register-title {
    font-size: 36px;
    font-weight: 600;
}
.register-content {
    padding: 100px 0;
}
.register-subtitle {
    font-size: 18px;
    font-weight: 500;
}


/******** Supplier dashbooard  *******/
.supplier-dashborad-head {
    display: flex;
    gap: 6px;
    align-items: center;
}
.supplier-dashborad-head img {
    width: 28px;
}

/* .factory-dashboard-wrap{
    padding:20px;
} */

/* =========================
   TOP STATS
========================= */

.factory-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-bottom:18px;
}

.factory-stat-card{
    background:#fff;
    border:1px solid #D7D7D7;
    border-radius:8px;
    padding:16px;
    display:flex;
    align-items:center;
    gap:12px;
}

.factory-stat-icon{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #F7E6CA;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-size: 16px;
}
.factory-stat-icon img {
    width: 24px;
}

.factory-stat-card h6{
    margin:0;
    font-size: 14px;
    font-weight: 600;
    color: #1C1C1E;
}

.factory-stat-card h3{
    margin:4px 0 0;
    font-size:20px;
    font-weight:700;
    color:#111;
}

/* =========================
   TOP PANELS
========================= */

.factory-widgets-row{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:10px;
    margin-bottom:18px;
}

.factory-panel{
    background: #fff;
    border: 1px solid #D7D7D7;
    /* border-radius: 10px; */
    padding: 12px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.factory-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.factory-panel-head h4{
    margin:0;
    font-size:16px;
    font-weight:600;
}

.factory-panel-head a{
    font-size:12px;
    color:#DA8A05;
    text-decoration:none;
    font-weight:600;
}

/* =========================
   REQUESTS
========================= */

.factory-request-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    /* border-bottom: 1px solid #F0F0F0; */
    background: #F8F8F8;
    margin-top: 8px;
}

.factory-request-item:last-child{
    border-bottom:none;
}

.factory-request-item img{
    width:42px;
    height:42px;
    border-radius:6px;
    object-fit:cover;
}

.factory-request-info{
    flex:1;
}

.factory-request-info h5{
    margin:0;
    font-size:12px;
    font-weight:500;
}

.factory-request-info p{
    margin:2px 0 0;
    font-size:10px;
    color: #888888;
}

.factory-request-meta{
    display:flex;
    flex-direction:column;
    min-width:95px;
}

.factory-request-meta span{
    font-size: 10px;
    color: #888888;
    font-weight: 500;
}

.factory-badge{
    font-size:10px;
    padding:5px 7px;
    border-radius:10px;
    white-space:nowrap;
}

.factory-badge.orange{
    background: #FFE7D0;
    color: #F86E05;
    min-width: 85px;
    text-align: center;
}

.factory-badge.yellow{
    background:#FFF0D9;
    color:#D18B18;
    text-align: center;
}

.factory-badge.gray{
    background:#EEEEEE;
    color:#777;
    min-width: 85px;
    text-align: center;
}

.factory-action-btn{
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 500;
}

/* =========================
   QUOTES
========================= */

.factory-quote-item{
    display:flex;
    /* align-items:center; */
    gap:6px;
    padding:10px 0;
    border-bottom:1px solid #F0F0F0;
}

.factory-quote-item:last-child{
    border-bottom:none;
}

.factory-quote-item img{
    width:36px;
    height:36px;
    border-radius:6px;
    object-fit:cover;
}

.factory-quote-info{
    flex:1;
}
.factory-qty span {
    font-size: 10px;
    color: #888888;
}

.factory-quote-info h5{
    margin: 0px 0 2px;
    font-size:11px;
    font-weight:600;
}

.factory-quote-info span{
    display:block;
    font-size:9px;
    color:#8A8A8A;
}

.factory-quote-item button{
    height:28px;
    border:1px solid #D9D9D9;
    background:#fff;
    border-radius:6px;
    font-size:10px;
    padding:0 10px;
}
.factoty-item-box {
    display: flex;
    gap: 10px;
    align-items: center;
}
.new-mission img {
    width: 18px;
}
.new-mission {
    width: 40px;
    height: 40px;
    background: #E0FFE3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
}
.new-mission-subtitle p {
    font-size: 10px;
    color: #444444;
    margin-bottom: 0;
}

/* =========================
   NOTIFICATIONS
========================= */

.factory-notification-item{
    display:flex;
    justify-content:space-between;
    gap:10px;
    /* padding:12px; */
    border-radius:6px;
    margin-bottom:10px;
    margin-top: 16px;
}

.factory-notification-item span{
    font-size:11px;
    font-weight:500;
}

.factory-notification-item small{
    white-space:nowrap;
    color:#888;
    font-size:10px;
}

.factory-notification-item.green{
    /* background:#EEFBEF; */
}

.new-mission-blue{
    background:#E0EAFB;
}

.new-misison-orange{
    background:#FFECD5;
}

.new-mission-purple{
    background:#F5F2FB;
}

.new-mission-pink{
    background:#FFE8E6;
}
.factory-view-link {
    border: 1px solid #D7D7D7;
    padding: 10px 0;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top: 0;
    font-size: 12px;
    font-weight: 600;
}
.factory-panel.factory-quotes-panel {
    border-radius: 10px;
}
.factory-panel.factory-notification-panel {
    border-radius: 10px;
}

/* =========================
   PRODUCTION TABLE
========================= */


.prod-board-card{
    background:#fff;
    border:1px solid #E8E8E8;
    border-radius:8px;
    padding:18px;
    padding-bottom: 30px;
}
.border-table{
    border: 1px solid #D7D7D7;
    /* border-radius: 10px; */
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.prod-board-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
    margin-bottom: 20px;
    margin-top: 2px;
}

.prod-board-head h4{
    margin:0;
    font-size:18px;
    font-weight:600;
}

.prod-board-head a{
    font-size:12px;
    color:#DA8A05;
    text-decoration:none;
    font-weight:500;
}

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

.prod-board-table thead th{
    /* background:#FAFAFA; */
    /* border-top:1px solid #ECECEC; */
    border-bottom:1px solid #D7D7D7;
    padding:14px 16px;
    font-size:11px;
    color:#8A8A8A;
    font-weight:500;
    text-align:left;
}

.prod-board-table tbody td{
    padding:14px 16px;
    border-bottom:1px solid #D7D7D7;
    font-size:13px;
    vertical-align:middle;
    color: #000000;
    font-weight: 500;
}

.prod-item{
    display:flex;
    align-items:center;
    gap:10px;
}

.prod-item img{
    width:42px;
    height:42px;
    border-radius:6px;
    object-fit:cover;
}

.prod-item span{
    font-weight:600;
    white-space:nowrap;
}

.stage-pill{
    padding:6px 12px;
    border-radius:4px;
    font-size:10px;
    font-weight:500;
}

.stage-green{
    background:#C2FFD0;
    color:#28A745;
}

.stage-orange{
    background:#FFE5CD;
    color:#DF7008;
}

.stage-blue{
    background:#D4E6FF;
    color:#246BCD;
}

.stage-purple{
    background:#E0D0FF;
    color:#7354B2;
}

.progress-wrap{
    display:flex;
    align-items:center;
    gap:10px;
}

.progress-line{
    width:95px;
    height:6px;
    background:#E6E6E6;
    border-radius:30px;
    overflow:hidden;
}

.progress-line span{
    display:block;
    height:100%;
    border-radius:30px;
}

.green-line span{
    background: #28A745;
}

.orange-line span{
    background:#DF7008;
}

.blue-line span{
    background:#246BCD;
}

.purple-line span{
    background:#7354B2;
}

.progress-wrap strong{
    font-size:12px;
    font-weight:600;
}

.prod-footer-link{
    text-align:center;
    padding:16px 0;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    color: #000000;
}

.prod-footer-link i{
    margin-left:4px;
}
.active-production-table {
    border: 1px solid #D7D7D7;
    border-radius: 10px;
}
@media(max-width:991px){

    .table-responsive{
        overflow-x:auto;
    }

    .prod-board-table{
        min-width:900px;
    }
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .factory-widgets-row{
        grid-template-columns:1fr;
    }

    .factory-quotes-panel,
    .factory-notification-panel{
        width:100%;
    }
}

@media(max-width:991px){

    .factory-stats-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:767px){

    .factory-stats-grid{
        grid-template-columns:1fr;
    }

    .factory-request-item{
        flex-wrap:wrap;
    }

    .factory-production-table{
        min-width:900px;
    }

    .table-responsive{
        overflow-x:auto;
    }
}

@media(max-width:576px){

    /* .factory-dashboard-wrap{
        padding:12px;
    } */

    .factory-panel,
    .factory-production-card{
        padding:12px;
    }

    .factory-panel-head h4{
        font-size:14px;
    }
    .factory-request-info {
    flex: auto;
}
}

/* saved product wishlist  */
.market-product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.market-product-card{
    background:#fff;
    border:1px solid #D9D9D9;
    border-radius:4px;
    overflow:hidden;
}

.market-product-image{
    position:relative;
    height:145px;
    background:#f5f5f5;
}

.market-product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.market-favorite-btn{
    position:absolute;
    top:8px;
    right:8px;
    width:28px;
    height:28px;
    border:none;
    background:#fff;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.market-favorite-btn i{
    color:#ff0000;
    font-size:14px;
}

.market-product-body{
    padding:16px 10px;
}

.market-product-body h4{
    font-size:16px;
    font-weight:600;
    color:#000;
    margin:0 0 4px;
}

.market-company-name{
    display:block;
    font-size: 12px;
    color: #888888;
    margin-bottom:2px;
}

.market-moq{
    display:block;
    font-size: 12px;
    color: #000000;
}

.market-product-footer{
    background: #D7D7D7;
    /* height: 32px; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}

.market-open-btn{
    color:#000;
    text-decoration:none;
    font-size:12px;
    font-weight:500;
}

.market-open-btn:hover{
    color:#000;
}
@media(max-width:1025px){
    .market-product-grid {
    grid-template-columns: repeat(3,1fr);
}
}

@media(max-width:768px){

    .market-product-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:576px){

    .market-product-grid{
        grid-template-columns:1fr;
    }
}

/******* files and techpacks  ******/
.file-manager-card{
    background:#fff;
    border:1px solid #E5E5E5;
    border-radius:8px;
    overflow:hidden;
}

.file-manager-header{
    padding:18px 20px;
        background: #F8F8F8;
}

.file-manager-header h4{
    margin:0;
    font-size:16px;
    font-weight:600;
}

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

.file-manager-table thead th{
    background: #FAFAFA;
    border-bottom: 1px solid #D7D7D7;
    padding: 14px;
    font-size: 12px;
    font-weight: 400;
    color: #000000;
    text-align: left;
}

.file-manager-table tbody td{
    padding:12px 14px;
    border-bottom:1px solid #D7D7D7;
    font-size:11px;
    vertical-align:middle;
    color: #888888;
}

.file-name-cell{
    display:flex;
    align-items:center;
    gap:10px;
}
.file-name-cell span {
    font-size: 12px;
    font-weight: 500;
    color: #000000;
}
.file-date span {
    font-size: 11px;
    font-weight: 500;
    color: #888888;
}

.file-icon{
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.pdf-file{
    color:#F44336;
}
.file-icon img {
    width: 28px;
}

.image-file{
    color:#FF7043;
}

.excel-file{
    color:#34A853;
}

.related-file-info strong{
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #000000;
}

.related-file-info small{
    display: block;
    color: #888888;
    font-size: 11px;
}

.file-date span{
    display:block;
}

.file-date small{
    color: #888888;
}

.file-action-btn{
    background:none;
    border:none;
    font-size:18px;
}

.dropdown-menu{
    min-width:170px;
    border:none;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
    border-radius:8px;
}

.dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
}

.file-pagination-wrap{
    display:flex;
    justify-content:center;
    padding:18px;
}

.file-pagination{
    display:flex;
    gap:6px;
    list-style:none;
    margin:0;
    padding:0;
}

.file-pagination li a,
.file-pagination li span{
    width:30px;
    height:30px;
    border:1px solid #E5E5E5;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:4px;
    text-decoration:none;
    color:#333;
    font-size:12px;
}

.file-pagination li.active a{
    background:#000;
    color:#fff;
    border-color:#000;
}
.files-upload {
    padding: 10px 24px;
    background: #000;
    color: #fff;
    display: flex;
    gap: 10px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    border-radius: 10px;
}

@media(max-width:991px){

    .table-responsive{
        overflow-x:auto;
    }

    .file-manager-table{
        min-width:1100px;
    }
}

/******** supplier quote detail  ******/
.quote-request-table-wrap{
    background:#fff;
    border:1px solid #E8E8E8;
    border-radius:8px;
    overflow:auto;
}

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

.quote-request-table thead th{
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 500;
    color: #888888;
    border-bottom: 1px solid #D7D7D7;
    background: #fff;
    text-align: left;
    white-space: nowrap;
}

.quote-request-table tbody td{
    padding:16px;
    border-bottom:1px solid #F1F1F1;
    vertical-align:middle;
}

/* .quote-request-table tbody tr:last-child td{
    border-bottom:none;
} */

.buyer-info-box{
    display:flex;
    align-items:center;
    gap:12px;
}

.buyer-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:13px;
    font-weight:600;
    flex-shrink:0;
}

.buyer-purple {
    background: #6746B5;
}

.buyer-dark {
    background: #0D0B32;
}

.buyer-grey{
    background:#383949;
}

.buyer-light{
    background:#6C7280;
}

.buyer-grey-dark{
    background:#4E5562;
}

.buyer-purple-dark{
    background:#6B4BB8;
}

.buyer-charcoal{
    background:#5B5565;
}

.buyer-details h6{
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
}

.buyer-details span{
    display: block;
    font-size: 11px;
    color: #666666;
    margin-top: 4px;
    font-weight: 500;
}

.product-cell-box strong{
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.product-cell-box span{
    display: block;
    margin-top: 4px;
    color: #666666;
    font-size: 11px;
    font-weight: 500;
}

.quote-status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:5px;
    font-size:11px;
    font-weight:500;
    white-space: nowrap;
}

.status-requested{
    background: #E0D0FF;
    color: #7354B2;
}

.status-sent{
    background: #CBE3FE;
    color: #367AD3;
}

.status-pending{
    background:#FFE7CC;
    color:#DF7008;
}

.status-accepted{
    background: #C2FFD0;
    color: #28A745;
}

.status-expired{
    background: #FFE2DD;
    color: #C2494A;
}

.quote-date-text{
    font-size:12px;
    color: #666666;
}
.total-amount{
    font-size: 13px;
    font-weight: 500;
    color: #000000;
}

.quote-action-btn{
    background:#000;
    color:#fff;
    text-decoration:none;
    height:32px;
    min-width:95px;
    border-radius:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:500;
}

.quote-action-btn:hover{
    color:#fff;
}

@media(max-width:991px){

    .quote-request-table-wrap{
        overflow-x:auto;
    }

    .quote-request-table{
        min-width:1000px;
    }
}

/****** supplier Quote details  *****/

.quote-card,
.quote-summary-card{
    background:#fff;
    border:1px solid #E6E6E6;
    border-radius:8px;
}

.quote-card-header{
    padding:16px 20px;
    border-bottom:1px solid #ECECEC;
    font-size:14px;
    font-weight:600;
}

.quote-card-body{
    padding:16px;
}

.buyer-summary{
    display:flex;
    gap:18px;
    align-items:center;
}

.buyer-product-image{
    width:70px;
    height:70px;
    flex-shrink:0;
}

.buyer-product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.buyer-summary-grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.buyer-summary-grid label{
    display:block;
    font-size:11px;
    color:#888;
    margin-bottom:3px;
}

.buyer-summary-grid strong{
    font-size:12px;
    font-weight:500;
}

.buyer-files{
    display:flex;
    align-items:center;
    gap:8px;
}

.buyer-files i{
    width:24px;
    height:24px;
    border:1px solid #E4E4E4;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.field-label{
    display:block;
    margin-bottom:6px;
    font-size:12px;
}

.input-unit-wrap{
    position:relative;
}

.input-unit-wrap span{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    color:#888;
    font-size:12px;
}

.input-unit-wrap input{
    padding-right:60px;
}

.date-input-wrap{
    position:relative;
}

.date-input-wrap i{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
}

.quote-card small{
    display:block;
    margin-top:5px;
    font-size:10px;
    color:#999;
}

.addon-table th{
    font-size:12px;
    font-weight:500;
    color:#777;
}

.addon-table td{
    font-size:12px;
    vertical-align:middle;
}

.addon-table .bi-trash{
    color:#FF7070;
}

.add-item-btn{
    margin-top:20px;
    min-width:260px;
    height:42px;
    border:1px dashed #6A3DF0;
    background:#fff;
    color:#6A3DF0;
    border-radius:6px;
}

.quote-summary-body{
    padding:16px;
}

.summary-row{
    display:flex;
    justify-content:space-between;
    margin-bottom:18px;
    font-size:13px;
}

.total-cost-box{
    margin-top:18px;
    background:#F5F1FF;
    border:1px solid #D9CCFF;
    border-radius:8px;
    padding:14px;
    display:flex;
    justify-content:space-between;
}

.total-cost-box span{
    font-size:12px;
    color:#4E35B2;
}

.total-cost-box strong{
    color:#4E35B2;
    font-size:22px;
}

.summary-info-box{
    margin-top:12px;
    background:#F7F5FF;
    border:1px solid #D9CCFF;
    border-radius:8px;
    padding:14px;
    font-size:12px;
    color:#4E35B2;
    display:flex;
    gap:10px;
}

.send-quote-btn{
    height:42px;
    border:none;
    border-radius:6px;
    padding:0 22px;
    background:#F0DDB7;
    font-size:13px;
    font-weight:600;
}

@media(max-width:991px){

    .buyer-summary{
        flex-direction:column;
        align-items:flex-start;
    }

    .buyer-summary-grid{
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .quote-summary-card{
        margin-top:20px;
    }
}

@media(max-width:576px){

    .buyer-summary-grid{
        grid-template-columns:1fr;
    }

    .add-item-btn{
        width:100%;
        min-width:auto;
    }

    .total-cost-box{
        flex-direction:column;
        gap:10px;
    }

    .send-quote-btn{
        width:100%;
    }
}