/* new  */
/* global colors */
:root {
    --cs-blue: #b3d4fc;
}

nav, #mynav, #footer {
    background-color: var(--cs-blue) !important;
}

/*.csrounded{ */
/*    border-radius: 1em;*/
/*}*/


.csborderless{
    border: none !important;

}


.cscard {
    background-color: #eef0ee;
    border-radius: 1em;
    padding: 1em;
}

.cscardscroll {
    background-color: #eef0ee;
    border-radius: 1em;
    padding: 1em;
    overflow-x:scroll;
}

.csxscroll{overflow-x:scroll;}

.sensors {
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
    border-width:3px !important;

}



article.flashes {
    margin-bottom: 1em;
}

/* --- Definitive Flash Message Styles --- */

/* 1. The main list container */
.flashes {
    list-style-type: none;
    padding: 0;
    margin: 0.5em; /* Give the whole container some margin */
}

/* 2. The list item (<li>) - We turn this into a flex container */
.flashes li {
    display: flex;        /* THIS IS KEY: Makes the <li> a flexbox row */
    justify-content: flex-start; /* Aligns its content (the message) to the left */
    margin-bottom: 1em;   /* Space between messages */
}

/* 3. The message box itself (<div>) - This is what we style */
.flashes .flash-message {
    /* No display property needed here. It's a flex item. */
    padding: 0.75em 1.25em;
    /*border-radius: 5px;*/
    /* Other general styles */
}

/* 4. The category colors (These remain the same) */
.flashes .flash-message.flash-info {
    background-color: #e7f3fe;
    border: 1px solid #d0e8fc;
    color: #31708f;
}

.flashes .flash-message.flash-success {
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;
}

.flashes .flash-message.flash-danger,
.flashes .flash-message.flash-error {
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    color: #a94442;
}




.pushover_button {
    box-sizing: border-box !important;
    display: inline-block;
    background-color: #eee !important;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAycHgiIGhlaWdodD0iNjAycHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iNTcgNTcgNjAyIDYwMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1OC45NjQgNTguODg4KSIgb3BhY2l0eT0iLjkxIj48ZWxsaXBzZSB0cmFuc2Zvcm09Im1hdHJpeCgtLjY3NDU3IC43MzgyMSAtLjczODIxIC0uNjc0NTcgNTU2LjgzIDI0MS42MSkiIGN4PSIyMTYuMzEiIGN5PSIxNTIuMDgiIHJ4PSIyOTYuODYiIHJ5PSIyOTYuODYiIGZpbGw9IiMyNDlkZjEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLXdpZHRoPSIwIi8+PHBhdGggZD0ibTI4MC45NSAxNzIuNTFsNzQuNDgtOS44LTcyLjUyIDE2My42NmMxMi43NC0wLjk4IDI1LjIzMy01LjMwNyAzNy40OC0xMi45OCAxMi4yNTMtNy42OCAyMy41MjctMTcuMzE3IDMzLjgyLTI4LjkxIDEwLjI4Ny0xMS42IDE5LjE4Ny0yNC41MDMgMjYuNy0zOC43MSA3LjUxMy0xNC4yMTMgMTIuOTAzLTI4LjE4IDE2LjE3LTQxLjkgMS45Ni04LjQ5MyAyLjg2LTE2LjY2IDIuNy0yNC41LTAuMTY3LTcuODQtMi4yMS0xNC43LTYuMTMtMjAuNThzLTkuODgzLTEwLjYxNy0xNy44OS0xNC4yMWMtOC0zLjU5My0xOC44Ni01LjM5LTMyLjU4LTUuMzktMTYuMDA3IDAtMzEuNzcgMi42MTMtNDcuMjkgNy44NC0xNS41MTMgNS4yMjctMjkuODg3IDEyLjgyMy00My4xMiAyMi43OS0xMy4yMjcgOS45Ni0yNC43NCAyMi4zNzMtMzQuNTQgMzcuMjQtOS44IDE0Ljg2LTE2LjgyMyAzMS43NjMtMjEuMDcgNTAuNzEtMS42MzMgNi4yMDctMi42MTMgMTEuMTg3LTIuOTQgMTQuOTQtMC4zMjcgMy43Ni0wLjQwNyA2Ljg2My0wLjI0IDkuMzEgMC4xNiAyLjQ1MyAwLjQ4MyA0LjMzMyAwLjk3IDUuNjQgMC40OTMgMS4zMDcgMC45MDMgMi42MTMgMS4yMyAzLjkyLTE2LjY2IDAtMjguODMtMy4zNS0zNi41MS0xMC4wNS03LjY3My02LjY5My05LjU1LTE4LjM3LTUuNjMtMzUuMDMgMy45Mi0xNy4zMTMgMTIuODIzLTMzLjgxIDI2LjcxLTQ5LjQ5IDEzLjg4LTE1LjY4IDMwLjM3My0yOS40ODMgNDkuNDgtNDEuNDEgMTkuMTEzLTExLjkyIDQwLjAyLTIxLjM5IDYyLjcyLTI4LjQxIDIyLjcwNy03LjAyNyA0NC44NC0xMC41NCA2Ni40LTEwLjU0IDE4Ljk0NyAwIDM0Ljg3IDIuNjkzIDQ3Ljc3IDguMDggMTIuOTA3IDUuMzkzIDIyLjk1MyAxMi41IDMwLjE0IDIxLjMyczExLjY3NyAxOS4xMSAxMy40NyAzMC44N2MxLjggMTEuNzYgMS4yMyAyNC4wMS0xLjcxIDM2Ljc1LTMuNTkzIDE1LjM1My0xMC4zNzMgMzAuNzktMjAuMzQgNDYuMzEtOS45NiAxNS41MTMtMjIuNDUzIDI5LjU2LTM3LjQ4IDQyLjE0LTE1LjAyNyAxMi41NzMtMzIuMjYgMjIuNzgtNTEuNyAzMC42Mi0xOS40MzMgNy44NC00MC4wOTMgMTEuNzYtNjEuOTggMTEuNzZoLTIuNDVsLTYyLjIzIDEzOS42NWgtNzAuNTZsMTM4LjY3LTMxMS42NHoiIGZpbGw9IiNmZmYiIHN0eWxlPSJ3aGl0ZS1zcGFjZTpwcmUiLz48L2c+PC9zdmc+) 3px 3px no-repeat;
    background-size: 15px 15px;
    border-bottom: 2px solid rgba(22, 22, 22, 0.25) !important;
    border-right: 2px solid rgba(22, 22, 22, 0.25) !important;
    box-shadow: 0pt 2px 0pt rgba(255, 255, 255, 0.2) inset, 0pt 2px 0px rgba(0, 0, 0, 0.05) !important;
    border-radius: 3px !important;
    color: #333 !important;
    display: inline-block !important;
    font: 11px/18px "Helvetica Neue", Arial, sans-serif !important;
    font-weight: bold !important;
    cursor: pointer !important;
    height: 22px !important;
    padding: 1px 6px 20px 22px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    height: 22px !important;
}


.light_grey{background: rgb(195, 203, 217,0.4);}

.mid_grey{background: rgb(152, 162, 179,0.4);}



.sensors td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sensors th {
    /*background: darkblue;*/
    /*color: black;*/
}

.sensors td,
.sensors th {
    text-align: left;
    padding: 5px 10px;
}

.sensors tr:nth-child(even) {
    /*background: lightblue;*/
}


.hrmedium {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 2px;
}


/* A modern, clean style for all standard <hr> tags */
hr {
  border: none; /* Remove the default 3D-looking border */
  height: 2px;  /* Set a good default thickness */
  background-color: #dee2e6; /* Use Bootstrap's standard border color */
  opacity: 0.5; /* Make it slightly subtle */
  margin: 1.5rem 0; /* Give it some vertical breathing room */
}





hr.cs-hr { /* Use a prefix for custom rules */
  border: none;
  height: 2px; /* Set a default thickness */
  background-color: #ccc; /* A neutral grey */
  margin: 1rem 0; /* Bootstrap's default hr margin */
}

/* Create modifiers for thickness */
hr.cs-hr.thick {
  height: 4px;
}

hr.cs-hr.medium {
  height: 2px;
}



.opacity-0 {
  opacity:0!important;
}
.opacity-1 {
  opacity:0.2!important;
}
.opacity-2 {
  opacity:0.4!important;
}
.opacity-3 {
  opacity:0.6!important;
}
.opacity-4 {
  opacity:.8!important;
}
.opacity-5 {
  opacity:1!important;
}

/*  question bg's */

.question-blue{
       background-color: rgba(0, 123, 255, 0.15) !important;
}

.question-pass-green {
    background-color: rgba(40, 167, 69, 0.15) !important;
}

.question-fail-red {
    background-color: rgba(255, 1, 6, 0.15) !important;
}


/* Maybe even support hover opacity shifts */
.opacity-0h5 {
  opacity:0!important;
  transition: opacity .25s ease-in-out!important;
  -moz-transition: opacity .25s ease-in-out!important;
  -webkit-transition: opacity .25s ease-in-out!important;
}
.opacity-0h5:hover {
  opacity:1!important;
}




.custom-bg-warning_10  {
    background-color: rgba(255, 193, 7, 0.1); /* 0.5 for 50% opacity */
}



.test-env-banner {
    position: fixed; /* Or `sticky` if you prefer */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffc107; /* A bright, noticeable warning color like yellow/amber */
    color: #000;
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
    font-size: 14px;
    z-index: 2000; /* Ensures it's on top of everything else */
    border-bottom: 2px solid #e0a800;
    letter-spacing: 2px;
}


/* =================================================== */
/* Reusable Horizontal Form Layout Component           */
/* =================================================== */

/* 1. The main container for the layout */
.form-horizontal-layout .form-row {
    display: flex;
    /* Vertically center single-line items by default */
    align-items: center;
    margin-bottom: 1rem; /* Space between rows */
}

/*!* 2. The label style within this layout *!*/
/*.form-horizontal-layout .form-label {*/
/*    !* Instead of a fixed width, let's use Bootstrap's grid system *!*/
/*    !* for responsiveness. This rule is now for text alignment. *!*/
/*    text-align: right;*/
/*    font-weight: bold;*/
/*}*/

/* 3. A modifier for rows with multi-line textareas */
.form-horizontal-layout .form-row.align-start {
    /* Override the default alignment to align items to the top */
    align-items: flex-start;
}

/* 4. Adjust the label alignment inside a top-aligned row */
.form-horizontal-layout .form-row.align-start .form-label {
    /* Add a little padding to align with the top of the textarea's text */
    padding-top: 0.375rem;
}

/* In mycustom.css */

/* --- Help Drawer Styles --- */
.help-drawer {
    position: fixed;
    top: 0;
    right: -350px; /* Start off-screen */
    width: 350px;
    height: 100%;
    background-color: #f8f9fa; /* A light background */
    z-index: 1050; /* Above most other content */
    box-shadow: -0.5rem 0 1rem rgba(0, 0, 0, 0.15);
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.help-drawer.is-open {
    right: 0; /* Slide it into view */
}

.help-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
}

.help-drawer-body {
    padding: 1rem;
    overflow-y: auto; /* Make it scrollable if content is long */
    flex-grow: 1;
}

/* Optional: Add a backdrop overlay */
.drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040; /* Below the drawer */
    display: none; /* Hidden by default */
}

.drawer-backdrop.is-visible {
    display: block;
}


/* --- Hide number input spinners --- */

/* For Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

body {
    /* Adjust this value to match the height of your navbar */
    /* 56px is the default height for a standard Bootstrap navbar. */
    padding-top: 56px;
}

/* If your navbar height changes on smaller screens, use a media query */
@media (min-width: 768px) {
    body {
        /* You might need a different padding for larger screens */
        padding-top: 56px;
    }
}


/*
  This CSS creates a stripe effect for a table that has a base color.
  It works by applying a slightly darker, semi-transparent black overlay
  to the odd rows, which darkens the underlying table color.
*/
.table-striped-custom > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(0, 0, 0, 0.05); /* 5% transparent black */
}


.site-group-start td {
    /*
      Apply a thick, dark top border to all cells (td)
      in a row with the class 'site-group-start'.
    */
    border-top: 2px solid #343a40 !important; /* A dark color, using !important to override Bootstrap's default borders */
}

.accordion-button-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}
.accordion-button-clickable:not(.collapsed):hover,
.accordion-button-clickable:hover {
  background-color: var(--bs-secondary-bg);

}


@media print {
    /* Hide buttons, navbars, sidebars */
    .btn, .navbar, .sidebar, .d-print-none {
        display: none !important;
    }

    /* Ensure background colors print (Bootstrap defaults to white for saving ink) */
    .table td, .table th {
        background-color: transparent !important;
    }

    /* Force background graphics */
    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}