/* dynamic, static, outline */
/* I don't see any difference between dynamic and static tho */
/* I will add another new type input-group-inbox */

.input-group.input-group-inbox {
  position: relative;
}

.input-group.input-group-inbox .input-group-icon {
  position: absolute; 
  left: 0; 
  width: 62px; 
  height: 62px; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  color: #a1a1a1; 
  font-size: 28px;
  z-index: 3;
}

.input-group.input-group-inbox label {
  color: #a1a1a1; 
  position: absolute; 
  font-size: 16px; 
  margin-bottom: 0; 
  top: 20px; 
  left: 64px; 
  font-weight: normal;
  z-index: 3;
  transition: all .2s ease;
  pointer-events: none;
}

.input-group.input-group-inbox.is-focused label, .input-group.input-group-inbox.is-filled label {
  font-size: 12px;
  top: 12px;
}

.input-group.input-group-inbox input {
  height: 62px; 
  padding: 10px 12px; 
  padding-left: 62px; 
  padding-top: 28px; 
  color: black;
  z-index: 1;
}

.input-group.input-group-inbox input:focus {
  border-color: #369ef5;
  z-index: 2 !important;
}

.input-group.input-group-inbox .input-group-password-toggle {
  position: absolute; 
  z-index: 3; 
  top: 50%; 
  transform: translateY(-50%); 
  right: 16px; 
  font-size: 20px; 
  cursor: pointer;
  color: #a1a1a1;
}

.form-control {
  font-size: 14px;
}

.form-control:focus {
  border-color: rgba(var(--primary), 0.5);
}

.input-group .form-label {
  position: absolute;
  top: 0.6125rem;
  margin-left: 0px;
  transition: 0.2s;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 400 !important;
  margin-bottom: 0.5rem;
  color: rgb(115, 115, 115);
  margin-left: 0.25rem;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus, 
select:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover, 
textarea:-webkit-autofill:focus, 
textarea:-webkit-autofill:active {
  /* -webkit-background-clip: text;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px rgba(var(--primary), 0.1);
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0) inset !important;

  background-color: inherit !important;
  color: rgb(var(--primary-font-color)) !important;

  -webkit-animation: autofill 0s forwards;
  animation: autofill 0s forwards;

  -webkit-box-shadow: 0 0 50px rgba(255, 255, 255, 0) inset !important;
  background-color: transparent !important;
  background-clip: text;

  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset, 0 0 0px 1000px #ff000000 inset !important; */
  transition: background-color 5000s ease-in-out 0s !important;
}

input:-internal-autofill-selected {
  background-image: linear-gradient(0deg, rgb(var(--primary)) 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0) !important;
  background-color: transparent !important;
}

/* Select2 in input-group-dynamic */
.input-group.input-group-dynamic .select2 .select2-selection {
  background-color: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.input-group.input-group-dynamic .select2 .select2-selection .select2-selection__placeholder {
  display: none;
}

.select2-container .select2-dropdown {
  border-top: 1px solid #ced4da !important;
}

.select2-container .select2-selection--single .select2-selection__clear {
  padding-left: 0 !important;
  text-align: center !important;
}
/* End of Select2 in input-group-dynamic */

/* Validation */
.form-control.is-valid:focus, .form-control.is-invalid:focus {
  box-shadow: none !important;
}

.input-group:has(.form-control) .validation-message {
  display: none;
  color: rgb(var(--danger));
  font-size: 11px;
}

.input-group:has(.form-control.is-invalid) .validation-message {
  display: block;
}
/* End of Validation */

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

.input-group input:not(.select2-search__field), .input-group select {
  width: 100% !important;
}

.input-group input.select2-search__field {
  background: transparent;
}

.input-group .text-danger.field-validation-error {
  position: absolute;
  top: 100%;
}

.input-group .text-danger.field-validation-error span {
  font-size: 12px;
}

/* Checkbox */
.form-check {
  display: block;
  min-height: auto;
  padding-left: 1.73em;
  margin-bottom: .125rem;
}

.form-check-input {
  /* --bs-form-check-bg: #fff; */
  flex-shrink: 0;
  width: 1.23em;
  height: 1.23em;
  margin-top: .135em;
  vertical-align: top;
  background-color: var(--bs-form-check-bg);
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
  border: none;
  print-color-adjust: exact;
  transition: background-color .25s ease, border-color .25s ease, background-position .15s ease-in-out, opacity .15s ease-out, box-shadow .15s ease-in-out;
}

.form-check-input {
  -moz-appearance: none;
  appearance: none;
}

.form-check-input[type=checkbox], .form-check-label {
  cursor: pointer;
}

.form-check-input:checked {
  background-color: transparent;
  border-color: transparent;
}

.form-check-input[type=checkbox] {
  border-radius: .35rem;
}

.form-check .form-check-input {
  float: left;
  margin-left: -1.73em;
}

.form-check:not(.form-switch) .form-check-input {
  float: none !important;
  margin-left: auto !important;
}

.form-check-input:checked[type=checkbox], .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: linear-gradient(195deg, rgb(var(--primary-light)), rgb(var(--primary)));
}

.form-check:not(.form-switch) .form-check-input[type=checkbox] {
  background-image: none;
}

.form-check:not(.form-switch) .form-check-input[type=checkbox], .form-check:not(.form-switch) .form-check-input[type=radio] {
  border: 1px solid rgb(203.5, 203.5, 203.5);
  margin-top: .25rem;
  position: relative;
}

.form-check:not(.form-switch) .form-check-input[type=checkbox]:checked {
  background: rgb(var(--primary));
}

.form-check:not(.form-switch) .form-check-input[type=checkbox]:checked, .form-check:not(.form-switch) .form-check-input[type=radio]:checked {
  border-color: rgb(var(--primary));
}

.form-check:not(.form-switch) .form-check-input[type=checkbox]:after {
  transition: opacity .25s ease-in-out;
  font-family: "bootstrap-icons";
  content: "\F633";
  width: 100%;
  height: 100%;
  color: rgb(var(--primary-font-color));
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .67rem;
  opacity: 0;
}

.form-check:not(.form-switch) .form-check-input[type=checkbox]:checked:after {
  opacity: 1;
}

.form-check label {
  font-weight: normal !important;
  margin: 0.1rem 0 0.5rem 0.25rem;
}

.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: .5;
}
/* End of Checkbox */

/* ---------------------------------------------------------------- */

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
  
.input-group>.form-control,
.input-group>.form-select,
.input-group>.form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group>.form-control:focus,
.input-group>.form-select:focus,
.input-group>.form-floating:focus-within {
  z-index: 5;
}

.input-group .btn {
  position: relative;
  z-index: 2;
}

.input-group .btn:focus {
  z-index: 5;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: #262626;
  text-align: center;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid #d2d6da;
  border-radius: 0.375rem;
}

.input-group-lg>.form-control,
.input-group-lg>.form-select,
.input-group-lg>.input-group-text,
.input-group-lg>.btn {
  padding: 0.75rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
}

.input-group-sm>.form-control,
.input-group-sm>.form-select,
.input-group-sm>.input-group-text,
.input-group-sm>.btn {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  border-radius: 0.125rem;
}

.input-group-lg>.form-select,
.input-group-sm>.form-select {
  padding-right: 1rem;
}

.input-group:not(.has-validation)> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group.has-validation> :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),
.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,
.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: calc(1px * -1);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group>.form-floating:not(:first-child)>.form-control,
.input-group>.form-floating:not(:first-child)>.form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #66d432;
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #0a0a0a;
  background-color: rgba(102, 212, 50, 0.9);
  border-radius: 0.375rem;
}

.was-validated :valid~.valid-feedback,
.was-validated :valid~.valid-tooltip,
.is-valid~.valid-feedback,
.is-valid~.valid-tooltip {
  display: block;
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #66d432;
  padding-right: unset;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3e%3cpath fill='%2366d432' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: #66d432;
  box-shadow: 0 0 0 2px rgba(102, 212, 50, 0.25);
}

.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
  padding-right: unset;
  background-position: top 0.75rem right 0.75rem;
}

.was-validated .form-select:valid,
.form-select.is-valid {
  border-color: #66d432;
}

.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3e%3cpath fill='%2366d432' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  padding-right: 1rem;
  background-position: right 0 center, center right 1rem;
  background-size: 16px 12px, 1rem 1rem;
}

.was-validated .form-select:valid:focus,
.form-select.is-valid:focus {
  border-color: #66d432;
  box-shadow: 0 0 0 2px rgba(102, 212, 50, 0.25);
}

.was-validated .form-control-color:valid,
.form-control-color.is-valid {
  width: calc(3rem + unset);
}

.was-validated .form-check-input:valid,
.form-check-input.is-valid {
  border-color: #66d432;
}

.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
  background-color: #66d432;
}

.was-validated .form-check-input:valid:focus,
.form-check-input.is-valid:focus {
  box-shadow: 0 0 0 2px rgba(102, 212, 50, 0.25);
}

.was-validated .form-check-input:valid~.form-check-label,
.form-check-input.is-valid~.form-check-label {
  color: #66d432;
}

.form-check-inline .form-check-input~.valid-feedback {
  margin-left: 0.5em;
}

.was-validated .input-group>.form-control:not(:focus):valid,
.input-group>.form-control:not(:focus).is-valid,
.was-validated .input-group>.form-select:not(:focus):valid,
.input-group>.form-select:not(:focus).is-valid,
.was-validated .input-group>.form-floating:not(:focus-within):valid,
.input-group>.form-floating:not(:focus-within).is-valid {
  z-index: 3;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #fd5c70;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #0a0a0a;
  background-color: rgba(253, 92, 112, 0.9);
  border-radius: 0.375rem;
}

.was-validated :invalid~.invalid-feedback,
.was-validated :invalid~.invalid-tooltip,
.is-invalid~.invalid-feedback,
.is-invalid~.invalid-tooltip {
  display: block;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #fd5c70;
  padding-right: unset;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fd5c70' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fd5c70' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: #fd5c70;
  box-shadow: 0 0 0 2px rgba(253, 92, 112, 0.25);
}

.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
  padding-right: unset;
  background-position: top 0.75rem right 0.75rem;
}

.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-color: #fd5c70;
}

.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fd5c70' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fd5c70' stroke='none'/%3e%3c/svg%3e");
  padding-right: 1rem;
  background-position: right 0 center, center right 1rem;
  background-size: 16px 12px, 1rem 1rem;
}

.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
  border-color: #fd5c70;
  box-shadow: 0 0 0 2px rgba(253, 92, 112, 0.25);
}

.was-validated .form-control-color:invalid,
.form-control-color.is-invalid {
  width: calc(3rem + unset);
}

.was-validated .form-check-input:invalid,
.form-check-input.is-invalid {
  border-color: #fd5c70;
}

.was-validated .form-check-input:invalid:checked,
.form-check-input.is-invalid:checked {
  background-color: #fd5c70;
}

.was-validated .form-check-input:invalid:focus,
.form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 2px rgba(253, 92, 112, 0.25);
}

.was-validated .form-check-input:invalid~.form-check-label,
.form-check-input.is-invalid~.form-check-label {
  color: #fd5c70;
}

.form-check-inline .form-check-input~.invalid-feedback {
  margin-left: 0.5em;
}

.was-validated .input-group>.form-control:not(:focus):invalid,
.input-group>.form-control:not(:focus).is-invalid,
.was-validated .input-group>.form-select:not(:focus):invalid,
.input-group>.form-select:not(:focus).is-invalid,
.was-validated .input-group>.form-floating:not(:focus-within):invalid,
.input-group>.form-floating:not(:focus-within).is-invalid {
  z-index: 4;
}


.input-group {
  border-radius: 0;
}

.input-group:not(.has-validation)> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}

.input-group.has-validation> :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}

.input-group,
.input-group .input-group-text {
  transition: 0.2s ease;
  border: none;
}

.input-group> :not(:first-child):not(.dropdown-menu) {
  margin-left: 2px;
}

.input-group label {
  transition: all 0.3s ease;
}

.input-group.input-group-dynamic .form-control,
.input-group.input-group-static .form-control {
  background: no-repeat bottom, 50% calc(100% - 1px);
  background-size: 0 100%, 100% 100%;
  transition: 0.2s ease;
}

.input-group.input-group-dynamic .form-control:not(:first-child),
.input-group.input-group-static .form-control:not(:first-child) {
  border-left: 0;
  padding-left: 0;
}

.input-group.input-group-dynamic .form-control:not(:last-child),
.input-group.input-group-static .form-control:not(:last-child) {
  border-right: 0;
  padding-right: 0;
}

.input-group.input-group-dynamic .form-control+.input-group-text,
.input-group.input-group-static .form-control+.input-group-text {
  border-left: 0;
  border-right: 1px solid #d2d6da;
}

.input-group.input-group-dynamic .form-control,
.input-group.input-group-dynamic .form-control:focus,
.input-group.input-group-static .form-control,
.input-group.input-group-static .form-control:focus {
  background-image: linear-gradient(0deg, rgb(var(--primary)) 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
  border-radius: 0 !important;

  /* added 19.3.25 */
  border: none;
}

.input-group.input-group-dynamic .form-control:focus,
.input-group.input-group-static .form-control:focus {
  background-size: 100% 100%, 100% 100%;
}

.input-group.input-group-dynamic .form-control[disabled],
.input-group.input-group-static .form-control[disabled],
.input-group.input-group-dynamic .form-control[readonly],
.input-group.input-group-static .form-control[readonly] {
  cursor: not-allowed;
  background-image: linear-gradient(0deg, rgb(var(--primary)) 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #e5e5e5 1px, hsla(0, 0%, 82%, 0) 0) !important;
}

.input-group.input-group-dynamic .input-group-text,
.input-group.input-group-static .input-group-text {
  border-right: 0;
}

.input-group.input-group-dynamic.is-focused .form-label,
.input-group.input-group-dynamic.is-filled .form-label,
.input-group.input-group-static.is-focused .form-label,
.input-group.input-group-static.is-filled .form-label {
  font-size: 0.6875rem !important;
}

.input-group.input-group-dynamic.is-focused .form-label,
.input-group.input-group-static.is-focused .form-label {
  top: -0.7rem;
}

.input-group.input-group-dynamic.is-focused label,
.input-group.input-group-static.is-focused label {
  color: rgb(var(--primary));
}

.input-group.input-group-dynamic.is-focused.is-valid label,
.input-group.input-group-static.is-focused.is-valid label {
  color: #4CAF50;
}

.input-group.input-group-dynamic.is-focused.is-valid .form-control,
.input-group.input-group-dynamic.is-focused.is-valid .form-control:focus,
.input-group.input-group-static.is-focused.is-valid .form-control,
.input-group.input-group-static.is-focused.is-valid .form-control:focus {
  background-image: linear-gradient(0deg, #4CAF50 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
  border-radius: 0 !important;
}

.input-group.input-group-dynamic.is-focused.is-invalid label,
.input-group.input-group-static.is-focused.is-invalid label {
  color: #F44335;
}

.input-group.input-group-dynamic.is-focused.is-invalid .form-control,
.input-group.input-group-dynamic.is-focused.is-invalid .form-control:focus,
.input-group.input-group-static.is-focused.is-invalid .form-control,
.input-group.input-group-static.is-focused.is-invalid .form-control:focus {
  background-image: linear-gradient(0deg, #F44335 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
  border-radius: 0 !important;
}

.input-group.input-group-dynamic.is-valid .form-control,
.input-group.input-group-dynamic.is-valid .form-control:focus,
.input-group.input-group-static.is-valid .form-control,
.input-group.input-group-static.is-valid .form-control:focus {
  background-image: linear-gradient(0deg, #4CAF50 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
  border-radius: 0 !important;
}

.input-group.input-group-dynamic.is-invalid .form-control,
.input-group.input-group-dynamic.is-invalid .form-control:focus,
.input-group.input-group-static.is-invalid .form-control,
.input-group.input-group-static.is-invalid .form-control:focus {
  background-image: linear-gradient(0deg, #F44335 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
  border-radius: 0 !important;
}

.input-group.input-group-dynamic.is-filled.is-focused .form-label,
.input-group.input-group-dynamic.is-filled .form-label,
.input-group.input-group-static.is-filled.is-focused .form-label,
.input-group.input-group-static.is-filled .form-label {
  top: -1rem;
}

.input-group.input-group-dynamic .input-group-password-toggle {
  position: absolute; 
  z-index: 5; 
  top: 50%; 
  transform: translateY(-50%); 
  right: 16px; 
  font-size: 18px; 
  cursor: pointer;
  color: #a1a1a1;
}

/* special case */
.dashboard-v2 .dashboard-card-title .input-group.input-group-dynamic.is-filled.is-focused .form-label,
.dashboard-v2 .dashboard-card-title .input-group.input-group-dynamic.is-filled .form-label {
  top: -0.5rem;
}

.input-group.input-group-outline .form-control {
  background: none;
  border: 1px solid #d2d6da;
  border-radius: 0.375rem;
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
  padding: 0.625rem 0.75rem !important;
  line-height: 1.3 !important;
}

.dark-mode .input-group.input-group-outline .form-control {
  color: #D0D0D0;
}

.input-group.input-group-outline .form-control.form-control-lg {
  padding: 0.75rem 0.75rem !important;
}

.input-group.input-group-outline .form-control.form-control-sm {
  padding: 0.25rem 0.75rem !important;
}

.input-group.input-group-outline .form-control[disabled],
.input-group.input-group-outline .form-control[readonly] {
  cursor: not-allowed;
  border-style: dashed;
}

.input-group.input-group-outline .form-label {
  display: flex;
  line-height: 3.925 !important;
  top: -0.375rem;
  margin-bottom: 0;
}

.input-group.input-group-outline .form-label:before {
  content: "";
  margin-right: 4px;
  border-left: solid 1px transparent;
  border-radius: 4px 0;
}

.input-group.input-group-outline .form-label:after {
  content: "";
  flex-grow: 1;
  margin-left: 4px;
  border-right: solid 1px transparent;
  border-radius: 0 5px;
}

.input-group.input-group-outline .form-label:before,
.input-group.input-group-outline .form-label:after {
  content: "";
  border-top: solid 1px;
  border-top-color: #d2d6da;
  pointer-events: none;
  margin-top: 0.375rem;
  box-sizing: border-box;
  display: block;
  height: 0.5rem;
  width: 0.625rem;
  border-width: 1px 0 0;
  border-color: transparent;
}

.input-group.input-group-outline.is-focused .form-label+.form-control,
.input-group.input-group-outline.is-filled .form-label+.form-control {
  border-color: rgb(var(--primary)) !important;
  border-top-color: transparent !important;
  box-shadow: inset 1px 0 rgb(var(--primary)), inset -1px 0 rgb(var(--primary)), inset 0 -1px rgb(var(--primary));
}

.input-group.input-group-outline.is-focused .form-label+.form-control:disabled, 
.input-group.input-group-outline.is-filled .form-label+.form-control:disabled {
  box-shadow: none !important;
}

.input-group.input-group-outline.is-focused .form-label,
.input-group.input-group-outline.is-filled .form-label {
  width: 100%;
  height: 100%;
  font-size: 0.6875rem !important;
  color: rgb(var(--primary));
  display: flex;
  line-height: 1.25 !important;
}

.input-group.input-group-outline .input-group-password-toggle {
  position: absolute; 
  z-index: 5; 
  top: 50%; 
  transform: translateY(-50%); 
  right: 16px; 
  font-size: 18px; 
  cursor: pointer;
  color: #a1a1a1;
}

.input-group.input-group-outline.is-focused .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-filled .form-label:after {
  opacity: 1;
}

.input-group.input-group-outline.is-focused .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-filled .form-label:after {
  border-top-color: rgb(var(--primary));
  box-shadow: inset 0 1px rgb(var(--primary));
}

.input-group.input-group-outline.is-focused:has(input.form-control:disabled) .form-label:before,
.input-group.input-group-outline.is-focused:has(input.form-control:disabled) .form-label:after,
.input-group.input-group-outline.is-filled:has(input.form-control:disabled) .form-label:before,
.input-group.input-group-outline.is-filled:has(input.form-control:disabled) .form-label:after {
  box-shadow: none;
  border-top-style: dashed;
}

.input-group.input-group-outline.is-valid .form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3e%3cpath fill='%2366d432' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}

.input-group.input-group-outline.is-valid.is-focused .form-label+.form-control,
.input-group.input-group-outline.is-valid.is-filled .form-label+.form-control {
  border-color: #4CAF50 !important;
  box-shadow: inset 1px 0 #4CAF50, inset -1px 0 #4CAF50, inset 0 -1px #4CAF50;
  border-top-color: transparent !important;
}

.input-group.input-group-outline.is-valid.is-focused .form-label,
.input-group.input-group-outline.is-valid.is-filled .form-label {
  color: #4CAF50;
}

.input-group.input-group-outline.is-valid.is-focused .form-label:before,
.input-group.input-group-outline.is-valid.is-focused .form-label:after,
.input-group.input-group-outline.is-valid.is-filled .form-label:before,
.input-group.input-group-outline.is-valid.is-filled .form-label:after {
  border-top-color: #4CAF50;
  box-shadow: inset 0 1px #4CAF50;
}

.input-group.input-group-outline.is-invalid .form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fd5c70' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fd5c70' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}

.input-group.input-group-outline.is-invalid.is-focused .form-label+.form-control,
.input-group.input-group-outline.is-invalid.is-filled .form-label+.form-control {
  border-color: #F44335 !important;
  box-shadow: inset 1px 0 #F44335, inset -1px 0 #F44335, inset 0 -1px #F44335;
  border-top-color: transparent !important;
}

.input-group.input-group-outline.is-invalid.is-focused .form-label,
.input-group.input-group-outline.is-invalid.is-filled .form-label {
  color: #F44335;
}

.input-group.input-group-outline.is-invalid.is-focused .form-label:before,
.input-group.input-group-outline.is-invalid.is-focused .form-label:after,
.input-group.input-group-outline.is-invalid.is-filled .form-label:before,
.input-group.input-group-outline.is-invalid.is-filled .form-label:after {
  border-top-color: #F44335;
  box-shadow: inset 0 1px #F44335;
}

.input-group.input-group-outline.input-group-sm .form-label,
.input-group.input-group-outline.input-group-sm label,
.input-group.input-group-dynamic.input-group-sm .form-label,
.input-group.input-group-dynamic.input-group-sm label,
.input-group.input-group-static.input-group-sm .form-label,
.input-group.input-group-static.input-group-sm label {
  font-size: 0.75rem;
}

.input-group.input-group-outline.input-group-lg .form-label,
.input-group.input-group-outline.input-group-lg label,
.input-group.input-group-dynamic.input-group-lg .form-label,
.input-group.input-group-dynamic.input-group-lg label,
.input-group.input-group-static.input-group-lg .form-label,
.input-group.input-group-static.input-group-lg label {
  font-size: 0.975rem;
}

.input-group.input-group-static .form-control {
  width: 100%;
}

.input-group.input-group-static label {
  margin-left: 0;
  margin-bottom: 0;
}