/* override old BS3 classes used by datepicker calendar dropdown */
.glyphicon-chevron-left::before {
    content: "\f12c";  /* bi-chevron-left */
    font-family: "Bootstrap-icons";
}

.glyphicon-chevron-right::before {
    content: "\f138";  /* bi-chevron-right */
    font-family: "Bootstrap-icons";
}

.glyphicon-chevron-up::before {
    content: "\f139";  /* bi-chevron-up */
    font-family: "Bootstrap-icons";
}

.glyphicon-chevron-down::before {
    content: "\f13a";  /* bi-chevron-down */
    font-family: "Bootstrap-icons";
}

.glyphicon-calendar::before {
    content: "\f273";  /* bi-calendar */
    font-family: "Bootstrap-icons";
}

.glyphicon-time::before {
    content: "\f150";  /* bi-clock */
    font-family: "Bootstrap-icons";
}

.glyphicon-trash::before {
    content: "\f5de";  /* bi-trash */
    font-family: "Bootstrap-icons";
}

.glyphicon-remove::before {
    content: "\f62a";  /* bi-x-lg */
    font-family: "Bootstrap-icons";
}


.alert-debug {
    color: black;
    background-color: white;
    border-color: #d6e9c6;
  }

  .alert-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
  }

.btn-gmap-custom {
    appearance: button;
    color: #0b0a12;;
    background-color: #f5f5f6;
    border: 0;
    border-color:#f5f5f6;
    border-radius: 0.4rem;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    margin: 10px;
    padding: 0 0.5em;
    height: 40px;
    font: 400 18px Roboto, Arial, sans-serif;
    overflow: hidden;
}

    .btn-gmap-custom:hover {
        color: #000;
        background: #d0d0d1;
    }

[v-cloak] {
    display: none;
}

.asteriskField{
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}
/* Parsley validation */
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
	border-color: #198754;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
	border-color: #dc3545;
}

.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  color: #dc3545;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

.htmx-indicator{
    display:none;
}

.htmx-request .htmx-spinner{
    display: inline-block;
}
.htmx-request.htmx-spinner{
    display: inline-block
}

.htmx-indicator-on-busy{
    display:none;
}

.htmx-request .htmx-indicator-on-busy{
    display: inline-block;
}

.htmx-request .htmx-indicator-off-busy{
    display: none;
}

.htmx-cursor-pointer{
    cursor: pointer;
}

.bootstrap-datetimepicker-widget{
    z-index: 2000;
}

input[readonly] {
    background-color: #e9ecef !important;
}

.form-switch .form-check-input {
    width: 2.5em;
    height: 1.5em;
}

.form-switch .form-check-label {
    padding: 0.25em 0 0 0.25em;
}

.avatar-text {
    font-size: 3rem;
  }

.pdl-form-stepper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

.pdl-form-stepper-header .pdl-form-stepper-circle {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 3em;
    height: 3em;
    padding: .5em 0;
    margin: .25rem;
    line-height: 1.9rem;
    color: #5143d9;
    background-color: rgba(81, 67, 217, 0.1);
    border: 2px solid rgba(81, 67, 217, 0.4);
    border-radius: 100%;
}

.pdl-form-stepper-header .step.active .pdl-form-stepper-circle {
    background-color: #5143d9;
    color: #fff;
    border: none;
    line-height: 2rem;
}

.pdl-form-stepper-header .step .pdl-form-stepper-label {
    margin: 0;
}

.pdl-form-stepper-header .step.active .pdl-form-stepper-label {
    color: #5143d9;
}

.pdl-form-stepper-header .line {
    -ms-flex: 1 0 32px;
    flex: 1 0 32px;
    min-width: 1px;
    min-height: 1px;
    margin: auto;
    background-color: #dfdfe3;
}

/* Disabled buttons should show not-allowed cursor */
/* Override Bootstrap's pointer-events: none to allow cursor change */
/* But prevent hover/active/focus state changes */
button[disabled],
button:disabled,
.btn[disabled],
.btn:disabled,
.btn.disabled {
    pointer-events: auto !important;
    cursor: not-allowed !important;
}

/* Prevent hover, active, and focus state changes on disabled buttons */
button[disabled]:hover,
button:disabled:hover,
.btn[disabled]:hover,
.btn:disabled:hover,
.btn.disabled:hover,
button[disabled]:active,
button:disabled:active,
.btn[disabled]:active,
.btn:disabled:active,
.btn.disabled:active,
button[disabled]:focus,
button:disabled:focus,
.btn[disabled]:focus,
.btn:disabled:focus,
.btn.disabled:focus {
    color: var(--bs-btn-disabled-color) !important;
    background-color: var(--bs-btn-disabled-bg) !important;
    border-color: var(--bs-btn-disabled-border-color) !important;
    opacity: var(--bs-btn-disabled-opacity) !important;
    box-shadow: none !important;
    transform: none !important;
}