/* Basic HTML
----------------------------------------------------------------------------------------------------*/





header {	
	background:#FFF;
	font: 16px/2 Trebuchet,"Trebuchet MS";
	
}

part_list.img {
		
		font-family: Trebuchet,"Trebuchet MS";
	}


.title {
	text-align: center;
	font: 20px/2 Trebuchet,"Trebuchet MS";
	font-weight: bold;
		
	
}

.item {
	text-align: center;
	font: 18px/2 Trebuchet,"Trebuchet MS";
	color: #465363;
}

description {
	text-align: center;
	font-family: Trebuchet,"Trebuchet MS";
}

error {
	font-family: Trebuchet,"Trebuchet MS";
	color: #ff0000;
	
}

set_table {
	text-align: center;
	font: 18px/2 Trebuchet,"Trebuchet MS";
	width: 50%;
	border-collapse: collapse;
	margin: 20px;
}

.set_table {
	text-align: center;
	font: 18px/2 Trebuchet,"Trebuchet MS";
	width: 100%;
	border-collapse: collapse;
	margin: 20px;
}

    .btn {
        display: inline-block;
        padding: 10px 15px;
        background-color: #007bff;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        font-size: 14px;
        border: none;
        cursor: pointer;
    }
    .btn:hover {
        background-color: #0056b3;
		color: #fff;
    }
	
	.update-price-btn {
        display: inline-block;
        padding: 10px 15px;
        background-color: #007bff;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        font-size: 14px;
        border: none;
        cursor: pointer;
    }
    .update-price-btn:hover {
        background-color: #0056b3;
		color: #fff;
    }


.suggest_set_name_column {
	width: 400px; /* Adjust the width as needed */
}

.suggest_column {
	width:200px; /* Adjust the width as needed */
}

.links {
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 4px;
}

/* CSS for the toggle switch */
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
        }
        input:checked + .slider {
            background-color: #2196F3;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        .slider.round {
            border-radius: 34px;
        }
        .slider.round:before {
            border-radius: 50%;
        }
        /* Custom labels for the switch */
        .switch-label {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            font-weight: bold;
            transition: color .4s;
        }
        .switch-label-left {
            left: -35px;
        }
        .switch-label-right {
            right: -30px;
        }
        .label-on {
            color: green;
        }
        .label-off {
            color: red;
        }
		

        .paragraph-box {
            background-color: #f0f0f0;
            width: 60%;
            padding: 20px;
            margin: 20px auto; /* Centers the box */
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .paragraph-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .paragraph-text {
            font-size: 16px;
        }

        .centered-form { 
            display: flex;
            justify-content: center;
            align-items: center;
            padding-right: 25px;
        }
        .centered-form input[type="text"] {
            border-radius: 20px;
            padding: 5px;
            margin: 5px;
            text-align: center; /* Centers text inside the input box */
        }
        .centered-form input[type="submit"] {
            border-radius: 5px;
            padding: 5px;
            margin: 5px;
        }
		
		.hidden {
			display: none;
		}



.messageBox {
  margin-top: 60px; /* Or use padding-top if you're keeping background */
}

.register-pagewrapper {
  margin-top: 51px; /* Or use padding-top if you're keeping background */
}	
	


.edit-table td {
  vertical-align: middle;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.4;
}


.edit-table tr {
  height: 32px;
}

.edit-table .editable-cell {
  display: inline-flex; /* inline behavior, not blocky */
  align-items: center;
  gap: 4px;
  height: 1em;
  font-size: 14px;
  line-height: 1.4;
}


.edit-table .editable-display {
  margin-left: 4px; /* fine-tune horizontal spacing */
  font-weight: 500;
}

.edit-table .editable-cell input.editable-input {
  width: 60px;
  padding: 2px 4px;
  font-size: 14px;
  height: 24px;
  line-height: 1.2;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 0;
}

/* Base button style */
.edit-table .editable-cell button {
  border: none;
  padding: 2px;
  margin-left: 4px;
  height: 24px;
  width: 24px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.1s ease;
}

/* Green tick button */
.edit-table .editable-cell .save-btn {
  background-color: #d4edda;
  color: #218838;
}

.edit-table .editable-cell .save-btn:hover {
  background-color: #c3e6cb;
  transform: scale(1.05);
}

/* Red cancel button */
.edit-table .editable-cell .cancel-btn {
  background-color: #f8d7da;
  color: #721c24;
}

.edit-table .editable-cell .cancel-btn:hover {
  background-color: #f5c6cb;
  transform: scale(1.05);
}

/* Neutral pencil button */
.edit-table .editable-cell .edit-btn {
  background-color: transparent;
  color: #4fa1f2;
}

.edit-table .editable-cell .edit-btn:hover {
  color: #2176bd;
  transform: scale(1.1);
}








  /* Styling the item rows*/
  .itemRow {
      border: 1px solid #ccc;
  }	
	
	
/* My Account page */
.account-container {
  max-width: 1150px; /* Increased width for better layout */
  margin: 20px auto;
  padding: 20px;
}

/* Two-column grid for account sections */
.account-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(500px, 1fr)); /* Wider sections */
  gap: 20px;
}

/* Account section styling */
.account-section {
  background: #ffffff;
  border: 2px solid #ccc; /* Defined border */
  border-radius: 12px;
  padding: 35px 25px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}

/* Larger icons */
.account-section .icon {
  font-size: 4rem; /* Increased size */
  color: rgba(100, 100, 100, 0.5);
  display: block;
  margin-bottom: 10px;
}

/* Ensure consistent spacing */
.account-section h2 {
  font-size: 1.3rem;
  margin: 10px 0 15px;
  color: #333;
  text-align: center;
}

/* Input fields - wider password fields */
.account-section input[type="text"],
.account-section input[type="email"],
.account-section input[type="password"] {
  width: 95%;
  padding: 12px;
  border: 1px solid #bbb;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 1rem;
  text-align: left;
}

/* Align password fields */
.account-section form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Ensure CTA buttons are the same width */
.account-section button {
  background-color: #28a745;
  color: white;
  padding: 12px 0;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
  width: 270px; /* Set fixed width for consistency */
  text-align: center;
}

/* Button hover effect */
.account-section button:hover {
  background-color: #218838;
}

/* Delete button in red */
.account-section .delete-btn {
  background-color: #dc3545;
}

.account-section .delete-btn:hover {
  background-color: #c82333;
}

/* Message Box Styling */
.message-box {
	margin-top: 60px;
  padding: 10px;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 8px;
  font-weight: bold;
}

/* Success/Error Message Colors */
.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}




/* BrickMetrics select — scoped class to avoid clashes */
.bm-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 100%;
  max-width: 420px;

  padding: 10px 40px 10px 12px; /* room for arrow on the right */
  border: 1px solid #d0d7de;
  border-radius: 10px;
  background: #fff;

  /* Chevron ▼ */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;

  font: inherit;
  color: #111827;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.bm-select:hover {
  border-color: #99a3ad;
}

.bm-select:focus {
  outline: none;
  border-color: #6366f1; /* indigo */
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}

/* Disabled state */
.bm-select:disabled {
  background-color: #f5f7fb;
  color: #9aa4b2;
  cursor: not-allowed;
  border-color: #e5e7eb;
}

/* Dark mode polish (optional) */
@media (prefers-color-scheme: dark) {
  .bm-select {
    background-color: #0f172a;
    color: #e5e7eb;
    border-color: #334155;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .bm-select:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, .35);
  }
}


.bm-price {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 50%;
  max-width: 420px;

  padding: 10px 40px 10px 12px; /* room for arrow on the right */
  border: 1px solid #d0d7de;
  border-radius: 10px;
  background: #fff;

  font: inherit;
  color: #111827;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}


.bm-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; align-items: center; justify-content: center; z-index: 1000; }
.bm-modal-content { background: #fff; max-width: 540px; width: 92%; padding: 20px 24px; border-radius: 10px; box-shadow: 0 10px 35px rgba(0,0,0,0.2); }
.bm-modal-close { background: transparent; border: 0; font-size: 24px; line-height: 1; float: right; cursor: pointer; }
.info-icon { cursor: pointer; margin-left: 6px; }


/* Light, easy-on-the-eye yellow for excluded rows */
:root { --pov-excluded-bg: #fff7cc; } /* tweak if you like */

tr.pov-excluded { background: var(--pov-excluded-bg); transition: background-color .2s ease; }
tr.pov-excluded > td { background: inherit; } /* if cells had their own bg */

/* Optional: soften numbers a bit when excluded */
tr.pov-excluded .line-subtotal { opacity: .7; }

/* Shades any row whose checkbox is unchecked */
tr:has(.include-line:not(:checked)) { background: var(--pov-excluded-bg); }

/* Shades any row whose checkbox is unchecked, even in dark mode */
tr:has(.include-line:not(:checked)) > * {
  background-color: var(--pov-excluded-bg) !important;
}


/* Responsive adjustments */
@media (max-width: 1100px) {
  .account-sections {
    grid-template-columns: 1fr; /* Single column on smaller screens */
  }
}


/* small, theme-friendly arrows next to the checkbox */
.pov-nav-arrow {
  margin-left: 6px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  opacity: .8;
}
.pov-nav-arrow:hover { opacity: 1; text-decoration: underline; }


/* Reuse your duplicate row color */
:root{
  --dup-bg: #f3e8ff;         /* light lavender */
  --dup-border: #d6b5ff;     /* border accent */
  --dup-text: #3b2a7a;       /* readable purple text */
}
@media (prefers-color-scheme: dark){
  :root{
    --dup-bg: rgba(243,232,255,0.22);
    --dup-border: rgba(187,134,252,0.7);
    --dup-text: #e9ddff;
  }
}

/* Purple alert variant */
.alert-dup{
  background-color: var(--dup-bg) !important;
  border: 1px solid var(--dup-border) !important;
  color: var(--dup-text) !important;
  /* optional accent */
  border-left-width: 4px;
}

/* Make links/icons readable inside the banner */
.alert-dup a{ color: inherit; text-decoration: underline; }
.alert-dup a:hover{ text-decoration: none; }


/* Light lavender for potential duplicates */
:root { --dup-bg: #f3e8ff; }                  /* light purple on light theme */
@media (prefers-color-scheme: dark) {
  :root { --dup-bg: rgba(243, 232, 255, 0.22); } /* softer on dark */
}
/* If you toggle via a class or data-theme, keep these too */
body.dark, .theme-dark, [data-theme="dark"] { --dup-bg: rgba(243,232,255,0.22); }

tr.dup-highlight { background-color: var(--dup-bg) !important; transition: background-color .2s ease; }
tr.dup-highlight > td, tr.dup-highlight > th { background-color: var(--dup-bg) !important; }

/* optional: focus outline when jumping */
.pov-focus { outline: 2px solid #bb86fc; outline-offset: -2px; }


/* Permanent purple ring */
.dup-ring { outline: 2px solid #bb86fc; outline-offset: -2px; }
@media (prefers-color-scheme: dark) { .dup-ring { outline-color: #bb86fc; } }

/* You already have the lavender highlight for dup rows (keep as-is) */

/* Persistent per-row purple ring (used when not part of a strict dup group) */
.pov-ring { outline: 2px solid #bb86fc; outline-offset: -2px; }
@media (prefers-color-scheme: dark){ .pov-ring { outline-color: #bb86fc; } }






.dup-scope { position: relative; }

:root { --dup-cluster: #ff4d4f; }              /* red border */
@media (prefers-color-scheme: dark){
  :root { --dup-cluster: #ff6b6b; }            /* brighter red on dark */
}

/* Single overlay box drawn above the table */
.dup-overlay{
  position: absolute;
  border: 2px solid var(--dup-cluster);
  border-radius: 2px;
  left: 0; width: 100%;        /* width gets refined by JS below */
  top: 0; height: 10px;        /* height gets set by JS below */
  pointer-events: none;        /* don’t block clicks */
  box-sizing: border-box;
  z-index: 10;                 /* make sure it’s visible above rows */
  background: transparent;     /* or: rgba(255,77,79,.03) for a faint fill */
}



/* Chunky circular chevron buttons (not dropdown-looking) */
.pov-nav-arrow{
  --size: 28px;                 /* tweak size */
  --btn-bg: rgba(0,0,0,.06);
  --btn-bg-hover: rgba(0,0,0,.12);
  --btn-border: rgba(0,0,0,.25);

  display:inline-flex; align-items:center; justify-content:center;
  width:var(--size); height:var(--size);
  margin-left:6px;
  border-radius:50%;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  box-shadow:0 1px 1px rgba(0,0,0,.08);
  color:inherit;
  cursor:pointer;
}
.pov-nav-arrow:hover{ background:var(--btn-bg-hover); transform:translateY(-1px); }
.pov-nav-arrow:active{ transform:translateY(0); }
.pov-nav-arrow svg{ width:18px; height:18px; display:block; }

@media (prefers-color-scheme: dark){
  .pov-nav-arrow{
    --btn-bg: rgba(255,255,255,.10);
    --btn-bg-hover: rgba(255,255,255,.18);
    --btn-border: rgba(255,255,255,.25);
  }
}

/* Wrap both arrows in a vertical stack so they align */
.pov-nav-wrap{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;               /* space between up/down */
  margin-left: 8px;       /* space after the checkbox */
  vertical-align: middle; /* avoid baseline wobble */
}

/* (keep your existing .pov-nav-arrow styles) */
/* If you want a quick size tweak: */
.pov-nav-arrow{ --size: 30px; }    /* optional */
.pov-nav-arrow svg{ width: 20px; height: 20px; }  /* optional */





/* Only hide the subscription message box initially */
#sub-message-box {
  display: none;
}





/* Style for the info icon */
.info-icon {
    cursor: pointer;
    margin-left: 5px;
    font-size: 16px;
    color: #007bff;
}

.info-icon:hover {
    color: #0056b3;
}

/* Modal styling */
.user-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
}

.user-modal-content {
    background-color: #ffffff; /* Ensure modal has a white background */
    color: #333; /* Dark text for readability */
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #ccc;
    width: 50%;
    text-align: left; /* Align text properly */
    border-radius: 8px;
}

/* Close button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Ensure <ul> inside the modal displays properly */
.user-modal-content ul {
    text-align: left;
    padding-left: 0;
    margin-top: 10px;
    background-color: #ffffff; /* Ensure modal has a white background */
    list-style: none; /* Remove bullet points */
    display: block; /* Ensure it's recognized as a block element */
}

/* Ensure <li> elements stack properly */
.user-modal-content ul li {
    display: list-item !important; /* Force list items to behave correctly */
    padding: 5px 0; /* Add spacing between items */
    font-size: 16px; /* Ensure text is readable */
    white-space: normal; /* Ensure text wraps properly */
	float: none;
}


.price-diff {
  font-weight: 600;
  text-align: right;
}
.price-diff.diff-up   { color: #2e7d32; }
.price-diff.diff-down { color: #c62828; }
.price-diff.diff-flat { color: #666; }




.advanced-search-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-top: 14px;
}

.advanced-search-actions .adv-btn {
    width: auto !important;
    min-width: 140px;
    padding: 12px 22px;
    border: 1px solid #b8b8b8;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.advanced-search-actions .adv-btn-add {
    background: #9fd3c0;
}

.advanced-search-actions .adv-btn-search {
    background: #ecd1a2;
}

.advanced-search-actions .adv-btn-reset {
    background: #b8c9e8;
}

.advanced-search-actions .adv-btn:hover {
    opacity: 0.92;
}



/* Dark mode fix for Advanced Search input boxes */
body.dark-mode #advanced-search-form .advanced-search-query {
    background: #2b2b2b;
    color: #ffffff;
    border: 1px solid #555;
}

body.dark-mode #advanced-search-form .advanced-search-query::placeholder {
    color: #bbbbbb;
}


.reports-search-row {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    align-items: stretch;
    margin-top: 40px;
}

.quick-reports-panel {
    margin-top: 20px;
    padding: 18px;
    text-align: center;
}

.quick-reports-panel h3 {
    font-size: 30px;
    font-weight: 400;
    color: #2c3e50;
    margin: 0 0 18px 0;
}

.quick-reports-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.quick-report-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.quick-report-btn {
    min-width: 150px;
    padding: 12px 22px;
    border: 1px solid #b8b8b8;
    border-radius: 6px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.quick-report-item:nth-child(1) .quick-report-btn {
    background: #9fd3c0;
}

.quick-report-item:nth-child(2) .quick-report-btn {
    background: #ecd1a2;
}

.quick-report-item:nth-child(3) .quick-report-btn {
    background: #cde1ff;   /* blue */
}

.quick-report-item:nth-child(4) .quick-report-btn {
    background: #d9c8f2;   /* light purple */
}

.quick-report-item:nth-child(5) .quick-report-btn {
    background: #f4d1d1;   /* light red */
}

.quick-report-item:nth-child(6) .quick-report-btn {
    background: #cde9d9;   /* soft green */
}






.quick-report-btn:hover {
    opacity: 0.92;
}


.quick-reports-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}




.advanced-search-section {
    margin: 0;
}

.report-help {
    position: relative;
    cursor: help;
    color: #007bff;
    font-weight: bold;
}

.report-tooltip {
    display: none;
    position: absolute;
    top: 24px;
    left: 0;
    width: 260px;
    background: #333;
    color: #fff;
    padding: 9px 11px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.4;
    z-index: 9999;
    text-align: left;
}

.report-help:hover .report-tooltip {
    display: block;
}

@media (max-width: 900px) {
    .reports-search-row {
        grid-template-columns: 1fr;
    }

    .quick-reports-container {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}





	
iframe {height:100%;width:100%}

table {height:100%;width:100%;table-layout:static;border-collapse:collapse}

.content {height:100%}

@media only screen and (max-width: 568px) {
    /* For mobiles: */
	
	part_list.img {
		
		style: height:30%;
	}
	
	body {	
		background:#FFF;
		font: 6px/2 Trebuchet,"Trebuchet MS";
		color: #465363;
		padding: 0;
		text-align: center;
	}
	
	tbody {	
		background:#FFF;
		font: 6px/2 Trebuchet,"Trebuchet MS";
		color: #465363;
		padding: 0;	
	}
	
	content	{
		font: 6px/2 Trebuchet,"Trebuchet MS";
	}
}

@media only screen and (min-width: 1281px) {	
	/* For desktops only: */
	[class = banner_img] {
		display:none;
	}

	body {	
		background:#FFF;
		font: 14px/2 Trebuchet,"Trebuchet MS" !important;
		color: #465363;
		padding: 0;
		text-align: center;
	}
	
	tbody {	
		background:#FFF;
		font: 14px/2 Trebuchet,"Trebuchet MS";
		color: #465363;
		padding: 0;	
	}
	
	content	{
		font: 16px/2 Trebuchet,"Trebuchet MS";
	}
}

	
@media only screen and (max-width: 1280px) {
    /* For tablets: */
	
	[class = container] {
		font: 10px/2 Trebuchet,"Trebuchet MS";
	}
	
	body {	
		background:#FFF;
		font: 10px/2 Trebuchet,"Trebuchet MS";
		color: #465363;
		padding: 0;
		text-align: center;
	}
	
	
	tbody {	
		background:#FFF;
		font: 10px/2 Trebuchet,"Trebuchet MS";
		color: #465363;
		padding: 0;
	}
		
	content	{
		font: 10px/2 Trebuchet,"Trebuchet MS";
	}
	
	
	
	[class = banner_img] {
		width: 100%;
		height: auto;
	}	
	[class = shop_img] {
		width: 100%;
		height: auto;
	}
	[class = title] {
		text-align: center;
		font: 22px/2 Trebuchet,"Trebuchet MS";
		font-weight: bold;
			
		
	}
	[class = item] {
		text-align: center;
		font: 18px/2 Trebuchet,"Trebuchet MS";
		font-weight: bold;
	}

	[class = main_text_2] {
		display:none;
	}
	[class = main_text_4] {
		display:none;
	}
	[class = main_text_5] {
		display:none;
	}
	[class = main_text_7] {
		display:none;
	}
	[class = main_text_9] {
		display:none;
	}
	[class = shop_img] {
		display:none;
	}
	[class = menu] {
		display:none;
	}
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	font: 16px/2 Trebuchet,"Trebuchet MS";
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}






.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 2000px;
    height: 150px;
	float:center;
    background-color: white;
	-webkit-flex-direction: row;
	flex-direction: row;
}


.flex-item {
    background-color: white;
    width: 5000px;
    height: 100px;
    margin: 10px;
	float: center;
	font: 16px/2 Trebuchet,"Trebuchet MS";
}

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}



#grad {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, #F74B07); /* Standard syntax */
	text-align: center;
	font: 18px/2 Trebuchet,"Trebuchet MS";
	color: black;
}

.revision:before {
	font: 8px/2 Trebuchet,"Trebuchet MS";
	content: "Copyright legosuperbricks.co.uk v0.41";
	text-align: center !important;
}

.alert {
	padding:15px;
	margin-bottom:20px;
	border:1px solid transparent;
	border-radius:4px
}	
	
.alert h4 {
	margin-top:0;
	color:inherit
}

.alert-success {
	color:#3c763d;
	background-color:#dff0d8;
	border-color:#d6e9c6
}
	
.alert-success hr {
	border-top-color:#c9e2b3
}

.alert-warning {
	color:#8a6d3b;
	background-color:#fcf8e3;
	border-color:#faebcc
}
	
.alert-warning hr {
	border-top-color:#f7e1b5
}

.alert-danger {
	color:#a94442;
	background-color:#f2dede;
	border-color:#ebccd1
}

.alert-danger hr {
	border-top-color:#e4b9c0
}

* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 20%;
  padding: 10px;
  /* height: 300px; Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.btnBlue {
	display: flex;
	justify-content: center;   /* horizontal centering */
	align-items: center;       /* vertical centering */
	padding: 5px;
	background-color: #3B5998;
	color: #f5f7fa;
	cursor: pointer;
	border-radius: 4px;
	width: auto;
	border: #5791da 1px solid;
	font-size: 1.1em;
	text-decoration: none; 
	align-self: flex-end;
}



/* Scoped Styles for the BrickMetrics Form */

#brickmetrics-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-width: 600px;
    margin: 20px auto;
    justify-content: center; /* Center the form content vertically */
}

/* Center Row Elements */
#brickmetrics-form .search-row {
    display: flex;
    justify-content: center; /* Horizontally center elements */
    align-items: center; /* Vertically align elements */
    gap: 10px;
}

/* Dropdown, Input, and Button Styling */
#brickmetrics-form select,
#brickmetrics-form input[type="text"],
#brickmetrics-form button {
    height: 45px; /* Consistent height */
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Button Styling */
#brickmetrics-form button {
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text */
    border: none;
    transition: background-color 0.3s ease;
}

#brickmetrics-form button:hover {
    background-color: #0056b3;
}

/* Multi-Select Row */
#brickmetrics-form .filter-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}

#brickmetrics-form .multi-select-group select {
    width: 300px; /* Adjust width as needed */
    height: 120px;
    padding: 8px;
}

/* SVG Icon */
#brickmetrics-form svg {
    fill: currentColor;
    width: 40px; /* Adjust icon size here */
    height: 50px; /* Adjust icon size here */
}



/* Upgrade Modal Styles */
.modal_upgrade {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  z-index: 1000;
  width: 90%;
  max-width: 400px;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-buttons {
  text-align: right;
  margin-top: 20px;
}

.modal-buttons button {
  padding: 10px 38px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

.confirm-btn {
  background-color: #28a745;
  color: white;
}

.cancel-btn {
  background-color: #dc3545;
  color: white;
}

.upgrade-to-premium-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

/* BrickMetrics v3 beta teaser on the V2 welcome page. */
.v3-beta-teaser {
  box-sizing: border-box;
  width: min(1180px, calc(100% - 40px));
  margin: 34px auto 28px;
  padding: clamp(24px, 4vw, 46px);
  overflow: hidden;
  color: #eef5ff;
  background:
    radial-gradient(circle at 92% 0%, rgba(37, 211, 155, 0.18), transparent 34%),
    linear-gradient(135deg, #071a36 0%, #0c2744 58%, #0d303d 100%);
  border: 1px solid #2f69a0;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(3, 18, 38, 0.24);
  font-family: Arial, sans-serif;
}

.v3-beta-teaser__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: #7df3c9;
  background: rgba(13, 79, 71, 0.7);
  border: 1px solid #1fa879;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.v3-beta-teaser h2 {
  margin: 18px 0 20px;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
}

.v3-beta-teaser p {
  margin: 0 0 13px;
  color: #d2e0f3;
  font-size: 17px;
  line-height: 1.55;
}

.v3-beta-teaser__intro {
  max-width: 960px;
}

.v3-beta-teaser__signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  gap: 34px;
  align-items: center;
  margin: 30px 0 24px;
  padding: 26px;
  background: rgba(9, 25, 50, 0.72);
  border: 1px solid rgba(105, 166, 224, 0.42);
  border-radius: 16px;
}

.v3-beta-teaser__signup h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 25px;
}

.v3-beta-teaser__action {
  text-align: center;
}

.v3-beta-teaser__button,
.v3-beta-modal .v3-beta-teaser__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 13px 22px;
  color: #ffffff !important;
  background: linear-gradient(135deg, #276bf0, #5549ef) !important;
  border: 1px solid #6e8fff !important;
  border-radius: 11px;
  box-shadow: 0 10px 24px rgba(36, 92, 225, 0.3);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.v3-beta-teaser__button:hover,
.v3-beta-teaser__button:focus-visible {
  background: linear-gradient(135deg, #397cf6, #685df6) !important;
  transform: translateY(-1px);
}

.v3-beta-teaser__button--registered,
.v3-beta-teaser__button--registered:hover {
  color: #bdf7df !important;
  background: #10543f !important;
  border-color: #229d73 !important;
  box-shadow: none;
  cursor: default;
  transform: none;
}

.v3-beta-teaser__registered,
.v3-beta-teaser__eligibility {
  padding: 15px 18px;
  color: #bdf7df;
  background: rgba(14, 83, 62, 0.66);
  border: 1px solid #229d73;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.v3-beta-teaser .v3-beta-teaser__eligibility {
  margin: 0;
  color: #dce8f8;
  background: rgba(31, 52, 78, 0.8);
  border-color: #496985;
}

.v3-beta-teaser .v3-beta-teaser__closing {
  margin: 0;
  color: #84b9ef;
  font-weight: 700;
}

.v3-beta-modal[hidden] {
  display: none;
}

.v3-beta-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.v3-beta-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 10, 24, 0.78);
  backdrop-filter: blur(5px);
}

.v3-beta-modal__dialog {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 30px;
  color: #eaf3ff;
  background: #0b1e38;
  border: 1px solid #356695;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.v3-beta-modal__dialog h2 {
  margin: 18px 0 10px;
  color: #ffffff;
  font-size: 29px;
}

.v3-beta-modal__dialog p {
  color: #c9d8eb;
  font-size: 16px;
  line-height: 1.5;
}

.v3-beta-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #dce8f8 !important;
  background: #162d4b !important;
  border: 1px solid #3b5d82 !important;
  border-radius: 50%;
  cursor: pointer;
  font-size: 27px;
  line-height: 34px;
}

.v3-beta-modal label {
  display: block;
  margin: 22px 0 8px;
  color: #eef5ff;
  font-weight: 700;
}

.v3-beta-modal label span {
  color: #9eb2cb;
  font-weight: 400;
}

.v3-beta-modal textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  resize: vertical;
  color: #eef5ff !important;
  background: #08172d !important;
  border: 1px solid #45698f !important;
  border-radius: 10px;
  font: inherit;
}

.v3-beta-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.v3-beta-modal__actions .v3-beta-teaser__button {
  width: auto;
}

.v3-beta-modal__cancel {
  padding: 12px 20px;
  color: #dce8f8 !important;
  background: #172d49 !important;
  border: 1px solid #466786 !important;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}

.v3-beta-modal__status {
  min-height: 22px;
  margin-top: 12px;
  font-weight: 700;
}

.v3-beta-modal__status--success { color: #6ef0bb; }
.v3-beta-modal__status--error { color: #ff9aaa; }
.v3-beta-modal-open { overflow: hidden; }

@media (max-width: 760px) {
  .v3-beta-teaser {
    width: calc(100% - 24px);
    margin-top: 24px;
    padding: 24px 18px;
    border-radius: 16px;
  }

  .v3-beta-teaser__signup {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
  }

  .v3-beta-modal__dialog { padding: 25px 20px; }
  .v3-beta-modal__actions { flex-direction: column-reverse; }
  .v3-beta-modal__actions button,
  .v3-beta-modal__actions .v3-beta-teaser__button { width: 100%; }
}