/* Define a new breakpoints for extra-wide screens */
@media (min-width: 2000px) {
    .col-3xl-1 { flex: 0 0 8.33%; max-width: 8.33%; }
    .col-3xl-2 { flex: 0 0 16.66%; max-width: 16.66%; }
    .col-3xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-3xl-4 { flex: 0 0 33.33%; max-width: 33.33%; }
    .col-3xl-5 { flex: 0 0 41.66%; max-width: 41.66%; }
    .col-3xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-3xl-7 { flex: 0 0 58.33%; max-width: 58.33%; }
    .col-3xl-8 { flex: 0 0 66.66%; max-width: 66.66%; }
    .col-3xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-3xl-10 { flex: 0 0 83.33%; max-width: 83.33%; }
    .col-3xl-11 { flex: 0 0 91.66%; max-width: 91.66%; }
    .col-3xl-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 2500px) {
    .col-4xl-1 { flex: 0 0 8.33%; max-width: 8.33%; }
    .col-4xl-2 { flex: 0 0 16.66%; max-width: 16.66%; }
    .col-4xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-4xl-4 { flex: 0 0 33.33%; max-width: 33.33%; }
    .col-4xl-5 { flex: 0 0 41.66%; max-width: 41.66%; }
    .col-4xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-4xl-7 { flex: 0 0 58.33%; max-width: 58.33%; }
    .col-4xl-8 { flex: 0 0 66.66%; max-width: 66.66%; }
    .col-4xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-4xl-10 { flex: 0 0 83.33%; max-width: 83.33%; }
    .col-4xl-11 { flex: 0 0 91.66%; max-width: 91.66%; }
    .col-4xl-12 { flex: 0 0 100%; max-width: 100%; }
}

:root {
    --sidebar-width: 250px;
}

.offcanvas {
    --bs-offcanvas-width: 600px;
}

.center-box {
    max-width: 400px;
}

/* bugfix for offcanvas add padding when there is a scrollbar */
body {
    padding-right: 0 !important
}

/* Sidebar responsive behavior */
@media (min-width: 768px) {
    #mainContent {
        margin-left: var(--sidebar-width) !important;
    }
}

@media (max-width: 767px) {
    .sidebar-nav {
        position: static !important;
        width: auto !important;
        height: auto !important;
        z-index: auto !important;
    }
}

/* Sidebar positioning */
.sidebar-nav {
    width: var(--sidebar-width);
    height: 100vh;
    top: 0;
    left: 0;
    z-index: auto;
}

/* Nav bar actions
Floating bottom right for small screens
*/
.nav-actions {
    position: static;
}

@media (max-width: 767.98px) {
    .nav-actions {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        z-index: 1030;
    }
}

.nav-link.active {
    font-weight: bold;
}

/* Login form overrides */
.login-form input[type="text"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  
.login-form input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* table styles */
tr.clickable-row {
    cursor: pointer;
}

.thumbnail {
    width: 32px;
    height: 32px;
    object-fit: cover;
}

.thumbnail-placeholder {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 0.375rem; /* match .rounded */
    background-color: var(--bs-tertiary-bg);
}

.placeholder-image {
    width: 100%;
    height: 100%;
    background-color: var(--bs-secondary);
}

.offcanvas.agent-offcanvas {
    top: 59px;
}

/* button additions */


.dropdown-toggle.caret-right::after {
    margin-left: auto;
 }