/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* Light mode: even rows get a subtle grey tint */
html:not(.dark-layout) .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #f2f4f6 !important;
}

/* Dark mode: override table-striped row colors to match dark theme */
.dark-layout .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #242b3d !important;
}

.dark-layout .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #283046 !important;
}

.dark-layout .table-striped > tbody > tr td,
.dark-layout .table-striped > tbody > tr th {
    color: #b4b7bd !important;
}

/* Dark mode: table-light thead should not be white */
.dark-layout .table > thead.table-light th,
.dark-layout .table > thead.table-light td {
    background-color: #343d55 !important;
    color: #d0d2d6 !important;
    border-color: #3b4253 !important;
}

.app-logo-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.app-logo-auth {
    max-height: 4.5rem;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .auth-wrapper.auth-cover .brand-logo {
        left: 2.5rem !important;
        top: 2.5rem !important;
        right: auto !important;
        width: auto !important;
        margin: 0 !important;
        justify-content: flex-start !important;
    }

    .auth-wrapper.auth-cover .brand-logo .app-logo-auth {
        margin: 0 !important;
    }
}

.auth-wrapper .brand-logo .app-logo-auth,
.misc-wrapper .brand-logo .app-logo-auth {
    max-width: min(220px, 70vw);
}

.app-logo-preview {
    width: 80px;
    height: 80px;
    padding: 0.25rem;
    background-color: #fff;
    object-fit: contain;
}

.app-logo-policy {
    max-width: min(260px, 80vw);
    max-height: 80px;
    margin: 0 auto;
}

.app-logo-landing {
    max-width: min(190px, 46vw);
    max-height: 64px;
}

.app-logo-email {
    max-width: 180px;
    max-height: 72px;
    margin: 0 auto;
}

.main-menu .app-sidebar-logo-header {
    height: 8rem !important;
    padding: 0.35rem 0.85rem !important;
}

.main-menu .app-sidebar-logo-header .navbar-nav {
    align-items: center;
    height: 100%;
    width: 100%;
}

.main-menu .app-sidebar-logo-item {
    display: flex;
    align-items: center;
    width: calc(100% - 2.25rem) !important;
    height: 100%;
    min-width: 0;
}

.main-menu .app-sidebar-logo-link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0;
}

.main-menu .app-sidebar-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 96px;
    background-color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.main-menu .app-sidebar-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: scale(1.5) !important;
    transition: all 0.3s ease;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .app-sidebar-logo-header {
    padding: 0.35rem 0.5rem !important;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .app-sidebar-logo-item {
    width: 100% !important;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .app-sidebar-logo-wrap {
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    margin: 0 auto;
}