@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="Dealer User"]::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: 0.7rem; 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, var(--primary), var(--primary-light)); color: var(--bg-white); padding: 1.5rem; border-radius: 8px; text-align: center; margin-bottom: 2rem;} */
.summary-panel .price-display {padding-top: 8px; border: 2px solid #d2d2d2; 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: 22px; font-weight: bold;  margin: 8px 0;}
.price-display .price-subtitle {font-size: 14px;opacity: 0.8;margin-bottom: 7px;}
.summary-panel .discountedPrice .price-subtitle .card-total-discount{font-weight: 600;}
.summary-panel .summary-section {margin-bottom: 1.5rem;}
.summary-section .summary-section-title {font-weight: 600;margin-bottom: 8px;color: #495057;font-size: 14px;}
.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;
        font-size: 18px;
}
#newOrderform .RejectReasonNotification div>label{    
        color: #fff !important;
        margin: 0px;
        font-size: 13px;
    }
#newOrderform .RejectReasonNotification div>p{
        color: #fff !important;
        margin: 0px;
        font-size: 14px;
        margin-top: 3px
        /* font-weight: 600; */
    }
.form-group.mb-0.discountamount_header > label,
.form-group.mb-0.discountamount_header > #early_order_program{
    padding-bottom: 3px;
}
.form-group.mb-0.pre_tax_amount_header > label,
.form-group.mb-0.pre_tax_amount_header > #pre_tax_amount{
    border-top: 2px solid #7e88ec69;
    padding-top: 3px;
}
/* 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;}

.view-all-msg{ 
    bottom: 0;
    left: 0;
    margin-left: 0;
    margin-bottom: 7px;
    width: calc(100% - 30px);
    right: 0;
    margin-left: auto !important;
    margin-right: auto;
    margin-top: auto;
    position: absolute;
}
/* 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;
}
.dealer-admin-role .page-copy .dashboard-header{
    display: none;
}
select.column-filter-dropdown.form-control.form-control-sm,
.form-control-sm{ font-size: 12px;}

.dashboard-cards {display: grid; margin: 25px 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));gap: 20px;}
.dashboard-cards .card_order {background: #fff; border-radius: 10px;
padding: 15px; border: 2px solid transparent;display: grid; grid-template-rows: auto 1fr;
height: 110px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);transition: 0.2s ease, transform 0.15s ease;cursor: pointer;}
.dashboard-cards .card_order:hover {transform: translateY(-3px);box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);}
.card_order.card-active-filter {box-shadow: 0 0 0 3px #1976D2 inset;transform: translateY(-2px);}
.count-updated {
    transform: scale(1.35);
    opacity: 0.65;
}
.card_order .top {display: flex;justify-content: space-between;align-items: center;}
.card_order .icon {font-size: 16px;}
.card_order .count {font-size: 20px;font-weight: bold;transition: transform 0.3s ease, opacity 0.3s ease;display: inline-block;}
.card_order .label-card-title {font-size: 12px;align-self: end;}
.dashboard-cards .gray { border-color: #d1d5db;background-color: #f9fafb;color: #374151; border-top: 5px solid #d1d5db;}
.dashboard-cards .gray:hover{background-color: #f3f4f6;}
.dashboard-cards .yellow { border-color: #fcd34d; background-color: #fffbeb;color: #92400e; border-top: 5px solid #fcd34d;}
.dashboard-cards .yellow:hover{background-color: #fef3c7;}
.dashboard-cards .green {border-color: #86efac;background-color: #f0fdf4;color: #166534;  border-top: 5px solid #86efac;}
.dashboard-cards .green:hover {background-color: #dcfce7;}
.dashboard-cards .blue {border-color: #93c5fd;background-color: #eff6ff;color: #1e40af; border-top: 5px solid #93c5fd;}
.dashboard-cards .blue:hover {background-color: #dbeafe;}
.dashboard-cards .red {background-color: #fef2f2;border-color: #fca5a5;color: #991b1b; border-top: 5px solid #fca5a5;}
.dashboard-cards .red:hover {background-color: #fee2e2;}
.dashboard-cards .orange {border-color: #cbd5e1;background-color: #f8fafc;color: #475569; border-top: 5px solid #cbd5e1;}
.dashboard-cards .orange:hover {background-color: #f1f5f9;}

/* 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;min-height: 170px; 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(2, 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: 0px;}
.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: 14px;border-bottom: 1px solid #d3d3d3;padding-bottom: 10px; margin: 10px 0; font-weight: 600;}
div#notificationList{max-height: 350px;overflow: auto;width: 100%;}
.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;}
.notification_full{ width: calc(100% - 45px);word-break: break-all;}
.notification_full .email-msg{white-space: pre-line;word-break: break-all;width: 100%;word-break: break-all;}
/* 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 0 15px 15px;flex-direction: column;}
.chat-notification-msg .chat-header {padding: 12px;font-weight: bold;border-bottom: 1px solid #eee;}
.chat-notification-msg .notification_inside{ max-height: 275px;}
/* Hide scrollbar but keep functionality */
.parent .chat-messages::-webkit-scrollbar {width: 6px;}
.parent .chat-messages::-webkit-scrollbar-track{background: transparent;}
.parent .chat-messages::-webkit-scrollbar-thumb{background: #ccc; border-radius: 3px;}

#chatMsgModalBody::-webkit-scrollbar,.notification_inside::-webkit-scrollbar { width: 5px;}
#chatMsgModalBody::-webkit-scrollbar-track,.notification_inside::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px;}
#chatMsgModalBody::-webkit-scrollbar-thumb,.notification_inside::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px;}
#chatMsgModalBody::-webkit-scrollbar-thumb:hover,.notification_inside::-webkit-scrollbar-thumb:hover { background: #aaa;}
/* .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: 14px;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;}    
.down_load{ font-size: 16px; background: linear-gradient(90deg, #46e965, #2dc132); color: white; }
#description_content{resize: none;}
#fileListContainer {background: #fff;border: 1px solid #e5e7eb;border-radius: 12px;padding: 1.25rem 1.5rem;}
.file-list-header {display: flex;align-items: center;gap: 10px;margin-bottom: 1rem;}
.file-list-header-title {font-size: 15px;font-weight: 600;color: #111; margin: 0;}
.file-list-count {font-size: 12px;color: #6b7280;background: #f3f4f6;padding: 2px 8px;border-radius: 20px;border: 1px solid #e5e7eb;}
.file-row { width:100%;display: flex;align-items: center;gap: 12px;padding: 10px 12px;border-radius: 8px;border: 1px solid #e5e7eb;background: #f9fafb;transition: background 0.15s;margin-bottom: 6px;}
.file-row:last-child { margin-bottom: 0; }
.file-row:hover {background: #fff;border-color: #d1d5db;}
.file-ext-badge {width: 34px;height: 34px;border-radius: 6px;
display: flex;align-items: center;justify-content: center;flex-shrink: 0;font-size: 10px;font-weight: 600;}
.ext-jpg { background: #EAF3DE; color: #3B6D11; }
.ext-png { background: #EEF2FF; color: #3730A3; }
.ext-pptx{ background: #FAECE7; color: #993C1D; } 
.ext-pdf { background: #FCEBEB; color: #A32D2D; }
.ext-docx{ background: #E6F1FB; color: #185FA5; }
.ext-xlsx{ background: #EAF3DE; color: #3B6D11; }
.ext-default{ background: #F1EFE8; color: #5F5E5A; }

.file-name-wrap {flex: 1;min-width: 0;}
.file-name-text {font-size: 13px;font-weight: 500;color: #111;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;}
.download_delete {display: flex;align-items: center;gap: 6px;flex-shrink: 0;}
.down_load {display: inline-flex;align-items: center;gap: 5px;padding: 7px 10px;border-radius: 5px;background: linear-gradient(135deg, #4CAF50, #2E7D32);color: #fff !important;border: 1.5px solid #4CAF50 !important;cursor: pointer;font-size: 12px;
font-weight: 600;transition: all 0.2s;text-decoration: none;box-shadow: none !important;}
body .down_load:hover{text-decoration:none !important}
.down_load .material-icons {font-size: 15px;transition: transform 0.2s;line-height: 1;}
.down_load:hover .material-icons {transform: translateY(2px);}

/* Delete button */
.article_content_Knowledge .delete-file-trigger {display: inline-flex;align-items: center;justify-content: center;width: 32px; height: 32px;
border-radius: 7px;background: var(--primary);color: var(--bg-white) !important;border: 1.5px solid var(--primary);cursor: pointer;margin: 0;transition: all 0.2s;}
.article_content_Knowledge .delete-file-trigger:hover {background: var(--primary-dark);color: #fff;}
.article_content_Knowledge .delete-file-trigger .material-icons {font-size: 15px;}
.file-row .download_delete a,
.file-row .download_delete p {cursor: pointer;margin: 0;}

/* discount css */
.w_step_5  div#discount_step_five {display: flex;flex-direction: column;}
.program-card .card-discount {background: #fff; border-radius: 16px;padding: 30px;margin: auto;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}
#discount_step_five .checkmarkIcon{ background: #2a9d8f; transform: scale(0); color: #fff; border-radius: 100%; width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; position: absolute; right: 5px; top: 5px; opacity:0; visibility:hidden; transition: all 0.3s ease}
#discount_step_five input[name="radioprogrambenifit"]:checked + label .checkmarkIcon{opacity:1; visibility:visible; transform: scale(1);}
.program-card .top {display: flex;justify-content: space-between;align-items: flex-start;}
.program-card .badge {display: inline-block;background: #1f3b5b;color: #fff;font-weight: bold;font-size: 11px;padding: 6px 10px;border-radius: 6px;letter-spacing: 1px;float: initial;margin-left: 0;}
.program-card .title {font-size: 16px;font-weight: bold; margin: 10px 0;color: #2c3e50;}
.program-card .meta {font-size: 13px;color: #6c7a89;margin-bottom: 6px;}
.program-card .meta span {margin-right: 8px;}
.program-card .right {text-align: right;}
.program-card .amount {font-size: 24px;font-weight: 700;color: #1fa34a;}
.program-card .subtext {font-size: 11px;color: #7f8c8d;}
.program-card .tags {margin: 15px 0;}
.program-card .tag {display: inline-block;padding: 6px 12px;border-radius: 20px;font-size: 11px;margin: 4px 6px 4px 0;font-weight: 600;}
.program-card .green {background: #dff5e6;color: #1c7c3c;}  
.program-card .green:nth-child(even) {background: #fff4d6;color: #9a6a00; }
.options-grid input[name="radioprogrambenifit"]{display: none;}
input[name="radioprogrambenifit"] + label{cursor: pointer; transition: all 0.3s ease;}
input[name="radioprogrambenifit"]:checked + label,input[name="radioprogrambenifit"]:hover + label {
border-radius: 12px; box-shadow: 0 0px 0 2px #2a9d8f; }
input[name="radioprogrambenifit"]:checked + label .card-discount,input[name="radioprogrambenifit"]:hover + label .card-discount {
background: #f0f8ff;}
input[name="radioprogrambenifit"]:checked + label .benefit-block,input[name="radioprogrambenifit"]:hover + label .benefit-block {
background: #fff;}
div#programSummary {background: linear-gradient(135deg, #f0f9ff, #e8f5e9);border: 1px solid #b3d9f7;border-radius: 8px;padding: 12px;margin-bottom: 8px;display: none;}
.program-card .box {border-radius: 12px;margin-top: 10px;}
.benefit-block{background: #f5f7f9; padding: 0 14px 6px; border-radius: 8px; margin-bottom: 10px; display: inline-flex; flex-direction: column; width: 100%; align-items: baseline;}
.benefit-block .benefit-title {font-size: 9px; background: #dff5e6; color: #1c7c3c; padding: 4px; border-radius: 6px; font-weight: 600; margin: 0 0 5px 0; display: inline-flex; position: relative; left: -14px;}
.benefit-block:nth-child(even) .benefit-title {background: #fff4d6;color: #9a6a00;}
.program-card .row-discount-line {display: flex; width: 100%; font-size: 12px;padding: 2px 0; }
.program-card .row-discount-line .deposit_calc{margin-left: 0; margin-right: 0; font-weight: 600;} 
.program-card .row-discount-line .condition_type{margin-left: 0; margin-right: 5px;} 
.program-card .row-discount-line .enddate,.program-card .row-discount-line .startdate,.program-card .row-discount-line .fixamt{margin-right: 0; margin-left: auto;}
.program-card .row-discount-line span:first-child {color: #6c7a89;}
.program-card .row-discount-line span:last-child {font-weight: bold;color: #2c3e50;}
.summary-panel .price-display.discountedPrice {display: flex;flex-direction: column;}
.summary-panel .discountedPrice .price-label {order: 1;}
.summary-panel .discountedPrice .old-price-total {order: 5;font-size: 19px;font-weight: bold;display: flex; flex-direction: column}
.summary-panel .discountedPrice .old-price-total .old-price-total-discount{background: #e5232b;
    border-radius: 0 0 7px 7px;
    padding: 5px 0;
    display: flex;
    gap: 3px;
    flex-direction: column;
    font-size: 14px;
    color: white;}
.summary-panel .discountedPrice .old-price-total span.finalShowTotal{order: 3;
background: #e5232b;
    border-radius: 0 0 7px 7px;
    padding: 5px 0;
    display: flex;
    gap: 3px;
    flex-direction: column;
    font-size: 14px;
    color: white;}
   .price-subtitle .florydiscountamount{font-weight: 600;}
.summary-panel .discountedPrice .old-price-total span.finalShowTotal .pay-total{font-size: 18px;}
.summary-panel .discountedPrice .old-price-total .tax_amount_show{display: none;order: 1; margin: 0; font-size: 12px; margin-bottom: 6px;font-family: var(--default-font);opacity: 0.8;}
.summary-panel .discountedPrice .old-price-total .tax_include_show{order: 2; margin-top: 0; margin-bottom: 8px; font-size: 14px;font-family: var(--default-font);opacity: 0.8;display: flex; flex-direction: column;gap:5px;}
.summary-panel .discountedPrice div#totalPrice {order: 2; font-size: 13px;margin: 3px auto;}
#LineProgramDiscount,div#early_order_program,div#pre_tax_amount,div#tax_amount{font-weight: 600; min-width: 80px; text-align: right;}
.summary-panel .discountedPrice .price-subtitle {order: 2; margin-bottom: 6px;display:flex;flex-direction: column; gap:2px;}
.summary-panel .discountedPrice .old-price-total .tax_include_show span {
    font-weight: 600;
}

.requirement-order-program .card-requirement {background: #fff;border-radius: 16px;padding: 30px;margin: auto;}
/* #order_pending_approval.disabled.btn{opacity: 0 !important; visibility: hidden !important;} */
.no-files-text {color: #999;font-size: 0.85rem;}
body .select2-results__option--load-more{color: var(--primary);}
#Sales_Rep-error,#Account_ID-error{ position: absolute; top: 65px; left: 0;}

/* ── Card ── */
.op-card {background: #fff;border-radius: 16px;padding: 24px;margin-bottom: 20px;box-shadow: 0 4px 16px rgba(0,0,0,0.08);border: 1px solid #f0f0f0;}

/* ── Card Top ── */
div#Program_order_requirement{margin-top: 15px;}
.op-card-title-heading{background: #e72d37;padding: 9px 5px;color: white;border-radius: 3px;}
.op-card-top {display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 16px;}
.op-badge { background: #1a2e44; color: #fff;padding: 6px 14px;border-radius: 6px;font-size: 12px;font-weight: 700;letter-spacing: 0.5px;display: inline-block;margin-bottom: 8px;}
.op-status { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.op-status-active   { background: #d4edda; color: #155724; }
.op-status-inactive { background: #f8d7da; color: #721c24; }
.op-total-amount { font-size: 20px; font-weight: 700; color: #28a745; text-align: right; }
.op-total-label  { font-size: 10px; color: #999; text-align: right; }

/* ── Tags ── */
.op-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.op-tag  { padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.op-tag-green  { background: #d4f5e2; color: #0d6832; }
.op-tag-yellow { background: #fff3cd; color: #856404; }

/* ── Benefit Block ── */
.op-benefit-block {border: 1px solid #f0f0f0;border-radius: 10px;padding: 14px 16px;margin-bottom: 12px;background: #fafafa;box-shadow: 0 4px 8px rgb(0 0 0 / 24%);}
.op-benefit-header {display: flex;align-items: center;gap: 10px;margin-bottom: 12px;}
.op-condition        { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 12px; }
.op-condition-met    { background: #d4edda; color: #155724; }
.op-condition-pending{ background: #fff3cd; color: #856404; }

/* ── Benefit Info ── */
.op-benefit-info {display: flex;gap: 8%;flex-wrap: wrap;margin-bottom: 5px; padding: 10px;background: #fff;border-radius: 8px;border: 1px solid #eee;}
.op-info-item  { display: flex; flex-direction: column; }
.op-info-label { font-size: 13px; color: #999; margin-bottom: 2px; }
.op-info-value { font-size: 12px; font-weight: 700; color: #333; }

/* ── Requirement Row ── */
.op-requirement-row {display: flex; gap: 15px; padding: 14px 12px;background: #fff;border-radius: 8px;border: 1px solid #eee; margin-bottom: 5px;flex-wrap: wrap;flex-direction: column;}
.op-req-left  { min-width: 100px; position:relative;}
.op-req-type  { font-size: 14px; font-weight: 700; color: #626262; position: absolute; background: #e3d6ed94; padding: 2px 6px; border-radius: 6px 0 5px 0; left: -12px; top: -14px;}
.op-req-right { display: flex; gap: 16px; flex-wrap: wrap; flex: 1; justify-content: space-between;}
.op-req-item  { display: flex; flex-direction: column; min-width: 50px; }
.op-req-label { font-size: 13px; color: #999; margin-bottom: 2px; }
.op-req-val   { font-size: 12px; font-weight: 600; color: #333; }
.op-paid      { color: #28a745; } 
.op-remaining { color: #e5232b; }
.op-req-status{ border-radius: 10px; font-size: 12px; font-weight: 600; display: inline-block; }
.op-req-met   { color: #155724; }
.op-req-pending{color: #856404; }

/* ── States ── */
.op-loading { text-align: center; padding: 30px; color: #999; font-size: 14px; }
.op-empty   { text-align: center; padding: 30px; color: #999; font-size: 14px; }
.op-error   { text-align: center; padding: 30px; color: #e5232b; font-size: 14px; }
.op-no-req  { color: #bbb; font-size: 12px; font-style: italic; padding: 6px 0; }  
div#orderTable_processing,
div#auditLogTable_processing {display: none;visibility: hidden;opacity: 0;}
.home_graf{display: flex;justify-content: center; align-items: center;padding: 30px;}
.home_graf > h3{ max-width: 87%;text-align: center;font-size: 35px;font-weight: 600;line-height: 50px;width: 100%;}
.home_graf > h3 span{color: var(--primary);}

.Service-section {display: flex;gap: 40px;max-width: 1200px;margin: auto;}
.Service-section .Service-section-card {flex: 1;background: #000;color: #fff;text-align: center;padding: 50px 30px;border-radius: 10px;}
.Service-section .Service-section-icon {width: 80px;height: 80px;background: #e53935;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;font-size: 30px;}
.Service-section-card h2 {font-size: 28px;margin-bottom: 15px;}
.Service-section-card p {color: #ccc; line-height: 1.6;margin-bottom: 25px;}

a#cancel_naviagte {order: 1;}
#newOrderform .form-btn-grp [type="submit"]{order: 2;}
div#order_duplicate {order: 3;}
div#CancelModal_id {order: 4;}
div#order_pending_approval { order: 5;}
.btn.btn-secondary.sendForAproveBtn{order: 6;}
.btn.btn-primary.sendForRejectBtn { order: 7;}
@media (max-width: 280px) {
.header-icon .social-link{gap: 0;}
.social-link .icon-circle{width: 35px; height: 35px;}
}
@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;}
.header-icon .social-link{gap: 0; margin: 4px 0;}
.wizard-navigation .btn{min-width: 100% !important;}
}
 @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;}
.header-container .header-actions{justify-content: space-between;}
.status-indicator .status-time{margin-bottom: 0;}
.dashboard-new .status-tiles{display: flex;flex-direction: column;}
div.dt-container div.dt-layout-row:not(.dt-layout-table){display: none;}
form .row .col-sm-6{width: 100%;}
.wizard-step .wizard-navigation{flex-direction: column;}
.col-sm-4,.col-sm-8{width: 100%;}
.header_heading_portal{display: none;}
li.login_main_head {width: 100%;margin-top: 3px;}
.login-name{position: relative;}
.login-name .login-title{border-radius: 4px !important;}
.header-icon{padding-right:0;}
li.nav-item.dropdown.logout-user{position: static;}
.Service-section {flex-direction: column;}
}
@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));}
  }