@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root{
    --primary:#E5232B;
     --primary-light: #f2768f;
    --secondary: #222222;
    --bg-white: #ffffff;
    --third: #f15b5d;
    --success: #61ce70;
    --warning: #FCC204;
    --btn-primary: #2667BD;
    --success-color: #2a9d8f;
     --text-light: #8b9ba8;
    --gray-light: #f3f3f3;
    --gray-medium: #999999;
    --text-medium: #5a6c7d;
    --border-color: #dee2e6;
    --gray-dark: #5b6e88;
    --body-color: #ecf0fa;
    --logo-right: #eae8f1;
    --bg-white: #ffffff;
    --text-black: #003372;
    --bg-light: #f9fafb;
    --table-row: #dde2ef;
    --default-font: 'Malgun';
    --primary-dark: #b51c23;
    --secondary-color: #7d6608;
    --danger-color: #dc3545;
    --text-dark: #2d3436;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v141/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
@font-face {
    font-family: 'Malgun';
    src: url(malgun.eot),
    url(malgun.otf),
    url(malgun.ttf),
    url(malgun.woff),
    url(malgun.svg),
    url(malgun.woff2);
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
@media (min-width: 1500px) and (max-width: 15000px) {
.container,.flory-container{max-width: 100%;}
} 
.second-header.navbar .nav.navbar-nav li.weblink>a::before {font-family: 'Material Icons';position: relative;font-size: 17px;top: 2px;}
a[aria-label="Home"]::before {content: "\e88a";}
a[aria-label="Dashboard"]::before {content: "\e871";}
a[aria-label="Products"]::before {content: "\e9fe";}
a[aria-label="My Product"]::before {content: "\eb92";}
a[aria-label="My Orders"]::before {content: "\e53b";}
a[aria-label="Knowledge Base"]::before {content: "\e666";}
a[aria-label="Dealers"]::before {content: "\e6da";}
a[aria-label="Product Configuration"]::before {content: "\e074";}
a[aria-label="Support"]::before {content: "\ef73";}
a[aria-label="Security"]::before {content: "\ebe7";}
input.hasDatepicker {
    background-image: url(/mdi_calendar-month.svg);
    background-position: bottom 12px right 13px;
    background-repeat: no-repeat;
    position: relative;
    background-size: 12px;
    cursor: pointer;
}
body {font-family: var(--default-font);background: #F4F3F9!important;margin: 0;}
/* body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;background: #F4F3F9!important;margin: 0;} */
body div.custom-header { background: var(--bg-white);}
body div.first-header{border-bottom: 1px solid #e9ebec;}

h4, a, .h4,p, .poll .poll-header h4, .poll .poll-tags h4{font-family: var(--default-font);}
li.nav-item.sign-up-register {
    margin-right: 15px;
}
.header-icon{display: flex; padding-right: 15px;}
.header_heading_portal{margin: 0;font-size: 18px;font-family: var(--default-font); color: var(--primary);}
.header-icon .social-link {display: flex; gap: 20px; list-style-type: none;padding: 0; align-items: center;width: 100%;margin-top: 0px;flex-wrap: wrap;}
.social-link .icon-circle {background-color: var(--bg-white);border-radius: 99%;border: solid 1px;border-color: #eaeaea;width: 40px; height: 40px;
    max-width: 40px; align-items: center;display: flex;justify-content: center;transition: all 0.3s ease;margin-left: 8px;}
.social-link .icon-circle:hover{    background-color: var(--primary);    border-color: var(--primary);transform: scale(1.1);}
.social-link .icon-circle img {filter: invert(1);}
.social-link .icon-circle:hover img {filter: none;}
.account_modal_header:hover{cursor: pointer;}
.account_modal_header:hover .account_iconheader{color: var(--bg-white);}
.btn{ transform: translateX(0);}
.btn::after {
  content: '';
  display: block;
  width: 1.1em;
  height: 1.1em;
  position: absolute;
  left: calc(50% - 0.55em);   /* Fixed: half of width */
  top: calc(50% - 0.55em);    /* Fixed: half of height */
  border: 0.15em solid transparent;
  border-right-color: white; 
  border-radius: 50%;
  animation: loader-new-animation 0.7s linear infinite;
  opacity: 0;
  transform-origin: center center;
  box-sizing: border-box;
}
.btn.btn.btn-outline::after{border-right-color: #000; }
@keyframes loader-new-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.btn.loadingNew {
  color: transparent !important;
}

.btn.loadingNew::after {
  opacity: 1;
}


.btn {padding: 12px 24px;border: none;border-radius: 6px;cursor: pointer;font-size: 14px;font-weight: 600;transition: all 0.3s ease;width: 100%;margin-bottom: 12px;}
.btn-sm {padding: 6px 12px; font-size: 12px; border-radius: 6px; border: none; cursor: pointer; font-weight: 500;transition: all 0.2s ease;margin-bottom: 0;}
.btn-primary { background: var(--primary);color: var(--bg-white);}
.btn-primary:hover {background: #b91c3c;transform: translateY(-1px);}
.btn.btn-secondary {background: #6c757d;color: var(--bg-white);}
.btn.btn-secondary:hover { background: #545b62;}
.btn.btn-outline {background-color: rgb(240, 240, 240);}
button.actions-btn{box-shadow: 0 4px 15px rgba(108, 117, 125, 0.2);}
.quick-actions {display: flex; gap: 10px;}

.btn-success-gradient {
    background: linear-gradient(135deg, var(--success), var(--success-color));
    color: white;
    box-shadow: var(--shadow-sm);
}

.first-header .xrm-attribute-value{display: flex;}
li.nav-item.dropdown.logout-user {background: #f3f3f9;}

.first-header .navbar-nav .logout-user .user-login-name{padding: 20px; font-size: 13px; font-weight: 500;}
.icons-msg{display: flex;align-items: center;padding: 0 20px;color: #878a99;}
.icons-msg .notification-icon{font-size: 28px;cursor: pointer;}
body div.second-header{box-shadow: 0 2px 4px rgba(15,34,58,.12);}
.second-header .divider-vertical{display: none;}
.second-header #navbar nav ul li a{font-size: 15px;font-weight: 600;line-height:22.5px; padding: 12px 24px 12px 24px;text-align: left;color: #6d7080; margin: 0;}
/* .second-header #navbar nav ul li:first-child a{padding-left: 0;} */
.second-header #navbar nav ul li a:hover{text-decoration: none !important;background: none;}
.second-header #navbar nav ul li.weblink.active a{color: var(--primary);background: linear-gradient(to bottom, rgba(220, 20, 60, 0.05), white);border-bottom: 3px solid var(--primary);}
.second-header #navbar nav ul li:hover a {color: #000000;}
footer .footer-bottom{background-color: var(--bg-white);padding: 10px 0;}
div.footer-bottom .xrm-attribute-value p{color: #98a6ad;font-size: 13px;}

#navbar .dropdown-menu{background: #f3f3f9; border-radius: 0; border: none; box-shadow: 0 8px 20px rgba(0,0,0,.2);}

/* datatable css */
.dt-container .dt-layout-row:first-child, .dt-container .dt-layout-row:last-child{display: flex; flex-wrap: wrap; justify-content: space-between;}
.dt-container .dt-layout-row:first-child{margin-bottom:15px;}
.table.dataTableCustom tfoot{display: table-header-group;}
table tfoot th input{border:solid 1px var(--gray-medium); border-radius: 4px; font-weight: 400; font-size: 12px; padding: 6px 12px;}
table tfoot th input::placeholder, table tfoot th input::-moz-placeholder, table tfoot th input::-webkit-input-placeholder{color: var(--gray-medium);}
.dt-paging.paging_full_numbers button{padding: 6px 12px; border: solid 1px var(--gray-light); color: var(--gray-dark); background-color: var(--bg-white);}
/* body div.dt-container .dt-paging .dt-paging-button.current{ border: solid 1px var(--primary) ; color: var(--primary);} */
div.dt-container .dt-paging .dt-paging-button:hover{background: var(--primary) !important; border-color: var(--primary) !important; padding: 3px 12px !important;}
.dt-paging.paging_full_numbers button:first-child{border-bottom-left-radius:4px; border-top-left-radius:4px;}
.dt-paging.paging_full_numbers button:last-child{border-bottom-right-radius:4px; border-top-right-radius:4px;}
.dt-paging.paging_full_numbers button span{ color: var(--text-black)}
.dt-container .dt-layout-row .dt-length .dt-input, .dt-container .dt-layout-row .dt-search .dt-input{border: solid 1px var(--body-color);padding: 8px 10px;border-radius: 4px;outline: 0;}
.dt-container .dt-layout-row .dt-length label, .dt-container .dt-layout-row .dt-search label{display: none;}
.dt-container .dt-layout-row .dt-length .dt-input, .dt-container .dt-layout-row .dt-search{position: relative;background-color: var(--bg-white);font-size: 10px;border-radius: 8px;}
.dt-container .dt-layout-row .dt-search .dt-input{padding-left: 30px;margin-left: 0;border-radius: 0px;}
.dt-container .dt-layout-row .dt-search .dt-input::-moz-placeholder,
.dt-container .dt-layout-row .dt-search .dt-input::-moz-placeholder,
.dt-container .dt-layout-row .dt-search .dt-input::placeholder{    color: var(--text-black);}
.dt-container .dt-layout-row .dt-search::after {content: "\e8b6";position: absolute;font-family: 'Material Icons';font-size: 20px;color: #98ad43;left: 8px;top: 2px;}
div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {
    padding: 3px 12px;    border: 1px solid #ecf0fa;}
body div.dt-container .dt-paging .dt-paging-button.current {border: solid 1px var(--primary);color: var(--bg-white) !important;background: #212838;border-color: #212838;padding: 3px 12px;}
div.dt-container .dt-paging .dt-paging-button {    padding: 3px 12px !important;    border: 1px solid #ecf0fa !important;    color: var(--primary) !important;}
.dt-container .dt-layout-row:first-child{margin: 0 !important;padding: 20px 0px !important;background-color: #fff;}
.dt-container .dt-layout-row:nth-child(3) {padding: 16px;}
div.dt-container div.dt-layout-row{margin: 0 !important;}
div.dt-container div.dt-layout-row div.dt-layout-cell{overflow: auto !important;}
/* datatable css End*/
/* table css */
.col-sm-12 #myTab{border-bottom: none; margin-bottom: 20px;margin-top: 10px; gap: 10px;}
#myTab .nav-item.show .nav-link, #myTab .nav-link{font-size: 18px; background-color: #e8e8e8;border-radius: 4px;
    color: var(--secondary);padding: 8px 24px; font-weight:500; min-width: 150px;}
#myTab .nav-item.show .nav-link, #myTab .nav-link.active{min-width: 150px; font-size: 18px; font-weight: 500; color: var(--bg-white) !important; background-color: var(--primary) !important; padding: 8px 24px;    border-radius: 4px;}
#myTabContent .tab-pane .card {border-color: #e9ebec; border-radius: 4px;}
#myTabContent .tab-pane .card-shadow{box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);}
#myTabContent .tab-pane .card .card-header .card-title{font-size: 16px; color: #222; font-weight: 400;}
#myTabContent .tab-pane .card .card-header{background-color: #d5d5d5;padding: 16px;    }
#myTabContent .tab-pane .card .card-header:first-child{border-radius: 4px;}
#myTabContent .tab-pane .card .card-header h5{ margin: 0;}
.card-border-none .card,
.card-border-none .card-header,
.card-border-none .card .nav-item .nav-link.active{border: none;}
.table_header_section {display: flex;align-items: center;justify-content: space-between;background: #3265bb;padding: 10px 24px;border-radius: 20px 20px 0px 0px;margin-top: 24px;}
.table_header_section h4{color: var(--bg-white);font-size: 14px;}
.table th {background: linear-gradient(135deg, #e5232b, #e5232b); /*background: linear-gradient(135deg, var(--primary), #b91c3c);*/color: var(--bg-white);padding: 16px 12px !important;text-align: left;font-weight: 600;font-size: 14px;letter-spacing: 0.5px;white-space: nowrap;}
body table>tbody>tr:nth-child(odd)>*, body table>tbody>tr:nth-child(even)>*{box-shadow: none;color: #212529;}
.table td {padding: 16px 12px;border-bottom: 1px solid #f1f3f4;color: #495057 !important; font-size: 14px !important;vertical-align: middle;}
.table td .action-buttons{margin-top: 0; display: flex; gap: 10px;}
.table tfoot th { background: #f8f9fa !important; padding: 10px !important;}
table tbody tr:hover td {background-color: #fdebed;}
table.table thead tr th:first-child {    border-radius: 4px 0 0 0;}
 table.table thead tr th:last-child{border-radius: 0 4px 0 0;}
/* table.table tbody tr td:first-child {border-left: 1px solid #e3edbe  !important;} */
.table>:not(:last-child)>:last-child>* {border-color: #e3edbe  !important;}
div.dt-container.dt-empty-footer tbody > tr:last-child > * {border-bottom: 1px solid #e3edbe  !important;}
div.activity-filter {position: relative;width: 100%;max-width: 420px;display: none;}
.activity-filter .activity-filter-dropdown {position: absolute;z-index: 999;right: 0;top: 8px;}
.activity-filter .activity-filter-dropdown .activity-field {display: flex;font-size: 11px;gap: 20px;}
.activity-filter .activity-filter-dropdown .activity-field .form-group {display: flex;align-items: center;gap: 8px;white-space: nowrap;margin: 0 !important;}
.activity-filter .activity-filter-dropdown .activity-field .form-group select{border: none;height: 32.66px;}
.activity-filter .activity-filter-dropdown .activity-field .form-group label{font-size: 12px;font-weight: 600;color: #7c874f;}
.btn-delete-modal{background: #ff776b !important;}
/* table css end*/

/* form css */

.form-group, .input-group {margin-bottom: 25px;}
#register-form .form-group {position: relative;}

/* form css end */

/* home page css */

.carousel-inner .carousel-item video {    width: 100%;    height: 100%;    object-fit: cover; }
.dashboard-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));    gap: 25px;    padding: 35px 0;}
.dashboard-grid .summary-tile { background: linear-gradient(135deg, white 0%, #fafafa 100%);   border: 1px solid #e9ecef;  border-radius: 12px;
                                padding: 10px;text-align: center;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);  transition: all 0.3s ease; position: relative;  overflow: hidden; }
.dashboard-grid .summary-tile::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, var(--primary), #ff4757);}
.dashboard-grid .summary-tile:hover {transform: translateY(-4px);box-shadow: 0 8px 30px rgba(220, 20, 60, 0.15);}
.dashboard-grid .summary-tile .tile-number {font-size: 24px;font-weight: 700;color: var(--primary);margin-bottom: 12px;text-shadow: 0 2px 4px rgba(220, 20, 60, 0.1);}
.dashboard-grid .summary-tile .tile-label {font-size: 13px;color: #6c757d;text-transform: uppercase;letter-spacing: 1px;font-weight: 600;}
.section {background: var(--bg-white);border: 1px solid #e9ecef;border-radius: 12px;padding: 30px;margin-bottom: 25px;box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);}
.section .section-title {font-size: 22px;font-weight: 700;margin-bottom: 25px;color: var(--primary);border-bottom: 2px solid #f1f3f4;padding-bottom: 15px;position: relative;}
.section .section-title::after {content: '';position: absolute;bottom: -2px;left: 0;width: 60px;height: 2px;background: var(--primary);}
.dealer-activity .activity-item {display: flex;align-items: center;padding: 15px;border-bottom: 1px solid #f1f3f4;transition: background 0.2s ease;}
.dealer-activity .activity-item:hover {background: rgba(220, 20, 60, 0.02);}
.activity-item .activity-icon {width: 40px;height: 40px;border-radius: 50%;background: linear-gradient(135deg, var(--primary), #ff4757);color: var(--bg-white);
                               display: flex;align-items: center;justify-content: center;margin-right: 15px;font-weight: bold;}
.activity-item .activity-content { flex: 1;}
.activity-content .activity-title {font-weight: 600;color: #495057;margin-bottom: 4px;}
.activity-content .activity-meta {font-size: 12px;   color: #6c757d; }
/* home page css  end*/


/* product page css */

/* .role-specific-content {
    display: none;
} */
.role-specific-content.active {    display: block;}
.configurator-wrapper {background: var(--bg-white);border-radius: 6px;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);overflow: hidden;display: grid;grid-template-columns: 300px 1fr 350px;min-height: 800px;}
.configurator-wrapper .sidebar {background: #f8f9fa;border-right: 1px solid #e9ecef;padding: 2rem;margin-bottom: 0;}
.sidebar .step-progress {margin-bottom: 2rem;}
.step-progress .step {display: flex;align-items: center;gap: 12px;margin-bottom: 1rem;padding: 12px;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;}
.step-progress .step.active {background: #007bff;color: var(--bg-white);transform: translateX(5px);}
.step-progress .step.completed {background: #28a745;color: var(--bg-white);}
.step-progress .step.disabled {opacity: 0.5;cursor: not-allowed;}
.step .step-number {width: 24px;height: 24px;border-radius: 50%;background: #6c757d;color: var(--bg-white);display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: bold;}
.step-progress .step.active .step-number,
.step-progress .step.completed .step-number {background: rgba(255, 255, 255, 0.3);}
.sidebar .saved-configs {margin-top: 2rem;padding-top: 2rem;border-top: 1px solid #dee2e6;}
.saved-configs .saved-config {padding: 12px;border: 1px solid #dee2e6;border-radius: 6px; margin-bottom: 8px;cursor: pointer;transition: background 0.2s;}
.saved-configs .saved-config:hover {background: #e9ecef;}
.main-content {padding: 2rem;overflow-y: auto;}
.main-content .step-header {margin-bottom: 2rem;}
.step-header .step-title {font-size: 24px; margin-bottom: 8px; color: #2c3e50;}
.step-header .step-description {color: #6c757d;margin-bottom: 1rem;}
.step-header .progress-bar { height: 6px;background: #e9ecef;border-radius: 3px;overflow: hidden;}
.progress-bar .progress-fill { height: 100%; background: linear-gradient(90deg, #007bff, #0056b3); transition: width 0.3s ease;}
.main-content .filters { margin-bottom: 2rem; padding: 1rem; background: #f8f9fa; border-radius: 8px; }
.filters .filter-group { display: flex; gap: 1rem; margin-bottom: 1rem;}
.filters .filter-group:last-child {margin-bottom: 0;}
.form-section {margin-bottom: 2rem;}
.form-section .form-group {margin-bottom: 1.5rem;}
.form-group .form-label {display: block; margin-bottom: 8px; font-weight: 600; color: #495057;}
.form-group .form-control {width: 100%; border: 2px solid #e9ecef;border-radius: 6px;font-size: 14px; transition: border-color 0.3s ease;}
.form-group .form-control:focus {outline: none;border-color: var(--primary); box-shadow: none;}
.form-group .form-control:disabled {background: #f8f9fa !important;color: #6c757d;cursor: not-allowed;opacity: 0.7;}
.option-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem;}
.option-grid .option-card {border: 2px solid #e9ecef; border-radius: 8px; padding: 1rem; cursor: pointer; transition: all 0.3s ease;text-align: center;}
.option-grid .option-card:hover {border-color: var(--primary);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);}
.option-grid .option-card.selected { border-color: var(--primary); background: #f8f9ff;}
.option-grid .option-card.disabled {opacity: 0.5;cursor: not-allowed;background: #f8f9fa;}
.option-grid .option-card.disabled::after {content: "Not compatible with current selection";display: block;font-size: 12px;color: #dc3545;margin-top: 8px;font-style: italic;}
.option-card .option-image {width: 60px;height: 60px;background: linear-gradient(45deg, #4CAF50, #8BC34A);
                            border-radius: 8px;margin: 0 auto 8px;display: flex;align-items: center;justify-content: center;color: var(--bg-white);font-weight: bold;}
.validation-message {background: #f8d7da;color: #721c24;padding: 12px;border-radius: 6px;margin-top: 1rem;display: none;}
.validation-message.show {display: block;animation: slideIn 0.3s ease;}
.validation-message.success { background: #d4edda; color: #155724;}
.navigation-buttons { display: flex;justify-content: space-between; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e9ecef; gap: 5px;}
.configurator-wrapper .summary-panel {background: #f8f9fa;border-left: 1px solid #e9ecef; padding: 2rem;}
.summary-panel .summary-header { margin-bottom: 2rem;}
.summary-header .summary-title { font-size: 18px; margin-bottom: 1rem; color: #2c3e50;}
.summary-panel .price-display { background: linear-gradient(135deg, #28a745, #20c997); color: var(--bg-white); padding: 1.5rem; border-radius: 8px; text-align: center; margin-bottom: 2rem;}
.price-display .price-label { font-size: 14px;opacity: 0.9;}
.price-display .price-value { font-size: 32px; font-weight: bold;  margin: 8px 0;}
.price-display .price-subtitle {font-size: 12px;opacity: 0.8;}
.summary-panel .summary-section {margin-bottom: 1.5rem;}
.summary-section .summary-section-title {font-weight: 600;margin-bottom: 8px;color: #495057;}
.summary-item {display: flex;justify-content: space-between;align-items: center;padding: 8px 0;border-bottom: 1px solid #e9ecef;}
.summary-item:last-child {border-bottom: none;}
.item-price {font-weight: 600;color: #28a745;}
.action-buttons {margin-top: 2rem;}
.notification {position: fixed;top: 20px;right: 20px;padding: 1rem 1.5rem;background: #28a745;color: var(--bg-white);border-radius: 6px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);transform: translateX(400px);transition: transform 0.3s ease;z-index: 1000;}
.notification.show {transform: translateX(0);}
@keyframes slideIn {
    from {opacity: 0;transform: translateY(-10px);}
    to {opacity: 1;transform: translateY(0);}
}
/* product page css end */


/* order page css */

.section .filters {margin-bottom: 2rem;padding: 1rem;background: #f8f9fa;border-radius: 8px;display: flex;gap: 20px;flex-wrap: wrap;}
.filters .filter-select {padding: 12px 18px;border: 2px solid #e9ecef;border-radius: 8px;background: var(--bg-white);min-width: 160px;font-weight: 500;color: #495057;transition: border-color 0.3s ease;}
.filters .filter-select:focus {outline: none;border-color: var(--primary);box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.1);}
.status-badge {padding: 6px 12px;border-radius: 20px;font-size: 12px;font-weight: 600;text-transform: uppercase;}
.status-pending { background: #fff3cd; color: #856404;}
.status-approved {background: #d4edda;color: #155724;}
.status-shipped {background: #cce5ff;color: #004085;}
.status-delivered {background: #d1ecf1; color: #0c5460;}
.status-draft {background: #f8d7da;color: #721c24;}
#newOrderform .RejectReasonNotification{
    background: var(--primary);
    color: #fff !important;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.warning_icon{
    color: #fff;
    /* background: #fff; */
    padding: 8px;
    border-radius: 50%;
    font-size: 30px;
    }
#newOrderform .RejectReasonNotification div>h5{
     color: #fff !important;
        margin: 0px;
}
#newOrderform .RejectReasonNotification div>label{    
        color: #fff !important;
        margin: 0px;
        font-size: 14px;
    }
#newOrderform .RejectReasonNotification div>p{
        color: #fff !important;
        margin: 0px;
        font-size: 14px;
        font-weight: 600;
    }
/* order page css end */

/* order page css end */

.info-detail-main{display: flex; gap: 30px; margin-top: 30px;}
.info-detail-main .info-heading{color: var(--primary); margin-bottom: 30px; font-size: 18px;}
.info-detail-main .info-details-body{background: #f8f9fa; padding: 20px; border-radius: 8px;}
.info-detail-main .info-details-body p{font-size: 16px;padding-bottom: 8px;border-bottom: 1px solid #d3d3d3;}
.info-details-body .recent-details{border-bottom: 1px solid #dee2e6; padding-bottom: 10px; margin-bottom: 10px;}
.recent-details strong{font-size: 14px;}

/* order page css end */


/* Knowledge Base css start */



/* Knowledge Base css End */


/* Form css start */

label{font-size: 16px;font-weight: normal;color: #333;margin-bottom: 5px;}
.form-btn-grp{display: flex; gap: 10px;}
.form-btn-grp .btn{ width: auto !important;}
.additional-fileds .form-group { position: relative;}
label.error {color: #f15b5d; font-size: 14px;}
.form-group label>span {color: #f15b5d;}
.form-group-select select, .form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
background-image: url(/icon-dropdown.png);background-position: right; background-repeat: no-repeat;}
/* Form css end */


/* modal popup css start */

 .icon img {width: 55px;opacity: 0.8;}

.message {margin: 30px 0 30px;font-size: 16px;color: #333;text-align: center;}
.remove-btn{text-align: center;display: flex;align-items: center;gap: 10px;}
.delete-btn-btn {width: 50%;background: linear-gradient(90deg, #ff4f81, #ff1f58);color: var(--bg-white);border: none;
  padding: 12px;border-radius: 12px;font-size: 16px;cursor: pointer;/* margin-bottom: 12px; */transition: 0.2s;}
.delete-btn-btn:hover {opacity: 0.9;}
.deleteoutline{ text-align: center;}
.deleteoutline .remove-icon{background: linear-gradient(to bottom, #dc143c0a, #dc143c0a);padding: 21px;font-size: 30px;border-radius: 50%;color: #dc143c;}
.cancel-btn-btn {width: 50%;padding: 12px;border: none;color: #555;font-size: 16px;cursor: pointer;border-radius: 10px;}
.cancel-btn-btn:hover {background: #f1f1f1;}

/* modal popup css end */

/* dashbaord css start */

.dashboard-admin-content{background-color: var(--bg-white);border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);padding:0;}
.dashboard-new .dashboard-header {background: white;border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);}
.dashboard-new .dashboard-header .header-container {max-width: 100%;margin: 0 auto;padding: 1.5rem 2rem;}
.header-top { display: flex;align-items: center;justify-content: space-between;margin-bottom: 1rem;}
.header-title h1 {font-size: 1.875rem;font-weight: bold;color: #111827;}
.header-title p { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;}
.header-container .header-actions {display: flex; align-items: center;gap: 1rem;}
.header-actions .status-indicator {text-align: right;}
.status-indicator .status-line {display: flex;align-items: center; gap: 0.5rem; font-size: 0.875rem;color: #6b7280;}
.status-line .status-dot {width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #10b981;}
.status-dot.refreshing {background-color: var(--primary); animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;}
@keyframes pulse {0%, 100% { opacity: 1; }50% { opacity: 0.5; }}
@keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}
.status-indicator .status-time {font-size: 0.75rem; color: #9ca3af;margin-top: 0.25rem;}
button.refresh-btn {display: flex; align-items: center;gap: 0.5rem;padding: 0.5rem 1rem;background-color: var(--primary); color: white; border: none;
border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem;font-weight: 500;transition: background-color 0.2s;}
button.refresh-btn:hover:not(:disabled) {background-color: #2563eb;}
button.refresh-btn:disabled { opacity: 0.5; cursor: not-allowed;}
.refresh-btn .refresh-icon {width: 1rem; height: 1rem;}
.refresh-btn .refresh-icon.spinning { animation: spin 1s linear infinite;}
.header-container .filters-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;}
.filters-grid .filter-group label { display: block; font-size: 0.875rem;font-weight: 500;color: #374151;margin-bottom: 0.25rem;}
.filters-grid .filter-group select,
.filters-grid .filter-group input {width: 100%;padding: 0.5rem 0.75rem;border: 1px solid #d1d5db;border-radius: 0.5rem;font-size: 0.875rem;background: white;}
.filters-grid .filter-group select:focus,
.filters-grid .filter-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);}
.filter-group .search-input-wrapper { position: relative;}
.search-input-wrapper .search-icon {position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem;color: #9ca3af;}
.search-input-wrapper input { padding-left: 2.5rem;}
.results-box {padding: 0.5rem 0.75rem;background-color: #f9fafb;border: 1px solid #d1d5db;border-radius: 0.5rem;font-size: 0.875rem;color: #374151;font-weight: 500;}        
.dashboard-new .status-tiles { display: grid;grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 1rem; margin-bottom: 2rem;}
.status-tiles .status-tile { border: 2px solid; border-radius: 0.5rem; padding: 1rem; cursor: pointer; border-color:#d1d5db; border-top: var(--primary) solid 4px; transition: all 0.2s; background: white;}
.status-tiles .status-tile:hover {transform: translateY(-2px);  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);}
.status-tile.selected {transform: scale(1.05);box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);}
.status-tile .status-tile-header { display: flex; align-items: center;justify-content: space-between; margin-bottom: 0.5rem;}
.status-tile-header .status-icon {width: 1.25rem; height: 1.25rem;}
.status-tile-header .status-count {font-size: 1.5rem;font-weight: bold;}
.status-tile .status-label { font-size: 0.875rem;font-weight: 600; margin-bottom: 0.25rem; }
.status-tile .status-date {font-size: 0.75rem;opacity: 0.75;}
/* Status-specific colors */
.status-tiles .status-draft { background-color: #f9fafb;border-color: #d1d5db; color: #374151;}
.status-tiles .status-draft:hover { background-color: #f3f4f6;}
.status-tiles .status-pending { background-color: #fffbeb; border-color: #fcd34d;color: #92400e;}
.status-tiles .status-pending:hover {background-color: #fef3c7;}
.status-tiles .status-approved {background-color: #f0fdf4; border-color: #86efac; color: #166534;}
.status-tiles .status-approved:hover {background-color: #dcfce7;}
.status-tiles .status-active {background-color: #eff6ff; border-color: #93c5fd; color: #1e40af;}
.status-tiles .status-active:hover {background-color: #dbeafe;}
.status-tiles .status-rejected { background-color: #fef2f2;border-color: #fca5a5;color: #991b1b;}
.status-tiles .status-rejected:hover {background-color: #fee2e2;}
.status-tiles .status-cancelled { background-color: #fff7ed;border-color: #fdba74;color: #9a3412;}
.status-tiles .status-cancelled:hover {background-color: #ffedd5;}
.status-tiles .status-historical {background-color: #f8fafc;border-color: #cbd5e1;color: #475569;}
.status-tiles .status-historical:hover {background-color: #f1f5f9;}
.dashboard-new .orders-card { background: white; border-radius: 0.5rem;border: 1px solid #e5e7eb; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);}
.orders-card .orders-header {padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb;}
.order-button-excel{display: flex; align-items: center; justify-content: space-between;}
.orders-card .orders-header h2 {font-size: 1.25rem;font-weight: 600;color: #111827;}
.orders-card .orders-header p {font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;}
.filter-badge {display: inline-block; margin-left: 0.5rem;padding: 0.25rem 0.5rem;background-color: #dbeafe;color: #1e40af; border-radius: 0.25rem; font-size: 0.75rem;font-weight: 500;}
.orders-card .active-filters {padding: 0.75rem 1.5rem;background-color: #eff6ff;border: 1px solid #bfdbfe;border-radius: 0.5rem;display: flex;flex-wrap: wrap; gap: 0.5rem; margin: 1rem 1.5rem;}
.active-filters .filter-chip {display: flex;align-items: center; gap: 0.5rem;background: white; padding: 0.25rem 0.75rem;border-radius: 0.25rem; border: 1px solid #93c5fd;font-size: 0.75rem;}
.filter-chip .filter-chip-label {font-weight: 500;color: #374151;}
.filter-chip .filter-chip-remove {color: #9ca3af;cursor: pointer;transition: color 0.2s;}
.filter-chip .filter-chip-remove:hover {color: #dc2626; }
.orders-card .orders-body {padding: 1.5rem;}
.table-wrapper { overflow-x: auto;}
.th-content {display: flex;align-items: center; justify-content: space-between;}
.all-record-order tr .th-content .filter-icon { width: 1rem; height: 1rem;color: #ffffff;opacity: 0;transition: opacity 0.2s;cursor: pointer;}
.all-record-order tr th:hover .filter-icon {opacity: 1; }
.column-menu { position: absolute; top: 100%;margin-top: 0.5rem; width: 20rem; background: white; border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border: 1px solid #d1d5db; z-index: 50; overflow: hidden;}
.column-menu.align-right { right: 0;}
.column-menu.align-left {left: 0;}
.menu-header { padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; background-color: #f9fafb;display: flex;align-items: center;justify-content: space-between;}
.menu-header .menu-header-title {font-size: 0.875rem; font-weight: 600; color: #111827;}
.menu-header .menu-close {  width: 1rem; height: 1rem; color: #6b7280; cursor: pointer;transition: color 0.2s;}
.menu-header .menu-close:hover { color: #374151;}
.menu-tabs { display: flex; border-bottom: 1px solid #e5e7eb;}
.menu-tabs .menu-tab {flex: 1; padding: 0.5rem 0.75rem; font-size: 0.75rem;font-weight: 500; color: #6b7280; background: none; border: none; cursor: pointer;transition: all 0.2s; border-bottom: 2px solid transparent;}
.menu-tabs .menu-tab:hover {  color: #374151; }
.menu-tabs .menu-tab.active { color: var(--primary); border-bottom-color: var(--primary); background-color: #eff6ff;}
.menu-content { padding: 0.75rem 1rem; max-height: 24rem;    overflow-y: auto; }
.menu-content .form-group { margin-bottom: 0.75rem;}
.menu-content .form-group .form-label { display: block; font-size: 0.75rem;font-weight: 500;  color: #374151; margin-bottom: 0.25rem;}
.menu-content .form-group .form-select,
.menu-content .form-group .form-input {width: 100%;padding: 0.5rem;border: 1px solid #d1d5db;border-radius: 0.25rem; font-size: 0.75rem;}
.menu-content .form-group .form-select:focus,
.menu-content .form-group .form-input:focus {outline: none;border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary);}
.calendar-wrapper {position: relative;}
.calendar-wrapper .calendar-button {width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.25rem;font-size: 0.75rem;text-align: left; background: white; cursor: pointer;}
.calendar-wrapper .calendar-popup { position: absolute;top: 100%;  left: 0;  margin-top: 0.25rem; background: white; border: 1px solid #d1d5db; border-radius: 0.5rem;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);z-index: 60;padding: 0.75rem;width: 16rem;}
.calendar-header { display: flex;align-items: center;justify-content: space-between;margin-bottom: 0.75rem;}
.calendar-header .calendar-nav-btn { padding: 0.25rem; background: none; border: none; cursor: pointer; border-radius: 0.25rem; transition: background-color 0.2s;}
.calendar-header .calendar-nav-btn:hover { background-color: #f3f4f6; }
.calendar-header .calendar-selects { display: flex; align-items: center; gap: 0.5rem;}
.calendar-header .calendar-selects select { padding: 0.25rem 0.5rem; border: 1px solid #d1d5db; border-radius: 0.25rem;font-size: 0.75rem;}
.calendar-table { width: 100%;font-size: 0.75rem;}
.calendar-table th { padding: 0.25rem; text-align: center; /* color: #6b7280; */font-weight: 500; background: none;}
.calendar-table th:hover { background: none;}
.calendar-table td { padding: 0.25rem; text-align: center; }
.calendar-day-btn { width: 1.5rem; height: 1.5rem; border: none; background: none; cursor: pointer; border-radius: 0.25rem; color: #374151; transition: all 0.2s; }
.calendar-day-btn:hover {background-color: var(--primary); color: white;}
.menu-footer {padding: 0.75rem 1rem; border-top: 1px solid #e5e7eb; background-color: #f9fafb; display: flex; gap: 0.5rem;}
.menu-footer .menu-btn {flex: 1; padding: 0.5rem 0.75rem; font-size: 0.75rem;  font-weight: 500;  border: none; border-radius: 0.25rem; cursor: pointer;  transition: all 0.2s;}
.menu-footer .menu-btn-primary {  background-color: var(--primary); color: white;}
.menu-footer .menu-btn-primary:hover { background-color: #2563eb;}
.menu-footer .menu-btn-secondary { background-color: #d1d5db;color: #374151;}
.menu-footer .menu-btn-secondary:hover {background-color: #9ca3af;}
.td-expand { color: #6b7280;cursor: pointer;text-align: center; width: 50px; }
.expand-icon { width: 1.25rem; height: 1.25rem;display: inline-block;vertical-align: middle; transition: transform 0.2s;}
.expand-icon.expanded { transform: rotate(180deg); }
.td-order-number { font-weight: 500; color: var(--primary);}
.td-total { font-weight: 600;}
.status-badge {display: inline-block; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem;font-weight: 500;}
.badge-draft { background-color: #f3f4f6;color: #374151; }
.badge-pending { background-color: #fef3c7; color: #92400e;}
.badge-approved { background-color: #dcfce7; color: #166534;}
.badge-active { background-color: #dbeafe; color: #1e40af;}
.badge-rejected {background-color: #fee2e2;color: #991b1b;}
.badge-cancelled { background-color: #ffedd5; color: #9a3412;}
.badge-historical {  background-color: #f1f5f9; color: #475569;}
.details-btn { color: var(--primary);font-weight: 500; cursor: pointer; background: none; border: none; transition: color 0.2s;}
.details-btn:hover { color: #2563eb; }
.expanded-row { background-color: #f9fafb;}
.expanded-content { padding: 1rem 1.5rem;}
.details-grid {  display: grid;grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
.detail-label { font-size: 0.75rem;font-weight: 500;color: #6b7280; margin-bottom: 0.25rem;}
.detail-value {font-size: 0.875rem; color: #111827;}
.detail-value.rejected {color: #dc2626;}
.order-lines-section h4 { font-size: 0.875rem;font-weight: 600; color: #111827;margin-bottom: 0.5rem;}
.order-lines-table {width: 100%;font-size: 0.875rem;}
.order-lines-table thead {background-color: #f3f4f6;}
.order-lines-table th { padding: 0.5rem 0.75rem;font-size: 0.75rem; font-weight: 500; /* color: #6b7280; */}
.order-lines-table td { padding: 0.5rem 0.75rem;background: white;}
.no-results { text-align: center; padding: 3rem; color: #6b7280;}
#customerIdFilter{padding-left: 30px;}
.order-lines-section .order-count {font-size: 12px;}
.order-lines-section .order-count span{font-size: 10px;}
.dealer-admin-role .page-copy .dashboard-header .header-container .filters-grid {
    display: none;
}
select.column-filter-dropdown.form-control.form-control-sm,
.form-control-sm{
    font-size: 12px;
}
/* Section Title  recent activity*/
.dashboard-recent {font-family: var(--default-font);padding: 20px;background: #f8f9fb;color: #2c3e50;}
.dashboard-recent .recent-activities h2 {margin: 0;font-size: 24px;font-weight: 600;color: #333;}
.dashboard-recent .sub {color: #7f8c8d;margin-bottom: 20px;font-size:16px;}

/* Activity Item */
.dashboard-recent .activity-item {background: #fff;padding: 18px;border-radius: 10px; display: flex;justify-content: space-between;margin-bottom: 14px;box-shadow: 0 1px 4px rgba(0,0,0,0.08);}
.dashboard-recent .activity-item .left {display: flex;    gap: 12px;}
.left div h4{font-size:18px}
.left div p{font-size:14px}
.dashboard-recent .status {font-size: 20px;margin-top: 3px;}
.dashboard-recent .status.completed { color: #2ecc71; }
.dashboard-recent .status.pending { color: #f39c12; }
.dashboard-recent .status.draft { color: #3498db; }

/* Tags */
.dashboard-recent .tag {font-size: 10px;padding: 3px 8px;border-radius: 6px;margin-left: 6px;color: #fff;}
.dashboard-recent .tag.completed { background: #2ecc71; }
.dashboard-recent .tag.pending { background: #f39c12; }
.dashboard-recent .tag.draft { background: #3498db; }

/* Right Date Box */
.dashboard-recent .activity-item .right {text-align: right;font-size: 14px;color: #555;}
.dashboard-recent .right span {font-size: 12px;color: #888;}

/* Bottom Cards */
.dashboard-recent .bottom-grid {display: grid;grid-template-columns: repeat(3, 1fr); gap: 18px;margin-top: 25px;}
.dashboard-recent .card { background: #fff;border-radius: 10px; padding: 20px;box-shadow: 0 1px 4px rgba(0,0,0,0.08);}
.dashboard-recent .card h3 { margin-bottom: 15px;font-size: 18px;}

/* Quick Actions */
.dashboard-recent .card a { display: block;color: #3498db;margin-bottom: 10px;text-decoration: none;}

/* Summary Rows */
.dashboard-recent .summary-row {display: flex;justify-content: space-between;margin: 8px 0;}

/* Notification card */
.dashboard-recent .notification-card p { margin-bottom: 12px;font-size:14px;}
.dashboard-recent .notification-card small {color: #7f8c8d;font-size: 12px;}

/* dashbaord css end */

.active-filters {background: #e7f5ff;border: 2px solid #74c0fc;border-radius: 8px;padding: 15px 18px; margin-bottom: 20px;}
.filter-badge {display: inline-block;background: #4dd4ac;color: var(--bg-white);padding: 6px 14px;border-radius: 6px;margin-right: 10px;margin-bottom: 8px;font-size: 12px; font-weight: 600;}
.clear-filters {background: #dc3545;color: var(--bg-white);border: none;padding: 6px 14px;border-radius: 6px;font-size: 12px;font-weight: 600;cursor: pointer;}
span.column-header-label {display: block;margin-bottom: 8px;font-size: 13px;font-weight: 700;text-transform: uppercase;}
.pagination-info { background: #fff3cd; border: 2px solid #ffc107; border-radius: 8px; padding: 12px 18px; margin-bottom: 20px;font-size: 13px;}      
.column-search {padding: 4px;border: 1px solid #e0e0e0; border-radius: 6px;font-size: 11px;background-color: var(--bg-white);box-sizing: border-box;display: block;transition: all 0.3s ease;}
.dt-container .dt-layout-row:first-child{display:none;}
.section .section-title {margin-bottom: 25px;border-bottom:none;}
.section .filters{ align-items: center;}
input::placeholder {color: #9999 !important;}
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before{ opacity:0 !important;}
.table-action{display: flex;gap: 15px;align-items: center;}
.table.dataTableCustom tfoot {display: table-header-group;}


/* header notification start */
/* Parent wrapper */
.notification-wrapper { position: relative;}
/* Main record container */
.notification-wrapper .notification-record {position: relative;}
/* Notification dropdown box */
.notification-wrapper .notification-box {position: absolute;top: 0px;left: -30px;width: 300px;background: #fff;box-shadow: 0 4px 12px rgba(0,0,0,0.15);border-radius: 8px;padding: 15px;display: none; z-index: 100;}
.notification-wrapper .notification-item {padding: 10px 0;border-bottom: 1px solid #eee;display: flex;gap: 10px;}
.main-icon-noti .icon-notifi-icon{background: aliceblue;padding: 8px;border-radius: 50%;font-size: 16px;color: #4CAF50;}
.notification-wrapper .notification-item p {font-size: 12px;margin-bottom:0;}
.notification-wrapper .heading-notifi {font-size: 19px;border-bottom: 1px solid #d3d3d3;padding-bottom: 10px; margin: 10px 0;}
div#notificationList{max-height: 350px;overflow: auto;}
.notification-wrapper .notification-item:last-child {border-bottom: none;}
.notification-wrapper .actions {margin-top: 8px;display: flex;gap: 5px;}
.full-name{font-weight: bold;}
.notification-wrapper .approve,
.notification-wrapper .reject {padding: 5px 10px;border-radius: 5px;border: none;cursor: pointer;font-size: 12px;}
.notification-wrapper .approve {background: #4CAF50;color: var(--bg-white);width: 50%;border-radius: 0;}
.notification-wrapper .reject {background: #e63946;color: var(--bg-white);width: 50%;border-radius: 0;}
.notification-wrapper .show-all {display: flex; justify-content: center; width: 100%;padding: 8px;margin-top: 12px;background: #007bff;color: #fff;border: none;border-radius: 6px;cursor: pointer;font-size: 14px;}
.notification-wrapper .show-all:hover {background: #0069d9;}
.count-noti-main{position: relative;}
.count-noti-main .count-notification{position: absolute;top: -40px;right: 2px;font-size: 10px; background: greenyellow; border-radius: 50%;
padding: 2px;min-width: 20px;display: flex;text-align: center;align-items: center;justify-content: center;}
/* header notification End */

.icon_message{
    position: relative;
  cursor: pointer;
}
.icon_message .chat-badge {
  position: absolute;
  top: 2px;
  right: -5px;
  background: red;
  color: #fff;
  font-size: 12px;
  padding: 6px;
  border-radius: 50%;
  display: none;
}

.chat-notification-msg {
  position: absolute;
  top: 0;
  left: 20px;
  width: 280px;
  height: 100%;
  min-height: 350px;
  overflow: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: none;
  z-index: 999;
  padding: 15px;
}

.chat-notification-msg .chat-header {
  padding: 12px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

/* .chat-notification-msg .chat-item {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f1f1;
} */

.chat-notification-msg .chat-item p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #555;
}

.chat-footer-msg {
  text-align: center;
  padding: 10px;
}

.chat-footer a {
  text-decoration: none;
  color: #007bff;
}

/* order view product configure  start*/
.option-card.active:not(.disabled){
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.option-card.active::before{
    transform: scaleX(1) !important;
}
.option-card.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transform: scaleX(0);
    transition: transform 0.3s;
}

/* order view product configure end */


 .Knowledge_section {
        box-shadow: var(--shadow-md);
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #d3d3d3;
        height: 100%;
    }

    .Knowledge_section .Knowledge_article_list {
        display: flex;
        gap: 12px;
    }
    .knowledge_wrapper{
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 360px;
        height: 100%;
        overflow: auto;
        max-height: 360px;
    }
    .section_two_article{
     min-height: 410px;
    max-height: 400px;
    overflow: auto;
    }

    .Knowledge_article_icon .icon-knowledge {
        background: #e5232b;
        color: white;
        padding: 6px;
        border-radius: 50%;
    }
    .icon-knowledge-edit{
        background: #31708f;
        color: white;
        padding: 7px;
        border-radius: 50%;
        font-size: 17px;
        cursor: pointer;
    }

    .Knowledge_article_descripation .Knowledge_name {
        font-size: 13px;
        font-weight: 600;
        margin: 0;
    }

    .Knowledge_article_descripation .Knowledge_text {
        font-size: 13px;
        margin: 0;
    }

    .Knowledge_article_descripation .Knowledge_status,
    .Knowledge_article_descripation .Knowledge_mode {
        font-size: 12px;
        font-weight: 600;
        margin: 0;
    }

    .Knowledge_article_descripation .Knowledge_status span,
    .Knowledge_article_descripation .Knowledge_mode span {
        font-size: 12px;
        font-weight: 400;
        margin: 0;
    }
    .know_form_title{
        margin-top: 0;
        font-size: 16px;
        color: var(--primary);
    margin-bottom: 15px;
    }
    .main_content_knowle{
        display: flex;
        justify-content: space-between;
        padding: 10px;
    background-color: #5f23e50d;
    border-radius: 6px;
    cursor: pointer;
    }
    .article_content_Knowledge .row .form-group p{
        font-size: 16px;
    color: #090909;
    font-weight: 500;
    margin: 0;
    }
    p#description_content_view {
    white-space: pre-wrap;
    word-spacing: normal;
    line-height: 1.5;
}
    .article_content_Knowledge .row .form-group label{
        font-weight: 600;
    }
    .multiple_file{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2px solid #d3d3d3;
        padding-bottom: 5px;
        flex-direction: column;

    }
    .download_delete{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .btn-delete-modal-article{
    background: linear-gradient(90deg, #ff4f81, #ff1f58);
    color: white !important;
    }
    .down_load{
        font-size: 16px;
        background: linear-gradient(90deg, #46e965, #2dc132);
    color: white;
    }
 .file-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: 2px solid #eee;
        width: 100%;
    }
    .file-row:last-child {
        border-bottom: none;
    }
    .file-row .file-name-text {
        flex: 1;
        word-break: break-all;
        padding-right: 8px;
    }
    .file-row .download_delete {
        display: flex;
        gap: 5px;
        flex-shrink: 0;
    }
    .file-row .download_delete a,
    .file-row .download_delete p {
        cursor: pointer;
        margin: 0;
    }
    .no-files-text {
        color: #999;
        font-size: 0.85rem;
    }
@media (max-width: 480px) {
.notification-wrapper .notification-box {position: fixed; top: 10px;right: 10px;width: 90%;padding: 12px;border-radius: 10px;}
.notification-wrapper .notification-item p { font-size: 12px;}
.notification-wrapper .actions {flex-direction: column; gap: 6px;}
.notification-wrapper .approve,
.notification-wrapper .reject {width: 100%;font-size: 13px;padding: 7px 0;}
}
 @media (max-width: 768px) {
.configurator-wrapper {grid-template-columns: 1fr;}
.configurator-wrapper .sidebar, .configurator-wrapper .summary-panel {display: none;}
.quick-actions,
.info-detail-main{flex-wrap: wrap;}
.notification-wrapper .notification-box {right: 10px;width: 260px; padding: 12px;}
.notification-wrapper .heading-notifi {font-size: 17px;}
}
@media (max-width: 900px) {
.dashboard-recent .bottom-grid {grid-template-columns: 1fr;}
}
@media (max-width: 999px) {
.configurator-wrapper {grid-template-columns: 100%;}
}
 @media (max-width: 1024px) {
.filters-grid { grid-template-columns: 1fr;}
.status-tiles {grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}
  }