/* use a build tool to combine the imports, only done this way to start development on the UI/UX refresh */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap');
/* material UI icons */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

*, *::before, *::after {
  box-sizing: border-box; /* Include padding and border in the element's width and height */
}

html, body {
  height: 100%;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
}

body {
  background-color: var(--surface-primary, #FFFFFF);
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  font-family: var(--default-font-family);
  font-weight: var(--normal, 400);
  color: var(--text-primary, #181818);
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  position: relative;
}

#Manage.main-content {
  min-width: 1024px;
  padding: 30px;
  gap: var(--gap-large);
  display: flex;

  #configTree {
    width: 285px;
  }

  #configPane {
	width: 100%;
  }
}

.wrap-option {
	text-overflow: ellipsis;
	white-space: nowrap;
}

.custom-tooltip {
background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  position: fixed!important;
  color: #fff;
  max-width: 250px;
  word-wrap: break-word;
  z-index: 9999;
  display: none;
  pointer-events: none;
}

.genSetting_dateToStamp td span label, .genSetting_dateToStamp td span input {
    display: inline-block;
    margin-right: 10px;
}

.ui-layout-container {
  overflow: auto;
}

.favorite-icon {
  margin: 0!important;

  .favorite:before {
    content: "star_border";
  }

  .favorited:before {
    content: "star";
  }
}

.buttonBar {
	text-align: left;
	margin: 5px 10px 1px 0px;
	clear: both;
}

/* hide the button bar if there is not a visible <div> inside it */
#caseHeader .buttonBar:not(:has(div:not([style*="display: none"]):not([style*="display:none"]):not([hidden]):not(.hidden))) {
  display: none;
}

.buttonBarItem {
	padding: 0 10px 0 10px;
}

.buttonBar.row {
  a, .btn, a.btn {
    margin-bottom: 0!important;
  }
}

.efileLink {
	font-weight: bold;
}

.otherOptionPadding{ padding-top: var(--2xl);}
.highlight-li li {
    color: #41537c;
}

.citIncident ul li ul li:first-child {
    margin-right: 10px;
}

.pty-modal-div {
    background: var(--blue-lighter);
    width: 97%;
}

.pty-modal{
	padding: 20px 6px 9px 20px;
}

.hidden-button{
	display: none;
}
.no-padding-head ul {
    padding: 0;
}

.marriageInfo li ul {
	padding: 2%;
}

.box-shadow{
	box-shadow: 0 0 0 2px #fff, 0 0 20px #dce3e5;
    padding: 10px;
    margin-bottom: 20px;
}

.button-link-margin{
	margin: 15px 0px 15px 0px;
}

.reject-label{
	justify-content: end!important;
	font-weight:var(--normal)!important;
}

.vertical-btns{
    float: right;
    display: flex;
    gap: 10px;
}

.inline-flex.custom-center > span{
	display: flex;
    justify-content: center;
    align-items: center;
}

.inline-flex.custom-center .btn span:hover {
    cursor: text;
}

.padding-top-xs {
	padding-top: var(--xs);
}

.case-margin-top {
	margin-top: 20px;
}

.margin-0 {
    margin: 0!important;
}

.margin-btm-0 {
	margin-bottom: 0!important;
}

.margin-t-0 {
  margin-top: 0!important;
}

.margin-5xl {
	margin-left: var(--5xl)!important;
}

.margin-l-0 {
  margin-left: 0!important;
}

.margin-l-sm{
	margin-left: var(--p-sm)!important;
}

.margin-l-md{
	margin-left: var(--p-md);
}

.margin-l-base{
	margin-left: var(--p-base);
}

.margin-l-auto {
  margin-left: auto!important;
}

.margin-l-large {
  margin-left: var(--p-large)!important;
}

.margin-r-0 {
  margin-right: 0!important;
}

.margin-r-base{
  margin-right: var(--p-base)!important;
}

.margin-r-sm{
	margin-right: var(--p-sm)!important;
}

.margin-r-auto {
  margin-right: auto!important;
}

.margin-top-base {
    margin-top: var(--p-base)!important;
}

.margin-top-sm {
    margin-top: var(--sm)!important;
}

.margin-top-large {
    margin-top: var(--gap-large)!important;
}

.margin-btm-large {
    margin-bottom: var(--gap-large)!important;
}

.margin-left-large {
    margin-left: var(--p-large)!important;
}

.margin-right-large {
    margin-right: var(--p-large)!important;
}

.margin-btm-base {
    margin-bottom: var(--p-base)!important;
}


.margin-btm-xlarge {
  margin-bottom: var(--p-xlarge) !important;
}

.margin-top-xlarge {
    margin-top: var(--gap-xlarge) !important;
}

.padding-left-large {
  padding-left: var(--p-large)!important;
}

.padding-left-base {
  padding-left: var(--p-sm)!important;
}

.padding-left-0 {
  padding-left: 0!important;
}

.padding-right-large {
  padding-right: var(--p-large)!important;
}

.padding-bottom-base {
  padding-bottom: var(--p-base)!important;
}

.padding-top-sm{
	padding-top: var(--p-sm)!important;
}

.padding-bottom-sm{
	padding-bottom: var(--p-sm)!important;
}

.payment-plan-span {
  font-size: medium;
  margin-right: var(--p-md);
}

.padding-right-0 {
  padding-right: 0!important;
}

.padding-bottom-0 {
  padding-bottom: 0!important;
}

.padding-bottom-large {
  padding-bottom: var(--p-large)!important;
}

.case-code{
    margin-bottom: 0 !important;
    font-size: var(--sm) !important;
    font-weight: normal !important;
}
/* temp class added so that new styles don't hose the existing app */
/* just make sure the parent container has the class "uiRefresh" so the CSS is applied */
.uiRefresh {
  main {
    display: block;
  }

  h1 {
    margin: 0.67em 0;
    font-size: 2em;
  }

  hr {
    background-color: var(--default-border-color);
    height: 0;
    border-color: transparent;
    box-sizing: content-box;
    overflow: visible;
    display: inline-block;
  }

  pre {
    background: var(--surface-primary);
    width: fit-content;
    max-width: 100%;
    margin-top: 0;
    padding: var(--p-xs);
    border: 1px solid var(--default-border-color);
    border-radius: 4px;
    overflow: auto;
    display: inline-flex;
    align-self: self-start;

    code {
      padding: var(--p-base);
    }
  }

  a {
    background-color: transparent;
  }

  abbr[title] {
    border-bottom: none;
    text-decoration: underline dotted;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    font-size: 75%;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  img {
    border-style: none;
  }

  button, input, optgroup, select, textarea {
    margin: 0 0 var(--p-base) 0;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
  }

  button, input {
    overflow: visible;
  }

  a, button, select {
    text-transform: none;
    cursor: pointer;
  }

  [type="button"], [type="reset"], [type="submit"], button {
    -webkit-appearance: button;
  }

  button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }

  button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }

  button, .button {

  }

  fieldset {
    padding: .35em .75em .625em;
  }

  legend {
    max-width: 100%;
    padding: 0;
    display: table;
    box-sizing: border-box;
    white-space: normal;
    color: inherit;
  }

  progress {
    vertical-align: baseline;
  }

  textarea {
    margin-bottom: var(--p-base);
    overflow: auto;
  }

  [type="checkbox"], [type="radio"] {
    width: 22px;
    height: 22px;
    margin-left: var(--p-sm);
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
  }

  [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    outline-offset: -2px;
    -webkit-appearance: textfield;
  }

  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
  }

  details {
    display: block;
  }

  summary {
    display: list-item;
  }

  template {
    display: none;
  }

  [hidden] {
    display: none;
  }

  header {
    background-color: #FFFFFF;
    padding: 20px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-base);
    position: relative;
    z-index: 9999;
  }

  div {
    position: relative;
  }

  .flex {
    display: flex;
  }

  .flex.align-center {
    align-items: center!important;
  }

  .flex.justify-end {
    justify-content: end;
  }

  .flex-full {
    min-width: 100%;
    flex: 1 0 100%!important;
    display: flex!important;
  }

  .inline-flex {
    display: inline-flex!important;
  }

  .flex-0 {
    order: 0;
  }

  .flex-1 {
    order: 1;
  }

  .flex-2 {
    order: 2;
  }

  .flex-end {
    justify-content: flex-end;
  }

  .align-baseline {
    align-items: baseline;
  }

  .float-left {
    float: left;
  }

  .float-right {
    float: right;
  }

  .float-left {
    float: left;
  }

  .float-right {
    float: right;
  }

  .clear-both {
    clear: both;
  }

  .overflow-auto {
    overflow: auto;
  }

  .w-100 {
    width: 100%!important;
    max-width: 100%!important;
    min-width: 100%!important;
  }
  
  .width-235{
  	width:235px;
  }

  .w-70 {
    width: 70%!important;
    max-width: 70%!important;
    min-width: 70%!important;
  }

  .w-50 {
    width: 50%!important;
    max-width: 50%!important;
    min-width: 50%!important;
  }

  .w-30 {
    width: 30%!important;
    max-width: 30%!important;
    min-width: 30%!important;
  }

  .w-25 {
    width: 25%!important;
    max-width: 25%!important;
    min-width: 25%!important;
  }

  .w-auto {
    width: auto!important;
  }

  .min-w-125 {
    min-width: 125px;
  }

  .w-150 {
    width: 150px!important;
  }

  .w-fit-content {
    width: fit-content!important;
  }

  .p-base {
    padding: var(--p-base);
  }

  .light-blue-bg {
    background-color: var(--blue-light);
  }

  .light-yellow-bg {
    background-color: var(--yellow-light);
  }
}

#logo {
  width: auto;
  max-width: 260px;
  margin-right: auto;
  margin-left: 0;

  img {
    width: auto;
    max-width: 260px;
  }
}
.mock-help-position{
	left: 1068.93px !important;
}
#logo:hover {
  opacity: 0.8;
}

.uiRefresh.wrapper {
  padding: 30px;
}

nav:not(.breadCrumb) {
  width: 100%;
  height: 60px;
  margin-right: 0;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-base);
  font-size: var(--xs);
  justify-content: end;
}

nav a, nav a:visited, nav button, nav .link,
nav button {
  padding: var(--p-xs);
  border: none;
  font-size: var(--sm);
  color: var(--blue-darkest);
}

nav a:not(.material-icons), nav a:visited:not(.material-icons), nav button:not(.material-icons) {
  font-weight: var(--bold);
}

nav a, nav button {
  margin-bottom: 0!important;
}

nav #logo::before {
  display: none;
}

nav a:hover, nav button:hover, nav .link:hover {
  background: none;
  cursor: pointer;
  color: var(--highlight-primary);
}

nav a:first-child {
  justify-items: start;
}

nav a:last-child {
  margin-right: 0;
  justify-items: end;
}

nav a:not(.fa, .btn, .material-icons, .manage-account-btn, .user-notification-btn, .efileCartLink, .imagesCartLink, .log-out a, .dropdown a, .dropdown button, .breadCrumb-link)::before,
nav :not(.dropdown .link).disabled.link:before,
nav span.active:not(.dropdown span.active):before {
  content: "";
  background-color: var(--blue-darkest);
  width: 13px;
  height: 13px;
  margin: 3px 8px 0 0;
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 50%;
  vertical-align: text-top;
}

nav a:hover:not(.fa, .btn, .manage-account-btn, .user-notification-btn, .dropdown a, .dropdown button)::before, nav .nav-icon.w-content:hover .badge {
  background-color: var(--highlight-primary);
}

nav a.active::before, nav a.active:hover::before, nav .link.active::before, nav .link.active:hover::before {
  background-color: var(--state-focused)!important;
  border-color: var(--blue-darkest)!important;
}

nav a.active:hover, nav .link.active:hover {
  cursor: default;
  color: var(--blue-darkest);
}

nav .nav-icon {
  width: var(--p-large);
  height: var(--p-large);
  margin-top: -6px;
}

nav .nav-icon.w-content {
  width: auto;
}

nav .btn {
  padding: var(--p-sm);
}

nav #logonLink, nav .efileCartLink i, nav .efileCartLink .badge {
  margin: 0;
}

nav .badge {
  background-color: var(--equivant-blue);
  padding: 4px 7px;
  border-radius: 50%;
  position: relative;
  font-size: var(--xxxs);
  font-weight: normal;
}

nav .fa, nav .fa-solid {
  height: var(--p-large);
}

nav .fa, nav .fa-solid, nav .material-icons {
  background: none;
}

nav .material-icons {
  line-height: normal;
}

nav .fa-circle-question {
  margin-right: var(--sm);
}

nav .cost-hint:empty, nav .badge:empty {
  display: none;
}

nav .login, .dropdown .login {
  width: fit-content;
}

nav li, nav li a {
  display: inline-block;
}

nav .disabled.link,
nav span.active:not(.dropdown span.active) {
  margin-bottom: 0;
  padding: var(--p-xs);
  font-weight: var(--bold);
  font-size: var(--sm);
  color: var(--blue-darkest);
  justify-items: center;
  border: none;
  opacity: .5;

  em {
    font-style: normal;
  }
}

nav .disabled.link:hover,
nav span.active:hover {
  background: none;
  color: var(--highlight-primary);
}

.breadCrumb {
  margin: 0;
  padding: var(--p-xs) var(--p-large);
  border: none;
}

.breadCrumb a, .breadCrumb .breadCrumb-current {
  padding: var(--p-xs) var(--p-xs);
  font-size: var(--xs);
  color: var(--enable-color);
}

.breadCrumb a:not(:last-child) {
  margin: 0;
  text-decoration: underline;
}

.breadCrumb a:last-child {
  font-weight: normal;
}

.breadCrumb a:last-child::after {
  content: "";
}

.breadCrumb a:hover {
  color: var(--highlight-primary);
}

.breadCrumb a:hover::after {
  color: var(--enable-color);
}

.close-btn {
  width: 24px;
  height: 24px;
  font-size: var(--lg);
  font-family: "Material Icons"!important;
}

.bg-blue-lighter {
	background: var(--blue-lighter);
}

.wrapper {
  padding: 30px;
}

.searchResults.wrapper {
  margin: 0 24px;
}

.content-wrapper {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
}

.page-content, .tab-content {
  background: var(--blue-lighter);
  gap: var(--gap-large);
  display: flex;
  flex-direction: column;
}

.page-content.no-bg,
.tab-content.no-bg,
.no-bg {
  background: none!important;
}

.columns {
  gap: var(--gap-large);
  display: flex;
  flex-wrap: wrap;

  ul, ol {
    width: 100%;
  }

  .column {
    background: var(--blue-lighter);
  }

  .column:empty{/* will NOT work if there is whitespace - Safari, Chrome */
    display: none!important;
  }

  .column:-moz-only-whitespace { /* will NOT work if there is whitespace - Firefox */
    display: none!important;
  }
}

.columns-title {
  margin: 0;
  padding: 0;
  flex: 0 0 100%
}

.column {
  background: var(--surface-primary);
  width: auto;
  padding: var(--p-large);
  display: flex;
  flex-direction: column;
  flex: 1 1 25%;
  min-width: 27em;
  box-sizing: border-box;
  gap: var(--gap-base);
}

.column.no-bg { /* it's a white bg in case there is a background on the parent */
  background-color: var(--surface-primary)!important;
}

.accordion-panel .column.no-bg {
  background: var(--gray-lighter);
}

.grouped-content {
  padding: var(--p-base);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xlarge);
}

.grouped-content h5 {
  margin: 0;
}

.grouped-content > div:nth-of-type(2n+1) {
  /*margin: 0;*/
}

.grouped-content > div {
  min-width: 285px;
  flex: 1;
}

.input-group.flex span,
.input-group.flex span input,
.input-group.flex span select {
  /* might need to add this back if it causes issues in other pages
   comented out to get efile details input-groups with check box to not wrap text */
  /*width: 100%;*/
  max-width: 100%;
}

.date-picker .input-group,
.date-picker .input-group .date,
.zip-code.input-group,
.zip-code.input-group input {
  width: 225px!important;
  min-width: auto!important;
}

.emNumberPrevMarriages {
  width: 285px!important;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-base);

  span input {
    width: 125px!important;
    min-width: auto!important;
  }
}

.emLastMarriageEndReason {
  margin-top: var(--gap-large);
}

.row {
  background: var(--surface-primary);
  width: 100%;
  padding: var(--p-base);
  gap: var(--gap-large);
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
}

.paragraph-intro {
  font-size: var(--paragraph-intro);
  line-height: 1.4;
  font-weight: var(--light);
}

.paragraph-small {
  font-size: var(--xs);
  line-height: 1.5;
  font-weight: var(--normal);
}

.paragraph-small-bold {
  font-size: var(--xs);
  line-height: 1.5;
  font-weight: var(--bold);
}

a, link, .link {
  width: fit-content;
  margin-bottom: 8px;
  font-size: var(--sm);
  line-height: 1.3;
  font-weight: var(--normal);
  text-decoration: none;
  color: var(--highlight-primary);
  cursor: pointer;
}

a:hover, link:hover, .link:hover {
  color: var(--state-focused);
}

table a {
  color: var(--enable-color);
}

table a:hover {
  color: var(--hovered-color);
}

.btn.btn-editable {
  cursor:default;
}

.btn-editable:has(input[type="text"]) {
  border-color: var(--state-focused)!important;
}

.btn-editable input[type="text"] {
  height: 26px;
  line-height: 26px;
  padding: 0 12px;
  border: 2px solid var(--blue-darkest) !important;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  background-color: var(--gray-lighter) !important;
  color: var(--enable-color) !important;
  width: auto !important;
  min-width: auto;
}

.btn {
  width: fit-content;
  margin-bottom: 8px;
  padding: var(--p-base);
  display: flex;
  align-items: end;
  border: 2px solid transparent;
  border-radius: 2px;
  gap: var(--gap-base);
  font-size: var(--sm);
  font-weight: var(--bold);
  cursor: pointer;
}

.btn-sm {
  padding: 12px!important;
  font-size: var(--xs)!important;
}

.btn-xs {
  padding: var(--p-xs)!important;
  font-size: var(--xs)!important;
}

.btn-primary, .btn-primary.btn:active {
  background-color: var(--blue-darkest)!important;
  border-color: var(--blue-darkest)!important;
  color: var(--surface-primary)!important;
}

.btn-primary:hover {
  background-color: var(--highlight-primary)!important;
}

.btn-primary:focus, .btn-primary:focus-visible {
  background-color: var(--highlight-primary)!important;
  box-shadow: 0 0 6px var(--yellow-dark)!important;
}

.btn-primary.disabled, .btn-primary:disabled,
.btn-primary[disabled] {
  background-color: var(--state-disabled)!important;
  border-color: var(--state-disabled)!important;
}

.btn-secondary, .btn-secondary.btn:active {
  background-color: var(--gray-lighter)!important;
  border-color: var(--blue-darkest)!important;
  color: var(--enable-color)!important;
}

.btn-secondary:hover {
  background-color: var(--blue-lighter)!important;
  border-color: var(--highlight-primary)!important;
  color: var(--highlight-primary)!important;
}

.btn-secondary:focus, .btn-secondary:focus-visible {
  background-color: var(--gray-lighter)!important;
  border-color: var(--highlight-primary)!important;
  box-shadow: 0 0 6px var(--yellow-dark)!important;
  color: var(--blue-darkest);
}

.btn-secondary.disabled, .btn-secondary:disabled,
.btn-secondary[disabled] {
  background-color: transparent!important;
  border-color: var(--state-disabled)!important;
  color: var(--state-disabled)!important;
}

.btn.btn-link, .btn-link.btn:active,
.close-btn {
  background: none;
  padding: 0;
  color: var(--highlight-primary);
}

.btn.btn-link, .btn-link.btn:active {
  font-weight: var(--medium);
}

.btn-link:hover,
.close-btn:hover {
  color: var(--hovered-color);
}

.btn-link:focus, .btn-link:focus-visible,
.close-btn:focus, .close-btn:focus-visible {
  background-color: var(--gray-lighter);
  border-color: var(--highlight-primary);
  box-shadow: 0 0 6px var(--yellow-dark);
  color: var(--highlight-primary);
}

.btn-link.disabled,
.btn-link[disabled],
.close-btn.disabled,
.close-btn[disabled] {
  border-color: var(--state-disabled)!important;
  color: var(--state-disabled)!important;
}

.btn-ghost, .btn-ghost.btn:active {
  background-color: var(--blue-lighter);
  border-color: var(--blue-lighter);
  color: var(--enable-color);
}

.btn-ghost:hover {
  background-color: var(--blue-lighter);
  border-color: var(--blue-darkest);
  color: var(--blue-darkest);
}

.btn-ghost:focus, .btn-ghost:focus-visible {
  background-color: var(--gray-lighter);
  border-color: var(--highlight-primary);
  box-shadow: 0 0 6px var(--yellow-dark);
  color: var(--blue-darkest);
}

.btn-ghost.disabled, .btn-ghost:disabled {
  background-color: transparent;
  border-color: var(--state-disabled)!important;
  color: var(--state-disabled)!important;
}

.area-size > .efileInputLabelAndField > textarea {
    width: 1589px !important;
    max-width: 1589px !important;
    height: 88px !important;
}

.onBehalfOfPtyChoices .efileInput.valid {
  label {
    display: flex;
  }
}

.btn-w-icon i {
  width: 23px;
  margin: -3px 0 0 -4px;
  position: relative;
}

.btn-sm.btn-w-icon i {
  margin: -4px 0 -1px -4px;
}

input:not(.ui-layout-pane input),
select:not(.ui-layout-pane select),
.form-control:not(.ui-layout-pane .form-control),
.input-group-start:not(.ui-layout-pane .input-group-start) {
  padding: var(--p-base);
  font-size: var(--xxs);
}

input, select, .form-control {
  border: 2px solid var(--default-border-color);
  border-radius: 2px;
}

input:focus, input:focus-visible, select:focus, select:focus-visible, .form-control:focus, .form-control:focus-visible {
  background-color: var(--gray-lighter);
  border-color: var(--highlight-primary);
  box-shadow: 0 0 6px var(--yellow-dark);
  color: var(--blue-darkest);
}

input:disabled, input.disabled, select:disabled, select.disabled, .form-control:disabled, .form-control.disabled {
  border-color: var(--state-disabled)!important;
  opacity: 1!important;
  color: var(--gray-medium)!important;
}

a, .btn, select, input, textarea {
  margin-bottom: 8px;
}

a:not(:last-child, nav a), .btn:not(:last-child, nav .btn), select:not(:last-child), input:not(:last-child), textarea {
  margin-right: 8px;
}

select, input[type="text"], .input-group span input:not([type="checkbox"]), textarea {
  min-width: 285px;
  max-width: 100%;
}

.input-group .input-group-start, .input-group .input-group-end {
  position: absolute;
  top: -2px;
  z-index: 1;
}

.input-group input {
  margin-bottom: var(--p-base);
  clip-path: inset(-5px -5px -5px 0);
}

input:focus, input:focus-visible, select:focus, select:focus-visible, .form-control:focus, .form-control:focus-visible {
  background-color: var(--gray-lighter);
  border-color: var(--highlight-primary);
  box-shadow: 0 0 6px var(--yellow-dark);
  color: var(--blue-darkest);
}

.input-short {
  min-width: 100px!important;
  width: 100px!important;
}

.disabled, :disabled, [disabled],
nav span.active {
  cursor: not-allowed!important;
}

.title {
  font-size: var(--title);
  line-height: 1.2;
  font-weight: var(--bold);
}

.subheading {
  font-size: var(--subheading);
  line-height: 1.4;
  font-weight: var(--bold);
}

p {
  margin: 0 0 var(--p-base);
  font-size: var(--sm);
  font-weight: var(--normal);
}

.content-wrapper p {
  padding: 0;
}

.p-bold {
  font-weight: var(--bold);
}

label, .label {
  font-size: var(--label);
  line-height: 1.4;
  font-weight: var(--bold);
  color: var(--blue-darkest);
  display: block;

  input[type=checkbox] {
    margin-bottom: 0;
    vertical-align: text-top;
    order: 3;
  }
}

label:not(.bannerMessageContent label, th label) {
  margin-bottom: var(--gap-base);
}

.quote {
  font-size: var(--lg);
  line-height: var(--short);
  letter-spacing: var(--tight);
  font-style: italic;
}

.input-group .label-checkBox {
  margin-left: auto;
  display: inline-flex;
  gap: var(--gap-base);
  justify-content: end;
  font-weight: normal;
  order: 3;

  input[type=checkbox] {
    max-width: 22px!important;
    min-width: 22px!important;
    margin: 0!important;
  }
}

.label-checkBox-inline {
  .input-group.flex {
    width: auto;
    max-width: 100%;

    label {
      margin: 0;
      display: inline-block;
    }
  }
}

.content {
  padding: 0 var(--p-base);
}

#configTree [id^="contentLink"] .content {
  padding: 0;
}

.card-wrapper {
  padding: var(--p-base);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--p-xxlarge);
}

.card.max-width label {
    display: inline-block;
    width: 200px;
}

.max-width{
	max-width: 520px !important;
}

.card, .flex-item {
  min-height: 150px;
  flex-direction: column;
}

.flex-item > :last-child, .card > :last-child {
  margin-top: auto;
}

.flex-item > *, .card > * {
  flex: 0;
}

.card {
  background-color: var(--blue-lighter);
  width: 315px;
  min-width: 250px;
  max-width: 428px;
  border: none;
  border-radius: var(--p-base);
  display: inline-flex;
  flex-grow: 1;
  box-shadow: var(--shadow-base);
  transition: box-shadow 0.3s ease-in-out;

  .card-body {
    min-height: 104px;
    padding: var(--p-large) var(--p-xxlarge);
    border: none;
    overflow: visible;
    align-self: start;
  }

  .footer {
    padding: var(--p-large) var(--p-xxlarge);
    display: flex;
    justify-content: flex-end;
  }

  .card-dropdown-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
  }

  .card-img-wrapper {
    width: 100%;
    height: 210px;
    border-radius: var(--p-base);
  }

  .card-img {
    width: 100%;
    border-radius: var(--p-base);
  }

  h5 {
    margin: 0;
    padding: 0 0 16px;
    z-index: 1;
  }

  p {
    font-weight: var(--light);
    color: var(--blue-darkest);
  }

  .btn:not(:last-child) {
    margin-right: 8px;
  }
}

footer.uiRefresh {
  background: var(--surface-primary);
  width: 100%;
  padding: var(--p-large);
  gap: var(--p-sm);
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  position: sticky;
  top: 100vh;

  span {
    display: inline-flex;
  }

  .customFooter p {
    margin: 0;
    font-size: var(--xxxs);
  }

  .versionId {
    font-weight: bold;
  }

  #footerCompliance {
    margin-left: auto;
  }

  a {
    color: var(--enabled-color);
  }

  a:hover {
    color: var(--hovered-color);
  }
}

.card:hover {
  box-shadow: var(--shadow-base-hover);
}

.card.featured {
  border: none;

  .card-tab {
    background-color: var(--blue-lighter);
    width: 72px;
    height: 72px;
    border-radius: 50% 50% 0 0;
    text-align: center;
    position: absolute;
    top: -62px;
    left: 0;
    z-index: 0;
  }
}

.card.featured.tabIcon {
  margin-top: 72px;
}

.card.featured {
  .card-tab::before, .card-tab .material-icons {
    position: relative;
    top: 20px;
    font-size: var(--3xl)!important;
  }
}

.input-group-wrapper label {
  display: block;
}

.input-group.flex .supporting-text, .columns [id^="helpTrigger"].supporting-text {
  max-height: 30px;
  margin: 0;
  padding: 0;
  flex: 0 0 100%;
  /*order: 3;*/
}

.input-group.flex.inline [id^="helpTrigger"].supporting-text {
  padding-left: 255px;
}

.pty-pointer{
	pointer-events: auto;
}
.supporting-text i {
  width: 24px;
  margin: -4px 4px 0 0;
  float: left;
  cursor: pointer;
}

.select-w-icon {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.input-group.flex, .log-out {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.log-out {
  width: max-content;
}

.input-group.flex {
  width: 285px;
  max-width: 285px;
  margin-bottom: var(--gap-base);
}

.input-group.flex.inline,
.input-group.inline,
.assign-div input-group.flex {
  width: 100%;
  max-width: 100%;
  flex-direction: row;
  flex-wrap: wrap;

  label, .label {
    max-width: 250px;
    margin-right: var(--p-sm);
  }

  .label-checkBox {
    margin-left: 0;
  }
}

/* for input-group's that we want to display inline but can't add 'inline' to the 'input-group'
   so we add it to the parent for the same affect */
.inline-wrapper .input-group.flex {
  width: 100%;
  max-width: 100%;
  flex-direction: row;
  flex-wrap: wrap;

  label, .label {
    max-width: 150px;
    margin-right: var(--p-sm);
  }
}

.input-group.flex.inline,
.assign-div input-group.flex {
  label, .label {
    display: inline-flex;
  }
}

.input-group.inline {
  label, .label {
    display: inline-block;
  }
}

.input-group.flex :is(label, .label) {
  width: 100%;
  margin-bottom: var(--gap-base);
  display: flex;
  justify-content: space-between;
  /*align-items: flex-end;*/
  align-items: baseline;
  gap: var(--gap-base);
  flex: 0 0 auto;
  order: 0;
}

.input-group.flex :is(label, .label),
.input-group.flex select,
.input-group.flex input {
  max-width: 285px;
}

.input-group.flex input:not([type="checkbox"], [type="radio"]) {
  width: 100%;
}

.input-group.flex.inline label {
  max-width: 250px;
}

.input-group.flex .select-w-icons, .input-group.flex .select-w-icon, .input-group.flex select {
  width: 100%;
  order: 0;
  max-height: 54px;
}

.input-group.flex:has(.multi-select),
 .input-group.flex .multi-select {
   min-width: 100%;
 }

.input-group.flex .multi-select {
  max-height: fit-content;
}

.input-group.flex .select-w-icons select, .input-group.flex .select-w-icon select, .input-group.w-icon input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.input-group.flex .select-w-icons select, .input-group.flex .select-w-icon select {
  width: 100%;
  padding: var(--p-base) var(--p-xlarge);
}

.input-group.flex .select-w-icon.icon-right select {
  padding-left: var(--p-base);
}

.input-group.flex .select-w-icon.icon-left select {
  padding-right: var(--p-base);
}

.input-group.w-icon input {
  padding-left: 48px!important;
}

.select-w-icons::before, .select-w-icons::after, .select-w-icon::before, .select-w-icon::after,
.accordion-button::before {
  position: absolute;
  top: 50%;
  font-family: 'Material Icons';
  font-size: 24px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.select-w-icons::before, .select-w-icon::before,
.accordion-button::before {
  content: 'keyboard_arrow_down'; /* can also use unicode like '\E5C5' */
  right: 8px;
}

.select-w-icons::after, .select-w-icon::after {
  left: 8px;
}

.select-w-icons select {
  padding-left: var(--p-base)!important;
  text-indent: 26px;
}

.select-w-icons select option {
  text-indent: var(--p-base);
}

.select-w-icons.birthday::after {
  content: 'calendar_month';
}

.efileHeader .input-group.flex:not(:has(input[type="text"], input[type="date"], select)){
    flex-direction: row !important;
    display: flex;
    max-width: 385px;
    width: 385px;
}

.efileHeader .input-group.flex:not(:has(input[type="text"])) > :is(label, .label) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}

.input-group.flex:not(.date-picker):has(.hasDatepicker) > label {
  width: 165px !important;
}

.efileHeader .efileInputLabelAndField.input-group.flex:has(select) > label {
  width: inherit !important;
  min-width: inherit !important;
  max-width: inherit !important;
}

.efileInputLabelAndField .efileInput.efileDispOnly {
  margin-left: var(--p-sm);
}

#SelectListPanel .legacy-table.listTable tbody tr {
    cursor: pointer;
}

.additionalCaseLabel, .caseHdrLabel, .ptyPersLabel, .ptyContactLabel, .ptyAttyLabel,
.ptyCiteLabel, .officerLabel, .citationLicenseLabel, .citationVehicleLabel,
.arPartyLabel, .modalIdntLabel, .modalCharLabel, .efileCartLabel, .taxLienLabel, .lienLabel,
.probateLabel, .ptyChgLabel, .probateLongLabel,
.modalCharInfo, .additionalCaseInfo, .caseHdrInfo, .ptyChgInfo, .ptyContactInfo, .ptyPersInfo,
.ptyAttyInfo, .ptyCiteInfo, .officerInfo, .citationLicenseInfo, .citationVehicleInfo,
.arPartyInfo, .modalIndtInfo, .efileCartInfo, .taxLienInfo, .lienInfo, .probateInfo, .ptyAfflDscr, .ptyAfflName {
  vertical-align: top;
  word-break: break-word;
  display: inline-flex;
  max-width: 60%;
}

.additionalCaseLabel, .caseHdrLabel, .ptyPersLabel, .ptyContactLabel, .ptyAttyLabel,
.ptyCiteLabel, .officerLabel, .citationLicenseLabel, .citationVehicleLabel,
.arPartyLabel, .modalIdntLabel, .modalCharLabel, .efileCartLabel, .taxLienLabel, .lienLabel,
.probateLabel, .ptyChgLabel, .probateLongLabel, .notification-label, .ptyAfflDscr {
  width: 150px !important;
  font-weight: bold;
}

.ptyContactInfo {
  flex-direction: column;
  gap: var(--gap-base);
  max-width: 225px;
}

.ptyContactInfo > div:empty {
  display: none;
}


.efileInputlabel {
  /*width: 150px!important; might still be needed
  display: inline-block;*/
}

.dataLabel,
.dspDtField {
  width: 100px !important;
}

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

.docketInfo-align .efileInputField, .docketInfo-align .efileDispOnly, .docketInfo-align .page-count {
    /* margin-left: 171px; */
}

.docketInfo-align .input-group {
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
}

.docketInfo-align > .efileInputLabelAndField.input-group.flex {
  flex-direction: column;
}

.signaturePreview {
    max-width: 100%;
    height: 120px;
    border: 1px solid #ccc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signaturePreview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.search-btn {
  padding: var(--p-base) !important;
  font-size: var(--xxs) !important;
  background-color: var(--blue-darkest) !important;
  border-color: var(--blue-darkest) !important;
  color: var(--surface-primary) !important;
}

.search-btn:active {
  background-color: var(--blue-darkest) !important;
  border-color: var(--blue-darkest) !important;
  color: var(--surface-primary) !important;
}

.search-btn:hover {
  background-color: var(--highlight-primary) !important;
}

.search-btn:focus-visible {
  background-color: var(--highlight-primary) !important;
  box-shadow: 0 0 6px var(--yellow-dark) !important;
}

.search-btn.disabled, .search-btn:disabled {
  background-color: var(--state-disabled) !important;
  border-color: var(--state-disabled) !important;
}

.padding-0 {
  padding: 0 !important;
}

.padding-sm {
  padding: var(--p-sm) !important;
}

.gap-0 {
  gap: 0 !important;
}

.gap-6 {
  gap: 6px;
}

.gap-xlarge{
	gap: var(--p-xlarge);
}

.small {
  height: 26px;
}

.caseNbr-h6-mrgn {
  margin: 0 0 15px 0;
}

.row-btn-padding {
  padding: 0 var(--p-large);
  max-width: 400px !important;
}

.efile-spec-filing input:not(.efileInputLabelAndField input), .efile-spec-filing select {
  width: 400px;
}

.rows-per-page select {
  width: fit-content !important;
  min-width: fit-content !important;
}

.efile-col-gap {
  column-gap: 7vw !important;
  padding: 0px 0px 0 var(--p-md) !important;
}

.title-shadow {
  box-shadow: 0 0 0 2px #fff, 0 0 20px #dce3e5;
}

.efile-title-row .caseNumberQuickEntry > :first-child {
  background: var(--surface-primary);
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 25%;
  min-width: 27em;
  box-sizing: border-box;
  gap: 0;
}

.efile-dlt-btn {
  padding: var(--p-md) var(--p-xs) !important;
  text-align: right !important;
}

.efile-table-padding {
  padding: 0px var(--p-sm);
}

.att-stamp-config-offices {
  width: 100%;
  float: left;
}

.justify-center {
  justify-content: center;
}

.epay-modal-margin {
  margin: var(--gap-sm) var(--gap-xs) var(--xxxs) var(--gap-base);
}

.padding-left-sm {
  padding-left: var(--p-sm) !important;
}

.gen-conf-flex {
  display: flex;
  align-items: center;
  column-gap: var(--gap-base);
}

.gen-conf-col-gap {
  column-gap: var(--gap-large);
}

.margin-top-md {
  margin-top: var(--md) !important;
}

.padding-md {
  padding: var(--p-md);
}

.padding-large {
  padding: var(--p-large) !important;
}

.margin-b-0 {
  margin-bottom: 0 !important;
}

.multi-border {
  border: 2px solid var(--default-border-color);
  border-radius: 2px;
  padding: var(--p-md);
  width: 60%;
}

.margin-btm-sm {
  margin-bottom: var(--p-sm);
}

.margin-right-sm {
  margin-right: var(--p-sm);
}

.flt-left {
  float: left;
}

.padding-t-0 {
  padding-top: 0 !important;
}

.padding-btm-0 {
  padding-bottom: 0 !important;
}

.horizontal-scroll {
  overflow-x: auto;
}

.ajaxTab-label-font {
  cursor: pointer;
  font-size: var(--sm);
}

.verticle-btm {
  vertical-align: bottom;
}

.ajaxTab-ul-wrap {
  flex-wrap: wrap;
  gap: var(--xxxs) !important;
}

.justify-space-between {
  justify-content: space-between;
}

#AlertPendingInfo table thead tr:has(th input[type="checkbox"]), #ServiceInfo table thead tr:has(th input[type="checkbox"]), #JMAXjudgmentInfo table thead tr:has(th input[type="checkbox"]), #claimsInfo table thead tr:has(th input[type="checkbox"]),
#eventInfoBasePanel table thead tr:has(th input[type="checkbox"]), #tklInfo table thead tr:has(th input[type="checkbox"]), #dktInfo table thead tr:has(th input[type="checkbox"]), #linkedCasesInfo table thead tr:has(th input[type="checkbox"]),
#receiptInfo table thead tr:has(th input[type="checkbox"]), #checkInfo table thead tr:has(th input[type="checkbox"]), #dspListInfo table thead tr:has(th input[type="checkbox"]), #costSummaryfinancialInfo table thead tr:has(th input[type="checkbox"]),
#arSchedule table thead tr:has(th input[type="checkbox"]), #arCollections table thead tr:has(th input[type="checkbox"]), #arPlanMembers table thead tr:has(th input[type="checkbox"]), .judgementTbl tbody tr:has(td input[type="checkbox"]),
#judmntPgInfo table thead tr:has(th input[type="checkbox"]), #financialDocketInfo table thead tr:has(th input[type="checkbox"]), #imageInfo table thead tr:has(th input[type="checkbox"]) {
  display: flex;
  justify-content: space-between;
}

#AlertPendingInfo table thead tr th:has(> input[type="checkbox"]), #ServiceInfo table thead tr th:has(> input[type="checkbox"]), #chgContainer span, #chgContainer p, .ptyType:has(> input[type="checkbox"]),
#citInfo p, #citInfo span, #JMAXjudgmentInfo table thead tr th:has(> input[type="checkbox"]), #claimsInfo table thead tr th:has(> input[type="checkbox"]), #eventInfoBasePanel table thead tr th:has(> input[type="checkbox"]),
#tklInfo table thead tr th:has(> input[type="checkbox"]), #dktInfo table thead tr th:has(> input[type="checkbox"]), #linkedCasesInfo table thead tr th:has(> input[type="checkbox"]), #receiptInfo table thead tr th:has(> input[type="checkbox"]),
#checkInfo table thead tr th:has(> input[type="checkbox"]), #dspListInfo table thead tr th:has(> input[type="checkbox"]), .ptyChrgId:has(> input[type="checkbox"]), #costSummaryfinancialInfo table thead tr th:has(> input[type="checkbox"]),
#ptyPaymentPlanInfo span, #ptyPaymentfinancialInfo table tbody tr td:has(> input[type="checkbox"]), #ptyPaymentfinancialInfo table tbody tr td div:has(> input[type="checkbox"]), #moneyDistByCourt table thead tr,
#arSchedule table thead tr th:has(> input[type="checkbox"]), #arCollections table thead tr th:has(> input[type="checkbox"]), #arPlanMembers table thead tr th:has(> input[type="checkbox"]), .judgementTbl tbody tr td:has(> input[type="checkbox"]),
#judmntPgInfo table thead tr th:has(> input[type="checkbox"]), #financialDocketInfo table thead tr th:has(> input[type="checkbox"]), #imageInfo table thead tr th:has(> input[type="checkbox"]) {
  display: flex !important;
  justify-content: normal !important;
}

#ServiceInfo table thead tr th:has(> input[type="checkbox"]), #claimsInfo table thead tr th:has(> input[type="checkbox"]), #dktInfo table thead tr th:has(> input[type="checkbox"]) {
  padding: 4px;
}

.cluetip-jtip {
  width: 33% !important;
}

#cluetip-close {
  display: flex;
  justify-content: end;
}

.more-info-img {
  color: var(--blue-dark);
  vertical-align: top;
  line-height: 0.97;
}

.horizontal-scroll {
  overflow-x: auto;
}

.margin-right-sm {
  margin-right: var(--p-sm);
}


#ServiceInfo table thead tr th, #claimsInfo table thead tr th, #dktInfo table thead tr th {
  padding: 4px;
}

.pty-modal div:has(> input[type="checkbox"]), #caseHeader div:has(> input[type="checkbox"]), #chgContainer div:has(> input[type="checkbox"]),
#citInfo div:has(> input[type="checkbox"]), .caseInfo div:has(> input[type="checkbox"]) {
  display: flex;
  margin-bottom: var(--p-sm);
}

.extraPtyInfo:has(> input[type="checkbox"]), ptyChrgId:has(> input[type="checkbox"]) {
  display: flex;
  margin-top: var(--p-large) !important;
}

.marriageInfo li:has(> input[type="checkbox"]), .chrDispContainer div:has(> input[type="checkbox"]) {
  display: flex;
  margin-bottom: var(--p-sm);
  width: auto !important;
}

#ptyChgDriving div:has(> input[type="checkbox"]), #ptyChgLicSusp div:has(> input[type="checkbox"]), #ptyChgJail div:has(> input[type="checkbox"]),
#ptyChgPbtn div:has(> input[type="checkbox"]), #ptyChgCostFine div:has(> input[type="checkbox"]) {
  display: flex;
  margin: var(--p-base) 0;
}

.min-width-pswd {
  min-width: 285px;
}

[id^="alertPanel"] > em, [id^="pendingCasesPanel"] > em {
  display: flex;
  align-items: center;
}

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

.max-height-img {
  max-height: 16em;
}

.vertical-align-btm {
  vertical-align: text-bottom;
}

.pty-affl h5, .pty-ptyAtty h5 {
  margin: 0;
}

.btn-align-end {
  display: flex;
  justify-content: end;
}

.assign-field {
  column-gap: var(--gap-large) !important;
  row-gap: var(--gap-sm) !important;
  margin: 0 var(--p-md);
}

.assign-drpdown .efileInputLabelAndField {
  padding: 0;
}

.assign-btn {
  padding: var(--xl) 0 var(--p-large) 0;
}

.user-personal-info input:not(.input-check input, .user-info-btn input), .user-personal-info select {
  width: 400px !important;
}

.visually-hidden-label {
  z-index: -1;
}

.user-dob .formElement {
  background: var(--surface-primary);
  width: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 25%;
  min-width: 27em;
  box-sizing: border-box;
  gap: 0;
  margin-top: 0 !important;
}

.altEmailHeader3 {
  border: #ccc solid 1px;
}

.altEmailHeader2 {
  background: #c2d2e4;
  padding: 1px 5px;
  color: #222;
}

.altEmailHeader2 h3 {
  margin: 0.5% 0%;
}

.padding-top-0 {
  padding-top: 0 !important;
}

.bg-blue {
  background: var(--blue-lighter);
}

.display-block {
  display: block !important;
}

#probationInfo .prob-grid:has(> input[type="checkbox"]), #probationInfo .prob-grid div:has(> input[type="checkbox"]) {
    display: grid;
    grid-template-columns: auto auto 1fr;
    row-gap: var(--gap-base);
}

#probationInfo .prob-grid > div > div:has(> input[type="checkbox"]) {
  	display: contents;
}

.bmLabel > input {
	min-width: 285px;
    max-width: 100%;
}

.display-ruby-text {
	display: ruby-text;
}

.configured {
	background:#c8e79f;
}

.published {
	background:#f9f5b8;
	color:#3856a5;
}

.efile-cart-radio input[type="radio"] {
	margin-bottom: 0;
}

.wizard-btn-span div {
	display: flex;
	justify-content: end;
}

.feedback-wizard .feedbackPanel {
	color: var(--text-primary) !important;
}

.justify-start {
	justify-content: flex-start !important;
}

.wizard-btn-span input[name="buttons:previous"] {
    width: 104px !important;
}

#arCollections .legacy-table:has(table thead tr th input[type="checkbox"]) {
    overflow: unset;
}

.pty-affl:has(> input[type="checkbox"]) {
	flex-direction: row;
}

.bg-error {
	background-color: var(--error) !important;
    color: var(--background-primary) !important;
}

.border-error {
	border-color: var(--error) !important;
}

#SiteCaseTypeDetailId h5.display-block:not(:has(> div.flex)) {
    display: none !important;
}


.docket-table select, .docket-table input[type="text"], .docket-table textarea, .docket-table .input-group span input:not([type="checkbox"]) {
    min-width: 190px !important;
    max-width: 190px !important;
}

.docket-table input.feeInput {
    min-width: 91px !important;
    max-width: 91px !important;
    width: 91px !important;
}

.checkbox-wrapper label:has(input[type="checkbox"]) {
    max-width: 282px !important;
}

.docket-checkbox-wrap{
	display: inline-flex;
    align-items: flex-start;
}

.docket-checkbox-wrap input[type="checkbox"] {
    display: block;
    margin: 2px 10px 7px 0;
}

.font-weight-medium {
	font-weight: var(--medium);
}

.ui-dialog .ui-dialog-buttonpane { 
	background: none !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	text-align: center;
	float: none !important;
}

.display-inline {
  display: inline !important;
}

.uiRefresh {
  .accordion, accordion-component {
    display: flex;
    flex-direction: column;

    button:not(.no-style), .accordion-heading {
      background-color: var(--blue-lighter);
      padding: var(--p-base) var(--p-large);
      text-align: left;
      font-size: var(--md);
      font-weight: var(--bold);
      color: var(--blue-darkest);
      border: 1px solid transparent;
      position: relative;
      display: flex;
    }

    button.active::before {
      content: 'keyboard_arrow_up';
    }

    button.active, button:not(.no-style):hover {
      background-color: var(--state-hover);
    }

    button.no-toggle::before {
      content: none !important;
      pointer-events: none;
    }

    button.disabled, button:disabled {
      color: var(--state-disabled) !important;
    }

    .accordion-panel, accordion-panel {
      background: var(--gray-lighter);
      max-height: 0;
      padding: 0 var(--p-large);
      border-style: solid;
      border-width: 0 1px 1px;
      border-color: var(--state-hover);
      border-radius: 0 0 var(--p-xs) var(--p-xs);
      color: var(--enable-color);
      gap: var(--p-large);
      overflow: hidden;
      opacity: 0;
    }

    .accordion-panel.active, accordion-panel.active {
      max-height: fit-content;
      padding: var(--p-large);
      opacity: 1;
    }
  }

  .accordion-button.no-toggle {
    cursor: default;
  }

  .accordion-content {
    background: var(--gray-lighter);
    margin-top: -1px;
    padding: var(--p-large);
    border-style: solid;
    border-width: 1px;
    border-color: var(--state-hover);
    border-radius: 0 0 var(--p-xs) var(--p-xs);
    color: var(--enable-color);
    gap: var(--p-large);
  }

  .accordion-button {
    width: 100%;
    margin: 0;
    display: flex;
  }

  .accordion-button:not(:first-child) {
    margin-top: var(--p-base);
  }

  .tabs {
    gap: var(--p-xlarge);
    display: flex;
    align-items: end;

    a {
      padding: var(--p-base) var(--p-sm);
      font-weight: var(--bold);
      color: var(--blue-darkest);
      border-width: 1px 1px 4px 1px;
      border-style: solid;
      border-color: transparent transparent var(--default-border-color) transparent;
      display: inline-flex;
    }

    a.active, a:active {
      border-bottom-color: var(--blue-darkest);
    }

    a:hover:not(.active, :active) {
      background-color: var(--state-hover);
    }

    a:focus:not(.active, :active), .a:focus-visible:not(.active, :active), a.focused {
      box-shadow: 0 0 6px var(--yellow-dark);
      border-color: var(--blue-darkest);
    }

    a.disabled, a:disabled {
      background-color: transparent !important;
      color: var(--state-disabled) !important;
    }
  }

  .badge {
    background-color: var(--equivant-blue);
    border-radius: 50%;
    padding: 4px 7px;
    position: relative;
    font-size: var(--xxxs);
    font-weight: normal;
    color: var(--surface-primary);
  }

  .badge.success {
    background-color: var(--success);
  }

  .badge.removed {
    background-color: var(--error);
  }

  .badge.new {
    background-color: var(--blue-darkest);
  }

  #alertWrapper {
    background: transparent;
    min-width: 100vw;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;

  }

  #alertWrapper:has(.alert.show) {
    background: var(--overlay-base);
    z-index: 9;
  }

  .alert,
  .toast,
  .notification:not(.log-out) {
    border-radius: var(--p-xs);
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--p-large);

    .btn {
      margin: 0 0 0 auto;
      padding: 0;
    }

    p {
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: var(--p-md);
    }
  }

  .alert,
  .toast {
    opacity: 0;
    z-index: -2;
  }

  .alert {
    max-width: 90%;
    min-width: 450px;
    padding: var(--p-xlarge) var(--p-large);
  }

  .notification:not(.log-out) {
    max-width: 100%;
    padding: var(--p-xlarge) var(--p-large);
    color: var(--text-primary);
    z-index: 0 !important;
  }

  .alert.show, .toast.show {
    opacity: 1;
    z-index: 9;
  }

  .alert::before,
  .toast::before,
  .notification:not(.log-out)::before,
  .norecords::before,
  .no-notifications-found::before,
  .no-records-found::before {
    width: 24px;
    height: 24px;
    font-size: var(--lg);
    font-family: "Material Icons";
  }

  .alert-info,
  .notification-info {
    /* blue-muted background isn't WCAG compliant with the text color */
    background-color: var(--blue-light);
    /* color with BG isn't WCAG compliant, taking out for now until the WCAG phase
    color: var(--blue-darkest);*/
  }

  .alert-info::before,
  .toast-info::before,
  .notification-info::before {
    content: 'information';
  }

  .alert-info::before,
  .notification-info::before {
    color: var(--blue-darkest);
  }

  .alert-warn,
  .notification-warn {
    background-color: var(--warning-muted);
    color: var(--warning) !important;
  }

  .alert-warn::before,
  .toast-warn::before,
  .notification-warn::before {
    content: 'warning';
  }

  .alert-warn::before,
  .notification-warn::before {
    color: var(--warning) !important;
  }

  .alert-error,
  .toast-error,
  .notification-error,
  .norecords-td,
  .no-notifications-found,
  .no-records-found {
    background-color: var(--error-muted);
    /* color with BG isn't WCAG compliant, taking out for now until the WCAG phase
    color: var(--error);*/
  }

  .alert-error::before,
  .toast-error::before,
  .notification-error::before,
  .norecords::before,
  .no-notifications-found::before,
  .no-records-found::before {
    content: 'cancel';
  }

  .alert-error::before,
  .notification-error::before,
  .norecords::before,
  .no-notifications-found::before,
  .no-records-found::before {
    color: var(--error);
  }

  .alert-success,
  .toast-success,
  .notification-success {
    background-color: var(--success-muted);
    /* color with BG isn't WCAG compliant, taking out for now until the WCAG phase
    color: var(--success);*/
  }

  .alert-success::before,
  .toast-success::before,
  .notification-success::before,
  #srchResultNotice:before {
    content: 'check_cirlce';
  }

  .alert-success::before,
  .notification-success::before,
  #srchResultNotice:before {
    color: var(--success);
  }

  .alert-content,
  .notification-content {
    display: flex;
    flex-direction: column;
    width: 100%;

    p {
      margin: 0;
      width: 100%;
      line-height: 1.4;
    }
  }

  .toast, .toast .close-btn,
  #srchResultNoticeNomatch {
    color: var(--surface-primary);
  }

  .toast {
    max-width: 90%;
    min-width: 420px;
    padding: var(--p-base);
    box-shadow: var(--shadow-xl);
    position: fixed;
    top: var(--xs);
    right: var(--xs);
  }

  .toast-info {
    background-color: var(--blue-darkest);
  }

  .toast-warn {
    background-color: var(--warning);
  }

  .toast-error,
  #srchResultNoticeNomatch {
    background-color: var(--error);
  }

  .toast-success {
    background-color: var(--success);
  }

  .norecords-td .norecords,
  .no-notifications-found,
  .no-records-found,
  .noRecordsFoundMsg {
    font-weight: normal !important;
    color: var(--darkest) !important;
    display: flex !important;
    gap: var(--gap-base) !important;
  }

  .no-notifications-found,
  .no-records-found {
    align-items: center;
  }

  /* legacy overwrites for notifications and toasters to match the new UI */
  /*.feedback.toast-error::before {
    content: none!important;
  }

  .feedback.toast-error:empty {
    display: none!important;
  }*/

  .feedback {
    max-width: 90%;
    min-width: 420px;
    padding: 0;
    border-radius: var(--p-xs);
    box-shadow: var(--shadow-xl);
    position: fixed;
    top: var(--xs);
    right: var(--xs);
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--p-large);
    /* reset legacy CSS */
    color: initial;
    font-weight: initial;

    ul {
      background: none;
      width: 100%;
      border-radius: 0;
      margin: 0 !important;
      padding: 0 0 0 24px;
      border: none;
      display: flex;
      flex-direction: column;
      gap: var(--p-md);

      li, li span {
        font-size: initial;
        font-weight: normal !important;
        text-align: left;
        color: var(--surface-primary);
      }
    }
  }

  .feedbackPanel, .feedbackPanel:before {
    color: var(--surface-primary);
  }

  .feedbackPanel:before {
    width: 24px;
    height: 24px;
    font-size: var(--lg);
    font-family: "Material Icons";
    position: absolute;
    left: -6px;
    top: calc(50% - 12px);
  }

  .feedbackPanel.efileProcessStatusFeedbackPanel:before {
    left: 12px;
    top: calc(50% - 14px);
  }

  .feedback.feedbackPanel:before {
    left: 16px;
  }

  .feedback:has(.feedbackPanel:not(:empty)) {
    padding: var(--p-base);
    z-index: 999999;
    /*
     hide feedback after a set amount of time using hideElement keyframes
      - '.feedback' has been switched over to act like notifications and should't stay on the screen
      - Set to more than 20 seconds for WCAG compliance
    */
    animation: hideElement 0.3s ease-in-out 30s forwards;

    .feedbackPanel:after {
      margin-top: var(--p-base);
      font-style: italic;
      display: inline-flex;
      content: "* This notification will close automatically"
    }
  }

  .feedback {
    background-color: var(--blue-darkest);
    content: 'information';
    overflow: hidden;

    .feedbackPanel {
      background: none;
      margin: 0 !important;
      border: none;

      .feedbackPanel {
        padding: 0;
      }
    }
  }

  .feedbackPanel:before {
    content: 'information';
  }

  .feedback:has(.feedbackPanelINFO) {
    background-color: var(--success);

    .feedbackPanel:before {
      content: 'check_cirlce';
    }
  }

  .feedback:has(.feedbackPanelERROR) {
    background-color: var(--error);

    .feedbackPanel:before {
      content: 'error_outline';
    }
  }

  div.wicket-modal div {
    border: none !important;
  }

  /* END legacy overwrites for notifications and toasters to match the new UI */

  .dropdown {
    background-color: var(--blue-lighter);
    width: 320px;
    max-height: 0;
    padding: var(--p-large) var(--p-base);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    opacity: 0;
    transform: scale(.9);
    position: absolute;
    top: 90px;
    right: 30px;
    z-index: -1;
    pointer-events: none;
  }

  .dropdown.show {
    max-height: 800px;
    opacity: 1;
    transform: scale(1);
    z-index: 999999;
    pointer-events: auto;
  }

  .dropdown a, .dropdown button:not(.close-btn), .dropdown .link, .sub-menu-wrapper > h6 {
    margin: 0;
    text-align: left;
  }

  .dropdown a, .dropdown .link, .sub-menu-wrapper > h6,
  nav .dropdown span.active {
    width: 100%;
    display: inline-block;
    font-size: var(--sm);
    font-weight: var(--bold);
    color: var(--blue-darkest);
  }

  nav .dropdown span.active em {
    font-style: normal;
    font-size: var(--xxs);
  }

  .dropdown a:hover, .dropdown button:hover:not(#closeNavDropdown, .close-btn), .dropdown .link:hover, .sub-menu-wrapper:hover > h6 {
    background-color: var(--sand-color);
    color: var(--blue-darkest);
  }

  .dropdown hr {
    width: 100%;
    margin: .5em 0;
    border-top: 1px solid var(--blue-darkest);
  }

  .dropdown-header {
    width: 100%;
    margin-bottom: var(--p-sm);
    padding-bottom: var(--p-sm);
    display: flex;
    justify-content: space-between;
  }

  menu .dropdown-header .close-btn {
    margin: 0;
    padding: var(--p-xs) !important;
    font-weight: var(--normal) !important;
    line-height: normal;
    display: inline-flex !important;
    align-self: center;
  }

  .dropdown-header h5, .dropdown-header .close-dropdown {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: 0;
    color: var(--blue-darkest);
  }

  .dropdown a.active {
    background-color: var(--sand-color);
    border: 1px solid var(--blue-light2);
    cursor: default;
  }

  .dropdown .main-links {
    gap: 10px;
    display: none;
  }

  .dropdown a, .dropdown button, .sub-menu-wrapper > h6,
  .dropdown .disabled.link, nav .dropdown span.active {
    padding: 12px var(--p-sm) !important;
  }

  .dropdown .disabled.link,
  nav .dropdown span.active {
    color: var(--darkest)!important;
    opacity: .6;
  }

  .sub-menu-wrapper > h6 {
    padding-right: var(--p-xlarge);
    pointer-events: none;
  }

  .sub-menu-wrapper:has(a.active) h6 {
    background-color: var(--sand-color);
  }

  .sub-menu {
    max-height: 0;
    opacity: .5;
    overflow: hidden;
  }

  .sub-menu-wrapper:hover .sub-menu,
  .sub-menu-wrapper:has(a.active) .sub-menu {
    max-height: 800px;
    opacity: 1;
  }

  .sub-menu-wrapper .sub-menu a {
    width: 93%;
    margin: 0 !important;
    padding-left: calc(3 * var(--p-md)) !important; /* Compensates for negative indent */
    float: right;
    font-weight: normal !important;
  }

  .sub-menu-wrapper .sub-menu a:hover,
  .sub-menu-wrapper:has(a.active) a {
    background-color: var(--yellow-medium);
  }

  .sub-menu-wrapper > h6:first-child::before {
    background: none;
    width: 24px;
    height: 24px;
    font-size: 24px;
    font-family: "Material Icons";
    font-weight: normal;
    border: none;
    content: 'add';
    position: absolute;
    top: var(--p-sm);
    right: var(--p-sm);
    display: inline-block !important;
  }

  .sub-menu-wrapper:hover > h6:first-child::before,
  .sub-menu-wrapper:has(a.active) > h6:first-child::before {
    content: 'remove';
    display: inline-block !important;
  }

  .sub-menu-wrapper {
    overflow: hidden;
  }

  .dropdown a:not(.sub-menu a):first-of-type,
  .sub-menu-wrapper {
    border-top: 1px solid var(--blue-darkest);
  }

  .sub-menu:not(:last-child) {
    border-bottom: 1px solid var(--blue-darkest);
  }

  .sub-menu-wrapper a.active:last-child {
    margin-bottom: var(--p-sm) !important;
  }

  footer {
    padding: 20px 25px;
  }

  footer a, footer a:visited {
    padding: var(--p-xs);
    float: right;
    justify-items: center;
    border: none;
    font-size: var(--md);
    font-weight: var(--bold);
    color: var(--blue-darkest);
  }

  footer a:hover {
    background: none;
    cursor: pointer;
    color: var(--highlight-primary);
  }
}

.help-tip {
  background: var(--blue-lighter) !important;
  padding: var(--p-large) !important;
  /* added border for when help-tip is showing ontop of blue background columns */
  border: 1px solid var(--blue-dark);
  box-shadow: var(--shadow-xl) !important;

  .ui-clue-tip-outer, #cluetip-outer {
    border: none !important;
    background: none !important;
  }

  h3 {
    background: none !important;
    height: auto !important;
    margin: 0 0 var(--xs) !important;
    padding: var(--p-sm) 0 !important;
    font-size: var(--md) !important;
    color: var(--blue-darkest) !important;
    border: none !important;

    #cluetip-close {
      margin: 0 !important;
    }

    .close-btn {
      background: none !important;
      margin-top: -2px !important;
      padding: var(--p-xs) !important;
      font-size: var(--xs) !important;
      text-decoration: none !important;
      color: var(--enable-color) !important;
    }

    .close-btn:hover {
      color: var(--highlight-primary) !important;
    }

    .close-btn:focus, .close-btn:focus-visible {
      background-color: var(--gray-lighter) !important;
      border: 2px solid transparent;
      border-color: var(--highlight-primary) !important;
      box-shadow: 0 0 6px var(--yellow-dark) !important;
      color: var(--highlight-primary) !important;
    }

    .close-btn:focus, .close-btn:focus-visible {
      background-color: var(--gray-lighter);
      border-color: var(--highlight-primary);
      box-shadow: 0 0 6px var(--yellow-dark);
      color: var(--highlight-primary);
    }

    .close-btn.disabled {
      border-color: var(--state-disabled) !important;
      color: var(--state-disabled) !important;
    }
  }

  .help-tip-content {
    padding: 0 !important;
    font-size: var(--sm);
  }
}

.banner {
  width: 98%;
  position: absolute;
  top: var(--gap-sm);
  left: 1%;
  z-index: 999999;
  display: none;

  .bannerMessageContent {
    background-color: var(--warning-muted);
    width: 100%;
    padding: var(--p-xs) var(--p-sm);
    text-align: center;
    border-radius: var(--p-xs);
    border: none;
    font-size: var(--xxs);
    box-shadow: var(--shadow-xl);
    display: inline-flex;
    align-items: center;
    gap: var(--gap-base);

    .bannerMessage, i {
      font-weight: normal !important;
    }

    .bannerMessage {
      width: 100%;
    }

    i {
      color: var(--warning) !important;
    }

    i:hover {
      color: var(--text-primary);
    }

    .bannerCounter {
      padding: 0 var(--p-xs);
      white-space: nowrap;
    }

    .bannerNav {
      cursor: pointer;
      display: inline-flex !important;
    }
  }
}

/* Background Color */

.equivant-blue {
  background-color: var(--equivant-blue);
}

.bg-blue-1 {
  background-color: var(--blue-lightest);
}

.bg-blue-2 {
  background-color: var(--blue-lighter);
}

.bg-blue-3 {
  background-color: var(--blue-light);
}

.bg-blue-4 {
  background-color: var(--blue-medium-light);
}

.bg-blue-5 {
  background-color: var(--blue-medium);
}

.bg-blue-6 {
  background-color: var(--blue-medium-dark);
}

.bg-blue-7 {
  background-color: var(--blue-dark);
}

.bg-blue-8 {
  background-color: var(--blue-darkest);
}

.bg-gray-1 {
  background-color: var(--gray-light);
}

.bg-gray-2 {
  background-color: var(--gray-medium);
}

.bg-gray-3 {
  background-color: var(--gray-dark);
}

.bg-yellow-1 {
  background-color: var(--yellow-light);
}

.bg-yellow-2 {
  background-color: var(--yellow-medium);
}

/* Text Color */

.text-primary {
  color: var(--text-primary);
}

.background-primary {
  color: var(--background-primary);
}

.surface-primary {
  color: var(--surface-primary);
}

.highlight-primary {
  color: var(--highlight-primary);
}

.highlight-muted {
  color: var(--highlight-muted);
}

.state-hover {
  color: var(--state-hover);
}

.state-focused {
  color: var(--state-focused);
}

.sand-color {
  color: var(--sand-color);
}

.enable-color {
  color: var(--enable-color);
}

.hovered-color {
  color: var(--hovered-color);
}

.pressed-color {
  color: var(--pressed-color);
}

.enabled-color {
  color: var(--enabled-color);
}

.border-default {
  border: 1px solid var(--default-border-color);
}

.border-top-light {
  border-top: 1px solid var(--gray-light);
}

.border-bottom-light {
  border-bottom: 1px solid var(--gray-light);
}

.border-0 {
  border: none !important;
}

.error, [error] {
  border-color: var(--error) !important;
  color: var(--error) !important;
  outline: none;
}

.error:focus, .error:focus-visible, .error:focus, .error:focus-visible, [error]:focus, [error]:focus-visible, [error]:focus, [error]:focus-visible {
  border-color: var(--error);
  box-shadow: 0 0 6px var(--error);
}

/* Typography */

.uiRefresh {
  h1, h2, h3, h4, h5, h6,
  .content-title {
    width: 100%;
  }

  h1 {
    font-size: var(--xl);
    line-height: 1.5;
    font-weight: var(--semibold);
    color: #524F50;
  }

  h2 {
    font-size: var(--lg);
    line-height: 1.3;
    font-weight: var(--semibold);
  }

  h3, .h3 {
    font-size: var(--lg);
    line-height: 1.3;
    font-weight: var(--semibold);
  }

  h4 {
    font-size: var(--lg);
    line-height: 1.3;
    font-weight: var(--bold);
    color: var(--blue-darkest);
  }

  h5, .h5, .content-title {
    font-size: var(--md);
    line-height: 1.2;
    font-weight: var(--bold);
    color: var(--text-primary);
  }

  .content-title {
    margin: 1.67em 0;
    display: block;
  }
}

.xxs {
  font-size: xx-small;
}

.xs {
  font-size: var(--xs);
}

.sm {
  font-size: var(--sm);
}

.md {
  font-size: var(--md);
}

.lg {
  font-size: var(--lg);
}

.xl {
  font-size: var(--xl);
}

:root {
  --p-xs: 4px;
  --p-sm: 8px;
  --p-md: 10px;
  --p-base: 16px;
  --p-large: 24px;
  --p-xlarge: 32px;
  --p-xxlarge: 40px;

  --gap-xs: 2px;
  --gap-sm: 4px;
  --gap-base: 8px;
  --gap-large: 24px;
  --gap-xlarge: 32px;

  --default-font-family: 'Raleway', 'Helvetica', sans-serif;
  /* Typography - sizes */
  --xxxs: 11px;
  --xxs: 14px;
  --xs: 15px;
  --sm: 16px;
  --md: 19px;
  --lg: 23px;
  --xl: 28px;
  --2xl: 34px;
  --3xl: 41px;
  --4xl: 41px;
  --5xl: 50px;
  --6xl: 60px;
  --paragraph-intro: 42px;
  --links: 32px;
  --title: 26px;
  --subheading: 18px;
  /*--label: 18px;*/
  --label: 15px;

  /* font weights */
  --hairline: 100;
  --thin: 200;
  --light: 300;
  --normal: 400;
  --medium: 500;
  --semibold: 600;
  --bold: 700;
  --extrabold: 800;
  --black: 900;

  /* letter spacing */
  --tightest: -5%;
  --tighter: -2.5%;
  --tight: -1%;
  --normal-spacing: 0;
  --wide: 2.5%;
  --wider: 5%;
  --wides: 10%;

  /* line heights */
  --auto: auto;
  --none: 100%;
  --shorter: 125%;
  --short: 138%;
  --base: 140%;
  --tall: 162%;
  --taller: 200%;

  /* Color Palette vars */
  --equivant-blue: #0092BC;
  --darkest: #000000;
  --blue-lightest: #F2FCFF;
  --blue-lighter: #EBF2F4;
  --blue-light: #E3F2FF;
  --blue-light2: #B0C4DEFF;
  --blue-medium-light: #D4E7EC;
  --blue-medium: #BEE2EB;
  --blue-medium-dark: #96C4D2;
  --blue-dark: #275B86;
  --blue-darkest: #003763;
  --blue-muted: #C6E0F6;
  --gray-lighter: #FDFDFD;
  --gray-light: #DDD9DB;
  --gray-medium: #969394;
  --gray-medium-dark: #524F50;
  --gray-muted: #383D44;
  --gray-dark: #504D4E;
  --yellow-light: #FFF7ED;
  --yellow-medium: #FFE4C5;
  --yellow-dark: #FFEB38;
  --warning: #776525; /* #937D2D NOT WCAG */
  --warning-muted: #FFE4C5;
  --error-muted: #FEF0F0;
  --success-muted: #DAF1E4;
  --text-primary: #181818;
  --background-primary: #F5F6F9;
  --surface-primary: #FFFFFF;
  --highlight-primary: #186DB2;
  --highlight-muted: #F6F1FC;
  --state-hover: #E8EBEE;
  --state-disabled: #DCE0E5; /* #D1D6DD NOT WCAG */
  --state-focused: #68ADE7;
  --sand-color: #FFF7ED; /* Matches --yellow-light */
  --enable-color: #003763; /* matches --blue-darkest */
  --hovered-color: #0092BC;
  --pressed-color: #022C4C;
  --enabled-color: #00437A;
  --default-border-color: #DDE0E6;
  --error: #C45151;
  --success: #338053; /* #3A9660 NOT WCAG */
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-base-hover: 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0px 10px 10px -4px rgba(0, 0, 0, 0.3);
  --overlay-base: rgba(0, 0, 0, 0.3);
}

/* Portable CSS end */

/* Equivant CSS */

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.text-right {
  text-align: right !important;
}

.no-wrap {
  white-space: nowrap;
}

.no-gap {
  gap: 0;
}

.no-border {
  border: none !important;
}

.small-padding {
  padding: var(--p-md) !important;
}

.show {
  display: block !important;
}

.hide, .no-print, .no-print * {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}

hr {
  width: 100%;
  opacity: 1;
}

#mobileLinks {
  display: none;
  border-top: 1px solid var(--blue-darkest);
}

#mobileLinks hr {
  margin: 0 0 .5em;
}

/* material (Google) icons */

.material-icons, .input-group .material-icons {
  font-size: var(--lg) !important;
  font-family: "Material Icons" !important;
}

.log-out {
  max-width: 135px;
  min-width: auto;
  margin-right: 0;
  margin-left: 0;
  /*gap: 0 var(--p-base);*/ /* Portable spacing doesn't account for notifications count showing with the bell */
  gap: 0 var(--p-sm);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: visible;
  top: 14px;
  right: 8px;
}

.log-out::after {
  content: '';
  flex: 0 0 100%;
  order: 1;
}

.log-out a {
  flex: 0 1 auto;
  order: 0;
}

.log-out a:nth-child(3) {
  margin-left: 100%;
  display: inline-block;
  position: relative;
  /*flex: 0 0 100%;*/ /* might not need, in some cases it makes the clickable link wider than content */
  order: 2;
  white-space: nowrap;
  text-align: right;
  overflow: visible;
  transform: translateX(-100%);
  left: 0;
}

.log-out a i {
  padding: var(--p-xs);
  vertical-align: middle;
  text-align: center;
  border-radius: 50%;
  font-size: var(--md);
  position: absolute;
  top: -16px;
  left: 28px;

}

.log-out a i.material-icons .user-notification-count {
  font-family: initial;
}

.log-out .user-name {
  margin: 0;
  font-weight: var(--light);
}

.log-out .manage-account-btn {
  margin: 0;
  display: block;
}

.log-out .user-notification-btn, .log-out .user-btn {
  position: relative;
  vertical-align: middle;
  border: 2px solid transparent;
  border-radius: 50%;
  font-size: var(--xl) !important;
  text-align: center;
}

.log-out .user-notification-btn {
  background-color: var(--blue-muted);
  max-width: 40px;
  border-color: var(--blue-darkest);

  i {
    background-color: var(--blue-muted);
  }
}

.log-out .user-notification-btn:hover {
  background-color: var(--blue-darkest);
  cursor: pointer;
  color: var(--surface-primary);

  i {
    background-color: var(--blue-darkest);
    color: var(--surface-primary);

    .user-notification-count {
      color: var(--blue-darkest);
    }
  }
}

.log-out .user-notification-count {
  margin: 0;
  position: absolute;
  top: 4px;
  left: 24px;
  font-size: var(--xxxs);
}

.log-out .user-notification-btn::before {
  vertical-align: middle;
}

.log-out .user-notification-btn i {
  background-color: var(--blue-muted);
  max-width: 24px;
  padding: var(--p-xs);
  position: absolute;
  top: -8px;
  left: 28px;
  border: none;
  border-radius: 50%;
  font-size: var(--xxs) !important;
}

.efileCartLink,
.imagesCartLink,
.printLinkButton,
.helpButton {
  min-width: 31px;
}

.efileCartLink,
.imagesCartLink {
  display: inline-flex !important;
}

/*#navigationDropDown .efileCartLink:has(.cost-hint:not(:empty)),*/

#navigationDropDown .efileCartLink:has(.badge:not(:empty)),
  /*#navigationDropDown .imagesCartLink:has(.cost-hint:not(:empty)),*/
#navigationDropDown .imagesCartLink:has(.badge:not(:empty)) {
  flex: 0 0 40%;
  min-width: 40%;
}

#navigationDropDown.efileCartLink,
#navigationDropDown .imagesCartLink,
#navigationDropDown .printLinkButton,
#navigationDropDown .helpButton {
  height: 48px !important;
}

.efileCartLink i,
.imagesCartLink i {
  align-self: flex-start !important;
}

.cost-hint,
.badge {
  font-family: Sans-serif;
  font-size: var(--xxs);
}

.cost-hint {
  margin-right: 0 !important;
  font-weight: bold;
  color: var(--success);
}

.efileCartLink .cost-hint,
.imagesCartLink .cost-hint {
  margin: 3px 0 0 !important;
}

/* looks like this is adding a second $ in some instances, commented out until QA has ran through
.cost-hint:before {
  font-weight: bold;
  content: "$";
  position: relative;
}*/

.efileCartLink .badge,
.imagesCartLink .badge {
  height: 20px;
  margin: 1px 0 0 3px !important;
  padding: 3px 6px 6px !important;
}

button, button i, button i span, a, a i, a i span, input, select, textarea, dropdown, .dropdown, .accordion-panel, accordion-panel, .alert, .toast {
  transition: background-color 0.3s ease-in-out, max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out, border-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.sub-menu {
  transition: max-height 1s ease-in-out, opacity 0.3s ease-in-out, border-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Start - Legacy code overwrites for less Java/HTML refactoring for eServices UI/UX Refresh
    Can/should be able to be removed after we're switched over to React */

/* screen reader specific CSS */
.visually-hidden,
.sr-only {
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  overflow: hidden !important;
  position: absolute !important;
  z-index: -1 !important;
}

.visually-hidden-label {
  z-index: -1;
}

.headerPaymentProcessor, .headereServices,
.headerCMS, .headerDifferences {
  color: var(--darkest) !important;
}
/* end - screen reader specific CSS */

.skipLink a {
  position: absolute;
  left: -1000px;
  z-index: 3;
  margin: 0;
  padding: .5em;
  background: #fff;
  font-size: 200%;
  font-weight: bold;
  text-decoration: none;
}

.skipLink a:active, .skipLink a:focus, .skipLink a:hover {
  display: inline;
  top: 0;
  left: 0;
  color: #fff;
  background: #000;
}

.requiredIndicator {
  display: none;
}

.requiredField:after {
  margin-left: auto;
  font-weight: var(--normal);
  content: "(required)";
  align-self: flex-start;
}

.input-group.w-icon .fieldHint {
  display: none;
}

.grouped-content hr {
  margin: var(--gap-large) 0;
}

#configPane {
  position: relative;
}

.date {
  min-width: 165px !important;
  max-width: 165px !important;
}

.w-icon .date {
  max-width: 165px !important;
}

/* Input field look (matches Edge default) */

input[type="date"].custom-date {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #ffffff;
  color: #1a1a1a;
  font-family: system-ui, sans-serif;
  padding: 8px 12px;
  font-size: 15px;
  min-width: 150px;
  box-sizing: border-box;
}

/* Date picker calendar popup look (for custom overlays only) */
/*.custom-calendar-popup {*/

#ui-datepicker-div {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: var(--shadow-xl) !important;
  color: #1a1a1a;
  padding: 8px;
  min-width: 320px;
}

/* make datepicker match HTML5 default look and feel */

#ui-datepicker-div {
  .ui-datepicker-header {
    background: #fff !important;
    margin: 0 0 8px;
    padding: 0 0;
    border: none !important;
    font-family: system-ui, sans-serif;
    color: #1a1a1a;
    font-size: 15px;
    display: flex;
    flex-wrap: nowrap;

    .ui-datepicker-title {
      min-width: 0;
      margin: 0 auto 0 0;
      flex: 1 1 auto;
      order: 1;
      text-align: left;
      font-weight: 500;
    }

    .ui-datepicker-prev,
    .ui-datepicker-next {
      width: 36px;
      height: 100%;
      line-height: 30px;
      margin: unset;
      border: 1px solid transparent;
      font-size: 24px;
      font-weight: normal;
      color: #666;
      border-radius: 2px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 36px;
      text-align: center;
      position: relative;
      top: 0 !important;
      right: 0 !important;
      left: 0 !important;
      cursor: pointer !important;
    }

    .ui-datepicker-prev {
      order: 2;
    }

    .ui-datepicker-next {
      order: 3;
    }

    .ui-datepicker-prev:hover,
    .ui-datepicker-next:hover {
      background: none;
      border-color: #666;
      font-weight: normal;
      color: var(--blue-dark);
      cursor: default;
    }

    .ui-datepicker-prev:after,
    .ui-datepicker-next:after {
      background: transparent;
      font-family: "Material Icons";
    }

    .ui-datepicker-prev:after {
      content: "south";
    }

    .ui-datepicker-next:after {
      content: "north";
    }

    .ui-datepicker-prev span,
    .ui-datepicker-next span {
      display: none;
    }
  }

  .ui-datepicker-calendar {
    thead {
      background: #fff;
      border: none;
    }

    th {
      font-weight: 500;
      color: #1a1a1a;
    }

    td {
      width: 38px;
    }
  }

  .ui-datepicker-buttonpane {
    border: none;
    display: flex;

    .ui-datepicker-close, .ui-datepicker-current {
      font-size: 15px;
    }

    .ui-datepicker-close {
      order: 1;
    }

    .ui-datepicker-current {
      margin-left: auto;
      order: 2;
    }
  }

  .ui-datepicker-buttonpane button,
  .ui-datepicker-buttonpane button.ui-state-default {
    font-weight: normal;
    color: #2563eb !important;
    opacity: 1;
  }

  .ui-datepicker-buttonpane button:hover,
  .ui-datepicker-buttonpane button.ui-state-default:hover {
    color: var(--blue-darkest) !important;
  }

  .ui-state-default, .ui-widget-content .ui-state-default {
    background: none !important;
    padding: 6px;
    color: #1a1a1a;
    border: 1px solid transparent;
  }

  .ui-state-active.ui-state-highlight, .ui-state-default.ui-state-active {
    background-color: #2563eb !important;
    color: #fff !important;
    font-weight: 500;
    border: 2px solid #333;
  }

  .ui-state-default, .ui-state-highlight {
    padding: 7px;
  }

  .ui-state-highlight {
    border: 1px solid #2563eb !important;
  }

  .ui-state-default.ui-state-active {
    padding: 6px;
  }

  .ui-state-hover {
    background-color: #eff6ff !important;
    color: #1a1a1a !important;
    border-color: #333;
  }

  .ui-state-disabled {
    color: #aaaaaa !important;
    background: transparent !important;
    cursor: not-allowed !important;
  }
}

.wicket-tree-content.selected {
  background: none !important;
  width: 100% !important;

  td .icon-panel {
    background-color: var(--sand-color);
    border: 1px solid var(--blue-light2);

    tbody {
      background: none;
    }
  }

  td[id^="iconLink"] {
    border-right: none;
  }

  td:not(.line).content {
    border-left: none;
  }
}

.fee-info {
  .card {
    border-radius: 2px;
    box-shadow: none !important;
    width:100%;

	&.no-bg {
      .card-body {
        background-color: var(--surface-primary) !important;
      }
    }
    .card-body {
      width: 100%;
      padding: var(--p-base);

      p {
        display: flex;

        span {
          margin-left: auto;
        }
      }

      b {
        font-weight: bold;
      }
    }
  }

  /* makes the .fee-info flow match if items aren't in <p> */

  .input-group.flex {
    width: 100%;
    max-width: 100%;
    flex-direction: row;
  }

  .input-group.flex :is(label, .label) {
    width: auto;
    margin-right: var(--p-base);
  }

  .input-group.flex span {
    margin-left: auto;
    word-break: break-all;
  }
}

/* hide nav dropdown and breadcrumb in the help popup */

.ui-layout-container:has(#Help.main-content.uiRefresh) {
  #navToggle,
  #globalBreadCrumb {
    display: none !important;
  }
}

.tabs {
  ul {
    margin: 0;
    padding: 0;
    gap: var(--p-xlarge);
    display: flex;
    align-items: end;
  }

  li.selected a {
    border-bottom-color: var(--blue-darkest);
  }

  li.selected a:hover {
    background-color: transparent !important;
  }

  li a:focus {
    box-shadow: none !important;
  }
}

/* hiding for now because it's redundant now that every page has a breadcrumb */

#configPane .breadCrumb {
  display: none;
}

.wicket-modal {
  .w_top_1 {
    div {
      background: none !important;
    }
  }

  .w_bottom_1 {
    div {
      background: none !important;
    }
  }

  .w_left, .w_right_1, .w_right, .w_content_1,
  .w_caption, .w_content_2, .w_content, a.w_close {
    background: none !important;
    margin: 0 !important;
    border: none !important;
  }

  .w_content {
    display: flex;
    gap: var(--p-xlarge);
  }

  .w_content_1 {
    background: var(--surface-primary) !important;
    width: 100%;
    padding: var(--p-xlarge);
    border-radius: var(--gap-base);
    box-shadow: var(--shadow-xl);
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--gap-xlarge);

    h4 {
      position: relative;
    }

    .w_content_container {
      width: 100%;
      margin-top: var(--p-large);
    }
  }

  a.w_close {
    width: 24px !important;
    height: 24px !important;
    right: 0;
  }
}

.ui-widget.ui-widget-content {
  background: var(--blue-lighter);
  box-shadow: var(--shadow-xl);
  border: none !important;
  padding: var(--gap-large) !important;

  .ui-dialog-title {
    float: none;
    margin: 0 !important;
    padding: 0;
    color: var(--blue-darkest) !important;
    font-size: var(--md);
    font-weight: var(--bold);
    white-space: wrap;
  }

  .ui-dialog-titlebar {
    padding: 0 !important;
    background: none !important;
    border: none !important;
  }

  .ui-dialog-content {
    padding: var(--gap-xlarge) 0 0;
    color: var(--text-primary);
  }

  .processingImageContainer {
    padding: 0 0 var(--gap-xlarge);
  }
}

/* start table styling pulled over from the React part and
adjusted as needed for legacy code */

table, .table,
.defaultSkin table.mceLayout {
  width: 100%;
}

table, .table {
  background: var(--background-primary);
  border-spacing: 0;
  border-collapse: collapse;
  color: var(--text-primary);

  tr:nth-child(even),
  .tr:nth-child(even) {
    background-color: var(--sand-color);
  }

  thead, .thead, tbody, .tbody {
    background: var(--gray-lighter);
    border: none;
  }

  th, .th, td, .td {
    max-width: 250px;
    padding: var(--p-base) var(--p-sm);
    font-size: var(--sm);
    font-weight: var(--normal);
    color: var(--blue-darkest);
    overflow-wrap: break-word;
    position: relative;
  }

  tbody tr:not(:last-child) td,
  .tbody .tr:not(:last-child) .td {
    border-bottom: 1px solid var(--default-border-color);
  }

  th, .th {
    font-size: var(--md);
    text-align: left;
    color: var(--blue-darkest);
    vertical-align: bottom !important;

    a {
      margin: 0;
      padding: 0;
      font-weight: var(--bold);
      color: var(--enable-color) !important;
    }
  }

  /* show pointer if <td> has 'onclick' attribute */

  td[onclick] {
    cursor: pointer;
  }

  td.minimal, .td.minimal {
    vertical-align: middle;

    /* make the buttons inside table data smaller to keep table sizes at a minimum */

    .btn {
      border-radius: var(--p-xs);
      padding: var(--p-sm) !important;
    }

    td.minimal .payButton, .td.minimal .payButton {
      border: 3px solid var(--success) !important;
    }
  }

  tr:last-child:not(tfoot tr, #tree tr) td,
  .tr:last-child:not(tfoot tr, #tree tr) .td {
    border-bottom: 1px solid var(--sand-color);
  }

  tbody tr.ui-state-hover, tbody tr:hover {
    background: var(--yellow-medium) !important;
    background-image: none;
    border: none;

    td, .td {
      color: var(--text-primary);
    }
  }
}

.td-align-center td {
  text-align: left;
  vertical-align: middle;
}

.data-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.legacy-pagination {
  text-align: center;

  .data-table-toolbar {
    justify-self: center;
  }

  label {
    font-weight: normal;
  }

  select {
    min-width: fit-content;
    padding: 0.25rem 0.5rem !important;
  }
}

.data-table-rows-per-page {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-base);

  select {
    margin: 0;
  }
}

.data-table-rows-per-page select {
  padding: 0.25rem 0.5rem;
}

.data-table-status {
  margin: auto;
  font-size: var(--sm);
  color: var(--blue-darkest);
}

.dt-th-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: default;
}

.dt-th-button.is-sortable {
  cursor: pointer;
  padding: 0;
}

.dt-th-icon .material-icons {
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
}

.dt-empty-cell {
  text-align: center;
  color: #666;
  padding: 1rem;
}

.data-table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.5rem 0 0.5rem;
  font-family: Sans-serif;

  em {
    font-style: normal;
  }
}

.legacy-table {
  margin-bottom: var(--p-large);
  border-top: 1px solid var(--default-border-color);

  thead {
    border-bottom: 1px solid var(--default-border-color);
  }

  th.wicket_orderUp,
  th.wicket_orderDown {
    background-color: var(--blue-lighter);
    background-image: none;
    padding-right: var(--p-base);
    border-bottom: 4px solid var(--blue-dark);
  }

  th.wicket_orderUp:before,
  th.wicket_orderDown:before {
    width: 16px;
    height: 16px;
    font-family: "Material Icons";
    font-size: var(--sm);
    align-self: center;
    position: absolute;
    right: 2px;
  }

  th.wicket_orderUp:before {
    content: "arrow_upward_alt";
  }

  th.wicket_orderDown:before {
    content: "arrow_downward_alt";
  }

  th {
    font-size: var(--sm);
    vertical-align: bottom;

    .ui-resizable-e {
      font-family: "Material Icons";
    }

    .ui-resizable-e:before {
      content: "arrow_right";
      font-size: var(--sm);
      color: var(--blue-dark);
      position: absolute;
      top: calc(50% - 8px);
      right: 2px;
    }

    .ui-resizable-s, .ui-resizable-se {
      display: none !important;
    }

    a, label {
      font-size: var(--sm);
    }
  }

  th:has(.ui-resizable-e:hover),
  th:has(.ui-resizable-e:active) {
    background-color: var(--blue-light);
  }

  th:has(.ui-resizable-e:hover) {
    transition: ease-in-out .3s;
  }

  .payButton {
    padding: var(--p-sm);
    font-size: var(--xs);
  }

  label, th {
    font-family: var(--default-font-family);
    font-weight: var(--bold);
    color: var(--blue-darkest);
  }

  tfoot tr td {
    padding: var(--p-base) var(--p-sm) !important;
  }

  td.errorIcon {
    display: table-cell !important;
  }
}

table.condensed {
  background: var(--gray-lighter);

  td, .td {
    color: var(--text-primary) !important;
  }

  tr:nth-child(even), tbody tr.ui-state-hover,
  tbody tr:hover {
    td, .td {
      color: var(--text-primary) !important;
    }
  }

  tr:nth-child(even) {
    background-color: initial;
  }

  thead, .thead, tbody, .tbody {
    background: var(--gray-lighter);
    border: none;
  }

  td, .td {
    padding: var(--p-sm);
  }

  th {
    background: var(--gray-lighter);
  }
}

/* if legacy table doesn't have a <td> (meaning it's empty)
   we need this because we have a couple pages where the tables are taking up space
   even though they're empty. This hides it without having to get into the backend */

.legacy-table:has(td, th):not(:has(td:not(:empty))) :not(#caseTypeTabSettings *, #enhancedCasesPanelTable *) {
	display: none;
}

/* Hide empty rows in legacy tables (no non-empty <td> or <th>) */

.legacy-table tr:not(:has(td:not(:empty), th:not(:empty))) {
  display: none;
}

.accordion {
  .legacy-table {
    border: none;
    overflow: auto;
  }
}

tr.navigation .navigator,
tr.navigation .navigatorLabel {
  width: 100%;
  text-align: center !important;
  font-family: Sans-serif;
}

tr.navigation .navigatorLabel {
  margin-bottom: var(--p-sm);
  font-size: var(--sm);
  font-weight: normal;
  color: var(--blue-darkest);
}

.data-table-pagination button,
.legacy-table .data-table-pagination a,
.legacy-table .data-table-pagination > span:not(:has(a)),
.legacy-table .navigator [id^="pageLink"],
.legacy-table .navigator a,
.legacy-table .navigator [id^="first"],
.legacy-table .navigator [id^="prev"] {
  background: var(--surface-primary);
  border: 1px solid var(--default-border-color);
  margin: 0;
  padding: 0.25rem 0.5rem;
  align-content: center;
  font-size: small;
  color: var(--text-primary);
  cursor: pointer;
}

.legacy-table tfoot:has(.navigation) {
  background: none;
  border: none;
}

.legacy-table .data-table-pagination a[id^="first"],
.legacy-table .data-table-pagination a[id^="prev"],
.legacy-table .data-table-pagination a[id^="next"],
.legacy-table .data-table-pagination a[id^="last"],
.legacy-table .data-table-pagination [id^="first"],
.legacy-table .data-table-pagination [id^="prev"],
.legacy-table .data-table-pagination [id^="next"],
.legacy-table .data-table-pagination [id^="last"],
.legacy-table .navigator a[id^="first"],
.legacy-table .navigator a[id^="prev"],
.legacy-table .navigator a[id^="next"],
.legacy-table .navigator a[id^="last"],
.legacy-table .navigator [id^="first"],
.legacy-table .navigator [id^="prev"],
.legacy-table .navigator [id^="next"],
.legacy-table .navigator [id^="last"] {
  font-family: 'Material Icons';
}

.legacy-table .data-table-pagination a[id^="first"],
.legacy-table .data-table-pagination a[id^="prev"],
.legacy-table .data-table-pagination a[id^="next"],
.legacy-table .data-table-pagination a[id^="last"],
.legacy-table .navigator a[id^="first"],
.legacy-table .navigator a[id^="prev"],
.legacy-table .navigator a[id^="next"],
.legacy-table .navigator a[id^="last"] {
  font-size: 0;
  line-height: 0;
}

.legacy-table .data-table-pagination [id^="first"],
.legacy-table .data-table-pagination [id^="prev"],
.legacy-table .data-table-pagination [id^="next"],
.legacy-table .data-table-pagination [id^="last"],
.legacy-table .navigator [id^="first"],
.legacy-table .navigator [id^="prev"],
.legacy-table .navigator [id^="next"],
.legacy-table .navigator [id^="last"] {
  width: 42px;
  height: 35px;
  font-size: 24px;

  em {
    display: none;
  }
}

.legacy-table .data-table-pagination a[id^="first"]:before,
.legacy-table .data-table-pagination a[id^="prev"]:before,
.legacy-table .data-table-pagination a[id^="next"]:before,
.legacy-table .data-table-pagination a[id^="last"]:before,
.legacy-table .navigator a[id^="first"]:before,
.legacy-table .navigator a[id^="prev"]:before,
.legacy-table .navigator a[id^="next"]:before,
.legacy-table .navigator a[id^="last"]:before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

.legacy-table .data-table-pagination [id^="first"]:before,
.legacy-table .navigator [id^="first"]:before {
  content: "first_page";
}

.legacy-table .data-table-pagination [id^="prev"]:before,
.legacy-table .navigator [id^="prev"]:before {
  content: "chevron_left";
}

.legacy-table .data-table-pagination [id^="next"]:before,
.legacy-table .navigator [id^="next"]:before {
  content: "chevron_right";
}

.legacy-table .data-table-pagination [id^="last"]:before,
.legacy-table .navigator [id^="last"]:before {
  content: "last_page";
}

.data-table-pagination button:disabled,
.legacy-table .data-table-pagination [id^="first"]:has(em),
.legacy-table .data-table-pagination [id^="first"]:has(em):before,
.legacy-table .data-table-pagination [id^="prev"]:has(em),
.legacy-table .data-table-pagination [id^="prev"]:has(em):before,
.legacy-table .data-table-pagination [id^="next"]:has(em),
.legacy-table .data-table-pagination [id^="next"]:has(em):before,
.legacy-table .data-table-pagination [id^="last"]:has(em),
.legacy-table .data-table-pagination [id^="last"]:has(em):before,
.navigator button:disabled,
.legacy-table .navigator [id^="first"]:has(em),
.legacy-table .navigator [id^="first"]:has(em):before,
.legacy-table .navigator [id^="prev"]:has(em),
.legacy-table .navigator [id^="prev"]:has(em):before,
.legacy-table .navigator [id^="next"]:has(em),
.legacy-table .navigator [id^="next"]:has(em):before,
.legacy-table .navigator [id^="last"]:has(em),
.legacy-table .navigator [id^="last"]:has(em):before {
  opacity: 0.5;
  cursor: not-allowed;
}

.data-table-page-list,
[id^="navigator"] {
  display: inline-flex;
  gap: 0.25rem;
  margin: 0 0.25rem;
  align-items: center;
}

.data-table-page-btn {
  border: 1px solid var(--default-border-color);
  background: white;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.data-table-page-btn.is-active,
.legacy-table .data-table-pagination span:has([id^="pageLink"]),
.legacy-table .navigator span[id^="pageLink"]:has(em) {
  background: var(--sand-color);
  font-size: small;
  font-weight: var(--bold);
}

/* text editor mce editor display fix for new layout in accrodion
   Might be needed in other locations */

.accordion-panel .mceEditor {
  margin-right: var(--p-base);
  display: block;

  .mceLayout {
    width: 100% !important;
  }
}

.defaultSkin table.mceLayout tr.mceLast td {
  width: 100%;
  border-bottom: 1px solid #CCC !important;
  display: table-cell;
}

.defaultSkin table td {
  overflow:auto;
}

/* end table styling in progress */

/* calendar styling */
.eServCalendar {
  .ui-layout-center, .ui-layout-east {
    height: auto !important;
    inset: unset !important;
  }

  .ui-layout-center {
    left: 0 !important;
  }

  .ui-layout-east {
    right: 0 !important;
  }

  .main-content.wrapper {
    padding: 30px 30px 30px 0;
    gap: var(--gap-xlarge) var(--gap-xlarge);
    display: flex;

    [id^="paneCenter"],
    [id^="paneEast"] {
    }

    [id^="paneCenter"] {
      width: 65%;
    }

    [id^="paneEast"] {
      width: 35%;
    }

    #SelectListPanel .listTable tr[onclick] {
      cursor: pointer;
    }
  }

  #calendarCaseContent {
    /* this is in the calendar case details panels and shouldn't show */

    .padding-bottom-base:has(#searchResultsLink) {
      display: none;
    }

    #caseHeader {
      .column {
        padding: var(--p-md) 0;
      }
    }

    #caseHeader.wrapper {
      padding: var(--p-base);
    }
  }

  .calendarNavContainer {
    margin-bottom: var(--p-base);
    overflow: auto;
  }

  .month-day-button-wrapper {
    margin-top: 4px;
    float: right;
    align-items: center;
    gap: var(--gap-base);
  }

  .month-day-button-wrapper .wicket-ajax-indicator {
    position: absolute;
    top: 5px;
    left: 5px;
    opacity: .5;
  }

  .calendarNavContainer {
    margin-bottom: var(--p-base);
  }

  .calendarNavButtons {
    display: inline-flex;
  }

  .calendarToggleFilterButton,
  .list-view-btn {
    margin-bottom: 0;
  }

  .calendarDay .wicket-ajax-indicator {
    margin-left: -8px;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: .5;
  }

  .calSearchFilters.columns {
    margin-bottom: var(--p-base);
    gap: 0;
    overflow: auto;

     .column {
       width: 250px;
       min-width: unset;
       padding: var(--p-large) var(--p-base);
    }
  }

  .events-choice-wrapper {
    margin-top: 7px;
    display: inline-flex;

    label {
      margin-right: var(--p-large);
    }
  }

  .calFilter select {
    min-width: auto;
  }

  .calendarDayOfWeek {
    background: var(--gray-lighter);
    padding: var(--p-sm);
    text-align: center;
    font-weight: bold;
    border-top: 2px solid var(--default-border-color);
  }

  .calendarDay {
    background: var(--blue-lighter);
    width: 14% !important;
    text-align: center;
    border-width: 4px!important;
    border-style: solid!important;
    border-color: var(--surface-primary)!important;
  }

  .calendarDay.selected {
    background: var(--yellow-light);
    border-color: var(--highlight-primary) var(--surface-primary)!important;
   }

  .calendarDateContainer {
    text-align: left;
  }

  .calendarDay a {
    background: var(--surface-primary);
    margin: 0;
  }

  .calendarDay a:not(:empty) {
    padding: var(--p-sm);
    border: 1px solid var(--default-border-color);
  }

  #SelectListPanel {
    margin-top: var(--p-base);
  }

  table {
    border-collapse: unset;
  }

  .events-choice-wrapper [type="radio"] {
    width: inherit;
    height: inherit;
  }
}
/* end calendar styling */

.outer-list ul li {
  padding: 0 !important;
}

ul {
  list-style: none;
}

.no-ul-style ul {
  margin: 0;
  padding: 0;

  li {
    padding: 0 0 var(--p-base) 0;
  }
}

.columns .heading-w-added-text,
.accordion-panel .heading-w-added-text {
  display: flex;
  align-items: baseline;
  gap: var(--p-base);

  ul {
    padding: 0;
  }

  .pty-cd {
    font-weight: normal;
  }
}

.tabSection .accordion button, .tabSection .accordion .accordion-heading {
  margin-bottom: var(--p-base);
}

.tabSection .accordion .accordion-panel.active {
  margin: -16px 0 var(--p-base);
}

#ptyContainer div:first-of-type h5,
#chgContainer div:first-of-type h5 {
  margin-top: 0;
}

#citationContainer h5:first-of-type,
#citationContainer ul:first-of-type,
#citationContainer .jsdn-cd,
#chgContainer .heading-w-added-text {
  margin: 0;
}

#caseDetail {
  ul {
    margin: 0;
    padding: 0;

    li {
      padding: 0 0 var(--p-base) 0;
      /*padding: 0 0 var(--p-sm) 0;*/
    }
  }

  #caseDetailHeader {
    ul:has(.displayData) {
      margin: 0;
    }

    .displayData {
      padding: 0;
      font-size: var(--lg);
      font-weight: var(--bold);
    }
  }

  #caseDetailHeader.wrapper {
    padding: var(--p-base);
  }

  #caseHeader {
    .column {
      min-width: 100%;
      gap: 0;
    }
  }
}

/* may use after later getting feedback
.accordion-panel .columns .column:nth-child(odd) {
  background: var(--surface-primary);
}

.accordion-panel .columns .column:nth-child(even) {
  background: var(--blue-lighter);
}*/

.payButton {
  background: var(--success) !important;
  padding: var(--p-base) !important;
  color: var(--surface-primary) !important;
  border-radius: 2px !important;
}

.payButton:hover {
  opacity: .8;
}

span:has(.help-btn-wrapper),
.help-btn-wrapper {
  width: 100%;
}

.feedbackPanel,
.feedback.feedbackPanel {
  max-width: 100%;
  margin-bottom: var(--p-base);
  padding: var(--p-large) var(--p-large) var(--p-large) 50px;
  color: var(--surface-primary) !important;
  position: relative;
  top: 0;
  right: 0;
  box-shadow: none;
}

.feedbackPanel:has(.SUCCESS) {
  background: var(--success) !important;
}

.feedbackPanel:has(.FAILURE),
.feedbackPanel.error,
.feedback:has(.party1-errors, .party2-errors) {
  background: var(--error) !important;
}

.feedbackPanel:has(.PENDING) {
  background: var(--blue-darkest) !important;
}

.feedbackPanel .SUCCESS,
.feedbackPanel .FAILURE,
.feedbackPanel .PENDING {
  font-weight: var(--bold);
}

.efileSubsection {
  p {
    /*background: var(--gray-light); closer to legacy color if we need to switch back*/
    background: var(--gray-lighter);
    margin: -8px;
    padding: var(--p-sm) var(--p-sm) var(--p-base);
  }
}

.full-case-disp-panel:has(.helpPanel) {
  padding-bottom: var(--p-large);
}

#caseDetail .helpPanel {
  display: inline-flex;
  position: absolute;
  bottom: -4px;
  left: 0;
}

.help-btn-wrapper {
  width: 100%;
}

.feedbackPanel .party1-errors:not(li):first-of-type::before {
  content: "Party 1: ";
  padding-bottom: var(--gap-base);
  font-weight: bold;
}

.feedbackPanel .party2-errors:first-of-type::before {
  content: "Party 2: ";
  padding-bottom: var(--gap-base);
  font-weight: bold;
}

/* wicket modal */

.wicket-modal {
  .w_content_1 {
    min-height: 250px;
    gap: 0;
  }

  .extraPtyInfo.no-padding-head {
    margin-top: 0;
  }

  #AlertPendingInfo h5 {
    display: none;
  }

  .legacy-table {
    margin-top: var(--p-base);
    border-top: 1px solid var(--default-border-color) !important;

    /* smaller font size for tables inside modals */

    label, td, td a {
      font-size: 14px !important;
    }
  }
}

.wicket-modal:has(#caseDetail) {
  top: 16vh !important;
  bottom: 3vh;
  overflow-y: scroll;
}

.ui-widget-overlay {
  background: rgba(255, 255, 255, .8) none !important;
  opacity: 1 !important;
}

div.wicket-mask-dark {
  opacity: .2 !important;
}

.circular-progress {
  display: inline-block;
  position: relative
}

.circular-progress-svg {
  width: 40px;
  height: 40px;
  animation: rotate 1.4s linear infinite
}

.circular-progress-bg {
  stroke: var(--gray-light, #e0e0e0)
}

.circular-progress-indicator {
  stroke: var(--highlight-primary, #186db2);
}

.bottom-border {
  margin-bottom: var(--gap-xlarge);
  border-bottom: 1px solid var(--default-border-color);
}

.efileForm-editable [id^="efilePartyForm"]:not(:first-child),
.efile-party-contact-list:not(:first-child) {
  margin-top: var(--gap-xlarge);
  padding-top: var(--p-xlarge);
  border-top: 1px solid var(--default-border-color);
}

.document-additions > div:not(:first-of-type) {
  margin-top: var(--gap-xlarge);
  padding-top: var(--p-xlarge);
  border-top: 1px solid var(--default-border-color);
}

.uploadForm input[type="file"],
[id^="uploadForm"] input[type="file"] {
  padding: 0 0 var(--p-sm) !important;
  border: none !important;
  width: 100%;
  cursor: pointer;
}

.upload-wrapper {
  background-color: var(--blue-light);
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin-bottom: var(--gap-large) !important;
  padding: 30px;
}

.userValue [id^="fileUploadField"] {
    width: 30% !important;
}
[id^="fileUploadField"] {
  width: auto !important;
}

.rejected {
  background: var(--warning-muted);
  margin: -8px -8px var(--p-sm) !important;
  padding: var(--p-sm);

  label {
    justify-content: flex-start !important;
  }

  select, input:not([type="checkbox"], [type="radio"]) {
    min-width: 270px !important;
  }
}

.efileStatus.REJECTED {
  background: var(--error);
  color: var(--surface-primary) !important;
}

.efileInputLabel:has(.rejectedIcon) {
  justify-content: flex-start !important;
}

.rejectedIcon,
.rejected label:first-of-type:after {
  width: 23px;
  height: 23px;
  color: red;
  font-family: "Material Icons";
  font-size: var(--lg);
  font-weight: normal;
  position: relative;
  top: 6px;
}

.rejectedIcon:before,
  /* don't apply to label inside label */
.rejected > label:first-of-type:after {
  float: left;
  content: "warning";
}

[id^="efileNotesContainer"] .efileInputLabelAndField,
[id^="efileNotesContainer"] .efileInputLabelAndField textarea,
.efileReviewSec .efileInputLabelAndField,
[id^="efileDocketInfoContainer"] .efileInputLabelAndField,
[id^="reviewerTxtContainer"] .efileInputLabelAndField,
[id^="reviewerTxtContainer"] .efileInputLabelAndField textarea {
  width: 100%;
  max-width: 100%;
}
.wicketExtensionsWizardButtonBar .wizard-btn-span {
    height: 100px !important;
    display: inline-block;
    width:100%;
}

.col-width-1000 {
	width: 1000px!important;
}

.box-width {
	width: 320px;
}

.on-behalf-of {
  .onBehalfOfPtyChoices:first-child {
    padding-left: 0;
  }

  /* can't find where these <br>'s are being set in the code so hiding */
  [id^="onBehalfOfPtyVO"] br {
    display: none;
  }

  .onBehalfOfPtyChoices input {
    width: inherit;
    height: inherit;
    margin: 3px var(--p-sm) 0 0;
    float: left;
  }
}

.listTable .label-checkBox {
  margin-left: 0;
}

.welcome-pg-input-text-wrapper [id^="label"] {
  margin: 0 0 var(--p-base) 0;
  line-height: 1.15;
  font-size: var(--xxs);
  font-family: inherit;
  border: 2px solid var(--default-border-color);
  border-radius: 2px;
}

.welcome-pg-input-text-wrapper [id^="label"],
.welcome-pg-input-text-wrapper [id^="editor"] {
  min-width: 285px;
  max-width: 100%;
  padding: var(--p-sm);
  align-self: baseline;
}

.btn-editable input[type="text"] {
  margin-top: 15px;
}

[id^="eMarriageLicensePanel"] #accordionExpandAllToggle {
  position: absolute;
  top: -55px;
  right: -8px;
  z-index: 9;
}

/* if proposed note span is empty, hide it so it doesn't show blank <tr>'s */
.poRow:has(.poNoteTxt [id^="noteTxt"]:empty) {
  display: none;
}

.eMarriage-description:not(:empty) {
  margin-bottom: 70px;
}

.eUsers .breadCrumb {
  margin-top: -16px!important;
  margin-bottom: 18px;
  padding-top: 0!important;
  padding-left: 0!important;
}

/* hide error toasters in efiledetail.page so there aren't duplicate errors */
.efileEditPanel .efileForm-editable .feedback:has(ul.feedbackPanel) {
  display: none!important;
}

/* End - Legacy code overwrites for less Java/HTML refactoring for eServices UI/UX Refresh */

.red {
  background-color: red !important;
  color: red !important;
}

.blue {
  background-color: blue !important;
  color: blue !important;
}

.calMetaLink {
  padding-top: var(--p-base);

  .dateRange {
    display: inline-flex;
    gap: var(--gap-large);

    .date {
      max-width: 160px!important;
    }
  }
}

/* for quick testing to find a element */

.asdf {
  background: yellow !important;
  border: 1px solid red;
}

@media (max-width: 1400px) {
  .efile-conf-stamp-form {
    .w-70, .w-30 {
      width: 50% !important;
      max-width: 50% !important;
      min-width: 50% !important;
      padding: var(--p-large) var(--p-base);
    }
  }
}

@media (max-width: 1200px) {
  nav:not(.breadCrumb) {
    gap: var(--p-md);
  }
}

@media (max-width: 1048px) {
  .uiRefresh {
    nav {
      gap: var(--p-sm);
    }

    nav a:not(.material-icons), nav a:visited:not(.material-icons), nav button:not(.material-icons),
    nav .disabled.link, nav span.active, nav span.active em {
      font-size: var(--xxs);
      white-space: nowrap;
    }

    nav a:not(.fa, .btn, .manage-account-btn, .user-notification-btn, .efileCartLink, .log-out a, .dropdown a, .dropdown button)::before,
    nav .disabled.link:not(.dropdown .link):before,
    nav span.active:not(.dropdown span.active):before {
      width: 7px;
      height: 7px;
      margin: 0 4px 2px 0;
      vertical-align: unset;
    }

    nav a:not(.fa, .btn, .material-icons, .manage-account-btn, .user-notification-btn, .efileCartLink, .log-out a, .dropdown a, .dropdown button, .breadCrumb-link)::before {
      border-width: 0;
    }

    nav :not(.dropdown .link) .disabled.link,
    nav span.active {
      font-size: var(--xxs);
      white-space: nowrap;
    }
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .case-req .row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1023px) {
  .main-content.wrapper {
    padding: 0 30px!important;
    flex-wrap: wrap;

    [id^="paneCenter"], [id^="paneEast"] {
      width: 100%!important;
    }

    #calendarCaseContent {
      margin-top: 0;
    }
  }
}

@media (max-width: 899px) {
  #navLinkPanel a:not(.dropdown a, .dropdown button, #logo, #logonLink, #userInfoHeaderSection .material-icons, #userInfoHeaderSection .manage-account-btn, .logoff-btn), #navLinkPanel button,
  nav .disabled.link:not(.dropdown .link),
  nav span.active:not(.dropdown span.active) {
    display: none;
  }

  .efileCartLink:not(menu .efileCartLink), .imagesCartLink:not(menu .imagesCartLink) {
    display: none !important;
  }

  .efileCartLink, .imagesCartLink {
    width: fit-content;
  }

  .logoff-btn {
    position: relative;
    right: -16px;

  }

  .dropdown a:first-of-type {
    border: none !important;
  }

  #mobileLinks a:not(.efileCartLink), #mobileLinks button:not(.imagesCartLink, [id^="imagesCartLinkMobile"], .helpButton, .printLinkButton),
  #mobileLinks hr {
    flex: 0 0 100%;
    min-width: 100%;
    display: inline-flex !important;
  }

  #mobileLinks .helpButton, #mobileLinks .printLinkButton,
  #mobileLinks .efileCartLink:has(.badge:empty),
  #mobileLinks .imagesCartLink:has(.badge:empty) {
    flex: 0 0 40px;
    max-width: 40px;
    min-width: 40px;
    display: inline-flex;
  }

  nav:not(.breadCrumb) {
    gap: var(--gap-base) !important;
  }

  .user-notification-btn {
    margin-left: auto;
  }

  #navLinkPanel #navToggle {
    display: flex;
  }

  #mobileLinks {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 1em;
    flex-wrap: wrap;
  }

  footer.uiRefresh {
    flex-wrap: wrap;

    .copyright-footer {
      flex: 1 0 100%;
    }
  }
}

@media (max-width: 767px) {
  #navigationDropDown {
    /*display: none;*/
  }

  #navToggle {
    /*display: block;*/
  }

  .case-req .row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 716px) {
  .uiRefresh .card {
    max-width: 580px;
  }
}

@media (max-width: 600px) {
  .eServCalendar {
    .calendarNavButtons {
      width: 100%;
      margin-bottom: var(--p-base);
      justify-content: center;
    }
  }
}

@media (max-width: 500px) {
  nav {
    gap: var(--p-base);
  }
}

@media (max-width: 500px) {
  nav {
    gap: var(--p-sm);
  }
}

@media (max-width: 400px) {
  #logo {
    width: 120px;

    img {
      width: 100%;
    }
  }
}

@keyframes hideElement {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    width: 0;
    height: 0;
    padding: 0;
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg)
  }
}

/* remove when existing application display is ironed out */

.red {
  background-color: red !important;
  color: red !important;
}

.blue {
  background-color: blue !important;
  color: blue !important;
}

.pointer-none {
  pointer-events: none;
}

/*
  message to show the legacy nav is being used, will be moved when able to
  detect enviornment so it doesn't accidently show in productions
*/

#debug-header-msg {
  content: 'Legacy eServices Nav';
  padding: 4px;
  font-size: var(--sm);
  font-weight: bold;
  color: #666666;
  border: 1px dashed #666666;
  position: absolute;
  top: 2px;
  z-index: -1;
}