@import url(https://fonts.googleapis.com/css?family=Muli);

html, body {
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
    background: #fff;
    font-family:helvetica, sans-serif;
}

p {
    line-height: 1.2;
}

a {
    color:#12c064;
    text-decoration:none;
}

a:hover {
    color:#00a74f;
}

h1, h2, h3, h4, h5 , h6 { font-family: 'Muli', sans-serif; font-weight:normal; }

h1 {
    border-bottom:1px solid #bbb;
    padding:0 0 10px 0;
    /*margin:10px 0 20px 0;*/
    /* margin: T R B L */
    margin: 10px 0px 10px 0px;
}

h2 {
    margin:10px 0 20px;
}

ol {
    line-height:1.2;
}

#header {
    padding:10px 100px;
    font-size:14px;
    background:#12c064;
    color:#fff;
    border-bottom:4px solid #1cdf78;
    overflow:auto;
}

#header .logo {
    font-family: 'Muli', sans-serif;
    float:left;
    color:#f3f7cc;
    font-size:20px;
    margin-right:10%;
}

#header ul.menu {
    list-style:none;
    float:left;
    margin:0;
    padding:0;
}
#header ul.menu li {
    float:left;
    padding:4px 10px;
}

#header ul.menu li.selected a, #header ul.menu li.selected a:hover {
    color:#1b6d32;
    font-weight:bold;
}

#header a {
    color:#f3f7cc;
}
#header a:hover {
    color:#fff;
}

#header .user {
    float:right;
    padding-top:4px;
}

#content {
    padding:30px 100px;
}

/* forms */
form {
    overflow:auto;
}

form p {
    width:100%;
    overflow:auto;
}

label {
    float:left;
    clear:both;
    color:#333;
    margin-bottom:4px;
}

.textarea{
    overflow-x: auto;
    overflow-y: auto;
}

input, textarea {
    clear:both;
    float:left;
    margin:0 0 10px;
    background:#efefef;
    border:0;
    padding:6px 10px;
    font-size:14px;
}
input[type=submit], a.button {
    font-weight:bold;
    background:#12c064;
    color:#fff;
    padding:10px 20px;
    font-size:14px;
    text-transform:uppercase;
}

.monospaced {
    font-family: Courier, monospace;
}

.form-error {
    color: #ff0000;  /* Error text color */
    background-color: #fff0f0;  /* Error background color */
    padding: 5px;
    border-radius: 4px;
}

.form-field-error {
    color: red;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.form-label.is-required::after {
  content: " *";
  font-weight: 700;
}

.form-label.is-required {
  /* choose one or combine */
  color: #b30000;           /* red label */
  /* or */
/* background: #fff4f4; */     /* subtle highlight */
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
}

/*.form-non-field-error {*/
/*    color: red;*/
/*    font-size: 0.9rem;*/
/*    margin-top: 0.25rem;*/
/*}*/

.form-buttons {
    display: flex;
    justify-content: flex-start; /* Align buttons to the right */
    gap: 1rem; /* Space between buttons */
}


/* Style for the error messages container */
#error-messages {
    background-color: yellow; /* Yellow background for the container */
    border: 2px solid red;    /* Optional: Add a red border to emphasize the error box */
    padding: 10px;            /* Add some padding for spacing inside the container */
    margin: 15px 0;           /* Add vertical spacing around the error box */
    border-radius: 4px;       /* Optional: Rounded corners */
}

/* Style for individual error messages */
.form-non-field-error {
    color: red;               /* Red text for individual errors */
    font-weight: bold;        /* Optional: Make the text bold for emphasis */
    /*font-size: 0.9rem;*/
    margin-top: 0.25rem;
    margin-bottom: 5px;       /* Spacing between error messages */
}

.form-non-field-error::before {
    content: "⚠️ "; /* Warning symbol */
    color: red;
    margin-right: 5px; /* Add space between the icon and the text */
}

@media (max-width: 600px) {
    #error-messages {
        font-size: 14px; /* Adjust font size for smaller screens */
    }
}




/*.errorlist {*/
/*    color:#cc0033;*/
/*    float:left;*/
/*    clear:both;*/
/*    padding-left:10px;*/
/* } */

.errorlist {
  color: #cc0033;
  /* remove the float */
  /* float: left; */
  /* clear: both;  <-- not needed if we don't float */
  margin: .25rem 0 0;
  padding-left: 1rem;
  list-style: disc;
  display: block;     /* ensure it takes a full row */
  width: 100%;        /* optional, guarantees full width */
}



.helptext {
    margin:0 0 20px 0;
    color:#aaa;
    clear:both;
    float:left;
    font-size:13px;
}

/* messages -------------------------------------------------------------------------------------------------------- */
ul.messages {
    position: sticky;
    top: 20%;
    margin: 10px 10px;
    padding: 0;
    background: transparent;   /* important */
    list-style-type: none;
}

ul.messages li.success,
ul.messages li.warning,
ul.messages li.error,
ul.messages li.info {
    margin: 0;
    padding: 14px 20px;
    list-style: none;

    /* readable by default */
    color: #111;
}

ul.messages li.success {
    background: #e9f7ea;
    border: 1px solid #81ce81;
    color: #0f2a13;
    border-left: 6px solid #2e7d32;
}

ul.messages li.success a { color:#0ac33e; }

ul.messages li.error {
    background: #fdecec;
    border: 1px solid #f5b5b5;
    color: #2b1a1a;
    border-left: 6px solid #d93025;
}
ul.messages li.error a { color:#e9828e; }

ul.messages li.info {
    background: #eef6ff;
    border: 1px solid #bcd9ff;
    color: #0b2239;
    border-left: 6px solid #1a73e8;
}

ul.messages li.info a { color:#1586de; }

ul.messages li.warning {
    background: #fff7e0;
    border: 1px solid #ffe1a3;
    color: #2a1f00;
    border-left: 6px solid #b26a00;
}

ul.messages li.warning a { color:#f49000; }


ul.messages li a {
    color: inherit;
    text-decoration: underline;
}

ul.messages li a.close {
    float: right;
    margin-left: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.85;
}
ul.messages li a.close:hover { opacity: 1; }
/* messages -------------------------------------------------------------------------------------------------------- */


.login-form {
    float:left;
}

/* social-auth */
.social {
    float:right;
}
.social li {
    list-style:none;
    padding:10px 20px;
    margin:0 0 10px 0;
}
.social li a {
    width:100%;
    height:100%;
    display:block;
    color:#fff;
}
.social li.facebook { background:#3b5399; }
.social li.twitter { background:#00cffa; }
.social li.google { background:#de1710; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* This container uses CSS Grid and sets a white background */
.page-container {
    display: grid;
    background-color: #fff;  /* Replaces w3-white */
    width: 100%;
}

/* This inner container provides padding similar to w3-container w3-padding-32 */
.page-content {
    padding: 20px;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* Supplier - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* XXX:*/
/* •	Grid Container: The parent element with display: grid.*/
/* •	Grid Items: The direct children of the grid container.*/
/* •	Grid Lines: The boundaries between columns and rows.*/
/* •	Grid Tracks: The space between two grid lines (i.e., columns and rows).*/
/* •	Grid Cells: The single unit space defined by the intersection of a row and a column.*/
/* •	Grid Areas: A rectangular grouping of grid cells.*/

    /*.section {*/
    /*    padding: 10px;*/
    /*    border: 1px solid #ccc;*/
    /*    border-radius: 4px; !* Rounded corners *!*/
    /*}*/

.section {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.section-slim {
    margin: 0.5rem 0;
    padding: 1.0rem 1.0rem;
    background: #ffffff;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}


    /*.sub-section {*/
    /*    padding: 10px;*/
    /*    border: 1px solid #ccc;*/
    /*    border-radius: 4px; !* Rounded corners *!*/
    /*}*/

/* ==========================
   SUB-SECTION (Profile panels etc.)
   ========================== */
.sub-section {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: #fafbfc;
    border-left: 4px solid #d0d7de;
    border-radius: 6px;
}

/* Make headings inside sub-section smaller */
.sub-section h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.sub-section h3 {
    margin-top: 0;
    font-size: 1.0rem;
}

.xxx_panel-toggle {
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    color: #333;
}

.xxx_panel-toggle:hover {
    color: #0d6efd;
}

.panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}
.panel-toggle:hover {
  background: #f5f5f5;
}

.panel-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.panel-stack-item {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  padding: 0.45rem;
  background: rgba(255,255,255,0.35);
}

.panel-stack-item > .panel-toggle {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0;
}

.panel-stack-body {
  margin-top: 0.45rem;
}


    .supplier-profile {
        background: #f9f9f9;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 4px; /* Rounded corners */
    }

    .supplier-profile p {
        margin: 3px 0;     /* Reduce top and bottom margins */
        line-height: 1.0;  /* Reduce line spacing between lines of text */
    }

    .supplier-data {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 5px;
    }

    /* Area to display supplier promo images */
    .supplier-promo-image-area {
        background: #f9f9f9;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 4px; /* Rounded corners */
    }

    .solution-profile {
        background: #f9f9f9;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 4px; /* Rounded corners */
    }

    .solution-profile p {
        margin: 3px 0;     /* Reduce top and bottom margins */
        line-height: 1.0;  /* Reduce line spacing between lines of text */
    }

    .solution-data {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 5px;
    }

    /* Area to display supplier promo images */
    .solution-promo-image-area {
        background: #f9f9f9;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 4px; /* Rounded corners */
    }

/* My Images -------------------------------------------------------------------------------------------------------- */
/*XXX:*/
/*•	Grid Container: The parent element with display: grid.*/
/*•	Grid Items: The direct children of the grid container.*/
/*•	Grid Lines: The boundaries between columns and rows.*/
/*•	Grid Tracks: The space between two grid lines (i.e., columns and rows).*/
/*•	Grid Cells: The single unit space defined by the intersection of a row and a column.*/
/*•	Grid Areas: A rectangular grouping of grid cells.*/

/* Image layout */
.images-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
}
.images-layout-grid img {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

/* Individual images card styling */
.image-card {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.image-carousel-slide {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*.images-card img {*/
/*  width: 100%;*/
/*  height: auto;*/
/*  display: block;*/
/*}*/

.image-card img {
  width: 100%;
  height: 200px; /* Fixed height for the container */
  /* object-fit: cover; */ /* or 'contain' to fit the entire images */
  object-fit: contain; /* or 'contain' to fit the entire images */
}

.image-carousel-slide img {
  width: 100%;
  height: 300px; /* Fixed height for the container */
  /* object-fit: cover; */ /* or 'contain' to fit the entire images */
  object-fit: contain; /* or 'contain' to fit the entire images */
}

/* Container for the images to center it */
.image-container {
  text-align: center;
}

.image-preview, .image-details {
    max-width:300px;
    float:left;
    /*margin:0 20px 20px 0;*/
}

.image-details p {
    font-size: 14px;

  white-space: normal;          /* Allow wrapping */
  overflow-wrap: break-word;    /* Break long words if necessary */
  margin: 5px 0;                /* Optional: Adjust margin to prevent overlap */
  line-height: 1.4;             /* Increase line-height if lines are too close */
}

.image-info div {
    padding:20px 0;
    overflow:auto;
}

/* Button container using flexbox for horizontal layout */
/* The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements. */
.button-container-left {
  display: flex;
  flex-wrap: wrap;
  clear: both;
  gap: 3px;
  justify-content: left;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.button-container-right {
  display: flex;
  flex-wrap: wrap;
  clear: both;
  gap: 3px;
  justify-content: right;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.button-container-space-between {
  display: flex;
  flex-wrap: wrap;
  clear: both;
  gap: 3px;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin-top: 10px;
}

.button-container-split {
  display: flex;
  justify-content: space-between;  /* Pushes items to left and right ends */
  align-items: center;
  flex-wrap: wrap;
  clear: both;
  gap: 3px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.button-group-left,
.button-group-right {
  display: flex;
  gap: 3px;
}

/* Optional: Style the forms inside button container to remove default margins */
.button-container form {
  margin: 0;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

.count {
    color:#aaa;
    border:3px solid #bbb;
    border-radius:26px;
    padding:10px 20px;
    margin:20px 10px 0;
}
a.like, a.follow { float:right; margin-top:-8px; }

#image-list { overflow:auto; }
#image-list .image {
    float:left;
    width:220px;
    height:300px;
    margin:0 10px 10px 10px;
    border-top:8px solid #12c064;
    background:#eee;
}
#image-list img { width:220px; height:220px; }
#image-list .info { padding:10px; }
#image-list .info a { color:#333; }
.image-likes div {
    float:left;
    width:auto;
    padding:10px;
    text-align:center;
}
.image-likes img {
    width:120px;
    height:120px;
    border-radius:50%;
}

/* users */
#people-list img {
    width:180px;
    height:180px;
    border-radius:50%;
    margin-bottom:20px;
}
#people-list .user {
    width:180px;
    float:left;
    overflow:auto;
    padding:10px;
}
#people-list .info { text-align:center; }
img.user-detail {
    border-radius:50%;
    float:left;
}
.profile-info {
    float:left;
    overflow:auto;
    margin-right:20px;
}

/* actions */
.action {
    clear:both;
    overflow:auto;
}
.action .images {
    float:left;
    margin:0 10px 10px 0;
}
.action .date {
    font-style:italic;
    color:#ccc;
}


.my-button {
    display: inline-block;
    padding: 3px 5px;
    /*width: 120px;*/
    background-color: #a8f436;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    /* transition: background-color 0.2s ease-in-out; */
    transition: background-color 0.2s ease-in-out, opacity 0.2s ease;
}

/*.my-button:hover:not(:disabled) {*/
/*    background-color: #dcdcdc;*/
/*}*/

/* only hover when it’s actually interactive */
.my-button:not([inert]):not(:disabled):hover {
  background-color: #dcdcdc;
}

/* inert looks the same but has a neutral cursor */
.my-button[inert] {
  cursor: default;      /* optional */
  /* pointer-events: none;  // optional if you also want to block hover JS handlers */
}

.my-button:disabled {
  cursor: not-allowed;  /* show the 🚫 cursor */
  opacity: 0.3;
}

/* Disable and <a> link */
/* e.g., <a class="my-button my-button-duplicate {% if active_solutions|length >= max_solutions %}disabled-link{% endif %}"*/
.my-button.disabled-link {
    /*pointer-events: none;*/
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
    /* pointer-events: none; // enable if you want it truly non-clickable */
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Originally for Communitiy Notices - Guest have limited access */
.is-disabled {
    position: relative;
}

.is-disabled::after {
    content: "Login to view details";
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 0.8em;
    color: #888;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Adapted from w3schools.com w3.css */

.my-amber,.my-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.my-aqua,.my-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.my-blue,.my-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.my-light-blue,.my-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.my-brown,.my-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.my-cyan,.my-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.my-blue-grey,.my-hover-blue-grey:hover,.my-blue-gray,.my-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.my-green,.my-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.my-light-green,.my-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.my-indigo,.my-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.my-khaki,.my-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.my-lime,.my-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.my-orange,.my-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.my-deep-orange,.my-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.my-pink,.my-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.my-purple,.my-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.my-deep-purple,.my-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.my-red,.my-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.my-sand,.my-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.my-teal,.my-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.my-yellow,.my-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.my-white,.my-hover-white:hover{color:#000!important;background-color:#fff!important}
.my-black,.my-hover-black:hover{color:#fff!important;background-color:#000!important}
.my-grey,.my-hover-grey:hover,.my-gray,.my-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.my-light-grey,.my-hover-light-grey:hover,.my-light-gray,.my-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.my-dark-grey,.my-hover-dark-grey:hover,.my-dark-gray,.my-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.my-pale-red,.my-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.my-pale-green,.my-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.my-pale-yellow,.my-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.my-pale-blue,.my-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.my-text-amber,.my-hover-text-amber:hover{color:#ffc107!important}
.my-text-aqua,.my-hover-text-aqua:hover{color:#00ffff!important}
.my-text-blue,.my-hover-text-blue:hover{color:#2196F3!important}
.my-text-light-blue,.my-hover-text-light-blue:hover{color:#87CEEB!important}
.my-text-brown,.my-hover-text-brown:hover{color:#795548!important}
.my-text-cyan,.my-hover-text-cyan:hover{color:#00bcd4!important}
.my-text-blue-grey,.my-hover-text-blue-grey:hover,.my-text-blue-gray,.my-hover-text-blue-gray:hover{color:#607d8b!important}
.my-text-green,.my-hover-text-green:hover{color:#4CAF50!important}
.my-text-light-green,.my-hover-text-light-green:hover{color:#8bc34a!important}
.my-text-indigo,.my-hover-text-indigo:hover{color:#3f51b5!important}
.my-text-khaki,.my-hover-text-khaki:hover{color:#b4aa50!important}
.my-text-lime,.my-hover-text-lime:hover{color:#cddc39!important}
.my-text-orange,.my-hover-text-orange:hover{color:#ff9800!important}
.my-text-deep-orange,.my-hover-text-deep-orange:hover{color:#ff5722!important}
.my-text-pink,.my-hover-text-pink:hover{color:#e91e63!important}
.my-text-purple,.my-hover-text-purple:hover{color:#9c27b0!important}
.my-text-deep-purple,.my-hover-text-deep-purple:hover{color:#673ab7!important}
.my-text-red,.my-hover-text-red:hover{color:#f44336!important}
.my-text-sand,.my-hover-text-sand:hover{color:#fdf5e6!important}
.my-text-teal,.my-hover-text-teal:hover{color:#009688!important}
.my-text-yellow,.my-hover-text-yellow:hover{color:#d2be0e!important}
.my-text-white,.my-hover-text-white:hover{color:#fff!important}
.my-text-black,.my-hover-text-black:hover{color:#000!important}
.my-text-grey,.my-hover-text-grey:hover,.my-text-gray,.my-hover-text-gray:hover{color:#757575!important}
.my-text-light-grey,.my-hover-text-light-grey:hover,.my-text-light-gray,.my-hover-text-light-gray:hover{color:#f1f1f1!important}
.my-text-dark-grey,.my-hover-text-dark-grey:hover,.my-text-dark-gray,.my-hover-text-dark-gray:hover{color:#3a3a3a!important}

/* --------------------------------------------------------------------------------------------------------------- */
.my-button-compare {
    background-color: #0a288a;
    color: #fff
}
.my-button-compare:disabled {
  background-color: #666;  /* or any muted shade */
}


/* For say filter button links
*/
    .button-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        /*border: 2px solid red;*/
    }

    @media (max-width: 600px) {
        .button-links {
            display: grid;
            grid-template-columns: 1fr;
        }
    }
.filter-bar {
    display: grid;
    gap: 0.6rem;
}

.filter-bar__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
}

.filter-bar__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

@media (max-width: 600px) {
    .filter-bar__links {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.filter-bar__links a.is-active {
    background: #333;
    color: #fff;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
}

/* EoF button-links ---------- */


.my-button-link {
  background-color: #007bff;
}

.my-button-approve,
.my-button-save,
.my-colour-submit,
.my-button-submit {
    background-color: #28a745;
}

.my-button-save-return {
    background-color: #28a745;
}

.my-button-no-save-return {
    background-color: #007bff;
}

.my-colour-check,
.my-button-check {
    background-color: #000000;
}

.my-colour-confirm,
.my-button-confirm,
.my-colour-delete,
.my-button-delete,
.my-colour-soft_delete,
.my-button-soft_delete,
.my-colour-hard_delete,
.my-button-hard_delete,
.my-colour-remove,
.my-button-remove {
  background-color: #dc3545;
}

.my-colour-withdraw,
.my-button-withdraw {
  background-color: #83b4f4;
}

.my-colour-match,
.my-button-match {
  background-color: #83b4f4;
}

.my-colour-export,
.my-button-export {
  background-color: #DCA3A3;
}

.my-colour-import,
.my-button-import {
  background-color: #ade64c;
}

.my-colour-make-permanent,
.my-button-make-permanent {
  background-color: #dc3545;
}

.my-colour-restore,
.my-button-restore,
.my-colour-undelete,
.my-button-undelete {
  background-color: #dcd435;
}

.my-colour-no-sku {
  background-color: rgba(244, 211, 239, 0.99);
}

.my-colour-return,
.my-button-return
 {
  background-color: #6c757d;
}

.my-colour-cancel,
.my-button-cancel {
  background-color: #d005ef;
  color: #fff;
}

.my-button-select {
  background-color: #007bff;
}

.my-button-select:hover {
  background-color: #0056b3;
}

.my-colour-edit,
.my-button-edit,
.my-colour-update,
.my-button-update {
  background-color: #ffc107;
}

.my-colour-review,
.my-button-review {
  background-color: #ffd500;
}

.my-colour-upload,
.my-button-upload {
  background-color: #17a2b8;
}

.my-button-view,
.my-button-details {
  background-color: #17a2b8;
}

.my-button-add {
  background-color: #28a745;
}

.my-button-duplicate {
  background-color: #ffc107;
}

.my-button-clear {
  background-color: #17a2b8;
}

.my-button-create {
  background-color: #28a745;
}

.my-button-list {
  background-color: #17a2b8;
}

.my-button-hidden {
  background-color: #fd7e14;
}

.my-button-search {
  background-color: #28a745;
}

.my-button-refresh {
  background-color: #28a745;
}

.my-button-prev {
  background-color: #17a2b8;
}

.my-button-next {
  background-color: #ffc107;
}

/* My Ordering Buttons ---------------------------------------------------------------------------------------------- */



.my-button-order-by-id {
    background-color: var(--my-id);
}

.my-button-order-by-name {
    background-color: var(--my-name);
}

.my-button-order-by-address {
    background-color: var(--my-address);
}

.my-button-order-by-rating {
    background-color: var(--my-rating);
}

.my-button-order-by-type {
    background-color: var(--my-type);
}

.my-button-order-by-sub-type{
    background-color: var(--my-sub-type);
}

.my-button-order-by-distance {
    background-color: var(--my-distance);
}

.my-button-order-by-price {
    background-color: var(--my-price);
}

.my-button-order-by-sub-location {
    background-color: var(--my-sub-location);
}





/* My Colours ------------------------------------------------------------------------------------------------------- */

.my-colour-success {
  background-color: #94fd14;
}

.my-colour-error {
  background-color: #dc3545;
}

.my-colour-alert {
  background-color: #ffeb3b;
}

.my-colour-warning,
.my-button-warning {
  background-color: #fd7e14;
}

.my-colour-danger,
.my-button-danger {
  background-color: #dc3545;
}

.my-text-information {
  color: #007bff;
}

.my-colour-information {
  background-color: #007bff;
}

.my-colour-pending {
  background-color: #6c757d;
}

.my-colour-in-progress {
  background-color: #17a2b8;
}

.my-colour-category-section {
    background-color: #f3bbbd;
}

.my-colour-category {
    background-color: #ffffcc;
}

.my-colour-no-category {
    background-color: #da0909;
}

.my-colour-category-change,
.my-button-category-change {
    background-color: #863ae4;
}

.my-colour-solution {
    background-color: #ddffff;
}

.my-colour-active {
    background-color: #94fd14;
}

.my-colour-inactive {
    background-color: #f4e90b;
}

.my-colour-open,
.my-button-open {
    background-color: #94fd14;
}

.my-colour-closed,
.my-button-closed {
    background-color: #f4e90b;
}

.my-colour-activate,
.my-button-activate {
    background-color: #ffeb3b;
}

.my-colour-deactivate,
.my-button-deactivate {
    background-color: #94fd14;
}

.my-colour-debug {
    background-color: #f4e90b;
}

.my-colour-terminal-crumb {
    color: #007bff;
}

/*.arrow {*/
/*    font-size: 0.75em; !* Adjust size as needed *!*/
/*}*/
.arrow.asc::after {
    content: ' ▲';
}
.arrow.desc::after {
    content: ' ▼';
}


/* ----------------------------------------------------------------------------------------------------------------- */
/* CKEditor */
.cke_contents {
    max-width: 100%;   /* Ensures the editor content doesn't overflow */
    width: 100%;       /* Makes the editor stretch within its container */
    box-sizing: border-box;
}

.cke {
    width: 100% !important;  /* Force the editor's container to fill its parent */
}


/* Styles for brief description */
.job-brief-description {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    white-space: pre-wrap; /* Preserves whitespace and line breaks */
    margin-bottom: 10px;
}

/* Styles for description */
.job-description {
    font-family: Arial, sans-serif;
    line-height: 1.8;
    white-space: pre-wrap; /* Preserves whitespace and line breaks */
    margin-top: 5px; /* Adjust space above each paragraph */
    margin-bottom: 5px;
}

.job-brief-description p,
.job-description p {
    margin-top: 5px; /* Adjust space above each paragraph */
    margin-bottom: 5px; /* Adjust space below each paragraph */
    line-height: 1.6; /* Adjust line spacing within paragraphs */
}

/* Apply consistent list styling for both fields */
.job-brief-description ul,
.job-brief-description ol,
.job-description ul,
.job-description ol {
    margin-top: 5px; /* Adjust space above the list */
    margin-bottom: 5px; /* Adjust space below the list */
    margin-left: 20px;
    padding-left: 20px;
}

.job-brief-description li,
.job-description li {
    margin-bottom: 2px; /* Reduce space between list items */
    line-height: 1.4; /* Adjust line spacing within list items */
}

/* ================================================================================================================= */
/* Common grid styles */
.grid-container {
    display: grid; /* Enable CSS Grid */
    gap: 0.5rem; /* Space between grid items */
    padding: 0.5rem; /* Padding around the grid */
    /*border: 1px solid #ccc; !* Optional border around the grid *!*/
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition */
    background-color: #f9f9f9; /* Background color */
}

/* Outer container – ensure it stretches */
.outer {
    width: 100%;
}

.grid-container-narrow {
  max-width: 720px;          /* pick a size you like: 720/840/960px, etc. */
  margin-inline: auto;
  padding-inline: 1rem;      /* breathing room on small screens */
}

.grid-container-scrollable {
    max-height: 500px;
    overflow-y: auto;
}

/* For simple dynamic grids without fixed height */
.grid-container-dynamic {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Flexible columns */
}

/* Hover effect only for elements with the grid-container-hover class */
.grid-container-hover:hover {
    background-color: #dcdcdc; /* Hover background color */
}

/* Add specific styles for labels and values */
.grid-header {
    font-weight: bold;
    color: #000; /* Darker text for header */
    background-color: #e0e0e0; /* Light gray background for headers */
    text-align: left; /* Align text to the left */
    /*border-bottom: 1px solid #ddd; !* Optional row separation *!*/
    /*border-bottom: 1px solid #d32f2f; !* Optional row separation *!*/
}

/* Specific styles for grid values */
.grid-value {
    color: #555; /* Neutral text color */
    white-space: normal; /* Allow wrapping for long content */
    text-align: left; /* Align text to the left */
    /*border-bottom: 1px solid #ddd; !* Optional row separation *!*/
    /*border-bottom: 1px solid #d32f2f; !* Optional row separation *!*/
}

/* Specific header row styling */
.grid-header-row {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
}

.grid-header-row-element {
    background-color: #e0e0e0;
    font-weight: bold;
    padding: 10px;
    border: 1px solid #ccc;
    position: sticky;
    top: 0;            /* Sticks to the top during vertical scrolling */
    z-index: 2;        /* Ensure it appears above other content */
}



/* Label styling */
.grid-label {
    font-weight: bold;
    text-align: left;
    color: #333;
    /*padding: 0.5rem;*/
    border-radius: 0px;
    border-right: 1px solid #ddd;
    background-color: #f1f1f1;
    white-space: nowrap;
}

/* -------------------- */
/* Grid Layouts */
.grid-1-1-1-col {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-1-1-1-1-col {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-1-1-1-1-col-scrollable {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    max-height: 500px;
    overflow-y: auto;
}

.grid-1-1-col {
    grid-template-columns: 1fr 1fr;
}

.grid-2-2-col {
    grid-template-columns: 2fr 2fr;
}

.grid-1-1-1-1-span-2-col {
    grid-column: span 2; /* Force this row to span two columns */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 equal columns for this row */
    gap: 0.5rem;
    /*align-items: center; !* Vertically align items *!*/
}

.grid-1-2-col {
    /*grid-template-columns: minmax(250px, 250px) 1fr;*/
    grid-template-columns: minmax(150px, 250px) 1fr;
    /*grid-template-columns: 1fr 2fr;*/
}

.grid-1-3-col {
    grid-template-columns: 1fr 3fr;
}

.grid-1-4-col {
    grid-template-columns: 1fr 4fr;
}

.grid-auto-fit-col {
    grid-template-columns: auto 1fr;
}

.grid-1-2-4-2-col {
    grid-template-columns: 1fr 2fr 4fr 2fr;
}

.grid-2-4-2-col {
    grid-template-columns: 2fr 4fr 2fr;
}

.grid-auto-1-1-1-col {
    grid-template-columns: 2fr 1fr 1fr 1fr;
}

.grid-2-1-1-col {
    grid-template-columns: 2fr 1fr 1fr;
}

.grid-2-2-1-2-col {
    grid-template-columns: 2fr 2fr 1fr 2fr;
}

.grid-2-2-2-1-2-col {
    grid-template-columns: 2fr 2fr 2fr 1fr 2fr;
}

.grid-1-col {
    grid-template-columns: 1fr;
}

.grid-1-1-2-col {
    grid-template-columns: 1fr 1fr 2fr;
}

.grid-1-1-2-2-col {
    grid-template-columns: 1fr 1fr 2fr 2fr;
}

.grid-1-1-2-1-2-col {
    grid-template-columns: 1fr 1fr 2fr 1fr 2fr;
}

.grid-1-1-1-2-1-2-col {
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr 2fr;
}

.grid-1-2-1-2-col {
    grid-template-columns: 1fr 2fr 1fr 2fr;
}

.grid-1-3-1-3-2-col {
    grid-template-columns: 1fr 3fr 1fr 3fr 2fr;
}

.grid-1-3-1-1-3-2-col {
    grid-template-columns: 1fr 3fr 1fr 1fr 3fr 2fr;
}

.grid-1-1-1-1-1-col {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-2-1-1-2-1-1-1-col {
    grid-template-columns: 2fr 1fr 1fr 2fr 1fr 1fr 1fr;
}

.grid-2-4-1-1-1-1-1-col {
    grid-template-columns: 2fr 4fr 1fr 1fr 1fr 1fr 1fr;
}


.grid-2-4-1-1-1-1-1-1-1-col {
  /*grid-template-columns: 2fr 1fr 1fr 2fr 1fr 1fr 1fr;*/
    grid-template-columns: 2fr 4fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-2-4-1-1-1-1-1-1-col {
  /*grid-template-columns: 2fr 1fr 1fr 2fr 1fr 1fr 1fr;*/
    grid-template-columns: 2fr 4fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-2-4-1-1-1-1-col {
    grid-template-columns: 2fr 4fr 1fr 1fr 1fr 1fr;
}

.grid-2-4-1-1-1-col {
    grid-template-columns: 2fr 4fr 1fr 1fr 1fr;
}


:root {

    --my-colour-error: #b00020;
    --my-colour-heading: #243447;
    --my-colour-muted-text: #555;

    --fs-tiny:   0.625rem; /* 10px if root is 16px */
    --fs-small:  0.75rem;  /* 12px */
    --fs-medium: 0.9375rem;/* 15px */
    --fs-large:  1.125rem; /* 18px */
    --fs-x:      1.5rem;   /* 24px */
    --fs-xx:     2.25rem;  /* 36px */
    --fs-xxx:    3rem;     /* 48px */
    --fs-jumbo:  4rem;     /* 64px */

    --actions: 1fr;
    --solution-name: 2fr;
    --supplier-name: 2fr;
    --rating: 0.8fr;
    --price: 0.8fr;
    --brief_description: 3fr;
    --description: 3fr;
    --category: 2fr;
    --undefined: 1fr;
    --address: 1.5fr;
    --distance: 0.8fr;
    --id: 0.5fr;
    --direction: 0.6fr;
    --select: 0.8fr;
    --message-sender: 1.0fr;
    --message-recipient: 1.0fr;
    --message-subject: 1.0fr;
    --created: 1.0fr;
    --active: 0.5fr;
    --db_pid:  0.5fr;
    --db_user: 0.5fr;
    --db_state: 0.5fr;
    --db_wait_type: 0.5fr;
    --db_event: 0.8fr;
    --db_query: 2.0fr;

    --tdr_no: 0.3fr;
    --tdr_reference: 1.0fr;
    --tdr_description: 2.0fr;
    --tdr_part_number: 1.0fr;
    --tdr_brand: 1.0fr;
    --tdr_model: 1.0fr;
    --tdr-qty: 0.5fr;
    --tdr_uom: 0.3fr;
    --tdr_due_by: 1.0fr;
    --tdr_optional: 0.6fr;
    --tdr_tax_notes: 2.0fr;
    --tdr-actions: 1.0fr;
    --tdr-title: 2.0fr;
    --tdr-type: 2.0fr;
    --tdr-total-price: 1.0fr;
    --tdr-status: 1.0fr;
    --tdr-lines: 0.5fr;
    --tdr-submitted_at: 1.0fr;
    --tdr-updated_at: 1.0fr;
    --tdr-opens_at: 1.0fr;
    --tdr-closes_at: 1.0fr;
    --tdr-created: 1.0fr;

    --time-weekday: 0.8fr;
    --time-start_time: 1.0fr;
    --time-end_time: 1.0fr;
    --time-time_start_end: 1.0fr;
    --time-label: 1.5fr;
    --time-actions: 1.0fr;

    --time-date: 0.8fr;
    --time-reason: 2.0fr;
    --time-ocassion: 2.0fr;
    --time-hours: 2.0fr;

    --category_name: 2.0fr;
    --category_family: 4.0fr;

    --category_back_to_trunk: 0.3fr;
    --category_back_to_parent: 0.3fr;
    --category_fwd_to_children: 0.3fr;
    --category_industries: 1.0fr;
    --category_location: 1.0fr;

    --industry_id: 0.5fr;
    --industry_name: 1.5fr;
    --industry_classification: 1.5fr;
    --industry_description: 2.0fr;

    --product_id: 0.5fr;
    --product_name: 1.5fr;
    --product_type: 1.5fr;
    --parameter_set: 1.5fr;

    --parameter_id: 0.5fr;
    --parameter_name: 1.5fr;
    --parameter_description: 2.0fr;
    --parameter_version: 0.5fr;

    --sup_name: 2.0fr;
    --sup_id: 0.5fr;
    --sup_email: 1.0fr;
    --sup_status: 0.5fr;
    --sup_actions: 1.0fr;

    --sup_mbr_username: 1.0fr;
    --sup_mbr_email: 1.0fr;
    --sup_mbr_role: 0.5fr;
    --sup_mbr_status: 0.5fr;
    --sup_mbr_joined: 0.5fr;
    --sup_mbr_actions: 1.5fr;

    --sup_list_name:    2.0fr;
    --sup_list_solns:   0.6fr;
    --sup_list_address: 2.0fr;
    --sup_list_sub_loc: 2.0fr;
    --sup_list_id:      0.6fr;
    --sup_list_dist:    0.5fr;
    --sup_list_actions: 0.7fr;

    --cache_key: 3.0fr;
    --cache_ttl: 0.5fr;
    --cache_type: 0.5fr;
    --cache_bytes: 0.5fr;
    --cache_actions: 1.0fr;

    /*grid-2-2-2-1-2-col*/
    --realestate_search_name: 2.0fr;
    --realestate_category: 1.0fr;
    --realestate_sale_type: 0.8fr;
    --realestate_location: 1.5fr;
    --realestate_price_range: 1.0fr;
    --realestate_actions: 1.5fr;

    /*grid-1-1-1-2-2-col*/
    --realestate_listing_name: 2.0fr;
    --realestate_buyer_context: 2.5fr;
    --realestate_seller_brief_desc: 2.5fr;

    /* Visual Impacts (vi) */
    --realestate_vi_type:     1.0fr;
    --realestate_vi_distance: 1.0fr;
    --realestate_vi_severity: 1.0fr;
    --realestate_vi_notes:    3.0fr;

    /* Noise Sources (ns) */
    --realestate_ns_type:     1.0fr;
    --realestate_ns_distance: 1.0fr;
    --realestate_ns_pattern:  1.0fr;
    --realestate_ns_severity: 1.0fr;
    --realestate_ns_notes:    3.0fr;


    --alert_description: 2.0fr;
    --alert_created: 1.0fr;
    --alert_status: 1.0fr;
    --alert_actions: 1.3fr;

    --alert_label: 1.0fr;
    --alert_field: 4.0fr;

    --contact_id: 0.5fr;
    --contact_status: 0.6fr;
    --contact_created_at: 1.0fr;
    --contact_email: 1.0fr;
    --contact_subject: 2.0fr;
    --contact_channel: 1.0fr;
    --contact_contact_type: 1.0fr;
    --contact_description: 2.0fr;
    --contact_case_count: 0.3fr;
    --contact_open_cases: 0.3fr;
    --contact_closed_cases: 0.3fr;
    --contact_case_notes_count: 0.3fr;
    --contact_open_notes: 0.3fr;
    --contact_closed_notes: 0.3fr;
    --contact_check_box: 0.6fr;

    --debug_check: 2.0fr;
    --debug_result: 1.0fr;
    --debug_detail: 3.0fr;


    --community_notices_title: 1.5fr;
    --community_notices_pk: 0.5fr;
    --community_notices_owner: 1.0fr;
    --community_notices_community: 1.0fr;
    --community_notices_type: 0.7fr;
    --community_notices_moderation: 0.7fr;
    --community_notices_workflow: 0.7fr;
    --community_notices_active: 0.5fr;
    --community_notices_status: 0.7fr;
    --community_notices_starts: 1.0fr;
    --community_notices_expires: 1.0fr;
    --community_notices_updated: 1.0fr;
    --community_notices_actions: 1.5fr;

    --community_notices_card_image: 0.30fr;
    --community_notices_card_summary: 0.70fr;


    --supplier_descriptors_descriptor: 3.0fr;
    --supplier_descriptors_id: 0.5fr;
    --supplier_descriptors_actions: 1.0fr;

   --supplier_registration_supplier: 1.5fr;
   --supplier_registration_registration: 0.8fr;
   --supplier_registration_applicant: 2.0fr;
   --supplier_registration_registration_status: 1.5fr;
   --supplier_registration_supplier_status: 1.5fr;
   --supplier_registration_submitted: 1.5fr;
   --supplier_registration_reviewer: 1.5fr;
   --supplier_registration_updated: 1.5fr;

   --supplier_registration_workflow_date: 1.0fr;
   --supplier_registration_workflow_action: 1.5fr;
   --supplier_registration_workflow_change: 2.0fr;
   --supplier_registration_workflow_user: 1.0fr;
   --supplier_registration_workflow_note: 1.5fr;


    --my-id: #f44336; /* red */
    --my-name: #a0e11d; /* pale green */
    --my-address: #ddffff; /* pale blue */
    --my-rating: #ddffff; /* pale blue */
    --my-type: #ffffcc; /* pale yellow */
    --my-sub-type: #ffeb3b; /* yellow */
    --my-distance: #f1f1f1; /* pale light grey */
    --my-price: #ffdddd; /* pale red */
    --my-sub-location: #f0e68c; /* pale khaki */

    --text-muted: #666;
    --border: #eee;
}

.supplier_registration_review_list_view {
    grid-template-columns:
            var(--supplier_registration_supplier)
            var(--supplier_registration_registration)
            var(--supplier_registration_applicant)
            var(--supplier_registration_registration_status)
            var(--supplier_registration_supplier_status)
            var(--supplier_registration_submitted)
            var(--supplier_registration_reviewer)
            var(--supplier_registration_updated);
}

.supplier_registration_workflow_history_view {
    grid-template-columns:
            var(--supplier_registration_workflow_date)
            var(--supplier_registration_workflow_action)
            var(--supplier_registration_workflow_change)
            var(--supplier_registration_workflow_user)
            var(--supplier_registration_workflow_note);
}

.supplier_descriptors_list_view {
    grid-template-columns: var(--supplier_descriptors_descriptor) var(--supplier_descriptors_id) var(--supplier_descriptors_actions);
}

.community_notices_card_summary_view {
    grid-template-columns: var(--community_notices_card_image) var(--community_notices_card_summary);
}

.community_notices_user_listings_list_view {
    grid-template-columns: var(--community_notices_title) var(--community_notices_pk) var(--community_notices_type) var(--community_notices_status) var(--community_notices_expires) var(--community_notices_updated) var(--community_notices_actions);
}

.community_notices_moderation_list_view {
    /*grid-template-columns: var(--community_notices_title) var(--community_notices_owner) var(--community_notices_type) var(--community_notices_moderation) var(--community_notices_workflow) var(--community_notices_active) var(--community_notices_starts) var(--community_notices_expires) var(--community_notices_updated) var(--community_notices_actions);*/
    /*grid-template-columns: var(--community_notices_title) var(--community_notices_owner) var(--community_notices_community) var(--community_notices_type) var(--community_notices_active) var(--community_notices_starts) var(--community_notices_expires) var(--community_notices_updated) var(--community_notices_actions);*/
    grid-template-columns: var(--community_notices_title) var(--community_notices_pk) var(--community_notices_owner) var(--community_notices_community) var(--community_notices_type) var(--community_notices_active) var(--community_notices_starts) var(--community_notices_expires) var(--community_notices_updated);
}

.realestate_buyer_search_list_view {
    grid-template-columns: var(--realestate_search_name) var(--realestate_category) var(--realestate_location) var(--realestate_price_range) var(--realestate_actions);
}

.realestate_seller_listings_list_view {
    grid-template-columns: var(--realestate_listing_name) var(--realestate_location) var(--realestate_category) var(--realestate_seller_brief_desc) var(--realestate_actions);
}

.realestate_buyer_matched_listing_view {
    grid-template-columns: var(--realestate_listing_name) var(--realestate_category) var(--realestate_location) var(--realestate_price_range) var(--realestate_seller_brief_desc);
}

.realestate_seller_matched_search_view {
    grid-template-columns: var(--realestate_listing_name) var(--realestate_category) var(--realestate_location) var(--realestate_price_range) var(--realestate_buyer_context);
}

.realestate_visual_impacts_summary_view {
    grid-template-columns: var(--realestate_vi_type) var(--realestate_vi_distance) var(--realestate_vi_severity) var(--realestate_vi_notes);
}

.realestate_noise_sources_summary_view {
    grid-template-columns: var(--realestate_ns_type) var(--realestate_ns_distance) var(--realestate_ns_pattern) var(--realestate_ns_severity) var(--realestate_ns_notes);
}


.alerts_inbox_list_view {
    grid-template-columns: var(--alert_description) var(--alert_created) var(--alert_status) var(--alert_actions);
}

.alerts_inbox_filters {
    grid-template-columns: var(--alert_label) var(--alert_field);
}

/* Status badge */
/* Small badge (unique namespace to avoid conflicts) */
/*.my-small-badge {*/
/*  display: inline-block;*/
/*  padding: 0.12rem 0.5rem;*/
/*  border-radius: 999px;*/
/*  font-weight: 700;*/
/*  line-height: 1.2;*/
/*  border: 2px solid transparent;*/

/*  !* Force baseline legibility regardless of surrounding styles *!*/
/*  background: #ffffff;*/
/*  color: #111827;*/
/*}*/


/* Notice Formats */
/*
    [ image ]   [ TITLE
                  META (label/value grid)
                  ACTIONS (buttons)
                ]
 */
.notice-meta {
  display: grid;
  grid-template-columns: 150px 1fr; /* fixed label width */
  gap: 0.3rem 0.8rem;
  align-items: start;
}

.notice-title {
  margin: 0 0 0.3rem 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.meta-label {
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}

.meta-label::after {
  content: ":";
}

.meta-value {
  min-width: 0;
}

.notice-actions {
  margin-top: 0.6rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* EoF Notice Format */


/* Badge - originally developed for Contacts */
.my-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;

  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;

  color: #111;
  background: #eee;

  border: 1px solid transparent;

  margin-right: 0.35rem;
  margin-bottom: 0.15rem;
  white-space: nowrap;
}

/* lifecycle */

.my-badge--state-active {
  background: #dff6e8;
  border-color: #b7e4c7;
}

.my-badge--state-inactive {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* operational status */

.my-status,
.my-hover-status:hover {
    color:#000!important;
    background-color:#f1f1f1!important
}

.my-badge--status-open {
  background: #e0f2fe;
  border-color: #bae6fd;
}

.my-badge--status-closed {
  background: #fef3c7;
  border-color: #fde68a;
}

/* workflow */

.my-badge--wf-draft {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.my-badge--wf-live {
  background: #dcfce7;
  border-color: #86efac;
}

.my-badge--wf-under-offer {
  background: #fef9c3;
  border-color: #fde047;
}

.my-badge--wf-withdrawn {
  background: #fee2e2;
  border-color: #fecaca;
}

/* semantic */

.my-badge--success {
  background: #dcfce7;
  border-color: #86efac;
}

.my-badge--warning {
  background: #fef3c7;
  border-color: #fde68a;
}

.my-badge--danger {
  background: #fee2e2;
  border-color: #fecaca;
}

.my-badge--info {
  background: #e0f2fe;
  border-color: #bae6fd;
}

.table-data-cell .my-badge {
  margin-top: 2px;
}

/* EoF Badge ------------------------------- */


/* base badge */
.my-small-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.15rem .5rem;
  font-size:.78rem;
  line-height:1.2;
  font-weight:600;
  border:1px solid transparent;
  user-select:none;
  white-space:nowrap;
}

/* If your project has aggressive global rules, uncomment this line:
.my-small-badge { color: #111827 !important; }
*/

.my-small-badge--wf{
  border-radius:999px; /* pill */
}

/* Workflow variants (scoped under your component) */
.my-small-badge.my-small-badge--wf-draft { background: #e5e7eb; border-color: #111827; color: #111827; }
.my-small-badge.my-small-badge--wf-live { background: #065f46; border-color: #065f46; color: #ffffff; }
.my-small-badge.my-small-badge--wf-under-offer { background: #92400e; border-color: #92400e; color: #ffffff; }
.my-small-badge.my-small-badge--wf-withdrawn { background: #374151; border-color: #374151; color: #ffffff; }
.my-small-badge.my-small-badge--wf-sold { background: #1d4ed8; border-color: #1d4ed8; color: #ffffff; }
.my-small-badge.my-small-badge--wf-expired { background: #991b1b; border-color: #991b1b; color: #ffffff; }
.my-small-badge.my-small-badge--wf-archived { background: #4b5563; border-color: #4b5563; color: #ffffff; }


/* lifecycle style: more rectangular */
.my-small-badge--lc{
  border-radius:.25rem; /* rectangular-ish */
}

/* suggested lifecycle colors */
.my-small-badge--lc-available { background:#e7f5ff; color:#0b3d91; border-color:#b6e0fe; }
.my-small-badge--lc-archived  { background:#f1f3f5; color:#343a40; border-color:#dee2e6; }
.my-small-badge--lc-deleted   { background:#fff0f0; color:#c92a2a; border-color:#ffa8a8; }

/* Font Sizes */

.my-tiny      { font-size: var(--fs-tiny); }
.my-small     { font-size: var(--fs-small); }
.my-medium    { font-size: var(--fs-medium); }
.my-large     { font-size: var(--fs-large); }
.my-xlarge    { font-size: var(--fs-x); }
.my-xxlarge   { font-size: var(--fs-xx); }
.my-xxxlarge  { font-size: var(--fs-xxx); }
.my-jumbo     { font-size: var(--fs-jumbo); }

.cache_debug_view {
    display: grid;
    grid-template-columns: var(--cache_key) var(--cache_ttl) var(--cache_type) var(--cache_bytes) var(--cache_actions);
}

.debug_service_tier_debug_view {
    grid-template-columns: var(--debug_check) var(--debug_result) var(--debug_detail);
}

.supplier_list_view {
    grid-template-columns: var(--sup_name) var(--sup_id) var(--sup_status) var(--sup_actions);
}

.supplier_member_list_view {
    grid-template-columns: var(--sup_mbr_username) var(--sup_mbr_email) var(--sup_mbr_role) var(--sup_mbr_status) var(--sup_mbr_joined) var(--sup_mbr_actions);
}

.supplier_list_for_crud_buyer {
    grid-template-columns: var(--sup_list_name) var(--sup_list_solns) var(--sup_list_address) var(--sup_list_sub_loc) var(--sup_list_dist);
}

.supplier_list_for_crud_staff {
    grid-template-columns: var(--sup_list_name) var(--sup_list_solns) var(--sup_list_address) var(--sup_list_sub_loc) var(--sup_list_id) var(--sup_list_dist) var(--sup_list_actions);
}

.parameter_set_list_view {
    grid-template-columns: var(--parameter_id) var(--parameter_name) var(--parameter_description) var(--parameter_version) var(--actions);
}

.product_list_view {
    grid-template-columns: var(--product_id) var(--product_name) var(--product_type) var(--parameter_set) var(--actions);
}

.product_type_list_view {
    grid-template-columns: var(--product_id) var(--product_name) var(--actions);
}

.industry_list_view {
    grid-template-columns: var(--industry_id) var(--industry_name) var(--industry_classification) var(--industry_description) var(--actions);
}

.industry_classification_list_view {
    grid-template-columns: var(--industry_id) var(--industry_classification) var(--industry_description) var(--actions);
}

.weekly-opening_hours_view {
    /*display: grid;*/
    grid-template-columns: var(--time-weekday) var(--time-hours)  var(--time-reason);
    /*gap: 1rem;*/
}

.holiday_special_hours_view {
    /*display: grid;*/
    grid-template-columns: var(--time-date) var(--time-ocassion)  var(--time-hours);
    /*gap: 1rem;*/
}

.special_hours_view {
    /*display: grid;*/
    grid-template-columns: var(--time-date) var(--time-time_start_end);
    /*gap: 1rem;*/
}

.weekly-opening_hours_list {
    /*display: grid;*/
    grid-template-columns: var(--time-weekday) var(--time-start_time) var(--time-end_time) var(--time-label) var(--time-actions);
    /*gap: 1rem;*/
}

.full-day-closures {
    /*display: grid;*/
    grid-template-columns: var(--time-date) var(--time-reason) var(--time-actions);
    /*gap: 1rem;*/
}

.holiday-hours {
    /*display: grid;*/
    grid-template-columns: var(--time-date) var(--time-start_time) var(--time-end_time) var(--time-label) var(--time-actions);
    /*gap: 1rem;*/
}

.tender-list {
    grid-template-columns: var(--tdr_reference) var(--tdr-title) var(--tdr-status) var(--tdr-lines) var(--tdr-opens_at) var(--tdr-closes_at) var(--tdr-actions);
}

.tender-search-status {
    grid-template-columns: var(--tdr-title) var(--tdr-type) var(--tdr-status) var(--tdr-opens_at) var(--tdr-closes_at) var(--tdr-created);
}

.tender-search {
    grid-template-columns: var(--tdr-title) var(--tdr-type) var(--tdr-opens_at) var(--tdr-closes_at) var(--tdr-created);
}

.tender-bid {
    /*display: grid;*/
    grid-template-columns: var(--tdr_reference) var(--tdr-title) var(--tdr-status) var(--tdr-total-price) var(--tdr-closes_at) var(--tdr-updated_at) var(--tdr-submitted_at) var(--tdr-actions);
    /*gap: 1rem;*/
}

.tender-line-items {
    /*display: grid;*/
    grid-template-columns: var(--tdr_no) var(--tdr_description) var(--tdr_part_number) var(--tdr_brand) var(--tdr_model) var(--tdr-qty) var(--tdr_uom) var(--tdr_due_by) var(--tdr_optional) var(--tdr-actions);
    /*gap: 1rem;*/
}

.tender-line-items-readonly {
    /*display: grid;*/
    grid-template-columns: var(--tdr_no) var(--tdr_description) var(--tdr_part_number) var(--tdr_brand) var(--tdr_model) var(--tdr-qty) var(--tdr_uom) var(--tdr_due_by) var(--tdr_optional);
    /*gap: 1rem;*/
}

.grid-compare-solutions {
  /*display: grid;*/
  grid-template-columns: var(--solution-name) var(--supplier-name) var(--rating) var(--price) var(--brief_description) var(--category) var(--distance);
  /*gap: 1rem;*/
}

.grid-list-solutions {
  /*display: grid;*/
  grid-template-columns: var(--solution-name) var(--supplier-name) var(--rating) var(--price) var(--category) var(--address) var(--distance) var(--select);
  /*gap: 1rem;*/
}

.grid-list-solutions_admin {
  /*display: grid;*/
  grid-template-columns: var(--id) var(--solution-name) var(--supplier-name) var(--rating) var(--price) var(--category) var(--address) var(--distance) var(--select);
  /*gap: 1rem;*/
}

.grid-list-contacts {
  /*display: grid;*/
  grid-template-columns: var(--contact_id) var(--contact_status) var(--contact_created_at) var(--contact_email) var(--contact_case_count) var(--contact_open_cases) var(--contact_closed_cases) var(--contact_case_notes_count) var(--contact_open_notes) var(--contact_closed_notes)var(--contact_subject) var(--contact_channel) var(--contact_contact_type) var(--contact_description) var(--contact_check_box);
  /*gap: 1rem;*/
}

.grid-list-contacts_user {
  /*display: grid;*/
  grid-template-columns: var(--contact_id) var(--contact_status) var(--contact_created_at) var(--contact_subject) var(--contact_channel) var(--contact_contact_type) var(--contact_description);
  /*gap: 1rem;*/
}

.grid-list-messages_admin {
  /*display: grid;*/
  grid-template-columns: var(--id) var(--direction) var(--message-sender) var(--message-recipient) var(--message-subject) var(--created) var(--active) var(--actions);
  /*gap: 1rem;*/
}

.grid-db-admin-dashboard {
  /*display: grid;*/
  grid-template-columns: var(--db_pid) var(--db_user) var(--db_state) var(--db_wait_type) var(--db_event) var(--db_query) var(--actions);
  /*gap: 1rem;*/
}

.grid-favourite-categories-admin {
  grid-template-columns: var(--id) var(--category_name) var(--category_family);
}

.grid-favourite-categories {
  grid-template-columns: var(--category_name) var(--category_family);
}

.grid-industry-categories-admin {
  grid-template-columns: var(--id) var(--category_name) var(--category_family);
}

.grid-industry-categories {
  grid-template-columns: var(--category_name) var(--category_family);
}

.grid-searched-categories {
  grid-template-columns: var(--category_name) var(--category_family);
}

.grid-category-navigation {
  grid-template-columns: var(--category_back_to_trunk) var(--category_back_to_parent) var(--category_name) var(--category_fwd_to_children) var(--category_industries);
}

.grid-category-navigation-admin {
  grid-template-columns: var(--category_back_to_trunk) var(--category_back_to_parent) var(--category_name) var(--category_fwd_to_children) var(--category_industries) var(--actions);
}

.grid-category-location {
  grid-template-columns: var(--category_location) var(--category_industries);
}




.grid-2-1-1-2-1-1-1-1-1-col {
    grid-template-columns: 2fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-2-1-1-2-1-1-1-1-col {
    grid-template-columns: 2fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr;
}

.grid-2-2-1-1-1-1-1-col {
    grid-template-columns: 2fr 2fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-1-1-1-1-1-1-col {
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
}

.grid-1-1-1-1-1-1-1-col {
    width: 100%;
    grid-template-columns: repeat(7, 1fr);
}

.grid-2-1-2-2-1-1-col {
    /*width: 100%;*/
    grid-template-columns: 2fr 1fr 2fr 2fr 1fr 1fr;
}

.grid-2-1-2-2-1-col {
    /*width: 100%;*/
    grid-template-columns: 2fr 1fr 2fr 2fr 1fr;
}

.grid-1-1-1-1-2-col {
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* Specific grid layout: 1fr 1fr 1fr 1fr 2fr */
/* Grid Container for 1-1-1-1-2 layout */
/* Ensure grid container adapts to the parent element's width */
/* See also static/js/resizable-grid.js */

.grid-container-1-1-1-1-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr; /* Define initial column widths */
    gap: 1rem; /* Space between grid items */
    padding: 1rem; /* Padding around the grid */
    border: 1px solid #ccc; /* Optional border */
    border-radius: 8px; /* Rounded corners */
    background-color: #f9f9f9; /* Background color */
    transition: grid-template-columns 0.1s ease-in-out; /* Smooth resizing */
    overflow-x: auto; /* Allow horizontal scrolling for overflow */
    width: 100%; /* Ensure the grid stretches to fill the container */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Header Section */
.grid-header-1-1-1-1-2 {
    display: contents; /* Allow children to participate in the grid layout */
}

/* Header Cells */
.grid-header-1-1-1-1-2 div {
    position: relative;
    background-color: #f4f4f4;
    padding: 10px;
    border: 1px solid #ccc;
    font-weight: bold;
    text-align: left;
    cursor: default; /* Default cursor for headers */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add "..." for overflowing text */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Resizers for Headers */
.grid-header-1-1-1-1-2 .resizer {
    position: absolute;
    right: 0;
    top: 0;
    width: 5px; /* Width of the resizer */
    height: 100%;
    cursor: col-resize; /* Cursor for resizing */
    user-select: none;
    background: transparent; /* Invisible by default */
}

/* Highlight Resizer on Hover */
.grid-header-1-1-1-1-2 div:hover .resizer {
    background: rgba(0, 0, 0, 0.1); /* Highlight for better UX */
}

/* Data Rows */
.grid-row-1-1-1-1-2 {
    display: contents; /* Follow the grid layout */
}

/* Data Cells */
.grid-row-1-1-1-1-2 div {
    border: 1px solid #ccc; /* Optional cell borders */
    padding: 8px;
    color: #555;
    text-align: left;
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add "..." for overflowing text */
    box-sizing: border-box; /* Ensure alignment with headers */
}

/* Ensure Columns Always Fit Within the Container */
.grid-container-1-1-1-1-2 {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Flexible columns */
}

/* Force Headers and Rows to Align Dynamically */
.grid-header-1-1-1-1-2,
.grid-row-1-1-1-1-2 {
    align-items: center; /* Vertical alignment for better presentation */
}

/* Responsive Sizing for Smaller Screens */
@media (max-width: 768px) {
    .grid-container-1-1-1-1-2 {
        grid-template-columns: 1fr; /* Stack columns for smaller screens */
    }
}

/* ----------------------------------------------------------------------------------------------------------------- */
    .grid-1-1-1-col-scrollable {
        grid-template-columns: 1fr 1fr 1fr;
        max-height: 500px;
        overflow-y: auto;
    }

    .grid-1-1-2-2-col-scrollable {
        grid-template-columns: 1fr 1fr 2fr 2fr;
        max-height: 500px;
        overflow-y: auto;
    }

    .grid-1-1-1-2-2-col {
        grid-template-columns: 1fr 1fr 1fr 2fr 2fr;
    }

    .grid-1-1-1-2-2-col-scrollable {
        grid-template-columns: 1fr 1fr 1fr 2fr 2fr;
        max-height: 500px;
        overflow-y: auto;
    }

    .grid-test {
        grid-template-columns: 1fr 1fr 1fr 2fr 2fr;
    }

    /* -------------------- */
    .grid-regular {
        gap: 1rem; /* Regular gap */
    }

    .grid-compact {
        gap: 0.2rem; /* Smaller gap for compact layout */
        padding: 0.2rem; /* Padding for the grid */
    }

/* ================================================================================================================= */
/* ================================================================================================================= */
/* Scrollable container for the entire table */
.table-container {
    width: 100%;
    margin: 20px auto;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 4px; /* Rounded corners */
    max-height: 1500px;      /* Limit vertical height to force scrolling */
    overflow: auto;         /* Enable scrolling when content overflows */
    box-sizing: border-box;
}

.table-container-job-view {
    max-height: 1000px; /* New max-height for the view variant */
}

.table-container-realestate-view {
    max-height: 1000px; /* New max-height for the view variant */
}

.table-container-list-solutions-view {
    max-height: 1000px; /* New max-height for the view variant */
}

.table-container-favourite-categories-view {
    max-height: 1000px; /* New max-height for the view variant */
}

.table-container-industry-categories-view {
    max-height: 1000px; /* New max-height for the view variant */
}

.table-container-searched-categories-view {
    max-height: 1000px; /* New max-height for the view variant */
}

/* The sticky header wrapper */
.table-sticky-header {
    position: sticky;
    top: 0;
    z-index: 3;             /* Higher z-index ensures it appears above data rows */
    background: #e0e0e0;     /* Background color to cover underlying rows when scrolling */
}

/* Grid layout for the header row (6 equal columns) */
.table-header-row {
    display: grid;
    /*grid-template-columns: repeat(6, 1fr);*/
    width: 100%;
    box-sizing: border-box;
}

.table-row {
    display: grid;
    width: 100%;
    box-sizing: border-box;
}

/* Styling for header cells */
.table-row-header-cell {
    padding: 10px;
    border: 1px solid #ccc;
    font-weight: bold;
    text-align: left;
    white-space: normal;  /* Allow text to wrap */
    overflow-wrap: break-word;   /* Break long words if needed */
    word-break: break-all;
}

.table-col-header-cell {
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #e0e0e0;
    font-weight: bold;
    text-align: left;
    white-space: normal;  /* Allow text to wrap */
    overflow-wrap: break-word;   /* Break long words if needed */
    word-break: break-all;
}

/* Container for the data rows */
.table-data-container {
    display: grid;
    grid-auto-rows: minmax(40px, auto);
}

/* Each data row uses the same six-column layout as the header */
.table-data-row {
    display: grid;
    /*grid-template-columns: repeat(6, 1fr);*/
    cursor: pointer;    /* Indicate that rows are clickable */
    transition: background-color 0.2s ease-in-out;
}

/* Hover effect for data rows */
.table-data-row:hover {
    background-color: #dcdcdc;
}

/* Styling for individual data cells */
.table-data-cell {
    padding: 10px;
    border: 1px solid #ccc;
    /*white-space: nowrap;*/
    overflow: hidden;
    /*text-overflow: ellipsis;*/
}
/* ================================================================================================================= */
/*
 * Rich text saved by editors such as Jodit.
 *
 * These rules are deliberately scoped to .rich-text-content so that
 * ordinary lists, headings and tables elsewhere in Poikit are unaffected.
 */

.rich-text-content {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.rich-text-content > :first-child {
    margin-top: 0;
}

.rich-text-content > :last-child {
    margin-bottom: 0;
}

.rich-text-content p {
    margin: 0 0 0.75rem;
}

.rich-text-content h1,
.rich-text-content h2,
.rich-text-content h3,
.rich-text-content h4,
.rich-text-content h5,
.rich-text-content h6 {
    display: block;
    margin: 1rem 0 0.5rem;
    font-weight: 700;
    line-height: 1.25;
}

.rich-text-content h1 {
    font-size: 1.8rem;
}

.rich-text-content h2 {
    font-size: 1.5rem;
}

.rich-text-content h3 {
    font-size: 1.3rem;
}

.rich-text-content h4,
.rich-text-content h5,
.rich-text-content h6 {
    font-size: 1.1rem;
}

.rich-text-content ul {
    margin: 0.5rem 0 0.75rem;
    padding-left: 1.75rem;
    list-style: disc outside;
}

.rich-text-content ol {
    margin: 0.5rem 0 0.75rem;
    padding-left: 1.75rem;
    list-style: decimal outside;
}

.rich-text-content li {
    display: list-item;
    margin: 0.2rem 0;
}

.rich-text-content blockquote {
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    border-left: 4px solid #999;
}

.rich-text-content a {
    text-decoration: underline;
}

.rich-text-content table {
    width: 100%;
    margin: 0.75rem 0;
    border-collapse: collapse;
}

.rich-text-content th,
.rich-text-content td {
    padding: 0.4rem;
    border: 1px solid #aaa;
    text-align: left;
}

/* ================================================================================================================= */
/* ================================================================================================================= */
/* Scrollable 'Table' using Grid */

    /*.table-container {*/
    /*  width: 100%;*/
    /*  margin: 20px auto;*/
    /*  border: 1px solid #ccc;*/
    /*  overflow: auto; !* Allow horizontal scrolling *!*/
    /*  max-height: 500px; !* Set a max height to make it scroll vertically *!*/
    /*}*/
    .grid-table {
      display: grid;
      grid-template-columns: 2fr 1fr 2fr 2fr 1fr 1fr;
      width: 100%;
    }
    .grid-table-no-cols {
      display: grid;
      /*grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;*/
      /*border-collapse: collapse;*/
      width: 100%;
    }
    .grid-table-header {
      background-color: #e0e0e0;
      font-weight: bold;
      padding: 10px;
      border: 1px solid #ccc;
      position: sticky;
      top: 0;            /* Sticks to the top during vertical scrolling */
      z-index: 2;        /* Ensure it appears above other content */
    }

    .grid-cell {
      padding: 10px;
      border: 1px solid #ccc;
      white-space: nowrap;      /* Prevent wrapping if desired */
      overflow: hidden;
      text-overflow: ellipsis;  /* Use ellipsis for overflowing text */
    }

    .grid-cell-no-border {
      padding: 10px;
      /*border: 1px solid #ccc;*/
      white-space: nowrap;      /* Prevent wrapping if desired */
      overflow: hidden;
      text-overflow: ellipsis;  /* Use ellipsis for overflowing text */
    }

        /* Data rows container: using grid layout to stack rows */
    .data-container {
      display: grid;
      grid-auto-rows: minmax(40px, auto);
    }

    /* Each data row: a grid matching the header's column layout */
    .data-row {
      display: grid;
      /*grid-template-columns: repeat(6, 1fr);*/
      grid-template-columns: 2fr 1fr 2fr 2fr 1fr 1fr;

      cursor: pointer;   /* Indicate that the row is clickable */
      transition: background-color 0.2s ease-in-out;
    }

    .data-row:hover {
      background-color: #dcdcdc;
    }

    /* --------------------------------------------------------------------------------------------------------------*/
    /* Base input/select/textarea styling (your "form-control") */
    .my-form-control,
    .form-control {
      width: 100%;
      box-sizing: border-box;
      padding: 0.45rem 0.6rem;
      border: 1px solid #bbb;
      border-radius: 6px;
      background: #fff;
      color: #111;
      font-size: 1rem;
      line-height: 1.25rem;
    }

    .my-form-control:focus,
    .form-control:focus {
      outline: none;
      border-color: #666;
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
    }

    /* Multi-selects are easier to read with slightly less padding */
    select[multiple].my-form-control,
    select[multiple].form-control {
      padding: 0.25rem 0.4rem;
    }

    /* Checkbox layout helpers */
/* Ensure checkbox row aligns nicely */
.my-checkline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.my-checkline input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  align-self: center !important;
  position: relative;
  top: 1px; /* keep if needed; otherwise remove */
}

.my-checkline label {
  line-height: 1.2;
  margin: 0;
}

    .my-checkbox {
      width: 1.1rem;
      height: 1.1rem;
    }

    /* Errors */
    .form-field-error {
      margin-top: 0.25rem;
      font-size: 0.95rem;
      color: #a40000;
    }

    /* Optional: a subdued help text */
    .my-help {
      font-size: 0.9rem;
      opacity: 0.85;
    }

/*  Already defined in staticfiles/admin/css/forms.css  */
/*.form-row {*/
/*    margin-bottom: 1rem;*/
/*}*/

.my-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.form-row-label {
    display: block;
}

.form-row-label label {
    font-weight: 700;
}

.form-row-control {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
/* Decrecate to form-field-warnings */
.field-warnings {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff7e0;
  border: 1px solid #ffe1a3;
  color: #2a1f00;
  border-left: 6px solid #b26a00;
  list-style: none;
}

.form-field-warnings {
    margin: 6px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff7e0;
    border: 1px solid #ffe1a3;
    color: #2a1f00;
    border-left: 6px solid #b26a00;
    list-style: none;
}

.form-field-errors {
    margin: 6px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff1f1;
    border: 1px solid #f2b8b8;
    color: #7a1111;
    border-left: 6px solid #c62828;
    list-style: none;
}
    /* ================================================================================================================= */
    /* ----------------------------------------------------------------------------------------------------------------- */
    /* Custom 'table' styles using Grid */


    /*.grid-container-test > *:nth-child(2n) {*/
    /*    border-bottom: 1px solid #ccc; !* Border at the end of each logical row *!*/
    /*    grid-column: span 2; !* Ensure the border spans the full row *!*/
    /*}*/


    .grid-field {
        display: flex;
        flex-direction: column; /* Stack field and errors */
    }

    /*.grid-field input[type="checkbox"] {*/
    /*    margin: 0;             !* Remove any unwanted margins *!*/
    /*    align-self: center; !* If the container is flex, align the checkbox to the start *!*/
    /*}*/

    .grid-field-checkbox {
      display: flex;
      align-items: center;          /* vertically center the checkbox and any text */
      justify-content: flex-start;  /* align children to the left */
    }
    .grid-field-checkbox input[type="checkbox"] {
        margin-right: 8px; /* Space between checkbox and label */
    }

    .grid-field-checkbox label {
        text-align: left; /* Ensure label is left-aligned */
        margin-left: 0; /* Remove any margin that might affect alignment */
    }

    .grid-field.is-disabled {
      opacity: 0.65;
    }

    .grid-field.is-disabled input,
    .grid-field.is-disabled select,
    .grid-field.is-disabled textarea {
      cursor: not-allowed;
    }


    /* Individual row styling */
    .grid-row {
        display: contents; /* Prevent additional block behavior */
    }

    .grid-container-2-col {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Default to 2 columns for most rows */
        gap: 0.5rem; /* Spacing between grid items */
    }

/* Define a reusable grid layout */
/*.grid-layout {*/
/*    display: grid;*/
/*    !* For example, 5 equal-width columns *!*/
/*    grid-template-columns: repeat(5, 1fr);*/
/*    gap: 1rem; !* Optional: set gap between columns *!*/
/*}*/

/* You can also use auto-fit/auto-fill for a more responsive layout:*/
/*.grid-layout {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fit, minmax(200px, 0.5fr));*/
/*    gap: 0.0rem;*/
/*}*/

.grid-layout-page-view-count {
    display: grid;
    grid-template-columns: 180px 350px 120px 100px auto;
    /*grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); !* Flexible columns *!*/
    /*grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); !* Flexible columns *!*/

    gap: 0.0rem;
}


.grid-layout-visitor-count {
    display: grid;
    grid-template-columns: 180px 100px auto;
    /*grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); !* Flexible columns *!*/
    /*grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); !* Flexible columns *!*/

    gap: 0.0rem;
}


.grid-layout-registered-user-count {
    display: grid;
    grid-template-columns: 180px 120px 150px 120px 150px auto;

    gap: 0.0rem;
}


.grid-layout-user-logins-count {
    display: grid;
    grid-template-columns: 180px 120px 120px 120px 120px auto;

    gap: 0.0rem;
}


.grid-layout-supplier-industry-count {
    display: grid;
    grid-template-columns: 180px 300px 120px 180px auto;

    gap: 0.0rem;
}


.grid-layout-supplier-solution-category-count {
    display: grid;
    grid-template-columns: 180px 300px 120px auto;

    gap: 0.0rem;
}



.grid-row-captcha {
    align-items: flex-start;
}

.grid-field.captcha-field {
    max-width: 200px;
    overflow: hidden;
}


    /* Styling for Employer Logo */
    .employer-logo {
        width: 100%; /* Make images responsive */
        max-width: 150px; /* Limit maximum width */
        height: auto; /* Maintain aspect ratio */
        object-fit: contain; /* Ensure the images doesn't get stretched */
        border-radius: 50%; /* Optional: Makes the logo circular */
        margin: 0 auto; /* Center the images */
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .grid-container {
            grid-template-columns: 1fr; /* Switch to single-column layout on smaller screens */
        }

        .employer-logo {
            max-width: 120px; /* Adjust logo size for smaller screens */
        }

        .grid-header,
        .grid-label,
        .grid-value {
            border-right: none; /* Remove column borders in single-column mode */
        }
    }

    /* ----------------------------------------------------------------------------------------------------------------- */
    /* Key-Value Pair Styling */
    /*.key-value {*/
    /*    display: grid;*/
    /*    grid-template-columns: auto 1fr; !* Auto width for the key, flexible width for the value *!*/
    /*    gap: 0.5rem; !* Space between the key and the value *!*/
    /*    margin-bottom: 0.5rem; !* Space between rows of key-value pairs *!*/
    /*}*/

    .key-value {
        display: grid;
        grid-template-columns: 100px 1fr; /* Fixed width for keys, flexible for values */
        gap: 0.5rem; /* Space between key and value */
        margin-bottom: 0.5rem;
    }

    .key {
        font-weight: bold; /* Emphasize the key */
        text-align: right; /* Align keys to the right */
        white-space: nowrap; /* Prevent wrapping of key */
    }

    .value {
        text-align: left; /* Align values to the left */
    }

/* Banner ----------------------------------------------------------------------------------------------------------- */
    .banner {
        width: 100%;
        max-height: 400px;
        overflow: hidden;
    }
    .banner img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
/* ------------------------------------------------------------------------------------------------------------------ */
/* Image Gallery Styles */
/* XXX: object-fit: cover; - Keeps Ratio, Fills Box, Crops
*/
.thumbnail-image {
  /*max-width: 100px;*/
  /*max-height: 100px;*/
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.thumbnail-banner {
  /*max-width: 150px;*/
  /*max-height: 85px;*/
  width: 150px;
  height: 85px;
  object-fit: cover;
}

.image-compact {
    /*max-width: 100px;*/
    /*max-height: 100px;*/
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.image-small {
    /*max-width: 120px;*/
    /*max-height: 100px;*/
    width: 120px;
    height: 100px;
    object-fit: cover;
}

.image-medium {
    /*max-width: 240px;*/
    /*max-height: 140px;*/
    width: 240px;
    height: 140px;
    object-fit: cover;
}

.notice-card-image-small {
  width: 180px;
  max-width: 110%;
  height: 100px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.notice-card-image {
  width: 220px;
  max-width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}
/* ----------------------------------------------------------------------------------------------------------------- */

/* EXAMPLE */
/*<th>*/
/*    <a href="?ordering={% if ordering == 'name' %}-name{% else %}name{% endif %}" class="arrow {% if ordering == 'name' %}asc{% elif ordering == '-name' %}desc{% endif %}">*/
/*        Name*/
/*    </a>*/
/*</th>*/


.char-counter {
    display: block;
    float: none;
    font-size: 0.85em;
    color: #666;
    margin-top: 0.25rem;
    width: 100%;
    text-align: right;

}

.char-counter-warning {
    color: black;
    font-weight: bold;
}

.char-counter-error {
    color: var(--my-colour-error, #b00020);
    font-weight: 700;
}