.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.b-bar-vertical-inline.b-bar-dark, .b-bar-vertical-popout.b-bar-dark, .b-bar-vertical-small.b-bar-dark {
    color: var(--b-bar-dark-color, rgba(255, 255, 255, 0.7));
}

.modal.delete-modal{
    z-index: 1075;
}

tr.active,
tr.active a {
    background-color: var(--b-button-primary-background);
    color: white;
}

.b-bar-vertical-inline {
    min-width: var(--b-vertical-bar-width, 280px);
    max-width: var(--b-vertical-bar-width, 280px);
    width: var(--b-vertical-bar-width, 280px);
}

/*Correct the navigation bar color*/
.b-bar-vertical-inline.b-bar-dark .b-bar-link.active,
.b-bar-vertical-inline.b-bar-dark .b-bar-dropdown-menu .b-bar-dropdown-item.active {
    background-color: var(--b-button-primary-active-background);
    color: var(--b-button-primary-active-color, white);
}

.table td, .table th {
    vertical-align: middle;
}

.dashboard-widget {
    display: inline-flex;
    padding: 0px;
    padding-right: 12px;
    padding-bottom: 12px;
    min-width: 100%;
}

.dashboard-widget img {
    padding-right: 12px;
    padding-left: 0px;
}

.dashboard-widget .dashboard-widget-body .dashboard-title {
    font-size: 1.2em;
    color: #443;
}

.dashboard-widget .dashboard-widget-body .dashboard-text {
}

@media (min-width: 1440px) {
    .dashboard-widget {
        min-width: 49%;
        max-width: 45%;
    }
}

@media (min-width: 2000px) {
    .dashboard-widget {
        min-width: 33%;
        max-width: 33%;
    }
}

.custom-control.custom-switch,
.custom-control.custom-checkbox {
    padding-top: 7px;
}

.spinner div {
    color: var(--b-theme-text-primary) !important;
}

.card-title {
    margin: 0;
}

/* Skeleton styles */
.card-skeleton {
    background-color: #fff;
    height: auto;
    width: auto;
    overflow: hidden;
    margin: 0px;
    border-radius: 5px;
}

/* card-skeleton image loading */
.card-skeleton-image img {
    width: 100%;
    height: 100%;
}

.card-skeleton-image.loading {
    height: 300px;
    width: 400px;
}

/* card-skeleton title */
.card-skeleton-title {
    font-size: 22px;
    font-weight: 700;
    height: 1.2rem;
}

.card-skeleton-title.loading {
    height: 1.25rem;
    width: 25%;
    margin-top: 1rem;
    margin-bottom: .75rem;
    border-radius: 3px;
    margin-left: 0;
}

/* card-skeleton description */
.card-skeleton-description {
    padding-top: 8px;
    padding-bottom: 12px;
    padding-left: 0;
    font-size: 16px;
}

.card-skeleton-description.loading {
    height: 2.25rem;
    margin-bottom: .5rem;
    border-radius: 3px;
    margin-left: 0;
}

/* The loading Class */
.loading {
    position: relative;
    background-color: #e2e2e2;
}

/* The moving element */
.loading::after {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(255, 255, 255, 0.25)), to(transparent));
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    /* Adding animation */
    animation: loading 1.2s infinite;
}

/* Loading Animation */
@keyframes loading {
    100% {
        transform: translateX(100%);
    }
}

.text-width-full {
    flex: 0 0 100%;
    flex-wrap: nowrap !important;
    flex-direction: column;
    display: flex;
}

.text-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

i.b-bar-icon {
    min-width: 36px;
    max-width: 36px;
    text-align: center;
    display: inline-block;
}

th .filter-container {
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Poppins;
}

body, p {
    font-size: 15px;
}

.btn {
    text-transform: uppercase;
    font-family: Roboto;
    font-stretch: 100%;
    font-size: 13px;
    letter-spacing: 2px;
}

.nav-item {
    font-size: 1.2em;
}

.nav-item:hover {
    text-decoration: none;
}

.card {
    border: 1px solid transparent;
    padding: .95em .75em;
    margin: -10px;
}

.card:hover {
    border: 1px solid #82714A;
}

.appointment-panel {
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
    color: #444;
    padding: 1em;
    margin: 1em;
    text-decoration: none;
}

.appointment-panel a {
    color: #222;
    text-decoration: none;
}

.retail-price {
    font-family: Roboto;
    font-size: 1.0em;
    font-weight: 100;
}

.gallery-item-description, gallery-item-view-description {
    font-size: 1.65em;
    font-family: Poppins;
    font-weight: 400;
    min-height: 1.5em;
    line-height: 1.3em !important;
    text-align: center;
    margin: 0;
}

.gallery-item-view-description, .cart-item-view-description {
    font-family: Poppins;
    font-weight: 100;
    font-size: 2.1em;
    line-height: 1.25em !important;
}

.diamond-description {
    font-weight: 100;
    font-size: 1rem;
    line-height: 1.5rem;
    margin: .5rem 0;
}

.cart-item-view-description {
    font-size: 1.8em;
    line-height: 1.15em !important;
}

.gallery-item-retail, .cart-item-retail {
    font-family: Poppins;
    font-weight: 400;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.25em;
    margin: 0;
}

.cart-item-retail {
    font-weight: 100;
    font-size: 1.5em;
    text-align: left;
}

.product-detail .gallery-item-retail {
    text-align: left;
    font-weight: 500;
    font-size: 1.75em;
    line-height: 2em;
}

.gallery-container {
    max-width: 1400px;
}

/* Style for the container holding the image and text */
.image-container {
    position: relative;
    width: 100%;
}

.image-container .image {
    object-fit: contain;
}

.video-container {
    width: 100%;
    position: relative;
    margin:0;
    padding:0;
}

.video-container video {
    object-fit: contain;
}

video {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

/* Style for the image */
.image {
    width: 100%;
    height: auto;
    display: block;
}

/* Style for the text overlay */
.overlay-text {
    margin: 0;
    position: absolute;
    top: 50%; /* Adjust the top position based on your design */
    left: 50%; /* Adjust the left position based on your design */
    transform: translate(-50%, -50%);
    color: white; /* Change the text color as needed */
    background-color: rgb(0,0,0,.25);
    padding: 1em;
    font-size: 16px; /* Adjust the font size as needed */
    font-weight: 700; /* Adjust the font weight as needed */
    text-align: center; /* Adjust the text alignment as needed */
}

.product-detail .overlay-text {
    font-size: 24px;
    font-weight: 700;
}

.overlay-text-upper-left {
    font-size: 1em;
    font-weight: 100;
    position: absolute;
    left: 0;
    top: 0;
    background: none;
}

.overlay-text-upper-right {
    font-size: 1em;
    font-weight: 100;
    position: absolute;
    right: 0;
    top: 0;
    background: none;
}

.morgen-james-layout {
    overflow: hidden;
}

.morgen-james-layout header {
    background: transparent;
}

.morgen-james-layout main {
    background: transparent;
    overflow: auto;
    xxmargin-top: 120px;
    margin-bottom: 101px;
}

.morgen-james-layout footer {
    position:fixed;
    bottom: 0;
    margin: 0;
    height:100px;
    width: 100%;
}

.morgen-james-layout .layout-content-testmode {
    margin-top: 132px;
    margin-bottom: 100px;
    scroll-behavior: auto;
}

.morgen-james-layout .layout-content {
    position:relative;
    top: 92px;
    scroll-behavior: auto;
}

.layout-footer-component table td {
    border-top: 0px;
    text-align: center;
}

.layout-footer-component {
    padding-top: 12px;
}

.blazored-toast-container {
    z-index: 999;
}

.desktop-header {
    display:none;
}

.mission-statement {
    display: none;
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

@media (min-width: 1800px) {
    .container-xxl {
        max-width: 1800px;
    }
}

@media (min-width: 1500px) {
    .container-xxl {
        max-width: 1500px;
    }
}

@media (min-width: 767px) {
    navbar-toggler {
        display: block;
    }

    .desktop-header {
        display: block;
    }
}