body {
    font-family: Roboto, "Helvetica Neue", sans-serif !important;
    /* font: var(--cm-sys-type-body-medium, 400 13px / 20px "Roboto", sans-serif) !important; */
}

/* .sidebar {
    visibility: hidden;
    width: 15rem;
    height: 100vh !important;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
    position: fixed;
    z-index: 99999;
} */
.sticky-top {
    z-index: 998 !important;
}

.custom-heading {
    font-size: large;
    font-weight: 500 !important;
}

#dashboard-logo {
    max-width: 180px;
    max-height: 40px;
    object-fit: contain;
}

.hover-link:hover {
    background-color: #f8f9fa;
    /* Light gray background on hover */
    color: #343a40;
    /* Darker text color on hover */
    border-radius: 5px;
    /* Slightly rounded corners */
    text-decoration: none;
    /* Ensure no underline appears */
}

.nsm7Bb-HzV7m-LgbsSe-Bz112c {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: auto !important;
    margin-top: 2px !important;
}

.table {
    font-size: 12px;
}

.page-list .dropdown-menu {
    height: auto !important;
}

.general-analysis-tables {
    font-size: 10px;
    margin-bottom: 0;
}

.general-analysis-tables-parent {
    height: 5rem;
    overflow: scroll;
}

.lower-boxes {
    max-height: max-content;
}

.signup-login-logo {
    display: flex;
    justify-content: center;
    padding-bottom: 1rem;
}

.signup-login-logo img {
    width: 65%;
    object-fit: contain;
    margin: auto;
}

.product-overview>p {
    font-size: 12px;
}

.shipping-contsiners>div>span {
    font-size: 12px !important;
}

#google-signup {
    padding-top: 2px;
}


.grid-stack-item-content {
    border-radius: 5px;
    padding: 5px !important;
    /* position: initial !important; */
}

.grid-stack {
    background-color: #f8f9fa;
    margin-top: 20px;
}

.dropdown-menu {
    height: 38rem;
    overflow: auto;
    padding: inherit;
}

.dropdown-item-child {
    padding-left: 30px;
    cursor: pointer;
}

.main-dropdown-item {
    font-weight: bold;
    pointer-events: none;
}

.grid-stack-item-content {
    position: relative;
    /* Ensures proper positioning of the close button */
    padding: 10px;
}

.selected-item {
    background-color: #f9fcff;
    /* Blue for selected */
    color: #aaa !important;
    /* White text for contrast */
    font-weight: 500;
    /* Slightly bold */

    /* Properties to make it appear unselectable and prevent selection */
    pointer-events: none;
    /* Prevents all mouse events (clicks, hovers, drags) */
    user-select: none;
    /* Prevents text selection */
    cursor: default;
    /* Changes cursor to default (often an arrow) */
    opacity: 0.7;
    /* Makes it look slightly faded, indicating disabled state */
}

.selected-item:hover {
    background-color: #bdddff;
    /* Darker blue on hover */
}

.remove-widget {
    display: none;
    /* Hide the button by default */
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    background-color: transparent;
    border: none;
    color: #000;
    font-size: 16px;
    cursor: pointer;
}

.remove-widget:hover {
    color: red;
}

.grid-stack-item-content:hover .remove-widget {
    display: block;
    /* Show the button only when the widget is hovered */
}

.gs-id-0>.grid-stack-item>.grid-stack-item-content {
    inset: 0 !important;
}

.container-fluid {
    padding-left: 0 !important;
}

.ship-payment {
    width: 100%;
}

#dashboard-templates-dropdown {
    height: auto;
}

.form-container {
    max-width: 400px;
    margin: 2rem auto;
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-title {
    text-align: center;
    margin-bottom: 1.5rem;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.form-switch {
    text-align: center;
}

.form-switch a {
    color: #007bff;
    text-decoration: none;
}

.form-switch a:hover {
    text-decoration: underline;
}

.selected-site {
    background-color: #007bff;
    color: white;
}

/* General sidebar styling */
.nav-link {
    color: #6c757d !important;
    /* Default secondary text color */
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover effect */
.nav-link:hover {
    background-color: #f8f9fa;
    /* Light gray hover background */
    color: #343a40;
    /* Darker text color */
}

/* Active tab styling */
.nav-link.active-tab {
    background-color: #007bff;
    /* Bootstrap primary color */
    color: white !important;
    font-weight: bold;
}

/* Icon adjustments */
.nav-link i {
    font-size: 1.2rem;
}

/* .sidebar.active {
    transform: translateX(0) !important;
    visibility: visible !important;

} */

.sidebar {
    width: 15rem !important;
    height: 100vh !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    position: fixed;
    z-index: 99999;
    top: 50px;
    background-color: white;
    color: var(--bs-secondary);
    pointer-events: none;
    visibility: hidden;
}

.sidebar.active {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.sidebar.closing {
    transform: translateX(-100%);
    visibility: visible;
    /* Keep visible during animation */
    pointer-events: none;
}


#sitesModelLabel {
    color: var(--cm-sys-color-on-surface, #000);
    font: var(--cm-sys-type-title-small, 400 18px / 24px);
    font-family: sans-serif;
}

.list-group-item {
    border-bottom: 1px solid var(--cm-sys-color-hairline, rgba(0, 0, 0, 0.12));
}

.list-group {
    border: none;
    --bs-list-group-border-color: none !important;
}

.modal-footer {
    border-top: none;
}

.list-group-item {
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: var(--cm-sys-color-primary, #3367d6);
}

.list-group-item:hover {
    background-color: #f8f9fa;
    /* Light gray background */
}


.sync-url {
    background: #ffffff8f;
    border-radius: 4px;
    color: #111;
    overflow: hidden;
    max-height: 30px;
    line-height: 28px;
    background: #fff;
    padding: 0 5px;
}

.url-copy-buttons {
    height: 30px;
}

.url-copy-icons {
    font-size: 14px;
    display: flex;
}

#realtime-order-sync-info {
    background-color: #efefefcf !important;
    border-left: 4px solid #777 !important;
    border-radius: unset !important;
    padding: 0.5rem !important;
}

#add-site-container {
    margin-top: 2% !important;
}

.modal.fade .modal-dialog {
    transform: scale(0.8);
    transition: transform 0.3s ease-in-out;
}

.modal,
.modal-content {
    --bs-modal-border-radius: 4px;
    border: none;
}

.modal.fade.show .modal-dialog {
    transform: scale(1);
}


.page-content {
    background-color: #F8F9FA !important;
    /* width: 97.3%; */
    width: -webkit-fill-available;
    left: 40px;
    position: absolute;
    min-height: 93vh;
}

.table-header {
    background-color: #e9ecef !important;
}

.filter-wrapper {
    display: flex;
    justify-content: space-between;
}

.active-count {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
    padding-top: 1px;
    background-color: #0D6EFD;
    color: #FFFFFF;
    margin-top: 2px;
    margin-right: 18px !important;
}

/* @media (max-width: 1499px) {
    .page-content {
        width: 96.5%;
    }
}

@media (max-width: 1416px) {
    .page-content {
        width: 96%;
    }
}

@media (max-width: 1240px) {
    .page-content {
        width: 95.5%;
    }

}

@media (max-width: 1100px) {
    .page-content {
        width: 94%;
    }
}

@media (max-width: 972px) {
    .page-content {
        width: 93%;
    }
}

@media (max-width: 672px) {
    .page-content {
        width: 90%;
    }
} */

/* New Media Query for < 768px (Apply specific styles) */
@media (max-width: 767px) {

    .floating-sidebar,
    .sibling-page-header {
        width: 50% !important;
        float: left !important;
    }

    .nav-right-side,
    .filters-row {
        width: 50% !important;
    }

    .site-selection-container {
        display: none !important;
        /* Ensure site selection is hidden on small screens */
    }
}

/* Main tooltip container */
.introjs-tooltip {
    font-family: 'Roboto', 'Open Sans', Arial, sans-serif !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    padding: 0 15px !important;
    /* Reduced padding for a tighter look */
    max-width: 280px !important;
    /* Slightly smaller max-width */
    box-shadow: 0 .125rem .25rem rgba(var(--bs-body-color-rgb), .075) !important;
    ;
}

/* Tooltip text */
.introjs-tooltiptext {
    font-size: 14px !important;
    /* Slightly smaller font */
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
    /* Reduced margin */
    padding: 10px !important;
    /* Reduced padding */
}

/* Buttons container */
.introjs-tooltipbuttons {
    display: flex !important;
    justify-content: flex-end !important;
    /* Align buttons to the right */
    gap: 8px !important;
    /* Reduced gap between buttons */
    margin-top: 10px !important;
}

/* Buttons (Next, Back, Skip, Finish) */
.introjs-button {
    background-color: #3367d6 !important;
    /* WooAnalytics blue */
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    /* Smaller padding for smaller buttons */
    font-size: 12px !important;
    /* Smaller font size */
    font-weight: 500 !important;
    transition: background-color 0.3s ease, transform 0.1s ease !important;
    line-height: 1 !important;
    /* Prevent extra line height */
}

.introjs-button:hover {
    background-color: #2557a7 !important;
    /* Darker blue on hover */
    transform: translateY(-1px) !important;
    /* Subtle lift effect */
}

/* Skip button */
.introjs-skipbutton {
    background-color: transparent !important;
    color: #80868b !important;
    font-size: small;
    order: -1 !important;
    /* Move Skip to the left */
    margin-right: auto !important;
    /* Push Skip to the far left */
}

.introjs-skipbutton:hover {
    transform: translateY(-1px) !important;
    font-weight: 900 !important;
}

/* Back button */
.introjs-prevbutton {
    background-color: #ffffff !important;
    color: #3367d6 !important;
    border: 1px solid #3367d6 !important;
    order: 1 !important;
    /* Ensure Back is before Next */
}

.introjs-prevbutton:hover,
.introjs-nextbutton:hover,
.introjs-donebutton:hover {
    background-color: #f2f2f2 !important;
    transform: translateY(-1px) !important;
}

/* Next button */
.introjs-nextbutton {
    background-color: #ffffff !important;
    color: #3367d6 !important;
    border: 1px solid #3367d6 !important;
    order: 2 !important;
    /* Ensure Next is after Back */
}

/* Finish button (Done) */
.introjs-donebutton {
    background-color: #ffffff !important;
    color: #3367d6 !important;
    border: 1px solid #3367d6 !important;
    order: 2 !important;
    /* Ensure Finish is at the end */
}

/* Progress bar */
.introjs-progress {
    background-color: #e0e0e0 !important;
    border-radius: 4px !important;
    height: 4px !important;
    /* Slightly thinner progress bar */
    margin-top: 8px !important;
}

.introjs-progressbar {
    background-color: #3367d6 !important;
    border-radius: 4px !important;
}

/* Arrow */
.introjs-arrow {
    border-width: 8px !important;
    /* Slightly smaller arrow */
}

.introjs-arrow.top {
    top: -16px !important;
}

.introjs-arrow.right {
    right: -16px !important;
}

.introjs-arrow.left {
    left: -16px !important;
}

/* Overlay */
.introjs-overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Highlighted element */
.introjs-helperLayer {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    box-shadow: rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
}

/* Fix for button alignment in smaller tooltips */
.introjs-tooltipbuttons a {
    flex-shrink: 0 !important;
    /* Prevent buttons from shrinking */
}

/* New styles for Learn More button */
.introjs-learn-more-btn {
    background: none !important;
    border: none !important;
    color: #3367d6 !important;
    /* WooAnalytics blue */
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    margin-top: 8px !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    transition: color 0.3s ease !important;
}

.introjs-learn-more-btn:hover {
    color: #2557a7 !important;
    /* Darker blue on hover */
}

.gs-id-0>.grid-stack-item>.ui-resizable-se {
    right: 0px;
}

.edit-icon {
    position: relative;
    right: 0px;
    top: 70px;
    z-index: 1;
}

.edit-icon i {
    background-color: black !important;
    color: white !important;
    border: 2px solid white !important;
}

.site-primary-toggle {
    font-size: larger;
}

.site-primary-toggle {
    cursor: pointer !important;
}

/* Button submitting effect */
.btn-submitting {
    position: relative;
    background: linear-gradient(270deg, #007bff, #0056b3, #007bff);
    background-size: 400% 400%;
    color: #fff !important;
    border-color: #0056b3 !important;
    animation: flowing 2s linear infinite;
    pointer-events: none;
    /* prevent clicks while submitting */
}

@keyframes flowing {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}