@font-face {
    font-family: 'blackerpro-extrabold';
    src: url('/_content/Armstrong.UI.Common.Components/fonts/Zetafonts-BlackerProDisplayExtrabold.otf') format('opentype');
}

@font-face {
    font-family: 'blackerprod-medium';
    src: url('/_content/Armstrong.UI.Common.Components/fonts/Zetafonts-BlackerProDisplayMedium.otf') format('opentype');
}

@font-face {
    font-family: 'opensans-regular';
    src: url('/_content/Armstrong.UI.Common.Components/fonts/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'opensans-semibold';
    src: url('/_content/Armstrong.UI.Common.Components/fonts/OpenSans-SemiBold.ttf') format('truetype');
}

/* IcoMoon CSS colour overrides */

.icon-esm_logo:before {
    color: #f4333f;
}

.icon-sort-arrow:before {
    color: #828282;
}

.icon-external-link:before {
    color: var(--esm-blue-active);
}

/* Theme variables */

:root {
    --esm-red: #f4333f;
    --esm-red-light: #F7E3E4;
    --esm-red-soft: #ff8990;
    --esm-green: #5e904d;
    --esm-green-soft: #B3D4A6;
    --esm-green-light: #E8EDE6;
    --esm-blue: #3c628f;
    --esm-blue-active: #1c6bc9;
    --esm-blue-light: #E4E8ED;
    --esm-coffee: #ba7726;
    --esm-orange: #ee8030;
    --esm-orange-soft: #F7BF97;
    --esm-orange-light: #F6EBE3;
    --esm-purple: #ac316c;
    --esm-purple-dark: #813c76;
    --esm-dark-grey: #4f4f4f;
    --esm-grey-middle: #828282;
    --esm-grey: #c4c4c4;
    --esm-grey-light: #f5f5f5;
    --esm-grey-extra-light: #f7f7f7;
    --esm-black: #2d2826;
    --esm-white: #fff;
    --esm-grey-900: #b0b0b0;
    --esm-grey-700: #d0d0d0;
    --esm-grey-300: #f0f0f0;
    --esm-red-accessible: #ee0117;
    --esm-green-accessible: #48842f;
    --esm-blue-light-accessible: #4d7d8e;
    --esm-light-blue: #F7F9FF;
    --esm-text-primary: #4f4f4f;
    --esm-text-primary-dark: #2d2826;
    --esm-text-primary-light: #828282;
    --esm-selected-background: #E2ECFF;
    --esm-selected-border: #4B608D;
    --esm-background-primary: #fff;
    --esm-background-secondary: #f3f4fc;
    --esm-background-page: #f7f7f7;
    --esm-background-highlight: #f0f0f0;
    --esm-background-row-selected: #E4EEF7;
    --esm-background-footer: #f0f2f5;
    --esm-input-selected-border: #40A9FF;
    --esm-input-selected-outline: #CBE3F9;
    --esm-button-hover: #3569A6;
    --esm-button-focus: #3C628F;
    --esm-button-success-hover: #F1F9EE;
    --esm-button-success-focus: #DAE6D5;
    --esm-button-cancel-hover: #FFE8EA;
    --esm-button-cancel-focus: #FFE8EA;
    --esm-font-primary: 'opensans-regular';
    --esm-font-primary-semibold: 'opensans-semibold';
    --esm-font-title: 'blackerprod-medium';
    --esm-font-title-bold: 'blackerpro-extrabold';
    --esm-chip-color-green: #D5FAF1;
    --esm-chip-backgroundcolor-green: #48842F;
    --esm-chip-color-olive: #48842F;
    --esm-chip-backgroundcolor-olive: #EDF3EB;
    --esm-chip-color-yellow: #BA7726;
    --esm-chip-backgroundcolor-yellow: #FCF2CC;
    --esm-chip-color-red: #EE0117;
    --esm-chip-backgroundcolor-red: #FAE2D5;
    --esm-chip-color-lightred: #F01D31;
    --esm-chip-backgroundcolor-lightred: #FEE6E8;
    --esm-chip-color-lightblue: #1C6BC9;
    --esm-chip-backgroundcolor-lightblue: #E2ECFF;
    --esm-chip-color-blue: #4D7D8E;
    --esm-chip-backgroundcolor-blue: #D5EBF9;
    --esm-chip-color-darkblue: #3C628F;
    --esm-chip-backgroundcolor-darkblue: #DDE4ED;
    --esm-chip-color-orange: #BA7726;
    --esm-chip-backgroundcolor-orange: #FCF2CC;
    --esm-chip-color-purple: #813C76;
    --esm-chip-backgroundcolor-purple: #F7EBF1;
    --esm-violet-card: rgb(155, 100, 146);
    --esm-blue-card: #3C628F;
    --esm-green-card: #5E904D;
    --esm-light-blue-card: #4E7E8F;
    --esm-light-blue-card-header: #E2ECFF66;
    --esm-main-tabs-backgroundcolor: #DBDEE3;
    --side-bar-width: 18rem;
    --side-bar-collapsed-width: 5rem;
    --content-padding: 2rem;
    --esm-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.05);
    --esm-shadow-hover: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    --esm-shadow-medium: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
    --esm-box-shadow: 0px 0px 15px 0px #00000014;
}

/* Typography Styles */
.esm-title {
    font-family: var(--esm-font-title);
    font-weight: 800;
    font-size: 1.25rem;
}

.esm-h1-title-xxlarge {
    font-size: 2.375rem;
    font-family: var(--esm-font-title);
    font-weight: 800;
    line-height: 3.25rem;
    letter-spacing: 1.61px;
    word-wrap: break-word;
}

.esm-h3-title-large {
    font-family: var(--esm-font-title);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 2.625rem;
}

.esm-h3-sans-semibold {
    font-family: var(--esm-font-primary-semibold);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.875rem;
    letter-spacing: 0.18px;
    word-wrap: break-word
}

.esm-body2 {
    font-family: var(--esm-font-primary);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.375rem;
    letter-spacing: 0.24px;
    word-wrap: break-word
}

.esm-h2-sans-regular {
    font-family: var(--esm-font-primary);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.875rem;
    letter-spacing: 0.20px;
    word-wrap: break-word
}

.esm-h2-sans-semibold {
    font-family: var(--esm-font-primary-semibold);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.875rem;
    letter-spacing: 0.20px;
    word-wrap: break-word
}

.body-bold-link {
    text-decoration: underline;
    font-family: var(--esm-font-primary-semibold);
    font-size: 1rem;
    font-weight: 700;
}

.body {
    font-family: var(--esm-font-primary);
    font-size: 1rem;
}

.open-sans {
    font-family: var(--esm-font-primary);
}

.open-sans-semibold {
    font-family: var(--esm-font-primary-semibold);
}

h1, h2 {
    color: var(--esm-text-dark);
    font-family: var(--esm-font-primary);
    font-weight: 600;
    line-height: 2rem;
    letter-spacing: 0.28px;
    margin-bottom: 0.25rem;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.25rem;
}

h3 {
    font-family: var(--esm-font-primary-semibold);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: 0.28px;
}

/* Iconography Styles */
.esm-icon {
}

    .esm-icon.icon-large {
        width: 2.5rem;
    }

    .esm-icon.icon-medium {
        width: 2rem;
    }

    .esm-icon.icon-small {
        width: 1.5rem;
    }

    .esm-icon.icon-tiny {
        width: 1rem;
    }

.icon-circle-check {
    color: var(--esm-green-accessible);
}

.icon-circle-info {
    color: var(--esm-blue);
}

.icon-circle-error {
    color: var(--esm-red-accessible);
}

.icon-circle-warning {
    color: var(--esm-orange);
}

/* Common Styles */
body {
    font-family: var(--esm-font-primary);
}

    body.modal-open,
    body.drawer-open {
        overflow: hidden;
    }

a {
    color: var(--esm-blue);
    text-decoration: underline;
}

    a:hover {
        color: var(--esm-blue-active);
        text-decoration: underline;
    }

input[type='text'], input[type='number'], input[type='date'], input[type='search'], select, textarea {
    padding: 4px 11px;
    border: 1px solid var(--esm-grey-700);
    border-radius: 2px;
    height: 2.5rem;
    font-size: 1rem;
}

    input[type='text']:focus, input[type='number']:focus, input[type='date']:focus, input[type='search']:focus, select:focus, textarea:focus {
        border-color: var(--esm-input-selected-border);
        border-style: solid;
        outline: 2px solid var(--esm-input-selected-outline);
    }

    input[type='text']:not(:disabled):not(.invalid):hover,
    input[type='number']:not(:disabled):not(.invalid):hover,
    input[type='date']:not(:disabled):not(.invalid):hover,
    input[type='search']:not(:disabled):not(.invalid):hover,
    select:not(:disabled):not(.invalid):hover,
    textarea:not(:disabled):not(.invalid):hover {
        border-color: var(--esm-input-selected-border);
    }

    input[type='text']:disabled,
    input[type='number']:disabled,
    input[type='date']:disabled,
    input[type='search']:disabled,
    select:disabled,
    textarea:disabled {
        background-color: var(--esm-grey-light);
        opacity: 0.8;
        cursor: default;
    }

    input[type='text'].invalid,
    input[type='number'].invalid,
    input[type='date'].invalid,
    input[type='search'].invalid,
    select.invalid,
    textarea.invalid {
        border-color: var(--esm-red);
    }

::placeholder {
    color: var(--esm-grey);
    opacity: 1;
}

textarea {
    min-height: 4rem;
    max-height: 10rem;
    resize: vertical;
}

select {
    padding: 4.4px 11px;
    cursor: pointer;
}

    select:not([multiple]) {
        padding-right: 2.5rem;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        background-color: var(--esm-white);
        background-repeat: no-repeat;
        background-position: right .5em top 50%;
        background-size: 1rem;
        background-image: url(../images/icons/arrow-down.svg);
        min-width: 3rem;
        padding-right: 1.75rem;
    }

    select.placeholder-color {
        color: var(--esm-grey);
    }

        select.placeholder-color option {
            color: var(--esm-black);
            font-size: 0.95rem;
        }

    select::-ms-expand {
        display: none;
    }

    select.esm-select {
        font-family: var(--esm-font-primary);
        color: var(--esm-blue);
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0.307px;
        text-transform: uppercase;
        padding-left: 1rem;
    }

input[type='date'] {
    padding: 3px 11px;
    cursor: pointer;
}

input[type='checkbox'] {
    height: 1rem;
    touch-action: manipulation;
    cursor: pointer;
    width: 1.5rem;
    outline: none;
    position: relative;
    top: .2rem;
}

a.esm-button,
button.esm-button,
button._pendo-button,
button.bb-button {
    border: none;
    border-radius: 2px;
    background: var(--esm-blue);
    display: flex;
    padding: 0.75rem 1.125rem;
    justify-content: center;
    align-items: center;
    gap: 6px;
    color: var(--esm-white);
    text-align: center;
    font-size: 0.875rem;
    font-family: var(--esm-font-primary);
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    min-height: 3rem;
    height: fit-content;
    min-width: 6rem;
}

    a.esm-button.small-size,
    a.esm-button.medium-size,
    button.esm-button.medium-size,
    button.esm-button.small-size,
    button._pendo-button,
    button.bb-button {
        font-size: 0.875rem;
        min-height: 2.5rem;
        padding: 0rem 1rem;
        line-height: normal;
        font-weight: 600;
    }

    a.esm-button.small-size,
    button.esm-button.small-size {
        min-height: 2.35rem;
        font-size: 0.75rem;
    }

    a.esm-button.alt,
    button.esm-button.alt {
        border: 1px solid var(--esm-grey-700);
        background: var(--esm-white);
        color: var(--esm-blue);
    }

    a.esm-button.success,
    button.esm-button.success {
        border: 1px solid var(--esm-green-accessible);
        background: var(--esm-white);
        color: var(--esm-green-accessible);
    }

    a.esm-button.cancel,
    button.esm-button.cancel {
        border: 1px solid var(--esm-red-accessible);
        background: var(--esm-white);
        color: var(--esm-red-accessible);
    }

    a.esm-button:not(:disabled):hover,
    button.esm-button:not(:disabled):hover,
    button._pendo-button:not(:disabled):hover,
    button.bb-button:not(:disabled):hover {
        opacity: 0.8500000238418579;
        background: var(--esm-button-hover);
    }

    a.esm-button.alt:not(:disabled):hover,
    button.esm-button.alt:not(:disabled):hover {
        background: var(--esm-white);
    }

    a.esm-button.success:not(:focus):not(:disabled):hover,
    button.esm-button.success:not(:focus):not(:disabled):hover {
        background: var(--esm-button-success-hover);
    }

    a.esm-button.cancel:not(:focus):not(:disabled):hover,
    button.esm-button.cancel:not(:focus):not(:disabled):hover {
        background: var(--esm-button-cancel-hover);
    }

    a.esm-button:not(:disabled):active,
    button.esm-button:not(:disabled):active,
    button._pendo-button:not(:disabled):active,
    button.bb-button:not(:disabled):active {
        border-radius: 2px;
        background: var(--esm-blue-active);
        outline: 1px solid var(--esm-blue-active) !important;
    }

    a.esm-button.alt:not(:disabled):active,
    button.esm-button.alt:not(:disabled):active {
        border-radius: 2px;
        background: var(--esm-white);
        color: var(--esm-blue-active);
        outline: 1px solid var(--esm-blue-active) !important;
    }

    a.esm-button.success:not(:disabled):active,
    button.esm-button.success:not(:disabled):active {
        border-radius: 2px;
        background: var(--esm-green-accessible);
        color: var(--esm-white);
        outline: 1px solid var(--esm-green-accessible) !important;
    }

    a.esm-button.cancel:not(:disabled):active,
    button.esm-button.cancel:not(:disabled):active {
        border-radius: 2px;
        background: var(--esm-red-accessible);
        color: var(--esm-white);
        outline: 1px solid var(--esm-red-accessible) !important;
    }

    a.esm-button:focus,
    button.esm-button:focus,
    button._pendo-button:focus,
    button.bb-button:focus {
        border-radius: 0.25rem;
        outline: 0.25rem solid rgba(60, 98, 143, 0.50);
        background: var(--esm-button-focus);
    }

    a.esm-button.alt:focus,
    button.esm-button.alt:focus {
        outline: 0.25rem solid rgb(222 227 233 / 50%);
        background: var(--esm-white);
    }

    a.esm-button.success:focus,
    button.esm-button.success:focus {
        outline: 0.25rem solid var(--esm-button-success-focus);
        background: var(--esm-green-accessible);
        color: var(--esm-white);
    }

    a.esm-button.cancel:focus,
    button.esm-button.cancel:focus {
        outline: 0.25rem solid var(--esm-button-cancel-focus);
        background: var(--esm-red-accessible);
        color: var(--esm-white);
    }

    a.esm-button:disabled,
    button.esm-button:disabled,
    button._pendo-button:disabled,
    button.bb-button:disabled {
        cursor: auto;
        border: 1px solid var(--esm-grey-700);
        background: var(--esm-grey-300);
        color: var(--esm-grey-middle);
    }

button._pendo-button,
button.bb-button {
    font-weight: bold !important;
    text-transform: uppercase !important;
    background-color: var(--esm-blue) !important;
}

    button._pendo-button:disabled,
    button.bb-button:disabled {
        background: var(--esm-grey-300) !important;
        color: var(--esm-grey-middle) !important;
    }

.validation-message {
    color: var(--esm-chip-color-red);
}

.iframe-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-bottom: 1.5rem;
}

    .iframe-container iframe {
        width: 100%;
        height: 100%;
        border: none;
        max-width: 100%;
        max-height: 100%;
    }

.order-number, .item-number {
    color: var(--esm-grey-middle);
}

.cursor-pointer {
    cursor: pointer;
}

/* ESM Custom Tooltip */
.esm-tooltip {
    position: fixed;
    background: var(--esm-dark-grey);
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    z-index: 99;
    color: var(--esm-white);
    width: auto;
    text-wrap: wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    visibility: hidden;
    transition: visibility 0s, opacity 0.25s linear;
    opacity: 0;
    text-align: center;
}

    .esm-tooltip.active {
        position: absolute;
        display: inline-flex;
        visibility: visible;
        opacity: 1;
        z-index: 99999;
    }

    .esm-tooltip::after {
        content: "";
        position: absolute;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
    }

    .esm-tooltip.top::after {
        top: 100%;
        left: 50%;
        border-color: var(--esm-dark-grey) transparent transparent transparent;
    }

    .esm-tooltip.bottom::after {
        bottom: 100%;
        left: 50%;
        border-color: transparent transparent var(--esm-dark-grey) transparent;
    }

    .esm-tooltip.left::after {
        top: 35%;
        right: -10px;
        border-color: transparent transparent transparent var(--esm-dark-grey);
    }

    .esm-tooltip.right::after {
        top: 35%;
        right: 100%;
        border-color: transparent var(--esm-dark-grey) transparent transparent;
    }

.esm-tabcontrol-spinner-container {
    margin-left: 0.3125rem;
    vertical-align: middle
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 0.875rem;
}

    ::-webkit-scrollbar:horizontal {
        height: 0.75rem;
    }

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--esm-grey-700);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 0.35rem;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--esm-grey-900);
    }

.modal-open ::-webkit-scrollbar:vertical-thumb {
    background-color: transparent;
}

.required-label::after {
    content: ' *';
    color: var(--esm-red);
}

.quickgrid .hidden {
    display: none;
}

hr.divider {
    width: 100%;
    height: 1px;
    background-color: var(--esm-grey-300);
    border: none;
    margin-bottom: 1rem;
}

iframe#launcher {
    visibility: hidden;
}

iframe#webWidget {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
}

    iframe#webWidget.visible {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
    }

.accordion .counter-badge {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 1px 0.5rem 2px 0.5rem;
    color: var(--esm-white);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1.5715;
    font-family: var(--esm-font-primary);
    text-align: center;
}

.counter-badge {
    min-width: 1.5rem;
    background-color: var(--esm-grey);
    padding: 0 0.35rem 0 0.35rem;
    border-radius: 6.25rem;
    color: var(--esm-white);
    cursor: pointer;
    display: flex;
    justify-content: center;
}

    .counter-badge.active {
        background-color: var(--esm-blue-active);
    }

/* Media Queries */
@media screen and (max-width: 48rem) { /* 48rem = 768px */
    body.mobile-menu-open {
        overflow: hidden;
    }
}

@media screen and (max-width: 30rem) { /* 30rem = 480px */
    button.esm-button {
        min-width: auto;
    }

    .iframe-container iframe {
        max-height: 80vh;
    }

    .esm-tooltip {
        display: none !important;
    }
}