/* Low-bandwidth loading overlay used by the shared browser layouts. */
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(/images/loading.gif) center no-repeat #fff;
    background-size: 65px 100px;
    background-color: #13121296;
    opacity: 0.90;
}

/* Shared text wrapping base; page tables retain their former width constraints. */
.wrapped-text {
    white-space: normal;
    word-wrap: break-word;
}

#apiUserActivityListTable .wrapped-text {
    max-width: 300px;
}

#returnApplicationListTable .wrapped-text {
    min-width: 120px;
}

body {
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-size: 0.9rem;
}
main {
    flex: 1; /* Grow to fill the remaining vertical space */
    background-color: #E2EDE9;
}
.content-wrapper, .main-content, .lighter-green-background{
    background-color: #E2EDE9;
    height: inherit;
}
.lighter-red-background {
    background-color: #ff000014;
}
.session-expired-modal-visible {
    display: block;
}

.lighter-blue-background {
    background-color: #d0e9ff;
}

.bg-datatable-header {
    background-color: #D5E3DF;
}

.custom-light-green-background{
    background-color: #CADFD5;
    height: inherit;
}
/* custom gap starts */
.px-60 {
  padding-left: 60px;
  padding-right: 60px;
}
.px-120 {
    padding-left: 120px;
    padding-right: 120px;
}
.px-10 {
    padding-left: 10px;
    padding-right: 10px;
}
.py-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.py-60-40 {
    padding-top: 60px;
    padding-bottom: 40px;
}
.py-60-60 {
    padding-top: 60px;
    padding-bottom: 60px;
}
.py-18 {
    padding-top: 18px;
    padding-bottom: 18px;
}
.mb-24 {
    margin-bottom: 24px;
}
.p-36 {
    padding: 36px;
}
.pt-60 {
    padding-top: 60px;
}
.pb-28 {
    padding-bottom: 28px;
}
.pb-60 {
    padding-bottom: 60px;
}
.p-24 {
    padding: 24px;
}
.gap-40 {
    padding-left: 35px;
    padding-right: 10px;
}
.gap-24 {
    padding: 24px;
}
.gap-y-24 {
    padding-top: 24px;
    padding-bottom: 24px;
}
.p-32 {
    padding: 32px;
}
.p-15 {
  padding: 15px;
}
.pt-gap {
    margin-top: 1.125rem;
}
.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}
/* custom gap ends */
/* color starts */
.download-btn-bg{
    background: rgba(157, 158, 152, 1);
}
.bg-light-gray {
    background-color: lightgray;
}
.bg-light-red {
    background-color: #B711111A;
}
.bg-mint-green {
    background-color: #DAF3D4;
}
.gray {
    color: #6c757d;
}
.gray-bg {
    background-color: #f2f4f7;
}
.gray-bg-200 {
    background-color: #e9ecef;
}
.red {
    color: red;
}
.orange {
    color: #b35c00;
}
.bg-lighter-green {
    background-color: #b5d5ca;
}
.dark-blue {
    color: #031b4d;
}
.dark-blue-text {
    color: #031b4d;
}
.dark-black-text {
    color: #212529;
    opacity: 75%;
}
.dark-black {
    color: #212529;
}
.green-opacity {
    color: #146c43;
}
.dark-blue {
  background-color: #031b4d;
}
.orange-bd {
    background-color: rgba(255, 246, 244, 1);
}
.red-bd {
    background: rgba(255, 227, 230, 1);
}
.dark-red-bg {
    background-color: rgba(220, 53, 69, 1);
}
.dark-gray-bg{
    background-color: rgba(239, 239, 239, 255);
}
.text-red {
    color: rgba(176, 42, 55, 1);
}
.text-light-gray {
    color: #9D9E98;
}
.text-green {
    color: #01573C;
}
.dark-blue-bg {
    /*background-color: #000000;*/
    background-color: #00000080;

}
.header-background {
    background-color: rgb(240, 248, 255);
}
.dark-green {
    background-color: rgba(17, 136, 15, 1);
}
.header-background-dark {
    background-color: rgb(240, 244, 255);
}
.pink-bg {
    background: rgba(255, 242, 243, 1);
}
.light-green {
    background: rgba(243, 255, 242, 1);
}
.border-color {
    border: 1px solid rgba(199, 203, 207, 1);
}
.close-btn-background {
    background-color: rgba(199, 203, 207, 1);
}
.custom-radius {
    border-radius: 10px;
    overflow: hidden;
}
.border-radius-24 {
    border-radius: 24px;
}
.border-radius-30 {
    border-radius: 30px;
}
.active-dynamic-content-btn {
    border-radius: 24px;
    border: 1px solid #01573C4D;
    background-color: #01573C;
    color: white;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
}
.inactive-dynamic-content-btn {
    color: #212529;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    border-radius: 24px;
}
.aoa-bg {
    background-color: #e9e9ea;
}
.aoa-text-color {
    color: #ffffff;
}
.custom-bg-blue{
    background-color: #3450B7;
}
.custom-bg-green{
   background-color: rgba(1, 87, 60, 1);
}
.custom-bg-hover-green:hover {
   background-color: rgba(1, 87, 60, 1);
}
.custom-border-green{
    border: 1px solid rgba(1, 87, 60, 1);
}
.custom-green-border {
    border-color: #01573C4D;
}
.custom-text-green{
  color: #01573C;
}
.custom-text-red{
    color: rgba(228, 17, 17, 1);
}
.custom-text-dark{
    color: #212529;
}
.custom-text-grey{
    color: #4A545C;
}
.custom-text-grey2{
    color: #212529;
}
.custom-bg-red{
    background: rgba(228, 17, 17, 1);
}
/* color ends */
/* fonts starts */

.header {
  font-size: 40px;
  font-weight: 500;
}
.sub-header {
    font-size: 16px;
    font-weight: 600;
}

.fs-16 {
    font-size: 16px;
}
.date-time-label {
    font-size: 12px;
    color: gray;
    font-weight: normal;
}
.font-label {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    opacity: 1;
}
.light-label{
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: rgba(74, 84, 92, 1);
}

.fs-16-24-bold {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
}

.fs-16-24-500 {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.error-font {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #dc3545;
}

.font-btn {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #0d6efd;
}
.submit-btn-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #fff;
}
.plc {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #070707;
    opacity: 0.8;
}
.fs-20b {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}
.fs-22 {
    font-size: 22px;
}
.fs-20-20-400 {
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
}
.aoa-font-12{
    font-size: 14px;
    font-weight: 800;
    line-height: 12px;
}
.aoa-font-20{
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
}
.border-end-black{
    border-right: 1px solid #0000004d;
}
.table-bordered {
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid black !important;
        padding: 8px;
        text-align: left;
    }
}
.black-border{
    border: 1px solid #6c757d;
}
.black-bottom{
    border-bottom: 1px solid #6c757d;
}
.border-left-right{
    border-left: 1px solid #6c757d;
    border-right: 1px solid #6c757d;
}
.mt-110{
    margin-top: 110px;
}
/* fonts ends */

/* custom width starts */

.w-100 {
  width: 100%;
}
.w-50 {
  width: 50%;
}
.w-120px{
    width: 120px;
    height: 35px;
}

.w-170px {
    width: 170px;
    height: 35px;
}
.w-120px-39h{
    width: 120px;
    height: 39px;
}
.w-100px{
    width: 120px;
}
.w-92px{
    width: 92px;
}
.w-25px{
    width: 25px;
}
.fs-16-24-700 {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.fs-20-24-500 {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
}
.fs-20-24-bold {
    font-size: 20px;
    font-weight: bold;
    line-height: 24px;
}
.fs-18-24-500-white {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: white;
}
.fs-24-38-500 {
    font-size: 24px;
    font-weight: 500;
    line-height: 38px;
}
.fs-24-38-500-bold {
    font-size: 24px;
    font-weight: bold;
    line-height: 38px;
}
.fs-24-34-500 {
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
}
.fs-32-38-700 {
    font-size: 32px;
    font-weight: 700;
    line-height: 38px;
}
.fs-40-48-500 {
    font-size: 40px;
    font-weight: 500;
    line-height: 48px;
}
.fs-14-20-500 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.fs-14-21-400 {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}
.fs-14-21-500 {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}
.fs-14-21-600 {
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
}
.fs-14-21-700 {
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
}
.fs-16-20-500{
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}
.fs-18-21-700 {
    font-size: 18px;
    font-weight: 700;
    line-height: 21px;
}
.fs-18-28-700 {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
}
.fs-18-500 {
    font-size: 18px;
    font-weight: 500;
}
.fs-24-32-700 {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}
.fs-24-32 {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}
/* fonts ends */
.main-body-color {
    background-color: rgba(246, 246, 249, 1);
}
/* custom width starts */
.w-100 {
    width: 100%;
}
.w-90 {
    width: 90%;
}
.w-80 {
    width: 80%;
}
.w-70 {
    width: 70%;
}
.w-60 {
    width: 60%;
}
.w-50 {
  width: 50%;
}
.w-40 {
    width: 40%;
}
.w-30 {
    width: 30%;
}
.w-20 {
    width: 20%;
}
.w-10 {
    width: 10%;
}
.w-50x {
    width: 50px;
}
.aoa-sidebar {
    width: 75px !important;
}
.aoa-table-body {
    width: calc(100% - 75px);
}
/* custom width ends */
.form-control:focus {
    border-color: #ff0000;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}
.custom-box-shadow {
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
}
/*.btn-secondary {*/
/*  background-color: transparent;*/
/*  border: none;*/
/*}*/
.profile-img {
  height: 40px;
  width: 40px;
}
.setting-icon {
  height: 12px;
  width: 12px;
}

.list-png {
  width: 16px;
  height: 16px;
  margin-top: -4px;
}

.footer {
  height: 56px;
}
a {
  text-decoration: none;
}
.btn-border {
    border-radius: 5px;
    padding: 1px 2px;
    border: 1px solid;
}
.all-submit-btn {
    background-color: rgba(25, 82, 244, 1);
    color: #fff;
    border: 1px solid rgba(25, 82, 244, 1);
    padding: 10px;
    font-size: 16px;
    font-weight: 24;
}
.all-submit-btn:hover {
    background-color: #fff;
    color: rgba(25, 82, 244, 1);
    border: 1px solid rgba(25, 82, 244, 1);
}
.d-plus-btn {
    background-color: rgba(25, 82, 244, 1);
    color: #fff;
    border: 1px solid transparent;
}

.d-plus-btn:hover {
    background-color: #fff;
    border: 1px solid rgba(25, 82, 244, 1);
    color: rgba(25, 82, 244, 1);
    padding: 10px;
}

.d-view-btn {
    background-color: transparent;
    color: rgba(25, 82, 244, 1);
    border: 1px solid rgba(25, 82, 244, 1);
}
.d-view-btn:hover {
    background-color: rgba(25, 82, 244, 1);
    color: #fff;
}
/* data table style starts*/
.statusLabelMini{
    font-size: 14px;
    border-radius: 7px;
    padding: 5px;
    min-width: 150px;
    text-align: center;
    font-weight: 500;
}

/* Secondary line under a row status pill, e.g. why a Draft is a Draft. Takes the pill's 150px column
   so the two read as one stacked unit, left-aligned within it so the note starts flush with the
   pill's left edge. Colour is .label-tertiary-border's, to sit quieter than the pill above it. */
.statusLabelNote{
    display: block;
    min-width: 150px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    color: rgb(58 66 65 / 68%);
}
.label-success-border {
    border: 1px solid #55ce6385;
    color: #0aa11b;
    background-color: #17b5290f;
    display: inline-block;
    min-width: 80px;
}
.table-bordered > :not(caption) > * {
    border: none;
}
.table > :not(:last-child) > :last-child > * {
    border: none;
}
.table-bordered > :not(caption) > * > * {
    border: none;
}
.table-striped>tbody>tr:nth-of-type(odd) {
    --bs-table-accent-bg: rgb(255, 255, 255);
    padding: 10px 0;
}
table.dataTable thead th, table.dataTable tbody td{
    padding: 10px 10px !important;
    border-color: #E2EDE9;
    border-left: 1px solid #E2EDE9;
}
table.dataTable thead th.p-0, table.dataTable tbody td.p-0{
    padding: 0 !important;
}
table.dataTable thead th{
    border-color: #B9CCC7;
}
table.dataTable thead th{
    background-color: #E2EDE9 !important
}
.table > :not(:last-child) > :last-child > *{
    padding: 10px 10px;
}
.dataTables_length label{
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: center;
}
.dataTables_wrapper .dataTables_length select{
    width: 60px;
}
.invoice-icon{
    width: 30px;
    color: black;
}
/* data table style ends*/
#aoaTable.custom-border{
 border: 1px solid #0000004d;
}
#aoaTable.custom-b-black{
    border-right: 1px solid black;
}
#aoaTable tr td{
    font-size: 12px;
    font-weight: normal;
}
#aoaTable tr th{
    font-size: 12px;
    font-weight: normal;
}
#aoaTable.table > thead{
background-color: #e9e9ea;
}

/*Radio button toggle*/
.custom-button {
    padding: 5px 20px;
    background-color: white;
    /*border: none;*/
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 0 !important;
}

.custom-button:hover,
.custom-button.selected {
    background-color: rgba(1, 87, 60, 1);
    color: white;
}

.radio-button-group {
    border: 1px solid #f2f2f2;
}

#leftRadioButton { /* First button */
    border-top-left-radius: 0.1875rem !important;
    border-bottom-left-radius: 0.1875rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#rightRadioButton { /* Second button */
    border-top-right-radius: 0.1875rem !important;
    border-bottom-right-radius: 0.1875rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* end */
.fnt{
    font-family: 'Inter', sans-serif;
    font-family: 'Roboto', sans-serif;
}
.subscriber-header{
    font-size: 12px;
    font-weight: bolder;
}
.mab-10{
    margin-bottom: 10px;
}
.withness-gap{
    margin-top: 100px;
}
.subscriber-info{
    font-size: 12px;
    font-weight: normal;
}
.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}
.iframe-style {
    height: 500px;
    width: 100%;
}
.custom-border-color{
    color: rgba(222, 226, 225, 1)
}
/*menu style starts*/

.left-link {
    font-size: 16px;
    line-height: 18px;
    color: rgba(0, 0, 0, .8);
}
.left-link a{
    color: #000000;
}
.left-link i {
    color: #000000;
}

.left-link:hover {
    background: rgba(243, 245, 235, 1);
    color: rgba(1, 87, 60, 1);
}

.left-link:hover a {
    color: rgba(1, 87, 60, 1);
}
.dropdown-toggle { outline: 0; }

.nav-flush .nav-link {
    border-radius: 0;
}

.left-link.active,
.left-link:hover,
.left-link:focus {
    background: rgba(243, 245, 235, 1);
    color: rgba(1, 87, 60, 1);
}
.left-link.focus-none:focus {
    background-color: inherit;
    color: inherit;
}
.left-link.active.focus-none:focus,
.left-link.focus-none:hover {
    background: rgba(243, 245, 235, 1);
    color: rgba(1, 87, 60, 1);
}
.left-link.btn-check:focus+.btn, .btn:focus{
    box-shadow: none !important;
}

.regular-box {
    background-color: rgba(231,232,230,255);
}
.border-comment-color {
    border: 1px solid #b9bcbc;
}
.btn-toggle::after {
    width: 1.25em;
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform .35s ease;
    transform-origin: .5em 50%;
}

.btn-toggle[aria-expanded="true"] {
    color: rgba(0, 0, 0, 1);
}
.btn-toggle[aria-expanded="true"]::after {
    transform: rotate(90deg);
}
.btn-toggle-p-1::after {
    width: 1.5rem;
    padding: .25rem !important;
    transform-origin: 50% 50%;
}

.btn-toggle-nav a {
    display: inline-flex;
    padding: 5px 20px;
    margin-top: 5px;
    text-decoration: none;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
    color: rgba(1, 87, 60, 1);
}
.scrollarea {
    overflow-y: auto;
}

.company-collapse-scroll {
    max-height: 420px;
}

/*menu style ends*/
/* misc style starts */
.error-back-img{
    width: 100%;
}
.invoice-button span{
    color: #000000;
}
#profileDropdown{
    border: transparent;
}
.user-image{
    width: 40px;
    height: 40px;
}
#profileDropdownContent{
    padding: 20px 10px;
}
#profileDropdownContent a{
    color: black;
    padding: 5px;
    font-size: 16px;
    font-weight: 500;
    line-height: 14px;
}
#profileDropdownContent a:hover {
    color: rgba(1, 87, 60, 1);
    background-color: rgba(213, 221, 217, 0.6);
}
.nextBtn{
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: white;
    border-radius: 5px;
}
.prevBtn,
.previewActionBtn{
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: white;
    border-radius: 5px;
}
.nextBtn:hover{
    background-color: rgba(1, 87, 60, 1);
    color: white;
}
.nextBtnDisabled {
    pointer-events: none;
}
.prevBtn:hover,
.previewActionBtn:hover{
    background-color: rgba(1, 87, 60, 1);
    color: white;
}
.btn-md {
    min-width: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
}
.green-hover:hover{
    background-color: rgba(1, 87, 60, 1) !important;
    color: white !important;
}
.view-btn span:hover{
    color: rgba(1, 87, 60, 1);
}
.accordion-button:not(.collapsed){
    background-color: rgba(246, 246, 249, 1);
    color: black;
}
.accordion-button:not(.collapsed) a{
    color: black;
}
.accordion-button a {
    color: black !important;
}
/* misc style ends */
.accordion-button{
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    color: black;
}
.accordion-button::after {
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
}
.custom-alert-color-bg{
    background: rgba(255, 227, 230, 1);
}
.custom-alert-color-text{
    color: rgba(210, 8, 8, 1);
}
.custom-alert-color-bg-success{
    background: rgb(229, 255, 227);
}
.custom-alert-color-text-success{
    color: rgb(0, 255, 0);
}
#design-bg{
    background-image: url("../../images/login/new-login-bg.png");
    /*background-position: center;*/
    background-repeat: no-repeat;
    background-size: 51% 93vh;
    /*min-height: -webkit-fill-available;*/
    height: inherit;
}

#design-bg-admin {
    background-image: url("../../images/login/admin-login-bg.png");
    /*background-position: center;*/
    background-repeat: no-repeat;
    background-size: 51% 93vh;
    /*min-height: -webkit-fill-available;*/
    height: inherit;
}
.design-bg-40{
    background-image: url("../../images/login/new-login-bg.png");
    background-repeat: no-repeat;
    background-size: 41% 90vh;
    height: inherit;
}
.custom-dropdown {
    position: relative;
    display: inline-block;
}
.custom-dropdown:hover {
    color: black;
}
.selected-option {
    padding: 5px 10px;
    cursor: pointer;
}
.dropdown-content {
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 999;
    width: 100%;
    margin-left: -12px;
    margin-top: 10px;
}
.dropdown-option {
    padding: 5px 10px;
    cursor: pointer;
}
.custom-profile-dropdown {
    width: auto;
    transform: translateX(-40%);
}
/* bootbox builds its own .modal-dialog markup at confirm()-time, so a fixed width for it can't
   be set in the template — only after the dialog exists, in the confirm() callback. !important
   because Bootstrap's own .modal-dialog carries breakpoint-specific max-width rules this has to
   beat regardless of viewport. */
.modal-dialog-wide {
    max-width: 600px !important;
}
/* Fixed toggle target for a couple of controls whose visibility is corrected by JS after a
   library (Select2) hides them — same "class over JS-set inline style" swap as .d-none. */
.force-visible {
    visibility: visible;
}
/* select2.min.css sets .select2-search--dropdown .select2-search__field { width: 100% } —
   !important needed to win over that base rule from a single class on the field itself. */
.select2-search-wide {
    width: 340px !important;
}
/* datatables.min.css's .dataTables_wrapper .dataTables_filter sets float/text-align only, no
   competing width — no !important needed here. */
.datatables-filter-wide {
    width: 70%;
}
/* Pure-CSS replacement for jQuery's slideUp()/slideDown()/slideToggle(): display:none can't be
   transitioned, so max-height stands in for it (0 collapsed, generously large expanded — a
   fixed cap rather than true auto-height, the standard workaround since CSS has no transition
   from a computed height to "auto"). Toggle .slide-expanded via class, never .style directly. */
.slide-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.slide-collapse.slide-expanded {
    max-height: 1000px;
}

/* Pure-CSS replacement for jQuery's fadeOut()/fadeIn() (or .animate({opacity:...})): display:none
   can't be transitioned, so this fades opacity instead and only switches visibility (removing it
   from layout/hit-testing/accessibility) once that fade has actually finished — the 0s duration
   with a 0.6s delay on the way out, no delay on the way in, is what staggers "still interactive
   and visible while fading" from "gone after the animation completes" without a JS timer having
   to duplicate the CSS duration. 0.6s matches jQuery's fadeOut("slow"), which every current use
   of this class was converted from. */
.fade-toggle {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0s 0s;
}
.fade-toggle.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0s 0.6s;
}

/* Same mechanism as .fade-toggle, at the slower 3000ms one caller (the login page's post-confetti
   reveal) originally used via jQuery's .show(3000) — .fade-out is shared across both duration
   variants; only the transition length differs. */
.fade-toggle-slow {
    opacity: 1;
    visibility: visible;
    transition: opacity 3s ease, visibility 0s 0s;
}
.fade-toggle-slow.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 3s ease, visibility 0s 3s;
}
.error-shadow{
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    text-align: center;
    height: 100px;
    background: linear-gradient(179.72deg, #D1D1D1 -15.99%, rgba(235, 235, 235, 0) 31.39%);
}
.error-header{
    font-size: 128px;
    font-weight: 700;
    color: rgba(187, 125, 11, 1);
}
.error-sub-header{
    font-size: 18px;
    font-weight: 700;
    color: rgba(33, 37, 41, 1);
}
.custom-border {
    border: 1px solid #000000;
}
/* Custom styles for the toggle button */
.custom-toggle .form-check-input {
    background-color: #dc3545;
    border-color: #dc3545;
    width: 3.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}

.custom-toggle .form-check-input:focus{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}

.custom-toggle .form-check-input:checked {
    background-color: rgba(1, 87, 60, 1);
    border-color: rgb(0, 66, 46);
}

/* responsive starts */

@media (min-width: 420px) {
    .header {
        font-size: 32px;
        font-weight: 500;
    }
}

@media (min-width: 576px) {
    .header {
        font-size: 36px;
        font-weight: 500;
    }
}
.py-1 {
  padding-top: 1.2rem!important;
  padding-bottom: 1.2rem!important;
}
.fs-23 {
  font-size: 23px;
}
.fs-32 {
  font-size: 32px;
}

@media (min-width: 768px) {
    .header {
        font-size: 40px;
        font-weight: 500;
    }
}
@media (min-width: 992px) {
}

.login-wrapper-div{
    width: 500px;
    /*box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.10);*/
    border-radius: 8px;
    padding-left: 30px !important;
    padding-right: 30px !important;
}
.form-control {
    border-radius: 6px !important;
}
.common-footer{
    margin-top: -35px;
    background-color: black;
    padding: 11px;
}
.footer-text{
    color: white;
    text-align: center;
}
.font-color-white{
    color: white;
}
.content-border{
    border: 1px solid #B9CCC7;
}
.content-dark-border{
    border: 1px solid #1a9d7a;
}
.content-top-green-bg{
    background-color: #01573C;
}
.content-top-color-2-bg{
    background-color: #786b0a;
}
.content-top-color-3-bg{
    background-color: #0a7874;
}
.content-light-green-bg{
    background-color: #B9CCC7;
}
.content-light-border{
    border: 1px solid #B9CCC7;
}
.min-height-800{
    min-height: 800px;
}
.font-color-black{
    color: black !important;
}
.fs-20-500 {
    font-size: 20px;
    font-weight: 500;
}
.fs-22-500 {
    font-size: 22px;
    font-weight: 500;
}
.bottom-border-2{
    border-bottom: 2px solid #01573c4a;
}
.top-border-2{
    border-top: 2px solid #01573c4a;
}
.bottom-border-1 {
    border-bottom: 1px solid #01573c4a;
}
.fs-14{
    font-size: 14px;
}
.fs-12{
    font-size: 12px;
}
.fs-8 {
    font-size: 8px;
}
.min-height-500{
    min-height: 500px;
}
.max-height-500{
    max-height: 500px;
}
.max-height-100{
    max-height: 100px;
}
.entity-dashboard-summary-icon{
    width: 40px;
    height: 40px;
}
.cyan-bg{
    background-color: #DCFCEB;
}
.pest-bg{
    background-color: #D0FFF4;
}
.margin-top-11{
    margin-top: 11px;
}
.no-before:before {
    content:none !important;
}
.w-200{
    width: 200px;
}
.govt-logo{
    width: 60px;
}
.rjsc-logo{
    height: 100%;
    margin-top: 9px;
}
.custom-white-anchor-tag:hover{
    color: #e0eae6;
    text-decoration: underline;
}
.btn-primary {
    color: #fff;
    background-color: rgba(1, 87, 60, 1);
    border-color: rgba(1, 87, 60, 1);
}

.btn-primary:hover,
.btn-check:focus + .btn-primary,
.btn-primary:focus {
    color: #fff;
    background-color: rgba(1, 87, 60, 1);
    border-color: rgba(1, 87, 60, 1);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: #fff !important;
    background-color: rgba(1, 87, 60, 0.6); /* Optional: dim effect */
    border-color: rgba(1, 87, 60, 0.6);
    cursor: not-allowed;
    opacity: 0.8;
}

.btn-blue {
    color: #fff;
    background-color: rgba(13, 112, 240, 0.84);
    border-color: rgba(13, 112, 240, 0.84)
}

.btn-blue:hover, .btn-check:focus + .btn-blue, .btn-blue:focus {
    color: #fff;
    background-color: rgba(13, 112, 240, 0.78);
    border-color: rgba(13, 112, 240, 0.78)
}
.btn-green {
    color: #fff;
    background-color: rgb(18, 157, 102);
    border-color: rgb(18, 157, 102);
}

.btn-green:hover, .btn-check:focus + .btn-green, .btn-green:focus {
    color: #fff;
    background-color: rgb(18, 157, 102, 0.8);
    border-color: rgb(18, 157, 102, 0.8);
}
.disabled{
    background-color: rgba(221, 221, 221, 0.7);
}
.no-background-color{
    background: none;
}
/*custom checkbox*/


 .checkbox-wrapper-33 {
     --s-xsmall: 0.625em;
     --s-small: 1.2em;
     --border-width: 1px;
     --c-primary: #01573C;
     --c-primary-20-percent-opacity: #E2EDE9;
     --c-primary-10-percent-opacity: #01573C;
     --t-base: 0.4s;
     --t-fast: 0.2s;
     --e-in: ease-in;
     --e-out: cubic-bezier(.11,.29,.18,.98);
 }

.checkbox-wrapper-33 .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.checkbox-wrapper-33 .checkbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.checkbox-wrapper-33 .checkbox + .checkbox {
    margin-top: var(--s-small);
}
.checkbox-wrapper-33 .checkbox__symbol {
    display: inline-block;
    display: flex;
    margin-right: calc(var(--s-small) * 0.7);
    border: var(--border-width) solid var(--c-primary);
    position: relative;
    border-radius: 0.1em;
    width: 1.1em;
    height: 1.1em;
    /*transition: box-shadow var(--t-base) var(--e-out), background-color var(--t-base);*/
    /*box-shadow: 0 0 0 0 var(--c-primary-10-percent-opacity);*/
    background-color: white;
}
.checkbox-wrapper-33 .checkbox__symbol:after {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: 0.25em;
    height: 0.25em;
    background-color: var(--c-primary-20-percent-opacity);
    opacity: 0;
    border-radius: 3em;
    /*transform: scale(1);*/
    /*transform-origin: 50% 50%;*/
}
.checkbox-wrapper-33 .checkbox .icon-checkbox {
    width: 0.7em;
    height: 0.7em;
    margin: auto;
    fill: none;
    stroke-width: 3;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    color: var(--c-primary);
    display: inline-block;
    background-color: white;
}
.checkbox-wrapper-33 .checkbox .icon-checkbox path {
    transition: stroke-dashoffset var(--t-fast) var(--e-in);
    stroke-dasharray: 30px, 31px;
    stroke-dashoffset: 31px;
}
.checkbox-wrapper-33 .checkbox__textwrapper {
    margin: 0;
}
.checkbox-wrapper-33 .checkbox__trigger:checked + .checkbox__symbol:after {
    /*-webkit-animation: ripple-33 1.5s var(--e-out);*/
    /*animation: ripple-33 1.5s var(--e-out);*/
}
.checkbox-wrapper-33 .checkbox__trigger:checked + .checkbox__symbol .icon-checkbox path {
    /*transition: stroke-dashoffset var(--t-base) var(--e-out);*/
    stroke-dashoffset: 0px;
}
.checkbox-wrapper-33 .checkbox__trigger:focus + .checkbox__symbol {
    /*box-shadow: 0 0 0 0.25em var(--c-primary-20-percent-opacity);*/
}

@-webkit-keyframes ripple-33 {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: scale(20);
    }
}

@keyframes ripple-33 {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: scale(20);
    }
}
.checkbox-wrapper-33.dashed-border {
    border: 1px dashed #00000080;
}
.checkbox-wrapper-33.double-border {
    border: 1px double #00000080;
}

.text-bg-danger {
    background-color: #dc3545;
    color: #ffffff;
}

.custom-fw-bold {
    font-weight: 850 !important
}

.main-content {
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 40px;
}

.cross-icon-start::before {
    font-family: "Font Awesome 6 Free", serif;
    content: "\f057";
    padding-right: 0.25rem;
    font-weight: 900;
}

.check-circle-icon-start::before {
    font-family: "Font Awesome 6 Free", serif;
    content: "\f058";
    padding-right: 0.25rem;
    font-weight: 900;
}

.warning-icon-start::before {
    font-family: "Font Awesome 6 Free", serif;
    content: "\f071";
    padding-right: 0.25rem;
    font-weight: 900;
}

.opacity-90 {
    opacity: 0.9;
}

.min-w-fit {
    min-width: fit-content;
}
.bg-light-yellow {
    background-color: rgb(255 245 208);
}
.text-color-darkred{
    color: #bd0000e0;
}

/**
 *	This element is created inside your target element
 *	It is used so that your own element will not need to be altered
 **/
.time_circles {
    position: relative;
    width: 100%;
    height: 100%;
}
.border-bottom-2 {
    border-bottom: 2px solid #000; /* Change the color as needed */
}

.sign-out-link {
    color: rgba(1, 87, 60, 1);
    text-decoration: none;
}

.sign-out-link:hover {
    color: rgba(0, 67, 46);
    text-decoration: underline;
}
.form-check-input-role-select {
    appearance: none;
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    border: 2px solid #ccc;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-top: 0;
}

.form-check-input-role-select:checked {
    background-color: white;
    border: 3px solid #005435;
    box-shadow: 0 0 0 3px #91ee8e;
}

.form-check-input-role-select.checked {
    color: #005435;
    font-weight: bold;
}
.form-check-input:checked {
    background-color: rgba(1, 87, 60, 1);
    border-color:  rgba(0, 67, 46, 1);
}
.form-check-label.checked {
    color: rgba(1, 87, 60, 1);
    font-weight: bold;
}
/**
 *	This is all the elements used to house all text used
 * in time circles
 **/
.time_circles > div {
    position: absolute;
    text-align: right;
}

/**
 *	Titles (Days, Hours, etc)
 **/
.time_circles > div > h4 {
    margin: 0;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Century Gothic', Arial;
    line-height: 1;
    /*font-size: 9px !important;*/
    /*position: absolute;*/
    /*bottom: -24px;*/
    /*left: 14px;*/
}

/**
 *	Time numbers, ie: 12
 **/
.time_circles > div > span {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Century Gothic', Arial;
    line-height: 1;
    font-weight: bold;
    /*font-size: 16px !important;*/
}

.anti-d-plus-btn {
    background-color: #FFFFFF !important;
    color: #01573C;
    border: 1px solid #01573C;
    border-radius: 2px!important;
}

.anti-d-plus-btn:hover {
    background-color: #01573C !important;
    border: 1px solid #01573C;
    color:  white !important;
}
#advanced-filter-btn::after,
.advanced-filter-btn::after {
    width: 1.25em;
    line-height: 0;
    content: url("/images/icons/green-down-arrow.svg");
    transition: transform .35s ease;
    transform-origin: .5em 50%;
}
#advanced-filter-btn[aria-expanded="true"],
.advanced-filter-btn[aria-expanded="true"] {
    color: #fff;
    background-color: rgba(1, 87, 60, 1);
    border-color: rgba(1, 87, 60, 1);
}
#advanced-filter-btn[aria-expanded="true"]::after,
.advanced-filter-btn[aria-expanded="true"]::after {
    content: url("/images/icons/white-up-arrow.svg");
}
.vh-87 {
    height: 87vh;
}
.vh-80 {
    height: 80vh;
}
.vh-90 {
    height: 90vh;
}
.max-vh-78 {
    max-height: 78vh;
}
.max-vh-40 {
    max-height: 40vh;
}
.nav-pills .nav-link-green.active {
    background-color: #01573C;
}
.nav-pills .nav-link-green {
    color: #01573C;
}
.group-submission-search-field {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
}
.nav-tabs .nav-link-green.active,
.active-tab {
    background-color: #01573C;
    color: white;
}
.nav-tabs .nav-link-green,
.inactive-tab {
    color: #212529;
    background-color: white;
}

/* Vertical layout: tables are stacked one after the other */
.vertical-layout table {
    width: 100%;
    margin-bottom: 20px;
}

/* Horizontal layout: tables are side by side */
.horizontal-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.horizontal-layout table {
    width: 48%;
    margin: 0; /* Remove margin to ensure both tables align */
    vertical-align: top;/* Adjust the width of the tables as needed */
}
caption {
    caption-side: top; /* Ensures the caption stays at the top */
    font-weight: bold;
    text-align: center;
    padding: 5px;
    margin-bottom: 5px;
}
.dropdown-toggle.toggle-icon-none::after {
    display: none;
}
.min-height-400{
    min-height: 400px;
}
.min-height-400{
    min-height: 400px;
}

#notificationIcon .badge {
    margin-top: -1.2rem;
    font-size: 0.9rem;       /* Smaller text size */
    padding: 0.25em 0.4em;   /* Reduced padding */
    line-height: 1;
    margin-left: 7px;
}

#notificationDropdown {
  display: none;
  max-height: 300px;
  margin-left: -120px;
  overflow-y: auto;
  width: auto;
}

/* Title Text */
.notification-title {
  word-wrap: break-word;
  white-space: normal;
  flex-grow: 1;
  margin-right: 10px;
}

/* View Button */
.view-button {
  margin-left: 1px;
}

/* Dropdown Item (for better spacing and alignment) */
.dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

.dropdown-item i {
  margin-right: 8px;
}

/* Empty Notification Message */
.dropdown-item span {
  font-style: italic;
  color: #888;
}

.custom-bell-icon {
  font-size: 15px; /* Adjust the size as needed */
  color: rgba(53, 54, 57, 0.64);      /* Optional: Change the icon color */
  position: relative;
}
#notificationDropdown .dropdown-item small {
  margin-top: 5px; /* Adds some space between the message and the date */
  font-size: 0.85rem; /* Slightly smaller font size */
  color: #6c757d; /* Muted color for the date */
}

.min-height-0 {
    min-height: 0;
}
.overflow-y-auto {
    overflow-y: auto;
}

.hidden {
    display: none !important;
}
.top-1rem {
    top: 1rem;
}
.bottom-1rem {
    bottom: 1rem;
}
.table-row-selected {
    border: 2px solid #54d554 !important;
    box-shadow: 0px 4px 10px rgba(0, 128, 0, 0.5); /* Green shadow */
    transition: all 0.3s ease-in-out;
}

#profileDropdownContent {
    position: absolute;
    z-index: 9999;
    border: solid #dfd6d6 2px;
}

#hideDropdown {
    position: relative;
}
.h-30px {
    height: 30px;
}

.tree {
    margin-left: 20px;
}

.tree-node {
    position: relative;
    margin-left: 20px;
    list-style-type: none;
}

.tree-node::before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    border-left: 1px solid #ccc;
    height: 100%;
}

.tree-node:last-child::before {
    /*height: 20px;*/
    height: 50%;
}

.tree-toggler {
    position: relative;
    cursor: pointer;
    padding: 8px 0 0;
}

.tree-toggler::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -20px;
    width: 20px;
    border-top: 1px solid #ccc;
}

.tree-parent {
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #f8f9fa;
    display: inline-block;
}

.tree-children {
    padding-left: 0;
    margin-bottom: 0 !important;
}

.tree-child {
    position: relative;
    /*margin-top: 8px;*/
    padding: 5px 10px;
    /*border-radius: 4px;*/
    background-color: #fff;
}

.tree-child::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -20px;
    width: 20px;
    border-top: 1px solid #ccc;
}

.badge-in-progress {
    background-color: #ffc107;
    color: #212529;
}

.badge-approved {
    background-color: #198754;
    color: white;
}

@media (min-width: 768px) {
    .modal-xxl {
        max-width: 1400px;
        width: 90%;
    }
}

#customViewToggle .btn-check:checked + .btn {

    background-color: rgba(1, 87, 60, 1);
    border-color: green;
    color: #fff;
}

#customViewToggle .btn {
    transition: background-color 0.3s, color 0.3s;
    border-color: green;
}

#customViewToggle .btn:hover {
    background-color: rgba(164, 226, 164, 0.2);
}

#listView {
    max-width: 70%;
    margin: 0 auto;
}

.custom-switch {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f3f4f6;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 250px;
}

.custom-switch .form-check-input {
    width: 2.5em;
    height: 1.5em;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-switch .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.custom-switch .form-check-label {
    font-weight: bold;
    font-size: 1rem;
    color: #495057;
    cursor: pointer;
}

#customViewToggle .btn-check:checked + .btn {

    background-color: rgba(1, 87, 60, 1);
    border-color: green;
    color: #fff;
}

#customViewToggle .btn {
    transition: background-color 0.3s, color 0.3s;
    border-color: green;
}

#customViewToggle .btn:hover {
    background-color: rgba(164, 226, 164, 0.2);
}

#listView {
    max-width: 70%;
    margin: 0 auto;
}

.custom-switch {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f3f4f6;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 250px;
}

.custom-switch .form-check-input {
    width: 2.5em;
    height: 1.5em;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-switch .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.custom-switch .form-check-label {
    font-weight: bold;
    font-size: 1rem;
    color: #495057;
    cursor: pointer;
}


/*
 * Locked-field cue, shared by two flows: fields on a returned application whose values may not be edited, and
 * fields already filled at migration and locked in fill-missing-data mode (applied by JS). Both class names are
 * kept so each script stays independently addressable.
 */
.returned-readonly-field,
.migrated-locked-field {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

/** Locked clause table stays scrollable to read; only its contents are made non-interactive. */
.moaClauseTableWrapperDiv.returned-readonly-field {
    cursor: not-allowed;
}

.moaClauseTableWrapperDiv.returned-readonly-field * {
    pointer-events: none;
}

/* Non-form locked elements that don't scroll their own content (see isScrollable() in
   returned-edit-restriction.js) additionally lose pointer events entirely. */
.returned-readonly-field.returned-readonly-no-interact {
    pointer-events: none;
}

.identity-photo-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
}

.person-photo {
    width: var(--ebrs-photo-w);
    height: var(--ebrs-photo-h);
    object-fit: cover;
}

.person-signature {
    max-width: var(--ebrs-signature-max-w);
    max-height: var(--ebrs-signature-max-h);
    object-fit: contain;
}

.text-over-allocated {
    color: #ad1b1b;
}

/* Greys out the bootbox confirm button while the required feedback checkbox is unchecked.
   Combined with .btn-success for specificity over bootstrap.min.css's .btn-success rule. */
.btn-success.confirm-btn-unconfirmed {
    background-color: gray;
}

/* Dims a table row behind its loading spinner overlay while an NID/TIN validation call is in flight. */
.row-validation-loading {
    filter: blur(2px);
    opacity: 0.6;
}

.input-width-100 {
    width: 100px;
}

.icon-edit-brand {
    color: rgba(1, 87, 60, 1);
}

.icon-delete-danger {
    color: #ad1b1b;
}

/** Dims the contents of a locked region, leaving its lock badge fully visible. */
.returned-locked-region > :not(.returned-lock-badge) {
    opacity: 0.5;
}

/** Banner marking a region as locked on a returned application. */
.returned-lock-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.6rem 1rem;
    background-color: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    color: #5d4037;
    font-weight: 600;
}

/* richText editor rendered in preview (non-editable) mode on returned applications */
.richText .richText-editor[contenteditable="false"] {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    pointer-events: none;
}

/* obrs-pdf-viewer.js — app-wide inline PDF viewer (pdf.js PDFViewer/PDFFindController), the one
   shared replacement for every dead <embed type="application/pdf"> preview in the app. The mount
   element (class "obrs-pdf-viewer-mount") is sized by Bootstrap's own w-100/h-100 utilities in
   markup, against a parent that already sets the real size (a fixed-height wrapper, a flex/grid
   cell, ...) — this only styles the toolbar+viewer stack inside it. Built on the app's own design
   tokens (tokens.css) and the same BEM-ish "ebrs-" component language as components.css, not
   ad hoc hex values, so it reads as part of this product rather than a bolted-on widget. */
.obrs-pdf-viewer-mount {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ebrs-color-border);
    border-radius: var(--ebrs-radius-lg);
    background: var(--ebrs-color-surface);
    font-family: var(--ebrs-font-sans);
    --obrs-pdf-ring: 0 0 0 2px var(--ebrs-color-surface), 0 0 0 4px var(--ebrs-color-fg-strong);
}
/* Fallback for a mount that failed to load and has no page-specific error card of its own (see
   obrs-pdf-viewer.js's file header) — most call sites outside the registration single view render
   nothing more elaborate. */
.obrs-pdf-viewer-mount-error {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--ebrs-space-xs); height: 100%; padding: var(--ebrs-space-lg); text-align: center;
    font-size: var(--ebrs-font-size-sm); color: var(--ebrs-color-fg-muted);
}
.obrs-pdf-viewer-mount-error svg {
    color: var(--ebrs-color-fg-subtle);
}

/* A modern editor-style toolbar: each cluster of controls (page nav, zoom, find) is its own
   pill-shaped "chip" with a sunken tint, buttons living borderless inside it and only gaining a
   raised card look on hover/focus — the segmented-control language of Google Drive's viewer,
   Notion and macOS toolbars, not a row of individually boxed buttons (which is what read as
   dated). Chips sit on a plain toolbar strip with a hairline + soft shadow underneath it, so the
   bar itself feels like it floats a level above the page canvas. */
.obrs-pdf-toolbar {
    display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap;
    gap: var(--ebrs-space-sm); padding: var(--ebrs-space-xs) var(--ebrs-space-sm);
    border-bottom: 1px solid var(--ebrs-color-border); flex-shrink: 0;
    background: var(--ebrs-color-surface);
    box-shadow: var(--ebrs-shadow-xs);
    position: relative; z-index: 1;
    font-size: var(--ebrs-font-size-xs); color: var(--ebrs-color-fg-muted);
}
.obrs-pdf-toolbar-group {
    display: flex; align-items: center; gap: 1px;
    background: var(--ebrs-color-surface-sunken);
    border-radius: var(--ebrs-radius-pill);
    padding: 3px;
}
.obrs-pdf-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--ebrs-control-height-sm); height: var(--ebrs-control-height-sm);
    padding: 0; background: transparent; border: none;
    border-radius: var(--ebrs-radius-pill); color: var(--ebrs-color-fg-muted);
    cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s;
}
.obrs-pdf-btn svg {
    width: 18px; height: 18px;
}
.obrs-pdf-btn:hover:not(:disabled) {
    background: var(--ebrs-color-surface); color: var(--ebrs-color-fg-strong);
    box-shadow: var(--ebrs-shadow-xs);
}
.obrs-pdf-btn:active:not(:disabled) {
    background: var(--ebrs-color-fg-strong); color: var(--ebrs-color-surface);
    box-shadow: none;
}
.obrs-pdf-btn:focus-visible {
    outline: none; box-shadow: var(--obrs-pdf-ring);
}
.obrs-pdf-btn:disabled {
    color: var(--ebrs-color-fg-subtle); opacity: .45; cursor: not-allowed;
}
/* The page-number field and " / N" count read as one inline unit inside the pill — no visible
   input border of its own, so "1 / 12" looks like a single label the first number happens to be
   editable in, not a form field bolted onto a toolbar. Same treatment for the zoom percentage. */
.obrs-pdf-page-input,
.obrs-pdf-zoom-input {
    width: 2.25em; height: var(--ebrs-control-height-sm); padding: 0;
    margin: 0 var(--ebrs-space-3xs); border: none; border-radius: var(--ebrs-radius-sm);
    background: transparent; font-size: var(--ebrs-font-size-sm); font-weight: var(--ebrs-font-weight-medium);
    text-align: center; color: var(--ebrs-color-fg);
}
.obrs-pdf-zoom-input {
    width: 2.75em;
}
.obrs-pdf-page-input:focus,
.obrs-pdf-zoom-input:focus {
    outline: none; background: var(--ebrs-color-surface); box-shadow: var(--obrs-pdf-ring);
}
.obrs-pdf-page-count {
    min-width: 2.25em; padding: 0 var(--ebrs-space-3xs); text-align: center;
    font-size: var(--ebrs-font-size-sm); font-weight: var(--ebrs-font-weight-medium);
    color: var(--ebrs-color-fg);
}
/* The find bar is one continuous pill (icon + input + prev/next + count), the same shape as the
   button chips, so it reads as a peer control in the same visual language, not a plain <input>
   dropped into the layout. */
.obrs-pdf-find-group {
    position: relative; display: flex; align-items: center; gap: 1px;
    margin-left: auto; /* the only group pinned to the right edge */
    background: var(--ebrs-color-surface-sunken);
    border-radius: var(--ebrs-radius-pill);
    padding: 3px 3px 3px var(--ebrs-space-sm);
    transition: box-shadow .12s;
}
.obrs-pdf-find-group:focus-within {
    box-shadow: var(--obrs-pdf-ring);
}
.obrs-pdf-find-icon {
    width: 15px; height: 15px; margin-right: var(--ebrs-space-2xs);
    color: var(--ebrs-color-fg-subtle); flex-shrink: 0;
}
.obrs-pdf-find-input {
    height: var(--ebrs-control-height-sm); padding: 0; border: none; background: transparent;
    font-size: var(--ebrs-font-size-sm); width: 160px; color: var(--ebrs-color-fg);
}
.obrs-pdf-find-input:focus {
    outline: none;
}
.obrs-pdf-find-count {
    min-width: 4.5em; padding: 0 var(--ebrs-space-xs) 0 var(--ebrs-space-2xs);
    font-size: var(--ebrs-font-size-xs); color: var(--ebrs-color-fg-muted);
}
.obrs-pdf-find-count--no-match {
    color: var(--ebrs-color-danger);
}
/* PDFViewer itself requires this element to compute as position:absolute at runtime (it throws
   otherwise) — the containing block for that is .obrs-pdf-viewer-container just below. */
.obrs-pdf-viewer-container {
    position: relative; flex: 1; min-height: 0; overflow: hidden;
    background: var(--ebrs-color-canvas);
}
.obrs-pdf-viewer-absolute {
    position: absolute; inset: 0; overflow: auto;
    padding: var(--ebrs-space-lg) 0;
}
/* pdf.js renders each page edge-to-edge with only a hairline border by default (see
   pdf_viewer.min.css's own .pdfViewer .page rule) — a drop shadow on top of the tinted canvas
   above is what makes each page read as a sheet of paper sitting on a surface, the same "floating
   page" treatment Google Docs/Drive and Acrobat's web viewer use, instead of a flat page glued to
   its background. */
.pdfViewer .page {
    box-shadow: var(--ebrs-shadow-md);
    border: none !important;
}

/* obrs-pdf-viewer.js's Download button: an off-screen <a download> it clicks programmatically to
   trigger the browser's own Save As flow — never shown, so this only needs to collapse it out of
   layout, not actually hide it (a real `display:none` element's programmatic .click() is a no-op
   in some browsers). */
.obrs-pdf-download-link {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}