#root.theme-loaded {
    display: none;
}
@-webkit-keyframes loadingIndicatorDelay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes loadingIndicatorDelay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.loading-app {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #25272d;
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.2s;
    -webkit-animation-name: loadingIndicatorDelay;
    animation-name: loadingIndicatorDelay;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.ellipsis-anim span {
    opacity: 0;
    -webkit-animation: ellipsis-dot 1s infinite;
    animation: ellipsis-dot 1s infinite;
}

.ellipsis-anim span:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.ellipsis-anim span:nth-child(2) {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.ellipsis-anim span:nth-child(3) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

@-webkit-keyframes ellipsis-dot {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes ellipsis-dot {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.loading-app-icon {
    width: 100%;
    height: auto;
}

.tooltip-normal-text,
.tooltip-normal-text * {
  font-weight: 400 !important;
}

@media (min-width: 768px) {
    .loading-app-icon {
        width: 70%;
    }
}

@media (min-width: 992px) {
    .loading-app-icon {
        width: 40%;
    }
}

@-webkit-keyframes animateAppLoadingIcon {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    14% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    42% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes animateAppLoadingIcon {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    14% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    42% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.animateAppLoadingIcon {
    -webkit-animation-name: animateAppLoadingIcon;
    animation-name: animateAppLoadingIcon;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


/* Main Nav */
.br-wizard {
    height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  
  .br-wizard .wizard-progress {
    background-color: var(--background-alternative);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-template-rows: none;
    min-height: 164px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: var(--spacing-scale-7x);
    width: 100%;
  }
  
  .br-wizard .wizard-progress .wizard-progress-btn {
    background-color: transparent;
    border: 0;
    box-shadow: none !important;
    color: var(--interactive);
    font-size: var(--font-size-scale-up-01, 16.8px);
    line-height: 19px;
    max-height: 90px;
    padding-bottom: 0;
    padding-top: var(--spacing-scale-2x);
    position: relative;
    text-indent: 0;
    transition-delay: 0s;
    transition-duration: 0.15s;
    transition-property: all;
    transition-timing-function: linear;
  }
  
  .wizardBorder
  {
    border: 1px solid #f2f2f2;
    margin-top: -30px;
    margin-bottom: -50px;
  }
  
  .cirle-wizard{
    z-index: 1;
    margin: 5px;
    position: relative;
    display: block;
    width: 100%;
    padding-right: 18px;
  }
  
  .cirle-wizard > ul {
    align-content: center;
    align-items: center;
    counter-reset: stepCount;
    display: flex;
    justify-content: space-around;
    margin: 15vh auto 5vh;
  }

  @media (max-width: 767px){
    .cirle-wizard > ul{
      /* margin: 5vh auto 5vh; */
      margin: 13vh -4vh 5vh;

    }
  }
  @media only screen and (max-width: 1024px) and (min-width: 1024px){
    .cirle-wizard > ul{
      align-items:unset;
      padding-top: 15px;
    }
  }

  @media (max-width: 330px){
    .cirle-wizard > ul{
      /* margin: 5vh auto 5vh; */
      margin: 3vh -2vh 5vh;
    }
  }

  /* @keyframes slidein { 0% { left: 0%; } 100% { left: 100%; }  } */
  
  .cirle-wizard > ul > li {
    background: #32508C;
    color: white;
    content: ' ';
    transition: all 1.1s ease-out;
    display: flex;
    flex-grow: 1;
    height: .3em;
    line-height: 1em;
    margin: 0;
    position: relative;
    text-align: right;
    z-index: -1;
    margin-top: -20px;
    margin-bottom: -30px;
    /* animation: slidein 3s infinite content; */
  }
  
  .cirle-wizard > ul > li::before {
    color: white;
    transition-delay: 1.2s;
    background: #32508C;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    content: '\2713'; 
    height: 2.2em;
    left: -2em;
    line-height: 2em;
    position: absolute;
    text-align: center;
    top: -1em;
    width: 2.2em;
    border: 4.5px solid white;
  }
  
  .cirle-wizard > ul > li.active {
    background-color: #C4C4C4;
    /* border: 1px solid #C4C4C4; */
    content: ''; 
  }
  
  .cirle-wizard > ul > li.active ~ li {
    background-color: #C4C4C4;
    /* border: 1px solid #C4C4C4; */
    content: ''; 
  }
  
  .cirle-wizard > ul > li.active ~ li::before {
    background-color: #EEEEEE;
    border: 4.5px solid white;
    content: ''; 
  }
  
  .cirle-wizard > ul > li:last-child {
    flex-basis: 0;
    flex-grow: 0;
    flex-shrink: 1;
    background-color: white !important;

    /* Shorthand: flex: 0 1 0; */
  }
  
  .cirle-wizard > ul.bigger {
    font-size: 1.3em;
  }
  
  .cirle-wizard > ul.highlight-active .cirle-wizard > ul > li.active::before {
    font-size: 1.6em;
    background: maroon;
  }
  
  .cirle-wizard >ul >li .content {
    /* position: relative;
    left: -25px !important;
    bottom: 40px !important;
    color: #808080;
    padding-left: 13px;
    width: 69px;
    margin: -28px;
    text-align: center; */
    position: relative;
    left: -80px !important;
    bottom: 60px !important;
    color: #808080;
    width: 140px;
    margin: 0px -100px 0 0;
    text-align: center;
  }

  @media (max-width: 998px){
    .cirle-wizard >ul >li .content {
      display: none;
    }

    .cirle-wizard > ul {
      align-content: start;
      align-items: start;
    }

    .cirle-wizard > ul >li {
      margin-top: -18px;
    }
  }

  .cirle-wizard>ul>li.done .content {
    color: #32508C;
  }

  @media (max-width: 767px){
    .cirle-wizard>ul>li .content{
    /* display: none; */
    font-size: 10px;
    }
  }

  @media (max-width: 330px){
    .cirle-wizard>ul>li .content{
    display: none;
    /* font-size: 8px; */
    }
  }

  /* Main Nav */
  
  /* left Nav */
  .line {
    position: relative;
    width: 80%;
    margin: auto;
    overflow: hidden;
  }
  
  @media only screen and (max-width: 1400px) and (min-width: 769px){
  .line:after {
    content: " ";
    width: 1px;
    border: 1px dashed #A4A5B2;
    position: absolute;
    z-index: 1;
    top: 73px;
    bottom: 53px;
    left: 15%;
    display: none;
  }
}

@media only screen and (max-width: 2400px) and (min-width: 1400px){
  .line:after {
    content: " ";
    width: 1px;
    border: 1px dashed #A4A5B2;
    position: absolute;
    z-index: 1;
    top: 73px;
    bottom: 53px;
    left: 21%;
    display: none;
  }
}
  
  .fr { float:right; }
  
  .cf:after {
    clear: both;
  }
  .cf:before, .cf:after {
    content: " ";
    display: table;
  }
  
  .block {
    width: 50%;
    position: relative;
    padding: 0 50px 0 0;
    clear: both;
  }
  
  .fr { padding:39px 0 0 50px; }
  
  .circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px dashed #A4A5B2;
    content: '1';
    float: right;
    margin-right: -85px;
    margin-top: -1em;
    color: #808080;
    position: relative;
    text-align: center;
    padding-top: 15px;
    background-color: white;
    z-index: 2;
  }
  
  .fr .active
  {
    background-color: #EEEEEE;
    color: #32508C;
  }
  
  .fr .circle {
    float: left;
    margin-left: -159px;
  }
  .circle.first:before,.circle.last:before{
      content:" ";
      position:absolute;
      width:4px;
      left:50%;
      margin:0 0 0 -2px;
      background:#000;
      bottom:100%;
      height:99em;
      z-index:3;
      background:#000;
  }
  .circle.last:before{
      bottom:auto;
      top:100%;	
  }
  
  .frContent
  {
    margin-left: -95px;
    font-size: 18px;
    line-height: 20px;
  }
  
  .requiredSteps
  {
    margin-top: 5px;
    padding-left: 60px;
  }

/* .fileUploadContainer .containerDisplay .containerDisplayItem {
    border-style: solid;
    border-color: #c6c9df;
    background: #ffffff;
    width: 100% !important;
    border-radius: 5px;
} */

.fileUploadContainer .dropzone {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 0px 0 0px !important;
  border-width: 2px;
  border-radius: 2px;
  border-style: none !important;
  background-color: white !important;
  color: #808080;
  outline: none;
  margin: 5px 5% 10px;
  transition: 0.2s;
}

.fileUploadContainer .containerDisplay .containerDisplayItem {
  border-style: solid;
  border-color: #c6c9df;
  background: #ffffff;
  width: 44% !important;
  border-radius: 5px
}

.fileUploadContainer .containerDisplay .containerDisplayItem i {
  font-size: 0em !important;
  width: 100%;
}

.fileUploadContainer section
{
    margin-left: -25px;
}

.searchMatched
{
  font-style: italic;
}
.order-4::before{
  content: "\f160";
  font-family:'Font Awesome 5 Free';
  line-height:1.5;
  cursor:pointer;
  margin-left:5px !important;
}

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

.tooltip-custom .fa-info-circle {
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
    top: 0px !important;
    left: 0px !important;
    max-height: 0px !important;
}
/* Right Nav */

/* Sidebar collapsible styles */
.sidebar-container {
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: width, flex, max-width;
}

.sidebar-container.collapsed {
    width: auto !important;
    flex: 0 0 60px !important;
    max-width: 60px !important;
    min-width: 60px !important;
}

/* Toggle button styling */
.sidebar-container .sidebar-toggle {
    position: absolute;
    top: 10px;
    right: -0.2rem;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    border: 1px solid #e0e0e0;
}

.sidebar-container .sidebar-toggle i {
    font-size: 12px;
}

/* Main content adjustments */
.main-content-container {
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: width, flex, max-width;
}

.main-content-container.expanded {
    flex: 0 0 calc(100% - 3.75rem);
    max-width: calc(100% - 3.75rem);
}

/* Utility classes */
.hide-sideNav {
    display: none !important;
}

.show-sideNav {
    display: block !important;
    width: 100% !important;
}

/* Hide sidebar toggle icon in mobile view */
@media (max-width: 767px) {
    .sidebar-container .sidebar-toggle {
        display: none !important;
    }
}

/* Sidebar Main element - bold style */
#sidenav-main-font-weight-bolder {
    font-weight: 600 !important;
}

/* Pagination styles */
.react-bootstrap-table-pagination-total {
    margin-right: 10px !important;
}
.hide-ux-header {
    display: none !important;
}
.checkboxGroupCustomMargin {
     margin-left: -15px !important;
}
.custom-narrative-file-upload {
    margin-left: -14px !important;
}

.caret-4-desc,
.caret-4-asc {
    display: inline;
}

.order-4 {
    display: inline;
   
}

.docViewer-border {
    border: solid 0.125rem !important;
    padding: 1.25rem !important
}
.ux-document-viewer-wrapper.custom-docviewer-wrapper {
    aspect-ratio: auto !important;
    width: 100% !important;
}

/* The vendor viewer forces overflow-y:hidden on #pdf-pages-wrapper whenever
   paginated (single-page) mode is active, so a page taller than the viewport
   is clipped with no way to reach the rest. Allow vertical scroll in both
   paginated and continuous-scroll modes, and block horizontal scroll instead. */
.ux-document-viewer-wrapper.custom-docviewer-wrapper #pdf-pages-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* react-pdf wraps each page's canvas in .react-pdf__Page with an inline pixel
   width matching the (oversized) fit-to-container-width calculation. Shrink
   that wrapper to match its content instead of letting it stay full width,
   and cap the canvas to the container's width only (not height), so pages
   render at a legible width and any extra height is reached by scrolling. */
.ux-document-viewer-wrapper.custom-docviewer-wrapper .react-pdf__Page {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.ux-document-viewer-wrapper.custom-docviewer-wrapper .react-pdf__Page canvas {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

.datatable-header-non-sortable-align {
    vertical-align: top !important;
}

.awd-modal-styles {
    max-height: 'none';
    overflow: 'visible';
    max-width: '90vh';
    width: '90vh'
}

/* Footer modal header - keep title and close icon on the same line */
.footer-modal-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-modal-header h3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.footer-modal-header .ux-btn {
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}

.footer-modal-header .fa-times-circle {
    margin-bottom: 0 !important;
}

.awd-datatable-styles {
    table-layout: 'fixed';
    width: '100vh'
}

#SearchPreviousScreenRecords .ux-label-required {
    display: none;
}


/**
 * CSS-driven Sidebar Visibility
 * Automatically hides sidebar when no items are available
 * Uses data-has-sidebar attribute set by Sidebar component
 * OPTIMIZED: No transitions on initial load for instant rendering (0ms delay)
 */
/* Only apply transitions AFTER page is fully loaded (for smooth collapse/expand animations) */
body.page-loaded .main-content-container {
    transition: width 0.2s ease, opacity 0.15s ease;
}
/* Hide sidebar container when no items available */
body[data-has-sidebar='false'] .sidebar-container {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}
/* Expand main content to full width when sidebar is hidden */
body[data-has-sidebar='false'] .main-content-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}
/* Hide sidebar toggle button when no sidebar */
body[data-has-sidebar='false'] .sidebar-toggle {
    display: none !important;
}
/* Adjust grid columns for dashboard layout */
body[data-has-sidebar='false'] .hide-sidebar {

    display: none;
}
body[data-has-sidebar='false'] .extend-mainContent {

    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}
/* Ensure instant layout on load - transitions only after page loaded */
body.page-loaded .ux-page,
body.page-loaded .ux-row-center {
    transition: width 0.2s ease, opacity 0.15s ease;
}

/* ============================================
   Accessibility Fixes for Generate Audit Appointment Letter
   ============================================ */


/* Employer Address fieldset styling - Issue 3 fix */
.employer-address-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.employer-address-legend {
    font-size: 1.25rem;
    font-weight: 600;
    color: #25272d;
    padding: 0;
    margin-bottom: 1rem;
    width: 100%;
}

#file-name{
    display: none;
}