:root {
    --bs-modal-footer-bg: transparent;
    --bs-pagination-active-bg: rgba(27, 68, 66);
    --bs-pagination-active-border-color: rgba(27, 68, 66);
    --bs-primary-rgb: 27, 68, 66;
    --bs-btn-close-color: #fff;
}
body{
	height:100%;
	background-color: rgba(27, 68, 66); 
/*    font-size: 14px;
    line-height: 15px;
*/
}
@media print {
   /* All print related styles to be added here */
   #header-part,
   #footer-part,
   #nav-part {
      display: none !important;
   }
   body{
    height:unset;
    background-color: #fff !important;
    }
   #header-part,
   #footer-part,
   #nav-part {
      display: none !important;
   }
   body{
    height:unset;
    background-color: #fff !important;
    }
    
   /* NEW: DataTables print enhancements */
   .dt-right {
        text-align: right !important;
   }
   
   /* NEW: Handle line breaks and HTML content in print */
   table { 
        border-collapse: collapse !important;
        width: 100% !important;
        margin: 10px 0 !important;
        page-break-inside: auto !important;
   }
   
   th, td { 
        border: 1px solid #333 !important;
        padding: 8px 6px !important;
        vertical-align: top !important;
        word-wrap: break-word !important;
        page-break-inside: avoid !important;
        white-space: pre-wrap !important; /* This preserves line breaks */
   }
   
   th { 
        background-color: #f5f5f5 !important;
        font-weight: bold !important;
        text-align: center !important;
        font-size: 9pt !important;
   }
   
   td {
        font-size: 9pt !important;
   }
   
   /* Handle emphasized text in print */
   em {
        font-style: italic !important;
        color: #666 !important;
   }
   
   small {
        font-size: 8pt !important;
   }
   
   /* Handle line breaks properly in print */
   br { 
        display: block !important;
        margin: 2px 0 !important;
        content: "" !important;
   }
   
   br:before { 
        content: "\\A" !important;
        white-space: pre !important;
   }
   
   /* Hide buttons and action elements in print */
   .btn, button, .btn-group {
        display: none !important;
   }    
}
div#main {
    position: fixed;
    width: 100%;
    height: 100%;
}
#main .container{
	margin:200px;
}

#sidebar-field{
	border-top:1px solid gray;
}
#sidebar .sidebar-item {
    height: 50px;
    font-size: 1rem;
    border-bottom: 1px solid gray;
    border-right: 2px solid gray; 
    width: 100%;
    font-weight: 700;
    text-decoration: unset;
}
#sidebar .sidebar-item:hover, #sidebar .sidebar-item.active{
	color:white;
	text-decoration: unset;
	background: #1B4442 
}


.row {
    margin-right: unset;
    margin-left: unset;    
}
.svg-inline--fa {
	--fa-animation-duration: 5s;
}
.container-fluid.admin{
	padding: 20px;
	max-width: inherit;
	background-color: #fff;
}
.container-fluid.admin2{
    width: inherit;
    max-width: inherit;
    margin-left: 40px;
    padding-left: 40px;
    background-color: #fff;
    margin-right: 40px;
    padding-right: 40px;
}
.attendance_log_field{
	top:20%;
	position: relative;
}
#company-logo-field {
	display: flex;
}
#company-logo-field h4,#company-logo-field img{
	margin:auto;
}
#log_display{
	font-weight: bold;
	font-size:1.2rem;
}
label{
/*	font-weight: 600;
	margin-bottom: unset;
	margin-top: .3rem;
    */
    font-size: 0.875rem;
    z-index: 1;
}

.multiselect-container {
    width: max-content;
}

.modal-footer {
    border-top: unset; 
	border-bottom-right-radius: unset;
    border-bottom-left-radius: unset;  
/*    padding: unset;  
    border-bottom: 1px solid #e9ecef; 
    */
}




#related {
	border-top: 1px solid lightgray;	
}

.preview-pane {
	background-color: lightgray;
}
.nav-tabs {
    --bs-nav-tabs-border-width: 1px;
    --bs-nav-tabs-border-color: rgba(27, 68, 66);
    --bs-nav-tabs-border-radius: 0.375rem;
    --bs-nav-tabs-link-hover-border-color: rgba(27, 68, 66) rgba(27, 68, 66) rgba(27, 68, 66);
    --bs-nav-tabs-link-active-color: #fff;
    --bs-nav-tabs-link-active-bg: rgba(27, 68, 66);
    --bs-nav-tabs-link-active-border-color: rgba(27, 68, 66) rgba(27, 68, 66) rgba(27, 68, 66);
    --bs-nav-link-color: rgba(27, 68, 66);
    --bs-nav-link-hover-color: #fff;
    --bs-nav-tabs-link-hover-bg: rgba(27, 68, 66, 0.7);
    --bs-nav-tabs-link-hover-border-color: rgba(27, 68, 66, 0.7);
}


.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
/*    border-color: var(--bs-nav-tabs-link-hover-border-color); */
    background-color: var(--bs-nav-tabs-link-hover-bg);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--bs-nav-tabs-link-active-color);
    background-color: var(--bs-nav-tabs-link-active-bg);
 	border-color: var(--bs-nav-tabs-link-active-border-color);   
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
}

.progress-bar {
    background-color: rgba(27, 68, 66);
    transition: width .9s ease;
}

.badge {
    padding: 0.25em 1.4em;
    color: rgba(27, 68, 66);
    background-color: #fff !important;
    margin-right: 25px;
}
.badge-hide {
    padding: 0.25em 1.4em;
    color: #d3d3d3;
    background-color: #d3d3d3 !important;
    margin-right: 25px;
}
.sidebar-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-bottom: 1px solid gray;
/*    border-right: 1px solid gray; */
    font-weight: 700;
    height: 50px;
}

.btn-success {
    color: #fff;
    background-color: rgba(27, 68, 66);
    border-color: rgba(27, 68, 66);
}

.btn-primary {
    color: #fff;
    background-color: rgba(27, 68, 66);
    border-color: rgba(27, 68, 66);
}
.alert-primary {
    color: #fff;
    background-color: rgba(27, 68, 66, 0.6);
    border-color: unset;
}

.dt-buttons {
    margin-top: 10px;
    margin-bottom: 10px;
}
.offerPreview {
    background-color: white;
}

.pagination {

    --bs-pagination-color: rgba(27, 68, 66);
    --bs-pagination-hover-color: rgba(27, 68, 66);
    --bs-pagination-focus-color: rgba(27, 68, 66);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(27, 68, 66, 0.25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: rgba(27, 68, 66);
    --bs-pagination-active-border-color: rgba(27, 68, 66);
}

.form-select:focus {
    border-color: rgba(27, 68, 66);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(27, 68, 66, 0.25);
}

table.dataTable thead th, table.dataTable thead td {
/*    border: 1px solid rgba(0, 0, 0, 0.15);
*/
}

@media (min-width: 768px) {
    .two-column-text {
        column-count: 2;
        column-gap: .75rem;

    }
}
/*
.dt-buttons {
    margin-left: 15px;
}
*/
.card-body {
   padding: unset;
}

.float-end {
    margin: 10px;
}

.panel-heading{    
   padding: 0px !important;
}

.toplabel {
    font-size: .65rem;
}
.form-select.color {
    line-height: 2.5;
}

.selectpicker.color {
    line-height: 2.5;
}

.currency {
  padding-left:12px;
}

.currency-symbol {
  position:absolute;
  padding: 2px 5px;
}

.summary {
    border-bottom: 1px solid;
    border-bottom-color: lightgray;
    border-bottom-style: dashed;    
}


/* PDF view */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.form-container {
    flex: 1;
    min-width: 300px;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.preview-container {
    flex: 1;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#pdf-preview-canvas {
    width: 100%;
    height: auto;
}

#pdf-preview-canvas2 {
    width: auto;
    height: 100%;
}

#navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
#loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    font-size: 24px;
}
.throbber {
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    border-radius: 50%;
    border-top: 3px solid #4CAF50;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}


/* Bootstrap form validation */

/* Override the valid state styles */
.was-validated .form-control.is-valid,
.was-validated .form-select.is-valid {
  border-color: "";  /* Remove the green border color */
  background-image: none;  /* Remove the green checkmark */
  box-shadow: none;  /* Remove the green shadow */
}

/* Optionally, you can disable green border in general */
.form-control.is-valid,
.form-select.is-valid {
  border-color: "";  /* Remove green border for valid fields */
  background-image: none;  /* Remove green checkmark for valid fields */
  box-shadow: none;  /* Remove green box shadow */
}

/* Keep the invalid styles intact for red borders and invalid feedback */
.was-validated .form-control.is-invalid,
.was-validated .form-select.is-invalid {
  border-color: #dc3545;  /* Red border color for invalid fields */
  background-image: none;  /* Remove any background images */
  box-shadow: none;  /* Remove any shadow */
}

.upload-area,
.upload-area1,
.upload-area2 {
    border: 1px dashed #007bff;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    position: relative; /* For absolute positioning of the file input */
}

#company_logo,
#image_file,
#file_3d {
    opacity: 0; /* Keep it invisible */
    position: absolute; /* Position over the upload area */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.upload-area.hover,
.upload-area.hover1,
.upload-area.hover2 {
    border-color: #0056b3;
    background-color: #f0f8ff;
}   

.row-red { background-color: rgba(255, 0, 0, 0.12) !important; }
.row-red-offer { background-color: rgba(255, 0, 0, 0.10) !important; }
.row-green { background-color: rgba(0, 255, 0, 0.12) !important; }
.row-green-offer { background-color: rgba(0, 255, 0, 0.10) !important; }
.row-blue { background-color: rgba(0, 0, 0, 0.12); }
.row-blue-50 { background-color: rgba(0, 0, 255, 0.5); }

@media print {
    .dt-right {
        text-align: right !important; /* Ensure right alignment for print */
    }
}

/*
.dt-length select {
    width: 100px !important; 
}

*/

/* Status bar */

/* Styling for the status bar */
.status-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    font-size: 12px;
    text-align: right;
    height : 12px
    display: none;
    z-index: 1000;
}

.status-success {
    background-color: #4CAF50; /* Green */
    color: white;
}

.status-error {
    background-color: #f44336; /* Red */
    color: white;
}

.status-info {
    background-color: #2196F3; /* Blue */
    color: white;
}

  /* z-index for the parent modal */
  .modal {
    z-index: 1050; /* Parent modal (default) */
  }

/* z-index for the parent modal backdrop */
.modal-backdrop {
    z-index: 1040; /* Backdrop for parent modal */
}

/* z-index for the nested modal */
#confirmModal {
    z-index: 1060; /* Nested modal (above parent) */
}

/* z-index for the nested modal */
#Modal3D {
    z-index: 1060; /* Nested modal (above parent) */
}

/* z-index for the nested modal backdrop */
.modal-backdrop.show {
    z-index: 1030; /* Backdrop for nested modal (above parent modal backdrop) */
}

/* Style for blurring the main modal */
.blur {
  
    filter: blur(1px); /* Adjust the blur amount */
}

/* Darken the background of the main modal */
.darken {
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the darkness */
    color: gray; /* Optional: Change text color for visibility */
}    

/* Sidebar styling */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 60px; /* Collapsed width */
    background-color: #d3d3d3;
    transition: width 0.3s;
    z-index: 1000;
    overflow: hidden;
}

#sidebar.expanded {
    width: 250px; /* Expanded width */
}

#sidebar.expanded ~ .main-content {
    margin-left: 250px; /* Adjust main content when sidebar expands */
}

/* Main content styling */
.main-content {
    margin-left: 60px; /* Collapsed sidebar width */
    flex-grow: 1; /* Take up remaining space */
    padding: 10px;
    transition: margin-left 0.3s;
}

/* Mobile view: Adjust the margin when sidebar is hidden */
@media (max-width: 992px) { /* Adjust for screens smaller than 992px (tablet and mobile) */
    #sidebar {
        display: none; /* Hide sidebar */
    }

    .controls {
        display: flow;
    }

    .main-content {
        margin-left: 0; /* No margin on the left when sidebar is hidden */
    }
    #sidebar.expanded ~ .main-content {
        margin-left: 0; /* Adjust main content when sidebar expands */
    } 

}

.navbar-nav .dropdown-menu {
    position: absolute;
    left: 0;
    width: fit-content;

}

/* For expanded sidebar on large screens */
@media (min-width: 992px) {
    #sidebar {
        display: block; /* Sidebar is visible on larger screens */
    }
    .controls {
        display: none;
    }    

    .main-content {
        margin-left: 60px; /* Adjust the left margin to match the expanded sidebar */
    }

    #sidebar.expanded ~ .main-content {
        margin-left: 250px; /* Adjust main content when sidebar expands */
    }    
}

/* Pin button styling */
.sidebar-pin {
    padding: 10px;
    padding-right: unset;
    background-color: #d3d3d3;
    text-align: center;
}


/* Sidebar item */
.sidebar-item {
    display: flex;
    align-items: center;
    padding: 10px;
    color: white;
    white-space: nowrap;
}

/* Sidebar icon */
.sidebar-icon {
    width: 40px; /* Match collapsed sidebar width */
    text-align: center;
}

/* Hide text by default */
.sidebar-text {
    display: none;
}

/* Show text when sidebar expands */
#sidebar.expanded .sidebar-text {
    display: inline-block;
    margin-left: 20px;
}

/* Sidebar pill styling (align badge to right) */
#sidebar.expanded .sidebar-pill {
    display: inline-block;
    margin-left: auto;
}

/* Sidebar pill styling (align badge to right) */
.sidebar-pill {
    display: none;
}





/* Sidebar item styling */
.sidebar-item {
    display: flex;
    align-items: center;
    padding: 10px;
    color: #1B4442;
    width: 100%;
}

/* Badge styling */
.badge {
    padding: 0.25em 1.4em;
    color: rgba(27, 68, 66);
    background-color: #fff !important;
}

/* Sidebar icon */
.sidebar-icon {
    text-align: center;
}

/* Sidebar pill styling (align badge to right) */
.sidebar-pill {
    margin-left: auto;
}

/* Style for the pin icon rotation */
.fa-rotate-90 {
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}


.icon {
   display: inline-block;
   width: 30px;
   height: 30px;
   background-size: contain !important;
}

.nav-dashboard {
   background: url('../icons/dashboard.svg') no-repeat center center;
}
.nav-quote {
   background: url('../icons/quote.svg') no-repeat center center;
}
.nav-offer {
   background: url('../icons/offer.svg') no-repeat center center;
}
.nav-producttype {
   background: url('../icons/producttype.svg') no-repeat center center;
}
.nav-machine {
   background: url('../icons/machine.svg') no-repeat center center;
}
.nav-products {
   background: url('../icons/products.svg') no-repeat center center;
}
.nav-material {
   background: url('../icons/material.svg') no-repeat center center;
}
.nav-options {
   background: url('../icons/options.svg') no-repeat center center;
}
.nav-suboptions {
   background: url('../icons/suboptions.svg') no-repeat center center;
}
.nav-packing {
   background: url('../icons/packing.svg') no-repeat center center;
}
.nav-delivery {
   background: url('../icons/delivery.svg') no-repeat center center;
}
.nav-companies {
   background: url('../icons/companies.svg') no-repeat center center;
}
.nav-users {
   background: url('../icons/users.svg') no-repeat center center;
}
.nav-format {
   background: url('../icons/measure.png') no-repeat center center;
}


/* Flexbox container to hold both the sidebar and main content */
#layout {
    display: flex;
    min-height: 100vh; /* Ensure the entire layout takes up at least the full viewport height */
}



.preview-container img {
    width: 150px;
    margin: 10px;
}


/* Hide input fields */
.hidden-input {
    display: none;
}

.pdf-preview {
    width: 100%; /* Make the iframe take the full width of the parent */
    height: 200px; /* Define a specific height */
    border: 1px solid #ddd; /* Add a border for better visibility */
    display: none; /* Initially hide the iframe */
}

.file-preview {
    width: 100%; /* Make the preview take the full width of the parent */
    height: 200px; /* Define a specific height */
    border: 1px solid #ddd; /* Add a border for better visibility */
    display: none; /* Initially hide the 3D file preview */
}
.img-fluid{
    max-height: -webkit-fill-available;
}


.editor-container {
    height: 200px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    margin-bottom: 20px;
}

.editor-container::after {
    content: "";
    display: table;
    clear: both;
}

.ql-editor {
    padding: unset !important; 
}

.ql-container {
    height: 150px !important;
}

.packing + .btn {
/*    padding-top: 1.5em */
}

.offerDelivery + .btn {
/*    padding-top: 1.5em */
}

.bootstrap-select .dropdown-menu li a span.text {
    display: unset; 
}

/* Add this CSS to your styles */
.modal-body {
    overflow: hidden; /* Prevent overflow of content */
}

.pdf-iframe {
    width: 100%; /* Full width */
    height: 90vh; /* Maximum 90% of the viewport height */
    border: none; /* Remove the default border */
}

.currency {
  padding-right: 2.5em; /* Adds space on the right for the "kr." text */
  background: none;
  border: 1px solid #ccc;
  position: relative;
}

.currency::after {
  content: " kr."; /* Adds the currency text */
  position: absolute;
  right: 10px; /* Position the currency symbol within the input */
  top: 50%;
  transform: translateY(-50%);
  color: #333; /* Customize the color as needed */
  pointer-events: none; /* Ensures the text doesn’t interfere with clicking or selecting */
  font-size: 1em;
}

/* CSS Styling to control layout */
.dataTables-wrapper {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between dropdown and other controls */
    padding-left: 10px;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: unset !important; 
    border-color: #86b7fe;
}

.editable {
  position: relative;
  caret-color: red;
  cursor: ns-resize;
}

.editable:hover::before {
  content: '\f303'; /* Unicode for Font Awesome's pen icon */
  font-family: 'Font Awesome 6 Free'; /* Make sure Font Awesome is loaded */
  font-weight: 900; /* Ensure the icon is displayed correctly */
  position: absolute;
  right: -15px; /* Adjust position as needed */
  color: red; /* Set icon color to red */
}

/* Button to toggle chat window */
#chatToggleButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: white;
    color: rgba(27, 68, 66);
    border: none;
    border-radius: 50%;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    width: 80px;
    height: 80px;
}
#chatToggleButton:hover {
    background-color: rgba(27, 68, 66);
    color: white;
    border: 1px solid white;
}

/* Chat window styles */
#chatContainer {
    position: fixed;
    bottom: 90px;
    right: 20px;
    max-width: 600px;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: none; /* Initially hidden */
    z-index: 2000;
}

#result {
    max-height: 90%;
    min-height: 400px;
    height: 600px;
    overflow-y: auto;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}

.message {
    margin: 10px 0;
}

.message.user {
    text-align: right;
    display: block;
    position: relative;
    padding-right: 24px; /* Adjust based on icon size and margin */
}

.message.user::after {
    content: "\f007"; /* Font Awesome icon for a user */
    font-family: "Font Awesome 6 Free"; /* Update this if using a specific version */
    font-weight: 900; /* Font Awesome uses different weights, 900 for solid icons */
    position: absolute;
    right: 0; /* Keep icon at the end */
    top: 0; /* Align icon with the first line */
    margin-left: 8px; /* Space between the icon and text */
    color: darkblue;
}

.message.ai {
    text-align: left;
    display: block;
    position: relative;
    padding-left: 24px; /* Adjust based on icon size and margin */
}

.message.ai::before {
    content: "\f4fb"; /* Unicode for fas fa-user-astronaut */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0; /* Keep icon at the start */
    top: 0; /* Align icon with the first line */
    margin-right: 8px; /* Space between the icon and text */
    color: rgba(27, 68, 66);
}



#inputContainer {
    display: flex;
    gap: 10px;
}

#aiPrompt {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    font-size: 16px;
    height: 100px;
}

/* Moving dots animation */
.loading-dots {
    display: inline-block;
    font-size: 16px;
}

.loading-dots span {
    display: inline-block;
    margin: 0 2px;
    width: 8px;
    height: 8px;
    background-color: rgba(27, 68, 66);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

#chatHeader {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 60px; /* Adjust as needed */
    height: 60px; /* Adjust as needed */
    margin: 0 auto; /* Center the header container */
    background-color: rgba(27, 68, 66);
    border-radius: 50%; /* Rounded square */
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for aesthetics */
}

#Header {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    text-align: center;
}

#chatHeader i {
    font-size: 4rem; /* Adjust icon size */
    color: rgba(27, 68, 66); /* Adjust icon color */
}

.chat-ai {
   background: url('../icons/ai2.svg') no-repeat center center;
    display: inline-block;
    width: 80%;
    height: 80%;
    background-size: contain !important;   
}

.chat-ai-header {
   background: url('../icons/ai-animate1.png') no-repeat center center;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-size: contain !important;   
}

.chat-ai-header:hover {
   background: url('../icons/ai-animate2.gif') no-repeat center center;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-size: contain !important;   
}

.product-list {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-family: Arial, sans-serif;
}

.product-list td {
    padding: 2px;
    vertical-align: top;
}

.product-list td:first-child {
    text-align: right; /* Align numbers to the right */
    width: 30px; /* Adjust width for consistent alignment */
}

.product-list td:last-child {
    text-align: left; /* Align text to the left */
}

/* Spinner Modal Styles */
#spinnerModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;  /* Centers vertically */
    z-index: 9999;
    display: none; /* Hidden by default */
}

#spinnerModal .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

#toggleSection {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
}
#toggleButton {
    padding: 8px 12px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}
#toggleButton:hover {
    background-color: #0056b3;
}

/* Order Mode: Disabled Bootstrap Select Styling */
.bootstrap-select.disabled,
.bootstrap-select.disabled .dropdown-toggle {
    background-color: #e9ecef !important;
    opacity: 0.65 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    color: #6c757d !important;
}

.bootstrap-select.disabled .dropdown-toggle:hover,
.bootstrap-select.disabled .dropdown-toggle:focus,
.bootstrap-select.disabled .dropdown-toggle:active {
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
    box-shadow: none !important;
}

.bootstrap-select.disabled .dropdown-toggle .filter-option-inner-inner {
    color: #6c757d !important;
}

.bootstrap-select.disabled .dropdown-toggle .caret {
    opacity: 0.5 !important;
}

/* Prevent dropdown menu from appearing for disabled selects */
.bootstrap-select.disabled .dropdown-menu {
    display: none !important;
}

/* Order Mode: Disabled Quill Editor Styling */
.quill.disabled .ql-toolbar {
    pointer-events: none !important;
    opacity: 0.6 !important;
    background-color: #f8f9fa !important;
}

.quill.disabled .ql-editor {
    pointer-events: none !important;
    background-color: #f8f9fa !important;
    opacity: 0.8 !important;
    cursor: not-allowed !important;
}

.quill.disabled .ql-container {
    border-color: #ced4da !important;
}

/* Order Mode: Disabled Bootstrap Select Styling */
.bootstrap-select.disabled,
.bootstrap-select.disabled .dropdown-toggle {
    background-color: white !important;
    opacity: 1 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    color: #6c757d !important;
    border-color: #ced4da !important;
}

.bootstrap-select.disabled .dropdown-toggle:hover,
.bootstrap-select.disabled .dropdown-toggle:focus,
.bootstrap-select.disabled .dropdown-toggle:active {
    background-color: white !important;
    border-color: #ced4da !important;
    box-shadow: none !important;
}

.bootstrap-select.disabled .dropdown-toggle .filter-option-inner-inner {
    color: #6c757d !important;
    opacity: 1 !important;
}

.bootstrap-select.disabled .dropdown-toggle .caret {
    opacity: 0.5 !important;
}

/* Prevent dropdown menu from appearing for disabled selects */
.bootstrap-select.disabled .dropdown-menu {
    display: none !important;
}

/* Additional specificity for form-select.color elements */
.dropdown.bootstrap-select.disabled .btn.dropdown-toggle {
    background-color: white !important;
    border-color: #ced4da !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

.dropdown.bootstrap-select.disabled .filter-option-inner-inner {
    color: #6c757d !important;
    opacity: 1 !important;
}

.form-check-input:disabled~.form-check-label, .form-check-input[disabled]~.form-check-label {
    cursor: default;
    opacity: 1;
}

.bootstrap-select.color .btn.dropdown-toggle,
.selectpicker.color {
    line-height: 2.5 !important;
    height: auto !important;
    min-height: 48px !important;
}