/* Write your CSS */
:root {
    --MainBGColor: transparent;
    --DGOfficeBlue: #004290;
    --MainBGColorPlus20: #002E66;
    --DGOfficeGrey: #999999;
    --DGOfficeMediumGrey: #B3B3B3;
    --DGOfficeLightGrey: #CBCBCB;
    --Orange: #E67D00;
    --Green: #91AA4E;
    --Red: #BD2C16;
    --White: #FFFFFF;
    --ImageColor: invert(16%) sepia(79%) saturate(2030%) hue-rotate(187deg) brightness(91%) contrast(100%);
    --Logo: transparent;
    --LogoHover: url('../SVG/DGOffice/Home-DGOffice-white.svg') no-repeat center;
    --ModuleLogo: url('../SVG/DGOffice/Module-tab-DGOffice-full-color.svg') no-repeat center;
    --ModuleLogoHover: url('../SVG/DGOffice/Module-tab-white.svg') no-repeat center;
    --BorderColor: #ddd;
    --BackgroundColor: #FFF;
    --MenuTextColor: var(--MainBGColor);
    --LightBlue: #4BBDD6;
    --ToolBarBackGround: #e6e6e6;
}

/*----------------CUSTOM CSS GENERAL-------------------*/

html {
    height: 100%;
    overflow-y: overlay;
}

body {
    margin: 0;
    padding: 0;
    min-height: calc(100% - 50px);
    font-family: 'Gill Sans MT' !important;
    background-color: var(--BackgroundColor);
}

a {
    color: var(--DGOfficeGrey);
    text-decoration: none;
}

    a:hover {
        background-color: transparent !important;
        color: var(--DGOfficeBlue) !important;
    }

    a:active {
        background-color: var(--MainBGColor) !important;
        color: #999999 !important;
    }

h1 {
    margin: 0;
    vertical-align: -0.50rem;
    text-transform: inherit !important;
    font-weight: 400 !important;
    font-style: inherit !important;
    font-size: 1.5em !important;
    text-align: LEFT;
    color: var(--MenuTextColor) !important;
}


h2 {
    display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    font-weight: bold;
    color: var(--MenuTextColor) !important;
}

h3 {
    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 0em;
    font-weight: bold;
    color: black !important;
    color: var(--MenuTextColor) !important;
}

h5 {
    display: block;
    font-size: 0.83em;
    margin-top: 1.67em;
    margin-bottom: 1.67em;
    font-weight: bold;
    color: var(--MenuTextColor) !important;
}

.SegregationSubHeader {
    margin: 0;
    display: block;
    font-size: 1.05em;
    margin-bottom: 0em;
    margin-top: 0.5em;
    font-weight: bold;
    color: black !important;
    color: var(--MenuTextColor) !important;
}


/*----------------CUSTOM CSS #CLASSES-------------------*/
.customTableHeader {
    text-align: left;
    border-bottom: 2px solid var(--DGOfficeMediumGrey);
    margin-bottom: 5px;
}

.border-bottom-conflict-resolver {
    border-bottom: 1px solid var(--DGOfficeMediumGrey) !important;
    border-right: 1px solid var(--DGOfficeMediumGrey) !important;
}

.paddingLeft-50{
    padding-left: 50px;
}

.float-right-small-top-margin {
    float: right;
    margin-top: 4px;
}

.gridIconSize {
    width: 16px;
    height: 16px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.Center-Of-Div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.textAlignCenter {
    text-align: center;
}


.grey-overlay {
    width: 50%;
    background-color: var(--DGOfficeGrey);
    line-height: 0;
}

@media (min-width: 600px) {
    .grey-overlay {
        width: 20%;
    }
}

@media (min-width: 900px) {
    .grey-overlay {
        width: 15%;
    }
}

@media (min-width: 1200px) {
    .grey-overlay {
        width: 10%;
    }
}

.grey-overlay img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}


/* This is used for the signature image on the EditSigning*/
.signature-responsive-image {
    width: 50%;
    height: auto;
}

@media (min-width: 600px) {
    .signature-responsive-image {
        width: 20%;
    }
}

@media (min-width: 900px) {
    .signature-responsive-image {
        width: 15%;
    }
}

@media (min-width: 1200px) {
    .signature-responsive-image {
        width: 10%;
    }
}
/*ending of signature image css*/

.overflowHidden {
    overflow: hidden;
}

.heigh100 {
    height: 100%;
}

.centerBottom {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    padding: 10px;
}

.image {
    color: #999999;
}

.btn {
    border-radius: 0px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-panel {
    border: solid 2px lightGray;
    padding: 10px;
}

.ForeGround {
    z-index: 1000;
    position: fixed;
    width: 38%;
    margin-left: 15px;
}

.footerBackground {
    bottom: 0px;
    position: fixed;
    box-sizing: border-box;
    width: calc(100% - 300px);
    padding-right: 78px;
    z-index: 999;
    transition: width 500ms;
    left: 363px;
}

.back-button {
    position: fixed;
    top: 7px;
    z-index: 1000;
    margin-left: -10px;
}

.margin-bottom5px {
    margin-bottom: 5px;
}

.borderSolid {
    border: solid 1px lightGray;
}

.centered {
    min-width: 30%;
    max-width: 100%;
    display: inline-block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    padding-left: 40%;
    padding-right: 40%;
    padding-top: 200px;
}

.CopyRightPosition {
    bottom: 10px;
    left: 10px;
    position: absolute;
}

.display-flex-column {
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
}

.panel {
    height: 500px;
    border: 1px solid rgba(153,153,153,.3);
    padding: 5px;
    overflow: hidden;
    padding-bottom: 30px;
}

/*this will be used if we want the submit buttons on a different location*/
.submit-button-location {
}

.primary-button {
    padding-left: 15px;
}

.seconday-button {
    padding-left: 10px;
}

.buttonGroup {
    display: flex;
}

.bottom-Center {
    padding-left: 45%;
    bottom: 5%;
    position: absolute;
}

.font-size25 {
    font-size: 25px !important;
}

#DGOfficeIcon.selected {
    background: var(--ModuleLogoHover);
    background-size: 60% auto;
}

#DGOfficeIcon :hover {
    background: var(--ModuleLogoHover);
    background-size: 60% auto;
}

.Fixedfooter {
    position: fixed;
    left: 0;
    bottom: 0px;
    width: 100%;
    background-color: var(--BackgroundColor);
    text-align: right;
    z-index: 999;
    padding: 10px 50px 10px 10px;
}

.fixed-col {
    position: fixed;
    width: 16.666%; /* 2/12 = 16.666% of the container */
}

@media (max-width: 1500px) { /* Adjust for col-sm */
    .fixed-col {
        position: static; /* Remove fixed positioning */
        width: 100%; /* Make it full width */
    }
}

.borderless {
    border: 0px;
}

.btnPopover {
}

.RedValidationBorder {
    /*border: 3px solid red;*/
    color: red !important;
}

.OrangeValidationBorder {
    /*border: 3px solid orange;*/
    color: orange !important;
}

.GreenValidationBorder {
    /*border: 3px solid green;*/
    color: green !important;
}


/*This is to prevent a strange line when hover over a button with a close image*/
.CloseImage:hover {
    background-color: #00000000 !important;
    color: #00000000 !important;
}

.DisplayNoneImportant {
    display: none !important;
}

.inline-flex-percentage {
    display: inline-flex;
    width: 92%;
}

.conflictContainerColumn{
    display: flex;
    align-items: center;
}
.conflictCheckBoxAlignment{
    flex: 90%;
    text-align: left;
}
.conflictUndoButton{
    flex: 5%
}

.DisplayBlock {
    display: block;
}

.HideFromForm {
    display: none !important;
}

.HideDrowDownArrow .dx-selectbox-container .dx-texteditor-container .dx-texteditor-buttons-container {
    display: none;
}

.HiddenClass {
    display: none;
}

.padding-Y {
    padding-top: 5px;
    padding-bottom: 5px;
}

.paddingTop {
    padding-top: 10px;
}

.paddingTop-15 {
    padding-top: 15px;
}

.paddingRight10 {
    padding-right: 10px;
}

.paddingBottom {
    padding-bottom: 10px;
}

.paddingBottom5px {
    padding-bottom: 5px;
}

.ArrowPartialView {
    width: 220px;
}

.verticalSpacing {
    padding-bottom: 2px;
}

.Notify {
    color: var(--Orange) !important;
}

.Backbutton img {
    width: 10px;
    padding: 3px;
}

.Backbutton a {
    display: inline-block;
}

    .Backbutton a:hover {
        background-color: #999999 !important;
    }

.selected {
    background-color: var(--MainBGColor) !important;
    border: 1px solid var(--MainBGColor) !important;
}

.item-label {
    padding: 5px;
}

.upTimeDetails {
    padding-top: 10px;
    padding-bottom: 50px;
}
/*TemplateChooser*/
.large-text {
    font-size: 24px;
    color: #ff6a50; /*orange*/
}

.opacity {
    opacity: 0.5;
}

.description-tab {
    position: relative;
    left: 20px;
}


.TemplateChooser {
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
}

    .TemplateChooser #template {
        width: 230px;
    }

    .TemplateChooser > div {
        display: inline-block;
        vertical-align: top;
    }

    .TemplateChooser .item-content {
        position: relative;
        margin: 5px;
        color: #fff;
        cursor: pointer;
    }

        .TemplateChooser .item-content > img {
            width: 100%;
        }


        .TemplateChooser .item-content:hover > .item-options {
            box-shadow: inset 0 0 0 2px var(--MainBGColor);
        }

.ScrollView {
    height: 85%;
}

.item-content .item-options > div {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 64px;
    padding-top: 4px;
    background-color: #999999;
    z-index: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    opacity: 0.8;
}

.TemplateChooser .item-content:hover > .item-options > div {
    border-bottom: 2px solid var(--MainBGColor);
    border-left: 2px solid var(--MainBGColor);
    border-right: 2px solid var(--MainBGColor);
}

.item-content .item-options .name {
    padding-left: 8px;
    font-size: 20px;
}

.span-for-template-selectbox {
    display: block;
    word-wrap: break-word;
    white-space: normal;
    width: 100%;
}

/*Header*/
.Navigationbar {
    position: fixed;
    display: flex;
    width: 100%;
    height: 50px;
    z-index: 1000;
    top: 0;
    background-color: var(--MainBGColor);
}

.LefttopHeader {
    flex-basis: 281px;
}

    .LefttopHeader #HomeButton {
        background: var(--Logo);
        width: 100%;
        height: 50px;
        border-radius: 0%;
        background-size: auto 40px;
        background-color: var(--BackgroundColor);
    }

        .LefttopHeader #HomeButton .dx-button-content {
            padding: 5px;
        }

        .LefttopHeader #HomeButton .DGOfficelogoImg {
            background: var(--Logo);
            display: block;
            height: 40px;
            background-size: contain;
        }

.customeToolbar-Left {
    position: fixed;
    flex-basis: 280px;
    top: 5px;
    padding-left: 10px;
    padding-top: 4px;
    z-index: 1000;
    display: flex;
}

    .customeToolbar-Left > .spaceBetweenElementsInToolBar > .dx-button {
        background-color: var(--MainBGColor);
        color: var(--White);
    }

        .customeToolbar-Left > .spaceBetweenElementsInToolBar > .dx-button.dx-button-mode-contained.dx-state-hover {
            background-color: var(--MainBGColorPlus20);
        }

.spaceBetweenElementsInToolBar {
    margin-right: 10px;
}

.customLeftTopHeaderToolBar {
    position: fixed;
    right: 50px;
    bottom: 55px;
    z-index: 1000;
    color: var(--MenuTextColor);
    display: flex;
    border: transparent;
}

    .customLeftTopHeaderToolBar > .dx-button {
        border: none;
    }

    .customLeftTopHeaderToolBar .dx-button-has-icon .dx-icon {
        font-size: 50px;
        border: none;
    }

    .customLeftTopHeaderToolBar .dx-button-mode-contained .dx-icon {
        color: var(--MenuTextColor);
    }

        .customLeftTopHeaderToolBar .dx-button-mode-contained .dx-icon:hover {
            color: var(--MainBGColorPlus20);
        }


.dgOffice-icon-user,
.dgOffice-icon-group {
    font: 20px/1 DXIcons;
    font-size: 22px !important;
}

    .dgOffice-icon-group:before {
        content: "\f02e";
    }

    .dgOffice-icon-user:before {
        content: "\f02d";
    }

.dgOffice-icon-user,
.dgOffice-icon-group {
    background-position: 0 0;
    background-repeat: no-repeat;
}
/*.customLeftTopHeaderToolBar .dx-state-hover > .dx-button-content > .dx-icon {
    background-color: var(--MainBGColorPlus20);
}*/

.dx-dropdownbutton-action {
    border-right-style: none;
}

.tap-panel-MarginLeft {
    margin-left: 10px;
}

.tap-panelBackGroundFooter {
    background-color: var(--BackgroundColor);
}

.tap-panelBackgroundHeader {
    background-color: var(--BackgroundColor);
    padding-top: 8px;
    padding-right: 10px;
}

.dx-menu-base .dx-menu-items-container {
    list-style-type: none;
    display: block;
    white-space: nowrap;
    cursor: pointer;
}
/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--DGOfficeGrey);
    border-radius: 10px;
}

.flaticon-documents::before {
    margin: 0px;
}

.NewAddButton {
    width: 100%;
    padding-top: 1.5px;
    padding-bottom: 1.5px;
    border-bottom: 1px solid var(--BorderColor);
    border-right: 1px solid var(--BorderColor);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .NewAddButton:hover {
        background-color: var(--MainBGColor) !important;
        color: var(--White) !important;
    }

.ShipmentAdd {
    width: 35px;
    padding: 5px;
}

.LayoutToolbar {
    margin-left: 1px;
    position: sticky;
    box-sizing: border-box;
    transition: width 500ms;
}


.LayoutFooter {
    position: absolute;
    bottom: 0;
    left: 110px;
    padding: 10px;
    width: calc(100% - 110px);
    z-index: 999;
}

.footerBackGroundColor {
    background-color: var(--ToolBarBackGround) !important;
}


.TopSpacing {
    margin-top: 20px;
}

.BottomSpacing {
    margin-bottom: 20px;
}

.customLeftTopHeaderToolBar .dx-button-text {
    color: var(--White);
}

.MiddletopHeader {
    height: 50px;
    background-color: var(--MainBGColor);
    flex-grow: 1;
}

.SearchButtonTopHeader .dx-button.dx-button-has-icon:not(.dx-button-has-text):not(.dx-shape-standard) {
    background-color: transparent;
    height: 25px;
}

.SearchButtonTopHeader .dx-button .dx-icon {
    width: 15px;
    height: 15px;
}

.RightTopHeader {
    position: fixed;
    right: 0;
    top: 0;
    background-color: var(--MainBGColor);
    height: 50px;
    padding-right: 10px;
    box-sizing: border-box;
}

.RightTopHeaderImage {
    height: 25px;
    box-sizing: border-box;
    width: 25px;
    color: var(--White);
    line-height: 30px;
    margin-top: 8px;
}

.CustomSearchPanel {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

    .CustomSearchPanel .RightSpacing {
        padding-right: 10px;
    }

.SearchTextTopHeader {
    height: 30px;
    background-color: var(--MainBGColor);
    position: fixed;
    display: flex;
    top: 10px;
    z-index: 1000;
}

    .SearchTextTopHeader .dx-texteditor-container {
        background-color: #fff;
    }

.TreeviewSpan {
    display: inline-flex !important;
    padding: 7px 4px !important;
    min-height: 24px !important;
    line-height: 11px !important;
    margin-right: 20px !important;
}

.LayoutSidebar {
    height: calc(100vh - 87px);
    max-width: 110px;
    border-right: 1px solid var(--BorderColor);
}

#LayoutBody {
    width: 100%;
    margin-left: 0px;
    margin-bottom: 0px;
    display: flex;
}

.LayoutContent {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    max-width: calc(100% - 55px);
}

.shipmentRenderBody {
    padding-right: 10px;
    padding-top: 5px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overflow-x: hidden;
}

.container {
    transition: padding 0s, margin 500ms !important;
}

/* Sidebar Toggle*/
.toggle {
    width: 80px !important;
    margin-bottom: 150px !important;
}

#content {
    transition: all 500ms;
}

.TreeviewSpantoggle {
    font-size: 0;
}

.btn-toolbartoggle {
    flex-direction: column;
    width: 80px;
}

.footerSize {
    width: 0px !important;
}

.sidebar-button-toggled {
    position: relative;
    right: 0;
    top: 0;
    height: 0px;
    width: 24px;
}

.MoreInfoTabsHorizontal {
    display: flex;
    margin-right: 10px;
}

.containertoggle {
    margin-left: 80px;
}

.ToggleLefttopHeader {
    flex-basis: 80px;
}

.sidebar-footer {
    position: fixed;
    bottom: 0;
    width: 280px;
}
    /*Sets the size of the footer sidebar buttons*/
    .sidebar-footer .dx-button {
        width: 100%;
        height: 50px;
        /*border: 1px solid #ddd;*/
    }

        .sidebar-footer .dx-button .dx-state-focused,
        .sidebar-footer .dx-button .dx-state-active {
            background: var(--MainBGColor);
        }

.btn-toolbar {
    display: flex;
}

.LefttopHeader #HomeButton.dx-button-mode-contained .dx-icon {
    width: 50%;
    height: 100%;
}

/*tool bar colors*/
/*.inverseColors.dx-button-mode-contained .dx-icon {
    color: white !important;
}

.inverseColors.dx-button-mode-contained.dx-state-hover {
    background-color: var(--MainBGColorPlus20);
}
*/
.LefttopHeader #HomeButton.dx-button-mode-contained.dx-state-hover {
    background: var(--LogoHover);
    background-color: var(--MainBGColor);
    background-size: auto 40px;
}

.DGofficeLogo {
    background: var(--Logo);
    background-size: auto 40px;
}

.Size-H50xW300 {
    width: 300px;
    height: 50px;
    display: block;
}

.selected > .dx-button-content > .dx-icon {
    color: #FFF !important;
}


.headerCenter {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

    .headerCenter > .checkBox {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        width: auto;
        background-color: var(--dx-component-color-bg);
    }

/*----------------CUSTOM CSS #IDS-------------------*/

/* set background color of regulation books to white, and some list had the color white as text,
    so apply for the book only the color black*/
#BookHtmlScrollview .dx-scrollable-container {
    background-color: white;
}

#BookHtmlScrollview .list {
    color: black;
}

#loading-image {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
}

#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    z-index: 9999;
    text-align: center;
}

#OpenDrawerSearch {
    border: 0;
    border-radius: 0%;
}

#richEditHelptext {
    background: #fff;
}

#RightMenu {
    height: 50px;
    overflow: hidden;
}

#SearchOptions {
    width: 100%;
    border: 2px solid var(--MainBGColor);
    background-color: #fff;
    padding: 5px;
}

    #SearchOptions .CheckboxListItem {
        float: left;
        width: 30%;
        box-sizing: border-box;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px
    }
/* Sidebar ****************************************************************************************************************************************************************************/
#sidebar {
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow-x: hidden;
    padding: 0;
    display: block;
    width: 281px;
    transition: width 500ms;
    border-right: 1px solid var(--BorderColor);
    border-left: 1px solid var(--BorderColor);
    margin-bottom: 50px;
}

    #sidebar .dx-treeview-item .dx-treeview-item-content span::selection {
        color: var(--White);
        background-color: #999999;
    }

    /*Sets the color of the sidebar when selected*/
    #sidebar .dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item {
        color: white;
        background-color: var(--MainBGColor) !important;
    }

    /*Sets the text color to when when focused*/
    #sidebar .dx-treeview-item-without-checkbox.dx-state-focused > .dx-treeview-item * {
        color: white !important;
    }


#ToggleButton {
    animation-duration: 2s;
    position: absolute;
    top: -24px;
    right: 0px;
    height: 24px;
    width: 24px;
}

.sidebar-toggle {
    align-items: end;
    width: 80px;
}

#HideTreeView {
    border-radius: 0%;
    border: thin;
    float: left;
    position: fixed;
    top: 41px;
    left: 2px;
    z-index: 900;
}

#DGOfficeIcon {
    background: var(--ModuleLogo);
    background-size: 60% auto;
    background-color: var(--BackgroundColor);
}

    #DGOfficeIcon.selected {
        background: var(--ModuleLogoHover);
        background-size: 60% auto;
    }

#SearchOptions.selected {
    background: var(--ModuleLogoHover);
    background-size: 60% auto;
    border: 1px solid var(--MainBGColor);
}

.dx-item-content.dx-treeview-item-content {
    display: flex;
    align-items: center;
}

    .dx-item-content.dx-treeview-item-content i {
        display: inline-block;
    }

/* 
    this is created because when we make a menu item that has a new template, 
    that uses a devexpress Icon, it was not aligend with the other items
*/
.MenuUsingDevexpressIcon {
    font-size: 25px !important;
    font-style: normal;
    margin-right: 5px;
    padding-bottom: 50px !important;
    line-height: 30px !important;
}

/*----------------CUSTOM CSS #IDS Devexpress-------------------*/

#drawerMoreInfo .dx-drawer-panel-content {
    top: 60px;
}

#GeneralHelp .dx-drawer-panel-content {
    position: sticky !important;
    top: 60px;
    z-index: 999;
}

#DGMoreInfoData .dx-drawer-content {
    box-sizing: content-box;
    left: 5px;
}

#ScrollViewMoreInfoContent {
    padding-top: 10px;
}

    #ScrollViewMoreInfoContent.dx-scrollable {
        padding-bottom: 33px;
    }

#MoreInfoTapPanel > .dx-scrollable {
    padding-bottom: 66px;
}

#RightMenu > .dx-menu-item.dx-state-hover {
    color: white;
    background-color: var(--MainBGColorPlus20);
}

#DSSearchGrid .dx-datagrid-content {
    cursor: pointer;
}
/*This is a temp solution for the richedit tabs, because it showed only "[Object Object]"*/
#TypeWriterEditor .dx-tabs {
    padding: 0;
    background-color: #f5f5f5; /*White off*/
    position: relative;
    height: 0px !important;
}

#AddNewMessage .dx-button-text {
    color: var(--White);
}

#DeleteMessage .dx-button-text {
    color: var(--White);
}

/*Treeview*/
#treeViewDgOffice .dx-treeview-item {
    padding: 5px 5px 5px 50px;
    min-height: 24px;
    margin-left: -45px;
}

    #treeViewDgOffice .dx-treeview-item span img {
        height: 24px;
        width: 24px;
        margin-right: 5px;
    }

#treeViewSettings .dx-treeview-item span img {
    height: 24px;
    width: 24px;
    margin-right: 5px;
}

#treeViewSettings .dx-treeview-item {
    padding: 5px 5px 5px 50px;
    min-height: 24px;
    margin-left: -45px;
}

#treeViewHelp .dx-treeview-item span img {
    height: 24px;
    width: 24px;
    margin-right: 5px;
}

#treeViewHelp .dx-treeview-item {
    padding: 5px 5px 5px 50px;
    min-height: 24px;
    margin-left: -45px;
}

#RightMenu .dx-menu-item.dx-state-hover {
    color: white;
    background-color: var(--MainBGColorPlus20);
}

#SearchOptions.dx-button-mode-contained.dx-state-focused {
    background-color: var(--MainBGColor) !important;
    outline: 0;
}

#SettingsIcon > .dx-button-content > .dx-icon {
    margin-right: 6px;
}

#FooterHelpIcon > .dx-button-content > .dx-icon {
    margin-right: 6px;
}

#DGOfficeIcon.dx-button-mode-contained.dx-state-hover {
    background: var(--ModuleLogoHover) !important;
    background-size: 60% auto !important;
    background-color: var(--MainBGColor) !important;
}

.info-comment {
    font-size: 11px;
    justify-content: space-between;
}

#CommentsGrid td > p {
    white-space: pre-line !important;
}

#CommentsGrid p {
    padding: 0;
    margin: 0;
}

.dg-flex {
    display: flex;
    gap: 30px;
}

.dg-flex-row-reverse {
    flex-direction: row-reverse;
}

.dg-flex-column {
    flex-direction: column;
}

.dg-field-label {
    width: 35px;
}

/* Media Queries **********************************************************************************************************************************************************************/
@media screen and (max-width: 1600px) {
}

@media (max-width: 1024px) {
    #MainMenu .dx-menu-horizontal {
        display: none !important;
    }

    #MainMenu .dx-menu-adaptive-mode {
        display: block !important;
        height: 50px;
        background-color: var(--MainBGColor);
    }

        #MainMenu .dx-menu-adaptive-mode .dx-button {
            height: 50px;
            width: 50px;
            background-color: unset;
        }

            #MainMenu .dx-menu-adaptive-mode .dx-button .dx-icon {
                color: #fff;
            }
}

@media (max-width: 768px) {

    /* Changed this from 
        .dx-popup-wrapper > .dx-overlay-content 
        to 
        .dx-popup-draggable.dx-resizable 
        because it was also affecting the regulation book cover hover popup */
    .dx-popup-draggable.dx-resizable {
        transition: none !important;
        width: 100% !important;
        height: 100% !important;
    }

    .LefttopHeader {
        flex-basis: 80px;
        height: 48px;
    }


    .RightTopHeader {
        position: fixed;
        right: 0;
    }

    #sidebar, #sidebar .dx-treeview-item .dx-treeview-item-content span {
        width: 80px;
        font-size: 0;
    }

    .sidebar-footer {
        width: 80px;
    }

        .sidebar-footer .dx-button {
            width: 80px;
        }

    .Container {
        width: calc(100% - 80px);
        margin-left: 80px;
        padding: 2px;
    }

    .btn-toolbar {
        flex-direction: column;
    }

    .dx-treeview-node {
        padding-left: 12px !important;
    }

    ToggleButton {
        display: none;
    }
}

.dx-command-edit,
.dx-command-edit-with-icons,
.dx-command-delete,
.dx-command-custom {
    margin-right: 0 !important;
    text-align: right !important;
}