@font-face {
    font-family: 'Gibson';
    src: url('../fonts/gibson-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gibson';
    src: url('../fonts/Gibson-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Gibson';
    src: url('../fonts/gibson-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gibson';
    src: url('../fonts/Gibson-LightIt.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Gibson';
    src: url('../fonts/gibson-semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Gibson';
    src: url('../fonts/Gibson-SemiboldIt.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Gibson';
    src: url('../fonts/gibson-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gibson';
    src: url('../fonts/Gibson-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/* Container Width Override - Increase from Bootstrap's default 1140px */
@media (min-width: 1200px) {
  .container {
    max-width: 1300px;
  }
}

body{
    font-family: 'Gibson', Arial, Helvetica, sans-serif;
    font-style: normal;
    padding: 0px;
    height: 100%;
    margin: 0;
}

#page{
   padding-top: 5rem;
}
#header{
    background: white;
    margin:0;
    /*height:55px;*/
    width:100%;
}


.navbar-brand {
    color:#ccc;
    vertical-align: baseline;
}
.navbar-brand img{
    vertical-align: baseline;
    margin-right:20px;
}

.navbar-header .navbar-toggle:hover,
.navbar-header .navbar-toggle:focus{
    color: #fff;
    background-color: #1ad6f5;
}



#navbar li > a, .navbar-brand{
    text-decoration:none;
    font-family: 'Gibson', Helvetica, Arial, Geneva, Verdana, sans-serif;
}
/*

#navbar.navbar-collapse.in,
#navbar.navbar-collapse.collapsing  {
    border: 1px solid #333;
    background-color:white;

}


#navbar.navbar-collapse.in  ul li  a,
#navbar.navbar-collapse.collapsing ul li  a {
    color: #777;
}

#navbar.navbar-collapse.in ul li a:hover,
#navbar.navbar-collapse.collapsing ul li  a:hover,
#navbar.navbar-collapse.in ul li.active a,
#navbar.navbar-collapse.collapsing ul li.active a {
    color: white;
}


#navbar .nav li.active a {
  color: #fff;
  background-color: #1ad6f5;
}

#navbar li:hover,
#navbar li:focus {
  color: #fff;
  background-color: #1ad6f5;
}

/* Custom Button Styles */
.btn {
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 8px 18px;
  border-radius: 4px;
  border: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  word-wrap: break-word;
}

/* Primary Button */
.btn-primary {
  background-color: #4C00FF;
  color: white;
  border: none;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #4C00FF;
  color: #00FCCC;
  border: none;
  outline: none;
  box-shadow: none;
}

.btn-primary:active {
  background-color: #4C00FF;
  color: #00FCCC;
  border: none;
  box-shadow: none;
}

/* Secondary/Outline Button */
.btn-outline-secondary,
.btn-outline-dark {
  background-color: transparent;
  color: #4C00FF;
  border: 1px solid #4C00FF;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus {
  background-color: #4C00FF;
  color: #00FCCC;
  border-color: #4C00FF;
  outline: none;
  box-shadow: none;
}

.btn-outline-secondary:active,
.btn-outline-dark:active {
  background-color: #4C00FF;
  color: #00FCCC;
  border-color: #4C00FF;
  box-shadow: none;
}

/* Light Button */
.btn-light {
  background-color: #f8f9fa;
  color: #4C00FF;
  border: 1px solid #dee2e6;
}

.btn-light:hover,
.btn-light:focus {
  background-color: #4C00FF;
  color: #00FCCC;
  border-color: #4C00FF;
  outline: none;
  box-shadow: none;
}

.btn-light:active {
  background-color: #4C00FF;
  color: #00FCCC;
  border-color: #4C00FF;
  box-shadow: none;
}

/* Disabled state */
.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn:disabled:hover,
.btn.disabled:hover {
  color: inherit;
  background-color: inherit;
  border-color: inherit;
}

/* Pagination Button Styles */
.pagination .page-link {
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 8px 18px;
  border-radius: 4px;
  border: 1px solid #4C00FF;
  background-color: transparent;
  color: #4C00FF;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in-out;
}

.pagination .page-link:hover,
.pagination .page-link:focus {
  background-color: #4C00FF;
  color: #00FCCC;
  border-color: #4C00FF;
  outline: none;
  box-shadow: none;
  text-decoration: none;
}

.pagination .page-item.active .page-link {
  background-color: #4C00FF;
  color: white;
  border-color: #4C00FF;
}

.pagination .page-item.active .page-link:hover {
  color: #00FCCC;
}

.pagination .page-item.disabled .page-link {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: transparent;
  color: #6c757d;
  border-color: #dee2e6;
}

.pagination .page-item.disabled .page-link:hover {
  background-color: transparent;
  color: #6c757d;
  border-color: #dee2e6;
}

/* Upload Button Styles - Match Browse Uploaded Files Style */
.ax-button {
  font-family: 'Gibson', Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
  border: 1px solid #4C00FF !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  word-wrap: break-word !important;
  color: #4C00FF !important;
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  margin-top: 4px;
  margin-right: 4px;
  margin-bottom: 5px;
  position: relative;
  vertical-align: middle;
}

/* Add Files Button */
.ax-browse-c {
  background-color: transparent !important;
  background: transparent !important;
  color: #4C00FF !important;
  border: 1px solid #4C00FF !important;
}

.ax-browse-c:hover {
  background-color: #4C00FF !important;
  background: #4C00FF !important;
  color: #00FCCC !important;
  border-color: #4C00FF !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Start Upload Button */
.ax-upload-all {
  background-color: transparent !important;
  background: transparent !important;
  color: #4C00FF !important;
  border: 1px solid #4C00FF !important;
}

.ax-upload-all:hover {
  background-color: #4C00FF !important;
  background: #4C00FF !important;
  color: #00FCCC !important;
  border-color: #4C00FF !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Remove All Button */
.ax-clear {
  background-color: transparent !important;
  background: transparent !important;
  color: #4C00FF !important;
  border: 1px solid #4C00FF !important;
}

.ax-clear:hover {
  background-color: #4C00FF !important;
  background: #4C00FF !important;
  color: #00FCCC !important;
  border-color: #4C00FF !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Individual file action buttons */
.ax-remove,
.ax-upload {
  background-color: transparent !important;
  background: transparent !important;
  color: #4C00FF !important;
  border: 1px solid #4C00FF !important;
  filter: none !important;
}

.ax-remove:hover,
.ax-upload:hover,
.ax-abort:hover {
  background-color: #4C00FF !important;
  background: #4C00FF !important;
  color: #00FCCC !important;
  border-color: #4C00FF !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Disabled upload buttons */
.ax-disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.ax-disabled:hover {
  color: white !important;
  background-color: #4C00FF !important;
  opacity: 0.6 !important;
}

/* Breadcrumb Styles */
.breadcrumb {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1rem;
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.breadcrumb-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #4C00FF;
  text-decoration: none;
}

.breadcrumb-item a {
  color: #4C00FF;
  text-decoration: none;
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  word-wrap: break-word;
  display: flex;
  justify-content: center;
  align-items: center;
}

.breadcrumb-item a:hover {
  color: #4C00FF;
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #00003A;
}

.breadcrumb-item.active a {
  color: #00003A;
}

/* Breadcrumb separators */
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: #00003A;
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10px;
  margin-left: 0;
  padding: 0;
}

/* Override Bootstrap breadcrumb styles */
.breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
}

.breadcrumb ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dropdown Styles */
.dropdown-menu {
  background: white;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30);
  border-radius: 10px;
  border: none;
  padding: 0;
  margin-top: 0.5rem;
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  min-width: 320px;
}

.dropdown-item {
  padding: 12px 24px;
  color: #00003A;
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  word-wrap: break-word;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  height: 48px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  transition: background-color 0.2s ease-in-out;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(76, 0, 255, 0.1);
  color: #00003A;
  text-decoration: none;
  outline: none;
}

.dropdown-item:active {
  background-color: rgba(76, 0, 255, 0.2);
  color: #00003A;
}

/* First and last dropdown items border radius */
.dropdown-item:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.dropdown-item:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Dropdown dividers */
.dropdown-divider {
  border-top: 1px solid rgba(0, 0, 58, 0.1);
  margin: 0;
}

/* Form Select Dropdown Styles */
select.form-control,
.form-select {
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #00003A;
  background-color: white;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 12px 24px;
  height: 48px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30);
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

select.form-control:focus,
.form-select:focus {
  border-color: #4C00FF;
  box-shadow: 0 0 0 0.2rem rgba(76, 0, 255, 0.25);
  outline: none;
  color: #00003A;
}

select.form-control option,
.form-select option {
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #00003A;
  padding: 12px 24px;
}

/* dlpxUpload Header Styles */
.dlpxUpload-header {
  width: 100%;
  background: white;
  border-bottom: 1px solid rgba(87, 97, 107, 0.13);
  padding: 12px 24px;
  position: fixed;
  top: 0;
  z-index: 1030;
  box-shadow: none;
}

.dlpxUpload-header-content {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

/* Left side: Logo + App Name */
.dlpxUpload-header-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

.dlpxUpload-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.dlpxUpload-logo-img {
  height: 48px;
  width: auto;
}

.dlpxUpload-app-name {
  color: #00003A;
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dlpxUpload-app-name:hover {
  color: #00003A;
  text-decoration: none;
}

/* Center: Navigation Links */
.dlpxUpload-header-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex: 1;
}

/* Right side: Login Section */
.dlpxUpload-header-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Navigation Links */
.dlpxUpload-nav-link {
  color: #00003A;
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: color 0.2s ease-in-out;
}

.dlpxUpload-nav-link:hover {
  color: #4C00FF;
  text-decoration: none;
}

/* dlpxUpload Buttons */
.dlpxUpload-btn {
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 8px 18px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease-in-out;
  border: none;
  cursor: pointer;
  word-wrap: break-word;
  text-align: center;
}

/* Outline Button */
.dlpxUpload-btn-outline {
  color: #00003A;
  background: transparent;
  outline: 1px solid #00003A;
  outline-offset: -1px;
}

.dlpxUpload-btn-outline:hover {
  color: #4C00FF;
  background: transparent;
  outline-color: #4C00FF;
  text-decoration: none;
}

/* Primary Button */
.dlpxUpload-btn-primary {
  color: white;
  background: #4C00FF;
  border: none;
}

.dlpxUpload-btn-primary:hover {
  color: #00FCCC;
  background: #4C00FF;
  text-decoration: none;
}

/* Mobile Toggle */
.dlpxUpload-mobile-toggle {
  display: none;
  background: none;
  border: 1px solid #00003A;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
}

.dlpxUpload-mobile-toggle-icon {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #00003A;
  border-radius: 1px;
  position: relative;
}

.dlpxUpload-mobile-toggle-icon:before,
.dlpxUpload-mobile-toggle-icon:after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background-color: #00003A;
  border-radius: 1px;
  position: absolute;
  left: 0;
}

.dlpxUpload-mobile-toggle-icon:before {
  top: -6px;
}

.dlpxUpload-mobile-toggle-icon:after {
  top: 6px;
}

/* Dropdown styles for header */
.dlpxUpload-user-dropdown,
.dlpxUpload-login-dropdown {
  position: relative;
  display: inline-block;
}

.dlpxUpload-dropdown-toggle::after {
  content: '';
  margin-left: 8px;
  border: 4px solid transparent;
  border-top: 4px solid #00003A;
  display: inline-block;
  vertical-align: middle;
}

.dlpxUpload-btn-primary.dlpxUpload-dropdown-toggle::after {
  border-top-color: white;
}

/* Mobile Menu Styles */
.dlpxUpload-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid rgba(87, 97, 107, 0.13);
  padding: 12px 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1020;
}

.dlpxUpload-mobile-menu.collapse.show {
  display: block;
}

.dlpxUpload-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(87, 97, 107, 0.13);
}

.dlpxUpload-mobile-login {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .dlpxUpload-mobile-toggle {
    display: block;
  }

  .dlpxUpload-header-center,
  .dlpxUpload-header-right {
    display: none;
  }

  .dlpxUpload-mobile-menu .dlpxUpload-nav-link {
    padding: 12px 0;
    justify-content: flex-start;
    border-radius: 0;
  }

  .dlpxUpload-mobile-menu .dlpxUpload-btn {
    margin-top: 8px;
    justify-content: center;
  }
}

/* Upload Button Icons - Replace with new SVGs */
.ax-plus-icon {
  background: url('/img/Add-Circle-Bold--Streamline-Ultimate.svg') no-repeat center !important;
  background-size: 16px 16px !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  /* Filter to change black SVG to purple (#4C00FF) */
  filter: invert(21%) sepia(100%) saturate(7500%) hue-rotate(267deg) brightness(98%) contrast(106%) !important;
}

.ax-upload-icon {
  background: url('/img/Upload-Circle--Streamline-Ultimate.svg') no-repeat center !important;
  background-size: 16px 16px !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  /* Filter to change black SVG to purple (#4C00FF) */
  filter: invert(21%) sepia(100%) saturate(7500%) hue-rotate(267deg) brightness(98%) contrast(106%) !important;
}

.ax-clear-icon {
  background: url('/img/Delete-2--Streamline-Ultimate.svg') no-repeat center !important;
  background-size: 16px 16px !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  /* Filter to change black SVG to purple (#4C00FF) */
  filter: invert(21%) sepia(100%) saturate(7500%) hue-rotate(267deg) brightness(98%) contrast(106%) !important;
}

/* Hover state - Change icons to cyan (#00FCCC) */
.ax-browse-c:hover .ax-plus-icon,
.ax-upload-all:hover .ax-upload-icon,
.ax-clear:hover .ax-clear-icon,
.ax-upload:hover .ax-upload-icon,
.ax-remove:hover .ax-clear-icon {
  /* Filter to change SVG to cyan (#00FCCC) */
  filter: invert(84%) sepia(59%) saturate(2962%) hue-rotate(120deg) brightness(106%) contrast(101%) !important;
}

/* File Preview Container Icon - Replace with Office-File-Graph SVG */
.ax-prev-container {
  float: left !important;
  height: 50px !important;
  width: 60px !important;
  display: inline-block !important;
  background: url('/img/Office-File-Graph--Streamline-Ultimate.svg') no-repeat center !important;
  background-size: 32px 32px !important;
  /* Filter to change black SVG to purple (#4C00FF) */
  filter: invert(21%) sepia(100%) saturate(7500%) hue-rotate(267deg) brightness(98%) contrast(106%) !important;
  transition: filter 0.2s ease-in-out !important;
}

/* Custom Alert Info Styles */
.alert-info {
  color: #000000;
  background-color: rgba(113, 20, 255, 0.19);
  border-color: #7115ff;
}

/* Custom dlpxUpload Checkbox Styles */
.dlpxUpload-checkbox-wrapper {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.dlpxUpload-checkbox-container {
  padding-top: 4px;
  padding-bottom: 4px;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.dlpxUpload-checkbox-icon {
  position: relative;
  width: 16px;
  height: 16px;
  background-image: url('/img/checkbox-unchecked.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Hide the actual checkbox input */
input[type="checkbox"].dlpxUpload-checkbox {
  position: absolute;
  opacity: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* Checked state */
input[type="checkbox"].dlpxUpload-checkbox:checked + .dlpxUpload-checkbox-icon {
  background-image: url('/img/checkbox-checked.svg');
}

/* Focus state for accessibility */
input[type="checkbox"].dlpxUpload-checkbox:focus + .dlpxUpload-checkbox-icon {
  outline: 2px solid #4C00FF;
  outline-offset: 2px;
}

/* Standard checkbox replacement - applies to all checkboxes */
input[type="checkbox"] {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  background-image: url('/img/checkbox-unchecked.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  margin: 0;
  vertical-align: middle;
}

input[type="checkbox"]:checked {
  background-image: url('/img/checkbox-checked.svg');
}

input[type="checkbox"]:focus {
  outline: 2px solid #4C00FF;
  outline-offset: 2px;
}

/* Custom dlpxUpload Progress Bar Styles - SVG Line Style */
.ax-progress {
  position: relative;
  width: 100%;
  height: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin-top: 15px;
  padding: 0;
  float: left;
  overflow: visible; /* Allow rounded caps to show */
}

/* Background track - SVG line style with rounded caps */
.ax-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #CCD7E2;
  border-radius: 5px; /* Creates rounded line caps like SVG stroke-linecap="round" */
  z-index: 1;
}

/* Progress bar fill - SVG line style with rounded caps */
.ax-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 0%;
  background: #DF9C0C; /* Orange for in-progress */
  border-radius: 5px; /* Creates rounded line caps like SVG stroke-linecap="round" */
  z-index: 2;
  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
  background-image: none !important; /* Remove the old loader.gif */
  min-width: 10px; /* Ensure rounded caps are visible even at low percentages */
}

/* Complete state - green like dlpxUpload */
.ax-progress.complete .ax-progress-bar,
.ax-progress-bar.complete {
  background: #379E2E; /* Green for complete - exact dlpxUpload color */
}

/* Progress info text - positioned below the progress bar */
.ax-progress-info {
  position: absolute;
  top: 15px; /* Below the 10px height progress bar */
  left: 0;
  width: 100%;
  height: auto;
  font-family: 'Gibson', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #00003A;
  text-align: left;
  z-index: 3;
  overflow: visible;
}

/* Error state - red */
.ax-progress.error .ax-progress-bar,
.ax-progress-bar.error {
  background: #DC3545; /* Red for error */
}

/* Ensure very small percentages still show rounded caps */
.ax-progress-bar[style*="width: 0%"],
.ax-progress-bar[style*="width: 1%"],
.ax-progress-bar[style*="width: 2%"],
.ax-progress-bar[style*="width: 3%"],
.ax-progress-bar[style*="width: 4%"],
.ax-progress-bar[style*="width: 5%"] {
  min-width: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ax-progress {
    width: 100%;
    margin-top: 10px;
  }
  
  .ax-progress-info {
    font-size: 12px;
    top: 12px;
  }
}