body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    background: url('/images/pcb-background.jpg') no-repeat center center fixed; 
    background-size: cover; /* Cover the entire page */
}
.navbar {
    background-color: rgba(211, 211, 211, 0.3); /* Light grey with 30% transparency */
}

.navbar .logo img {
    max-height: 50px; /* Make sure the logo size is controlled */
    width: auto; /* Maintain aspect ratio */
}

.navbar .navigation .navbar-toggler{
    padding: 0;
    margin: 0;
    list-style: none;
}

/*
.navbar {
    color: rgba(71, 71, 71, 0.5); 
    background-color: rgba(90, 90, 90, 0.5); /* Light grey with 50% transparency 
    padding: 10px 0;
    width: 100%;
    z-index: 1000; /* Ensures the navbar is above other content
    position: relative; /* Adjust based on your layout needs 
}
.navbar .logo img {
    max-height: 50px;
    width: auto;
}
.navbar .navigation {
    padding: 0;
    margin: 0;
    list-style: none;
}
*/
.container {
    padding-top: 20px;
}

.content-background {
    background-color: rgba(50, 50, 50, 0.8); /* Dark grey with transparency */
    color: white; /* White text for better readability */
    padding: 10px; /* Padding for spacing */
    border-radius: 10px; /* Rounded corners */
}



.form-section, .price-section {
    margin-top: 20px;
}

#imagePreview img {
    width: 49%; /* Allows for two images side by side */
    margin-right: 2%; /* Small gap between images */
    height: auto; /* Maintain aspect ratio */
    border: 1px solid #ddd; /* Adds a subtle border around images */
    padding: 5px; /* Slightly separates the image from the border */
    border-radius: 5px; /* Softens the corners of the border */
}

#imagePreview {
    margin-top: 20px; /* Space between the form and image previews */
}

.btn-outline-primary {
    border-color: #333 !important; /* Dark grey border */
    color: #fff !important; /* White text for readability */
    background-color: #424242 !important; /* Dark grey background */
    width: 120px; /* Adjust width as needed */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}
.btn-outline-primary:hover {
    background-color: #555 !important; /* Lighter grey on hover */
    color: #ffffff !important;
}

.btn-group-toggle .btn {
    margin-right: 10px; /* Space between buttons */
    transition: all 0.3s ease;
}

.btn-group-toggle .btn input[type="radio"] {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

.btn-group-toggle .btn img {
    max-height: 50px; /* Adjust based on your design needs */
    margin-bottom: 5px;
}

.btn-group-toggle .btn:hover {
    background-color: #f0f0f0; /* Highlight on hover */
}

/* Adjusting active button state for clarity */
.btn-group-toggle .btn.active, .btn-group-toggle .btn:active {
    background-color: rgba(15, 47, 66, 0.6) !important; /* Modify as needed */
    color: white !important;
}


#priceColumn {
    background-color: rgba(255, 255, 255, 0.773); /* Semi-transparent white */
    color: #333; /* Dark text color for contrast */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky; /* Stick to its position within the viewport */
    top: 20px; /* Adjust this to control the spacing from the top of the viewport */
    width: 300px; /* Fixed width */
    height: auto; /* Adjust height as needed */
    margin-right: 20px; /* Space on the right */
}

.price-section {
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#assemblySection {
    color: #fff; /* Ensures text color is white */
    background-color: rgba(50, 50, 50, 0.8); /* Dark semi-transparent background */
}

#assemblySection .card {
    background-color: rgba(45, 45, 45, 0.9); /* Slightly darker background for the card */
    border: none; /* Removes default Bootstrap border */
}

#assemblySection .btn-info {
    background-color: #17a2b8; /* Bootstrap's info blue */
    color: #fff; /* Ensures text color is white */
}

#assemblySection .btn-success {
    background-color: #28a745; /* Bootstrap's success green */
    color: #fff; /* Ensures text color is white */
}

#assemblySection .table {
    color: #fff; /* Ensures text color is white */
    width: 100%; /* Ensures the table takes the full width of its container */
    table-layout: auto; /* Allows table cells to adjust based on content */
    width: 100%; /* Ensures the table uses the full width */
    display: block; /* Changes the table's display type to block to enforce min-height */
    overflow-y: auto; /* Adds a scrollbar if the content exceeds the min-height */


}
#assemblySection .btn-add-component {
    background-color: #007bff; /* Bootstrap primary blue for high visibility */
    border-color: #007bff;
}

#assemblySection .btn-upload-bom {
    background-color: #28a745; /* Bootstrap success green for secondary action */
    border-color: #28a745;
}

#assemblySection .btn:hover {
    opacity: 0.8; /* Adds a hover effect to indicate interactivity */
}

#assemblySection .table th,
#assemblySection .table td {
    background-color: rgba(30, 30, 30, 0.8); /* Dark background for table cells */
    border-color: #666; /* Dark grey border */
}

#assemblySection .form-control {
    background-color: #333; /* Dark grey background */
    color: #ddd; /* Light grey text */
    border: 1px solid #555; /* Darker border for better visibility */
}

#assemblySection .form-control:focus {
    border-color: #777; /* Lighter border when focused */
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.5); /* Subtle green glow for focus */
}

#assemblySection .custom-control-label {
    color: #fff; /* White label text */
}

#assemblySection .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745; /* Green background for checked state */
    border-color: #28a745;
}
#assemblySection .btn {
    width: 100%; /* Ensures all buttons take the full width of their container */
    background-color: #17a2b8; /* Standard color for all buttons */
    color: #fff; /* White text for readability */
    border-radius: 4px; /* Rounded corners */
    padding: 10px 15px; /* Consistent padding */
    margin-top: 5px; /* Space between buttons and other elements */
    border: none; /* No borders */
}

#assemblySection .btn:hover {
    background-color: #1391b5; /* Slightly darker on hover for better interaction feedback */
}

#assemblySection .btn-danger { /* Specific style for delete buttons if you want them to stand out */
    background-color: #dc3545; /* Bootstrap's default danger color */
}

#assemblySection .btn-danger:hover {
    background-color: #c82333; /* Darker red on hover */
}

#componentsTable {
    width: 100%; /* Full width to align with its container */
    table-layout: fixed; /* Ensures columns have consistent width */
}

#componentsTable th, #componentsTable td {
    text-align: left; /* Aligns text to the left, adjust as necessary */
    padding: 12px; /* Provides padding to keep content readable */
    border-bottom: 1px solid #333; /* Adds a subtle border for each row */
}
.footer-link {
    color: #22A8E8; /* Specific blue color */
    text-decoration: none; /* Removes underline from links */
}

.footer-link:hover {
    color: #ffffff; /* Changes color on hover for better visibility */
    text-decoration: underline; /* Adds an underline on hover for emphasis */
}


.wide-column { width: 50%; }
.normal-column { width: 20%; }
.narrow-column { width: 10%; }

.btn-info, .btn-success {
    width: 100%; /* Adjust width as necessary */
    margin-bottom: 10px;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-group-layer {
    display: flex; /* Ensures the buttons are flex items */
    flex-wrap: wrap; /* Allows the buttons to wrap onto the next line on small screens */
}

.btn-layer {
    flex: 1 1 auto; /* Makes each button flex and grow equally */
    margin: 2px; /* Adds a small margin between buttons */
    text-align: center; /* Centers the text within the button */
    white-space: nowrap; /* Prevents text from wrapping */
    height: 50px; /* Set a fixed height for all buttons */
}
.navbar {
    margin-top: 0;
    padding-top: 0;
}
/* Style for dropdowns */
select.form-control {
    background-color: #333 !important; /* Dark background */
    color: #fff !important; /* White text */
    border-color: #555 !important; /* Dark grey border */
}
/* Adjusting active button state for clarity */
.btn-group-toggle .btn.active, .btn-group-toggle .btn:active {
    background-color: rgba(15, 47, 66, 0.6) !important; /* Modify as needed */
    color: white !important;
}

/* Overriding primary button styles */
.btn-primary {
    background-color: #333 !important; /* Dark grey */
    border-color: #333 !important; /* Dark grey */
    color: #fff !important; /* White text */
}

.btn-primary:hover {
    background-color: #555 !important; /* Slightly lighter grey for hover */
    border-color: #444 !important;
}
/* Basic styling for radio button appearance */
.radio-label {
    display: inline-block;
    padding: 5px 10px;
    background-color: #333; /* Dark background for the label */
    color: #fff; /* White text */
    border: 2px solid #444; /* Slightly darker border for better visibility */
    border-radius: 15px;
    margin-right: 5px; /* Space between buttons */
    cursor: pointer; /* Pointer cursor on hover */
}


/* Styling for radio buttons */
input[type="radio"] {
    -webkit-appearance: none; /* Remove default appearance for WebKit/Blink */
    -moz-appearance: none;    /* Remove default appearance for Mozilla */
    appearance: none;         /* Remove default appearance for all browsers */
    display: inline-block;    /* Allows the label to sit alongside the button */
    width: 20px;              /* Fixed width */
    height: 20px;             /* Fixed height */
    background-color: #333;   /* Dark background color */
    border: 2px solid #555;   /* Dark border color */
    border-radius: 50%;       /* Circular border */
    vertical-align: middle;   /* Aligns with the text */
    cursor: pointer;          /* Pointer cursor on hover */
}

/* Styling for checked state */
input[type="radio"]:checked {
    background-color: #666;   /* Slightly lighter dark color when selected */
    border-color: #888;       /* Slightly lighter border when selected */
}

/* Styling for hover state */
input[type="radio"]:hover {
    background-color: #444;   /* Lighter background on hover */
    border-color: #666;       /* Lighter border on hover */
}


/* Hover effect */
.radio-label:hover {
    background-color: #555; /* Lighter background on hover */
}

/* Darken the background of the input fields and change the text color */
input[type="number"], input[type="text"], select {
    background-color: #333; /* Dark grey background */
    color: #9d9d9d; /* White text */
    border: 1px solid #444; /* Slightly lighter border for visibility */
    border-radius: 4px; /* Rounded corners */
    padding: 10px; /* Padding for better text alignment */
    width: 100%; /* Full width */
}

/* Style adjustments for better visual integration */
input[type="number"]:focus, input[type="text"]:focus, select:focus {
    outline: none; /* Removes the default focus outline */
    border-color: #555; /* Slightly highlighted border on focus */
    box-shadow: 0 0 5px rgba(255,255,255,0.2); /* Subtle glow effect */
}

/* Ensure consistent height across all input elements */
input[type="number"], input[type="text"], select {
    height: 40px; /* Fixed height for consistency */
}

.navbar-wrap {
    display: flex;
    flex-grow: 1
}

.navbar-wrap ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0
}

.navbar-wrap ul li {
    display: block;
    list-style: none;
    position: relative
}

.navbar-wrap ul li a {
    color: var(--tg-secondary-color);
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding: 40px 15px;
    position: relative;
    text-transform: capitalize;
    z-index: 1
}

.navbar-wrap>ul>li.active>a,.navbar-wrap>ul>li:hover>a {
    color: var(--tg-primary-color)
}

.navbar-wrap>ul>li.menu-item-has-children>a:after {
    color: var(--tg-paragraph-color);
    content: "\f107";
    font-family: Font Awesome\ 5 Free;
    font-weight: 700;
    margin-inline-start:8px;transition: all .3s ease-out 0s
}

.navbar-wrap>ul>li.menu-item-has-children.active>a:after,.navbar-wrap>ul>li.menu-item-has-children:hover>a:after {
    color: var(--tg-primary-color)
}

.navbar-wrap ul li .sub-menu {
    background: var(--tg-white);
    border: 1px solid #f5f5f5;
    border-radius: 5px;
    box-shadow: 0 30px 70px 0 hsla(216,2%,55%,.15);
    display: block;
    inset-inline-end: 0;
    inset-inline-start: 0;
    margin: 0;
    min-width: 230px;
    opacity: 0;
    padding: 18px 0;
    position: absolute;
    top: 100%;
    transform: scaleY(0);
    transform-origin: 0 0;
    transition: all .3s ease-in-out;
    visibility: hidden;
    z-index: 9
}

.navbar-wrap ul li .sub-menu .sub-menu {
    inset-inline-end: auto;
    inset-inline-start: 100%;
    top: 0
}

.navbar-wrap ul li .sub-menu li {
    display: block;
    margin-inline-start:0;text-align: start
}

.navbar-wrap ul li .sub-menu li a {
    align-items: center;
    color: var(--tg-secondary-color);
    display: flex;
    font-size: 16px;
    font-weight: 500;
    gap: 5px;
    line-height: 1.4;
    padding: 9px 15px 9px 25px;
    text-transform: capitalize;
    transition: all .3s ease-in-out
}

.navbar-wrap ul li .sub-menu li a:before {
    background: var(--tg-primary-color);
    border-radius: 2px;
    content: "";
    display: block;
    height: 2px;
    transition: .3s ease-in-out;
    width: 0
}

.navbar-wrap ul li .sub-menu li a:hover,.navbar-wrap ul li .sub-menu>li.active>a {
    color: var(--tg-primary-color)
}

.navbar-wrap ul li .sub-menu li a:hover:before,.navbar-wrap ul li .sub-menu>li.active>a:before {
    width: 10px
}

.navbar-wrap ul li:hover>.sub-menu {
    opacity: 1;
    transform: scale(1);
    visibility: visible
}

.footer-area-two {
    color: #22A8E8; /* Custom blue text color */
    background-color: #000; /* Dark background */
}

.footer-widget .icon i {
    color: #22A8E8; /* Icons color to match text */
}

.footer-widget .content {
    color: white; /* White text for better readability */
}

.footer-newsletter form input[type="email"] {
    background: transparent;
    border: 1px solid #22A8E8;
    color: white;
}

.footer-newsletter form button {
    background-color: #22A8E8;
    border: none;
    color: white;
}

.footer-bottom-two {
    background-color: transparent;
    color: white;
}
.footer-area-two .fw-logo img {
    max-height: 60px; /* Adjust the maximum height as necessary */
    width: auto; /* This keeps the aspect ratio intact */
}

.loader {
    border: 8px solid #f3f3f3; /* Light grey background */
    border-top: 8px solid #3498db; /* Blue color */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    margin: auto;
    display: block;
}

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