/* Bootstrap Classes Start */
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid; }
.m-0 { margin: 0rem; }
.m-1 { margin: 0.5rem; }
.m-2 { margin: 1rem; }
.m-3 { margin: 1.5rem; }
.m-4 { margin: 2rem; }
.m-5 { margin: 2.5rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 2.5rem; }
.ml-0 { margin-left: 0rem !important; }
.ml-1 { margin-left: 0.5rem; }
.ml-2 { margin-left: 1rem; }
.ml-3 { margin-left: 1.5rem; }
.ml-4 { margin-left: 2rem; }
.ml-5 { margin-left: 2.5rem; }
.mr-1 { margin-right: 0.5rem; }
.mr-2 { margin-right: 1rem; }
.mr-3 { margin-right: 1.5rem; }
.mr-4 { margin-right: 2rem; }
.mr-5 { margin-right: 2.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 2.5rem; }
.mx-0 {
    margin-left: 0rem;
    margin-right: 0rem;
}
.mx-1 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.mx-2 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.mx-3 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}
.my-0 {
    margin-top: 0rem;
    margin-bottom: 0rem;
}
.my-1 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.my-3 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.p-0 { padding: 0rem; }
.p-25 { padding: 0.25rem; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }
.p-5 { padding: 2.5rem; }
.pb-0 { padding-bottom: 0rem; }
.pb-1 { padding-bottom: 0.5rem; }
.pb-2 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 1.5rem; }
.pb-4 { padding-bottom: 2rem; }
.pb-5 { padding-bottom: 2.5rem; }
.pt-0 { padding-top: 0rem; }
.pt-1 { padding-top: 0.5rem; }
.pt-2 { padding-top: 1rem; }
.pt-3 { padding-top: 1.5rem; }
.pt-4 { padding-top: 2rem; }
.pt-5 { padding-top: 2.5rem; }
.pl-0 { padding-left: 0rem !important; }
.pl-1 { padding-left: 0.5rem !important; }
.pl-2 { padding-left: 1rem !important; }
.pl-3 { padding-left: 1.5rem !important; }
.pl-4 { padding-left: 2rem !important; }
.pl-5 { padding-left: 2.5rem !important; }
.pr-0 { padding-right: 0rem; }
.pr-1 { padding-right: 0.5rem; }
.pr-2 { padding-right: 1rem; }
.pr-3 { padding-right: 1.5rem; }
.pr-4 { padding-right: 2rem; }
.pr-5 { padding-right: 2.5rem; }
.px-0 { 
    padding-left: 0rem; 
    padding-right: 0rem; 
}
.px-25 { 
    padding-left: 0.25rem; 
    padding-right: 0.25rem; 
}
.px-1 { 
    padding-left: 0.5rem; 
    padding-right: 0.5rem; 
}
.px-2 { 
    padding-left: 1rem; 
    padding-right: 1rem; 
}
.px-3 { 
    padding-left: 1.5rem; 
    padding-right: 1.5rem; 
}
.py-0 { 
    padding-top: 0rem; 
    padding-bottom: 0rem; 
}
.py-25 { 
    padding-top: 0.25rem; 
    padding-bottom: 0.25rem; 
}
.py-1 { 
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem; 
}
.py-2 { 
    padding-top: 1rem; 
    padding-bottom: 1rem; 
}
.py-3 { 
    padding-top: 1.5rem; 
    padding-bottom: 1.5rem; 
}
.text-start { text-align: left; }
.text-center { text-align: center; }
.text-end { text-align: right; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }
.gap-5 { gap: 2.5rem; }
.inline-block {display: inline-block;}
.bg-light {
    background-color: #f8f9fa !important;
}
.b-rounded {
    border-radius: 0.25rem !important;
}
/* Bootstrap Classes End */

.layout-btn-active, .doc-layout-btn-active {
    outline-offset: -2px;
    outline: 5px auto;
}

.err-msg {
    color: #e60a0a;
    /* font-weight: 400; */
    font-size: small;
}

.vertical-start-grid {
    display: grid;
    align-items: start;
}

.vertical-center-grid {
    display: grid;
    align-items: center;
}

.vertical-end-grid {
    display: grid;
    align-items: end;
}

.vertical-start-flex {
    display: flex;
    align-items: start;
}

.vertical-center-flex {
    display: flex;
    align-items: center;
}

.vertical-center-flex-justify {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.vertical-center-flex-justify-end {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
}

.vertical-end-flex {
    display: flex;
    align-items: end;
}

.align-items-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.media-row-grid-secc {
    /* border: 2px solid #00000008; */
    /* padding: 80px 5px 1px 10px; */
    border: 1px solid #00000012;
    padding: 55px 5px 1px 10px;
    bottom: 54px;
    margin-bottom: -30px;
    /* bottom: 80px; */
    /* margin-bottom: -60px; */
}

.media-row-grid-sec {
    border: 1px solid #00000012;
    padding: 5px 5px 1px 10px;
    margin-top: 1rem;
    bottom: 0px;
    margin-bottom: 0px;
    margin-top: 1rem;
}

.label-mandate {
    position: relative;
    /* bottom: 10px; */
    bottom: 1px;
}

.col-break {
    width: 100%;
    display: flex;
}

.row-eq-height {
  align-items: stretch;
}

.row-eq-height > [class*="col-"] {
  display: flex;
  height: 85px;
}

.row-eq-height > [class*="col-"] > * {
  width: 100%;
}

.fw-100 {
    font-weight: 100;
}
.fw-200 {
    font-weight: 200;
}
.fw-300 {
    font-weight: 300;
}
.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}

.text-black {
    color: black;
}

.btn-outline-grey {
    border: 2px solid grey;
}

.bg-grey1 {
    background-color: #e3dfd5;
}

.bg-grey2 {
    background-color: #8080801c !important;
}
.bg-grey3 {
    background-color: #80808036 !important;
}

.compliance-sec .form-wizard .nav-pills>li>a {
    color: black;
}

.compliance-sec .form-wizard .nav-pills>li>a.active {
    color: #fff;
    background-color: teal;
}

.compliance-sec .form-wizard .tab-pane {
    padding: 1rem 5px;
}

.overflow-x-hide {
    overflow-x: hidden;
}

.overflow-y-hide {
    overflow-y: hidden;
}

.bg-red-lighter {
    background-color: #f51d1dba;
    color: #fff;
}

.bg-green-lighter {
    background-color: #00800099;
    color: #fff;
}

.bg-blue-lighter {
    background-color: #0808929e;
    color: #fff;
}

.bg-skyblue-lighter {
    background-color: #3a89bfbd;
    color: #fff;
}

.ck-editor__editable {
    height: 200px;
}

.ck-toolbar-container {
    z-index: 1040 !important;
}

.overflow-wrap {
    overflow-wrap: break-word;
}

/* Compliance CSS Start */

.side-panel{
    background-color:white;
    display: none;
    width:0%;
    height:100vh;
    z-index:999;
    transition: width 0.5s ease-in-out;
}

.side-panel.expanded {
    width: 60%; 
    position:sticky;
    z-index:999;
    top:0px;
    border: 1px solid #c6bebe;
}
.side-panel .side-panel-close-btn{
    margin-top:0px;
    padding:15px;
    font-size:20px;
    cursor: pointer;
}
.side-panel-body{
    padding:10px; 
    max-height:100vh;
    overflow-y: scroll;
    padding-bottom:110px;
    padding-top: 0px;
}

.compliance-tab3 {
    max-height: 50vh; 
    overflow-y: auto; 
    border: 2px solid #00000026;
    border-radius: 4px;
    padding: 2px;
}

.compliance-helper-toggler {
    width: 56px;
    margin-left: -66px;
    cursor: pointer;
}

.compliance-helper-spinner {
    z-index: 200;
    border-radius: 30% 0 0 30%;
    padding: .8rem .5rem .8rem .6rem;
    font-size: 1.15rem;
    line-height: initial;
    box-shadow: -1px 0 8px rgba(0, 0, 0, 0.2);
    writing-mode: vertical-lr;
    text-orientation: sideways-right;
    border: 3px solid #f0b518;
    font-weight: 600;
    background-color: #f0b5184d !important;
}

.compliance-helper-btn {
    position: fixed;
    top: 200px;
}
.compliance-helper-closed {
    right: -20px;
    transition: right .5s ease-in-out;
}

.compliance-helper-opened { 
    /* right: 468px; */
    transition: right .5s ease-in-out;
}

.compliance-icon {
    height: 45px;
}

#overlay {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
  }
  
#text{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    font-size: 30px;
    font-weight: 600;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

.checked-sec {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.2); */
    cursor: pointer;
}

.checked-icon {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
    color: #499d08cf;
    font-size: xxx-large;
}
/* Compliance CSS End */

.line-br {
    line-break: anywhere;
}

.error-text {
    font-weight: 500;
    color: red;
}

.rfi_img {
    margin: 2px;
}

/* .box {
    width: 300px;
    height: 300px;
    background-color: #a0a0a0;
    position: relative;
}
.ribbon {
  -webkit-transform: rotate(-45deg); 
     -moz-transform: rotate(-45deg); 
      -ms-transform: rotate(-45deg); 
       -o-transform: rotate(-45deg); 
          transform: rotate(-45deg); 
    border: 25px solid transparent;
    border-top: 25px solid #757575;
    position: absolute;
    bottom: 20px;
    right: -50px;
    padding: 0 10px;
    width: 120px;
    color: white;
    font-family: sans-serif;
    size: 11px;
}
.ribbon .txt {
    position: absolute;
    top: -20px;
    left: 20px;
} */

.form-widget {
    text-wrap: auto;
    width: 125px;
    max-width: 125px;
}

/* Custom Form CSS */

.cf-active {
    background-color: #008000c9;
    color: #fff;
}

.options-menu {
    display: none; /* Hidden by default */
    position: absolute;
    /* top: 30;
    left: 0; */
    /* background-color: #0000004a; */
    border: 1px solid #0000004a;
    background-color: #fff;
    color: white;
    border-radius: 8px;
    z-index: 10;
    text-align: center;
}

.options-menu .option-item {
    color: grey;
    padding: 9px;
    width: 100%;
    border-radius: 0;
    cursor: pointer;
}

.options-menu span:hover {
    background-color: #ddd;
}

.fieldBtn {
    padding: 0.5rem !important;
}

.sticky-nav-section{
    position: sticky;
    top: 0px;
    z-index: 100;
    background-color: white;
    padding-top: 5px;
    padding-bottom: 1px;
}

/* Custom Form CSS End */

.help-block-dark {
    margin-top: 5px;
    font-size: 85%;
    color: #00000094;
    display: block;
}

.sticky-rfi-comm {
    position: fixed;
    top: 50px;
    z-index: 999;
    right: 10px;
    background-color: #fff;
    padding: 5px;
    display: inline;
}

/* SiteMap CSS Start */
.bt_unit_first {
    width: 172px;
    height: 65px;
}

.bt_unit {
    /* width: 203px; */
    width: 172px;
    height: 50px;
}

.overlay-text {
    position: absolute;
    transform: translate(-50%, -50%);
    color: black;
    font-size: 18px;
    font-weight: bold;
}

.overlay-text-ld {
    top: 71%;
    left: 13%;
}

.overlay-text-rd {
    top: 71%;
    left: 84%;
}

.overlay-text-td {
    top: 15%;
    left: 57%;
}

.overlay-text-wall {
    top: 3.6%;
    left: 23rem;
    width: 250px;
}

.overlay-text-room {
    top: 57%;
    left: 17rem;
    width: 250px;
}

/* SiteMap CSS End */

.row-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.w-100 {
    width: 100%;
}

.bstc-lbg {
    background-color: #ff6600;
}

.vcs-lbg {
    background-color: #dd5826;
}

.crts-sec {
    padding: 10px !important;
    /* border: 3px solid #80808038; */
    border-radius: 5px;
    min-height: 185px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.jc-icon-cs {
    margin-left: 5px;
    margin-top: 1px;
    height: 36px;
}

.header-st-lbl {
    font-size: 12px;
    padding: 0px 2px !important;
    border: 0px !important;
    border-radius: 5px !important;
    background-color: #96caf863 !important;
    color: grey;
    width: auto !important;
}

/* .nav-pills-sticky {
    position: sticky;
    z-index: 1000;
    top: 0;
    background-color: #FFFFFF;
}

.progress-bar-sticky {
    height: 20px;
    background-color: #FFFFFF;
    position: sticky;
    top: 72px;
    padding-top: 1px;
    z-index: 1000;
} */


/* Sitemap CSS start */
.rack-area {
    position: relative;
    height: 400px;
    width: 100%;
    max-width: 800px;
    /* border: 2px solid #000; */
    background-color: #fff;
    margin-top: 20px;
    overflow: hidden;
}

.rack-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 16px; /* reserve for wall */
    bottom: 16px; /* reserve for ground */
    display: flex;
    align-items: flex-end;
    justify-content: end;
    /* padding: 10px; */
    gap: 30px;
}

.rack {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    max-height: 100%;
    overflow-y: auto;
    border: 1px solid #aaa;
    padding: 4px 4px 0px 4px;
    background-color: #f7f7f7;
}

.rack-box {
    /* width: 100px; */
    width: 230px;
    height: 40px;
    background-color: #007bff42;
    border: 2px solid #000;
    border-radius: 4px;
    margin-top: 4px;
}

.wall {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 100%;
    background-color: #ccc;
    border-left: 2px solid #000;
    z-index: 2;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 16px;
    width: 100%;
    background-color: #ccc;
    border-top: 2px solid #000;
    z-index: 2;
}

.mdl-label {
    width: 100px;
    text-wrap: auto;
    font-size: 9px;
}

.rack-group {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.rack-label {
    writing-mode: vertical-rl;      /* Makes text vertical */
    transform: rotate(180deg);      /* Makes it bottom-to-top */
    text-align: center;
    font-weight: bold;
    margin-right: 6px;
    padding: 4px;
    font-size: 12px;
    background-color: #e9ecef;
    border: 1px solid #ccc;
}
/* Sitemap CSS end */

/* Sitemap 2 CSS start */
.bg-rack-gradient {
    background-image: linear-gradient(to bottom, #6c757d, #495057);
    color: white;
}
/* .battery-rack-top-l {
    position: absolute;
    top: -13px;
    left: 4%;
    transform: translateX(-50%);
    width: 10%;
    height: 20px;
    background-color: #FFF;
    border-radius: 4px 4px 0 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 0px;
    color: #000;
    text-align: center;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
.battery-rack-top-r {
    position: absolute;
    top: -13px;
    right: -6%;
    transform: translateX(-50%);
    width: 10%;
    height: 20px;
    background-color: #FFF;
    border-radius: 4px 4px 0 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 0px;
    color: #000;
    text-align: center;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
} */
.border-dashed {
        border-top: 2px dashed #adb5bd !important;
}

.stack-bg {
    background-color: #b8d0e7;
}

/* .terminal {
    position: absolute;
    width: 24px;
    height: 24px;
    font-size: 1.1rem;
    line-height: 1;
    border: 2px solid rgb(0 0 0 / 11%);
    color: rgba(0, 0, 0, 0.308);
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} */

.sm-rounded-lg {
    border-radius: 1rem !important;
}

.rack-sec {
    padding: 10px;
    border-radius: 5px;
    height: 185px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
}

.sm-badge {
    width: 90px;
    display: inline-block;
    border: .1px solid #CCCAC5;
    border-radius: 10px;
    background-color: #FFF;
    min-width: 60px;
    font-family: Arial, sans-serif;
    text-align: center;
}

.sm-badge .title {
    margin-left: 5px;
    margin-right: 5px;
    height: 16px;
    line-height: 20px;
    font-size: 0.6rem;
    text-transform: uppercase;
}

.sm-badge .count {
    font-size: 1rem;
    color: #585858;
    line-height: 45px;
}

.horizontal-scroll-wrapper {
    white-space: nowrap;
    padding-bottom: 1rem; /* prevent content cut-off */
}

#rack-container > .col-md-4 {
    flex: 0 0 auto;
    /* width: 400px; */
    /* margin-right: 1rem; */
}

.sm-bm {
    text-wrap: auto;
    font-size: 10px;
}

.sm-col-width {
    min-width: 40%;
}

.sm-card-col-height {
    /* max-height: 598px; */
    max-height: 470px;
    overflow-y: auto;
}

/* Sitemap 2 CSS end */
.h-100 {
    height: 100% !important;
}

.border {
    border: 1px solid #dee2e6 !important;
}

.bg-dark {
    background-color: #000 !important;
    color: #fff !important;
}

.overflow-auto {
    overflow: auto !important;
}

.btn-bg-gray {
    background-color: #e3e3e3b0;
}

.list-selfie-icn {
    padding: 0px;
    border: 1px solid #80808059;
    height: 28px;
    display: inline-block;
    margin-right: 3px;
    background-color: #e3dfd542;
}

.selfi-icn {
    position: relative;
    height: 13px;
    margin-left: 3px;
}

.list-jc-selfie-icn {
    width:18px;
    padding: 3px;
    opacity: 0.5;
}

.btn-battery-setup {
    background-color: #F2BE35;
    border-color: #F2BE35;
    color: #FFFFFF;
}

.msgNote {
    font-size: 12px;
    font-weight: 100;
    font-style: italic;
}

.post-comments-footer {
    padding-top: 4px !important;
    padding-bottom: 0px !important;
    margin-bottom: 20px !important;

    border-radius: 5px;
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1);
}

.post-comments-sec {
    overflow-y: auto;
    max-height: 600px;
    padding:10px;
    /* border: 10px solid #8080802e; */
    
    margin-bottom: 0.5rem;
}

.note-comment-sec {
    margin-bottom: 10px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.col-print-1 {width:8%;  float:left;}
.col-print-2 {width:16%; float:left;}
.col-print-3 {width:25%; float:left;}
.col-print-4 {width:33%; float:left;}
.col-print-5 {width:42%; float:left;}
.col-print-6 {width:50%; float:left;}
.col-print-7 {width:58%; float:left;}
.col-print-8 {width:66%; float:left;}
.col-print-9 {width:75%; float:left;}
.col-print-10{width:83%; float:left;}
.col-print-11{width:92%; float:left;}
.col-print-12{width:100%; float:left;}



/* Certificate widget CSS Start */
.pv-cert {
    background: linear-gradient(135deg, rgb(254, 243, 199) 0%, rgb(253, 230, 138) 100%);
    border-radius: 10px;
    padding: 5px;
    border: 1px solid rgb(251, 191, 36);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btr-cert {
    background: linear-gradient(135deg, rgb(209, 250, 229) 0%, rgb(167, 243, 208) 100%);
    border-radius: 10px;
    padding: 5px;
    border: 1px solid rgb(52, 211, 153);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
/* Certificate widget CSS End */

.row-justify{
    flex-wrap: wrap;
    justify-content: flex-start;
    display: flex;
}


.disabled-label {
    position: relative;
    cursor: not-allowed;
}

.disabled-label::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.6); /* light overlay */
    border-radius: inherit;
    z-index: 2;
    backdrop-filter: grayscale(40%);
}

.disabled-label::before {
    content: "\f023"; /* lock icon */
    font-family: FontAwesome;
    font-weight: 900;
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 14px;
    z-index: 3;
}

/* optional: ensure content sits below overlay */
.disabled-label > * {
    position: relative;
    z-index: 1;
}

#bulkAsec.folded {
    transform: translateX(100%); /* Hides box but keeps button visible */
}

.toggle-fold-btn {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 100px;
    background: #555;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px 0 0 5px;
    font-size: 10px;
}

/* HEADER New Style */
.dash-hdr-wrapper {
    --hdr-primary-text: #212529;
    --hdr-muted-text: #6c757d;
    --hdr-border-color: #dee2e6;
    --hdr-success-color: #28a745;
    --hdr-warning-color: #ffc107;
    --hdr-bg-light: #f8f9fa;
    --hdr-bg-white: #ffffff;
    --hdr-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: var(--hdr-bg-white);
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--hdr-border-color);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); */
    font-family: var(--hdr-font-family);
    color: var(--hdr-primary-text);
    box-sizing: border-box;
}

.dash-hdr-wrapper * {
    box-sizing: border-box;
}

.dash-hdr-left, .dash-hdr-right {
    display: flex;
    align-items: center;
}

/* --- Buttons & Inputs --- */
.dash-hdr-icon-btn {
    background: none;
    border: none;
    color: var(--hdr-muted-text);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}
.dash-hdr-icon-btn:hover { color: var(--hdr-primary-text); }

.dash-hdr-search-form { display: none; } 

.dash-hdr-search-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--hdr-border-color);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    margin-left: 1rem;
}

.dash-hdr-search-icon {
    color: #007bff;
    margin-right: 0.5rem;
}

.dash-hdr-search-input {
    border: none;
    outline: none;
    font-size: 0.875rem;
    background: transparent;
}

/* --- Pill Button (Prices Toggle) --- */
.dash-hdr-pill-btn {
    display: flex;
    align-items: center;
    background-color: var(--hdr-bg-white);
    border: 0px solid var(--hdr-muted-text);
    /* border-radius: 50rem; */
    padding: 0.25rem;
    font-size: 1.25rem;
    color: var(--hdr-primary-text);
    cursor: pointer;
    /* margin-right: 1rem; */
    transition: background-color 0.2s;
}
.dash-hdr-pill-btn:hover { background-color: var(--hdr-bg-light); }

.dash-hdr-text-success { color: var(--hdr-success-color); }
.dash-hdr-text-secondary { color: var(--hdr-muted-text); }
.dash-hdr-icon-margin { margin-right: 0.5rem; }

/* --- Badges --- */
.dash-hdr-badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}
.dash-hdr-badge-success {
    background-color: var(--hdr-success-color);
    color: var(--hdr-bg-white);
    margin-left: 0.5rem;
}
.dash-hdr-badge-warning {
    background-color: var(--hdr-warning-color);
    color: #212529;
}
.dash-hdr-badge-circle {
    border-radius: 50%;
    padding: 0.35em 0.5em;
    margin-left: 0.5rem;
    margin-right: 1rem;
}

/* --- Dropdown Menu --- */
.dash-hdr-dropdown-container { position: relative; }

.dash-hdr-dropdown-menu {
    display: none; 
    position: absolute;
    top: 100%;
    right: 1rem; 
    margin-top: 0.5rem;
    min-width: 320px;
    background-color: var(--hdr-bg-white);
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
    padding: 1rem;
    z-index: 1000;

    /* display: block !important;
    position: fixed !important;
    top: 150px !important;
    left: 500px !important;
    z-index: 999999 !important; */
}
.dash-hdr-dropdown-menu.dash-hdr-show { display: block; }

.dash-hdr-dropdown-title {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--hdr-primary-text);
    text-transform: uppercase;
}

/* --- Prices Grid (Inside Dropdown) --- */
.dash-hdr-prices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.dash-hdr-price-item {
    text-align: center;
    padding: 0.5rem;
}
.dash-hdr-price-label {
    font-size: 0.75rem;
    color: var(--hdr-muted-text);
}
.dash-hdr-price-value {
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
}

/* "More prices" button: same box size as a price badge, with a clear label and a
   subtle accent so it's obvious there are more certificate prices to view. */
.dash-hdr-more-item { background-color: #eef4ff; }
.dash-hdr-more-item:hover { background-color: #dbe8ff; }
.dash-hdr-more-btn {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    font-size: 1rem;
    background: transparent;
    color: var(--hdr-primary-text);
}
.dash-hdr-more-btn:hover { background: transparent; }
.dash-hdr-more-btn .dash-hdr-price-value { color: #2f6fed; }

/* Grid borders inside dropdown */
.dash-hdr-border-right { 
    /* border-right: 1px solid var(--hdr-border-color); */
    /* border-left: 1px solid var(--hdr-border-color); */
    border: 1px solid var(--hdr-border-color);
}
.dash-hdr-border-bottom { border-bottom: 1px solid var(--hdr-border-color); }

/* --- Profile Section --- */
.dash-hdr-profile-section {
    display: flex;
    align-items: center;
    border-left: 1px solid var(--hdr-border-color);
    padding-left: 1rem;
}

.dash-hdr-retailer-name {
    display: none; 
    font-size: 0.875rem;
    color: var(--hdr-muted-text);
    margin-right: 1rem;
}

.dash-hdr-user-info {
    display: flex;
    align-items: center;
}

.dash-hdr-user-role {
    display: none; 
    font-size: 0.875rem;
    font-weight: bold;
}

/* --- Media Queries for Responsiveness --- */
@media (min-width: 768px) {
    .dash-hdr-search-form { display: flex; }
}

@media (min-width: 576px) {
    .dash-hdr-user-role { display: inline; }
}

@media (min-width: 992px) {
    .dash-hdr-retailer-name { display: inline; }
}

.dash-hdr-has-sub-sec {
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Make the grid item clickable and relative for positioning */
.dash-hdr-has-sub {
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}
.dash-hdr-has-sub:hover {
    background-color: var(--hdr-bg-light);
}

.dash-hdr-caret {
    font-size: 1.10rem;
    color: var(--hdr-muted-text);
    margin: 0rem 0.25rem;
    vertical-align: middle;
}

.dash-hdr-caret-sec {
    font-size: 10px;
    background-color: #80808047;
    padding: 2px;
    border-radius: 3px;
}

/* The hidden popover menu */
.dash-hdr-sub-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background-color: var(--hdr-bg-white);
    border: 1px solid var(--hdr-border-color);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1050;
    text-align: left;
    padding: 0.5rem 0;
    cursor: default; /* Remove pointer cursor from text inside */
}

/* Show the popover when the class is toggled via JS */
.dash-hdr-has-sub.dash-hdr-sub-open .dash-hdr-sub-menu {
    display: block;
}

/* Sub-menu typography and spacing */
.dash-hdr-sub-section {
    padding: 0.25rem 1rem;
}
.dash-hdr-sub-section + .dash-hdr-sub-section {
    border-top: 1px solid var(--hdr-border-color);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}

.dash-hdr-sub-title {
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--hdr-primary-text);
    margin-bottom: 0.25rem;
}

.dash-hdr-sub-title::first-letter {
    text-transform: uppercase;
}

.dash-hdr-sub-text {
    font-size: 0.875rem;
    color: var(--hdr-primary-text);
}

/* Payment Terms rows */
.dash-hdr-term-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--hdr-primary-text);
    margin-bottom: 0.25rem;
}

/* Green pill badges for prices */
.dash-hdr-term-badge {
    background-color: #63b868; /* Matching the green from your screenshot */
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 50rem;
    font-weight: bold;
    font-size: 0.7rem;
}

/* HEADER New Style End */

.separator {
    display: inline-block;
    width: 1px;
    height: 40px;
    background: #ccc;
    margin: 0 10px;
    vertical-align: middle;
}

/* ===== SAA accreditation expiry (installer / designer selection) ===== */

/* control stays single-line so all dropdowns keep the same height */
.saa-select .select2-choice {
    position: relative;
    background-image: none !important;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

/* keep the selected name clear of the expiry pill */
.saa-select .select2-chosen {
    margin-right: 150px !important;
}

/* expiry pill, vertically centered on the right (clear of the arrow) */
.saa-sub {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1.2;
    white-space: nowrap;
    padding: 1px 8px;
    border-radius: 10px;
    color: #7a7f85;
    background: #f1f3f4;
    border: 1px solid #e0e3e6;
}

.saa-sub .fa {
    margin-right: 4px;
}

/* per-dropdown states: green = valid, blue = nearing expiry, red = expired */
.saa-state-ok .select2-choice {
    border-color: #64bd63 !important;
    background-color: #f3faf3 !important;
}

.saa-state-ok .saa-sub {
    color: #3d8b3d;
    background: #fff;
    border-color: #a3d6a2;
}

.saa-state-warn .select2-choice {
    border-color: #337ab7 !important;
    background-color: #eef5fb !important;
    box-shadow: 0 0 0 1px rgba(51, 122, 183, .15);
}

.saa-state-warn .saa-sub {
    color: #2e6da4;
    background: #fff;
    border-color: #a9cbe8;
}

.saa-state-expired .select2-choice {
    border-color: #d9534f !important;
    background-color: #fdf2f1 !important;
    box-shadow: 0 0 0 1px rgba(217, 83, 79, .15);
}

.saa-state-expired .saa-sub {
    color: #c9302c;
    background: #fff;
    border-color: #e8b3b1;
}


/* Three columns: [claim] [activity name | count] [financial payment].
   The widget itself is just a flex track; each column carries its own card, so the
   payment field sits on the page background the way the design does. Column 1 is a
   neutral fill identical on every tab; column 2 is split, its left half filled with the
   activity's own label colour (set inline by renderDarkPaymentWidget). */
.dark-payment-widget {
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    /* Columns 1 and 2 match the height of the payment INPUT (62px), not of the whole
       payment column, so they must not stretch. They hang from the top and carry
       margin-top:23px (the height of .dark-payment-right-title plus its margin),
       which drops them onto the same line as the input. Change that title's size and
       these two offsets have to follow. */
    align-items: flex-start;
    gap: 14px;
    padding: 0;
    /* the Recalculate button rides above column 2's top edge, so do not clip it */
    overflow: visible;
    margin: 0 0 15px;
    /* Inherit the page font (Open Sans) so this widget reads the same as #stcSection,
       the STC row it sits alongside. The sizes/weights below are the theme's own:
       .value3 (1.75rem/600) for the big numbers, <label> (1rem/400) for the field
       titles, .form-control-lg (1.25rem) for the payment input and .help-block
       (85%/#999) for the note under it. */
    font-family: inherit;
}
/* Column 1: claim control. Same neutral fill on every activity. */
.dark-payment-pre-left {
    flex: 0 0 195px;
    min-width: 0;
    height: 52px;
    margin-top: 30px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #2b2f33;
    box-sizing: border-box;
}
.dark-payment-pre-left .btn {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #2b2f33 !important;
}
.dark-payment-pre-left .dpw-claim {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.dark-payment-pre-left .dpw-claim input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}
.dpw-claim-label {
    margin-bottom: 0;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: normal;
    color: #2b2f33;
    cursor: pointer;
}
/* Column 2 is a COLUMN: the count card, and under it the calculation error slot.
   The message sits OUTSIDE the fixed 52px card so it can wrap without squashing the
   count, and INSIDE this wrapper so the .bess-unchecked / #<activity>WidgetContainer
   rules that hide an unclaimed activity's card take the message with them. */
.dpw-left-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.dpw-left-col > .dark-payment-left {
    flex: 0 0 auto;
    width: 100%;
}
/* .errMsg / .errMsgBstc: written by showBessCalcErr(), cleared by clearBessCalcErr(). */
.dpw-err {
    margin-top: 6px;
    padding: 8px 12px;
    border: 1px solid #f3cfcf;
    border-left: 3px solid #c62828;
    border-radius: 6px;
    background: #fdeeee;
    color: #c62828;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
}
/* showBessCalcErr() leads every message with a warning triangle, so give it room and
   stop it wrapping onto the text. */
.dpw-err .fa {
    margin-right: 5px;
}
/* Column 2: one card, split into the coloured activity name and the count. */
.dark-payment-left {
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    margin-top: 30px;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-sizing: border-box;
}
.dpw-activity {
    flex: 0 0 46%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: 7px 0 0 7px;
    color: #fff;
}
.dpw-activity-lead {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: normal;
    /* No uppercasing: the activity leads are already capitalised, and forcing it would
       print the BSTC lead as "STCS" instead of the "STCs" #stcSection shows. */
    text-transform: none;
    line-height: 1;
}
/* White chip; the text takes the activity's accent, set inline by bessWidgetTitleHtml()
   because the accent itself is an inline value on .dpw-activity. The colour below is only
   the fallback for a widget rendered without an accent; it must stay dark, or the label
   would be white on the white chip. */
.dpw-activity-pill {
    background: #fff;
    color: #2b2f33;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: .3em .8em;
}
.dpw-count {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}
/* Sits in the 23px band above the boxes, the same band .dark-payment-right-title
   occupies, so it lines up with the "Financial payment" label across the row.
   top equals column 2's margin-top, which puts its top edge on the widget's top edge. */
.dpw-count .dark-payment-refresh {
    position: absolute;
    top: -25px;
    right: 4px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    z-index: 2;
    background: #fff;
    font-weight: 600;
    line-height: 1;
}
/* Separation is the flex gap now; the element stays for the unclaimed-state selectors
   that hide it alongside .dark-payment-left / .dark-payment-right. */
.dark-payment-divider {
    display: none;
}
.dark-payment-left-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dark-payment-left-item:not(:last-child) {
    border-right: 2px solid #9e9a9a57;
    padding-right: 15px;
}
.dark-payment-left-title {
    color: #666;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0;
}
.dark-payment-left-val {
    color: #2b2f33;
    font-size: 1.75rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
}
.dark-payment-left-val p, .dark-payment-left-val input {
    color: inherit !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font: inherit !important;
    box-shadow: none !important;
    outline: none !important;
}
/* The PRC value slot.

   BESS1/BESS2/BSTC render it as a <p>, but BESS3/4/5 need an <input>: the count is
   written and read back with .val() (see renderUpcomingBessPane / bessCtx). A bare
   <input type="text"> defaults to size="20", i.e. about twenty characters wide, and at
   this 1.75rem font that is far wider than the column it sits in. .dpw-count centres its
   content, so the overflow spilled BOTH ways and the number printed straight across the
   coloured activity block on its left.

   Cap the slot to the column and let the input fill that instead of sizing itself from
   the size attribute. min-width:0 is required as well: .dark-payment-left-val is a flex
   item, and a flex item will not shrink below its content's intrinsic width without it. */
.dark-payment-left-val {
    min-width: 0;
    max-width: 100%;
}
.dark-payment-left-val input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.dark-payment-refresh {
    background: transparent;
    border: 1px solid #ccc;
    color: #666;
    border-radius: 12px;
    padding: 1px 6px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.dark-payment-refresh:hover {
    border-color: #333;
    color: #333;
}
.dark-payment-divider {
    width: 1px;
    background: #e6e6e6;
}
.dark-payment-right {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dark-payment-right-title {
    color: #343434;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 6px;
}
.dark-payment-input {
    height: 52px !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    color: #333 !important;
    padding: 6px 12px !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
}
.dark-payment-input:focus {
    border-color: #3c8dbc !important;
}
.dark-payment-help {
    font-size: 85%;
    font-weight: 400;
    color: #999999;
    margin-top: 5px;
}

/* Claim hint under each activity's payment widget: #bess1ReqHint, #bess2ReqHint and
   #bessClaimHint_bess3..5, all painted by paintBessHint(). It used to be one line of 11px
   coloured text on the page background and was easy to miss; as a tinted panel it reads as
   the widget's verdict. The tint follows the state, the text keeps its own colour. */
.bess-req-hint {
    padding: 8px 12px;
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.45;
}
.bess-req-hint-ok {
    background: #eef7ee;
    border-color: #cfe6cf;
    border-left-color: #2e7d32;
}
/* The success message carries .text-success, which application.min.css sets to #64bd63:
   a bright green meant for a white page, sitting at roughly 1.9:1 on this tint. Same defect
   the amber warn text had. !important because the theme's own rule carries one; the extra
   class here outranks it either way. */
.bess-req-hint-ok .text-success {
    color: #1b5e20 !important;
}
.bess-req-hint-warn {
    background: #fff6e5;
    border-color: #f3e0bd;
    border-left-color: #ff9800;
}
.bess-req-hint-bad {
    background: #fdeeee;
    border-color: #f3cfcf;
    border-left-color: #c62828;
}

/* BSTC tab: the payment widget block.

   #bstcSectionSlot is already a .row in the page markup, and #btcSection carries its own
   .row, so the two sets of -0.9375rem gutters stacked and #btcSection painted 30px wider
   than everything under it (the "room behind the wall" .col-lg-4 and #bstcBatteryQs, both
   plain columns of that same slot row).

   Zeroing the inner row's gutters lines them up exactly: #btcSection's .col-lg-12 child
   then supplies the same 15px of padding the sections below get from being columns
   themselves. The .row is left in place for its ::after clearfix, which the floated
   .col-lg-12 inside still needs.

   Scoped to the slot, so #btcSection keeps its gutters in its original position in Install
   Details, where it stays whenever the activity tabs are not on the page. */
#bstcSectionSlot > #btcSection {
    margin-left: 0;
    margin-right: 0;
}

/* Battery questions relocated into the BSTC tab (bstcBatteryQuestionNodes / bstcBatteryQsBox).
   Layout only. They must READ exactly like the questions on every BESS tab, which are plain
   theme <label>s inside a .form-group (bessRadioQuestionsHtml), so nothing here sets a
   font size, weight or colour except to bring the three questions that use <p> into line
   with a <label>.

   Three per row, and the col-lg-4 / col-lg-6 classes the questions arrive with are
   neutralised rather than rewritten, so moving them back to Install Details restores their
   original layout untouched. */
.bstc-qs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 20px;
}
/* Grid items, not floated columns: drop the width/float/gutters the col-* classes set. */
.bstc-qs-grid > [class*="col-"] {
    width: auto;
    max-width: none;
    float: none;
    padding-left: 0;
    padding-right: 0;
}
/* Question prompts. Some are marked up with <p>, some with <label>. Give the <p> the same
   look the theme label carries on every BESS tab: 1rem / 400 / body colour.

   display MUST stay block on both. The Yes/No groups that follow are .radio-inline
   (inline-block), so an inline-block prompt let a short question share a line with its own
   answers; the radios have to sit under the question, as they do on every other tab. */
.bstc-qs-grid > [class*="col-"] > p {
    display: block;
    width: 100%;
    margin-bottom: .5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #343434;
}
.bstc-qs-grid > [class*="col-"] > label {
    display: block;
    width: 100%;
    margin-bottom: .5rem;
}
.bstc-qs-grid .form-group {
    margin-bottom: 8px;
}

@media (max-width: 991px) {
    .bstc-qs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .bstc-qs-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Activity tab claimed state — must override Bootstrap .nav-tabs .nav-link.active */
.activity-tab-claimed,
.activity-tab-claimed.nav-link,
.activity-tab-claimed.nav-link.active,
.nav-tabs .activity-tab-claimed.nav-link.active,
.nav-tabs .activity-tab-claimed.nav-link.active:focus,
.nav-tabs .activity-tab-claimed.nav-link.active:hover,
.nav-tabs > .nav-item .activity-tab-claimed.nav-link.active,
.nav-tabs > .nav-item .activity-tab-claimed.nav-link.active:hover,
.nav-tabs > .nav-item .activity-tab-claimed.nav-link.active:focus {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}


.lbl-bess3 {
    background-color: #5dc4bf;
    color: #fff;
}
.lbl-bess4 {
    background-color: #a25295eb;
    color: #fff;
}
.lbl-bess5 {
    background-color: #4d7b7bd6;
    color: #fff;
}
/* ---------------------------------------------------------------------------
   Certificate cards in the JOB DETAILS column of the jobs listing (jobs-new6.js).

   Replaces the old `class="row row-grid" style="width:326px"` container. Two
   things made that bleed into the INSTALLATION DETAILS column next to it:

   1. `.row` carries margin-left/right: -15px. With an explicit 326px width the
      box still painted 326px wide but sat 15px further left, while the table
      only reserved 326 - 30 = 296px for it, so 30px of cards spilled sideways.
   2. `repeat(2, 1fr)` resolves to minmax(auto, 1fr), so a long unbreakable line
      in a card (e.g. "BESS3 PRCS Acp is not configured") could push its track
      wider than the container. minmax(0, 1fr) plus min-width: 0 on the items
      keeps both tracks inside the box no matter what a card contains.

   Everything here is scoped to .crt-cards-grid, so no other .row / .row-grid
   on any page is affected.
   --------------------------------------------------------------------------- */
.crt-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 326px;
    max-width: 100%;
    margin: 0;
}

/* The cards still carry Bootstrap col-md-* classes. Neutralise the float and the
   percentage width so the grid alone decides the geometry. */
.crt-cards-grid > [class*="col-"] {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

/* .figure is display:inline-block, so a card without .w-100 sized to its content
   and could overhang its track. Make every card fill its track and wrap. */
.crt-cards-grid .figure {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   Activity (certificate) tabs, BSTC-only state.

   syncActivityTabsNav() adds .gradiant-theme-section to #activityTabsContent when
   the tab strip is hidden (a non-NSW job, or an NSW job with no BESS activity
   available), so the lone BSTC pane reads as an ordinary form section rather than
   a bordered box with nothing above it.

   Both classes are single-class rules in each edit-job page's inline <style>, and
   .activity-tab-content is declared later there, so it would win on order alone.
   This two-class selector outranks it on specificity, and restates the gradient
   rather than relying on the cascade to supply it.
   --------------------------------------------------------------------------- */
.activity-tab-content.gradiant-theme-section {
    border: 0;
    background: linear-gradient(to top, #ebedee 0%, #fdfbfb 100%);
}

/* ---------------------------------------------------------------------------
   "Edit battery" modal (#batteryModel).

   Its body is a two-column brand/model/capacity form with the serial list beneath,
   which was cramped at the framework's dialog width. Lives here rather than in a
   page's inline <style> because the modal has three copies (modal-battery.html,
   which battery_common.js fetches and appends to body, plus the inline copy in each
   edit-job page) and one rule covers all of them.

   The rule being overridden is a fixed `width: 600px` (this Bootstrap 4 alpha sets
   width, not max-width), so the cap is what stops the dialog overflowing a viewport
   narrower than 850px; the 20px leaves the same gutter the framework's own
   small-screen margin does.
   --------------------------------------------------------------------------- */
#batteryModel .modal-dialog {
    width: 850px;
    max-width: calc(100% - 20px);
}


/* ---------------------------------------------------------------------------
   Certificate filter bar on the BESS jobs listing (jobs6-bess.html). Scoped to
   the id, which exists on that page only, so nothing else can pick these up.

   Opacity means EXCLUDED, never "not clicked": while no certificate is chosen
   (.no-filter) nothing is being filtered out, so every pill stays fully legible
   and only the ring says which one is active.
   ------------------------------------------------------------------------ */
#bessCertFilterBar {
    padding: 2px 0 10px;
}

.form-group.bessSubFilter {
    clear: left;
    margin-top: 8px;
    padding-left: 0;
    padding-right: 0;
}

.bessSubFilter .bessSubDateWrap {
    position: relative;
    float: left;
    width: 50%;
    padding: 0 15px;
}

.bessSubFilter .bessSubDateWrap .bessSubDate {
    width: 100%;
}

#bessCertFilterBar .bessCertFilterLbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #888;
    margin-right: 9px;
    vertical-align: middle;
}

#bessCertFilterBar .bessCertFilter {
    font-size: 12px;
    line-height: 1.15;
    padding: 6px 14px;
    margin-right: 5px;
    cursor: pointer;
    vertical-align: middle;
    opacity: .5;
    /* Transparent by default so turning the ring on cannot shift the row. */
    border: 2px solid transparent;
    transition: opacity .12s ease, border-color .12s ease;
}

#bessCertFilterBar.no-filter .bessCertFilter {
    opacity: 1;
}

#bessCertFilterBar .bessCertFilter.on {
    opacity: 1;
    border-color: #2b2f33;
}

/* "All" clears the filter rather than being one of the things filtered, so it never
   dims - it is the way back out and has to stay readable while a filter is on. */
#bessCertFilterBar .bessCertFilter[data-cert="ALL"] {
    opacity: 1;
}

/* ===== "Created by <user>" row caption (getCreatedByHtml in scripts.js) ===== */
/* Appended to the end of the ACTIONS cell of every listing row.

   Base rule: normal flow, on its own line under everything else in the cell
   (display:block + fit-content shrink-wraps it). This is the fallback and is
   always correct - it just sits directly after the last element rather than at
   the foot of the cell. */
.job-created-by {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    padding: 1px 8px 1px 6px;
    border: 1px solid #e1e5ea;
    border-left: 3px solid #a9b4c0;
    border-radius: 2px 9px 9px 2px;
    background: #f5f7f9;
    color: #7b8794;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-created-by .fa {
    margin-right: 4px;
    font-size: 9px;
    opacity: .7;
}

.job-created-by b {
    font-weight: 600;
    color: #4a5560;
}

/* Pin it to the foot of the cell, the way it read in the name column.

   :has() is used deliberately. The actions column is a different index in every
   one of these tables (fdata key "g" in some branches, "h" in others), so no
   nth-child rule reaches it; and wrapping the cell contents in a positioned div
   would break the row-removal handlers that walk
   $("[data-cmel=...]").parent().parent() - button -> td -> tr - by making them
   delete the cell instead of the row. Matching on the caption itself avoids both.

   A browser without :has() ignores this block entirely and keeps the in-flow
   layout above, so the failure mode is the current appearance, not a broken one.
   padding-bottom reserves the space the absolutely positioned chip no longer
   occupies, so it can never sit on top of the comment box.

   Two things had to be fixed before that reserve actually held, both of which
   let the chip land on top of the comment box in rows whose content reached the
   foot of the cell:

   1. !important on the padding. This selector scores 0,1,1 - :has() takes the
      specificity of its argument, so `td:has(> .job-created-by)` is one element
      plus one class - while application.min.css carries
      `table.dataTable tbody td { padding: 8px 10px }` at 0,1,3. That wins, the
      reserve was dropped, and 8px is less than the chip's own ~19px height.
      Raising specificity instead would mean naming the table's classes here, and
      these listings are not all built the same way.

   2. The clearfix. `.input-group` - the wrapper around the comment textarea and
      its pencil - is `float: left`, so it does not extend the cell's content
      height at all: the cell ended above the comment box, and a chip pinned to
      the cell's foot was pinned above the box's foot. Containing the float is
      what makes "the bottom of the cell" mean what it looks like it means.

   z-index keeps the chip painted over the comment box rather than behind it if
   they ever do meet. */
td:has(> .job-created-by) {
    position: relative;
    padding-bottom: 32px !important;
}

td:has(> .job-created-by)::after {
    content: "";
    display: block;
    clear: both;
}

td:has(> .job-created-by) > .job-created-by {
    position: absolute;
    z-index: 1;
    left: 8px;
    bottom: 8px;
    margin-top: 0;
    max-width: calc(100% - 16px);
}

.sticky-nav-section ~ .tab-content,
.sticky-nav-section ~ .tab-content .tab-content {
    z-index: auto;
}

.sticky-nav-section ~ .tab-content {
    overflow: visible;
}

.sticky-nav-section ~ .tab-content::after {
    content: "";
    display: table;
    clear: both;
}

#retailer_documents .draggable-item,
#retailer_documents_shared .draggable-item,
#retailer_documents_shared_ic .draggable-item,
.doc-row-view .draggable-item {
    max-width: 245px;
    vertical-align: top;
}

#retailer_documents .draggable-item > a,
#retailer_documents .draggable-item > .job-doc-link,
#retailer_documents_shared .draggable-item > a,
#retailer_documents_shared .draggable-item > .job-doc-link,
#retailer_documents_shared_ic .draggable-item > a,
#retailer_documents_shared_ic .draggable-item > .job-doc-link,
.doc-row-view .draggable-item > a,
.doc-row-view .draggable-item > .job-doc-link {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#wizard_docs .nav-pills > li > a.nav-link {
    background-color: #fff;
    color: #5d8fc2;
    border: 2px solid #5d8fc2;
    cursor: pointer;
    font-weight: 600;
}

#wizard_docs .nav-pills > li > a.nav-link:hover {
    background-color: #e8f0f8;
}

#wizard_docs .nav-pills > li > a.nav-link.active,
#wizard_docs .nav-pills > li > a.nav-link.active:hover {
    background-color: #5d8fc2;
    color: #fff;
}