:root {
    --fontFamily: "Helvetica", -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    --primary-Bg-color: #f7f7fe;
    --secondary-Bg-color: #f5f8fe;
    --primary-text-color: #343B7B;
    --secondary-text-color: #343B7B;
    --primary-Bcolor: #f0f0f0;
    --primary-FHoverColor: #107c10;
}

@keyframes hBplusfadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100px,0);
        transform: translate3d(0, -10px,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate__fadeInDownBig {
    -webkit-animation-name: hBplusfadeInDown !important;
    animation-name: hBplusfadeInDown !important;
}

body {
    background: var(--secondary-Bg-color);
    overflow: hidden;
}

html {
    position: relative;
    min-height: 100%;
}

.hbPlus-siderCon {
    transition: 400ms;
    width: 240px; 
    border-right: 1px solid #e4e4e4;
    flex-shrink: 0;
}

.hbPlus-gridSiderCon {
    transition: 400ms;
    width: 300px;
    border-right: 1px solid #e4e4e4;
    flex-shrink: 0;
}
/*forlistt*/
#gridContainer {
    overflow-x: auto;
    overflow-y: hidden;
}
.hbPlus-CompanyName {
    overflow: hidden;
    height: 30px;
    color: var(--secondary-text-color);
}

.hbplus-sidebar-menu {
    overflow: auto;
    height: calc(100vh - 125px);
    padding: 25px 0;
}

.menuName {
    overflow: hidden;
    width: auto;
    color: var(--primary-text-color);
    transition: 400ms;
}

.hBplus-subMenuFont {
    transition: 400ms;
    pointer-events: none;
}

.hbplus-mMenu-list:hover .menuName, .hbplus-mMenu-list:hover .hbPlus-ModuleIcon {
    color: var(--primary-FHoverColor);
    filter: brightness(0) saturate(100%) invert(28%) sepia(89%) saturate(1414%) hue-rotate(82deg) brightness(91%) contrast(94%);
}

.hbplus-mMenu-list:hover .hbplus-mMenu-chevron {
    color: var(--primary-FHoverColor);
}

.hbPlus-sMenuBtn:hover .hBplus-subMenuFont,
.hbPlus-sMenuBtn:hover .hBplus-subMenuFont, .hBplus-subMenuFont:hover {
    width: auto;
    color: var(--primary-FHoverColor);
}

.hBplus-subMenuFont {
    color: #818487;
}

.hbPlus-ModuleIcon {
    font-size: 22px;
    width: 25px;
    filter: brightness(0) saturate(100%) invert(12%) sepia(20%) saturate(3150%) hue-rotate(207deg) brightness(89%) contrast(101%);
    transition: 400ms;
}

.hbplus-mMenu-title{
    pointer-events: none !important;
}

.hbplus-mMenu-chevron {
    pointer-events: none !important;
}



.hbplus-mMenu-line {
    pointer-events: none !important;
    margin-left: 0px;
    border: 1px solid #343B7B;
    width: 10px;
}

.hbPlus-Company {
    display: flex;
    justify-content: start;
    padding: 16px 18px;
    gap: 20px;
    align-items: center;
    width: 100%;
    background: var(--primary-Bg-color);
}

.hbPlus-CompanyLogo {
    pointer-events: none;
    width: calc(1.3rem + .6vw);
    filter: drop-shadow(1px 1px 1px #888);
}

.hBplus-LoginActive {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background: #262a2c99;
    z-index: 9;
}

.hBplus-LoginActiveCon {
    background: #fbfbfb;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 3px 6px 0px rgb(58 54 54 / 75%);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    border-radius: 20px;
}

.dx-toast-content {
    top: -15px !important;
}

.hbPlus-siderCon-body {
    background: var(--primary-Bg-color);
    border-right: 1px solid var(--primary-Bcolor);
    border-bottom: 1px solid var(--primary-Bcolor);
    height: calc(100vh - 3px);
    position: relative;
    z-index: 0;
}

.hbplus-sidebar-menu .hbplus-mMenu-list {
    color: var(--primary-text-color);
    list-style: none;
    font-weight: 400;
    letter-spacing: 0.05em;
    gap: 20px;
    padding: 10px 22px 10px;
    position: relative;
    justify-content: space-between;
    cursor: pointer;
    font-size: 14px;
}

.hbplus-sMenu-List {
    position: relative;
    margin: 0px 0 0px 36px;
    border-radius: 4px;
    padding: 0;
    border-left: 1px solid #343B7B;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    cursor: pointer;
}

    .hbplus-sMenu-List:after {
        content: "";
        position: absolute;
        background: #f7f7fe;
        bottom: 0px;
        left: -3px;
        padding: 9.8px 2px;
        z-index: 9;
    }


    .hbplus-sMenu-List ul {
        margin: 10px;
        border-radius: 6px;
        padding: 0;
    }

.hbplus-sMenu-hide {
    position: relative;
    left: 1px;
    border-left: 1px solid #f7f7fe;
    margin: 0 !important;
    margin-left: -2px !important;
    margin-top: -19px !important;
    border-radius: 0 !important;
    padding: 28px 14px !important;
}

    .hbplus-sMenu-List .hbPlus-sMenuBtn {
        color: var(--primary-text-color);
        padding: 10px 0 10px 0;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.02em;
        list-style: none;
        transition: 400ms;
        justify-content: start;
        gap: 10px;
    }

.hbPlus-sMenuBtn {
    width: 250px;
    background: transparent;
    border: 0;
    text-align: start;
    padding: 0;
    cursor: pointer;
}

    .hbPlus-sMenuBtn:hover li {
        color: var(--secondary-text-color);
        font-size: 14px;
    }

.menuHideNames {
    width: 64px;
    overflow: hidden !important;
}

.hbplus-mMenu-list:hover .hBplus-chev,
.hbplus-mMenu-list:active .hBplus-chev,
.hbplus-mMenu-list:focus .hBplus-chev {
    transform: rotate(90deg)
}

.hbplus-active {
    color: var(--secondary-text-color);
    font-weight: 600;
}

.hBplus-HeaderCon {
    background: #ffff;
    border: 1px solid #f0f0f0;
    padding: 10px 16px;
    border-radius: 6px;
    color: var(--secondary-text-color);
}

.hBplus-SideBarFooterCon {
    display: flex;
    justify-content: center;
    padding: 6px;
    border-top: 1px solid var(--primary-Bcolor);
    background: #EDEDF7;
}

.hbplus-sidebarmadjust {
    overflow-x: hidden !important;
}

.hbPlus-MiconClass {
    transition: 400ms;
    cursor: pointer;
}

#myTabContentHome {
    height: calc(100vh - 150px);
    overflow: auto;
    background: #fff;
    border: 1px solid var(--primary-Bcolor);
    border-top: 0;
}

.nav-tabs .nav-link.active {
    border-color: var(--primary-Bcolor) var(--primary-Bcolor) #fff;
}

.nav-tabs {
    border-bottom: 1px solid var(--primary-Bcolor);
}

.hbPlus-Remarks {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 9999;
}

/** New **/

.hbPlus-mainContainer {
    display: flex;
    flex-grow: 1;
    overflow-y: hidden;
    position: relative;
}

.hbplus-body {
    display: flex;
    flex-grow: 1;
    overflow-y: hidden;
    position: relative;
}
.hbPlus-Header-Chart {
    display: grid;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}
.hbPlus-Charts {
    display: flex;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden; 
    position: relative;
}
.hbPlus-subMenuBtn {
    border: 0;
    background: transparent;
    list-style: none;
    text-transform: capitalize;
    font-size: 14px;
    padding: 0px 0 8px 18px;
    width: 100%;
    text-align: left;
}
.hbPlus-ThirdMenuBtn {
    border: 0;
    background: transparent;
    list-style: none;
    text-transform: capitalize;
    font-size: 14px;
    padding: 8px 0 8px 26px;
    width: 100%;
    text-align: left;
    gap: 5px;
}
.hbplus-sThirdButtonMenuList {
    border: 0;
    background: transparent;
    list-style: none;
    text-transform: capitalize;
    font-size: 14px;
    padding: 8px 0 8px 44px;
    width: 100%;
    text-align: left;
}
#hBplus-ViewMainContainer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #6e73778c;
    z-index: 9;
}
.hBplus-ViewSubContainer {
    background: #fff;
    width: calc(100vw - 30px);
    height: calc(100vh - 58px);
    margin-top: 54px;
    margin-left: 16px;
    border-radius: 8px;
    overflow: hidden;
}
.hBplus-closeIcon {
    position: absolute;
    right: 28px;
    top: 4px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}
.hbPlus-header {
    border-radius: 6px;
    background: #0A152F;
}
.hBplus-HeaderBtn i {
    color: #f8f8f8;
    font-size: 20px;
}
#hBplus-SearchPanelList {
    margin: 0px 18px;
}
#gridContainer .dx-datagrid-header-panel {
    display: none;
}
.hbPlus-rBodyCon {
    background: #eceef3;
    height: 100vh;
    width:100%;
}
header {
    position: relative;
    z-index: 9;
}
.hbPlus-Remarks {
    position: absolute;
    bottom: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hbPlus-gridPanelCon {
    display: flex;
    flex-grow: 1;
    overflow-y: hidden;
    position: relative;
}

#hBplus-dataView {
    height: calc(100vh - 100px);
    background: #fff;
    margin: 4px;
    border-radius: 4px;
    overflow: auto;
}

.hBplus-FormViewHeader {
    background: #e2f5e2;
    margin: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: 4px solid green;
    padding: 0px 12px;
    position: sticky;
    top: 0;
    z-index: 9;
}

.hBplus-DisabledField {
    pointer-events: none;
}

.hBplus-FormViewIcon {
    width: 25px;
}

.hbPlus-sCategory {
    color: var(--primary-text-color);
    padding: 10px 0 10px 0px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    list-style: none;
    transition: 400ms;
    justify-content: start;
    gap: 10px;
}

.hbPlus-sCategor:hover {
    color: var(--primary-FHoverColor);
}


.hbPlus-CatSubMenu {
    padding: 10px 0px 5px 28px;
    color: var(--primary-text-color);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    list-style: none;
    transition: 400ms;
    justify-content: start;
    gap: 10px;
    border: 0;
    background: transparent;
}

.dx-checkbox.dx-state-readonly .dx-checkbox-icon {
    color: #0f6cbd !important;
}

.hBplus-CatSubList {
    margin: 0 !important;
    list-style-type: none;
    color: #666;
    font-size: 16px;
}

.hBlus-CatSubListMenu {
    margin: 8px 0 8px 70px;
    font-size: 14px;
}

.hBplus-NumbBoxField .dx-texteditor-input {
    text-align: right;
}

.modal-notification {
    opacity: 0 !important;
}

.formDirtyButton[attr-stay="yes"] {
    color: #664d03;
    transition: 400ms;
}
.formDirtyButton[attr-stay="yes"]:hover {
    border: 1px solid #664d03;
}

.unselected-item-class {
    pointer-events: none;
    background-color: #f2f2f2;
}

.hBplus-DisabledField .dx-lookup-field {
    color: #393636 !important;
}

.hBplus-FormGridDetail {
    overflow-x: auto;
    overflow-y: hidden;
}

#roleDetailMainGrid .form-check-input {
    width: 20px;
    height: 20px;
}

.bi-chevron-right {
    pointer-events: none;
}

.btn-pointerEventNone {
    opacity: 0.4;
    pointer-events: none;
}

/* For Chrome, Safari, and Edge */
::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
    height: 12px; /* Height of the scrollbar (for horizontal scrollbars) */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* The track (background) of the scrollbar */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scroll thumb */
    border-radius: 50%; /* Rounded corners for the scroll thumb */
    border: 2px solid #f1f1f1; /* Adds space between the thumb and the track */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* Hover effect for the scroll thumb */
}

/* For Firefox */
* {
    scrollbar-width: thin; /* Make the scrollbar thin */
    scrollbar-color: #888 #f1f1f1; /* Thumb color and track color */
}

#MasterDetailGridView {
    height: calc(100vh - 150px);
    overflow: auto;
}

#MasterDetailGridView .dx-datagrid-search-panel, #MasterDetailGridView .dx-datagrid-header-panel {
    display: none;
}

#title-MasterGrid {
    display: flex;
    align-items: center;
    padding: 18px 10px;
    justify-content: space-between;
}

#printPanelId {
    position: absolute;
    top: 40px;
    z-index: 999;
    right: 30px;
    width: 862px;
    height: calc(100vh - 70px);
    overflow: hidden;
    background: #fafafa;
    padding: 2px 10px 10px;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 6px 6px 8px 0px rgb(127 109 109 / 75%);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

#pdfIframeId {
    width: 100%;
    height: calc(100vh - 180px);
}

.headerIFrame-class {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

#btn-PrintPreview {
    border: 0;
    padding: 6px 16px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: 400ms;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 2px 2px 5px 0px rgb(157 145 145 / 75%);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

    #btn-PrintPreview:hover {
        background: #0f6cbd;
        color: #fff;
    }

.hbplus-mMenu-list#PURCHASING {
    display: none;
}

@media (max-width: 768px) {
    /*    .menuHideNames {
        width: 60px;
    }
    .menuName, .hbplus-mMenu-chevron {
        display: none;
    }*/
}