/*@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');*/



#dropzone-external {
    width: 100%; 
    height: 350px;
    background-color: rgba(183, 183, 183, 0.1);
    border-width: 2px;
    border-style: dashed;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.upload-container > span {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 16px;
}

#dropzone-image {
    max-width: 100%;
    max-height: 100%;
}

#dropzone-text > span {
    font-weight: 100;
    opacity: 0.5;
}

.upload-progress {
    display: flex;
    margin-top: 10px;
}

.flex-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



html, body {
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    font-family: "Roboto", sans-serif !important;
    /*font-weight: 400;*/
    font-style: normal;
}

html, body {
    height: 100%;
    overflow: hidden;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.gridheight {
    height: calc(100vh - 60px) !important;    /*-100 to account for Header bar*/
}

.gridhalfheight {
    height: calc(50vh - 100px) !important; /*-100 to account for Header bar*/
}

.gridheight-minus-toolbar {
    height: calc(100vh - 120px) !important; /*-100 to account for Header bar*/
}

.gridheight-minus-editform {
    height: calc(100vh - 460px) !important; /*-100 to account for Header bar*/
}

.gridheight-inherit {
    height: inherit !important; /*-100 to account for Header bar*/
}

.gridheight-480-minus-toolbar {
    max-height: calc(480px - 60px) !important;
    /*height: 80vh;*/
    height: calc(480px - 60px);
}

.gridheightmax-480-minus-toolbar {
    max-height: calc(480px - 60px) !important;
}

.gridheight-570-minus-toolbar {
    max-height: calc(570px - 60px) !important;
    /*height: 80vh;*/
    height: calc(570px - 60px);
}

.gridheight-640-minus-toolbar {
    max-height: calc(640px - 60px) !important;
    /*height: 90vh;*/
    height: calc(640px - 60px);
}

.accordion-container {
    height: calc(100vh - 130px) !important;
    overflow: auto;
}

.accordion-popup-container {
    height: calc(100vh - 180px) !important;
    overflow: auto;
}

.largePopup-gridHeight {
    height: calc(100vh - 180px) !important;
    max-height: calc(100vh - 180px) !important;        
}

.largePopup-gridHeight-withbutton {
    height: calc(100vh - 240px) !important;
    max-height: calc(100vh - 240px) !important;        
}
.largePopup {
    height: calc(100vh - 100px) !important;
    width: calc(100vw -100px) !important;
    
}
.plannerPopup {
    height: calc(100vh - 100px) !important;
    max-height: calc(100vh - 165px) !important;    
}


.mediumPopup {
    height: 580px !important;
    width: 800px !important;
    max-width: 800px !important;
}

.wasteComponentPopup {
    height: 295px !important;
    width: 800px !important;
    max-width: 800px !important;
}

.qrPopup {
    height: 465px !important;
    width: 465px !important;
    max-width: 465px !important;
}

.qrPopupWithButton {
    height: 520px !important;
    width: 465px !important;
    max-width: 465px !important;
}

.smallPopup-width {
    width: 465px !important;
    max-width: 465px !important;
}

.mediumPopupGridheight {
    height: calc(90vh - 370px) !important;
}

.mediumPopupGridheight-Input {
    height: calc(580px - 180px) !important;
}

.popupGridheight {
    height: calc(100vh - 170px) !important;
}

.customRulegridheight {
    height: 420px !important;
}

.samplesPopup {
    height: 800px !important;
    width: 1400px !important;
    max-width: 1400px !important;
}

.samplesPopupGridheight {
    height: calc(800px - 80px) !important;
}


.popupCategorySettings {
    height: 60vh !important;
    width: 40vw !important;
}

.popupCategoryGeneral {    
    width: 40vw !important;
}


.popupCategoryGridheight {
    height: calc(60vh - 155px) !important;
}

.category-tab-body {
    height: calc(60vh - 110px) !important;
}

.fullHeight {
    height: 100% !important;
}

.quickActionWidth {
    width: 400px !important;
}

.quickActionWidth-small {
    width: 275px !important;
}

.fillContainer {
    width: 100%;
    height: 100%;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

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


.align-items-right {
    text-align: right;
}

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


.dx-gallery-item-image {
    max-height: 100%
}


.grid-modified-cell {
    /*background-color: rgba(var(--bs-primary-rgb), 0.15) !important;*/
    background-color: rgba(var(--bs-success-rgb), 0.25) !important;
}

.import-grid-required-cell {
    background-color: #FF2A00 !important;
    outline: 2px solid black;
}

.import-grid-invalid-row {
    background-color: #FAA18F !important;
}

.grid-mismatch-cell {
    background-color: #FFB05C !important;
}

.grid-yellow-cell {
    background-color: #FFFFB8 !important;
}

.grid-deleted-cell {
    background-color: #dedede !important;
    color: #858585 !important;
}

.dxbl-grid-toolbar-container {
    background-color: light-dark(#f0f0f0, #333) !important;
}

.GridToolbarColor {
    background-color: light-dark(#f0f0f0, #333) !important;
}


.alt-imec-item {
    background-color: color-mix(in srgb, var(--bs-gray-300), transparent 0%);
}

.alt-imec-item > td {
    --dxbl-grid-bg: color-mix(in srgb, var(--bs-gray-300), transparent 0%);
}


.hyper-link-color-blue {
    color: #0078D4 !important;
}

.dxbl-grid-selected-row .hyper-link-color-blue,
.dxbl-grid-focused-row .hyper-link-color-blue {
    color: #FFFFFF !important;
}


.status-pass {
    background-color: var(--bs-green)
}

.status-fail {
    background-color: var(--bs-red)
}
/*.e-name,
.e-title,
.e-email,
.e-photo,
.e-divider,
.e-icon,
label {
    color: rgba(var(--bs-body-color-rgb, 0, 0, 0), var(--color-opacity));
}*/

.e-main {
    line-height: 1;
}

.e-name {
    --color-opacity: 1;
    margin-bottom: 0.25rem;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
}

/*.e-title,
.e-email,
label {
    --color-opacity: 0.75;
}*/

.e-title {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.e-email {
    font-size: 0.75rem;
    text-decoration: underline;
    margin-bottom: 0;
}

.e-divider,
.e-photo {
    --color-opacity: 0.2;
}

.e-divider {
    height: 1px;
    background-color: currentColor;
}

.e-photo {
    border: 1px solid currentColor;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.item-photo {
   
    width: 150px;
    height: 150px;
}

@media (max-width: 479.98px) {
    .e-photo {
        width: 80px;
        height: 80px;
    }
}

.e-details {
    margin-top:20px;
    width: 100%;
}

    .e-details .text-container {
        font-size: 0.875rem;
        line-height: 1.125rem;
        white-space: nowrap;
    }

        .e-details .text-container label {
            font-size: 0.8125rem;
            line-height: 1rem;
        }

    .e-details .icon-container {
        width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.e-icon {
    --color-opacity: 0.75;
    display: inline-block;
    background-color: currentColor;
    width: 16px;
    height: 16px;
}

.e-icon-address {
    -webkit-mask-image: url("images/icons/address.svg");
    mask-image: url("images/icons/address.svg");
}

.e-icon-city {
    -webkit-mask-image: url("images/icons/city.svg");
    mask-image: url("images/icons/city.svg");
}

.e-icon-birthdate {
    -webkit-mask-image: url("images/icons/birthdate.svg");
    mask-image: url("images/icons/birthdate.svg");
}

.e-icon-phone {
    -webkit-mask-image: url("images/icons/phone.svg");
    mask-image: url("images/icons/phone.svg");
}

.wwwActionGrid .dxbl-grid-group-row {
    background-color: light-dark(#f0f0f0, #333) !important;
}

.wwwActionGrid .dxbl-grid-expand-button-cell {
    background-color: light-dark(#f0f0f0, #333) !important;
}

.wwwActionGrid .dxbl-grid-expand-button-cell .dxbl-btn {
    background-color: light-dark(#f0f0f0, #333) !important;
    visibility: hidden;
}

.scrollable {
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-right: 15px;
}

.left-aligned-button {
    padding: 4px 12px 4px 0px !important;
}

.gridmaxheight {
    height: calc(100vh - 130px) !important;
    max-height: calc(100vh - 100px) !important; /*-100 to account for Header bar*/
    overflow: auto;
}

.editFormWidth-400 {
    width: 400px !important;
    min-width: 200px !important;
    max-width: 400px !important;
}

.editFormWidth-500 {
    width: 500px !important;
    min-width: 300px !important;
    max-width: 500px !important;
}

.editFormWidth-600 {
    width: 600px !important;
    min-width: 400px !important;
    max-width: 600px !important;
}

.editFormWidth-700 {
    width: 700px !important;
    min-width: 400px !important;
    max-width: 700px !important;
}

.editFormWidth-800 {
    width: 800px !important;
    min-width: 500px !important;
    max-width: 800px !important;
}

.editFormWidth-900 {
    width: 900px !important;
    min-width: 600px !important;
    max-width: 900px !important;
}

.editFormWidth-950 {
    width: 950px !important;
    min-width: 650px !important;
    max-width: 950px !important;
}

.editFormWidth-1100 {
    width: 1100px !important;
    min-width: 650px !important;
    max-width: 1100px !important;
}


.editFormWidth-1200 {
    width: 1200px !important;
    min-width: 800px !important;
    max-width: 1200px !important;
}

.editFormWidth-1250 {
    width: 1250px !important;
    min-width: 800px !important;
    max-width: 1250px !important;
}

.maxheight-90pcent {
    max-height: 90% !important;
}

.search-lookup-grid {
    height: 500px;
    max-height:500px;
}

.logoSize {
    height: 43px;
    width: 60px;
    display: block;
    object-fit:fill;
}
dxbl-btn.dxbl-btn-primary.dxbl-btn-first.dxbl-btn-standalone {
    width: 100% !important;
}

#bb-theme {    
    border-color: light-dark(rgb(255, 255, 255), rgb(34, 34, 34)) !important;
}

.SidebarMarginGroup {
    margin-top :0!important;
}
.SidebarMargin {
    margin-top: 8 !important;
}

.sidebarsplitter {
    /*    min-width: 200px;*/
    max-width: 320px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    transition: transform 0.1s ease-out;
    height: 100%;
    max-height: 100%;
    overflow: auto;
    overflow-x: hidden;
    background-color: var(--bs-body-bg, var(--dxbl-body-bg, #fff));
}


.edit-form-buttons {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-self:flex-end;
}

.edit-form-buttons-start {
    display: flex;
    flex-direction: row;
    margin-right: auto;
    gap: 0.5rem;
    justify-self: flex-start;
}

.edit-form-buttons button {
    padding: 4px 12px;
    min-width: 4.5rem;
}

.dxbl-splitter > .dxbl-splitter-pane > .dxbl-splitter-pane-content.splitter-pane-padding-0 {
    padding: 0;
}

.required-caption:after {
    content: ' *';
    white-space: pre;
    color: red;
}

.mxh-70 {
    scrollbar-gutter: stable;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    overflow-x: hidden;
}

.flex-row-start {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 0.5rem;
}

.flex-row-end {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 0.5rem;
}

.combo-box-wrap {
    white-space: normal !important;
    word-break: break-word;
}

.popup-width-large {
    max-width: calc(100vw - 100px);
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup.popup-width-large:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width) {
    max-width: calc(100vw - 100px);
}

@media (min-width: 576px) {
    .popup-width-large {
        max-width: calc(100vw - 100px);
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.popup-width-large:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width) {
        max-width: calc(100vw - 100px);
    }
}

.popup-width-medium {
    max-width: 800px;
}

.popup-width-shippingBatchEdit {
    max-width: 1230px;
}

.popup-width-eManifest {
    max-width: 1500px;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup.popup-width-eManifest:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width) {
    max-width: 1500px;
}


.dxbl-modal > .dxbl-modal-root > .dxbl-popup.popup-width-shippingBatchEdit:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width) {
    max-width: 1230px;
}


.dxbl-modal>.dxbl-modal-root>.dxbl-popup.popup-width-medium:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width) {
    max-width: 800px;
}

@media (min-width: 576px) {
    .popup-width-medium {
        max-width: 800px;
    }
    
    .dxbl-modal>.dxbl-modal-root>.dxbl-popup.popup-width-medium:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width) {
        max-width: 800px;
    }
}


.popup-width-small {
    max-width: 500px;
}

.dxbl-modal>.dxbl-modal-root>.dxbl-popup.popup-width-small:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width) {
    max-width: 500px;
}

@media (min-width: 576px) {
    .popup-width-small {
        max-width: 500px;
    }
    
    .dxbl-modal>.dxbl-modal-root>.dxbl-popup.popup-width-small:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width) {
        max-width: 500px;
    }
}


.margin-top-1 {
    margin-top: 1rem;
}


.column-content-center {
    display: flex;
    justify-content: center;
}

.dropdown-mh {
    max-height: 50vh;
}

.padding-4 {
    padding: 4px !important;
}

.padding-04 {
    padding: 0.4rem;
}

.highlight dxbl-menu-item {
    background-color: light-dark(rgba(0, 0, 0, 0.1),rgba(255, 255, 255, 0.05));
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: rgb(70, 130, 180);
}

.account-width {
    width: 100px;
}


ul.dxbl-menu-item-list {
    max-height: 600px;
    overflow-y: auto;
}

.account-background {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: light-dark(rgba(0, 0, 0, 0.1),rgba(255, 255, 255, .3));
}

 .account-background div {
    border-radius: 50%;
}

 .account-background .empty-image {
    width: 100%;
    height: 100%;
    /*margin: 6px 6px;*/
    display: inline-block;
    text-align:center;
    align-content:center;
}

.account-background .account-image {
    width: 32px;
    height: 32px;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
    margin: 0 auto;
    display: table;
    background-size: 100%;
}

.text-container{
    margin-top:6px;
    text-align:left;
    vertical-align:central;
}


.display-inline {
    display: inline;
}

.wide-dropdownbox {
    max-height: 480px;
    max-width: 800px;
}

.huge-dropdownbox {
    max-height: 480px;
    max-width: 1200px;
}

.templateGrid {
    border-width: 0;
    width: 800px;
    height: 350px
}


.upload-container,
.upload-container > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.drop-file-icon {
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: #ADB5BD;
    width: 48px;
    height: 48px;
    -webkit-mask-image: var(--dxbl-icon-drop-file);
    mask-image: var(--dxbl-icon-drop-file);
}

.drop-file-label {
    font-weight: 500;
    font-size: 1rem;
}

dxbl-grid-layout-item.content:has(.remove-default-scroll-from-page) {
    overflow: unset;
}


/*.dx-dashboard-main-menu-item {
    visibility: hidden;
}*/

.dashboardDiv {
    height: 100vh;
    position: relative;
}
    .dashboardDiv h2 {
        font-weight: bold;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }


dxbl-check:has(~ div.validation-message) .dxbl-checkbox-check-element::before {
    border: var(--dxbl-checkbox-check-element-unchecked-border-width) solid var(--bs-danger) !important;
    opacity: unset !important;
}


.hide-drag-row-anchor {
    pointer-events: none !important;
}

.hide-drag-row-anchor svg {
    fill: white !important;
}


.dxbl-fl-cpt.dxbl-fl-caption-tmpl:has(.custom-caption) {
    display:contents !important;
}

.visibility-hidden {
    visibility: hidden;
}


.appcenter {
    margin: auto;
    width: 60%;
    padding: 10px;
    height:100%;
}

.app-link-enabled {
    border: none;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    transition: all 500ms ease;
}

.app-link-enabled:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
}

.app-link-disabled {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0.5;
    cursor: default;
    font-size: 16px;
    box-sizing: border-box;
}

.app-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    text-align: center;
}

.licenseExpired {
    font-size: xx-large;
    color: red;
    font-weight: bold;
}


.width-60 {
    width: calc(60vw - 100px) !important;
}

.max-width-60 {
    max-width: calc(60vw - 100px) !important;
}

.dxbl-menu-item-tmpl {
    display: flex;
    align-items: center;
}
.dxbl-menu-item-tmpl > .search {
    position: relative;
}


.lightgrey-text {
    color: lightgrey;
}

.grid-grouprow {
    font-size: 1.5rem;
    font-weight: bold;
}


.grid-row-1 {
    grid-row: 1;
}

.grid-row-2 {
    grid-row: 2;
}


.button-below-grid-container {
    padding: 1rem 0.8rem 1rem 0.8rem;
    align-items: center;
    justify-content: center;
    display:flex;
    flex-direction: row;
    gap: 2rem;
}


.min-height-0 {
    min-height: 0;
}

.listbox-150 {
    height: 150px !important;
}


.dxbl-scheduler-disabled-color {
    background-color: light-dark(#f0f0f0, #999) !important;
}

.loading-panel-height-fix {
    height:100%;
}

.WOFilterApplyButton {
    height: calc(100vh - 780px);
}

.ShipFilterApplyButton {
    height: calc(100vh - 535px);
}

.WWWFilterApplyButton {
    height: calc(100vh - 635px);
}

.WasteMasterFilterApplyButton {
    height: calc(100vh - 330px);
}

.BusinessCardsFilterApplyButton {
    height: calc(100vh - 636px);
}

.ActionsPageFilterApplyButton {
    height: calc(100vh - 430px);
}