@CHARSET "UTF-8";

/*-- global reset --*/
html {
	font-family: "Segoe UI", Tahoma, Arial, Verdana, Sans-serif;
}

body {
	font-family: inherit;
	font-weight: normal;
	line-height: 1.2;
}

.resetCSS {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	outline: none;
	border: none;
	margin: 0;
	padding: 0;
}

/* loading */
#loadingContainerId {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	text-align: center;
	z-index: 9997;
}

#loadingCardId {
	position: relative;
	top: 50%;
	margin: -20px auto;
	display: inline-block;
	background-color: #F5F6F7;
	border: 1px solid #ABB4BC;
	border-radius: 4px;
	z-index: 9998;
}

#loadingMessageId {
	margin: 2px;
	padding: 4px 5px 4px 25px;
	background-image: url('../images/loading.gif');
	background-repeat: no-repeat;
	background-position: 5px center;
	border: 1px solid #DDDDDD;
	border-radius: 2px;
	background-color: #EEEEEE;
	line-height: 16px;
	color: #222222;
	z-index: 9999;
}

/* bulk download / bulk filing progress overlays (indeterminate).
   z-index sits above the Bootstrap modal (1050) so the filing overlay can cover
   the still-open attestation modal while the request is in flight. */
#bulkDownloadProgressId,
#bulkFilingProgressId {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	text-align: center;
	z-index: 9997;
}

#bulkDownloadProgressCardId,
#bulkFilingProgressCardId {
	position: relative;
	top: 50%;
	margin: -20px auto;
	display: inline-block;
	padding: 12px 16px;
	background-color: #F5F6F7;
	border: 1px solid #ABB4BC;
	border-radius: 4px;
	z-index: 9998;
}

#bulkDownloadProgressCardId .progress,
#bulkFilingProgressCardId .progress {
	width: 260px;
	margin-bottom: 0;
}

#bulkDownloadProgressCardId .progress-bar,
#bulkFilingProgressCardId .progress-bar {
	width: 100%;
}

.loadingMessage::before {
	content: url('../images/loading.gif');
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 2px;
	vertical-align: middle;
}

/* PDF preview loading overlay (PDFObject adds .pdfobject-container to the embed target) */
.pdfobject-container {
	position: relative;
}

.pdf-preview-loader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	z-index: 1;
}

/* Vertically center a Bootstrap 3 modal dialog in the viewport */
.modal-dialog-vcenter {
	display: flex;
	align-items: center;
	min-height: calc(100% - 60px);
}

.modal-dialog-vcenter .modal-content {
	width: 100%;
}

/* WCAG AA contrast fix: the toolkit's .btn-success (#4eb76e) is 2.5:1 with
   white text. Shift the green scale one step darker so every state passes
   4.5:1 (base 5.1:1, hover/focus 7.0:1, pressed 9.7:1). */
.btn-success {
	color: #fff;
	background-color: #327c49;
	border-color: #29653c;
}

.btn-success:focus,
.btn-success.focus {
	color: #fff;
	background-color: #29653c;
	border-color: #1f4d2d;
}

.btn-success:hover {
	color: #fff;
	background-color: #29653c;
	border-color: #1f4d2d;
}

.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
	color: #fff;
	background-color: #29653c;
	border-color: #1f4d2d;
}

.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
	color: #fff;
	background-color: #1f4d2d;
	border-color: #1f4d2d;
}

.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus {
	background-color: #327c49;
	border-color: #29653c;
}

.btn-success .badge {
	color: #327c49;
	background-color: #fff;
}

#mainContainer:focus-visible {
  outline-offset: -7px;
}

/* navigation */
.navbar .navbar-brand {
	padding: 0 0 0 15px;
}

.navbar .navbar-brand img {
	width: 50px;
	height: 50px;
}

.navbar .navbar-notification-btn img {
    width: 30px;
	height: 40px;
}

.navbar-notification-btn {
    position: relative;
    display: inline-block;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 20px 6px 20px !important;
}

.navbar-notification-btn.activeState {
    outline: 2px solid #1e3948;
    outline-offset: -2px;
    background: #1e3948;
}

.navbar-notification-btn:focus {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}

.notification-badge {
     position: absolute;
     top: 5px;
     left: 50%;
     background-color: #a94442;
     color: white;
     font-size: 10px;
     font-weight: bold;
     border-radius: 4px;
     padding: 2px 6px;
     min-width: 18px;
     text-align: center;
     line-height: 1;
 }
 .navbar-rightsection {
    float: right;
 }

.navbar .navbar-brand:focus,
.navbar .navbar-brand:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -2px;
}

/* Bootstrap suppresses the toggle's ring with .navbar-toggle:focus { outline: 0 }
   in application-toolkit.css — restore it to match the brand and the bell. */
.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -2px;
}

.my-profile-link {
	display: block;
}

.dropdown-menu {
	padding: 5px 0px;
}

html.with-bottom-navbar {
	position: relative;
	min-height: 100%;
}

body.with-bottom-navbar {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

footer.footer-navbar {
	margin-top: auto;
	width: 100%;
	height: 50px;
}

/* alert */
.alert {
	padding: 10px;
}

.alert-dismissable, .alert-dismissible {
	padding-right: 30px;
}

.alert-dismissable .close, .alert-dismissible .close {
	top: -4px;
}

/* Status banners: the message div is the focus target, so the close button follows it in the DOM
   for Tab to reach it. Absolute positioning holds the button where the float used to put it.
   Keep these id-scoped -- .alert declares no position, and #paperWorkErrorMessageAlert and the
   .growl banners still rely on the float path. */
#errorMessageAlert,
#successMessageAlert {
	position: relative;
}

#errorMessageAlert > .close,
#successMessageAlert > .close {
	position: absolute;
	float: none;
	top: 7px;
	right: 10px;
}

/* popover */
.popover {
	max-width: none;
	font-family: inherit;
	font-size: 12px;
}

.popover-title {
	font-size: 12px;
}

.popover-footer {
	margin: 0;
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	background-color: #F7F7F7;
	border-bottom: 1px solid #EBEBEB;
	border-radius: 5px 5px 0 0;
}

.popover-content{
	width: 25rem;
}

/* input error */
input.inputError {
	border-color: #C11A2E;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	background-image: url('../images/exclamation.png');
	background-position: 98% center;
	background-repeat: no-repeat;
}

input.inputError:focus {
	border-color: #DC1E33;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #F2A1AA;
}

textarea.inputError {
	border-color: #C11A2E;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	background-image: url('../images/exclamation.png');
	background-position: 98% center;
	background-repeat: no-repeat;
}

textarea.inputError:focus {
	border-color: #DC1E33;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #F2A1AA;
}

select.inputError {
	border-color: #C11A2E;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	background-image: url('../images/exclamation.png');
	background-position: 90% center;
	background-repeat: no-repeat;
}

select.inputError:focus {
	border-color: #DC1E33;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #F2A1AA;
}

input[type=checkbox].inputError {
	outline: 1px solid #C11A2E;
}

table.inputError {
	outline: 1px solid #C11A2E;
	border: 1px solid #C11A2E;
}

@media screen and (max-width: 767px) {
	.table-responsive > table.inputError {
		outline: 1px solid #C11A2E;
		border: 1px solid #C11A2E;
	}
}

.inputError-block {
	margin-top: 5px;
	margin-bottom: 10px;
	color: #C11A2E;
	text-align: left;
}

.center-input-block {
	margin-top: 5px;
    margin-bottom: 15px;
    color: #C11A2E;
    text-align: center;
}

/* table */
.table-borderless,
.table-borderless > thead > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tbody > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > tfoot > tr > td {
	border: none;
}

.table-edge-bordered {
	border: 1px solid #DDDDDD;
}

@media screen and (max-width: 767px) {
	.table-responsive > .table-edge-bordered {
		border: 0;
	}
}

.table-highlight > tbody > tr.highlight {
	background-color: #D9EDF7;
}
table.custom-responsive-table.case-calendar tr.highlight:hover {
	background-color: #D9EDF7;
}

.tablesorter-default .tablesorter-header.tablesorter-headerUnSorted:not(.sorter-false),
.tablesorter-default .headerSortUp,
.tablesorter-default .tablesorter-headerSortUp,
.tablesorter-default .tablesorter-headerAsc,
.tablesorter-default .headerSortDown,
.tablesorter-default .tablesorter-headerSortDown,
.tablesorter-default .tablesorter-headerDesc {
	cursor: pointer;
	padding-right: 21px;
}

.tablesorter-default .tablesorter-header {
	line-height: 24px;
	vertical-align: middle;
}

.tablesorter-header:active{
	outline: #FFFFFF 0px solid;
	border: #FFFFFF 0px solid;
}
.tablesorter-header:focus{
	outline: 2px solid #1D6080;
	outline-offset: -2px;
}

.tablesorter-default .tablesorter-header.tablesorter-headerUnSorted:not(.sorter-false) .tablesorter-header-inner::after {
	content: "" / "";
	display: inline-block;
	background-image: url(data:image/gif;base64,R0lGODlhFQAJAIABAB45SP///yH5BAEKAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
	background-repeat: no-repeat;
	background-size: contain;
	width: 21px;
	height: 9px;
	margin-right: -21px;
}

.tablesorter-default .headerSortUp,
.tablesorter-default .tablesorter-headerSortUp,
.tablesorter-default .tablesorter-headerAsc,
.tablesorter-default .headerSortDown,
.tablesorter-default .tablesorter-headerSortDown,
.tablesorter-default .tablesorter-headerDesc {
	border-bottom: #1D6080 2px solid;
	color: #1D6080;
}

.tablesorter-default .headerSortUp .tablesorter-header-inner::after,
.tablesorter-default .tablesorter-headerSortUp .tablesorter-header-inner::after,
.tablesorter-default .tablesorter-headerAsc .tablesorter-header-inner::after {
	content: "" / "";
	display: inline-block;
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIABADCX0f///yH5BAEKAAEALAAAAAAVAAQAAAINjI+AywnaYnhUMopbAQA7);
	background-repeat: no-repeat;
	background-size: contain;
	width: 21px;
	height: 4px;
	position: relative;
	top: -2px;
	margin-right: -21px;
}

.tablesorter-default .headerSortDown .tablesorter-header-inner::after,
.tablesorter-default .tablesorter-headerSortDown .tablesorter-header-inner::after,
.tablesorter-default .tablesorter-headerDesc .tablesorter-header-inner::after {
	content: "" / "";
	display: inline-block;
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIABADCX0f///yH5BAEKAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
	background-repeat: no-repeat;
	background-size: contain;
	width: 21px;
	height: 4px;
	position: relative;
	top: -2px;
	margin-right: -21px;
}

.tablesorter .filtered {
	display: none;
}

/* layout */
.m-a-xs {
	margin: 5px !important;
}

.m-t-xs {
	margin-top: 5px !important;
}

.m-t-2 {
	margin-top: 2.5px !important;
}

.m-r-xs {
	margin-right: 5px !important;
}

.m-b-xs {
	margin-bottom: 5px !important;
}

.m-l-xs {
	margin-left: 5px !important;
}

.m-x-xs {
	margin-right: 5px !important;
	margin-left: 5px !important;
}

.m-y-xs {
	margin-top: 5px !important;
	margin-bottom: 5px !important;
}

.m-a-sm {
	margin: 10px !important;
}

.m-t-sm {
	margin-top: 10px !important;
}

.m-r-sm {
	margin-right: 10px !important;
}

.m-b-sm {
	margin-bottom: 10px !important;
}

.m-l-sm {
	margin-left: 10px !important;
}

.m-x-sm {
	margin-right: 10px !important;
	margin-left: 10px !important;
}

.m-y-sm {
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}

.p-a-xs {
	padding: 5px !important;
}

.p-t-xs {
	padding-top: 5px !important;
}

.p-r-xs {
	padding-right: 5px !important;
}

.p-b-xs {
	padding-bottom: 5px !important;
}

.p-l-xs {
	padding-left: 5px !important;
}

.p-x-xs {
	padding-right: 5px !important;
	padding-left: 5px !important;
}

.p-y-xs {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

.p-a-sm {
	padding: 10px !important;
}

.p-t-sm {
	padding-top: 10px !important;
}

.p-r-sm {
	padding-right: 10px !important;
}

.p-b-sm {
	padding-bottom: 10px !important;
}

.p-l-sm {
	padding-left: 10px !important;
}

.p-x-sm {
	padding-right: 10px !important;
	padding-left: 10px !important;
}

.p-y-sm {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

/* text */
.text-light {
	font-weight: 300;
}

.text-normal {
	font-weight: 400;
}

.text-medium {
	font-weight: 500;
}

.text-semibold {
	font-weight: 600;
}

.text-bold {
	font-weight: 700;
}

.text-xs {
	font-size: 10px;
}

.text-sm {
	font-size: 12px;
}

.text-md {
	font-size: 14px;
}

.text-lg {
	font-size: 16px;
}

.text-xl {
	font-size: 18px;
}

.text-underline {
	text-decoration: underline;
}

/* miscellaneous */
.faded {
	opacity: 0;
}

.custom-control-indicator {
	width: 16px;
	height: 16px;
	border: 1px solid rgba(0, 0, 0, 0.8);
}

.custom-control input:focus ~ .custom-control-indicator {
	outline: 2px solid #005fcc;
	outline-offset: 2px;
}

.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
	border-color: #005fcc;
	outline: 2px solid #005fcc;
	outline-offset: 0px;
	box-shadow: none;
}

/* Error state inputs - 3px outline for extra visibility */
input.inputError:focus,
textarea.inputError:focus,
select.inputError:focus {
	border-color: #C11A2E;
	outline: 3px solid #005fcc;
	outline-offset: 2px;
	box-shadow: none;
}

/* Buttons - Clearly visible focus state */
.btn:focus,
.btn:active:focus,
.btn.active:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
	outline: 2px solid #005fcc;
	outline-offset: 2px;
	box-shadow: none;
}

/* Links - Clearly visible focus state */
a:focus,
a:active:focus {
	outline: 2px solid #005fcc;
	outline-offset: 2px;
	text-decoration: underline;
	box-shadow: none;
}

/* Checkbox and radio focus - Enhanced visibility */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
	outline: 2px solid #005fcc;
	outline-offset: 2px;
	box-shadow: none;
}

/* Dropdown toggle focus */
.dropdown-toggle:focus {
	outline: 2px solid #005fcc;
	outline-offset: 2px;
	box-shadow: none;
}

/* Error alert containers - 3px outline for extra visibility */
.alert-danger:focus,
.alert-danger:focus-within {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
	box-shadow: none;
}

/* Readonly field display - styled like readonly input */
.readonly-display {
	background-color: #8397a5;
	color: #414e58;
	opacity: 1;
	cursor: default;
	display: block;
	pointer-events: none;
	user-select: none;
}

/* Disabled search control display - mimics a disabled .form-control input */
.search-readonly {
	background-color: #8397a5;
	color: #9da9b0;
	opacity: 1;
	cursor: not-allowed;
	display: flex;
	align-items: center;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
}

#fileDocumentModalId .modal-header, #fileDocumentModalId .modal-footer {
	border: none;
}

#fileDocumentModalId .modal-text {
	height: 100px;
}

#fileDocumentModalId .box-content { 
	border: 2px solid #ebf1f4;
    background: #f4f8fb;
}

#fileDocumentModalId .modal-header {
	padding: 0;
}

#fileDocumentModalId .close {
	padding: 0;
	margin: 5px 10px 0 0;
}

.search-box {
	max-width: 200px;
}

/* Search box with its persistent label to the left of the field. The 200px cap
   moves to the field wrapper so the input keeps its width and the box grows by
   the label. Declared after .search-box so it wins the max-width override. */
.search-box-inline {
	display: flex;
	align-items: center;
	max-width: none;
}

.search-box-inline > .search-box-label {
	flex: 0 0 auto;
	margin: 0 6px 0 0;
	padding: 0;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1.2;
	color: #536570;
	white-space: nowrap;
	text-align: left;
}

/* width is explicit: once the JS adds .input-group this becomes display:table,
   and an auto-width table makes the input's own width:100% circular. */
.search-box-inline > .search-box-control {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	max-width: 200px;
}

/* eDocument Preparation heading: title, search box and action button on one row.
   Replaces three col-md-4 (33.33% x 3 = 100%) plus 30px of margins, which
   overflowed the row and pushed the button onto a second line. */
.edoc-prep-heading {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

/* Both flexible items need a floor. flex-wrap:nowrap keeps all three on one row,
   but between 768-991px there are only ~468px to share, so without these the
   squeeze crushes one item until its content spills out of its own box. The
   title is allowed to wrap to two lines there; the search field stays usable. */
.edoc-prep-heading > .edoc-prep-title {
	flex: 0 1 auto;
	min-width: 120px;
}

.edoc-prep-heading > .search-box-inline {
	flex: 0 1 auto;
	min-width: 160px;
}

/* Keep the title and search adjacent on the left; push the action to the right. */
.edoc-prep-heading > .edoc-prep-action {
	flex: 0 0 auto;
	margin-left: auto;
}

/* Wider gap after the title on desktop only (m-l-md, 30px). Gated at the md
   breakpoint: below it the panel is narrow enough that the extra 20px would be
   taken out of the input's width. The markup keeps m-l-sm as the mobile/tablet
   baseline; !important is needed to beat that utility, which is itself !important. */
@media (min-width: 992px) {
	.edoc-prep-heading > .search-box-inline {
		margin-left: 30px !important;
	}
}

/* Below ~480px the panel drops to full width and is only ~313px wide, where the
   nowrap row plus the min-width floors overflow it by ~118px. Let the row wrap. */
@media (max-width: 480px) {
	.edoc-prep-heading {
		flex-wrap: wrap;
	}
	.edoc-prep-heading > .edoc-prep-title,
	.edoc-prep-heading > .search-box-inline {
		min-width: 0;
	}
	.edoc-prep-heading > .edoc-prep-action {
		margin-left: 0;
	}
}

/* No room for label + 200px field side by side; stack as .mobile-left-align does. */
@media (max-width: 375px) {
	.search-box-inline {
		display: block;
	}
	.search-box-inline > .search-box-label {
		margin: 0 0 2px 0;
	}
}

.search-results-status {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.popover-markup .popover-footer {
  margin: 0;
  padding: 8px 14px;
  font-weight: 400;
  line-height: 18px;
  background-color: #F7F7F7;
  border-top: 1px solid #EBEBEB;
}

/* This is the contents of the original '.popover-content' class.
   The padding values have been copied here.
*/
.popover-markup .popover-content1 {
    padding: 9px 14px;
    padding-top: 9px;
    padding-right: 14px;
    padding-bottom: 9px;
    padding-left: 14px;
}

/* This is the original content class used by the bootstrap popover.
   This adds padding on all sides. The padding has been set to 0 here 
   to allow the footer to expand to fill the entire width of the popup
*/
.popover-markup .popover-content {
    padding: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
.revisions-needed-icon{
    position: relative;
    line-height: initial;
    margin-left: 4px;
    width: 15px;
    height: 15px;
    padding: 0;
    background-color: #a94442;
    border-radius: 50%;
    border: none;
}
.icon-exclamation:before {
    content: "\0021";
    font-weight: 700;
    top: -2px;
    color: #FFF;
}
.odr-filed-document-info-icon {
	position: relative;
    line-height: initial;
    margin-left: 4px;
    margin-right: 4px;
    width: 15px;
    height: 15px;
    padding: 0;
    background-color: #ffc107;
    border-radius: 50%;
    border: none;
}
.svg-icon.money-check-dollar-pen-solid {
	width: 20px;
	height: 20px;
	margin: 0px;
	margin-top: -1px;
	display: block;
	-webkit-mask: url(../images/money-check-dollar-pen-solid.svg) no-repeat
		center/contain;
	mask: url(../images/money-check-dollar-pen-solid.svg) no-repeat center/contain;
	background-color: #A94442;
	margin-left: 4px;
}

#ODRfiledDocWarning .icon-exclamation:before {
	top: -5px;
	left: 5px;
}

#ODRfiledDocWarning {
	line-height: 1;
}

.animated-form .form-group{
	position: relative;
	text-align: start;
	margin-bottom: 20px;
}
.animated-form .form-group>label {
	position: static;
	display: block;
	margin: 0 0 4px 0;
	padding: 0;
	color: #536570;
	background-color: transparent;
	font-size: 0.9em;
	line-height: 1.3;
	font-weight: normal;
	pointer-events: auto;
	z-index: auto;
}
.animated-form .form-group.label-animate>label {
	position: static;
	margin: 0 0 4px 0;
	font-size: 0.9em;
}

.animated-form label .required-asterisk {
    color: red;
}

.animated-form input:-webkit-autofill,
.animated-form input:-webkit-autofill:hover, 
.animated-form input:-webkit-autofill:focus, 
.animated-form input:-webkit-autofill:active {
	-webkit-background-clip: text;
	border-color: #1C79C4;
}

/* Placeholder */
*::-webkit-input-placeholder {
    color: #757575 !important;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: #757575 !important;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: #757575 !important;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: #757575 !important;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #757575 !important;
}
*::placeholder {
    /* modern browser */
    color: #757575 !important;
}

/* eDocument Preparation file-select box: black placeholder instead of the global gray */
#eDocSelectDisplayId::-webkit-input-placeholder {
    color: #000 !important;
}
#eDocSelectDisplayId:-moz-placeholder {
    color: #000 !important;
    opacity: 1;
}
#eDocSelectDisplayId::-moz-placeholder {
    color: #000 !important;
    opacity: 1;
}
#eDocSelectDisplayId:-ms-input-placeholder {
    color: #000 !important;
}
#eDocSelectDisplayId::-ms-input-placeholder {
    color: #000 !important;
}
#eDocSelectDisplayId::placeholder {
    color: #000 !important;
}

.form-control {
	color: #000 !important;
}

.p-y-1{
	padding: 1rem 0;
}
.navbar-inverse .navbar-nav > li > a:active,
.navbar-inverse .navbar-nav > li > a.activeState,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:focus-visible,
.navbar-inverse .navbar-nav > li > button:active,
.navbar-inverse .navbar-nav > li > button.activeState,
.navbar-inverse .navbar-nav > li > button:focus,
.navbar-inverse .navbar-nav > li > button:focus-visible {
	outline: 2px solid #1e3948;
	outline-offset: -2px;
	background: #1e3948;
}

.navbar-inverse .navbar-nav > li > a.activeState,
.navbar-inverse .navbar-nav > li > button.activeState {
	border-bottom: 3px solid #ffffff;
}

.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:focus-visible,
.navbar-inverse .navbar-nav > li > button:focus,
.navbar-inverse .navbar-nav > li > button:focus-visible {
	outline: 2px solid #ffffff;
}

.navbar-inverse .navbar-nav .dropdown-menu > li > a:focus,
.navbar-inverse .navbar-nav .dropdown-menu > li > a:focus-visible {
    outline: 1px solid #ffffff;
    background-color: #1e3948 !important;
    color: #ffffff !important;
}

.navbar-inverse .navbar-nav .dropdown-menu > li > a:hover {
    background-color: #1e3948 !important;
    color: #ffffff !important;
}

.navbar-inverse .navbar-nav > li > a.dropdown-toggle.inactiveDropdown.activeState:active,
.navbar-inverse .navbar-nav > li > a.dropdown-toggle.inactiveDropdown.activeState:focus,
.navbar-inverse .navbar-nav > li > a.dropdown-toggle:active,
.navbar-inverse .navbar-nav > li > a.dropdown-toggle:focus {
	outline: 2px solid #1e3948;
	background: #1e3948;
}

.navbar-inverse .navbar-nav > li > a.dropdown-toggle.inactiveDropdown.activeState:focus,
.navbar-inverse .navbar-nav > li > a.dropdown-toggle:focus {
	outline: 2px solid #ffffff;
}

.navbar-inverse .navbar-nav > li > a.dropdown-toggle.inactiveDropdown:active,
.navbar-inverse .navbar-nav > li > a.dropdown-toggle.inactiveDropdown:focus {
	color: #fff;
    background-color: transparent;
}

.page-mypaperwork-reg-step1 .navbar-inverse .navbar-nav > li > a {
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
}

.navbar-inverse .navbar-nav > li > button {
	color: #fff;
	background-color: transparent;
	border: none;
	padding: 15px;
	font-size: inherit;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.6;
}

.navbar-inverse .navbar-nav > li > button:hover {
	color: #fff;
	background-color: transparent;
	text-decoration: none;
}

@media (min-width: 768px) {
	.navbar-inverse .navbar-nav > li > a.activeState {
		border: 2px solid #ffffff;
		padding: 12px 13px;
	}
	.navbar-inverse .navbar-nav > li > button.activeState {
		border: 2px solid #ffffff;
		padding: 13px;
	}
	.navbar-inverse .navbar-nav > li > a.navbar-notification-btn.activeState {
		padding: 2px 18px 4px 18px !important;
	}
	.navbar-inverse .navbar-nav > li > a.activeState:not(:focus),
	.navbar-inverse .navbar-nav > li > button.activeState:not(:focus) {
		outline: none;
	}
	.navbar-inverse .navbar-nav > li > a:focus,
	.navbar-inverse .navbar-nav > li > a:focus-visible,
	.navbar-inverse .navbar-nav > li > button:focus,
	.navbar-inverse .navbar-nav > li > button:focus-visible {
		outline-offset: -6px;
	}
}

/* START - Navigation Icon Bar */
.navigation-icon-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: white;
    z-index: 99;
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    border-top: 1px solid #d3e0e9;
}
.navigation-icon-bar-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: #000;
	width: 25%;
	height: 100%;
}
.navigation-icon-bar-item.navActiveState,
.navigation-icon-bar-item.activeState,
.navigation-icon-bar-item:focus,
.navigation-icon-bar-item:active {
	background: #1e3948;
	color: #fff;
	text-decoration: none;

}

.navigation-icon-bar-item .svg-icon {
	width: 18px;
    height: 18px; 
    background-color: #000;
    margin: 2px;
}
.navigation-icon-bar-item .svg-icon.icon-mycase {
	width: 20px;
    height: 20px;
    margin: 1px; 
	-webkit-mask: url(../images/USC_logo.svg) no-repeat center / contain;
    mask: url(../images/USC_logo.svg) no-repeat center / contain;
}

.navigation-icon-bar-item .svg-icon.icon-clone {
	-webkit-mask: url(../images/clone-regular.svg) no-repeat center / contain;
    mask: url(../images/clone-regular.svg) no-repeat center / contain;
}
.navigation-icon-bar-item .svg-icon.icon-paperwork {
	-webkit-mask: url(../images/paperclip-solid.svg) no-repeat center / contain;
    mask: url(../images/paperclip-solid.svg) no-repeat center / contain;
}
.navigation-icon-bar-item.navActiveState .svg-icon.icon-clone,
.navigation-icon-bar-item.navActiveState .svg-icon.icon-chat,
.navigation-icon-bar-item.activeState .svg-icon.icon-mycase,
.navigation-icon-bar-item.activeState .svg-icon.icon-user-solid,
.navigation-icon-bar-item.activeState .svg-icon.icon-paperwork,
.navigation-icon-bar-item:focus .svg-icon.icon-mycase,
.navigation-icon-bar-item:active .svg-icon.icon-mycase,
.navigation-icon-bar-item:focus .svg-icon.icon-clone,
.navigation-icon-bar-item:active .svg-icon.icon-clone,
.navigation-icon-bar-item:focus .svg-icon.icon-user-solid,
.navigation-icon-bar-item:active .svg-icon.icon-user-solid, 
.navigation-icon-bar-item:focus .svg-icon.icon-paperwork,
.navigation-icon-bar-item:active .svg-icon.icon-paperwork {
	color: #1e3948;
	background-color: #fff;
}
.navigation-icon-bar-item .svg-icon.icon-user-solid {
	-webkit-mask: url(../images/user-solid.svg) no-repeat center / contain;
    mask: url(../images/user-solid.svg) no-repeat center / contain;
}

.svg-icon.icon-pencil-solid {
	-webkit-mask: url(../images/pencil-solid.svg) no-repeat center / contain;
    mask: url(../images/pencil-solid.svg) no-repeat center / contain;
}

.svg-icon.file-arrow-download {
	display: block;
	width: 16px;
    height: 22px;
    background: #1D6080;
	-webkit-mask: url(../images/file-download.svg) no-repeat center / contain;
    mask: url(../images/file-download.svg) no-repeat center / contain;
	cursor: pointer;
}

.svg-icon.trash-can-arrow-up {
	display: block;
	width: 22px;
	height: 22px;
	background: #1D6080;
	-webkit-mask: url(../images/trash-can-arrow-up.svg) no-repeat center / contain;
	mask: url(../images/trash-can-arrow-up.svg) no-repeat center / contain;
	cursor: pointer;
}

.trash-can-arrow-up-mobile {
	display: none;
}

.svg-icon.file-pending {
	display: block;
	width: 16px;
    height: 22px;
    background: #1D6080;
	-webkit-mask: url(../images/pending.svg) no-repeat center / contain;
    mask: url(../images/pending.svg) no-repeat center / contain;
	cursor: pointer;
}

.svg-icon.file-exclamation {
	display: block;
	width: 16px;
    height: 22px;
    background: #1D6080;
	-webkit-mask: url(../images/exclamation.svg) no-repeat center / contain;
    mask: url(../images/exclamation.svg) no-repeat center / contain;
	cursor: pointer;
	transform: scale(1.5,1.55);
}

.modified-warning-text {
	padding: 15px;
	background-color: #e4b9b9;
	text-align: center;
	font-weight: 600;
	margin-top: -15px;
}

.paperwork-name-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* white-space (not text-wrap) -- text-wrap is Safari 17.4+, so it is dropped
	   on iOS 16 and Bootstrap's mobile white-space:nowrap would win. */
	white-space: normal;
	min-width: 0;
	gap: 1rem;
}

.modal-dialog.paperwork-download-modal {
	margin-top: 250px;
}

@media screen and (max-width: 767px) {
	/* reserve space for the fixed bottom navigation bar on mobile */
	body.with-bottom-navbar {
		min-height: calc(100vh - 50px);
		margin-bottom: 50px;
	}
	.footer .container {
		padding-bottom: 75px;
	}
}

/* END - Navigation Icon Bar */

.navbar-collapse.in {
  height: calc(100vh - 50px);
}

/* START : Accordion */
#accordion, .jquery-accordion{
	width: 100%;
	min-width: 340px;
    margin:0 auto; 
}
#accordion h3, .jquery-accordion h3{
    width:100%;
    height:auto;
    color:white;
    background:rgb(31,104,150);
    padding:10px;
    border:1px solid rgb(31,104,150);
    margin-top:10px;
    margin-bottom: 0;
    font-size:15px;
    text-align:left;
}
#accordion h3 + div, .jquery-accordion h3 + div{
    border:1px solid rgb(31,104,150);
    height:auto !important;
}
/* END : Accordion */

.agreements {
	display: flex;
	flex-direction: column;
	color: #1D6080;
}

.agreements a {
	text-decoration: underline;
	font-weight: 600;
}

.agreements-header {
	border-bottom: 1px solid #e5e5e5;
}

.userInformation-modal-buttons {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.svg-icon.icon-info-circle {
	display: inline-block;
	vertical-align: middle;
	width: 16px;
    height: 16px;
    margin-right: 10px;
    background: #31708f;
	-webkit-mask: url(../images/icon-info.svg) no-repeat center / contain;
    mask: url(../images/icon-info.svg) no-repeat center / contain;
}
/** Start :Add Case Modal **/

.info-block {
    display: flex;
    align-items: center;
}
a.tsdp-step-link, button.tsdp-step-link {
	text-underline-offset: 2px;
	color: #fff;
	font-weight: bold;
	text-decoration: underline;
}

a.tsdp-step-link:hover,button.tsdp-step-link:hover {
	text-decoration: none;
}

.tsdp-step {
	align-items: center;
	justify-content: center;
	color: #1D6080;
	width: 24px;
	height: 24px;
	background-color: #fff;
	border-radius: 50%;
}
.step-completed div {
	color: #d7d7db;
}
.pointer-events-none {
	pointer-events: none;
}
.step-completed .tsdp-step {
	background-color: #d7d7db;
}
.model-body-header{
  margin: 0 auto;
    width: 75%;
}
.modal-heading{
    margin-left: 20px;
}

.model-body-content{
    margin-left: 20px;
}

.modal-heading-content{
    margin-left: 20px ;
}

.info-block-content {
    text-align: left;
    display: inline-block;
}
.login-content{
    margin: 0 auto;
    width: 75%;
 }
/** END: Add Case Model **/
.line{
	width: 100%;
	border: 0.5px solid #536570;
}
.icon-gavel-solid{
	width: 30px;
    height: 30px;
    margin-right: 10px;
    background: #31708f;
	-webkit-mask: url(../images/gavel-solid.svg) no-repeat center / contain;
    mask: url(../images/gavel-solid.svg) no-repeat center / contain;
}
.icon-gavel-solid-inline{
	width: 16px;
    height: 16px;
    margin-left: 10px;
    background: #31708f;
	-webkit-mask: url(../images/gavel-solid.svg) no-repeat center / contain;
    mask: url(../images/gavel-solid.svg) no-repeat center / contain;
}
.icon-traffic-cone{
	width: 24px;
	display: inline-block;
    height: 24px;
    background: #31708f;
    margin-left: 7px;
    cursor: pointer;
	-webkit-mask: url(../images/traffic-cone.svg) no-repeat center / contain;
	mask: url(../images/traffic-cone.svg) no-repeat center / contain;
}
.gavel-block{
  	width: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
}

.step-panel.nav > li.disabled > a {
  color: #4F5963;
}

.step-panel.nav > li.disabled > a:hover,
.step-panel.nav > li.disabled > a:focus {
  color: #4F5963;
}
.textWithIcon{
	display: flex;
}
.svg-icon.icon-user-shield{
	width: 16px;
    height: 16px;
    margin-left: 10px;
    background: #a94442;
	-webkit-mask: url(../images/user-shield-solid.svg) no-repeat center / contain;
    mask: url(../images/user-shield-solid.svg) no-repeat center / contain;
    cursor: pointer;
}
.svg-icon-wrapper{
	display: flex;
	width: 15%;
	justify-content: center;
}
.svg-icon.icon-file-circle-exclamation{
    display: block;
	width: 16px;
    height: 16px;
    background: #a94442;
	-webkit-mask: url(../images/file-circle-exclamation-solid.svg) no-repeat center / contain;
    mask: url(../images/file-circle-exclamation-solid.svg) no-repeat center / contain;
    cursor: pointer;
}
.svg-icon-wrapper .svg-icon.icon-user-shield, 
.svg-icon-wrapper .svg-icon.icon-file-circle-exclamation{
	width: 25px;
    height: 25px;
}
.svg-icon.icon-pencil-solid{
    display: block;
	width: 16px;
    height: 16px;
    margin:0 auto;
    background:#1D6080;
	-webkit-mask: url(../images/pencil-solid.svg) no-repeat center / contain;
    mask: url(../images/pencil-solid.svg) no-repeat center / contain;
    cursor: pointer;
}
.svg-icon.icon-check-solid{
    display: block;
	width: 16px;
    height: 16px;
    margin:0 auto;
    background:#187f4e;
	-webkit-mask: url(../images/check-solid.svg) no-repeat center / contain;
    mask: url(../images/check-solid.svg) no-repeat center / contain;
}
.svg-icon.icon-xmark-solid{
    display: block;
	width: 16px;
    height: 16px;
    margin:0 auto;
    background:#c0392b;
	-webkit-mask: url(../images/xmark-solid.svg) no-repeat center / contain;
    mask: url(../images/xmark-solid.svg) no-repeat center / contain;
}
.svg-icon.user-secret-solid{
    display: block;
	width: 25px;
    height: 25px;
    margin-right: 15px;
    background:#1D6080;
	-webkit-mask: url(../images/user-secret-solid.svg) no-repeat center / contain;
    mask: url(../images/user-secret-solid.svg) no-repeat center / contain;
    cursor: pointer; 
}


.nickname_definition{
	display:flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}
.nickname_desc{
	min-width: 0;
	margin-bottom: 0;
	line-break:anywhere;
	text-wrap: wrap;
}

button.unstyled-btn{
	border: none;
	background: none;
	padding: 0;
	color: inherit;
	line-height: inherit;
	cursor: pointer;
	&:disabled {
		cursor: default;
	}
}

button.text-link-button.login-page-link-btn {
  font-size: 13px;
}

button.text-link-button,
button.info-page-link,
a.access-help-link,
button.case-info-help-link {
	color: #1D6080;
	text-decoration: underline;
}

button.text-link-button:disabled,
button.info-page-link:disabled,
a.access-help-link:disabled,
button.case-info-help-link:disabled{
	color: inherit;
}

.anchor-text-decoration-none,
.anchor-text-decoration-none:hover,
.anchor-text-decoration-none:focus {
	text-decoration: none;
}

.login-note{
	background: #1D6080;
	color: white;
	text-align: left;
	border-radius: 5px;
}

.login-note-hyperlink{
	color: #fff;
    text-decoration: underline;
	font-weight: 600;
}
.login-note-hyperlink:focus,
.login-note-hyperlink:hover{
	color: #fff;
	text-decoration: none;
}

.step-panel.nav > li > a:focus-visible,
.login-note-hyperlink:focus-visible,
.ui-accordion-header:focus-visible,
.ui-accordion-header.ui-state-focus {
	outline: 2px solid #ffffff !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 4px #16394f !important;
}


.text-link-button:focus,.text-link-button:hover, .info-page-link:focus, .info-page-link:hover, .access-help-link:focus, .access-help-link:hover, .case-info-help-link:focus, .case-info-help-link:hover {
	color: #1e3948;
}

.rw-widget-container {
	z-index: 999 !important;
}

.dp-alert-info-message {
	display: flex;
    justify-content: center;
    gap: 5px;
    width: 48.75%;
    margin: 0 auto;
    margin-bottom: 15px;
}
@media screen and (min-width: 768px){
    .navbar-notification-btn.mobile-menu {
        display: none;
    }
    .notificationLiveRegionId-mobile{
        display: none;
    }
}
@media screen and (max-width: 768px){
	.dp-alert-info-message{
		width: 100%;
		font-size: 11px;
	}
	.navbar-notification-btn.desktop-menu  {
	    display: none;
	}
	.notificationLiveRegionId-desktop{
        display: none;
    }
}
.navbar-notification-btn.mobile-menu {
    margin-right: 10px;
}
.user-notification-unread td {
    font-weight: 700;
    background-color: white;
}

#userNotificationTableId button.unstyled-btn { 
	min-height: 24px;
	vertical-align: top;
} 

#userNotificationTableId td, #userNotificationTableId th {
	vertical-align: middle;
}

li.active .mini-nav-tab {
	color: #fff;
    background-color: #1D6080;
    margin-bottom: 0;
    text-align: center;
    border-radius: 4px;
    display: block;
}
.dropdown-menu > li > a {
  color: #525252;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #E5EDF0;
}

input[type="radio"].custom-radio-button {
  /* Remove the default radio button appearance */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  width: 16px;
  height: 16px;
  border: 1px solid rgb(0, 0, 0, 0.8);
  background-color: white;
  border-radius: 50%;
  margin: 0;
  opacity: 1;
  margin-left: -20px;
}

input[type="radio"]:checked.custom-radio-button {
  background-color: white;
  border: 4px solid #1D6080;
}

input[type="radio"]:focus.custom-radio-button{
	outline: 1px solid black;
	outline-offset: 3px;
} 

/* ==================== Start:  Responsive Table CSS ==================== */
table.custom-responsive-table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  table-layout: fixed;
}

table.custom-responsive-table a:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
    border-radius: 1px;
}

table.custom-responsive-table tr.active-tr{
	background-color: #DDE0E4;
    border: 1px solid #C6CBD2;
}

table.custom-responsive-table tr {
  background-color: #fbfbfb;
  border: 1px solid #ddd;
  padding: 10px;
}

table.custom-responsive-table tr:hover {
	background-color: #F2F3F5;
}

table.custom-responsive-table thead tr {
	background-color: #EBEDEF;
}

table.custom-responsive-table thead tr th {
    width: 100%;
}

table.custom-responsive-table th,
table.custom-responsive-table td {
  padding: 8px;
  text-align: left;
}

table.custom-responsive-table td.listTable {
	text-align: center;
}

table.custom-responsive-table th {
  font-weight: bold;
  font-size: 8pt;
}

table.custom-responsive-table td.viewMoreBtnTd {
	display: none;
}

table.custom-responsive-table td.hearing-link {
	text-align: center;
}

@media screen and (max-width: 767px) {
  table.custom-responsive-table {
    border: 0;
  }

  table.custom-responsive-table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table.custom-responsive-table tr {
    border-bottom: 3px solid #ddd;
    display: flex;
    flex-direction: column;
    margin: 10px;
  }
  
  /* Flex, not float. With a floated label the value box is squeezed into the
     strip beside it; a nowrap value cannot shrink to that strip and overflows
     leftward, printing straight over the label (UTCOURT: iOS 16 My Paperwork).
     nowrap keeps the value on the label's line: flex breaks lines on max-content
     before flex-shrink runs, so wrapping would relocate a long value instead of
     shrinking it into the space beside the label. */
  table.custom-responsive-table td {
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: baseline;
    column-gap: 8px;
    text-align: right;
  }

  /* Beats Bootstrap's .table-responsive > .table > tbody > tr > td nowrap
     (0,2,3) with (0,2,4), so the win does not depend on stylesheet order. */
  .table-responsive table.custom-responsive-table > tbody > tr > td {
    white-space: normal;
    overflow-wrap: break-word;
    /* anywhere, not break-word, is what shrinks min-content -- and min-content is
       a flex item's automatic minimum size. Most values are bare text, i.e.
       anonymous flex items that no selector can reach with min-width: 0. */
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  
  table.custom-responsive-table tr:hover {
	background-color: inherit;
  }

  table.custom-responsive-table.case-calendar tr.highlight:hover {
    background-color: #D9EDF7;
  }
  
  table.custom-responsive-table #noSearchResults td,
  table.custom-responsive-table td.text-center {
  	text-align: center;
  	justify-content: center;
  }
  
  table.custom-responsive-table td[data-label]::before {
    content: attr(data-label);
    margin-right: auto;
    flex-shrink: 0;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
  }
  
  table.custom-responsive-table td:last-child {
    border-bottom: 0;
  }
  table.custom-responsive-table td.viewMoreBtnTd {
	display: flex;
	text-align: center;
	justify-content: center;
  }
  a.viewMoreBtn {
	text-decoration: none !important;
	font-weight: bold;
  }
  table.custom-responsive-table td.hearing-link {
	text-align: right;
  }
}

/* ==================== End:  Responsive Table CSS ==================== */

/* ==================== Start: Paperwork CSS ==================== */

#paperWorkTableId.custom-responsive-table td,
#bulkPaperWorkTableId.custom-responsive-table td {
	overflow: hidden;
}

/* ---------- My Paperwork: Edit column ---------- */

#paperWorkTableId.custom-responsive-table td.paperwork-edit-cell {
	padding-left: 8px;
	padding-right: 0;
	white-space: nowrap;
}

#paperWorkTableId.custom-responsive-table td.paperwork-edit-cell > .btn {
	min-width: 68px;
}

#paperWorkTableId.custom-responsive-table .paperwork-delete-label,
#bulkPaperWorkTableId.custom-responsive-table .paperwork-delete-label {
	display: none;
}

/* ---------- Mobile card actions: Delete + Edit (both paperwork tables) ---------- */

@media screen and (max-width: 767px) {
	/* Two-up action row. The :not(.filtered) guard is required: tablesorter hides
	   filtered rows by class alone, so an unguarded row display rule would
	   break the mobile search on either table. */
	#paperWorkTableId.custom-responsive-table > tbody > tr:not(.filtered):not([data-empty-state]),
	#bulkPaperWorkTableId.custom-responsive-table > tbody > tr:not(.filtered):not([data-empty-state]) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	#paperWorkTableId.custom-responsive-table > tbody > tr.filtered,
	#bulkPaperWorkTableId.custom-responsive-table > tbody > tr.filtered {
		display: none;
	}

	#paperWorkTableId.custom-responsive-table > tbody > tr > td,
	#bulkPaperWorkTableId.custom-responsive-table > tbody > tr > td {
		grid-column: 1 / -1;
		min-width: 0;
	}

	#paperWorkTableId.custom-responsive-table > tbody > tr > td.paperwork-action-cell,
	#paperWorkTableId.custom-responsive-table > tbody > tr > td.paperwork-edit-cell,
	#bulkPaperWorkTableId.custom-responsive-table > tbody > tr > td.paperwork-action-cell,
	#bulkPaperWorkTableId.custom-responsive-table > tbody > tr > td.bulk-paperwork-edit-cell {
		grid-column: auto;
		border-bottom: 0;
		min-width: 0;
		overflow: hidden;
	}
	#paperWorkTableId.custom-responsive-table > tbody > tr > td.paperwork-action-cell,
	#bulkPaperWorkTableId.custom-responsive-table > tbody > tr > td.paperwork-action-cell {
		order: 1;
		text-align: left;
		justify-content: flex-start;
	}
	#paperWorkTableId.custom-responsive-table > tbody > tr > td.paperwork-edit-cell,
	#bulkPaperWorkTableId.custom-responsive-table > tbody > tr > td.bulk-paperwork-edit-cell {
		order: 2;
		text-align: right;
		padding: 8px;
	}

	/* Drop the data-label prefix -- the button text is self-describing. */
	#paperWorkTableId.custom-responsive-table > tbody > tr > td.paperwork-action-cell::before,
	#paperWorkTableId.custom-responsive-table > tbody > tr > td.paperwork-edit-cell::before,
	#bulkPaperWorkTableId.custom-responsive-table > tbody > tr > td.paperwork-action-cell::before,
	#bulkPaperWorkTableId.custom-responsive-table > tbody > tr > td.bulk-paperwork-edit-cell::before {
		content: none;
	}

	/* Icon out, text label in. Hiding the icon also neutralises the global
	   .icon-circle-with-minus:before "Remove Paperwork" override further down,
	   which stays in place for the eDocument delete button elsewhere. */
	#paperWorkTableId.custom-responsive-table .paperwork-delete-btn > .icon-circle-with-minus,
	#bulkPaperWorkTableId.custom-responsive-table .paperwork-delete-btn > .icon-circle-with-minus {
		display: none;
	}
	#paperWorkTableId.custom-responsive-table .paperwork-delete-label,
	#bulkPaperWorkTableId.custom-responsive-table .paperwork-delete-label {
		display: inline-block;
	}

	#paperWorkTableId.custom-responsive-table button.paperwork-delete-btn,
	#bulkPaperWorkTableId.custom-responsive-table button.paperwork-delete-btn {
		padding: 5px 10px;
		font-size: 12px;
		line-height: 1.5;
		color: #fff;
		background-color: #bf5329;
		border: 1px solid #aa4a24;
		border-radius: 3px;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
	}
	#paperWorkTableId.custom-responsive-table button.paperwork-delete-btn:hover,
	#paperWorkTableId.custom-responsive-table button.paperwork-delete-btn:focus,
	#bulkPaperWorkTableId.custom-responsive-table button.paperwork-delete-btn:hover,
	#bulkPaperWorkTableId.custom-responsive-table button.paperwork-delete-btn:focus {
		color: #fff;
		background-color: #954120;
		border-color: #78341a;
	}
}

/* ---------- My High-Volume Paperwork: Edit column ---------- */

#bulkPaperWorkTableId.custom-responsive-table td.bulk-paperwork-edit-cell {
	padding-left: 8px;
	padding-right: 0;
	white-space: nowrap;
}

#bulkPaperWorkTableId.custom-responsive-table td.bulk-paperwork-edit-cell > .btn {
	min-width: 68px;
}

.navbar .nav-btn{
	color: #fff;
    padding: 14px 15px;
    line-height: 22px;
}

.d-flex-center{
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-footer-btn-wrapper{
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

#impersonateFormId .form-group{
	margin: 0;
}

.mb-2{
	margin-bottom: 10px !important;
}

.btn-outline-primary {
    color: #1D6080;
    background-color: transparent;
    background-image: none;
    border-color: #1D6080;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #1D6080;
    border-color: #2a88bd;
}

.btn-outline-primary:hover .svg-icon.user-secret-solid{
	background: #fff;
}

.impersonate-btn-container{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}

.align-center{
	margin: 10px auto !important;
}

/* Mobile view alignment for paperwork */
@media (max-width: 375px){

	.mobile-left-align
	{
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	}
	.search-box-margin{
	  margin-right: 10px !important;
	  margin-left: 10px !important;
	  margin-bottom: 5px;
	}
  }

  /* Vertical-align in mobile view for mycase login*/
@media (max-width: 406px){
	.mobile-right-align{
	  display: flex;
	  flex-direction: column;
	  align-items: flex-end;
	}
  }

  /* Remove icon changing to text in mobile view */
@media(max-width:767px) {
		.icon-circle-with-minus:before {
			content: "Remove Paperwork";
			font-family: inherit;
		}
		.svg-icon.trash-can-arrow-up {
			display: none;
		}
		.trash-can-arrow-up-mobile {
			display: block;
			color: #1D6080;
			text-align: right;
		}
		.paperwork-name-section {
			/* flex-end, not right: the positional keyword is unreliable in older WebKit. */
			justify-content: flex-end;
		}
}

a.disable-document-title {
	/* since we are using cursor: not-allowed; here, need to prevent the click event from js or jsp */
	cursor: not-allowed !important;
	color: grey !important;
	text-decoration: none !important;
	pointer-events: auto !important;
}

a.disable-document-title:focus {
	outline: none !important;
}

/* ==================== End: Paperwork CSS ==================== */

#searchCaseConfirmationModal.modal{
	z-index: 1081;
}

.modal-backdrop.inner-backdrop {
	z-index: 1080 !important;
}

#searchCaseConfirmationModal{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.case-selection-container {
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #f9f9f9;
}

.case-selection-title {
	color: #333;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
}

.case-list-container {
	max-height: 460px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.case-selection-row-wrapper {
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
	display: flex;
	gap: 2rem;
	color: #333;
	font-weight: normal;
	align-items: flex-start;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.case-selection-row-content {
	width: 100%;
	container-type: inline-size;
}

.case-selection-title-location-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 10px;
}

.case-selection-location-wrapper {
	text-align: right;
}

@container (max-width: 500px) {
	.case-selection-title-location-wrapper {
		flex-direction: column;
		gap: 10px;
		align-items: flex-start;
	}

	.case-selection-title-section {
		flex: 1;
	}

	.case-selection-location-wrapper {
		text-align: left;
		flex: 1;
	}
}
.case-selection-metadata {
	display: grid;
	align-items: center;
	justify-content: space-between;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 15px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 2px solid #f0f0f0;
}

.case-selection-metadata-col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.5rem;
}

.case-selection-metadata-col:last-child {
	text-align: right;
}

.pagination {
	text-align: center;
	margin: 20px 0;
}
.pagination button {
	margin: 0 5px;
	padding: 8px 12px;
	cursor: pointer;
}
.pagination button.active {
	background: #007cba;
	color: white;
}
.pagination button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.case-selection-row-wrapper:hover {
	border-color: #1D6080;
	box-shadow: 0 4px 8px rgba(29, 96, 128, 0.15);
	transform: translateY(-2px);
}

.case-selection-row-wrapper:has(input:checked) {
	background-color: #f0f8ff;
	border-color: #1D6080;
	box-shadow: 0 4px 12px rgba(29, 96, 128, 0.2);
}


.case-selection-metadata-col > div:first-child {
	font-weight: 600;
	color: #666;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.case-selection-metadata-col > div:last-child {
	font-weight: 500;
	color: #333;
	font-size: 14px;
}

/* Enhanced pagination using existing pagination class */
.pagination-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	margin: 20px 0;
	padding: 15px;
	background-color: #f8f9fa;
	border-radius: 6px;
}

.pagination-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.pagination-info {
	font-size: 14px;
	color: #666;
	text-align: center;
}

.pagination-ellipsis {
	padding: 6px 4px;
	color: #6c757d;
	font-weight: 500;
	display: flex;
	align-items: center;
}
/* Warning message for max results (5-page limit) */
#max-results-warning {
	border: 1px solid #f0ad4e;
	border-radius: 4px;
	background-color: #fcf8e3;
	color: #8a6d3b;
	padding: 12px;
	margin: 10px 0;
	text-align: left;
}

#max-results-warning .text-semibold {
	font-weight: 600;
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

#max-results-warning .icon-exclamation {
	margin-right: 5px;
	color: #f0ad4e;
}

/* Custom Radio Button for case selection */
.case-selection-row-wrapper input[type="radio"] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
}

@media (max-width: 767px) {
	.case-selection-row-wrapper {
		gap: 10px;
	}

	.case-selection-row-wrapper input[type="radio"] {
		align-self: flex-start;
		margin-top: 1rem;
	}

	.case-selection-row-content {
		margin-top: 1rem;
	}

	.case-selection-metadata {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.case-selection-metadata-col {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 8px 0;
		border-bottom: 1px solid #ddd;
	}

	.case-selection-metadata-col:last-child {
		border-bottom: none;
	}

	.case-selection-location-wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.pagination-controls {
		gap: 5px;
	}

	.pagination-ellipsis {
		padding: 4px 2px;
		font-size: 12px;
	}

	.case-list-container {
		max-height: 300px;
	}

	#max-results-warning {
		padding: 10px;
		margin: 5px 0;
	}

	#max-results-warning .text-sm {
		font-size: 12px;
		line-height: 1.4;
	}
}

@media (max-width: 480px) {
	.case-selection-metadata-col > div:first-child {
		font-size: 11px;
	}

	.case-selection-metadata-col > div:last-child {
		font-size: 13px;
	}
}

/* Alternative: Completely dynamic flex layout */
.modal-dialog .search-form-flex-auto {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin: 20px 0;
	align-items: flex-start;
	container-type: inline-size;
}

.modal-dialog .search-form-flex-auto .form-group {
	flex: 1 1 auto;
	min-width: 200px;
	width: calc(50% - 7.5px); /* Default to 2 columns */
}

/* Container query for modal between 500px and 768px width */
@container (min-width: 500px) and (max-width: 768px) {
	.modal .search-form-flex-auto .form-group:last-child {
		flex-grow: 0; /* Prevent the last field from growing to fill remaining space */
		min-width: calc(50% - 7.5px);
	}
}

/* Additional container queries for different modal sizes */
@container (min-width: 800px) {
	.modal .search-form-flex-auto .form-group {
		width: calc(33.333% - 10px); /* 3 columns */
	}
}

@container (min-width: 1200px) {
	.modal .search-form-flex-auto .form-group {
		width: calc(25% - 11.25px); /* 4 columns */
	}
}

@container (max-width: 500px) {
	.modal .search-form-flex-auto .form-group {
		width: 100%; /* 1 column on small screens */
		min-width: 100%;
		max-width: 100%;
	}
}

.pagination-container-visible {
	display: block;
}

.pagination-container-hidden {
	display: none;
}

.deleted-paperwork > .panel-body {
    background-color: #c8c8c8;
}

#userNotificationContentId {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

#userNotificationContentId a {
    text-decoration: underline;
}

/* Quill alignment classes */
.ql-align-center {
    text-align: center;
}
.ql-align-right {
    text-align: right;
}
.ql-align-justify {
    text-align: justify;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

a.start-here-btn {
	text-decoration: none;
	min-width: 180px;
	padding-left: 28px;
	padding-right: 28px;
}

/* Logout Confirmation Modal */
#logoutConfirmationModalId .modal-dialog {
    display: flex;
    align-items: center;
    min-height: 100vh;
    margin: 0 auto;
    max-width: 500px;
}

#logoutConfirmationModalId .modal-content {
    width: 100%;
    border-radius: 6px;
}

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

#logoutConfirmationModalId .modal-header .close {
    padding: .5rem .5rem;
    margin: -.5rem -.5rem -.5rem auto;
}

#logoutConfirmationModalId .modal-header h5 {
    font-weight: 500;
    font-size: 1.75rem;
    margin: 0;
}

#logoutConfirmationModalId .modal-body {
    padding: 1.5rem;
}

#logoutConfirmationModalId .modal-body p {
    margin-bottom: 0;
}

#logoutConfirmationModalId .modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1.5rem;
    border-top: 1px solid #dee2e6;
}

#eDocumentTableId .edocument-delete-btn {
	padding-left: 5px;
}

@media (max-width: 576px) {
    #logoutConfirmationModalId .modal-dialog {
        max-width: 100%;
        margin: 0 10px;
    }
}

/* Attach file modal styles */

.attach-file-body p {
	line-height: 1.5;
}
.attach-file-footer .btn + .btn {
	margin-left: 5px;
	margin-bottom: 0;
	float: right;
}

#eDocAttachButtonId:disabled{
	cursor: not-allowed;
	background-color: #1d6080;
	border-color: #2a88bd;
    opacity: .65;
}

.attach-file-footer button{
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;

}

.attach-file-header,
.attach-file-footer {
	position: relative;
	padding: 15px;
	border-bottom: 1px solid #e5e5e5;
	justify-content: space-between;
}
.attach-file-header .close {
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: 0.6;
}
.attach-file-body {
	position: relative;
	padding: 15px;
	border-bottom: 1px solid #e5e5e5;
}

.input-group-btn .btn {
	font-size: 12px;
}

.input-group-btn .doc-upload-button {
	font-size: 13.5px;
}

.visually-hidden {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  padding: 0!important;
  margin: -1px!important;
  overflow: hidden!important;
  clip: rect(0,0,0,0)!important;
  white-space: nowrap!important;
  border: 0!important;
}

.external-link-icon {
	width: 13px;
	height: 13px;
	margin-left: 4px;
	vertical-align: middle;
}


/* jQuery UI datepicker calendar styling (theme CSS not loaded; scoped to .ui-datepicker) */
.ui-datepicker {
	display: none;
	width: 23.8em;
	padding: 0.3em;
	background: #ffffff;
	border: 1px solid #536570;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
	font-size: 13px;
	z-index: 1060;
}
.ui-datepicker .ui-datepicker-header {
	background: #f1f3f4;
	border-radius: 4px;
	display: grid;
	grid-template-columns: 1.9em 1.9em minmax(0, 1fr) 1.9em 1.9em;
	grid-template-rows: 2em;
	column-gap: 0.2em;
	align-items: center;
	padding: 0.35em;
}
.ui-datepicker .ui-datepicker-title {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.2em;
	text-align: center;
	line-height: 1;
	margin: 0;
	white-space: nowrap;
}
.ui-datepicker .ui-datepicker-title select { font-size: 12px; margin: 0; padding: 2px 3px; }
.ui-datepicker .ui-datepicker-title .ui-datepicker-month { width: 6.9em; }
.ui-datepicker .ui-datepicker-title .ui-datepicker-year { width: 4.9em; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev-year, .ui-datepicker .ui-datepicker-next-year {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: 1.9em; height: 1.9em; line-height: 1.9em;
	text-align: center; cursor: pointer; border-radius: 4px;
}
.ui-datepicker .ui-datepicker-prev { grid-column: 2; grid-row: 1; justify-self: center; }
.ui-datepicker .ui-datepicker-prev-year { grid-column: 1; grid-row: 1; justify-self: center; }
.ui-datepicker .ui-datepicker-next { grid-column: 4; grid-row: 1; justify-self: center; }
.ui-datepicker .ui-datepicker-next-year { grid-column: 5; grid-row: 1; justify-self: center; }
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev-year:hover, .ui-datepicker .ui-datepicker-next-year:hover { background: #e2e6ea; }
.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker .ui-datepicker-next.ui-state-disabled,
.ui-datepicker .ui-datepicker-prev-year.ui-state-disabled,
.ui-datepicker .ui-datepicker-next-year.ui-state-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background: #eef1f3;
	pointer-events: none;
}
/* render arrows with CSS (no theme sprite); keep the link's SR text via title attribute */
.ui-datepicker .ui-datepicker-prev::before { content: "\2039"; font-size: 18px; color: #1f4e79; }
.ui-datepicker .ui-datepicker-next::before { content: "\203A"; font-size: 18px; color: #1f4e79; }
.ui-datepicker .ui-datepicker-prev-year::before { content: "\00AB"; font-size: 16px; color: #1f4e79; }
.ui-datepicker .ui-datepicker-next-year::before { content: "\00BB"; font-size: 16px; color: #1f4e79; }
.ui-datepicker .ui-datepicker-prev.ui-state-disabled::before,
.ui-datepicker .ui-datepicker-next.ui-state-disabled::before,
.ui-datepicker .ui-datepicker-prev-year.ui-state-disabled::before,
.ui-datepicker .ui-datepicker-next-year.ui-state-disabled::before { color: #8e99a2; }
.ui-datepicker .ui-datepicker-prev .ui-icon, .ui-datepicker .ui-datepicker-next .ui-icon {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
}
.ui-datepicker .ui-datepicker-prev-year .sr-only,
.ui-datepicker .ui-datepicker-next-year .sr-only {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
}
.ui-datepicker table.ui-datepicker-calendar { width: 100%; border-collapse: collapse; margin: 0.3em 0 0; }
.ui-datepicker .ui-datepicker-calendar th { padding: 0.35em 0; text-align: center; font-weight: 600; color: #333; }
.ui-datepicker .ui-datepicker-calendar td { padding: 1px; text-align: center; }
.ui-datepicker .ui-datepicker-calendar td a, .ui-datepicker .ui-datepicker-calendar td span {
	display: block; padding: 0.35em; text-decoration: none; color: #1a1a1a; border: 1px solid transparent; border-radius: 4px;
}
.ui-datepicker .ui-datepicker-calendar td a:hover { background: #dceafa; }
.ui-datepicker .ui-datepicker-calendar td span.ui-state-disabled, .ui-datepicker .ui-datepicker-other-month span { color: #aaaaaa; }
/* today */
.ui-datepicker .ui-datepicker-calendar td a.ui-state-highlight { background: #fff3cd; font-weight: 600; }
/* currently selected date */
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active { background: #1f4e79; color: #ffffff; }
/* visible focus indicator */
.ui-datepicker .ui-datepicker-calendar td a:focus,
.ui-datepicker .ui-datepicker-prev:focus, .ui-datepicker .ui-datepicker-next:focus,
.ui-datepicker .ui-datepicker-prev-year:focus, .ui-datepicker .ui-datepicker-next-year:focus,
.ui-datepicker .ui-datepicker-title select:focus {
	outline: 2px solid #005fcc;
	outline-offset: 1px;
	background: #dceafa;
}
.ui-datepicker .ui-datepicker-calendar td a:focus { color: #000000; }
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active:focus { color: #000000; background: #dceafa; }
/* footer button panel: one-click Clear (left) / Today (right), styled as links like the native control */
.ui-datepicker .ui-datepicker-buttonpane { margin: 0.4em 0 0; padding: 0.4em 0.2em 0.2em; border-top: 1px solid #d4dbe0; overflow: hidden; }
.ui-datepicker .ui-datepicker-buttonpane button {
	cursor: pointer; background: transparent; border: 0; padding: 0.3em 0.6em;
	color: #1d6080; font-size: 13px; text-decoration: underline; border-radius: 4px;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close { float: left; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: right; }
.ui-datepicker .ui-datepicker-buttonpane button:hover { background: #dceafa; }
.ui-datepicker .ui-datepicker-buttonpane button:focus { outline: 2px solid #005fcc; outline-offset: 1px; background: #dceafa; }
.animated-form .ui-datepicker-trigger {
	position: absolute;
	top: 26px;
	right: 8px;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231e3948%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2717%27%20rx%3D%272%27%2F%3E%3Cline%20x1%3D%273%27%20y1%3D%279%27%20x2%3D%2721%27%20y2%3D%279%27%2F%3E%3Cline%20x1%3D%278%27%20y1%3D%272%27%20x2%3D%278%27%20y2%3D%276%27%2F%3E%3Cline%20x1%3D%2716%27%20y1%3D%272%27%20x2%3D%2716%27%20y2%3D%276%27%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
	cursor: pointer;
	font-size: 0;
	color: transparent;
	line-height: 0;
}
.animated-form .ui-datepicker-trigger:hover { opacity: 0.7; }
.animated-form .ui-datepicker-trigger:focus { outline: 2px solid #005fcc; outline-offset: 1px; border-radius: 3px; }
/* in error state, shift left of the warning icon so they don't overlap */
.animated-form input.inputError ~ .ui-datepicker-trigger { right: 30px; }
#searchDateOfBirthId { padding-right: 34px; }

/*-- form control border override --*/
.form-control {
  border: 1px solid #536570;
}
/*-- MyPaperwork tab navigation: underline tabs integrated into the card --*/
.paperwork-tab-card {
	overflow: hidden;
}
.paperwork-tab-card > .tab-content > .tab-pane > .panel {
	border: none;
	box-shadow: none;
	border-radius: 0;
	margin-bottom: 0;
}
#paperWorkTabsId.nav-tabs {
	border-bottom: 1px solid #ddd;
	padding: 0 8px;
	background-color: #ffffff;
}
#paperWorkTabsId.nav-tabs > li {
	margin-bottom: -1px;
}
#paperWorkTabsId.nav-tabs > li > a {
	color: #1d6080;
	background-color: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	font-weight: 600;
	font-size: 16px;
	margin-right: 8px;
	padding: 12px 14px;
}
#paperWorkTabsId.nav-tabs > li > a:hover,
#paperWorkTabsId.nav-tabs > li > a:focus {
	color: #14495f;
	background-color: transparent;
	border: none;
	border-bottom: 3px solid #a9c8d9;
}
#paperWorkTabsId.nav-tabs > li.active > a,
#paperWorkTabsId.nav-tabs > li.active > a:hover,
#paperWorkTabsId.nav-tabs > li.active > a:focus {
	color: #1d6080;
	background-color: transparent;
	border: none;
	border-bottom: 3px solid #1d6080;
	cursor: default;
}
/* Show the focus ring only on keyboard traversal, not on mouse click.
   Inset offset keeps all four sides visible despite the card's overflow:hidden. */
#paperWorkTabsId.nav-tabs > li > a:focus {
	outline: none;
}
#paperWorkTabsId.nav-tabs > li > a:focus-visible {
	outline: 2px solid #1d6080;
	outline-offset: -2px;
}
/* Headings below the tabs: no gray background or border, more vertical padding */
.paperwork-tab-card .panel-heading {
	padding-top: 16px !important;
	padding-bottom: 10px !important;
	background-color: transparent;
	border-bottom: none;
}
/* Desktop: Start Here button placed at the right end of the tab bar; tabs stay on the left */
.paperwork-tab-header {
	display: flex;
	background-color: #ffffff;
}
.paperwork-tab-header > #paperWorkTabsId.nav-tabs {
	flex: 1 1 auto;
}
.paperwork-tab-header .start-here-action {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 12px 0 8px;
	border-bottom: 1px solid #ddd;
}
/* Mobile: segmented-control style tabs — gray rounded container,
   text-only labels, active tab as a filled blue pill */
@media screen and (max-width: 767px) {
	/* Keep mobile unchanged: the header collapses to a plain block containing only
	   the segmented tabs (the desktop Start Here button is hidden on mobile). */
	.paperwork-tab-header {
		display: block;
		background-color: transparent;
	}
	/* Mobile: Start Here spans the full width of its container (unchanged mobile behavior) */
	a.start-here-btn {
		display: block;
		width: 100%;
	}
	#paperWorkTabsId.nav-tabs {
		display: flex;
		gap: 6px;
		margin: 8px;
		padding: 6px;
		background-color: #eef1f4;
		border-bottom: none;
		border-radius: 10px;
	}
	#paperWorkTabsId.nav-tabs > li {
		display: flex;
		flex: 1 1 0;
		float: none;
		margin-bottom: 0;
		text-align: center;
	}
	#paperWorkTabsId.nav-tabs > li > a {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 0;
		padding: 12px 8px;
		border: none;
		border-radius: 8px;
		color: #5b6b78;
	}
	#paperWorkTabsId.nav-tabs > li > a:hover,
	#paperWorkTabsId.nav-tabs > li > a:focus {
		border: none;
		background-color: #e2e7ec;
		color: #1d6080;
	}
	#paperWorkTabsId.nav-tabs > li.active > a,
	#paperWorkTabsId.nav-tabs > li.active > a:hover,
	#paperWorkTabsId.nav-tabs > li.active > a:focus {
		background-color: #1d6080;
		color: #ffffff;
		border: none;
	}
}

/* Tablet: three tab labels need the full row, so Start Here wraps to its own
   line below the tabs (the desktop flex row only fits two tabs + the button). */
@media screen and (min-width: 768px) and (max-width: 991px) {
	.paperwork-tab-header {
		flex-wrap: wrap;
	}
	.paperwork-tab-header > #paperWorkTabsId.nav-tabs {
		flex: 1 1 100%;
	}
	/* Single hairline between tabs and button: the ul keeps the tab baseline. */
	.paperwork-tab-header .start-here-action {
		flex: 0 0 100%;
		justify-content: flex-end;
		padding: 10px 12px;
		border-bottom: none;
	}
	/* Tighter labels buy headroom so all three fit one line at exactly 768px. */
	#paperWorkTabsId.nav-tabs > li > a {
		font-size: 15px;
		margin-right: 4px;
		padding: 12px 10px;
	}
}

.svg-icon.external-link {
	-webkit-mask: url("../images/external-link-white-icon.svg") no-repeat center / contain;
	mask: url("../images/external-link-white-icon.svg") no-repeat center / contain;
	display: inline-block;
	background: #1D6080;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}
a:hover .svg-icon.external-link {
	background:#1E3948;
}
@media (max-width: 375px) {
	#accordion, .jquery-accordion {
		min-width: 0;
	}
}

@media (max-height: 400px) {
	.modal-dialog.paperwork-download-modal {
		margin-top: 10px;
	}
}

/* Linked Case Search alerts */
.linked-case-search-actions  {
	display: flex;
	align-items: center;
}

.linked-case-search-actions .alert  {
	flex: 1 1 auto;
	margin: 0 15px 0 0;
}

.linked-case-search-buttons  {
	flex: 0 0 auto;
	margin-left: auto;
	white-space: nowrap;
}

@media (max-width: 480px)  {
	.linked-case-search-actions  {
		flex-wrap: wrap;
	}

	.linked-case-search-actions .alert  {
		flex-basis: 100%;
		margin: 0 0 10px;
	}

	.linked-case-search-buttons  {
		margin-left: auto;
	}

}