.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
  border: 1px solid transparent;
  min-width: 10px;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 99999px
}

.badge.badge-edge {
  border-radius:0px
}

.badge.badge-default {
  background-color: #f5f5f5;
  color:#474747;
  border:1px solid #474747;
}

.badge.badge-primary {
  /* background-color: #2196F3 */
  background-color: #d1e3fc;
  color:#0b489c;
  border:1px solid #0b489c;
}

.badge.badge-secondary {
  background-color: #323a45
}

.badge.badge-success {
  background-color: #d8ffd8;
  color:#80c880;
  border:1px solid #80c880;
}

.badge.badge-warning {
  background-color: #fff1d8;
  color:#9d6600 ;
  border: 1px solid #9d6600;
}

.badge.badge-info {
  background-color: #29B6F6
}

.badge.badge-danger {
  background-color: #ffd4c4;
  color:#d2582b ;
  border:1px solid #d2582b;
}

.badge.badge-outlined {
  background-color: transparent
}

.badge.badge-outlined.badge-default {
  border-color: #B0BEC5;
  color: #B0BEC5
}

.badge.badge-outlined.badge-primary {
  border-color: #2196F3;
  color: #2196F3
}

.badge.badge-outlined.badge-secondary {
  border-color: #323a45;
  color: #323a45
}

.badge.badge-outlined.badge-success {
  border-color: #008925;
  color: #008925
}

.badge.badge-outlined.badge-warning {
  border-color: #ffae00;
  color: #ffae00
}

.badge.badge-outlined.badge-info {
  border-color: #29B6F6;
  color: #29B6F6
}

.badge.badge-outlined.badge-danger {
  border-color: #ef1c1c;
  color: #ef1c1c
}

.badge.badge-unbold{
  font-weight: unset !important;
  border-radius: 99999px !important;
  font-size: 0.65rem !important;
}

.badge.badge-pastelblue {
  background-color: #ffc559 !important;
}

.badge.badge-pastelorange {
  background-color: #efd199 !important;
  color: #a9771b;
  border: 1px solid #a9771b;
}

.badge.badge-outlined.badge-success.badge-pill {
  border-color: rgba(69, 152, 16, 0.8);
  color: rgba(69, 152, 16, 0.8);
  background-color: #eefce6;
  padding: 5px 10px;
  border-radius: 99999px;
  font-size: 85%;
}

.badge.badge-outlined.badge-danger.badge-pill {
  border-color: rgba(239, 28, 28, 0.8);
  color: rgba(239, 28, 28, 0.8);
  background-color: #fde6e6;
  padding: 5px 10px;
  border-radius: 99999px;
  font-size: 85%;
}

.badge-opacity-25 {
  --bs-bg-opacity: 0.25;
}

.badge-opacity-50 {
  --bs-bg-opacity: 0.5;
}

.brand-logo {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
}

.separator {
  margin-top: 5px;
  border-top: 1px dashed #F4F4F4;
}

.vertical-separator {
  border-left: 2px dashed #F4F4F4;
}

.title-calendar {
  color: #222d43;
  margin-bottom: 0px;
}

.wizard {
  margin-left: 30px;
  position: relative;
  }
  
.v-line {
  width: 1px;
  background-color: #a3b6f2;
  position: absolute;
  margin-left: -15px;
  margin-top: 20px;
  height: 93%;
}
  
.step {
  padding: 15px 0;
  position: relative;
  &:before {
      content: "";
      display: block;
      width: 11px;
      height: 11px;
      border-radius: 20px;
      position: absolute;
      margin-left: -20px;
      top: 17px;
  }
}

.step.step-color-original {
  &:before {
      background-color: #a3b6f2;
  }
}

.step.step-color-default {
  &:before {
      background-color: #B0BEC5;
  }
}

.step.step-color-primary {
  &:before {
      background-color: #2196F3;
  }
}

.step.step-color-secondary {
  &:before {
      background-color: #323a45;
  }
}

.step.step-color-success {
  &:before {
      background-color: #008925;
  }
}

.step.step-color-warning {
  &:before {
      background-color: #ffae00;
  }
}

.step.step-color-info {
  &:before {
      background-color: #29B6F6;
  }
}

.step.step-color-danger {
  &:before {
      background-color: #ef1c1c;
  }
}

.select-firm-user-notification {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: .76563rem;
}

.modal-note {
  max-height: 150%;
}

.modal-600 {
  max-width: 600px !important;
}

/* Hide the caret icon from the dropdown button */
.no-caret::after {
  display: none;
}

.report-section {
  scroll-margin-top: 80px;
}

.breadcrumb-item {
  max-width: 300px; /* Adjust as needed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Summernote */
.note-editable p {
  margin: 2px 0;
}

.note-editable ul, .note-editable ol {
  margin-left: -14px !important;
}

/* Dropdown item at the header */
.title {
  font-size: 0.8rem;
}

/* Custom Width */
.w-5 {
  width: 5% !important;
}

/* Ribbon */
.ribbon {
  --f: 15px; /* control the folded part */
  
  position: absolute;
  top: 0;
  color: #fff;
  padding: .3em 4em;
  background: var(--c,#45ADA8);
  border-bottom :var(--f) solid #0007;
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px))
}

.right {
  right: 0;
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
}

.left {
  left: 0;
  transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
}

/* Notification Page */
#otpModal .modal-content {
    background-color: rgba(255, 255, 255, 0.85);
}

#sessionExpiredModal .modal-content {
    background-color: rgba(255, 255, 255, 0.85);
}

.countdown-timer {
    font-weight: bold;
    color: #dc3545;
}

.session-indicator {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 1000;
}

.otp-input {
    transition: all 0.2s ease;
    border: 2px solid #dee2e6;
}

.otp-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    transform: scale(1.05);
}

.otp-input.filled {
    background-color: #f8f9fa;
    border-color: #28a745;
}

.otp-input.error {
    border-color: #dc3545;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Fix for header shifting AND correct dropdown positioning */

/* Prevent body padding changes that cause header shift */
body {
    padding-right: 0 !important;
}

/* Prevent header from shifting */
.app-header {
    transition: none !important;
    transform: none !important;
}

.app-header .brand,
.app-header .menu,
.app-header .mobile-toggler {
    transition: none !important;
}

/* Override Bootstrap's scrollbar compensation */
body.modal-open {
    padding-right: 0 !important;
    overflow: auto !important;
}

/* Fix dropdown positioning - this is the key fix */
.dropdown-menu {
    position: absolute !important;
}

/* Specific fix for mobile Action button dropdown */
@media (max-width: 576px) {
    /* Ensure the mobile action dropdown aligns properly to the right */
    .d-block.d-sm-none .btn-group {
        position: relative;
    }
    
    .d-block.d-sm-none .btn-group .dropdown-menu {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: 100% !important;
        transform: none !important;
        margin-top: 0.125rem;
        min-width: 120px;
    }
    
    /* Alternative approach - use dropdown-menu-end class */
    .dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
    }
}

/* For larger screens, ensure dropdowns still work correctly */
@media (min-width: 577px) {
    .dropdown-menu-end {
        right: 0;
        left: auto;
    }
}

/* Fix for header dropdown notifications */
.app-header .dropdown-notification {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
}

/* Ensure all header dropdowns align properly */
.app-header .dropdown-menu {
    position: absolute !important;
}

.app-header .dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
}

/* Color */
.text-status-active {
    color: #61eb1e !important;
}