.btn-orange{
  background: #ff4500;
  color: #fff;
}

.btn-orange:hover{
  background: #ff4500bd;
  color: #fff;
}

.btn-red{
  background: red;
  color: #fff;
}

.btn-red:hover{
  background: rgb(245 71 71);
  color: #fff;
}

input:not(:placeholder-shown) ~ label {
  transform: translateY(-1.25rem) translateY(0.1rem) scale(0.8);
}
.modal-dialog{
  height: 100%;
  align-content: center;
  place-items: center;
}
.modal-title{
  flex: 1;
}
.form-check-input[type=checkbox]{
  border-color: black;
}
.login-page-bg{
  background-image: url("/dist/img/bg-login.jpg");
  background-color: #cccccc;
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover; 
}
.header_logo{
  max-width: 200px;
}
span.required {
  color: red;
  font-weight: bold;
}
#toast-container {
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 9999;
}

#loginForm input{
  border-radius: 0%;
}

/* Login / Forgot / Reset Password field errors — same size & color */
#loginForm #emailError,
#loginForm #passwordError,
#forgetForm #forget_error,
#authForm #error,
#resetForm #password_error,
#resetForm #confirm_password_error,
.login-field-error {
  color: red !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  display: block;
  margin-top: 0.25rem;
}

.is-invalid, .is-invalid ~ .select2 .select2-selection{
  border-color: #000 !important;
}


 .toast-message {
   background: #28a745;
   color: #fff;
   padding: 12px 20px;
   border-radius: 6px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   margin-bottom: 10px;
   animation: fadeInOut 3s ease-in-out forwards;
 }

 .toggle-password {
  position: absolute;
  top: 23px;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
  color: #6c757d;
}

.toggle-password:hover {
  color: #000;
}

/* Import modal sample download links � no black focus ring on click */
.download-link:focus,
.download-link:focus-visible,
.download-link:active,
.modal-actions a:focus,
.modal-actions a:focus-visible,
.modal-actions a:active,
.modal-box a:focus,
.modal-box a:focus-visible,
.modal-box a:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Bootstrap autofocuses the first field (file input) — hide that “already clicked” ring */
#importModal input[type="file"]:focus:not(:focus-visible),
#importpopup input[type="file"]:focus:not(:focus-visible),
#csvModal input[type="file"]:focus:not(:focus-visible),
.modal-box input[type="file"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
@media screen and (min-width: 480px) {
   .mw-sm-100 {
    /* max-width: 100%; */
  }
}

/* -------------------------------------------------------------------------- */
/* Global Tom Select (all modules): value + caret flush at end of text        */
/* -------------------------------------------------------------------------- */
.ts-wrapper.single .ts-control {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
  gap: 0 !important;
  column-gap: 0 !important;
}

.ts-wrapper.single .ts-control > .item {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  order: 1;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit;
  white-space: nowrap;
}

.ts-wrapper.single .ts-control > input {
  position: static !important;
  left: auto !important;
  order: 2;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  letter-spacing: 0 !important;
}

/* Hide leftover placeholder beside selected value */
.ts-wrapper.single.has-items .ts-control > input::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

/*
 * After select (dropdown closed): hide search caret � only selected label shows.
 * While dropdown is open, search input stays visible (see rules below).
 */
.ts-wrapper.single.has-items:not(.dropdown-active) .ts-control > input {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
  caret-color: transparent !important;
  pointer-events: none;
  z-index: 2;
}

/* While searching: full-width input, hide chip */
.ts-wrapper.single.dropdown-active .ts-control > .item,
.ts-wrapper.single .ts-control input:not(:placeholder-shown) ~ .item {
  visibility: hidden;
  position: absolute !important;
  pointer-events: none;
}

.ts-wrapper.single.dropdown-active .ts-control > input {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  flex: 1 1 auto !important;
  min-width: 60px !important;
  width: auto !important;
  max-width: none !important;
}

/* Attachments: same field design as Budget form (black border, flat Choose file button) */
input#attachments[type="file"],
input[name="attachments"][type="file"] {
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: normal !important;
  color: #303030 !important;
  background-color: #fff !important;
  display: block;
}

input#attachments[type="file"]::file-selector-button,
input[name="attachments"][type="file"]::file-selector-button,
input#attachments[type="file"]::-webkit-file-upload-button,
input[name="attachments"][type="file"]::-webkit-file-upload-button {
  margin: 0 8px 0 0;
  padding: 0 12px;
  height: 100%;
  font-size: 14px;
  box-sizing: border-box;
  vertical-align: middle;
  border-radius: 0 !important;
  border: 1px solid #767676;
  color: #000 !important;
  background-color: #efefef;
  cursor: pointer;
}

/* Long attachment names on detail pages */
.attachment-name {
  max-width: min(100%, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
  text-align: left;
}
/* Keep records-per-page (and similar) dropdown hover bg inside rounded corners */
.dropdown-menu {
  --tblr-dropdown-padding-y: 0.25rem;
}

.dropdown-menu > .dropdown-item:first-child,
.dropdown-menu > .dropdown-record:first-child {
  border-top-left-radius: var(--tblr-dropdown-inner-border-radius, var(--tblr-border-radius, 0.25rem));
  border-top-right-radius: var(--tblr-dropdown-inner-border-radius, var(--tblr-border-radius, 0.25rem));
}

.dropdown-menu > .dropdown-item:last-child,
.dropdown-menu > .dropdown-record:last-child {
  border-bottom-left-radius: var(--tblr-dropdown-inner-border-radius, var(--tblr-border-radius, 0.25rem));
  border-bottom-right-radius: var(--tblr-dropdown-inner-border-radius, var(--tblr-border-radius, 0.25rem));
}

/* Page-size menus have no arrow; clip hover bg to the menu box */
.card-footer .dropdown-menu,
.bot_cont .dropdown-menu,
.pagination-container .dropdown-menu {
  overflow: hidden;
}

/* Form field rows across modules: top-align; empty errors take no space */
.form-wrapper form,
.form-wrapper .three-grid,
.form-wrapper .two-grid,
.form-wrapper .four-grid,
.form-wrapper .tab-pane:not(.table-responsive),
.transaction-form .two-grid,
.transaction-form .four-grid {
  align-items: start;
}

.form-wrapper .error:empty,
.transaction-form .error:empty,
.card-body .error:empty {
  display: none;
  margin: 0;
}

/* Add Comment modal - Notify Users: "Select or Search" on the left */
#commentForm #multi-select .select2-container,
.modal #multi-select .select2-container {
  width: 100% !important;
}
#commentForm #multi-select .select2-container--default .select2-selection--multiple,
.modal #multi-select .select2-container--default .select2-selection--multiple {
  position: relative !important;
  min-height: 36px !important;
  height: 36px !important;
  max-height: 36px !important;
  padding: 0 28px 0 8px !important;
  box-sizing: border-box !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  direction: ltr !important;
}
#commentForm #multi-select .select2-container--default .select2-selection--multiple:has(.select2-selection__choice),
.modal #multi-select .select2-container--default .select2-selection--multiple:has(.select2-selection__choice) {
  height: auto !important;
  max-height: none !important;
  min-height: 36px !important;
  overflow-y: auto !important;
  padding: 2px 28px 2px 8px !important;
}
/* Keep chips + × above the search field so remove works after select.
   Match Select2 4.1 / eShop Assign To chip look (gray chip, × with right divider). */
#commentForm #multi-select .select2-selection__choice,
.modal #multi-select .select2-selection__choice {
  position: relative !important;
  z-index: 3 !important;
  float: left !important;
  pointer-events: auto !important;
  display: inline-block !important;
  align-items: unset !important;
  gap: 0 !important;
  margin: 2px 4px 2px 0 !important;
  padding: 0 0 0 20px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  max-width: 100% !important;
  background-color: #e4e4e4 !important;
  border: 1px solid #aaa !important;
  border-radius: 4px !important;
  color: #444 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: bottom !important;
}
#commentForm #multi-select .select2-selection__choice__display,
.modal #multi-select .select2-selection__choice__display {
  cursor: default !important;
  padding-left: 2px !important;
  padding-right: 5px !important;
}
#commentForm #multi-select .select2-selection__choice__remove,
.modal #multi-select .select2-selection__choice__remove,
#commentForm #multi-select button.select2-selection__choice__remove,
.modal #multi-select button.select2-selection__choice__remove {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 4 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-block !important;
  width: auto !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: none !important;
  border-right: 1px solid #aaa !important;
  border-radius: 0 !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #999 !important;
  font-size: 1em !important;
  font-weight: bold !important;
  line-height: 1.6 !important;
  float: none !important;
}
#commentForm #multi-select .select2-selection__choice__remove:hover,
.modal #multi-select .select2-selection__choice__remove:hover,
#commentForm #multi-select button.select2-selection__choice__remove:hover,
.modal #multi-select button.select2-selection__choice__remove:hover,
#commentForm #multi-select .select2-selection__choice__remove:focus,
.modal #multi-select .select2-selection__choice__remove:focus,
#commentForm #multi-select button.select2-selection__choice__remove:focus,
.modal #multi-select button.select2-selection__choice__remove:focus {
  background-color: #f1f1f1 !important;
  color: #333 !important;
  outline: none !important;
  border-color: transparent !important;
  border-right-color: #aaa !important;
}
#commentForm #multi-select .select2-selection--multiple:has(.select2-selection__choice) .select2-search--inline,
.modal #multi-select .select2-selection--multiple:has(.select2-selection__choice) .select2-search--inline {
  float: left !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
}
/* #commentForm #multi-select .select2-selection--multiple:has(.select2-selection__choice) .select2-search__field,
.modal #multi-select .select2-selection--multiple:has(.select2-selection__choice) .select2-search__field,
#commentForm #multi-select .select2-selection--multiple:has(.select2-selection__choice) textarea.select2-search__field,
.modal #multi-select .select2-selection--multiple:has(.select2-selection__choice) textarea.select2-search__field {
  display: inline-block !important;
  width: 0.75em !important;
  min-width: 0.75em !important;
  max-width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  line-height: 28px !important;
} */
#commentForm #multi-select .select2-selection__rendered,
.modal #multi-select .select2-selection__rendered {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
#commentForm #multi-select .select2-selection__clear,
.modal #multi-select .select2-selection__clear {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  float: none !important;
  margin: 0 !important;
  z-index: 2;
}
#commentForm #multi-select .select2-search--inline,
.modal #multi-select .select2-search--inline {
  float: none !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
#commentForm #multi-select .select2-search__field,
.modal #multi-select .select2-search__field,
#commentForm #multi-select textarea.select2-search__field,
.modal #multi-select textarea.select2-search__field {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  line-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-sizing: border-box !important;
  resize: none !important;
  overflow: hidden !important;
  text-align: left !important;
  direction: ltr !important;
  font-size: 14px !important;
}
#commentForm #multi-select .select2-search__field::placeholder,
.modal #multi-select .select2-search__field::placeholder {
  text-align: left !important;
  opacity: 1;
  color: #6b7280;
}
#commentForm #multi-select .select2-search__field:placeholder-shown,
.modal #multi-select .select2-search__field:placeholder-shown {
  width: 100% !important;
}

/* Comment modal Select2: dropdown is on body (fixed under field) — keep above modal */
body > .select2-container--open {
  z-index: 2000 !important;
}
body > .select2-container--open .select2-dropdown {
  z-index: 2001 !important;
}
#add_new.modal {
  overflow-x: hidden;
  overflow-y: auto;
}