@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
/*@import url("../fonts/ostrichproper.e50f89d2d7ed.css");*/

@font-face {
    font-family: bebas-neue-pro;
    src: url(https://use.typekit.net/af/419abb/00000000000000007735c8b6/31/l?subset_id=2&fvd=n4&v=3) format("woff2"), url(https://use.typekit.net/af/419abb/00000000000000007735c8b6/31/d?subset_id=2&fvd=n4&v=3) format("woff"), url(https://use.typekit.net/af/419abb/00000000000000007735c8b6/31/a?subset_id=2&fvd=n4&v=3) format("opentype");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: bebas-neue-pro;
    src: url(https://use.typekit.net/af/5c1c2e/00000000000000007735c8b9/31/l?subset_id=2&fvd=n6&v=3) format("woff2"), url(https://use.typekit.net/af/5c1c2e/00000000000000007735c8b9/31/d?subset_id=2&fvd=n6&v=3) format("woff"), url(https://use.typekit.net/af/5c1c2e/00000000000000007735c8b9/31/a?subset_id=2&fvd=n6&v=3) format("opentype");
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: bebas-neue-pro;
    src: url(https://use.typekit.net/af/8efce3/00000000000000007735c8b3/31/l?subset_id=2&fvd=i4&v=3) format("woff2"), url(https://use.typekit.net/af/8efce3/00000000000000007735c8b3/31/d?subset_id=2&fvd=i4&v=3) format("woff"), url(https://use.typekit.net/af/8efce3/00000000000000007735c8b3/31/a?subset_id=2&fvd=i4&v=3) format("opentype");
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: bebas-neue-pro;
    src: url(https://use.typekit.net/af/cd2222/00000000000000007735c8bc/31/l?subset_id=2&fvd=i6&v=3) format("woff2"), url(https://use.typekit.net/af/cd2222/00000000000000007735c8bc/31/d?subset_id=2&fvd=i6&v=3) format("woff"), url(https://use.typekit.net/af/cd2222/00000000000000007735c8bc/31/a?subset_id=2&fvd=i6&v=3) format("opentype");
    font-weight: 600;
    font-style: italic;
    font-stretch: normal;
    font-display: auto;
}

:root {
    --base-font-size: 16px;
    --heading-font-font-family: "bebas-neue-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --heading-font-font-style: normal;
    --heading-font-font-weight: 400;
    --heading-font-text-transform: none;
    --heading-font-letter-spacing: 0em;
    --heading-font-line-height: 1.7em;
}

.w-33 {
    width: 33.333% !important;
}

.w-20 {
    width: 20% !important;
}

body {
    background-color: white !important;
    font-family: 'Roboto', sans-serif;
}

body.navigation-padding {
    padding-top: 56px;
}

h1, .h1 {
    font-family: var(--heading-font-font-family);
    font-style: var(--heading-font-font-style);
    font-weight: var(--heading-font-font-weight);
    font-size: 1.9rem;
}

h2, .h2 {
    font-family: var(--heading-font-font-family);
    font-style: var(--heading-font-font-style);
    font-weight: var(--heading-font-font-weight);
    font-size: 1.65rem;
}

h3, .h3 {
    font-family: var(--heading-font-font-family);
    font-style: var(--heading-font-font-style);
    font-weight: var(--heading-font-font-weight);
    font-size: 1.4rem;
}

h4, .h4 {
    font-family: var(--heading-font-font-family);
    font-style: var(--heading-font-font-style);
    font-weight: var(--heading-font-font-weight);
    font-size: 1.15rem;
}

h5, .h5 {
    font-family: var(--heading-font-font-family);
    font-style: var(--heading-font-font-style);
    font-weight: var(--heading-font-font-weight);
    font-size: 0.9rem;
}

.heading-font {
    font-family: var(--heading-font-font-family);
    font-style: var(--heading-font-font-style);
    font-weight: var(--heading-font-font-weight);
}

.xsmall {
    font-size: 75%;
}

.vertical-center {
    min-height: 100%; /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */
    display: flex;
    align-items: center;
}

.text-decoration-underline {
    text-decoration: underline;
}

img.hero {
    object-fit: cover;
    max-height: 14rem;
    max-width: 100%;
}

.share-modal.modal.fade .modal-dialog {
    transform: translate(0, 50px);
}

.share-modal.modal.show .modal-dialog {
    transform: none;
}

#productCarousel,
#productCarousel .carousel-inner,
#productCarousel .carousel-item,
#productCarousel .carousel-frame {
}

.carousel-frame {
}

.carousel-img {
    height: 14rem;
    object-fit: contain;
    object-position: center;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, .45);
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    background-size: 60% 60%;
}


.dosage-icon {
    margin-top: auto !important;
    margin-bottom: auto !important;
    margin-right: 3px;
    max-height: 1.5rem;
    max-width: 1.5rem;
}

.small-container {
    width: 30rem;
    max-width: 100%;
}

.big-container {
    max-width: 50rem;
}

.thumbnail-image {
    width: 80px;
    height: 80px;
}

.image-container {
    overflow: hidden;
}

.image-container.image-placeholder {
    background: #edf2f9 url("../img/light-image.843bc6c1d798.svg") no-repeat center;
}

.image-container > .image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

p:last-child {
    margin-bottom: 0;
}

.collapsed-fade {
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.page-guidance-text, .page-guidance-text-mobile {
    color: #6E84A3;
}

@media only screen and (max-width: 768px) {
    .navbar-dark.collapsed {
        transition: all .3s 0s;
        background-color: #fff;
        border-color: #e3ebf6;
    }

    .navbar-dark.expand {
        background-color: #152e4d;
        border-color: #152e4d;
    }
}

.right-bottom-aligned {
    bottom: 0;
    right: 0;
}

.non-arrow::-ms-expand {
    display: none;
}

.non-arrow {
    -moz-appearance: none;
    -webkit-appearance: none;
}

.small-container {
    width: 30rem;
}

.product-thumbnail {
    width: 60px !important;
    height: 60px !important;
    object-fit: scale-down;
}

.text-secondary-darker {
    color: #54545e;
}

.svg-full {
    fill: green;
}

.color-inherit,
.color-inherit:hover {
    color: inherit;
}

/* Custom Colors */
.bg-success-light {
    background-color: #e6fff0;
}

.color-success-light {
    color: #e6fff0;
}

.color-mid-muted {
    color: #54545e;
}

.w-85 {
    width: 85%;
}

.w-14 {
    width: calc(100% / 7);
}

.font-weight-700 {
    font-weight: 700 !important;
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-brand img.logo-image {
    height: 2.3rem;
}

.bg-light-gray {
    background-color: #fbfbfb;
}

.navbar-nav {
    flex-direction: row;
}

.navbar-nav .nav-link {
    padding: .4rem 0;
}

nav.navbar {
    box-shadow: 0 2px 4px 0 hsla(0, 0%, 89.8%, .5);
}

.button-bar-bottom {
    box-shadow: 0 -2px 4px 0 hsla(0, 0%, 89.8%, .5);
}

.color-dark-gray {
    color: #4e4e52;
}

.feather {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}


.icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: #A8A8AC;
}

.icon.stashcabinet {
    -webkit-mask: url("../img/lucidgreen/stashcabinet.2c9b00d7c28a.svg") no-repeat 50% 50%;
    mask: url("../img/lucidgreen/stashcabinet.2c9b00d7c28a.svg") no-repeat 50% 50%;
}

.icon.scan {
    -webkit-mask: url("../img/lucidgreen/scan.830b6b2e5923.svg") no-repeat 50% 50%;
    mask: url("../img/lucidgreen/scan.830b6b2e5923.svg") no-repeat 50% 50%;
}

.icon.lucid-id {
    -webkit-mask: url("../img/lucidgreen/lucidid_small_mask.7c68063eadea.svg") no-repeat 50% 50%;
    mask: url("../img/lucidgreen/lucidid_small_mask.7c68063eadea.svg") no-repeat 50% 50%;
}

.icon.training {
    -webkit-mask: url("../img/lucidgreen/training.1184744ec844.svg") no-repeat 50% 50%;
    mask: url("../img/lucidgreen/training.1184744ec844.svg") no-repeat 50% 50%;
}

.icon.wallet {
    -webkit-mask: url("../img/lucidgreen/wallet.e2bfedd31d8a.svg") no-repeat 50% 50%;
    mask: url("../img/lucidgreen/wallet.e2bfedd31d8a.svg") no-repeat 50% 50%;
}

.scan-icon-down-arrow {
    height: 50vh;
}

@media only screen and (min-height: 660px) {
    .scan-icon-down-arrow {
        height: 55vh;
    }
}

@media only screen and (min-height: 700px) {
    .scan-icon-down-arrow {
        height: 60vh;
    }
}

@media only screen and (min-height: 750px) {
    .scan-icon-down-arrow {
        height: 65vh;
    }
}

@media only screen and (min-height: 920px) {
    .scan-icon-down-arrow {
        height: 73vh;
    }
}

@media only screen and (min-height: 1170px) {
    .scan-icon-down-arrow {
        height: 77vh;
    }
}

.flatpickr-calendar {
    border: 1px solid #ced4da !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.hide-input-field > input {
    display: none;
}

img.card-product {
    max-height: 4rem;
}

.swing-horizontal {
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-duration: 7s;
    -webkit-animation-duration: 7s;
    animation-name: swing-horizontal;
    -webkit-animation-name: swing-horizontal;
}

@-webkit-keyframes swing-horizontal {
    25% {
        -webkit-transform: translateX(-25%);
    }
    50% {
        -webkit-transform: translateX(0%);
    }
    75% {
        -webkit-transform: translateX(25%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

@keyframes swing-horizontal {
    25% {
        transform: translateX(-25%);
    }
    50% {
        transform: translateX(0%);
    }
    75% {
        transform: translateX(25%);
    }
    100% {
        transform: translateX(0%);
    }
}

.box-10-px {
    width: 10rem !important;
    height: 10rem !important;
}

.done-image-thumbnail {
    object-fit: cover;
    -o-object-fit: cover;
}

.uploadcare--widget {
    display: none;
}

input.token {
    display: block;
    margin: auto;
    border: none;
    padding: 0;
    width: 7ch;
    background: repeating-linear-gradient(90deg, black 0, black 1ch, transparent 0, transparent 1.5ch) 0 100%/ 7.5ch 2px no-repeat;
    font: 5ch 'Roboto', sans-serif;
    letter-spacing: 0.5ch;
    transition: none;
    border-radius: 0;
    height: 1.5em;
}

input.token:focus {
    outline: 0;
    box-shadow: none !important;
    /*color: dodgerblue;*/
}

input.token + .invalid-feedback {
    text-align: center;
    margin-left: -0.5ch;
}

.form-control.token:focus {
    outline: 0;
    box-shadow: none !important;
}

.form-control.is-invalid.token, .was-validated.token .form-control.token:invalid {
    padding-right: 0;
    background: repeating-linear-gradient(90deg, #dc3545 0, #dc3545 1ch, transparent 0, transparent 1.5ch) 0 100%/ 7.5ch 2px no-repeat;
}

/* Chrome, Safari, Edge, Opera */
input[name="token"]::-webkit-outer-spin-button,
input[name="token"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[name="token"][type=number] {
    -moz-appearance: textfield;
}

.page-wait-container {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .75);
    z-index: 1100;
}

#hijacked-warning-top, #hijacked-warning {
    position: fixed;
    width: 100%;
    z-index: 1500;
    background-color: var(--message-error-bg);
}

#hijacked-warning-top {
    top: 0;
}

#hijacked-warning {
    bottom: 0;
    padding: 0.375rem !important;
}

#hijacked-warning .row {
    display: flex;
}

#hijacked-warning .col {
    flex-basis: 0;
    flex-grow: 1;
}

#hijacked-warning .text-right {
    text-align: right;
}

#hijacked-warning .btn {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    line-height: 1.75;
    border-radius: .25rem;
    cursor: pointer;
}

#hijacked-warning .btn:hover {
    color: var(--primary);
    background-color: #fff;
}

.bg-gray-200 {
    background-color: var(--bs-gray-200);
}

a#id_token .disalbed {
    cursor: none;
}

.custom-badge {
    font-weight: normal;
    color: var(--brand-color-text);
    background-color: var(--brand-color-background) !important;
    border-width: var(--bs-border-width);
    border-style: solid;
    border-color: var(--brand-color-border) !important;
}

.header-badge {
    font-size: 0.875em;
}