 * {
     font-family: "Montserrat", serif;
 }

 input.error,
 select.error,
 textarea.error {
     border: 1px solid red;
 }

 label.error {
     font-weight: normal;
     color: red;
     font-size: .6rem;
     text-align: left;
 }

 .pageloader {
     display: none;
     position: fixed;
     left: 0px;
     top: 0px;
     width: 100%;
     height: 100%;
     z-index: 9999;
     background: url("{{ asset('assets/img/loader.gif') }}") 50% 50% no-repeat rgb(249, 249, 249);
     opacity: .8;
 }





 .nav_active::before {
    content: '';
    position: absolute;
    bottom: 100%;
    margin-bottom: -1px;
    right: -1px;
    width: 1.5rem;
    height: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    background: transparent;
    box-shadow: 0.475rem 0.475rem #F7FEE7;
  }

  .nav_active::after {
    content: '';
    position: absolute;
    top: 100%;
    margin-top: -1px;
    right: -1px;
    width: 1.5rem;
    height: 1.5rem;
    border-top-right-radius: 1.5rem;
    background: transparent;
    box-shadow: 0.475rem -0.475rem #F7FEE7;
  }
.bi-select::after {
    content: "\f283";
    /* Unicode for the icon */
    font-family: "bootstrap-icons";
    /* Important! */
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6c757d;
    /* Optional: change color */
}

.bi-select select {
    padding-right: calc(0.25rem * 10);
    appearance: none !important;
}

.bi-date::after {
    content: "\f1f3";
    /* Unicode for the icon */
    font-family: "bootstrap-icons";
    /* Important! */
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    pointer-events: none;
    color: #6c757d;
    /* Optional: change color */
}

.bi-date input {
    padding-right: calc(0.25rem * 10);
}

/* General rounded style */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #d1d5db;
    /* Tailwind gray-300 */
    border-radius: 9999px;
    /* Full rounded */
    padding: 0.5rem 1rem;
    height: auto;
    background-color: #ffffff;
    font-size: 0.875rem;
}

/* Consistent height and spacing for single select */
.select2-container--default .select2-selection--single {
    height: 3rem;
    display: flex;
    align-items: center;
    padding-right: 2.5rem;
    position: relative;
}

/* Dropdown arrow inside */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    position: absolute;
}

/* Multi-select chips (tags) */
.select2-container--default .select2-selection--multiple {
    min-height: 3rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Tag style */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #5ea500;
    /* Bright green */
    border: none;
    border-radius: 0.5rem;
    color: white;
    padding: 0.25rem 0.5rem;
    margin: 0.25rem;
    font-size: 0.75rem;
}


/** SWAL*/

html body.swal2-height-auto {
    height: 100vh !important;
}

.reqd:has(input:required) > label::after,
.reqd:has(select:required) > label::after,
.reqd .bi-select:has(select:required) > label::after,
.reqd:has(textarea:required) > label::after {
  content: "*";
  color: red;
  margin-left: 0.25rem;
}

