/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/media/fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lusitana';
  font-style: normal;
  font-weight: 400;
  src: url('/media/fonts/Lusitana.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

form textarea {
    height: 8rem !important;
}

i.bi.correct {
    color: green;
}

i.bi.wrong {
    color: red;
}

img.desktop {
    display: none;
}

img.mobile {
    display: block;
}

svg.bi {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -.125em;
    fill: currentColor;
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
    z-index: 1500;
}

.flush-input-group {
    margin-left: calc(-.5 * var(--bs-gutter-x));
    margin-right: calc(-.5 * var(--bs-gutter-x));
}

.header__banner {
    background-color: rgb(59 130 246);
    display: flex;
}

.home__inventory .card,
.home__transactions .card ,
.purchases .card-body,
.transactions .card-body {
    height: 80vh;
    overflow-y: auto;
}

.inventory__table .card-body {
    height: 80vh;
    display: flex;
    flex-direction: column;

    table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    thead {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    tbody {
        display: block;
        overflow-y: auto;
        height: 100%;
        max-height: calc(80vh - 2.5625rem);
        width: 100%;
        table-layout: fixed;
    }

    tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
}

.inter {
    font-family: 'Inter';
}

.login {
    background-color: rgb(249 250 251);
    flex: 1 1 0%;
    padding-top: 2rem;

    & h1 {
        margin-bottom: .75rem;
    }

}

.logo {
    color: white !important;

    & a {
        align-items: flex-end;
        color: white !important;
        display: flex;
        height: 5rem;
        justify-content: flex-start;
        margin-bottom: auto;
        margin-top: auto;
        text-decoration: none;
    }

    & a:hover {
        color: white;
    }

    & a:visited {
        color: white;
    }
}

.logout {
    position: absolute;
    display: inline-block;
    bottom: 0;
}

.lusitana {
    font-family: 'Lusitana'
}

.menu {
    width: 20%;
}

.no-border {
    border-width: 0px !important;
}

.notification-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 2.5rem;
    line-height: 2.5rem;
    width: 100%;
}

.notification-top-bar {
    position: sticky;
    top: 0;
    left: 0;
    height: 2.5rem;
    line-height: 2.5rem;
    width: 100%;
}

.overflow-wrap {
    overflow-wrap: normal !important;
}

.point-of-sale-table-box {
    max-height: 50vh;
}

.report {
    position: relative !important;
    margin: 0 auto;
}

.sidebar .nav-link {
    font-size: .875rem;
    font-weight: 500;
}
  
.sidebar .nav-link.active {
    color: #2470dc;
}
  
.sidebar-heading {
    font-size: .75rem;
}

.transaction-purchaser {
    color: rgb(113, 113, 122);
    font-size: .75rem;
}

#accountData {
    input {
        width: 20rem;
        border-width: 0px;
    }

    input:hover {
        border-width: 1px;
    }
}

#loginLink {
    background-color: blue;
}

#loginLink:hover {
    background-color: light-blue;
}


/* sm */
@media (min-width: 640px){
}


/* md */
@media (min-width: 768px){
    img.desktop{
        display: block;
    }

    img.mobile{
        display: none;
    }

    .header__banner {
        height: 13rem;
    }

    .logo {
        & a {
            height: 10rem;
        }
    }

    .sidebar .offcanvas-lg {
        position: -webkit-sticky;
        position: sticky;
        top: 48px;
      }
}

/** Base **/
@media (min-width: 1024px){
}