html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    background-color: rgb(243, 244, 246);
}

body.login {
    background-image: url("../images/backwall.jpg");
    background-size: cover;
}

.login-logo {
    max-height: 100px;
    height: 100%;
    width: auto;
}

.card-login {
    min-width: 450px;
}

@media (max-width: 768px) {
    .card-login {
        min-width: 400px;
    }
}

@media (max-width: 425px) {
    .card-login {
        min-width: 350px;
    }
}

@media (max-width: 375px) {
    .card-login {
        min-width: 300px;
    }
}

.bg-pys {
    background-color: #183c5c;
}

.navbar-brand-logo {
    max-height: 50px;
    height: 100%;
    width: auto;
}

.avatar-icon {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.delete-icon {
    height: 15px;
    width: auto;
    object-fit: contain;
}

.orders-edit-icon {
    fill: rgb(108, 117, 125);
    transition: fill 0.15s ease-in 0s;
}

.orders-edit-icon:hover {
    fill: rgb(226, 227, 229);
}

.table-icon {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.table-input-sm {
    max-width: 120px;
}

.step-circle{
    width: 1.6rem;
    height: 1.6rem;
}

ol.stepper {
    --default-b: lightgrey;
    --default-c: black;
    --active-b: #198754;
    --active-c: white;
    --circle: 4.5em; /* size of circle */
    --b: 5px; /* line thickness */

    display: flex;
    list-style: none;
    justify-content: space-between;
    background: linear-gradient(var(--default-b) 0 0) no-repeat 50% calc((var(--circle) - var(--b))/2)/100% var(--b);
    counter-reset: step;
    margin: 20px;
    padding: 0;
    font-size: 1rem;
    font-weight: bold;
    counter-reset: step;
    overflow: hidden;
}

ol.stepper li {
    display: grid;
    place-items: center;
    gap: 5px;
    font-family: sans-serif;
    position: relative;
}

ol.stepper li::before {
    content: counter(step) " ";
    counter-increment: step;
    display: grid;
    place-content: center;
    aspect-ratio: 1;
    height: var(--circle);
    min-height: var(--circle);
    border: 5px solid rgb(243, 244, 246);
    box-sizing: border-box;
    background: var(--default-b);
    color: var(--default-c);
    border-radius: 50%;
    font-family: monospace;
    z-index: 1;
}

ol.stepper li.active::before {
    background: var(--active-b);
    color: var(--active-c);
}

ol.stepper li:has(~ li.active)::before {
    background: var(--active-b);
    color: var(--active-c);
}

ol.stepper li.active::after {
    content: "";
    position: absolute;
    height: var(--b);
    right: 100%;
    top: calc((var(--circle) - var(--b))/2);
    width: 100vw;
    background: var(--active-b);
}


@media (max-width: 600px) {
    ol.stepper {
        display: grid;
        gap: 20px;
        background: linear-gradient(var(--default-b) 0 0) no-repeat calc((var(--circle) - var(--b))/2) 50%/ var(--b) 100%;
    }

        ol.stepper li {
            display: flex;
        }

            ol.stepper li.active::after {
                content: "";
                position: absolute;
                width: var(--b);
                bottom: 100%;
                left: calc((var(--circle) - var(--b))/2);
                top: auto;
                right: auto;
                height: 100vw;
                background: var(--active-b);
            }
}
.ui-autocomplete {
    z-index: 2000 !important;
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#chevron-arrow {
    display: inline-block;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    width: 10px;
    height: 10px;
	transform: rotate(-135deg);
}

.collapsed[aria-expanded="false"] > #chevron-arrow {
    transform: rotate(45deg);
}