@import '~antd/lib/style/color/colorPalette.less';
@import '~antd/dist/antd.less';
@import '~antd/lib/style/themes/dark.less';
@import '../UtilityClass.less';

// @primary-color: #5b9af8;
@primary-color: @blue-7;
@error-color: @red-8;
// @border-radius-base: 4px;

// @component-background: #303030;
// @body-background: #303030;
// @popover-background: #303030;
// @border-color-base: #6f6c6c;
// @border-color-split: #424242;
// @table-header-sort-active-bg: #424242;
// @card-skeleton-bg: #424242;
// @skeleton-color: #424242;
// @table-header-sort-active-bg: #424242;

// ----------------------- //

@layout-body-background: #ffffff00;
@layout-header-background: #1f2327;
@layout-sider-background: #000000;

// MENU Styler
@menu-bg: @layout-sider-background;
// @menu-popup-bg: #ff4;
@menu-item-color: white;
@menu-highlight-color: white;
@menu-item-active-bg: lighten(@layout-sider-background, 30%);
@menu-inline-submenu-bg: lighten(@layout-sider-background, 15%);
@menu-item-active-border-width: 5px;
@layout-trigger-color: #f3a;
@border-color-base: fade(#fff, 30%);
@select-dropdown-bg: lighten(@layout-header-background, 10%);

//buttons
@btn-primary-bg: @primary-color;

//checkboxes
@checkbox-color: @primary-color;

.App {
    text-align: center;
}

// .ant-layout {
//     background: #ffffff00;
// }

body {
    overflow-y: hidden;
    max-height: 100vh;
    // position: relative;
}

#root {
    height: 100%;
    background-color: @layout-header-background;
}

// .logged-in-view class styling is written in dashboard.css

.ant-layout-content {
    overflow-y: auto;
    scrollbar-width: thin;
}

.ant-layout-header {
    padding: 0 32px;
}

.ant-layout-has-sider {
    height: inherit;
}

// below CSS is container for Header + Content
.ant-layout-sider + .ant-layout, 
.main-sider-menu + .ant-layout {
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.ant-layout > .ant-layout > header.ant-layout-header + section.ant-layout {
    flex: 0 1 auto;
    overflow-y: auto;
    scrollbar-width: thin;
}

// to override the style of ant-table-cells
body .ant-table-tbody > tr > td.ant-table-cell, .ant-table tfoot > tr > td.ant-table-cell {
    padding: 3px 16px;
    height: 40px;
}

body .ant-table > .ant-table-container > .ant-table-content > table > thead > tr > th {
    background-color: @layout-header-background;
    padding-inline: 16px;
}

.ant-empty {
    margin: 24px 8px;
}