/*#region Importing Fonts */
/* Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Nunito+Sans */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
/*#endregion */

/*#region Import Bootstrap Icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/*#endregion */

/*#region Root Variables */
:root {
    /*#region colors */
    --cfs-primary: #eab310;
    --cfs-secondary: #2e5291;
    --cfs-success: #01861c;
    --cfs-warning: #c10202;
    /*#endregion */

    /*#region Text Sizing */
    --cfs-default-text-size: .875rem;
    --cfs-topRow-text-size: .75rem;
    --cfs-Sidebar-text-size: .875rem;
    --cfs-Sidebar-text-size-hover: .925rem;
    /*#endregion */

    /*#region Icons Sizing */
    --cfs-default-appIcon-text-size: 1.25rem;
    --cfs-header-appIcon-text-size: 1.75rem;
    --cfs-dropdown-appIcon-text-size: 1.25rem;
    --cfs-sidebar-appIcon-text-size: 1.5rem;
    --cfs-table-appIcon-text-size: 1rem;
    --cfs-breadcrums-Icon-text-size: .85rem;
    /*#endregion */

    /*#region Transtion Variables */
    --cfs-Transition-01: all 300ms ease-in-out;
    --cfs-Transition-02: all 300ms ease-in-out;
    --cfs-Transition-03: all 300ms ease-in-out;
    --cfs-Transition-04: all 300ms ease-in-out;
    /*#endregion */

    /*#region Light Theme */
    --cfs-primary-light: #eab310;
    --cfs-secondary-light: #8494b0;

    --cfs-BodyColor-light: #2d2d2d;

    --cfs-headerWrapper-bg-light: #F2F3F4;
    --cfs-contentWrapper-bg-light: #F2F3F4;
    --cfs-sidebarWrapper-bg-light: #ffffff;
    --cfs-mainpanelWrapper-bg-light: #F2F3F4;

    --cfs-headerSection-bg-light: #ffffff;
    --cfs-sidebarSection-bg-light: #ffffff;
    --cfs-toprowSection-bg-light: #ffffff;
    --cfs-mainpanelSection-bg-light: #ffffff;



    --cfs-menu-bg-light: #ffffff;
    --cfs-menuItem-bg-hover-light: #cdcaca;
    --cfs-menu-shadow-color-light: rgba(0, 0, 0, 0.23);

    --cfs-AppIcon-color-light: #0e0d0d;
    --cfs-AppIcon-headerSection-color-light: #0e0d0d;
    --cfs-AppIcon-sidebarSection-color-light: #0e0d0d;
    --cfs-AppIcon-toprowSection-color-light: #0e0d0d;
    --cfs-AppIcon-hover-color-light: #fcc000;

    --cfs-border-color-light: #000000;

    --cfs-shadow-color-light: rgba(0, 0, 0, 0.25);

    --cfs-text-color-light: #ffffff;
    --cfs-text-color-headerSection-light: #000000;
    --cfs-text-color-sidebarSection-light: #000000;
    --cfs-text-color-toprowSection-light: #000000;
    --cfs-text-color-mainpanelSection-light: #000000;

    --cfs-wrappers-boarder-color-light: #151515;

    --cfs-Ul-Item-Sidebar-selected-color-light: #fcc000;

    --cfs-scrollbar-track-bg-light: #a2a2a2;
    --cfs-scrollbar-thumb-bg-light: #151515;
    --cfs-scrollbar-thumb-hover-bg-light: #6004a7;
    --cfs-scrollbar-thumb-border-color-light: #151515;
    /*#endregion */

    /*#region Dark Theme */
    --cfs-primary-dark: #141824;
    --cfs-secondary-dark: #07c120;
    --cfs-BodyColor-dark: #212733;

    --cfs-headerWrapper-bg-dark: #383c47;
    --cfs-contentWrapper-bg-dark: #383c47;
    --cfs-sidebarWrapper-bg-dark: #141824;
    --cfs-mainpanelWrapper-bg-dark: #383c47;

    --cfs-headerSection-bg-dark: #141824;
    --cfs-sidebarSection-bg-dark: #141824;
    --cfs-toprowSection-bg-dark: #141824;
    --cfs-mainpanelSection-bg-dark: #141824;

    --cfs-menu-bg-dark: #141824;
    --cfs-menuItem-bg-hover-dark: #4e4e4e;
    --cfs-menu-shadow-color-dark: rgba(255, 255, 255, 0.23);

    --cfs-AppIcon-headerSection-color-dark: #ffffff;
    --cfs-AppIcon-sidebarSection-color-dark: #ffffff;
    --cfs-AppIcon-toprowSection-color-dark: #ffffff;
    --cfs-AppIcon-color-dark: #ffffff;
    --cfs-AppIcon-hover-color-dark: #fcc000;

    --cfs-border-color-dark: #aeadad;

    --cfs-shadow-color-dark: rgba(255, 255, 255, 0.25);

    --cfs-text-color-dark: #ffffff;
    --cfs-text-color-headerSection-dark: #ffffff;
    --cfs-text-color-sidebarSection-dark: #ffffff;
    --cfs-text-color-toprowSection-dark: #ffffff;
    --cfs-text-color-mainpanelSection-dark: #ffffff;

    --cfs-wrappers-boarder-color-dark: #717070;

    --cfs-Ul-Item-Sidebar-selected-color-dark: #fcc000;

    --cfs-scrollbar-track-bg-dark: #7e7d7d;
    --cfs-scrollbar-thumb-bg-dark: #ffffff;
    --cfs-scrollbar-thumb-hover-bg-dark: #6004a7;
    --cfs-scrollbar-thumb-border-color-dark: #ffffff;

    /*#endregion */


}

/*#endregion */

/*#region Body Default Theme */
body {

    /* Define default theme (light) */
    --cfs-primary: var(--cfs-primary-light);
    --cfs-secondary: var(--cfs-secondary-light);

    --cfs-Body-bg-Color: var(--cfs-BodyColor-light);

    --cfs-headerWrapper-bg: var(--cfs-headerWrapper-bg-light);
    --cfs-contentWrapper-bg: var(--cfs-contentWrapper-bg-light);
    --cfs-sidebarWrapper-bg: var(--cfs-sidebarWrapper-bg-light);
    --cfs-mainpanelWrapper-bg: var(--cfs-mainpanelWrapper-bg-light);

    --cfs-headerSection-bg: var(--cfs-headerSection-bg-light);
    --cfs-sidebarSection-bg: var(--cfs-sidebarSection-bg-light);
    --cfs-toprowSection-bg: var(--cfs-toprowSection-bg-light);
    --cfs-mainpanelSection-bg: var(--cfs-mainpanelSection-bg-light);

    --cfs-menu-bg: var(--cfs-menu-bg-light);
    --cfs-menuItem-bg-hover: var(--cfs-menuItem-bg-hover-light);
    --cfs-menu-shadow-color: var(--cfs-menu-shadow-color-light);

    --cfs-AppIcon-headerSection-color: var(--cfs-AppIcon-headerSection-color-light);
    --cfs-AppIcon-sidebarSection-color: var(--cfs-AppIcon-sidebarSection-color-light);
    --cfs-AppIcon-toprowSection-color: var(--cfs-AppIcon-toprowSection-color-light);
    --cfs-AppIcon-color: var(--cfs-AppIcon-color-light);
    --cfs-AppIcon-hover-color: var(--cfs-AppIcon-hover-color-light);

    --cfs-border-color: var(--cfs-border-color-light);

    --cfs-shadow-color: var(--cfs-shadow-color-light);

    --cfs-text-color: var(--cfs-text-color-light);
    --cfs-text-color-headerSection: var(--cfs-text-color-headerSection-light);
    --cfs-text-color-sidebarSection: var(--cfs-text-color-sidebarSection-light);
    --cfs-text-color-toprowSection: var(--cfs-text-color-toprowSection-light);
    --cfs-text-color-mainpanelSection: var(--cfs-text-color-mainpanelSection-light);

    --cfs-Ul-Item-Sidebar-selected-color: var(--cfs-Ul-Item-Sidebar-selected-color-light);

    --cfs-scrollbar-track-bg: var(--cfs-scrollbar-track-bg-light);
    --cfs-scrollbar-thumb-bg: var(--cfs-scrollbar-thumb-bg-light);
    --cfs-scrollbar-thumb-hover-bg: var(--cfs-scrollbar-thumb-hover-bg-light);
    --cfs-scrollbar-thumb-border-color: var(--cfs-scrollbar-thumb-border-color-light);

    background-color: var(--cfs-BodyColor);
    color: var(--cfs-text-color);
    font-size: var(--cfs-default-text-size);

    /* transition: background-color 0.5s ease, color 0.5s ease; */
}

/*#endregion */

/*#region Dark Theme Definition */
.Dark-Theme {
    --cfs-primary: var(--cfs-primary-dark);

    --cfs-Body-bg-Color: var(--cfs-BodyColor-dark);

    --cfs-headerWrapper-bg: var(--cfs-headerWrapper-bg-dark);
    --cfs-contentWrapper-bg: var(--cfs-contentWrapper-bg-dark);
    --cfs-sidebarWrapper-bg: var(--cfs-sidebarWrapper-bg-dark);
    --cfs-mainpanelWrapper-bg: var(--cfs-mainpanelWrapper-bg-dark);

    --cfs-headerSection-bg: var(--cfs-headerSection-bg-dark);
    --cfs-sidebarSection-bg: var(--cfs-sidebarSection-bg-dark);
    --cfs-toprowSection-bg: var(--cfs-toprowSection-bg-dark);
    --cfs-mainpanelSection-bg: var(--cfs-mainpanelSection-bg-dark);

    --cfs-menu-bg: var(--cfs-menu-bg-dark);
    --cfs-menuItem-bg-hover: var(--cfs-menuItem-bg-hover-dark);
    --cfs-menu-shadow-color: var(--cfs-menu-shadow-color-dark);

    --cfs-AppIcon-headerSection-color: var(--cfs-AppIcon-headerSection-color-dark);
    --cfs-AppIcon-sidebarSection-color: var(--cfs-AppIcon-sidebarSection-color-dark);
    --cfs-AppIcon-toprowSection-color: var(--cfs-AppIcon-toprowSection-color-dark);
    --cfs-AppIcon-color: var(--cfs-AppIcon-color-dark);
    --cfs-AppIcon-hover-color: var(--cfs-AppIcon-hover-color-dark);

    --cfs-border-color: var(--cfs-border-color-dark);

    --cfs-shadow-color: var(--cfs-shadow-color-dark);

    --cfs-text-color: var(--cfs-text-color-dark);
    --cfs-text-color-headerSection: var(--cfs-text-color-headerSection-dark);
    --cfs-text-color-sidebarSection: var(--cfs-text-color-sidebarSection-dark);
    --cfs-text-color-toprowSection: var(--cfs-text-color-toprowSection-dark);
    --cfs-text-color-mainpanelSection: var(--cfs-text-color-mainpanelSection-dark);

    --cfs-Ul-Item-Sidebar-selected-color: var(--cfs-Ul-Item-Sidebar-selected-color-dark);

    --cfs-scrollbar-track-bg: var(--cfs-scrollbar-track-bg-dark);
    --cfs-scrollbar-thumb-bg: var(--cfs-scrollbar-thumb-bg-dark);
    --cfs-scrollbar-thumb-hover-bg: var(--cfs-scrollbar-thumb-hover-bg-dark);
    --cfs-scrollbar-thumb-border-color: var(--cfs-scrollbar-thumb-border-color-dark);
}

/*#endregion */

/*#region Theme Toggler */
.Theme-Toggle-Btn {
    cursor: pointer;
    height: 35px;
    width: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    margin: 1px;
    background-color: transparent;
    transition: all 100ms ease-in-out;
}

.DarkModeIcon {
    color: #02178a;
    font-size: var(--cfs-header-appIcon-text-size);
}

.DarkModeIcon:hover {
    color: #0b2bdd;
    font-size: var(--cfs-header-appIcon-text-size);
}

.LightModeIcon {
    color: #fcc000;
    font-size: var(--cfs-header-appIcon-text-size);
}

.LightModeIcon:hover {
    color: #f18509;
    font-size: var(--cfs-header-appIcon-text-size);
}

.Theme-Toggle-Btn .DarkModeIcon {
    display: none;
}

.Dark-Theme .DarkModeIcon {
    display: block;
}

.Dark-Theme .LightModeIcon {
    display: none;
}

/*#endregion */

/*#region Html and Body */
* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    /* font-family: "Roboto", sans-serif; */
    /* font-family: "Montserrat", sans-serif; */
    /* font-family: "Poppins", sans-serif; */
    font-family: "Nunito Sans", sans-serif;
}

html {
    box-sizing: border-box;
    font-size: 16px;
}

html,
body {
    margin: 0;
    padding: 0;
    border: none;
    /* height: 100%; */
    width: 100%;
    font-weight: 400;

    line-height: 1.25rem;
    scroll-behavior: smooth;
    /* overflow: hidden; */
    /* overflow-y: hidden; */
    /* overflow-x: hidden; */
}

body {
    height: 100dvh;
}



/*#endregion */

/*#region Elements Default */
h1,
h2,
h3,
h4,
h5,
h6,
p,
i {
    color: var(--cfs-text-color);
}

/*#endregion */

/*#region Scrollable classes*/
.scrollable {
    overflow-y: auto;
    scroll-behavior: smooth;
    /* overflow-x: hidden; */
}

/* Apply custom scrollbars for webkit-based browsers (Chrome, Safari, etc.) */
.scrollable::-webkit-scrollbar {
    width: 6px;
    /* Width of the scrollbar */
}

.scrollable::-webkit-scrollbar-track {
    background: var(--cfs-scrollbar-track-bg);
}

.scrollable::-webkit-scrollbar-thumb {
    background-color: var(--cfs-scrollbar-thumb-bg);
    /* Scrollbar thumb */
    border-radius: 0px;
    /* Rounded corners for the thumb */
    border: 1px solid var(--cfs-scrollbar-thumb-border-color);
    /* Some spacing between thumb and track */
}

.scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--cfs-scrollbar-thumb-hover-bg);
    /* Darker on hover */
}

/*#endregion */

/*#region Scrollable Table */
.scrollable-table {
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Apply custom scrollbars for webkit-based browsers (Chrome, Safari, etc.) */
.scrollable-table::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.scrollable-table::-webkit-scrollbar-track {
    background: var(--cfs-scrollbar-track-bg);
}

.scrollable-table::-webkit-scrollbar-thumb {
    background-color: var(--cfs-scrollbar-thumb-bg);
    /* Scrollbar thumb */
    border-radius: 0px;
    /* Rounded corners for the thumb */
    border: 1px solid var(--cfs-scrollbar-thumb-border-color);
    /* Some spacing between thumb and track */
}

.scrollable-table::-webkit-scrollbar-thumb:hover {
    background-color: var(--cfs-scrollbar-thumb-hover-bg);
    /* Darker on hover */
}

/*#endregion */

/*#region Logos */
.logo-large {
    width: auto;
    max-height: 35px;
}

.logo-large-link {
    max-width: 200px;
}

.logo-small {
    width: auto;
    max-height: 18px;
}

/*#endregion */

/*#region Bootstrap Elements */
.btn-link {
    text-decoration: none;
    margin: 0px;
}

/*#endregion */

/*#region Icons Scaling */
.icon-scale-50 {
    scale: .50;
}

.icon-scale-75 {
    scale: .75;
}

.icon-scale-90 {
    scale: .90;
}

.icon-scale-1 {
    scale: 1.1;
}

.icon-scale-2 {
    scale: 1.2;
}

.icon-scale-3 {
    scale: 1.3;
}

/*#endregion */

/*#region Wrappers */
.header-wrapper {
    height: 50px;
    background-color: var(--cfs-headerWrapper-bg);
    align-content: center;

}

.content-wrapper {
    background-color: var(--cfs-contentWrapper-bg);
    height: calc(100% - 50px);
    /* border-top: 1px solid var(--cfs-border-color); */
}

.sidebar-wrapper {
    background-color: var(--cfs-sidebarWrapper-bg);
    min-width: 160px;
    margin-right: 2px;
    box-shadow: 1px -1px 2px var(--cfs-shadow-color);
    /* border-right: 1px solid var(--cfs-border-color); */
}

.mainpanel-wrapper {
    background-color: var(--cfs-mainpanelWrapper-bg);

}


/*#endregion */

/*#region Sections */

/*#region Header Sections */
.header-large {
    background-color: var(--cfs-headerSection-bg);
    color: var(--cfs-text-color-headerSection);
}

.header-small {
    background-color: var(--cfs-headerSection-bg);
    color: var(--cfs-text-color-headerSection);
    display: none;
}

.logo-section {
    background-color: var(--cfs-headerSection-bg);
    color: var(--cfs-text-color-headerSection);
    height: 100%;
    align-content: center;
}

.header-center-section {
    background-color: var(--cfs-headerSection-bg);
    color: var(--cfs-text-color-headerSection);
    height: 100%;
    align-content: center;
}

.header-welcome-section {
    background-color: var(--cfs-headerSection-bg);
    color: var(--cfs-text-color-headerSection);
    height: 100%;
    align-content: center;
}

.icons-section {
    background-color: var(--cfs-headerSection-bg);
    height: 100%;
    align-content: center;
    min-width: fit-content;
    max-width: fit-content;
}

.sidebar-toggler-section {
    background-color: var(--cfs-headerSection-bg);
    color: var(--cfs-text-color-headerSection);
    height: 100%;
    align-content: center;
}

/*#endregion */


.sidebar-section {
    background-color: var(--cfs-sidebarSection-bg);
    color: var(--cfs-text-color-sidebarSection);
    align-items: start;
    min-width: 150px;

}

.TopRow-section {
    height: 30px;
    background-color: var(--cfs-toprowSection-bg);
    color: var(--cfs-text-color-toprowSection);
    font-size: var(--cfs-topRow-text-size);
    box-shadow: 0px -1px 2px var(--cfs-shadow-color);
}

.TopRowWelcome-section {
    background-color: var(--cfs-toprowSection-bg);
    color: var(--cfs-text-color-toprowSection);
    font-size: var(--cfs-topRow-text-size);
    height: 100%;
    align-content: center;
    min-width: fit-content;
}

.TopRowBreadcrum-section {
    min-width: fit-content;
}

.mainpanel-section {
    /* 36px from toprow + 4px from maring bottom of TopRow*/
    height: calc(100% - 34px);
    background-color: var(--cfs-mainpanelSection-bg);
    color: var(--cfs-text-color-mainpanelSection);
    box-shadow: -1px -1px 2px var(--cfs-shadow-color);
    /* border: 1px solid var(--cfs-border-color); */
    /* box-shadow: -1px -1px 2px var(--cfs-shadow-color); */
}



/*#endregion */

/*#region Header Classes */
.header-menu {
    min-width: 10rem;
    /* width: 16rem; */
    height: 16rem;
    font-size: .9rem;
    background-color: var(--cfs-menu-bg);
    padding: 4px 4px;
    border-radius: 15px;
}

.dropdown-menu {
    padding: 4px 4px;
    border: none;
    box-shadow: 0 3px 6px var(--cfs-menu-shadow-color);
}

.dropdown-item {
    color: var(--cfs-text-color);
    padding-left: 4px;
    padding-right: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

.dropdown-item:hover {
    background-color: var(--cfs-menu-bg) !important;
    /* color: var(--cfs-text-color); */
    color: #fcc000;
}

.dropdown-item:hover i {
    color: #fcc000;
}

.menu-title {
    margin: 4px 4px;
    text-align: center;
}

.menu-divider {
    margin: 4px auto;
    width: 95%;
}

.menu-link :hover {
    color: #df1fdf;
}

.welcome-message-content {
    font-size: var(--cfs-topRow-text-size);
    margin: 0px 1px;
    padding: 0px 0px;
    color: var(--cfs-text-color-toprowSection);
}

/*#endregion */

/*#region OffCanvas Sidebar */
.offcanvas-sidebar {
    position: fixed;
    top: 50px;
    height: calc(100% - 58px);
    width: 208px;
    max-width: 80%;
    background-color: var(--cfs-sidebarSection-bg);
    z-index: 1050;
}

.offcanvas {
    z-index: 1060;
}

.offcanvas-header {
    padding: 8px 8px;
    margin: 0px 0px;
    background-color: var(--cfs-sidebarSection-bg);
}

.btn-close {
    padding: 0px 0px;
}




/*#endregion */

/*#region Breadcrum */
.app-breadcrum {
    background-color: var(--cfs-toprowSection-bg);
    color: var(--cfs-text-color-toprowSection);
    align-content: center;
    margin: 2px 2px;
    padding: 2px 0px;
    font-size: var(--cfs-topRow-text-size);
}

.app-breadcrum li {
    display: inline;
}

.app-breadcrum a {
    color: var(--cfs-text-color-toprowSection);
    font-size: var(--cfs-topRow-text-size);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.app-breadcrum li:last-child .breadcrum-icon {
    display: none;
}


/*#endregion */

/*#region Sidebar UnOrdered Lists */

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 150ms ease-in-out;
}

.UL-Sidebar {
    list-style: "- ";
    padding-left: 35px;
    width: 100%;
}

.Ul-Item-Sidebar {
    cursor: pointer;
    color: var(--cfs-text-color-sidebarSection);
    width: 100%;
    margin-bottom: 5px;
    /* transition: background-color 550ms ease; */
    transition: color 100ms ease;
}

.Ul-Item-Sidebar:hover {
    /* background-color: #f0f0f0; */
    color: var(--cfs-Ul-Item-Sidebar-selected-color);
}

.Ul-Item-Sidebar li:hover::marker {
    color: var(--cfs-Ul-Item-Sidebar-selected-color);
}

.Ul-Item-Sidebar.active::marker {
    color: var(--cfs-Ul-Item-Sidebar-selected-color);
}

.Ul-Item-Sidebar a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

.Ul-Item-Sidebar a.nav-link:hover {
    color: var(--cfs-Ul-Item-Sidebar-selected-color);
}

.Ul-Item-Sidebar a.nav-link:hover i.sidebar-icon {
    color: var(--cfs-Ul-Item-Sidebar-selected-color);
}

.Ul-Item-Sidebar.active a.nav-link {
    color: var(--cfs-Ul-Item-Sidebar-selected-color);
}

.Ul-Item-Sidebar.active a.nav-link i.sidebar-icon {
    color: var(--cfs-Ul-Item-Sidebar-selected-color);

}

.UL-Toggle-BTN {
    color: var(--cfs-text-color);
    font-size: var(--cfs-Sidebar-text-size);
    padding: 1px 1px;
    margin: 1px 0px;
    border-width: 0px;
    font-weight: bold;
}

.UL-Toggler {
    cursor: pointer;
}

.UL-aLink-Sidebar {
    text-decoration: none;
    color: var(--cfs-text-color);
    font-size: var(--cfs-Sidebar-text-size);
    padding: 1px 4px;
    margin-bottom: 5px;
    cursor: pointer;
    display: block;
    width: 100%;
    transition: color 100ms ease;
}

.UL-Sub-aLink-Sidebar {
    text-decoration: none;
    color: var(--cfs-text-color);
    font-size: calc(.86*var(--cfs-Sidebar-text-size));
    padding: 1px 1px;
    margin: 1px 0px;
    cursor: pointer;
    display: block;
}

.UL-Sidebar .Ul-Item-Sidebar {
    padding-right: 2px;
}

/* .Ul-Item-Sidebar.UL-aLink-Sidebar.active a {
    color: #fcc000;
} */

.Ul-Item-Sidebar.active .nav-link {
    color: var(--cfs-Ul-Item-Sidebar-selected-color);
}

.Ul-Item-Sidebar.active .app-icon {
    color: var(--cfs-Ul-Item-Sidebar-selected-color);
}

.Ul-Item-Sidebar.active .UL-Sub-aLink-Sidebar {
    color: var(--cfs-Ul-Item-Sidebar-selected-color);
}


/* .UL-aLink-Sidebar :hover :not(.Active) {
    color: #930b36;
    font-size: var(--cfs-Sidebar-text-size-hover);
} */

.Sub-UL-Sidebar {
    list-style: "- ";
    padding-left: 35px;
    display: none;
}

.Sub-UL-Item-Sidebar {
    cursor: pointer;
}


/*#endregion */

/*#region Media Queries */
@media screen and (max-width:991.99px) {
    .sidebar-wrapper {
        display: none !important;
    }

    .header-large {
        display: none !important;
    }

    .header-small {
        display: flex !important;
    }

    .icons-section {
        max-width: none;
    }

    .TopRow-section {
        display: none;
    }

    .mainpanel-section {
        height: 100%;
    }

}

@media screen and (max-width:400px) {
    .btn {
        margin: 0px;
        padding: 0px;
    }

    .header-icon {
        font-size: calc(.8*var(--cfs-header-appIcon-text-size));
    }

    .icons-section {
        max-width: none;
        justify-content: space-around !important;
    }

    .LightModeIcon {
        font-size: calc(.8*var(--cfs-header-appIcon-text-size));
    }

    .DarkModeIcon {
        font-size: calc(.8*var(--cfs-header-appIcon-text-size));
    }

    .icon-wrapper {
        height: 20px;
        width: 20px;
        margin: 2px;
    }

    .logo-small {
        width: auto;
        max-height: 17px;
    }
}

@media screen and (min-width:991.99px) {
    .offcanvas-sidebar {
        display: none;
    }

    .offcanvas-backdrop {
        display: none;
    }
}

/*#endregion */

/*#region Tables */

.table-wrapper {
    /* display: flex;
    flex-grow: 0;
    flex-shrink: 0; */
    overflow-x: auto;
    width: auto;
    min-width: 200px;
    height: auto;
    max-height: 300px;
    padding: 10px;
    margin: .625rem 0px;
    border: solid;
    text-align: justify;
    border-radius: 10px;
    border-width: 1px;
    background-color: var(--cfs-Body-bg-Color);
    box-shadow: 1px 1px 2px #6e6d6e;
}

.table-wrapper-type2 {
    /* display: flex;
    flex-grow: 0;
    flex-shrink: 0; */
    overflow-x: auto;
    width: auto;
    min-width: 200px;
    height: auto;
    max-height: 300px;
    padding: 10px;
    margin: .625rem 0px;
    text-align: justify;
    border-width: 1px;
    background-color: var(--cfs-Body-bg-Color);
}

.app-table {
    border-collapse: collapse;
    width: 100%;
    box-shadow: 1px 1px 2px #6e6d6e;
}

.app-thead .app-tr {
    background-color: var(--cfs-Body-bg-Color);
    color: var(--cfs-text-color);
    border: 1px solid var(--cfs-text-color);
}

.app-thead .app-tr .app-th {
    max-width: 100%;
    word-wrap: break-word;
    text-align: left;
    vertical-align: middle;
    padding: 5px 5px;
    font-size: .85rem;
    /* font-weight: bold; */
    color: var(--cfs-text-color);
}

.app-tbody .app-tr {
    background-color: var(--cfs-Body-bg-Color);
    color: var(--cfs-text-color);
    border: 1px solid var(--cfs-text-color);
}

.app-tbody .app-tr .app-td {
    text-align: left;
    vertical-align: top;
    max-width: 100%;
    word-wrap: break-word;
    /* border: 1px solid #000; */
    padding: 5px 5px;
    font-size: .80rem;
    color: var(--cfs-text-color);
    /* background-color: var(--cfs-Body-bg-Color); */

}

.app-tbody .app-tr:nth-of-type(even) {
    background-color: var(--cfs-Body-bg-Color);
}

.app-tbody .app-tr:last-of-type {
    border-bottom: 2px solid var(--cfs-text-color);
    /* Adjust thickness and color as needed */
}

.app-tbody .actions-td {
    display: flex;
    text-align: left;
    vertical-align: top;
    max-width: 100%;
    padding: 5px 5px;
    font-size: .80rem;
    color: var(--cfs-text-color);
    gap: 8px;
    align-items: center;
}

/*#endregion */

/*#region Canvas */
.canvas-wrapper {
    /* width: 35rem; */
    /* height: 20rem; */
    max-height: 25rem;
    color: var(--cfs-text-color);

}

.app-canvas {
    background-color: var(--cfs-mainpanelSection-bg);
    width: auto;
    height: auto;
    color: var(--cfs-text-color);
}

.chart-doughnut {
    width: 20rem;
    height: 20rem;
}

/*#endregion */

/*#region Invoice Template */
.invoice-wrapper {
    background-color: var(--cfs-Body-bg-Color);
    color: var(--cfs-text-color);
    width: 200mm;
    height: 287mm;
    margin: 5px auto;
    padding: 10px;
    border: 1px solid var(--cfs-text-color);
    text-align: justify;
    box-shadow: 1px 1px 2px #6e6d6e;
}

.invoice-subTable {
    border-collapse: collapse;
    margin-bottom: 5px;
    background-color: var(--cfs-Body-bg-Color);
    color: var(--cfs-text-color);
}

.invoice-subTable th {
    font-size: .7rem;
    margin-right: 5px;
    min-width: fit-content;
    white-space: nowrap;
    vertical-align: top;

}

.invoice-subTable td {
    font-size: .75rem;
    vertical-align: top;
    padding-left: 5px;
    white-space: normal;
    max-width: 270px;

}

.subTable-Title {
    font-size: .85rem;
    font-weight: bold;
    margin-bottom: 4px;
}

.invoiceMainTable-section {
    width: auto;
    min-width: 600px;
    background-color: var(--cfs-Body-bg-Color);
}

.invoice-mainTable {
    border-collapse: collapse;
    background-color: var(--cfs-Body-bg-Color);
    color: var(--cfs-text-color);
    width: 100%;


}

.invoice-mainTable thead tr {
    background-color: var(--cfs-Body-bg-Color);
    color: var(--cfs-text-color);
    border: 1px solid var(--cfs-text-color);
}

.invoice-mainTable thead th {
    font-size: .7rem;
    font-weight: bold;
    min-width: fit-content;
    width: fit-content;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    padding: 5px 5px;
    letter-spacing: 1px;
    border: 1px solid var(--cfs-text-color);
}

.invoice-mainTable tbody tr {
    background-color: var(--cfs-Body-bg-Color);
    color: var(--cfs-text-color);
    border: 1px solid var(--cfs-text-color);
}

.invoice-mainTable tbody td {
    font-size: .75rem;
    vertical-align: top;

    white-space: normal;
    padding: 3px 3px;
    border: 1px solid var(--cfs-text-color);
}

.invoice-mainTable tbody tr:last-of-type {
    border-bottom: 2px solid var(--cfs-text-color);
}

.invoice-mainTable tbody tr td:first-of-type {
    text-align: center;
    vertical-align: top;
}

.invoice-mainTable tbody tr td:last-of-type {
    text-align: end;
    vertical-align: top;
    padding-right: 8px;
    /* width: 180px; */
}

.currency::after {
    content: "$";
    /* Currency symbol */
    margin-left: 2px;
}

.td-start {
    text-align: start;
}

.td-end {
    text-align: end;
}

.td-center {
    text-align: center;
}

.tfoot-Title {
    text-align: end;
    vertical-align: top;
    font-size: .8rem;
    font-weight: bold;
    padding-top: 3px;
    padding-left: 5px;
    padding-right: 5px;
    letter-spacing: 1px;
}

.tfoot-Value {
    text-align: end;
    vertical-align: top;
    font-size: .8rem;
    font-weight: bold;
    padding-top: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

@media print {
    body {
        margin: 0;
        padding: 0;
    }

    .invoice-wrapper {
        width: 210mm;
        height: 297mm;
        page-break-before: always;
        page-break-after: always;
    }
}

@page {
    /* Width and height in millimeters */
    /* size: 210mm 297mm; */
    /* A4 (210mm x 297mm), A3 (297mm x 420mm), A5 (148mm x 210mm), B4 (250mm x 353mm), B5 (176mm x 250mm) */
    /* Sets the page to A4 size in landscape orientation */
    /* size: A4 landscape; */

    size: A4;
    /* All Sides */
    /* margin: 5mm; */

    /* top & bottom, left & right */
    margin: 5mm 5mm;

    /* Top, right, bottom, left */
    /* margin: 20mm 10mm 15mm 5mm; */

}

/* .page[size="A4"] {
    background: white;
    width: 21cm;
    height: 29.7cm;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
} */

/* @media print {

    body,
    page[size="A4"] {
        margin: 0;
        box-shadow: 0;
    }
} */

/*#endregion */


/*#region Marketing CSS */

/*#region Wrappers */

.m-header-wrapper {
    height: 48px;
    background-color: #0d0c0c;
    /* background: linear-gradient(454deg, #78061b, #8e3249); */
    /* background: linear-gradient(90deg, rgba(14, 4, 70, 1) 0%, rgba(122, 90, 238, 1) 50%, rgba(85, 41, 190, 1) 100%); */
    /* background-image: linear-gradient(45deg, #00B960 0%, #00552C 100%); */
    align-content: center;
}

.m-content-wrapper {
    /* background-color: var(--cfs-contentWrapper-bg); */
    height: calc(100% - 48px);
    scroll-snap-type: y mandatory;
    background-color: #16171d;
}

.m-hero-wrapper {
    background-color: var(--cfs-mainpanelWrapper-bg);
    height: 100%;
    /* padding-top: 16px;
    padding-bottom: 16px; */
    scroll-snap-align: start;
    /* scroll-margin-top: 50px; */
    position: relative;
    min-height: fit-content;
}

.m-section-wrapper {
    /* background-color: var(--cfs-mainpanelWrapper-bg); */
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    scroll-snap-align: start;
    /* border-radius: 50px; */
}



/*#endregion */

/*#region Main Sections */
.m-hero-section {
    position: relative;
}

.aboutUs-section {
    background-color: #2d2d2d;
    /* background: linear-gradient(454deg, #404c80, #2b9d4d); */
}

.m-sectors-section {
    background-color: #2d2d2d;
    padding-top: 30px;
    padding-bottom: 30px;
    /* background: linear-gradient(454deg, #27377c, #202121); */
}

.m-services-section {
    background-color: #2d2d2d;
    /* background: linear-gradient(454deg, #000000, #1c5ac5); */
}

.m-solutions-section {
    background-color: #2d2d2d;
    /* background: linear-gradient(454deg, #285e0c, #131313); */
}

.m-gallery-section {
    background-color: #2d2d2d;
    /* background: linear-gradient(454deg, #0930f4, #060606); */
}

.m-footer-section {
    background-color: #2d2d2d;
    /* background: linear-gradient(454deg, #0b0b0c, #094f2a); */
}



/* .section-2 img {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
} */

/* .section-2 img:hover {
    transform: scale(1.05);
} */

.section-4 {
    /* background-image: linear-gradient(to bottom right, #305170, #6DFC6B); */
    background-image: linear-gradient(to bottom right, #00C0FF, #4218B8);
}

/*#endregion */

/*#region Header */
.m-header-large {
    height: 100%;
}

.m-header-small {
    height: 100%;
    display: none;
}

.m-logo-section {
    height: 100%;
}

.m-headerCenter-section {
    height: 100%;
}

.m-nav-section {
    height: 100%;
}

.m-navLink {
    font-size: .85rem;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    padding-left: 16px;
    padding-right: 16px;
    text-transform: uppercase;
}

/*#endregion */

/*#region hero section classes */
.hero-overlay {
    height: 100%;
    z-index: 4;
    position: absolute;
    top: 48;
    left: 0;
    background-color: hsla(30, 3%, 14%, 0.35);
}

.hero-text-area {
    z-index: 5;
    padding-top: 200px;
}

.hero-text-area h3 {
    font-size: 3rem;
    text-align: center;
}

.hero-text-area h6 {
    font-size: 1.15rem;
    text-align: center;
}

/*#endregion */

/*#region Solutions Classes */
.m-solutionTitle {}

/*#endregion */

/*#region Services Classes */

.accordion {
    --bs-accordion-btn-color: #ffffff;
    --bs-accordion-btn-bg: #2d2d2d;
    --bs-accordion-bg: transparent;
    --bs-accordion-color: #ffffff;
    --bs-accordion-active-bg: #4b4b4b;
    --bs-accordion-active-color: #ffffff;
    --bs-accordion-btn-focus-box-shadow: none;

}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3E%3C/svg%3E");
    transition: all 300ms;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E");
}

.accordion-item {
    border-bottom: 0px;
}

/* 
.accordion-button {
    background-color: #2d2d2d;
    color: #ffffff;
} */


/*#endregion */

/*#region Footer Classes */
.m-f-sec-title {
    color: #8c07f1;
    font-weight: bold;
}

.m-link {
    text-decoration: none;
    color: #ffffff;
}

/*#endregion */

/*#region Animations */

.animation-example {
    width: 100%;
    height: 100%;
    /* background-image: url(/Assets/images/Futuristic\ Orange\ Sports\ Car.jpeg); */
    background-size: cover;
    background-clip: border-box;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    animation-name: zoomInOut;
    animation-duration: 6s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

@keyframes zoomIn {
    to {
        transform: scale(1.1);
    }
}

@keyframes zoomInOut {
    0% {
        transform: scale(1);
        /* Initial state */
    }

    50% {
        transform: scale(1.05);
        /* Zoom in */
    }

    100% {
        transform: scale(1);
        /* Zoom out to original */
    }
}

.move-left {
    transform: translateX(-100px);
}

/*#endregion */

/*#region Logos */
.m-logo-large {
    width: auto;
    max-height: 35px;
    margin-right: 4px;
}

.m-logo-words-large {
    width: auto;
    max-height: 35px;
    margin-right: 4px;
}

.m-logo-large-link {
    max-width: 200px;
}

.m-logo-small {
    width: auto;
    max-height: 42px;
}

/*#endregion */

/*#region images */

.img-sector {
    max-width: 100%;
    max-height: 90%;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    overflow: hidden;
}

.img-solution {
    max-width: 100%;
    max-height: 90%;
    text-align: start;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
}

.img-gallery {
    /* width: 200px; */
    height: auto;
    max-width: 100%;
    /* max-height: 100%; */
    text-align: center;
    /* padding-left: 5px;
    padding-right: 5px; */
    overflow: hidden;
}

.gallery-item {
    max-width: 250px;
    height: 100%;
    /* max-height: 350px; */
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
}

.img-xxx {
    width: auto;
    max-height: 100%;
}

.image-holder {
    margin-right: 10px;
    width: 100%;
    height: 100%;
    /* background-image: url(/Assets/images/Futuristic\ Orange\ Sports\ Car.jpeg); */
    background-size: contain;
    background-clip: border-box;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}



/*#endregion */

/*#region Videos */
.hero-bg-video {
    background-color: #2d2d2d;
    position: absolute;
    top: 48;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    padding-left: 0px;
    padding-right: 0px;

}

.bg-video {
    position: absolute;
    top: 48;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    padding-left: 0px;
    padding-right: 0px;

}

/* @media (max-aspect-ratio: 16/9) {} */

/*#endregion */

/*#region Icons */

.m-icon-wrapper {
    cursor: pointer;
    height: 35px;
    width: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    margin: 4px;
    background-color: transparent;
    transition: all 100ms ease-in-out;
}

.m-header-icon {
    font-size: var(--cfs-header-appIcon-text-size);
    /* color: var(--cfs-AppIcon-headerSection-color); */
    align-content: center;
}

.header-icon:hover {
    font-size: var(--cfs-header-appIcon-text-size);
    color: var(--cfs-AppIcon-hover-color);
}

.menu-icon {
    font-size: var(--cfs-dropdown-appIcon-text-size);
    color: var(--cfs-AppIcon-headerSection-color);
    align-content: center;
    margin-right: 4px;
}

.menu-icon:hover {
    color: var(--cfs-AppIcon-hover-color);
}

.app-icon {
    /* color: var(--cfs-AppIcon-color); */
    /* font-size: var(--cfs-default-appIcon-text-size); */
    font-size: 1.25rem;
}

.sidebar-icon {
    color: var(--cfs-text-color-sidebarSection);
    font-size: var(--cfs-sidebar-appIcon-text-size);
}

.sidebar-icon:hover {
    color: var(--cfs-AppIcon-hover-color);
}

.app-table-icon {
    color: var(--cfs-AppIcon-color);
    font-size: var(--cfs-table-appIcon-text-size);
}

.breadcrum-icon {
    color: var(--cfs-AppIcon-color);
    font-size: var(--cfs-breadcrums-Icon-text-size);
}

/*#endregion */

/*#region Vertical Text */
.vertical-text {
    writing-mode: vertical-rl;
    /* Sets the text to flow vertically */
    text-orientation: upright;
    /* Keeps the characters upright */
    /* transform: rotate(180deg); */
    /* Optional: Rotates text to read from top to bottom */
    font-size: 24px;
    margin: 20px;
}

.rotate90 {
    transform: rotate(-90deg);
}

/*#endregion */

/*#region media Query */
@media screen and (max-width:800px) {
    .m-header-large {
        display: none !important;
    }

    .m-header-small {
        display: flex !important;
    }

    .m-header-wrapper {
        height: 75px;
        background-color: #16171d;
        /* background: linear-gradient(454deg, #78061b, #8e3249); */
        /* background: linear-gradient(90deg, rgba(14, 4, 70, 1) 0%, rgba(122, 90, 238, 1) 50%, rgba(85, 41, 190, 1) 100%); */
        /* background-image: linear-gradient(45deg, #00B960 0%, #00552C 100%); */
        align-content: center;
    }

    .m-content-wrapper {
        /* background-color: var(--cfs-contentWrapper-bg); */
        height: calc(100% - 75px);
        scroll-snap-type: y mandatory;
        background-color: #16171d;
    }

    .m-navLink {
        font-size: .8rem;
        padding-left: 8px;
        padding-right: 8px;
    }

    .m-logo-section {
        padding-top: 4px;
    }

    .m-nav-section {
        padding-top: 6px;
    }

    .m-section-wrapper {
        height: auto;
    }

    .img-sector {
        max-width: 100%;
        max-height: 90%;
        text-align: center;
        padding-left: 5px;
        padding-right: 5px;
        overflow: hidden;
    }

    .img-solution {
        max-width: 100%;
        max-height: 90%;
        text-align: start;
        padding-top: 5px;
        padding-bottom: 5px;
        overflow: hidden;
    }

    .m-solutionTitle {

        text-align: center;
    }

}

@media screen and (max-width: 400px) {

    .m-navLink {
        font-size: .65rem;
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media screen and (max-height: 400px) {

    .hero-text-area {
        padding-top: 100px;
    }
}

@media screen and (max-width: 650px) and (max-height: 700px) {

    .hero-text-area {
        padding-top: 100px;
    }
}

/*#endregion */


/*#endregion */