:root {
    --primary-color: #031242;
    --secondary-color: #0096F7;
    --background-color: #FBFDFF;
    --font-primary: 'Switzer', sans-serif;
    --font-secondary: 'Swansea-bold', sans-serif;
    --primary-success: lightgreen;
    --footer-color: #6c757d;
}

/* Apply rounded corners to the body */
body {
    border-radius: 15px;
    /* Adjust this value for desired roundness */
    overflow: auto;
    /* Enable scrolling */
    margin: 0;
    /* Reset margin */
    padding: 0;
    /* Reset padding */
    min-height: 100%;
    /* Ensure body covers the full viewport */
    background: linear-gradient(to bottom right, #333e65, #203561, #031242);
    /* Gradient background */
    background-attachment: fixed;
    /* Ensures the gradient stays fixed and covers content */
    background-size: cover;
    /* Ensures the gradient covers the entire area */
    font-family: var(--font-primary);
    /* Use primary font */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Business Central font */
}


/* Narrow scrollbar styling */
body::-webkit-scrollbar {
    width: 8px;
    /* Scrollbar width */
}

body::-webkit-scrollbar-thumb {
    background-color: #888;
    /* Scrollbar color */
    border-radius: 10px;
    /* Rounded scrollbar */
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* Color when hovered */
}

/* Ensure html and body elements take up full height */
html,
body {
    /* height: 100%; */
    position: relative;
    /* To ensure footer positioning works */
}

/* Main content area */
.container {
    /* min-height: 100%;           Ensures content spans full viewport height */
    padding-bottom: 5rem;
    /* Add space for the footer */
}

/* Footer at the bottom */
footer {
    /* position: fixed;            Stick footer to the bottom of the viewport */
    bottom: 0;
    width: 100%;
    min-height: 2rem;
    /* Footer height */
    text-align: center;
    background: #000000;
    /* Footer background color */
    color: var(--footer-color);
    /* Footer text color */
    padding: 0.5rem;
}

/* Right panel styling */
.right-panel {
    position: fixed;
    /* Fixed position */
    top: 0;
    right: 0;
    /* Aligns to the right */
    width: 300px;
    height: 100%;
    background-color: #ffffff;
    border-left: 1px solid #d1d1d1;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
    /* Initially hidden off-screen */
}

.right-panel.show {
    transform: translateX(0);
    /* Show panel when toggled */
}

/* Vertical toggle button */
.vertical-toggle-button {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 1100;
    /* Higher z-index than the panel */
}

/* Transition effects for dynamic elements */
#mainContent {
    transition: width 0.3s ease;
    min-height: 45.4em;
    padding: 2em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Business Central font */
}

.mainContent {
    transition: width 0.3s ease;
    min-height: 45.4em;
    padding: 2em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Business Central font */
}

#providerSidebar {
    transition: all 0.3s ease;
}

/* Table header styling */
.table th {
    background-color: #e3e3e3;
    /* Header background */
    color: #333;
    /* Header text color */
}

.min-vh-50 {
    min-height: 50vh;
    /* 50% of the viewport height */
}

.min-vh-55 {
    min-height: 55vh;
    /* 55% of the viewport height */
}

.min-vh-58 {
    min-height: 58vh;
    /* 58% of the viewport height */
}

.min-vh-70 {
    min-height: 70vh;
    /* 70% of the viewport height */
}

.min-vh-65 {
    min-height: 65vh;
    /* 65% of the viewport height */
}

.min-vh-60 {
    min-height: 60vh;
    /* 60% of the viewport height */
}

.min-vh-100 {
    min-height: 100vh;
    /* Full viewport height */
}

.min-h-200px {
    min-height: 200px;
    /* Specific pixel height */
}

.min-h-300px {
    min-height: 300px;
    /* Specific pixel height */
}

.min-h-400px {
    min-height: 400px;
    /* Specific pixel height */
}

.min-h-500px {
    min-height: 500px;
    /* Specific pixel height */
}
.item-name {
    margin-right:0.2em;
}
#subtotal{
    /* margin-left:0.2em; */
}