/*
<!---------------------------------------------------------------------- 
1 - MainLayout.razor
------------------------------------------------------------------------>
<div class="main-layout">
    <div class="navbar-container">
        <!-- Contenu de la barre de navigation principale -->
    </div>
    <div class="main-content">
        <div class="sidebar-container">
            <!-- Contenu de la barre latérale principale -->
        </div>
        <div class="page-container">
            <!-- Contenu de la page razor -->
            @Body
        </div>
    </div>
</div>

<!---------------------------------------------------------------------- 
2 - Page Razor / Structute avec "filter-panel" a l'exterieur de "tabs-container" 
------------------------------------------------------------------------>
<div class="dual-panel-wrapper">
    <!-- Wrapper pour les panneaux de filtres et de contenu -->
    <div class="filter-panel">
        <!-- Contenu du panneau de filtres -->
    </div>
    <div class="tabs-container">
        <div class="content-panel">
            <!-- Contenu du panneau principal -->
        </div>
    </div>
</div>

<!---------------------------------------------------------------------- 
3 - Page Razor / Structute avec "filter-panel" a l'interieur de "tabs-container" 
------------------------------------------------------------------------>
<div class="tabs-container">
    <div class="dual-panel-wrapper">
        <!-- Wrapper pour les panneaux de filtres et de contenu -->
        <div class="filter-panel">
            <!-- Contenu du panneau de filtres -->
        </div>
        <div class="content-panel">
            <!-- Contenu du panneau principal -->
        </div>
    </div>
</div>
*/

.main-layout {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    background-color: transparent;
    background-image: url("../images/Background.svg");
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: bottom;
    background-size: 70%;
    overflow: hidden;
}

.main-layout .navbar-container {
    height: 60px;
    background-color: #0f47a7;
}

.main-layout .main-content {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: calc(100vh - 58px);
    min-height: calc(100vh - 58px);
    max-height: calc(100vh - 58px);
    display: flex;
    overflow: hidden;
}

.main-layout .main-content .sidebar-container {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    z-index: 480;
    background-color: black;
    overflow-y: auto;
    overflow-x: hidden;
    background-image: none !important;
    scrollbar-width: thin;
}

.main-layout .main-content .page-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* tabs-container */
.page-container .tabs-container {
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-container .tabs-container .tab-content {
    display: flex;
    flex-direction: initial;
    flex: 1;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0px;
}

.page-container .tabs-container .tab-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
}


/* filter-panel */
.page-container .filter-panel {
    position: relative;
    display: block;
    padding: 54px 5px 0px 8px;
    margin-top: 0px;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    width: var(--filter-panel-width);
    min-width: var(--filter-panel-width);
    max-width: var(--filter-panel-width);
    background-color: transparent;
    border-right: 0px solid #dbdbdb;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.page-container .filter-panel .collapse-filter-panel {
    width: 100%;
    justify-content: right;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}

.page-container .filter-panel .grp {
    margin-bottom: 8px;
}

.page-container .tabs-container .filter-panel {
    padding: 2px 5px 0px 5px;
    margin-top: 0px;
    height: calc(100% - 0px);
    min-height: calc(100% - 0px);
    max-height: calc(100% - 0px);
    scrollbar-width: thin;
}

/* filter-panel-collapsed */
.main-content .filter-panel-collapsed {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.main-content .collapse-filter-panel .bi-arrow-left-circle {
    margin: 6px;
    font-size: 20px;
    color: black;
}

.main-content .filter-panel-collapsed .bi-arrow-right-circle-fill {
    margin: 6px 4px 6px 8px;
    font-size: 20px;
    color: black;
}

.main-content .filter-panel-collapsed i {
    color: black;
}

.main-content.side-bar-visible .filter-panel-collapsed {
    background-color: transparent !important;
}

.main-content.side-bar-not-visible .filter-panel-collapsed {
    background-color: var(--filterPanelCollapsedBgColor) !important;
}


/* content-panel */
.page-container .content-panel {
    display: flex;
    flex-direction: inherit;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
}

.page-container .content-panel.overflow-hidden {
    overflow: hidden;
}


/* dual-panel-wrapper */
.page-container .dual-panel-wrapper {
    display: flex;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.page-container .dual-panel-wrapper .tabs-container {
    display: flex;
    flex: 1;
}

.page-container .dual-panel-wrapper .tabs-container .content-panel {
    display: contents;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.page-container .dual-panel-wrapper .content-panel {
    width: calc(100% - var(--filter-panel-width));
    min-width: calc(100% - var(--filter-panel-width));
    max-width: calc(100% - var(--filter-panel-width));
}

.full-screen {
    height: 100%;
    width: 100%;
    max-height: 100%;
    min-height: 100%;
    max-width: 100%;
    min-width: 100%;
    overflow:hidden;
}

/* dxbl-grid .full-screen */
.dxbl-grid {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}