body {
    padding-top: 50px;
}

/** COLOR VARIABLES **/
:root {
    --attire-link: #4F91CD;
    --attire-active-link: #C77292;
    --attireDiscreteBorder: #FAFFBF;
    --attireBtn: #fff; /*Buttons background*/
    --attireBtnHover: #C77292; /*Buttons background on hover*/
    --attireBtnText: #C77292; /*Buttons text*/
    --attireBtnTextHover: #fff; /*Button text on hover*/
    --attireBtnBorder: #ddd;
    --attireBtnBorderHover: #C77292;
    --attireInPageHeader: #4F91CD;
    --attireInPageSubHeader: #3C4856;
    --devExpressYesBtn: #4faa88;
    --devExpressNoBtn: #b53d5a;
    --devExpressYesBtnText: #fff;
    --devExpressNoBtnText: #fff;
    --devExpressYesBtnBorder: #ddd;
    --devExpressNoBtnBorder: #ddd;
    --devExpressYesBtnHover: #fff;
    --devExpressNoBtnHover: #fff;
    --devExpressYesBtnTextHover: #4faa88;
    --devExpressNoBtnTextHover: #b53d5a;
    --bs-link-color: #3C4856;
    --bs-nav-link-color: #FF0000;
    --bs-nav-link-hover-color: #C77292;
    --attireStatusSaturation: 85;
    --attireStatusLightness: 93;
    --attireEditHighlight: #f8f7a8;
    --dashboard-background: lavender;
}


/************GLOBAL STYLES*******************/

html, body {
    color: #222222;
    font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
    font-size: 10px;
    line-height: 1.428571429;
    padding-bottom: 0px;
    padding-top: 0px;
}

body {
    height: 100vh;
    overflow-y: hidden;
    padding: 10px;
}

a {
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    text-decoration: none;
    color: var(--attire-link);
}

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/

.nav-link {
    color: var(--attire-link);
}

.dl-horizontal dt {
    white-space: normal;
}

input,
select,
textarea {
    border-radius: 3px;
    border-width: 1px;
}

/* Set width on the form input elements since they're 100% wide by default */

input,
select {
    /*    max-width: 280px;*/
    border-radius: 3px;
    border-width: 1px;
}

#header-buttons, .header-buttons {
    margin-bottom: 0.5rem !important;
}

/******** Some DX overrides *******************************/

.dx-placeholder {
    left: 6px;
}
    .dx-layout-manager .dx-field-item:not(.dx-first-row) {
    padding-top: 2px;
}

.dx-form-group-caption {
    font-size: 14px;
    font-weight: 600;
    color: #4F91CD;
}

.dx-form-group-with-caption > .dx-form-group-content {
    margin-top: 3px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.dx-field {
    min-height:24px;
    margin:initial;
}

.dx-field-label {
    padding: 5px 8px 5px 0;
    padding-top: 5px;
    padding-right: 8px;
    padding-bottom: 5px;
    padding-left: 0px;
}

.dx-field-item-label-text {
    color: #303030;
}

.dx-lookup {
    height:revert;
    min-height:24px;
}

.dx-box-item-content,
.dx-widget,
.dx-field {
    font-size: 12px;
}

.dx-datagrid .dx-row > td {
    padding: 5px;
}

.dx-texteditor-input {
    /*
    padding: 4px 5px 4px;
    min-height:24px;
    */
}

.dx-closebutton .dx-icon {
    color: #CCC;
}

.dx-button-has-icon .dx-button-content {
    padding: 5px;
}

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

.dx-button {
    height: 37px;
    min-width: 37px;
    padding: 3px 8px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    color: var(--attireBtnText);
    background-color: var(--attireBtn);
    border: 1px solid var(--attireBtnBorder);
    transition: background-color 0.3s ease, color 0.3s ease;
}
    .dx-button:hover {
        background-color: var(--attireBtnHover);
        color: var(--attireBtnTextHover);
        border-color: var(--attireBtnBorderHover);
    }
    .dx-button:hover .dx-icon {
        color: var(--attireBtnTextHover);
    }

.dx-buttongroup-item.dx-button.dx-button-mode-contained:not(.dx-item-selected) {
    background-color: var(--attireBtn);
}

.dx-datagrid-group-panel .dx-group-panel-item {
    background-color: var(--attireBtn);
    font-weight: bold;
    color: var(--attireBtnText);
    border: 1px solid var(--attireBtnBorder);
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.dx-datagrid-group-panel:hover .dx-group-panel-item {
    color: var(--attireBtnTextHover);
    background-color: var(--attireBtnHover);
    border-color: #ddd;
}
.dx-datagrid-group-panel .dx-sort,
.dx-datagrid .dx-header-filter,
.dx-datagrid .dx-header-filter-empty {
    /*
    color: var(--attireBtnText);
    */
}
.dx-datagrid-group-panel:hover .dx-sort,
.dx-datagrid-group-panel:hover .dx-header-filter {
    color: var(--attireBtn);
}

.dx-popup-bottom.dx-toolbar .dx-toolbar-after .dx-toolbar-item:last-child .dx-widget.dx-button,
.dx-popup-bottom.dx-toolbar .dx-toolbar-center .dx-toolbar-item:last-child .dx-widget.dx-button {
    background-color: var(--devExpressNoBtn);
    color: var(--devExpressNoBtnText);
    border-color: var(--devExpressNoBtnBorder);
}
.dx-popup-bottom.dx-toolbar .dx-toolbar-after .dx-toolbar-item:last-child .dx-widget.dx-button:hover,
.dx-popup-bottom.dx-toolbar .dx-toolbar-center .dx-toolbar-item:last-child .dx-widget.dx-button:hover {
    background-color: var(--devExpressNoBtnHover);
    color: var(--devExpressNoBtnTextHover);
    border-color: var(--devExpressNoBtnBorder);
}

.dx-popup-bottom.dx-toolbar .dx-toolbar-after .dx-toolbar-item:first-child .dx-widget.dx-button,
.dx-popup-bottom.dx-toolbar .dx-toolbar-center .dx-toolbar-item:first-child .dx-widget.dx-button,
.dx-popup-bottom.dx-toolbar .dx-toolbar-center .dx-toolbar-item:only-child .dx-widget.dx-button {
    background-color: var(--devExpressYesBtn);
    color: var(--devExpressYesBtnText);
    border-color: var(--devExpressYesBtnBorder);
}

.dx-popup-bottom.dx-toolbar .dx-toolbar-after .dx-toolbar-item:first-child .dx-widget.dx-button:hover,
.dx-popup-bottom.dx-toolbar .dx-toolbar-center .dx-toolbar-item:first-child .dx-widget.dx-button:hover,
.dx-popup-bottom.dx-toolbar .dx-toolbar-center .dx-toolbar-item:only-child .dx-widget.dx-button:hover {
    background-color: var(--devExpressYesBtnHover);
    color: var(--devExpressYesBtnTextHover);
    border-color: var(--devExpressYesBtnBorder);
}

.dx-popup-title.dx-toolbar .dx-closebutton {
    background-color: var(--attireBtnText);
    border:none;
}

.dx-button-has-icon .dx-icon,
.dx-button .dx-icon {
    line-height: 14px;
    font-size: 14px;
}

.dx-button-has-text .dx-icon {
    margin-right:5px;
}

.dx-checkbox-checked .dx-checkbox-icon {
    color: var(--attire-active-link);
}


.dx-tab {
    padding: 4px;
}

.dx-dropdowneditor-button {
    width: 24px;
    min-width: 24px;
}

.dx-dropdowneditor-icon {
    width: 22px;
    font-size: 14px;
    color: #99a1a8;
}

.dx-datebox-date
.dx-dropdowneditor-icon {
    width: 22px;
    font-size: 14px;
    color: #99a1a8;
}

    .dx-dropdowneditor-icon::before {
        width: 14px;
        margin-left: -7px;
        margin-top: -7px;
    }

.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content {
    padding: 2px 4px;
}

.dx-datagrid-nodata {
    font-size: 14px;
}

.dx-datagrid-group-panel {
    font-size:12px;
}

.dx-datagrid-group-panel .dx-group-panel-message {
    color: #99a1a8;
    padding: 5px;
}

.dx-list-select-all-label {
    line-height: 16px;
    padding: 0 5px;
}
.dx-list-item-before-bag.dx-list-select-checkbox-container,
.dx-list-item-before-bag.dx-list-select-radiobutton-container {
    width: 26px;
}
.dx-list-item, .dx-list .dx-empty-message {
    border-top: none;
}

.dx-list-select-all
{
    padding: 4px 0 0 0;
}

.dx-list-item-content, .dx-list .dx-empty-message {
    padding: 5px 5px;
}

.dx-checkbox-icon {
    height:16px;
    width:16px;
}

.dx-datebox-wrapper-calendar .dx-calendar {
    margin: 15px;
}

.dx-calendar {
    height: 225.4px;
    min-height: 225.4px;
    min-width: 232px;
    width: 232px;
}

.dx-calendar-navigator {
    border-collapse: collapse;
    display: table;
    height: 30px;
}

.dx-calendar-navigator .dx-calendar-caption-button {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    left:24px;
    right:24px;
}

.dx-calendar-navigator-previous-month, .dx-calendar-navigator-next-view {
    background: none;
    width: 24px;
}
    .dx-calendar-navigator-previous-month .dx-button-content, .dx-calendar-navigator-next-view .dx-button-content {
        padding: 0;
    }

.dx-calendar-navigator .dx-calendar-caption-button.dx-button .dx-button-content {
    color: #39c;
    padding: 3px 3px;
}

.dx-calendar-body table th {
    font-size: 10px;
    padding: 1px 0 2px 0;
    text-align: center;
}

.dx-calendar-cell {
    font-size: 13px;
    padding: 1px 3px 2px;
    width: 39px;
}

.dx-menu .dx-menu-horizontal .dx-menu-item-popout {
    font-size: 14px;
    text-align: center;
}

.dx-filter-menu.dx-menu .dx-menu-item .dx-menu-item-content {
    padding: 5px 3px 3px;
}

.dx-datagrid-headers .dx-texteditor-input, .dx-datagrid-rowsview .dx-texteditor-input {
    min-height: 26px;
    padding: 5px;
}

.dx-popup-content {
    padding: 0.2em;
    background-color: hsl(208deg 20% 90%);
}
.dx-dialog-message {
    color: #333;
}

.dx-popup-bottom {
    background: hsl(208deg 20% 90%);
    border-block-start: solid 1px hsl(208deg 20% 50%);
}

.dx-field-label-short {
    width:unset;
    float:initial;
}
.dx-toolbar .dx-toolbar-after {
    margin: 0.1rem;
}

.dx-datagrid .dx-link {
    color: var(--attire-active-link);
}
.dx-editor-outlined.dx-texteditor-with-label.dx-state-hover .dx-lookup-field,
.dx-editor-outlined.dx-texteditor-with-label.dx-dropdowneditor-active.dx-state-focused .dx-lookup-field,
.dx-editor-outlined.dx-texteditor-with-label.dx-state-focused .dx-lookup-field,
.dx-texteditor-with-label.dx-state-hover .dx-lookup-field,
.dx-texteditor-with-label.dx-state-focused .dx-lookup-field,
.dx-editor-outlined.dx-texteditor-with-label.dx-state-focused .dx-lookup-field, .dx-editor-outlined.dx-texteditor-with-label.dx-state-focused.dx-state-hover .dx-lookup-field,
.dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover .dx-lookup-field, .dx-editor-outlined.dx-texteditor-with-label.dx-state-hover .dx-lookup-field,
.dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused .dx-lookup-field,
.dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused .dx-lookup-field, .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-state-hover .dx-lookup-field {
    font-size: 12px;
}

.dx-placeholder:before {
    padding: 0;
    padding-left: 4px;
}

.dx-selectbox .dx-texteditor-input {
    padding: 0;
    padding-left: 10px;
}

.dx-tabpanel-container {
    height:95%;
    overflow-y:hidden;
}

.dx-field-item-required {
    font-weight: bold;
}

/******* Account and setting dropdown ******/
#login-body {
    position: relative;
}

.login-placemiddle {
    height: 200px; /* Set this to your convenience */
    left: 50%;
    margin-left: 150px; /* Half of width */
    margin-top: 100px; /* Half of height */
    position: absolute;
    top: 50%;
    width: 300px; /* Set this to your convenience */
}




.login-form {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    /*background: #f7f7f7 none repeat scroll 0 0;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-size: 14px;
    height: 50px;
    line-height: 50px;*/
}

*

.user-name {
    all: initial;
    padding: 10px;
    position: absolute;
    right: 16px;
    top: 8px;
}

.login {
    margin-top: 100px; /* Half of height */
}


.login_btn {
    margin-top: 100px; /* Half of height */
}

.login_checkbox {
    display: none;
}



/****TopMenu****/

.topmenu {
    /*max-width: 1920px;*/
    grid-area: top-menu;
    display: grid;
    grid-template-columns:250px 1fr;
    border: 1px solid;
    border-color: #efefef;
    border-radius: 3px;
    margin-bottom: 5px;
    padding-left: 2px;
    padding-right: 2px;
    position: relative;
}

.topmenu-right {
    padding-top:3px;
}

.topmenu-user {
    padding-left: 10px;
    position: fixed;
    right: 100px;
    top: 5px;
}



.topmenu .navbar-collapse {
    padding-left: 0px;
}

.topmenu .container {
    margin-left: 0px;
    margin-top: 1px;
}


.topmenu-navbar {
    margin-left: -25px;
}

.nopadding {
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
}

.noborder {
    border:none !important;
}

.topmenu-left {
    border-right: 1px solid #efefef;
    display:grid;
    grid-template-rows:auto auto auto;
    width: 100%;
    padding-inline:10px;
    padding-block:5px;
}

.topmenu-logo {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 5px;
    align-items: center;

    & a {
        vertical-align: central;
    }
}

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


    .logo-center img {
        width: clamp(300px, 20vw, 500px);
        display: block;
        text-align: center;
        vertical-align: middle;
    }



.topmenu-tab {
    display: flex;
    margin-left: 30px;
    margin-top: 5px;
    width: 150px;
}

.topmenu-tab a {
    display: flex;
    align-items:center;
}

.tabmenu .top-row {
    margin-left: 12px;
    margin-top: 3px;
}

.tabmenu .bottom-row {
    margin-left: 12px;
    margin-top: 3px;
}

.search-box, .close-icon, .search-wrapper {
    position: relative;
    padding: 10px;
}

.liveSearchInputWrapper {
    margin-left:auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    height: 100%;
    box-sizing: border-box;
    position:relative;
    right:0%;
}
.searchForm {
    height: 100%;
}

.SearchIconButton {
    float: left;
    font-size: 16px;
    height: auto;
    padding: 3px 4px 0 5px;
    color: var(--attire-link);
    background: white;
    border: none;
}

.liveSearchInput {
    color: var(--attire-link);
    padding:3px;
    width: 200px;
    height: 100%;
    border: none;
    font-size: 14px;
    box-sizing: border-box;
    right:7%;
}
.liveSearchInput:focus {
        outline: none;
}

.close-icon {
    border: none;
    background-color: transparent;
    display: inline-block;
    vertical-align: middle;
    outline: 0;
    cursor: pointer;
}

    .close-icon:after {
        content: "X";
        display: block;
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: white;
        z-index: 1;
        right: 5px;
        top: 0;
        bottom: 35%;
        margin: auto;
        text-align: center;
        color: var(--attire-link);
        font-weight: bold;
        font-size: 12px;
        cursor: pointer;
    }
.searchResults {
    display: block;
    position: absolute;
    top: 105%;
    right: 0%;
    max-height: 95vh;
    width: 50em;
    z-index: 500;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.5s;
    opacity: 1;
    overflow: auto;
}
.searchResultsWrapper {
    display: grid;
    opacity: inherit;
    transition: all 1s;
    color: var(--attire-link);
    padding: .5em;
    max-height: 95%;
    grid-template-columns: auto;
    grid-row-gap: 5px;
    font-family: Helvetica Neue,Segoe UI,helvetica,verdana,sans-serif;
}
.searchResultsGrid {
    display: grid;
    grid-template-columns: 50% auto;
    border: 1px solid white;
    box-sizing: border-box;
    border-radius: 3px;
    overflow-x: hidden;
    text-decoration: none;
    color:inherit;
}
    .searchResultsGrid:hover {
        box-shadow: 0 0 6px .8px var(--attire-link);
    }

.searchResultsHeader summary{
    border-bottom: .8px solid var(--attireBtnBorder);
}
.searchResultsHeader:last-child summary {
    border-bottom: none;
}
.searchResultsHeader[open]:last-child summary {
    border-bottom: .8px solid var(--attireBtnBorder);
}
    .searchResultsHeader > summary {
        padding: 10px 5px 10px 5px;
        font-weight: bold;
        font-size: 20px;
    }

.divider {
    width: 100%;
    background-color: var(--attireBtnBorder);
    height: .8px;
}
.searchResultsText {
    display: inherit;
    padding: 5px;
    font-size: 16px;
}
.liveSearchInput:not(:valid) ~ .close-icon{
    display: none;
}
.liveSearchInput:not(:valid) ~ .searchResults {
    height: 0px;
    width: 0px;
    opacity:0;
}
#SupportButton {
    margin: 1.5rem;
    height: 6rem;
    width: 6rem;
    background-color: var(--attire-link);
    border-radius: 5rem;
    align-content: center;
    text-align: center;
    float: right;
    font-family: sans-serif;
    font-size: 4rem;
}

.supportButtonLink:any-link {
    color: white;
    margin: auto;
}
#mainMenuContent{
    float:inline-start;
    width:85%;
}
.menu-item-container {
    display: grid;
    grid-template-columns: repeat(8, minmax(auto, 15rem));
    grid-template-rows: auto auto;
    grid-row-gap: 1rem;
    grid-column-gap: 2rem;
    margin-top: 0.5rem;
    margin-left: 2rem;
    margin-bottom: 0.5rem;
}

    .menu-item-container > .top-menu-item {
        grid-row:1;
    }

    .menu-item-container > .bottom-menu-item {
        grid-row: 2;
    }

    .menu-item-container a {
        display: flex;
        align-items: center;
        /*container-type:inline-size;*/
    }

    .menu-item-container .menu-icon {
        display: block;
    }
    .menu-item-container .menu-icon i {
        font-size:20px;
        color: var(--attire-link);
    }

/* Hide menu icons if there's not enough space */
/*
@container (max-width:8rem) {

    .menu-item-container .menu-icon {
        display: none;
    }
}
*/

.topmenu .visible {
    transition: margin-left .5s;
}

.menu-icon {
    height: 32px;
    width: 32px;
    display:block;
}

.menu-logo {
    height: 30px;
    width: 100px;
}

/*Main container*/

.main-window {
    max-height: 100%;
    overflow:hidden;
    grid-area: main-window;
    margin: 0;
}

.main-layout {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "top-menu"
        "main-window";
    height: 100%;
    padding: 3px;
    overflow: hidden;
    position: relative;
}

/**main content area**/

.main-content {
    grid-area: main-window;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.thin-border {
    border: 1px solid;
    border-color: #efefef;
    border-radius: 3px;
    padding:0.2rem;
}

.attire-row {
    display:flex;
}

.nav-tabs .nav-link.active {
    color: var(--attire-active-link);
}
/** Styles screens **/
#StyleInformationTabPanel .dx-multiview-item-content {
    padding:20px;
}
#detailsArticle-body, #ID_articleForm, #ID_ArticleTabPanel, #divArticleColors, #divMadeIn, #divArticleSKU {
    height: 100%;
}
#detailsArticle-container {
    height: calc(100% - 42px); /* Remove button heights for correct height */
}
#ID_ArticleTabPanel .dx-multiview-wrapper {
    height: 100%;
}
#divArticleColors, #divMadeIn, #divArticleSKU {
    padding: 4px;
}
#detailsArticle-container .dx-layout-manager, #detailsArticle-container .dx-field-item, #detailsArticle-container .dx-field-item-content, #detailsArticle-container .dx-form, #detailsArticle-container .dx-tabpanel {
    height: 100%;
}

#detailsArticle-container .dx-item .dx-box-item {
    flex-grow: unset !important;
}
.details-buttons {
    margin-bottom: 0.5rem !important;
}

#ID_numCopies .dx-texteditor-input {
    padding: 10px 9px 11px !important;
}

#articlereport-grid .dx-toolbar .dx-toolbar-items-container {
    height: 45px;
}
.fix-label {
    margin-top: unset!important;
}
.fix-flex-direction .dx-widget {
    flex-direction: column !important;
}

.style-info-container {
    display: grid;
    column-gap: 3rem;
    height: inherit;
    width: 100%;
    overflow: hidden;
    grid-template-columns: clamp(30rem, 20%, 50rem) 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
        "ean-head ean-head"
        "ean-search style-head"
        "style-selection seasons"
        "style-selection style-info"
}

    .style-info-container .ean-head {
        grid-area: ean-head;
    }

    .style-info-container .ean-search {
        grid-area: ean-search;
        display: flex;
    }

    .style-info-container .style-head {
        grid-area: style-head;
    }

    .style-info-container .style-selection {
        grid-area: style-selection;
        height: 100%;
        overflow: hidden;
    }

    .style-info-container .seasons {
        grid-area: seasons;
    }

    .style-info-container .style-info {
        grid-area: style-info;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .style-info-container .dx-text-content-alignment-right {
        text-align:left!important;
    }

    #divFileToImport .dx-fileuploader-wrapper {
        padding: 0px !important;
    }
#divFileToImport .dx-fileuploader-input-wrapper {
    padding: 3px 0 !important;
}
.mt5px {
    margin-top:5px;
}
#SearchEanButton {
    height: 34px;
    margin-top:7.5px;
}

#divArticleInfo .AttireTabs {
    height: calc(100% - 145px);
}

/** PO orders **/
.view-purchase-orders #deliveryDatePicker,
#poReportSelect #report_from_date,
#poReportSelect #report_to_date,
#poReportSelect #report_suppliers,
#poReportSelect #report_articles,
#poReportSelect #report_warehouses {
    margin-top: 0px;
    padding-top: 2px;
    padding-bottom: 1px;
}
#gridPOrows .dx-datagrid {
    padding: 5px;
}
/** Price screens **/
#detailsMargin-container, #detailsPriceList-body {
    height: calc(100% - 42px);
}
#ID_detailsMarginMarkupArtGroup-body, #ID_PV_ID_MarginMarkupArtGroup, #ID_MarginMarkupArtGroup_Form, #ID_SubSelections, #ID_FORM_MANUALINVOICE, #ID_pricelistForm, #ID_Form_AutomaticInvoice {
    height: 100%;
}
#pricelist_report_pricelist, #ID_SelectionHeader .dx-texteditor-with-label.dx-dropdowneditor {
    margin-top: 0px;
    padding-top: 2px;
    padding-bottom: 1px;
}
#ID_SelectionHeader {
    display:block;
}
#ID_SelectionHeader .dx-editor-outlined.dx-texteditor-with-floating-label,
#ID_SelectionHeader .dx-editor-outlined.dx-texteditor-with-label {
    width: 100%;
}
.price-calculation-container > .selection {
    display:block!important;
}
.border-box {
    border: 1px solid #ddd;
}
#detailsPriceList-body .dx-multiview-item-content {
    padding:20px;
}
.custom-checkbox-padding .dx-checkbox-icon {
    width:22px;
    height:22px;
}
/** Order screens **/
#form_supplierDetails .dx-editor-outlined.dx-texteditor-with-floating-label {
    margin-top: 0px;
    padding-top: 2px;
    padding-bottom: 1px;
}
#order_report_season_from, #order_report_season_to, #order_report_firstdate, #order_report_lastdate {
    margin-top: 0px;
    padding-top: 2px;
    padding-bottom: 1px;
}
#ID_FileToImport .dx-fileuploader-wrapper {
    padding: 0px !important;
}

#ID_FileToImport .dx-fileuploader-input-wrapper {
    padding: 3px 0 !important;
}

#Customers #ID_nCustomerCode {
    padding-top: 2px;
    padding-bottom: 1px;
    height: 34px;
}

/** Return screens **/
#wholesalereturn_container .details-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: auto;
    grid-template-areas:
        "sku-selector"
        "order-rows"
}


#wholesalereturn_container .details-grid .sku-selector {
    grid-area: sku-selector;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    padding-block-end:7.5px;
    grid-column-gap:20px;
    align-items:end;
    max-inline-size:130em;
}

#wholesalereturn_container .details-grid .order-rows {
    grid-area: order-rows;
    height: 100%;
    overflow-y: hidden;
}

/** Booking screens **/
#TotalBookingTabPanel .dx-multiview-item-content {
    padding: 20px;
}
#ID_totalBookingForm {
    height: 100%;
}

/** Delivery screens **/
#deliveryView #purchaseOrders,
#deliveryView #existing_inbounds,
#deliveryView #suppliers_w_po {
    margin-top: 0px;
    padding-top: 2px;
    padding-bottom: 1px;
    margin-top: 4px;
}
#deliveryView #ID_PD_AddItems,
#deliveryBtns {
    margin-top: 4px;
}
#deliveryReport #report_warehouses,
#deliveryReport #report_suppliers,
#deliveryReport #report_articles,
#divcreatepl #ID_LookupFilterBy,
#divcreatepl #ID_LookupCreatePLBy,
#divcreatepl #ID_PackTextArea,
#existing_GR {
    margin-top: 0px;
    padding-top: 2px;
    padding-bottom: 1px;
}

.single-pane-container > .gr-details {
    display: grid;
    height: inherit;
    width: 100%;
    overflow: hidden;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "gr-header"
        "gr-rows"
}

.gr-details .gr-header {
    grid-area: gr-header;
}

.gr-details .gr-rows {
    grid-area: gr-rows;
    height: 100%;
    overflow: hidden;
}

.popupdatagrid {
    height: calc(100% - 40px);
}
#ID_CreatePacklists {
    height: 100%;
}
/** Invoice screens **/
#detailsInvoice-body #ID_selectedInvoice, #ID_Layout,
#autoinvoiceoptions #ID_NumberSequence, #autoinvoiceoptions #ID_PaymentTerm,
#autoinvoiceoptions #ID_SpecificDiscount,
#divsalesreport #sales_report_season_from,
#divsalesreport #sales_report_season_to,
#divsalesreport #sales_report_firstdate,
#divsalesreport #sales_report_lastdate {
    margin-top: 0px;
    padding-top: 2px;
    padding-bottom: 1px;
}

#ID_manualInvoicesForm {
    grid-area:form;
    height:100%;
    overflow:hidden;
}
#detailsInvoice-body, #detailsInvoice-body form, #ID_AutomaticInvoiceForm {
}
.form-checks .form-check-input {
    position:unset;
}

.invoice-cancelled {
    background-color: lightcoral;
}

#ID_AutomaticInvoiceForm {
    height: 100%;
    display:grid;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
        "header"
        "options"
        "hr"
        "grid";
}
#ID_Form_AutomaticInvoice {
    padding-block-start:10px;
}
#autoinvoiceoptions {
    grid-area: options;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

#ID_AutomaticInvoiceForm {
    overflow: hidden;
}

 #ID_AutomaticInvoiceForm .grid {
    overflow: hidden;
    height: 100%;
    grid-area: grid;
    display: block;
}

/** Customer screens **/
#CustomerTabPanel .scrollable-content {
    height: 100%;
    overflow-y: auto;
}
/** Supplier screens **/
#SupplierTabPanel .scrollable-content {
    height: 100%;
    overflow-y: auto;
}

/** Maintenance screens **/
#copySeasonDiv #ID_ToSeason,
#copySeasonDiv #ID_FromSeason,
#validSizesDiv #ID_MainGroup,
#validSizesDiv #ID_StyleGroup,
#validSizesDiv #ID_UnderGroup {
    margin-top: 0px;
    padding-top: 2px;
    padding-bottom: 1px;
}

#form .dx-tabpanel-container {
    background-color: #FFF;
}
/** Stock screens **/
#divselects #ID_Name_WareHouse,
#divselects #ID_reasonForAddStock,
#divselects #ID_Articles,
#divselects #ID_Colors,
#divstockcorrection #ID_PrioWarehouseId,
#divstockcorrection #ID_nWHLocation,
#divstockcorrection #ID_nExternalStockCorrectionId,
#divstockcorrection #ID_dtArrivalDate,
#divstockcorrection #stock-value-date,
#divstockcorrection #article_report_warehouse,
#divstockcorrection #article_report_currency,
#divstockcorrection #last_included_date,
#divstockcorrection #report_from_date,
#divstockcorrection #report_to_date,
#divstockcorrection #report_warehouses,
#divstockcorrection #report_articles,
#divstockcorrection #report_colors,
#divstockcorrection #report_sizes,
#divstocktransfer #ID_WarehouseFrom,
#divstocktransfer #ID_WarehouseTo {
    margin-top: 0px;
    padding-top: 2px;
    padding-bottom: 1px;
}
#ID_StockTransferFormFrom,
#ID_StockTransferFormTo {
    height: 100%;
}
#form_locationDetails .custom-label {
    margin-right: auto;
}
/** Report screens **/
.single-pane-container {
    display: grid;
    row-gap: 0.5rem;
    height: 100%;
    overflow: hidden;
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas:
        "header"
        "captions"
        "dropdowns"
        "buttons"
        "grid"
        "footer"
}
    .single-pane-container > div {
        display:flex;
    }

    .single-pane-container > .page-header {
        padding-top: initial;
        display: flex;
        grid-area: header;
    }

    .single-pane-container > .captions {
        padding-top: initial;
        display: flex;
        grid-area: captions;
    }

    .single-pane-container > .dropdowns {
        display: flex;
        grid-area: dropdowns;
        padding-left: 0;
    }

    .single-pane-container > .buttons {
        display: flex;
        grid-area: buttons;
    }

    .single-pane-container > .details,
    .single-pane-container > .grid {
        overflow: hidden;
        height: 100%;
        grid-row:grid / footer;
        display:block;
    }

    .single-pane-container > .grid-with-footer {
        overflow: hidden;
        height: 100%;
        grid-area:grid;
        display: block;
    }

    .single-pane-container > .footer-row {
        display: flex;
        grid-area: footer;
    }


    .captions > div, .dropdowns > div, .captions > label {
        padding-left: 0;
    }

    .buttons > div {
        margin-right:0.5rem;
    }

.single-pane-container .top-section {
    grid-row-start: 1;
    grid-row-end: span grid-start;
    display: grid;
    grid-template-rows: auto;
    row-gap: 1rem;
}


.two-pane-container {
    display: grid;
    height: 100%;
    width: 100%;
    overflow: hidden;
    column-gap: 3rem;
    grid-template-rows: auto auto auto 1fr;
    grid-template-columns: clamp(30rem, 20%, 50rem) 1fr;
    grid-template-areas: "page-header page-header"
        "list-header details-header"
        "list details-buttons"
        "list details"
}

    .two-pane-container > .page-header {
        grid-area:page-header;
        display:flex;
    }

    .two-pane-container > .list-header {
        grid-area:list-header;
        display:flex;
    }
    .two-pane-container > .details-header {
        grid-area: details-header;
        display: flex;
    }

    .two-pane-container > .details-buttons {
        grid-area: details-buttons;
        /*display: flex;*/
    }

    .two-pane-container > .fixed-list, .two-pane-container > .scrolling-list {
        grid-area: list;
        display: block;
        height: 100%;
    }

    .two-pane-container > .scrolling-list {
        overflow: auto;
    }

    .two-pane-container > .fixed-list {
        overflow:hidden;
    }

    .two-pane-container > .fixed-details, .two-pane-container > .scrolling-details {
        grid-area: details;
        display: block;
        height: 100%;
    }

    .two-pane-container > .fixed-details {
        overflow: hidden;
    }

    .two-pane-container > .scrolling-details {
        overflow: auto;
    }

    .details-header > div {
        padding-left: 0;
    }

.half-pane-container {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "buttons buttons"
        "left right";
    grid-column-gap: 1rem;
    grid-row-gap: 0.5rem;
    overflow: hidden;
    height: 100%;
}

.half-pane-container .buttons {
    grid-area: buttons;
    display: flex;
}

.half-pane-container .left-side {
    grid-area: left;
    overflow: hidden;
    height: 100%;
}

.half-pane-container .right-side {
    grid-area: right;
    overflow: hidden;
    height: 100%;
}


.master-details {
    display: grid;
    height: inherit;
    overflow: hidden;
    row-gap: 0.5rem;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "selectors"
        "commands"
        "form"
}

.master-details .selectors {
    grid-area: selectors;
    display: flex;
}

.selectors > div {
    padding-left: 0;
}

.master-details .commands {
    grid-area: commands;
    display:block;
}

.fixed-details > form {
    height: 100%;
}

.master-details-form {
    display: grid;
    grid-area: form;
    height: inherit;
    overflow: auto;
    row-gap: 0.5rem;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "master"
        "details-head"
        "details";
    background-color: rgba(191, 191, 191, 0.15);
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
    padding: 1rem;
}


    .master-details-form .master {
        grid-area: master;
    }

    .master-details-form .details-head{
        grid-area: details-head;
    }

    .master-details-form .details-head .color-codes {
        margin: 0;
        position:unset;
    }

    .master-details-form .details {
        grid-area: details;
        height: max(15rem, 100%);
        overflow: hidden;
    }


.sku-picker {
    display:grid;
    grid-template-rows: auto 2fr 1fr 1fr auto;
    grid-template-areas:
        "selectors"
        "articles"
        "colors"
        "sizes"
        "add-button";
    row-gap:0.5rem;
    max-height:100%;
    min-height:40rem;
}

    .sku-picker .selectors {
        grid-area: selectors;
    }

    .sku-picker .article_grid {
        grid-area:articles;
        height:100%;
        overflow-y:hidden;
    }

    .sku-picker .color_grid {
        grid-area: colors;
        height: 100%;
        overflow-y: hidden;
    }
    .sku-picker .size_grid {
        grid-area: sizes;
        height: 100%;
        overflow-y: hidden;
    }

.sku-picker .button-container {
    grid-area:add-button;
    display: flex;
    justify-content: center;
}

.validation-error-panel {
    display:block;
    grid-area:1 / 1 / -1 / -1;
    margin:auto;
    padding:1rem;
    border: solid 2px red;
    border-radius: 1rem;
    font-size: 2rem;
    color: #e52a2a;
}

.validation-error-panel h2 {
    color: var(--attire-link);
}

.validation-error-message {
    font-size: 2rem;
    color: #e52a2a;
}

/*
    Creates a tooltip based on the contents of the data-descr attribute, which is set in the JavaScript code.
*/
.info-item[data-descr] {
    background-color: #f4b8b8;
}
.dx-datagrid .dx-row-alt > td.info-item[data-descr] {
    background-color: #ff9494;
}

.info-item[data-descr]:hover::after {
    content: attr(data-descr);
    margin-left: -10em;
    margin-top: -50px;
    position: absolute;
    text-align:left;
    max-width: 200px;
    border: 1px #aaaaaa solid;
    border-radius: 10px;
    background-color: #ffffcc;
    padding: 12px;
    color: #000000;
    font-size: 14px;
    z-index: 100;
}


.alert-item[data-descr]::after,
.error-item[data-descr]::after {
    font-family: 'Font Awesome 5 Free';
    margin-left: 4px;
    padding:2px;
    border: 1px #aaaaaa solid;
    border-radius: 3px;
    font-weight: 900;
}

.alert-item[data-descr]::after {
    content: "\f071";
    background-color: #e52a2a;
    color: #f7dc3b;
}

.error-item[data-descr]::after {
    content: "\f05e";
    color: #e52a2a;
    background-color: #f7dc3b;
}


.alert-item[data-descr]:hover::before,
.alert-item[data-descr]:focus::before,
.error-item[data-descr]:hover::before,
.error-item[data-descr]:focus::before {
    content: attr(data-descr);
    margin-left: 1em;
    margin-top: -12px;
    position: absolute;
    min-width: 200px;
    border: 1px #aaaaaa solid;
    border-radius: 10px;
    background-color: #ffffcc;
    padding: 12px;
    color: #000000;
    font-size: 14px;
    z-index: 100;
}


/* Allocation specific styles */
.allocation-page-container {
    display: grid;
    row-gap: 1rem;
    height: 100%;
    overflow: hidden;
    grid-template-rows: repeat(5, auto) 1fr;
    grid-template-areas:
        "header"
        "selection"
        "options-header"
        "options"
        "priorities"
        "allocation-details"
}


    .allocation-page-container #ID_DetailsAllocation_body {
        display: block;
        height: 100%;
        overflow: hidden;
    }

    .allocation-page-container #ID_AllocationForm {
        height:100%;
        overflow:hidden;
    }
    .allocation-page-container #ID_Allocation_Details {
        display: grid;
        row-gap: 1rem;
        height: 100%;
        overflow: hidden;
        grid-template-rows: repeat(3, auto) 1fr;
        grid-template-areas:
            "details-header"
            "command-buttons"
            "summary"
            "details"
    }

#ID_Allocation_Details #ID_gridSummary {
    height:100%;
    overflow-y:visible;
}

#ID_Allocation_Details #ID_gridAllocation {
    height: 100%;
    overflow-y: hidden;
}

#allocationSelection #ID_nPurchaseDelivery,
#allocationSelection #ID_Articles {
    margin-top: 0px;
    padding-top: 2px;
    padding-bottom: 1px;
}
/***************************FOOTER***************************************/
.footer {
    background-color: #efefef;
    bottom: 0;
    left: 0;
    padding: 1rem;
    position: fixed;
    right: 0;
    text-align: center;
}

/***************************Colors******************************************/

#ID_SeasonColors {
    overflow: hidden;
    height: 100%;
    grid-row-start: captions;
    grid-row-end: -1;
    display: block;
}

/***************************Season Groups view******************************************/

#ID_SeasonGroups {
    overflow: hidden;
    height: 100%;
    grid-row-start: captions;
    grid-row-end: -1;
    display: block;
}


/**************************************************Order and Packlist statuses**************************************/
/* Orders and packlists */
.Created {
    background-color: hsl(0 0 var(--attireStatusLightness)) !important;
    margin-left: 5px;
}

/* Orders */
.Preliminary {
    background-color: hsl(180 var(--attireStatusSaturation) var(--attireStatusLightness)) !important;
}

/* Packlists */
.Sent {
    background-color: hsl(90 var(--attireStatusSaturation) var(--attireStatusLightness)) !important;
}

/* Orders */
.Reserved {
    background-color: hsl(270 var(--attireStatusSaturation) var(--attireStatusLightness)) !important;
}

/* Orders */
.PartiallyReserved {
    background-image: repeating-linear-gradient(135deg, hsl(270 var(--attireStatusSaturation) var(--attireStatusLightness) / 0.4), hsl(270 var(--attireStatusSaturation) var(--attireStatusLightness) / 0.4) 5px, white 5px, white 10px) !important;
    font-weight: bolder;
}

/* Orders and packlists */
.Packed {
    background-color: hsl(225 var(--attireStatusSaturation) var(--attireStatusLightness)) !important;
}

/* Orders */
.Delivered {
    background-color: hsl(135 var(--attireStatusSaturation) var(--attireStatusLightness)) !important;
}

/* Packlists */
.Confirmed {
    background-color: hsl(270 var(--attireStatusSaturation) var(--attireStatusLightness)) !important;
}

/* Orders and packlists */
.Invoiced {
    background-color: hsl(45 var(--attireStatusSaturation) var(--attireStatusLightness));
}

/* Orders */
.On_Hold {
    background-color: hsl(315 var(--attireStatusSaturation) var(--attireStatusLightness)) !important;
}

/* Orders */
.Cancelled {
    background-color: hsl(0 var(--attireStatusSaturation) var(--attireStatusLightness)) !important;
}

/* Packlists */
.Deleted {
    background-color: hsl(0 var(--attireStatusSaturation) var(--attireStatusLightness)) !important;
}


.SizeNotAvailable {
    background-color: hsl(0 0 68);
}


.Error {
    background-color: #e52a2a !important;
}

.Warning {
    background-color: #FFEC71 !important;
}


.Attire-palette-colors {
    border: 1px solid;
    border-color: #efefef;
    border-radius: 5px;
    cursor: default;
    display: flex;
    height: 25px;
    position: relative;
    top: 0;
    width: 100%;
    /* left: 74%;*/
}

    .Attire-palette-colors div:first-child {
        border-radius: 5px 0 0 5px;
        box-shadow: inset rgba(255, 255, 255, .1) 1px 1px, inset rgba(255, 255, 255, .1) 0 -1px;
    }

    .Attire-palette-colors div:last-child {
        border-radius: 0 5px 5px 0;
        box-shadow: inset rgba(255, 255, 255, .1) -1px 1px, inset rgba(255, 255, 255, .1) 0 -1px;
    }

    .Attire-palette-colors div {
        box-shadow: inset rgba(255, 255, 255, .1) 0 1px, inset rgba(255, 255, 255, .1) 0 -1px;
        color: #222222;
        cursor: default;
        flex: 1;
        /*width: 14.222%;*/
        float: left;
        font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
        font-size: 11px;
        height: 100%;
        line-height: 1.428571429;
        text-align: center;
        transition: background .1s linear;
        vertical-align: middle;
    }





/**COMMON GRID CHANGES*/

.readonly-bg {
    background-color: linen;
}


.invalidCell {
    background-color: #e52a2a !important;
}

#grid .grid-details {
    background-image: url(../images/Calculations.png);
    background-position: 0 -155px;
    background-repeat: no-repeat;
    background-size: auto;
    cursor: pointer;
    display: inline-block;
    height: 16px;
    position: relative;
    top: 2px;
    width: 16px;
}

#grid .dx-command-select {
    min-width: 20px;
    width: 20px;
}

.dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-select {
    max-width: 20px;
    min-width: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 20px;
}




.AttireTabs {
    /* -- Dont think these do any good
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    */
    height:100%;
}



    .AttireTabs .dx-tabpanel.dx-state-focused .dx-tab-selected:after {
        border-left: 1px solid #3399cc;
        border-right: 1px solid #3399cc;
        border-top: 1px solid #3399cc;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .AttireTabs .dx-tabpanel .dx-tabs-wrapper {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .AttireTabs .dx-tab-selected {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

        .AttireTabs .dx-tab-selected .dx-state-hover {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }


    .AttireTabs .dx-tabs {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .AttireTabs.dx-tab-selected:after {
        border-left: none;
    }


.dx-datagrid-rowsview .dx-row > .dx-master-detail-cell {
    padding-bottom: 15px;
    padding-left: 0;
    padding-right: 15px;
    padding-top: 15px;
}

.attire-left-grid {
    padding-bottom: 15px;
}

/***************************************LOGIN SCREEN*************************************************************/

.card-signin {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
    padding-top: 2rem;
}

    .card-signin .card-title {
        font-size: 1.5rem;
        font-weight: 300;
        margin-bottom: 2rem;
    }

    .card-signin .card-body {
        padding: 2rem;
    }

.form-signin {
    width: 100%;
}

    .form-signin .btn {
        border-radius: 1rem;
        font-size: 80%;
        font-weight: bold;
        letter-spacing: .1rem;
        padding: 1rem;
        transition: all 0.2s;
    }

.form-label-group {
    margin-bottom: 1rem;
    position: relative;
}

    .form-label-group input {
        border-radius: 1rem;
    }


    .form-label-group > label {
        border: 1px solid transparent;
        border-radius: .25rem;
        color: #495057;
        display: block;
        left: 0;
        /* Override default `<label>` margin */
        line-height: 1.5;
        margin-bottom: 0;
        top: 0;
        transition: all .1s ease-in-out;
        width: 100%;
    }



/****************************************END LOGIN******************************************************/

/************************************Common filters or actions***********************************************************/

.content-block {
    position: relative;
}

.action-options {
    background-color: rgba(191, 191, 191, 0.15);
    border: 0;
    border-radius: 0.5rem;
    /*box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);*/
    padding: 20px;
    padding-bottom: 2rem;
    padding-top: 2rem;
    top: 0;
}

.action1-options {
    border: 0;
    /*border-radius: 0.5rem;*/
    /*box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);*/
    /*padding-top: 2rem;*/
    /*padding-bottom: 2rem;*/
    padding: 10px;
    /*top: 0;*/
    /*background-color: rgba(191, 191, 191, 0.15);*/
}

.in-page-header {
    color: var(--attireInPageHeader);
    font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.428571429;
    padding-top: 10px;
}

.in-page-subheader {
    color: var(--attireInPageSubHeader);
    font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.428571429;
    padding-top: 10px;
}


.existingOrders {
    border-right: 1px solid lightgrey;
}

    .existingOrders .article_grid {
        max-height: 300px;
        min-height: 60px;
    }


    .existingOrders .color_grid {
        max-height: 300px;
        min-height: 60px;
    }


    .existingOrders .size_grid {
        max-height: 300px;
        min-height: 60px;
    }


.article_selector .article_grid {
    max-height: 300px;
    min-height: 60px;
}


.article_selector .color_grid {
    max-height: 300px;
    min-height: 60px;
}


.article_selector .size_grid {
    max-height: 300px;
    min-height: 60px;
}


.existingPD_grid {
    max-height: 600px;
    min-height: 160px;
}

.orderRows_grid {
    max-height: 450px;
    min-height: 160px;
}

/***Button to add qty**/

.plusButton .dx-icon {
    color: blue;
    font-size: 12px;
    min-width: 10px;
    padding: 0px;
}

.plusButton .dx-button .dx-button-normal .dx-widget .dx-button-has-icon {
    min-width: 10px;
    padding: 0px;
}

.plusButton .dx-button-content {
    min-width: 10px;
    padding: 0px;
}

.minusButton .dx-icon {
    color: blue;
    font-size: 12px;
    padding: 0px;
}

.minusButton .dx-button .dx-button-normal .dx-widget .dx-button-has-icon {
    padding: 0px;
}

.minusButton .dx-button-content {
    padding: 0px;
}

.col-lg-6 .AddQty-input .dx-datagrid-headers .dx-texteditor-input, .dx-datagrid-rowsview .dx-texteditor-input {
    min-height: 12px;
    padding: 0px 0px 0px 2px;
}


/***Left-side Grid or list **/

.left-side-grid {
    height: 800px;
}


/****PRICELIST****/

.caption_center {
    background-color: #fafafa;
    border-bottom: 1px solid #ebebeb;
    color: #656565;
    font-size: 14px;
    padding: 5px 10px;
    text-align: center;
}

.attire-action-buttons {
    color: #4f91cd;
}

.dx-toast-message {
    white-space: pre-line;
}

/*************************************Content-Block--Tab**********************************************************/

.tab-content-block {
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    position: relative;
}

.color-codes {
    margin-top: 5px;
    position: absolute;
    right: 35px;
}

/**************************POP-UP****************************************************************************/

.pd-popup {
    display: grid;
    grid-template-areas:
        "main main"
        "blank buttons";
    grid-template-columns: 1fr auto;
    grid-template-rows: 90% 10%;
    height: 100%;
}

    .pd-popup .addPOitemsGrid {
        grid-area: main;
    }

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    grid-area: buttons;
    padding-top: 30px;
}

.pd-popup .action-button {
    padding-right: 31px;
    padding-top: 30px;
}

.allocation-articles-selection {
    display: grid;
    row-gap: 1rem;
    height: inherit;
    width: 100%;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "buttons"
        "dropdowns"
        "grid"
}

    .allocation-articles-selection .action-buttons {
        padding-top: initial;
        grid-area: buttons;
    }

    .allocation-articles-selection .dropdowns {
        display: flex;
        grid-area: dropdowns;
    }

    .allocation-articles-selection .grid {
        overflow: hidden;
        grid-area: grid;
    }
.allocation-editable-qty {
    background-color: var(--attireEditHighlight) !important;
}

.view-purchase-orders {
    grid-template-columns: clamp(50rem, auto, 70rem) 1fr;
}

.info-popup-content {
    width: 100%;
    height: 100%;
    padding: 0.5em;
    background-color: var(--attireDiscreteBorder);
}

.popup-hover:not(:has(.dx-datagrid-summary-item)):not([role="columnheader"]) {
    color: var(--attire-link);
    text-decoration: dotted underline blue;
    text-underline-offset: 2px;
    cursor: pointer;
}

a[role="button"] {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) !important;
}

a[role="button"]:hover {
        --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
    }
}

/*****************************icons*****************************************************************************/
.error-icon {
    color: #e52a2a;
} 

.alert-icon {
    color: #f7dc3b;
}
/*****************************Read-only editors*****************************************************************************/
.dx-texteditor.dx-state-readonly {
    background-color: rgba(250, 250, 250, 1);
}

.success-message {
    background-color: rgb(26, 147, 0);
    color:red;
}

/* freeze page stuff */
.freeze {
    pointer-events: none;
}

.hidden {
    display: none;
}

.overlay {
    position: absolute;
    border-radius: 10px;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    box-shadow: 0 0 0 100vw rgba(1, 1, 1, 0.5), inset 0 0 2px 2px rgba(1, 1, 1, 0.5);
    background: #fff;
    opacity: 0.8;
    z-index: 100;
}

.dx-widget {
    font-size: 12px !important;
}

.add-stock-form {
    display:grid;
    grid-template-rows:auto auto auto 1fr auto;
    overflow:hidden;
}