/* Content-Type: text/css  */

.corporate .sectionone .article-heading h1:after {
    content: "Hackney Services and Licences";
}

.top {
    margin-top: 20px;
}

.footer {
    margin-top: 10px;
    border-top: 2px solid #E6E6E6;
}

.bottom {
    margin-top: 10px;
}

.navbar {
    margin-bottom: 50px;
    border-radius: 0;
}

.top-header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.top-header li {
    float: left;
}

.top-header li a {
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#search_address img {
    width: 100%
}

.show_colours .modal-header {
    background-color: #00634a !important
}

.gi-2x {
    font-size: 2em;
}

.gi-3x {
    font-size: 3em;
}

.gi-4x {
    font-size: 4em;
}

.gi-5x {
    font-size: 5em;
}

.menu {
    padding: 0px ! important;
}

.login a span {
    color: #2e8aca;
}

.login a span:hover {
    text-decoration: underline;
}

.pointer {
    cursor: pointer;
}

.break {
    margin-top: 25px;
}

form {
    margin-bottom: 1em;
}

.previous-license-hide {
    line-height: 1.4em;
}

.panel {
    height: 100%;
}

.input-group~.form-control-feedback {
    right: 40px;
}

.radio-label {
    margin: 5px 10px;
}

.radio-label input {
    margin-right: 5px!important;
}

#application_details_modal,
#change_status_modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.tick {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 0.5s ease-out;
    -moz-transition: stroke-dashoffset 0.5s ease-out;
    -ms-transition: stroke-dashoffset 0.5s ease-out;
    -o-transition: stroke-dashoffset 0.5s ease-out;
    transition: stroke-dashoffset 0.5s ease-out;
}

.drawn+svg .path {
    opacity: 1;
    stroke-dashoffset: 0;
}

.same-height .panel-body {
    max-height: 250px;
    overflow-y: scroll;
  
}

.fixed-height .panel-body {
    max-height: 250px;
    overflow-y: scroll;
    margin-bottom: 20px;
}

.positive_message {
    font-size: 2em;
    padding: 20px;
    color: #3c763d;
}

table {
    max-width: 100%;
}

.table_holder {
    overflow-x: scroll;
}

.dashboard-container .panel-body {
    overflow-y: scroll;
    height: 250px;
}

.uploaded_documents_list button {
    max-width: calc(100% - 50px);
}

.glyphicon-trash,
.edit-zone-pencil {
    color: #B30000;
    display: inline-block;
    float: right;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
}

.edit-zone-pencil {
    color: black;
}

.glyphicon-plus-sign {
    color: green;
    float: right;
    min-width: 20px;
    padding: 5px;
}

.glyphicon-trash:hover,
.glyphicon-plus-sign:hover,
.edit-zone-pencil:hover,
.glyphicon-pencil:hover {
    cursor: pointer;
    opacity: 1;
    filter: brightness(50%);
}

.glyphicon-ok {
    color: green;
}

.glyphicon-remove {
    color: red;
}

#correspondence_table tbody tr:hover,
#licenses_table tbody tr:hover {
    cursor: pointer;
    background-color: #f1fff1;
}

hr {
    margin-bottom: 0px!important;
}

span {
    display: block;
    margin-bottom: 5px;
}

#application_details_modal span {
    display: inline-block;
    margin-bottom: 5px;
}

.link-white-space {
    white-space: normal!important;
    text-align: left!important;
}

.asterix:after {
    content: " * ";
    color: #9f0000;
}

.residential:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    content: "";
    background: url('/images/sf/images/address_residential.png');
    background-size: 100%;
    z-index: 1000000;
}

.commercial:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    content: "";
    background: url('/images/sf/images/address_commercial.png');
    background-size: 100%;
    z-index: 1000000;
}

.residential_redroute:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    content: "";
    background: url('/images/sf/images/address_residential_redroute.png');
    background-size: 100%;
    z-index: 1000000;
}

.commercial_redroute:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    content: "";
    background: url('/images/sf/images/address_commercial_redroute.png');
    background-size: 100%;
    z-index: 1000000;
}

.outoftown:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    content: "";
    background: url('/images/sf/images/address_out_of_borough.png');
    background-size: 100%;
    z-index: 1000000;
}

.residential_input {
    background: url('/images/sf/images/address_residential.png') no-repeat scroll 7px 7px;
    background-size: 12px;
    padding-left: 30px;
}

.key {
    margin: 15px 0px;
}

.key div {
    margin: 5px;
}

.key .key-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.key .key-text {
    display: inline-block;
}

#postcode {
    text-transform: uppercase;
}

.modal {
    overflow-y: scroll!important;
}

.pitch_li,
.hanger_li {
    padding: 10px;
    border: 1px solid black;
    border-radius: 4px;
    margin: 10px 0px;
    height: 125px;
}

.hanger_li {
    height: auto;
}

.pitch_li:hover,
.hanger_li:hover {
    cursor: pointer;
    background-color: #fcfcfc;
}

.pitch_li.filled,
.hanger_li.filled {
    background-color: #e5e5e5;
}

.pitch_li.active,
.hanger_li.active {
    background-color: #e5e5e5;
}

.pitch_li label:hover,
.hanger_li label:hover {
    cursor: pointer;
}

.marker-red {
    background-image: url('../images/mapiconred.png');
    background-size: cover;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.marker {
    background-size: cover;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.marker-bike-red {
    background-image: url('../../img/bike_red.png');
}

.marker-bike-orange {
    background-image: url('../../img/bike_orange.png');
}

.marker-bike-green {
    background-image: url('../../img/bike_green.png');
}

.marker-bike-black {
    background-image: url('../../img/bike_black.png');
}

.marker-crane {
    background-image: url('../../img/marker-crane.png');
}

.nav_car_cont {
    width: 100%;
    overflow-x: scroll;
    margin: 0.5%;
}

.nav_car {
    width: 830px;
    margin: auto;
}

.nav_car a {
    display: inline-block;
}

.nav_car_item {
    vertical-align: top;
    height: 275px;
    display: inline-block;
    width: 200px;
    border: 1px solid black;
}

.nav_car_item_img img {
    display: block;
    width: 80px;
    height: 60px;
    margin: 20px auto;
}

.nav_car_item_text {
    margin: 8px;
    text-align: center;
}

.nav_car_item_street_img1 {
    width: 20%;
    height: auto;
    float: right;
    margin-right: 1.5%;
}

.nav_car_item_street_img2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 55%;
}

.nav_car_item_estate_img1 {
    width: 20%;
    height: auto;
    float: right;
    margin-right: 1.5%;
}

.nav_car_item_estate_img2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 55%;
}

.full_width {
    width: 100%;
    margin-top: 5px;
}

.hanger_map .mapboxgl-popup-tip {
    display: none!important;
}

.hanger_map .mapboxgl-popup {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 160px;
    transform: none!important;
}

.hanger_map .mapboxgl-popup-content {
    height: 100%;
}

.corporate td {
    font-size: 1em!important;
}

.flex-even-space {
    display: flex!important;
    justify-content: space-evenly;
    flex-direction: row !important;
    flex-wrap: wrap;
}


/******************************************/

@media screen and (min-width: 992px) {
    .same-height {
        display: flex !important;
    }
}


.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    color: black;
}

.fg-fix-width .dropdown-menu.open {
    max-width: 100%;
}

.fg-fix-width .dropdown-menu li a,
.fg-fix-width .dropdown-menu li a .text {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.paginate_button a {
    color: black!important;
}

/* WCAG 2.4.7 — Focus Visible: explicit focus indicator for DataTables
 * pagination links — see sfbo/css/style.css for full rationale. */
.paginate_button a:focus,
.paginate_button a:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 3px #0067b8 !important;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: black;
    opacity: 1;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: black;
}

.input-group.date input.form-control {
    min-width: 12ch;
    text-overflow: clip;
}

.btn-success {
    background-color: #006100!important;
}

.btn-danger.active,
.btn-danger:active,
.open>.dropdown-toggle.btn-danger {
    background-color: #992925!important;
}

.btn-danger:focus,
.btn-danger.focus {
    background-color: #7a1e1e !important;
    border-color: #5a1414 !important;
    outline: 3px solid #000000 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.danger-new {
    /* background-color:#F8CFCE!important; */
}

table .btn-link {
    color: #004784;
}

.inline-block {
    display: inline-block;
}

.normal-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -.8rem;
    margin-left: -.8rem;
}

.TypeAheadDropDown{
    width: 100%;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.73);
}


.TypeAheadDropDown ul::before{
    content: '';
}

.TypeAheadDropDown ul{
    list-style-type: none;
    text-align: left;
    margin: 0;
    padding: 0;
}

.TypeAheadDropDown li{
    padding: 10px 5px ;
    cursor: pointer;
}

.TypeAheadDropDown li:hover{
    background: lightgray;
    text-decoration: underline;
}

.pp_view_invoiceListItem{
    box-shadow: none;
    border: none;
    width: 100%;
    height: 100px;
    border-bottom: solid 1px gray;
    position: relative;
    cursor: pointer;
    user-select: none;
}
.pp_view_invoiceListItem *{
    pointer-events: none;
}

.pp_view_selected{
    background-color:#dbdbdb!important;
}

.pp_view_invoiceListItem
.period{
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 18px;
}

.pp_view_invoiceListItem
.marketPeriod{
    position: absolute;
    bottom: 33px;
    left: 10px;
    opacity: 70%;
}

.pp_view_invoiceListItem
.marketPitch{
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.pp_view_invoiceListItem
.price {
    position: absolute; 
    right: 10px; 
    font-size: 20px; 
    font-weight: 600; 
    top: 25px;
}

.pip{
    display:inline-block;
    padding:5px;
    padding-top:2px;
    padding-bottom:2px;
    border-radius: 10px;
}

.pp_view_invoiceListItem
.pip{
    position: absolute;
    right: 10px;
    font-size: 15px;
    font-weight: 400;
    bottom: 10px;
    
    border-radius: 10px;
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    
}

.myInvoices{
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.pip_green{
    background-color: rgb(178, 217, 170);
    color: rgb(46, 125, 51);
}

.pip_yellow{
   background-color: rgb(221, 202, 144);
    color: rgb(94, 89, 25);
}

.pip_red{
     background-color: #dd9090;
    color: #8c0e0e;
}

.pp_invoiceViewPane{
    width:100%;
    height:100%;
    padding:15px;
}

.pp_invoiceViewPane
.buttonBar{
    position:absolute;
    bottom:15px;
    left:15px;
    right:15px;
}

.pp_invoiceViewPane
.float-right{
    float:right;
}

.pp_invoiceViewPane
.tableContainer{
    position:absolute;
    top:100px;
    bottom:50px;
    overflow:auto;
    right:15px;
    left:15px;
}



#note_results, #note_who {
    word-break: break-word;
}

.react_check_label{
    margin-left:0.4em;
    padding: 4px;
    overflow: visible;
    display: inline-block;
}

.react-dialog{
    top:5em;
}

.react-modal-center {
    top: 5vh;
}

.modal.show .modal-dialog {
    transform: translate(0, 0) !important;
}

.modal-backdrop.show {
    opacity: 0.5 !important;
}

.react-modal-center .modal-content {
    max-height: calc(90vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.react-modal-center .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

@media (max-width: 767px) {
    .react-modal-center {
        top: 10px !important;
        margin-bottom: 10px !important;
    }
    .react-modal-center .modal-content {
        max-height: calc(100vh - 20px);
    }
}

/* .modal-body {
    overflow-x: auto;
} */

.react-modal-table-container {
    max-height: 50%;
    overflow-y: auto; 
}

.react-modal-table {
    table-layout: fixed; 
    width: 100%;  
}

.react-modal-table th, .react-modal-table td {
    word-wrap: break-word;
    white-space: normal;
}
#view-invoice-details
.col-xs-4,
#view-invoice-details
.col-xs-8{
    margin-bottom: 5px;
}

.invoice-buttons-container
.col-xs-4{
    margin-bottom:15px;
}

.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentColor;
  opacity: 0.5;
}
.placeholder.btn::before {
  display: inline-block;
  content: "";
}

.placeholder-xs {
  min-height: 0.6em;
}

.placeholder-sm {
  min-height: 0.8em;
}

.placeholder-lg {
  min-height: 1.2em;
}

.placeholder-glow .placeholder {
  -webkit-animation: placeholder-glow 2s ease-in-out infinite;
  animation: placeholder-glow 2s ease-in-out infinite;
}

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

/* Arrow styles for list items */
.list-arrow {
    margin-right: 8px;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-left: 6px solid rgb(102, 102, 102);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

/* Form buildertitle styling */
.form-title {
    display: block;
    width: 100%;
    padding: 0;
    font-size: 1em;
    font-weight: 700;
    color: #2d3142;
    border: none;
}

.awaiting_payment_cont{
    padding-bottom: 150px;
}


@-webkit-keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}

@keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}

/* Modal Height Classes */
.modal-height-small .modal-dialog {
    margin-top: 10vh !important;
    min-height: 40vh !important;
    max-height: 50vh !important;
}

.modal-height-small .modal-content {
    min-height: 40vh !important;
    max-height: 50vh !important;
}

.modal-height-small .modal-body {
    min-height: 25vh !important;
    max-height: 30vh !important;
    overflow-y: auto !important;
    padding-bottom: 15px !important;
}

.modal-height-medium .modal-dialog {
    margin-top: 5vh !important;
    min-height: 60vh !important;
    max-height: 70vh !important;
}

.modal-height-medium .modal-content {
    min-height: 60vh !important;
    max-height: 70vh !important;
}

.modal-height-medium .modal-body {
    min-height: 45vh !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
    padding-bottom: 20px !important;
}

.modal-height-large .modal-dialog {
    margin-top: 2vh !important;
    min-height: 75vh !important;
    max-height: 85vh !important;
}

.modal-height-large .modal-content {
    min-height: 75vh !important;
    max-height: 85vh !important;
}

.modal-height-large .modal-body {
    min-height: 60vh !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    padding-bottom: 25px !important;
}

.modal-height-xlarge .modal-dialog {
    margin-top: 1vh !important;
    min-height: 85vh !important;
    max-height: 95vh !important;
}

.modal-height-xlarge .modal-content {
    min-height: 85vh !important;
    max-height: 95vh !important;
}

.modal-height-xlarge .modal-body {
    min-height: 70vh !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    padding-bottom: 30px !important;
}


.btn-default .filter-option {
    color: #767676 !important; /* minimum passing grey on white — 4.54:1 */
}

/* specifically target the placeholder/unselected state */
.bs-placeholder .filter-option {
    color: #767676 !important;
}

li.paginate_button.active a,
li.paginate_button.active a:hover {
    color: #ffffff !important;
    background-color: #a62639 !important;
}

.btn.btn-default.bs-placeholder .filter-option {
    color: #767676 !important;
}

#header {
    color: #444444;
}

#header .nav.navbar-nav > li {
    color: #444444;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
    color: #767676 !important;
}

#main_dashboard_table_select {
    visibility: hidden;
}

#select_markets {
    visibility: hidden;
}

select.selectpicker {
    visibility: hidden;
}

nav.navbar.navbar-default .navbar-brand,
nav.navbar.navbar-default .navbar-brand .glyphicon,
nav.navbar.navbar-default .navbar-nav > li > a .glyphicon,
#logIcon, #logOutIcon {
    color: #333333 !important;
}

caption.sr-only {
    color: #000000 !important;
    background-color: transparent !important;
}

nav.navbar.navbar-default .navbar-brand:hover,
nav.navbar.navbar-default .navbar-brand:focus,
nav.navbar.navbar-default .navbar-brand:hover .glyphicon,
nav.navbar.navbar-default .navbar-brand:focus .glyphicon,
nav.navbar.navbar-default .navbar-nav > li > a:hover .glyphicon,
nav.navbar.navbar-default .navbar-nav > li > a:focus .glyphicon {
    color: #000000 !important;
}

.form-control { 
    border: 1px solid #767676 !important; 
}

[class*="col-"].row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* WCAG 2.4.7 / 1.4.11 — Focus indicator on form controls and Bootstrap Select.
 *
 * WHY inset box-shadow instead of outline:
 * outline draws OUTSIDE the element's border-box. Any ancestor with
 * overflow:hidden (e.g. Bootstrap panels, .table-responsive, Bootstrap Select
 * wrapper) will clip the outline ring, making it partially or fully invisible.
 * inset box-shadow draws INSIDE the border-box and is never clipped by
 * ancestor overflow — it is always fully visible regardless of the container.
 */
.form-control:focus,
.form-control:focus-visible,
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:focus-visible,
.selectpicker + .btn.dropdown-toggle:focus,
.selectpicker + .btn.dropdown-toggle:focus-visible {
    border-color: #0067b8 !important;
    outline: none !important;
    box-shadow: inset 0 0 0 3px #0067b8 !important;
}

.bootstrap-select.btn-group,
.bootstrap-select.btn-group .dropdown-toggle {
    overflow: visible !important;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:focus-visible {
    outline-offset: 2px !important;
    position: relative;
    z-index: 2;
}

/* WCAG 1.4.11 — outline must contrast ≥3:1 against the adjacent background.
   White (#ffffff) on #f5f5f5 is only ~1.05:1 (fail). Black (#000000) on
   #f5f5f5 is ~16:1 (pass). outline-offset:2px creates a gap showing the page
   background, so the contrast check is outline vs page background colour. */
.btn-primary:focus,
.btn-primary.focus {
    background-color: #1b1b1b !important;
    color: #ffffff !important;
    outline: 3px solid #000000 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* AAA contrast for secondary buttons (e.g. Close) — #444444 on white = ~10.5:1 */
.btn-secondary {
    background-color: #444444 !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.focus {
    background-color: #1b1b1b !important;
    color: #ffffff !important;
    outline: 3px solid #000000 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Issue 5: Submit / Create account button padding at 200% zoom
   min-height: 44px meets the WCAG 2.5.5 touch-target minimum.
   Padding uses px so it scales consistently with browser zoom. */
.login-submit-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
}

/* Issue 6: Forgotten-password link — enough padding so focus outline
   is never clipped at 400% zoom */
#forgottenpassword {
    display: inline-block;
    padding: 4px 2px;
}

/* WCAG 1.4.6 (AAA) — validation / error text contrast
 * Bootstrap + bootstrapValidator use #a94442 for error text which achieves
 * ~5.3:1 on white — passing AA (4.5:1) but failing AAA (7:1).
 * #7a1e1e on white = 9.5:1, safely passing AAA.
 * bootstrapValidator.min.css (loaded after this file) sets
 * .nav-tabs li.bv-tab-error > a { color: #a94442 } without !important, so
 * our !important rule wins the cascade for all selectors listed here. */
.has-error .help-block,
.has-error .control-label,
.nav-tabs li.bv-tab-error > a,
.text-danger,
.alert-danger {
    color: #7a1e1e !important;
}

.form-control,
.selectpicker + .btn.dropdown-toggle,
.bootstrap-select .dropdown-toggle,
.input-group-addon {
    border-color: #767676 !important;
}

/* Checkbox / radio focus outline — prevent clipping at 400% zoom */
.form-group label,
.checkbox label,
.radio label {
    overflow: visible;
    padding-top: 4px;
    padding-bottom: 4px;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 3px solid #0056b3;
    outline-offset: 2px;
}

@media (min-width: 1200px) {
    .fix-calendar-right {
        position: relative; 
    }
    .fix-calendar-right .bootstrap-datetimepicker-widget {
        /* Override the inline style="inset: 34px 0px auto auto;" */
        inset: 34px 0px auto auto !important;
        left: auto !important;
        right: 0 !important;
    }
}

@media (max-width: 767px) {
    /*
     * WCAG 1.4.10 — Reflow: the bootstrap-datetimepicker widget is
     * position:absolute and the plugin sets a left offset based on the
     * document coordinates of the input.  At 400 % zoom (320 px CSS
     * viewport) that offset can place the widget's right edge beyond the
     * viewport, causing a horizontal scrollbar.
     *
     * Two-part fix:
     *   width / max-width — caps the widget so it can never be wider
     *     than the viewport minus a small safe margin.
     *   left: 0 / right: auto — anchors the widget to the LEFT edge of
     *     its containing .input-group (which is always within the
     *     viewport) and defeats any plugin-set right:0 or right:Xpx
     *     value.  All date-picker columns in this project use col-xs-12
     *     (full-width) at mobile, so left:0 is always the correct
     *     alignment and can never itself cause left-side overflow.
     */
    .bootstrap-datetimepicker-widget.dropdown-menu {
        font-size: 12px !important;
        width: min(228px, calc(100vw - 10px)) !important;
        max-width: calc(100vw - 10px) !important;
        overflow-x: hidden !important;
        left: 0 !important;
        right: auto !important;
    }
}

button.navbar-toggle {
  border: 1px solid #777;
}

button.navbar-toggle:focus,
button.navbar-toggle:focus-visible {
  outline: 3px solid #231f20;
  outline-offset: 2px;
  border-color: #231f20;
  background-color: #fff;
  box-shadow: 0 0 0 5px #d44056;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #595959!important;
  }
}

.btn-primary:not(.dropdown-toggle):hover,
.btn-primary:not(.dropdown-toggle):focus,
.btn-primary:not(.dropdown-toggle):focus-visible,
.btn-default:not(.dropdown-toggle):hover,
.btn-default:not(.dropdown-toggle):focus,
.btn-default:not(.dropdown-toggle):focus-visible {
  background-color: #1b1b1b !important;
  color: #ffffff !important;
  outline-offset: 3px !important;
  text-decoration: underline !important;
}

.dropdown-menu .dropdown-header {
  color: #595959; /* 7.0:1 on white — passes AA comfortably */
}


@media (max-width: 767px) {
    .dataTables_wrapper {
        overflow-x: auto!important;
        -webkit-overflow-scrolling: touch!important;
    }


    .navbar-header {
        margin-left: 0;
        margin-right: 0;
    }

    .container > .row,
    .container-fluid > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Compensate col padding */
    .container > .row > [class*="col-"],
    .container-fluid > .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 767px) {
  /* All buttons get bottom spacing */
  .btn {
    margin-bottom: 8px !important;
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Modal footer — stack vertically */
  .modal-footer .btn {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 8px !important;
  }

  .modal-footer .btn:last-of-type {
    margin-bottom: 0 !important;
  }

  /* Panel footer — stack vertically */
  .panel-footer .btn {
    display: block;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 8px !important;
  }

  .panel-footer .btn:last-of-type {
    margin-bottom: 0 !important;
  }

  /* Adjacent buttons anywhere else */
  .btn + .btn {
    margin-left: 4px !important;
    margin-top: 4px !important;
  }

  /* Navbar toggle — don't affect */
  .navbar-toggle {
    min-height: unset !important;
    min-width: unset !important;
    margin-bottom: 0 !important;
  }

  /* Bootstrap select buttons — don't affect */
  .bootstrap-select .btn {
    min-height: unset !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .input-group-btn .btn {
    min-height: unset !important;
    min-width: unset !important;
    margin-bottom: 0 !important;
  }
  .modal-footer .btn + .btn {
    margin-bottom: 8px !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
  }

  .modal-footer .btn:last-child {
    margin-bottom: 0 !important;
  }

  /* WCAG 1.4.10 — Reflow: prevent bootstrap-select Assign dropdown from
   * overflowing the viewport on narrow viewports.
   * See sfbo/css/style.css for full rationale.
   */
  .bootstrap-select {
    max-width: 100%;
  }
  .bootstrap-select .dropdown-menu {
    max-width: calc(100vw - 10px);
    overflow-x: hidden;
  }
  .bootstrap-select .dropdown-menu > li > a {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* Fix: ensure datepicker inputs are at least 16px on mobile */
@media (max-width: 768px) {
    #filestartdate input,
    #fileenddate input,
    .bootstrap-datetimepicker-widget input,
    input[type="text"].form-control {
        font-size: 16px !important;
    }
}


@media (max-width: 768px) {

    /* Main content area breathing room */
    #container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Panels */
    .panel {
        margin-left: 0;
        margin-right: 0;
    }

    .panel-body {
        padding: 15px;
    }

    /* Form elements full width with spacing */
    .form-group {
        margin-bottom: 15px;
    }

    .form-control {
        width: 100%;
        margin-bottom: 8px;
    }

    /* Labels above inputs on mobile */
    .col-sm-4,
    .col-sm-5 {
        padding-bottom: 5px;
    }

    /* Buttons full width on mobile */
    .btn {
        width: 100%;
        margin-bottom: 8px;
    }

    /* Modal padding */
    .modal-body {
        padding: 15px;
    }

    .modal-header {
        padding: 15px;
    }

    .modal-footer {
        padding: 10px 15px;
    }

    /* Panel footer buttons */
    .panel-footer .btn {
        width: 100%;
        margin-bottom: 5px;
    }

    /* Bottom action buttons */
    .col-xs-12.col-md-3 {
        margin-bottom: 10px;
    }

    /* Table horizontal scroll instead of cramping */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Input groups full width */
    .input-group {
        width: 100%;
    }

    /* Text spacing - WCAG 1.4.12 */
    body {
        line-height: 1.5;
        letter-spacing: 0.02em;
        word-spacing: 0.1em;
    }

    p, label, td, th {
        line-height: 1.5;
    }
/* WCAG 2.4.7 / 1.4.11 — DataTables pagination focus ring
 *
 * Two separate clipping problems, solved by a single approach:
 *
 * 1. BETWEEN BUTTONS — Bootstrap pagination sets display:inline on <li>, so
 *    z-index on the <li> has no effect (z-index requires a block/inline-block
 *    context). The <a> already has position:relative (Bootstrap baseline), so
 *    z-index:2 on the focused <a> lifts it above adjacent <a> elements.
 *
 * 2. CONTAINER EDGE — The DataTable lives inside .table-responsive which has
 *    overflow-x:auto. CSS overflow clips ALL descendant overflow including
 *    outline — no amount of padding inside the container fixes this because
 *    the outline still extends outside the <a> into the clipped zone.
 *
 * SOLUTION — inset box-shadow as the focus ring:
 *    box-shadow draws INSIDE the element's border-box, so overflow:auto on
 *    any ancestor cannot clip it. Combined with z-index:2 on the <a>, the
 *    ring is fully visible whether the button is mid-list or at the edge.
 *    #0067b8 on white = 5.8:1 — passes WCAG 1.4.11 non-text contrast (3:1). */
.dataTables_paginate .pagination > li > a:focus,
.dataTables_paginate .pagination > li > a:focus-visible,
.dataTables_paginate .pagination > li > span:focus,
.dataTables_paginate .pagination > li > span:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 3px #0067b8 !important;
    position: relative !important;
    z-index: 2 !important;
}
}

/* Dashboard personal/business details — semantic <dl>/<dt>/<dd> layout.
 * Bootstrap already resets dd { margin-left: 0 }, but we also reset the <dl>
 * margin and ensure <dt> weight matches the visual used previously so the
 * card appearance is unchanged while screen readers receive proper term/detail
 * semantics instead of unassociated <span> elements. */
.dashboard-details-list {
    margin: 0;
}
.dashboard-details-list dt {
    font-weight: bold;
}
.dashboard-details-list dd {
    margin-bottom: 0;
}