.w-17 {
    width: 17px;
}

.w-14 {
    width: 14px;
}

.h-16 {
    height: 16px;
}

.h-17 {
    height: 17px;
}

.width-50 {
    width: 50px !important;
}

.width-85 {
    width: 85px !important;
}

.bg-EDDDFC {
    background-color: #edddfc;
}
.bg-FFEEE1 {
    background-color: #ffeee1;
}
.bg-DCF1E4 {
    background-color: #dcf1e4;
}

.bg-FDD9D9 {
    background-color: #fdd9d9;
}
.bg-EBE1FF {
    background-color: #ebe1ff;
}
.bg-FDEADE {
    background-color: #fdeade;
}

.indicate-text {
    font-size: 12px;
    color: red;
}

.form-control.error {
    border-color: red;
    padding: 0.375rem 0.75rem;
}

.image-wrapper.error {
    border-color: red;
    padding: 0.375rem 0.75rem;
}

.error-alert {
    font-size: 11px;
    color: red;
}

.error {
    color: red !important;
}

.budget-form .form-control[readonly] {
    background-color: #fff !important;
}

.budget-form ::placeholder {
    font-size: 12px;
}

.avatar {
    background: #292be9;
    border-radius: 50%;
    color: #e3eaef;
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
    margin: 0;
    position: relative;
    vertical-align: middle;
    line-height: 1.28;
    height: 45px;
    width: 45px;
}

.avatar.avatar-sm {
    font-size: 12px;
    height: 30px;
    width: 30px;
}

.avatar img {
    border-radius: 50%;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}

.btn-custom-warning {
    background-color: #292be9 !important;
    color: #fff;
}

.btn-custom-warning:hover {
    color: #fff;
}

.custom-warning-color {
    color: #292be9;
}

.roles-permissions table td {
    color: black;
}

.img-preview {
    margin-top: 4px;
    height: auto;
    width: 100px;
}

/* .side-bar-logo img {
    height: auto;
} */

.folders-files tr a {
    font-size: 18px !important;
}

.gradient-row {
    background: linear-gradient(270deg, #dbe4df 0%, #65e4a6 50%, #ffffff 100%);
}

@media print {
    .table-two thead td {
        padding: 0px !important;
    }
}

.order-form-section label {
    left: 10px;
    white-space: nowrap;
    z-index: 2;
}

.custom-percent-border {
    z-index: 1;
}

.table-form-section .responsive-table,
.party-list-folder-table {
    min-height: unset !important;
}

.custom-dropdown-action .dropdown-menu a {
    padding: 8px 0px !important;
}

.table-title-three h5 {
    font-weight: 600 !important;
}

.loss-profit-custom-color1 {
    background-color: rgba(255, 132, 0, 0.15);
}

.loss-profit-custom-color2 {
    background-color: rgba(255, 181, 101, 1);
    font-weight: bold;
}

.production-wrap {
    padding-right: 60px;
}

.print-wrapper .responsive-table {
    min-height: unset;
}

.print-wrapper .table th,
.print-wrapper .table td {
    white-space: nowrap;
}

.print-wrapper {
    min-height: 700px !important;
}

.table-header h3,
.table-header h4 {
    font-weight: 700;
}

.erp-new-invice .invice-detaisl {
    padding: 20px 0;
}

.commercial-invoice {
    margin-bottom: 30px;
}

.invoice-payment-details {
    margin-top: 40px;
}

.erp-new-invice {
    min-height: 650px !important;
}

.dashboard-card-body strong {
    font-size: 16px;
    font-weight: 400;
    color: #7e7e7e;
}

/* customer dashboard */
.erp-overview-grid-6.customer {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    -ms-grid-columns: 1fr 25px 1fr 25px 1fr 25px 1fr 25px 1fr 25px 1fr;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.customer .erp-overview-item {
    padding: 20px 15px;
    border: 1px solid #eaeaea;
    box-shadow: 0px 4px 20px -4px #0000000d;
}
.customer .erp-overview-item .overview-icon {
    height: 70px;
    width: 70px;
    margin-bottom: 16px;
    background-color: #edddfc;
}
.customer .erp-overview-item svg {
    width: 49px;
    height: 49px;
}
.warehouse-stat {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}
.warehouse-stat {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

@media (max-width: 1200px) {
    .warehouse-stat {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .warehouse-stat {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .warehouse-stat {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .warehouse-stat {
        grid-template-columns: 1fr;
    }
}

.account-stat {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 24px;
}

@media (max-width: 1024px) {
    .account-stat {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 800px) {
    .account-stat {
        grid-template-columns: 1fr;
    }
}

.customer .erp-overview-item:nth-child(2) .overview-icon {
    background-color: #ffeee1;
}

.customer .erp-overview-item:nth-child(3) .overview-icon {
    background-color: #dcf1e4;
}

.customer .erp-overview-item:nth-child(4) .overview-icon {
    background-color: #fdd9d9;
}

.customer .erp-overview-item:nth-child(5) .overview-icon {
    background-color: #ebe1ff;
}

.customer .erp-overview-item:nth-child(6) .overview-icon {
    background-color: #fdeade;
}
.customer .erp-overview-item .overview-icon img {
    width: 44px;
    height: 44px;
}
.customer .erp-overview-item .text-center p:first-child {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: #1c1c1c;
    padding-top: 10px;
}
.customer .erp-overview-item .text-center p:last-child {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #5b5b5b;
}

#monthly-statistics {
    width: 100% !important;
    max-height: 290px !important;
    min-height: 210px;
}

#salesRatio {
    width: 100% !important;
    max-height: 290px !important;
    min-height: 210px;
}

#sales-by-country {
    width: 100% !important;
    max-height: 220px !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #292be9;
}

.nav-link {
    color: #292be9;
}

.role-reset-btn {
    font-weight: bold;
    color: #292be9;
    border: 1px solid #292be9;
    padding: 0.2rem 0.5rem !important;
}

.role-reset-btn:hover {
    color: #fff !important;
    background-color: #292be9;
    border: 1px solid transparent;
}
input[readonly],
select[readonly] {
    background-color: white !important;
    color: #000;
    border-color: #ced4da;
    pointer-events: none;
}

.input-container {
    display: flex;
    align-items: center;
}
.input-wp {
    flex: 1;
}
.to-label {
    margin: 0 10px;
}

.single-items-details {
    display: grid;
    grid-template-columns: 150px auto;
    border: 1px solid gray;
    margin-top: 5px;
}

.wislist-icon {
    color: red;
}
.wishlist-btn-no,
.wishlist-btn-yes {
    width: 120px;
    height: 44px;
}
.wishlist-btn-no {
    border: 1px solid #dc2626 !important;
    color: #dc2626;
}

.wishlist-btn-yes {
    border: 1px solid #292be9 !important;
    background-color: #292be9;
    color: #ffffff;
}

.custom-img-size {
    width: 100px;
    height: auto;
}

/* .due-design{

} */
/* responsive css style start */
@media only screen and (min-width: 1350px) and (max-width: 1500px) {
    .customer .erp-overview-item .text-center p:first-child {
        font-size: 20px !important;
        line-height: 30px !important;
    }
    .customer .erp-overview-item .text-center p:last-child {
        font-size: 16px !important;
        line-height: 24px !important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1420px) {
    .erp-overview-grid-6.customer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (min-width: 475px) and (max-width: 767px) {
    .erp-overview-grid-6.customer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (max-width: 475px) {
    .erp-overview-grid-6.customer {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}

.status-not-started {
    background-color: rgba(255, 140, 52, 0.15) !important;
    color: #ff8c34 !important;
}

.status-working {
    background-color: #eff6ff !important;
    color: #2563eb !important;
}

.status-complete {
    background-color: green;
    background-color: rgba(22, 163, 74, 0.15) !important;
    color: #16a34a !important;
}

.status-unknown {
    background-color: #f6f6f6;
    color: #5b5b5b !important;
}

.leave-status-pending {
    background-color: rgba(255, 140, 52, 0.15) !important;
    color: #ff8c34 !important;
}

.leave-status-approved {
    background-color: rgba(22, 163, 74, 0.15) !important;
    color: #16a34a !important;
}
.leave-status-rejected {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #dc2626 !important;
}

.leave-status-unknown {
    background-color: #f6f6f6;
    color: #5b5b5b !important;
}

.customer-size input {
    border: 1px solid gray !important;
    width: 35px;
    padding: 2px !important;
    text-align: center;
    display: inline-block;
}

.cc-alert-row {
    background-color: #ffcccc;
    color: red;
    font-weight: bold;
}
.cc-red-alert-cell {
    color: #ff0000;
}

/* Status styles */
.status-cancel {
    background-color: #f8d7da;
    color: #721c24;
}

.status-pending {
    background-color: #fff3cd;
    color: #856404;
}

.status-progress {
    background-color: #cce5ff;
    color: #004085;
}

.status-delivered {
    background-color: #d4edda;
    color: #155724;
}

.status-completed {
    background-color: #f3e5f5;
    color: #6a1b9a;
}

.text-rejected {
    color: #721c24;
}

.text-pending {
    color: #856404;
}

.text-progress {
    color: #004085;
}

.text-delivered {
    color: #155724;
}

.text-completed {
    color: #4a0072;
}

#attendenceChart {
    height: 200px !important;
    width: 200px !important;
}

.custom-dropdown {
    position: relative;
    display: inline-block;
}

.custom-btn {
    background: #292be9 !important;
    color: #fff !important;
    border-radius: 6px 6px 0px 0px;
    padding: 6.5px 8px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: 0.3s ease;
    position: relative;
    padding-right: 30px;
}

/* Add a dropdown icon using ::after */
.custom-btn::after {
    content: "\25BC";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #fff;
}

.custom-btn:hover {
    background-color: #e2e6ea;
}

.custom-menu {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    min-width: 160px;
    border-radius: 5px;
    padding: 10px 0;
}

.custom-dropdown:hover .custom-menu {
    display: block;
}

.custom-item {
    color: #333;
    padding: 10px 15px;
    display: block;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

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

.text-edit-table .table td {
    font-size: 16px !important;
    text-align: left;
}

.text-edit-table input.form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #ffffff;
    border: 1px solid #b7b7b7 !important;
    border-radius: 6px;
    padding: 12px 15px !important;
    height: 48px;
    font-weight: 500;
    line-height: 34px;
}

.order-count-badge {
    background: #ee4749;
    color: #fff;
    display: block;
    height: 17px;
    width: 17px;
    border-radius: 50%;
    line-height: 17px;
    text-align: center;
    font-size: 10px;
    position: absolute;
    top: -7px;
    right: -9px;
}

/* Image preview Start here */
.clickable-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 5px;
}

#preview-image {
    width: 100%;
    height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}
/* Image preview End here */