/* HTML Structure */

html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, iframe {
    margin: 0;
    padding: 0;
}

dl, dt, dd, ul, ol, li {
    list-style: none;
}

html {
    overflow: hidden;
}

body {
    height: 100%;
    font-family: Open Sans, Segoe UI, SF Pro Text, Helvetica, Helvetica Neue, Arial, Tahoma, sans-serif;
    background-color: var(--bg);
    color: var(--text);
}

*:focus {
    outline: none;
}

:fullscreen::backdrop {
    background-color: var(--bg);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-40);
    width: 8px;
    height: 8px;
    border-radius: 10px;
}

a, a img {
    border: none;
    text-decoration: none;
}

a:link, a:visited, a:active {
    color: var(--text-link);
}

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

data {
    display: none;
}

input {
    width: 137px;
    margin: 0;
    height: 32px;
    padding: 0 5px;
}

textarea {
    min-width: 137px;
    min-height: 50px;
    padding: 0 5px;
    white-space: pre-wrap;
    max-width: 100%;
}

input[type="checkbox"], input[type="radio"] {
    width: 13px;
    height: 13px;
    padding: 0;
    border: 0 none;
}

input[type="button"], input[type="submit"] {
    cursor: pointer;
    margin-right: 5px;
    appearance: none;
}

input, textarea, select {
    border: 1px var(--border) solid;
    border-radius: 4px;
    font-size: 13px;
    font-family: Open Sans, Segoe UI, SF Pro Text, Helvetica, Helvetica Neue, Arial, Tahoma, sans-serif;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
}

input:focus, textarea:focus, select:focus {
    border: 1px var(--border-active) solid;
}

.FieldError, input.FieldError, textarea.FieldError, select.FieldError {
    border: 1px var(--red-60) solid;
}

iframe {
    margin-bottom: -4px;
    border: 0 none;
    background: var(--bg);
    box-sizing: border-box;
}

th {
    font-weight: normal;
}

td, th {
    padding: 0;

    /* instead of callpadding=0 on table */
}

.ClearFix::after, .clear-fix::after {
    content: "";
    clear: both;
    display: block;
}

hr.divider {
    height: 1px;
    border: none;
    border-top: 1px dashed var(--neutral-30);
}

.ClearLeft::before {
    content: "";
    clear: left;
    display: block;
}

.BG_Blue {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.BG_LightBlue {
    background: var(--primary-10);
}

.borderbottom, .border-bottom {
    border-bottom: solid 1px var(--neutral-30);
}

.Left, .left {
    float: left !important;
}

.Right, .right {
    float: right !important;
}

.TextAlignLeft, .align-left {
    text-align: left !important;
}

.TextAlignCenter, .align-center {
    text-align: center !important;
}

.TextAlignRight, .align-right {
    text-align: right !important;
}

.padding-0 {
    padding: 0;
}

.padding-5 {
    padding: 5px;
}

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

.padding-right-5 {
    padding-right: 5px;
}

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

.padding-left-5 {
    padding-left: 5px;
}

.Padding10, .padding-10 {
    padding: 10px;
}

.PaddingTop10, .padding-top-10 {
    padding-top: 10px;
}

.PaddingRight10, .padding-right-10 {
    padding-right: 10px;
}

.PaddingBottom10, .padding-bottom-10 {
    padding-bottom: 10px;
}

.PaddingLeft10, .padding-left-10 {
    padding-left: 10px;
}

.MarginTop5, .margin-top-5 {
    margin-top: 5px;
}

.MarginRight5, .margin-right-5 {
    margin-right: 5px;
}

.MarginBottom5, .margin-bottom-5 {
    margin-bottom: 5px;
}

.MarginLeft5, .margin-left-5 {
    margin-left: 5px;
}

.Margin10, .margin-10 {
    margin: 10px;
}

.MarginTop10, .margin-top-10 {
    margin-top: 10px;
}

.MarginRight10, .margin-right-10 {
    margin-right: 10px;
}

.MarginRight16, .margin-right-16 {
    margin-right: 16px;
}

.MarginBottom10, .margin-bottom-10 {
    margin-bottom: 10px;
}

.MarginLeft10, .margin-left-10 {
    margin-left: 10px;
}

.MarginLeft16, .margin-left-16 {
    margin-left: 16px;
}

.MarginTop30, .margin-top-30 {
    margin-top: 30px !important;
}

.DisplayNone, .element-hidden, .hidden, .hide {
    display: none !important;
}

.DisplayBlock, .element-show, .show {
    display: block !important;
}

.DisplayInlineBlock, .inline-block {
    display: inline-block !important;
}

.display-table {
    display: table;
}

.table-cell {
    display: table-cell;
}

.column-2 {
    width: 50%;
    box-sizing: border-box;
}

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.FontBold, .font-bold {
    font-weight: bold !important;
}

.FontNormal, .font-normal {
    font-weight: normal !important;
}

.text-underline {
    text-decoration: underline !important;
}

.WidthReset, .full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.width-auto {
    width: auto !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default !important;
}

.cursor-move {
    cursor: move !important;
}

.cursor-text {
    cursor: text !important;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.ButtonDisabled {
    opacity: 0.75;
    cursor: default !important;
}

.ButtonDisabled .Title {
    opacity: 0.3 !important;
}

/* Icon Sprite Mapping */

.Print {
    background-position: 0 0;
}

.Excel {
    background-position: -16px 0;
}

.Email {
    background-position: -32px 0;
}

.Add {
    background-position: 0 -32px;
}

.Edit {
    background-position: -16px -32px;
}

.Save, .save {
    background-position: -32px -32px;
}

.RegulateGray_Up {
    background-position: -48px 0;
}

.RegulateGray_Down {
    background-position: -48px -4px;
}

.RegulateBlack_Up {
    background-position: -48px -8px;
}

.RegulateBlack_Down {
    background-position: -48px -12px;
}

.Search {
    background-position: 0 -64px;
}

.Calendar {
    background-position: -16px -64px;
}

.Trash {
    background-position: -32px -64px;
}

.SelectAll {
    background-position: -48px -64px;
}

.SelectNone {
    background-position: -64px -64px;
}

.Truck {
    background-position: -80px -64px;
}

.Adjust {
    background-position: -96px 0;
}

.Audit {
    background-position: -96px -32px;
}

.BarCode {
    background-position: -96px -64px;
}

.Back {
    background-position: -112px 0;
}

.Next {
    background-position: -112px -32px;
}

.Cancel {
    background-position: -112px -64px;
}

.ByCustomer {
    background-position: -128px 0;
}

.ByProduct {
    background-position: -128px -32px;
}

.ByPallet {
    background-position: -128px -64px;
}

.Book {
    background-position: -144px 0;
}

.Delete {
    background-position: -144px -32px;
}

.Conformation {
    background-position: -144px -64px;
}

.Document {
    background-position: -160px 0;
}

.Down {
    background-position: -160px -32px;
}

.Dynamic {
    background-position: -160px -64px;
}

.EmailAt {
    background-position: -176px 0;
}

.Export {
    background-position: -176px -32px;
}

.Folder {
    background-position: -176px -64px;
}

.Sweep {
    background-position: -192px 0;
}

.Go {
    background-position: -192px -32px;
}

.Graph {
    background-position: -192px -64px;
}

.Help {
    background-position: -208px 0;
}

.Hide {
    background-position: -208px -32px;
}

.Image {
    background-position: -208px -64px;
}

.BiDirection {
    background-position: -224px 0;
}

.Import {
    background-position: -224px -32px;
}

.Inbox {
    background-position: -224px -64px;
}

.Information {
    background-position: -240px 0;
}

.Text {
    background-position: -240px -32px;
}

.Link {
    background-position: -240px -64px;
}

.Map {
    background-position: -256px 0;
}

.Monitor {
    background-position: -256px -32px;
}

.NewMessage {
    background-position: -256px -64px;
}

.Note {
    background-position: -272px 0;
}

.NotePad {
    background-position: -272px -32px;
}

.ParentUp {
    background-position: -272px -64px;
}

.segmentation {
    background-position: -384px -17px;
}

.Permission {
    background-position: -288px 0;
}

.RecentlyUpdated {
    background-position: -288px -32px;
}

.Reload {
    background-position: -288px -64px;
}

.Reply {
    background-position: -304px 0;
}

.Report {
    background-position: -304px -32px;
}

.Return {
    background-position: -304px -64px;
}

.Show {
    background-position: -320px 0;
}

.Up {
    background-position: -320px -32px;
}

.User {
    background-position: -320px -64px;
}

.View {
    background-position: -336px 0;
}

.Move {
    background-position: -400px -48px;
}

.Warning {
    background-position: -336px -32px;
}

.Zip {
    background-position: -336px -64px;
}

.Error {
    background-position: -352px 0;
}

.ManuallyEdit {
    background-position: -352px -32px;
}

.Assign {
    background-position: -352px -48px;
}

.ViewCustomer {
    background-position: -352px -64px;
}

.ClearCustomer {
    background-position: -352px -80px;
}

.Plus {
    background-position: -400px -64px;
}

.BreakWord, .break-word {
    white-space: normal !important;
    word-wrap: break-word;
}

.text-overflow-cut {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-wrap, .Table .no-wrap {
    white-space: nowrap;
}

.Absolute, .absolute {
    position: absolute;
}

.Relative, .relative {
    position: relative;
}

.ews-icon-sortasc {
    vertical-align: bottom;
}

.ews-icon-sortasc, .ews-icon-sortdesc {
    color: var(--neutral-50);
}

.sort-label {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.Icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;

    /* IconSprite.png */
    background-image: url("https://cdn.e8.co/GlobalDocs/589166.png");
}

#Menu .Search, .box, .SelectField, .Table th, .Table a {
    box-sizing: border-box;
}

/* system */

/* Task 748465: Make ECP header mobile friendly */

.lap-header-user {
    flex: 1;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 13px;
    font-weight: bold;
    line-height: 16px;
}

.lap-header-user label {
    font-size: 10px;
    font-weight: normal;
    color: var(--text-secondary);
}

.AutocompleteField {
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
}

.AutocompleteField td:last-child {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
}

.AutocompleteField td .single-selection {
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
}

.ews-icon-ajaxinput.ajax-input-icon {
    width: 32px;
    height: 32px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
}

.AutocompleteField td:first-child input[type="text"], .AutocompleteField td:first-child input[type="tel"], .AutocompleteField td:first-child input[type="email"], .AutocompleteField td:first-child input[type="number"] {
    border-radius: 4px 0 0 4px !important;
}

.AutocompleteMenu {
    border-radius: 4px;
    position: absolute;
    text-align: left;
    overflow: auto !important;
    cursor: default;
    z-index: 100000;
    background: var(--bg);
    border: 1px var(--border) solid;
    font-size: 11px;
    box-sizing: border-box;
    transition: transform 150ms cubic-bezier(0.4, 0.14, 0.3, 1);
    box-shadow: 0 1px 1px -2px rgb(0 0 0 / 13%), 0 2px 3px -2px rgb(0 0 0 / 20%), 0 10px 12px -3px rgb(0 0 0 / 34%);
}

/* Layout Structure */

.Embeded {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.body-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.menu-content-wrap {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 0;
}

#ews-BC_EWS_UserMenu-menu {
    display: flex;
    flex-direction: column;
    min-width: max-content;
}

#MenuTop #OverFlowMenu {
    margin-right: 0;
}

#MenuTop[class*="MenuCollapsed"] #OverFlowMenu {
    display: none;
}

#MenuTop[class*="MenuOpened"] .ZoomLogo {
    display: none;
}

#Menu {
    flex-shrink: 0;
    position: relative;
    z-index: 220;
    width: 256px;
    height: 100%;
    background: var(--layer-special);
    overflow: hidden;
    box-sizing: border-box;
}

#Menu.IsTestSystem::before {
    height: 16px;
    display: flex;
    font-size: 10px;
    color: var(--text-onbg-warning);
    background-color: var(--bg-warning);
    align-items: center;
    justify-content: center;
}

#Menu.IsTestSystem.MenuCollapsed::before {
    content: "Test";
}

#Menu.IsTestSystem.MenuOpened::before,
#Menu.IsTestSystem.MenuCollapsed.open-temp::before {
    content: "Test System";
}

#Menu.MenuOpened .Content,
#Menu.MenuCollapsed.open-temp .Content {
    padding: 0 24px 0 20px;
}

#Menu.MenuCollapsed {
    width: 72px;
}

#Menu.MenuCollapsed .Content {
    padding: 0 14px;
    overflow: hidden;
}

#Menu.MenuCollapsed .MainMenuCategory .Label,
#Menu.MenuCollapsed .MainMenuItem a {
    white-space: nowrap;
}

#MobileBodyWrap #Menu.MenuCollapsed {
    width: 0;
}

#Menu.MenuCollapsed .NoCategory {
    opacity: 0;
    transition: opacity 0.5s linear;
}

#Menu.MenuCollapsed:hover .NoCategory {
    opacity: 1;
}

#Menu .Content {
    height: calc(100% - 92px);
    width: 100%;
    box-sizing: border-box;
}

#Menu.IsTestSystem .Content,
#Menu.IsTestSystem.open-temp .Content {
    padding-top: 24px;
    height: calc(100% - 92px - 16px);
}

#Menu.MenuOpened .Content {
    overflow-y: auto !important;
}

#MenuInnerContents {
    min-height: 100%;
    box-sizing: border-box;
}

nav#MenuInnerContents>div>div {
    margin-bottom: 8px;
}

#Menu.MenuCollapsed .logon-category {
    opacity: 0;
    transition: opacity .5s linear;
}

/* Version in Menu */

.version-wrap {
    margin: 8px -8px -17px -9px;
    padding: 16px 24px;
    background: var(--bg-object);
    color: var(--text);
    font-size: 12px;
    line-height: 20px;
    user-select: text;
    border-radius: 0 0 4px 4px;
}

.version-wrap label {
    line-height: 18px;
}

.version-wrap .performanceTitle {
    font-weight: bold;
    padding: 0 0 5px;
    max-width: 170px;
    font-size: 14px;
    user-select: none;
}

.server-tag .caption {
    font-weight: bold;
}

.serverInfo {
    padding-bottom: 5px;
}

.serverInfo div:first-of-type {
    font-weight: bold;
}

.current-time {
    margin-top: 10px;
    padding-top: 8px;
    text-align: center;
    border-top: solid 1px rgb(255 255 255 / 30%);
}

#Menu .Content .Inner, #Menu .Search .Inner, #Content .Inner, #FullHeight {
    width: 100%;
    height: 100%;
}

#Content {
    flex: 1;
    max-width: 100%;
    height: 100%;
    background-color: var(--layer-1);
    font-size: 13px;
    box-sizing: border-box;
    overflow: auto;
    position: relative;
    color: var(--text);
}

#Content .Inner {
    position: relative;
    box-sizing: border-box;
    overflow: inherit;
}

#Content.WebQuery {
    display: none;
}

#FullHeight {
    overflow: auto;
}

.LeftActions {
    padding: 5px 5px 0;
    width: 140px;
    background: var(--neutral-20);
    border-right: 1px var(--neutral-120) solid;
}

.Sticky {
    position: sticky;
}

/* Header Layout */

#Header {
    position: sticky;
    top: 0;
    width: 100%;
    font-size: 15px;
    z-index: 230;
    color: var(--text);
    background: var(--layer-1);
    white-space: nowrap;
    box-sizing: content-box;
}

#Header .Inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: var(--header-h);
    line-height: var(--header-h);
}

#Header .menu-in-header {
    position: relative;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 256px;
    height: var(--header-h);
    color: var(--text);
    background: var(--layer-special);
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
}

#MobileBodyWrap #Header .menu-in-header {
    background: var(--layer-1);
}

#Header .menu-in-header.MenuOpened {
    padding: 0 16px 0 32px;
}

#Header .menu-in-header.MenuCollapsed {
    padding: 0 20px;
    width: 72px;
    overflow: hidden;
}

#OverFlowMenu ecp-btn {
    display: flex;
    align-items: center;
    line-height: 32px;
}

.Logo {
    width: 100%;
    max-width: 152px;
    height: auto;
}

#Header .MenuCollapsed .Logo {
    display: none;
}

#Header .Label, #Header .LabelButton {
    min-width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 12px;
    text-align: center;
    cursor: default;
    transition: background .3s;
    box-sizing: border-box;
}

#Header .LabelButton[name="UserMenu"] {
    display: flex;
    align-items: center;
    padding: 0 10px;
}

#Header .LabelButton {
    cursor: pointer;
}

@media (hover:hover) {

    #Header .LabelButton:hover, #Header .IconButton:hover {
        background-color: var(--layer-3);
    }
}

#Header .LabelButton:active, #Header .IconButton:active {
    background-color: var(--layer-3);
}

#Header .IconButton {
    width: 48px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    margin-right: 10px;
}

#Header .LabelButton img {
    height: 30px;
    border-radius: 20px;
    width: 30px;
    vertical-align: middle;
    margin-right: 6px;
}

#Header ecp-btn[type="ghost"] {
    line-height: 44px;
}

#PageBreadcrumb_Title .PageBreadcrumb-button {
    display: flex;
    align-items: center;
    height: 32px;
    line-height: 30px;
}

#UserMenuToggleInMenu {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 24px 0 20px;
    width: 100%;
    min-width: 92px;
    height: 92px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    color: var(--text);
    background: var(--layer-2);
    transition: background .3s;
    box-sizing: border-box;
}

.MenuCollapsed #UserMenuToggleInMenu {
    padding: 0 12px;
}

#UserMenuToggleInMenu .UserStyle:hover {
    background: var(--bg-hover);
    border-radius: 4px;
}

#UserMenuToggleInMenu img {
    height: 24px;
    border-radius: 20px;
    width: 24px;
    margin-right: 16px;
}

#UserMenuToggleInMenu .ews-icon-emcaretdown {
    font-size: 20px;
}

#UserMenuToggleInMenu .UserStyle,
#UserMenuInMenu .UserStyle {
    width: 216px;
    height: 44px;
    display: flex;
    align-items: center;
}

#UserMenuToggleInMenu .UserStyle {
    padding-left: 12px;
    padding-right: 12px;
}

#UserMenuInMenu .UserStyle {
    padding-left: 0;
}

#UserMenuInMenu .UserStyle .ews-icon-emcaretdown {
    display: none;
}

#UserMenuInMenu ecp-list-item:first-child {
    margin: -16px -12px 16px;
    background: var(--bg-object);
}

#UserMenuInMenu ecp-list-item .UserStyle img {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    margin-right: 16px;
}

.MenuCollapsed .UserStyle .lap-header-user,
.MenuCollapsed .UserStyle i {
    display: none;
}

.MenuCollapsed.open-temp .UserStyle .lap-header-user,
.MenuCollapsed.open-temp .UserStyle i {
    display: flex;
}

#Header #ews-status-display .ews-icon-phone {
    font-size: 22px;
    line-height: 50px;
}

/* Unified Search */

#Header .search-box {
    flex: 1;
    width: 500px;
    margin-right: 10px;
    direction: rtl;
}

#Header .search-box #UnifiedSearch {
    max-width: 500px;
    direction: ltr;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
}

#UnifiedSearch #ews-UnifiedSearch-input {
    padding: 0 0 0 46px;
    font-size: 14px;
    min-width: 100%;
    background: var(--bg);
}

#UnifiedSearch section {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 600px;
}

#UnifiedSearch .ews-input-action {
    position: absolute;
    top: 0;
    width: 48px;
    font-size: 14px;
    color: var(--text-placeholder);
    text-align: center;
    cursor: pointer;
    transition: background .3s;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#MobileBodyWrap #UnifiedSearch .ews-input-action {
    color: var(--text);
}

#UnifiedSearch .clear-input-button {
    position: absolute;
    right: 0;
    z-index: 20;
    width: 48px;
    height: 32px;
    line-height: 34px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

/* unified search result */

#ews-BC_Input_Results-menu {
    padding-top: 6px;
}

/* ECP Help Resources */

#Header .ecp-help-button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    margin-right: 20px;
}

#ecp-help-menu {
    width: 421px;
    overflow: hidden;
}

#ask-bev-list-item {
    background-color: var(--layer-1);
    margin: 0 0 16px;
    cursor: pointer;
}

#ask-bev-list-item:hover {
    background-color: var(--bg-hover);
}

#ecp-bev-display-menu {
    height: 700px;
    width: 500px;
    min-height: 350px;
}

#ecp-bev-iframe-item {
    height: 600px;
    padding: 0;
    min-height: 254px;
}

#ask-bev-go-back {
    background-color: var(--layer-1);
    cursor: pointer;
}

#ask-bev-go-back:hover {
    background-color: var(--bg-hover);
}

#help-menu-whats-new {
    background-color: var(--layer-1);
    color: var(--text) !important;
    margin: 0 0 16px;
    cursor: pointer;
}

#help-menu-whats-new:hover {
    background-color: var(--bg-hover);
}

#help-menu-support-pourtal {
    background-color: var(--layer-1);
    color: var(--text) !important;
    margin: 8px 0 0;
    cursor: pointer;
}

#help-menu-support-pourtal:hover {
    background-color: var(--bg-hover);
}

.attentionDialog {
    position: fixed;
    top: 75px;
    right: 30px;
    margin-left: 30px;
    background-color: var(--neutral-90);
    box-shadow: 0 0 8px var(--neutral-90);
    border-radius: 8px;
    padding: 24px 32px 32px;
    z-index: 1000;
    overflow: hidden;
    line-height: normal;
}

.attentionDialog>div {
    display: inline-block;
}

.attentionDialog>div:first-of-type {
    float: left;
    margin: 10px 24px 10px 0;
}

.attentionDialog>div:first-of-type span {
    font-size: 40px;
    color: var(--bg-success);
}

.attentionDialog>div:first-of-type img {
    max-width: 40px;
}

.attentionDialog div>div:first-of-type {
    color: var(--text-onbg-action);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.attentionDialog div>div:nth-of-type(2) {
    color: var(--text-secondary-onbg-action);
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 24px;
    max-width: 300px;
    white-space: normal;
}

.ecp-help-content {
    padding: 6px 16px 16px;
}

/* result css */

.search-result-category {
    margin: 0 30px 8px;
    padding: 18px 0 2px 10px;
    color: var(--text);
    font-weight: bold;
    border-bottom: 1px var(--neutral-30) solid;
}

#ews-UnifiedSearch-mobileinput:focus {
    border: none !important;
}

/* Header end */

/* Menu Structure */

#Menu a:link, #Menu a:visited, #Menu a:active {
    display: block;
    line-height: 16px;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
}

#Menu a:hover {
    color: var(--text);
}

#Menu a span.Clear {
    color: transparent !important;
}

#Menu .Warning a:link, #Menu .Warning a:visited, #Menu .Warning a:active {
    color: var(--text-error);
    font-weight: bold;
}

#Menu .MainMenuCategory {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: -4px;
    padding-right: 12px;
    color: var(--text);
    font-size: 14px;
    clear: left;
    cursor: pointer;
    user-select: none;
}

#Menu .MainMenuCategory:hover {
    background: var(--bg-hover);
    border-radius: 4px;
}

#Menu .MainMenuCategory .Label {
    flex: 1;
    margin-right: 14px;
}

#Menu.MenuCollapsed .MainMenuCategory .Label,
#Menu.MenuCollapsed .MainMenuCategory .ews-icon-emcaretdown {
    display: none;
}

#Menu.MenuCollapsed.open-temp .MainMenuCategory .Label,
#Menu.MenuCollapsed.open-temp .MainMenuCategory .ews-icon-emcaretdown {
    display: block;
}

#Menu .MainMenuCategory span[class*="ews-icon-"],
#Menu .MainMenuCategory span[class*="ews-illustration-"] {
    flex-shrink: 0;
    margin-right: 4px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 24px;
    text-align: center;
}

#Menu .MainMenuPrimaryDashboards a {
    display: flex;
    align-items: center;
    margin: 0;
    width: 100%;
    line-height: 20px;
}

#Menu .MainMenuPrimaryHighlight {
    background: var(--bg-selected);
    border-radius: 4px;
}

#Menu .MainMenuCategory .ews-icon-emcaretdown {
    user-select: none;
    font-size: 20px;
}

#Menu .CategoryHighlight {
    cursor: pointer;
}

#Menu .MainMenuPrimaryDashboards.CategoryHighlight {
    background: var(--bg-selected);
    border-radius: 4px;
    font-weight: bold;
}

#Menu .CategoryHighlight:not(.MainMenuPrimaryDashboards) .MainMenuCategory .Label {
    color: var(--text-secondary);
}

#Menu .MainMenuItem {
    clear: left;
    position: relative;
    margin-top: 8px;
    margin-right: 14px;
    padding: 8px 0 8px 12px;
}

#Menu .MainMenuItem:not(.MainMenuItemHighlight):hover {
    background: var(--bg-hover);
    border-radius: 4px;
}

#Menu .category-mobile .MainMenuItem:active {
    background-color: var(--bg-active);
}

#Menu .NoCategory {
    clear: left;
    position: relative;
    margin: 4px;
    padding: 3px 3px 30px;
}

#Menu .MainMenuItemHighlight {
    background: var(--bg-selected);
    font-weight: bold;
    border-radius: 4px;
}

.sign-in-content {
    margin: 20px auto 0;
    max-width: 303px;
}

@media (width <=300px) {

    .sign-in-content {
        padding: 7px;
    }
}

/* other login */

.other-login {
    max-width: 400px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.o-auth-title {
    position: relative;
    margin: 100px 0 13px;
    padding: 1em 0;
    color: var(--text-secondary);
    font-size: 1em;
    text-align: center;
    width: 100%;
}

.o-auth-title span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -50px;
    width: 100px;
    background: var(--bg);
    padding: 5px 0;
    font-size: 14px;
    line-height: 19px;
    font-family: Open Sans, Segoe UI, SF Pro Text, Helvetica, Helvetica Neue, Arial, Tahoma, sans-serif;
}

.o-auth-title::before {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -0.5px;
    content: "";
    width: 100%;
    border-top: 1px solid var(--neutral-60);
}

.o-auth-buttons a {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin: 0 10px 20px;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
}

.o-auth-buttons i {
    display: block;
}

.o-auth-buttons i img {
    width: 100%;
}

.o-auth-buttons .ews-login-facebook i {
    padding: 5px 0 0 10px;
    color: var(--text-onbg-action);
    font-size: 30px;
    line-height: 34px;
    background: #667eb9;
}

.o-auth-buttons .ews-icon-google i {
    background: url("https://cdn.e8.co/GlobalDocs/590085.png");

    /* googlelogo.png */
    background-size: contain;
    background-repeat: no-repeat;
}

.o-auth-buttons .ews-icon-windows i {
    background: url("https://cdn.e8.co/GlobalDocs/590160.png");

    /* ms-logo.png */
    background-size: contain;
    background-repeat: no-repeat;
}

.ews-dialog[id*="Logon"] .other-login {
    position: absolute;
    top: 140px;
}

/* Main Layout Table */

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

.MainLayout td.MainLayoutCell {
    vertical-align: top;
}

.MainLayout .MainLayoutBottom {
    padding: 5px 10px;
    font-size: 12px;
    width: 100% !important;
    background-color: var(--layer-1);
}

.MainLayout .MainLayoutBottom a:link,
.MainLayout .MainLayoutBottom a:visited,
.MainLayout .MainLayoutBottom a:active {
    text-decoration: none;
    margin: 0 8px 0 0;
    color: var(--text-secondary);
}

.MainLayout .MainLayoutBottom a:hover {
    color: var(--text-link-hover);
}

.MainLayout .MainLayoutBottom .Option a:link, .MainLayout .MainLayoutBottom .Option a:visited, .MainLayout .MainLayoutBottom .Option a:active {
    color: var(--neutral-60);
    text-decoration: none;
}

.MainLayout .MainLayoutBottom .Option a:hover {
    color: var(--text);
}

.MainLayout .MainLayoutBottom .Label {
    margin: 0 8px 0 0;
    cursor: default;
}

.MainLayout .MainLayoutBottom .Current {
    font-weight: bold;
    margin: 0 8px 0 0;
    cursor: default;
}

.MainLayout .MainLayoutActions {
    padding: 5px;
    height: fit-content;
}

.MainLayout .Ribbon {
    background-color: var(--bg);
    box-sizing: border-box;
}

.MainLayout .MainLayoutFilter {
    padding: 2px 0 0;
    vertical-align: top;
}

.MainLayout .MainLayoutFilter .FilterTable, .MainLayout .MainLayoutActions .FilterTable {
    margin-top: 5px;
}

.FilterContent {
    border-bottom: 1px var(--neutral-120) solid;
}

/* Page Tabs */

.MainLayoutTabs {
    display: flex !important;
    clear: both;
    background: var(--layer-1);
}

.MainLayoutTabs>div {
    flex: 1;
    display: flex;
    justify-content: space-between;
}

.MainLayoutTabs>div::after {
    content: "";
    display: block;
    flex: 12;
}

/* For Saved Report */

.MainLayoutTabs>div.mobile-scroll-wrap>.NoPadding {
    display: flex;
    place-content: flex-start space-between;
    align-items: stretch;
    overflow: auto hidden;
}

.MainLayoutTabs>div.mobile-scroll-wrap>.NoPadding::after {
    content: "";
    display: block;
    flex: 12;
}

.MainLayoutTabs .PageTab {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 1px;
    margin-top: 10px;
    padding: 0 12px;
    width: max-content;
    min-height: 28px;
    border-bottom: solid 1px var(--neutral-30);
    border-top: 3px transparent solid;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.MainLayoutTabs .PageTab .InnerTab {
    height: 100%;
    padding: 0 2px;
    color: var(--text-secondary);
    box-sizing: border-box;
}

.MainLayoutTabs:hover .PageTab .InnerTab {
    color: var(--neutral-60);
}

.MainLayoutTabs .PageTab.Active .InnerTab {
    color: var(--text);
    font-weight: bold;
    border-bottom: 3px solid var(--neutral-120);
}

.MainLayoutTabs .PageTab:hover .InnerTab {
    color: var(--text);
    border-bottom: solid 3px var(--neutral-120);
    transition: width .5s ease;
}

.MainLayoutTabs td:last-child {
    padding-right: 11px;
}

/* Input Elements */

.Button, button, input[type="button"] {
    margin-right: 5px !important;
    padding: 4px 8px;
    width: auto;
    height: 32px;
    color: var(--text);
    background: var(--bg);
    border: 1px var(--border) solid;
    font-size: 13px;
    border-radius: 4px;
    box-sizing: border-box;
}

.Button:hover, input[type="button"]:hover, button:hover {
    background: rgb(0 0 0 / 5%);
}

.ButtonAttention {
    background: var(--bg-action) !important;
    color: var(--text-onbg-action) !important;
    border: solid 1px var(--bg-action) !important;
}

.ButtonAttention:hover {
    background: var(--bg-action-hover) !important;
}

.ButtonAttention:focus {
    background: var(--bg-action-active) !important;
}

input[type="file"] {
    width: auto !important;
}

ecp-btn:not(:last-child) {
    margin-right: 8px;
}

.ButtonBlue {
    appearance: none;
    display: block;
    width: 100%;
    height: 30px !important;
    line-height: 30px !important;
    background-color: var(--primary-80);
    color: var(--text-onbg-action);
    border: none;
    border-radius: 4px;
    font-size: 100%;
    cursor: pointer;
    text-align: center;
}

.ButtonBlue:hover {
    background-color: var(--bg-action-hover);
}

.ButtonGreen {
    background: var(--bg-success);
    border: solid 1px var(--bg-success);
    color: var(--text-onbg-success);
}

.ButtonGreen:hover {
    background: var(--bg-success-hover);
}

.AutocompleteList .ajax-input-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    align-self: stretch;
    height: 40px;
    margin-bottom: 8px;
    padding: 0 20px;
    border-bottom: 1px solid var(--divider);
    box-sizing: border-box;
    font-size: var(--body-font-size);
    font-weight: var(--regular-weight);
    line-height: var(--body-line-height);
}

.AutocompleteList #AjaxSelectAll,
.AutocompleteList #AjaxClear,
.AutocompleteList #AjaxOK {
    color: var(--text-link);
    cursor: pointer;
}

.AutocompleteList .done-button {
    border-top: 1px solid var(--divider);
    background: var(--bg);
    display: flex;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    align-items: center;
    justify-content: flex-end;
    align-self: flex-end;
    font-size: var(--body-font-size);
    font-weight: var(--regular-weight);
    line-height: var(--body-line-height);
    box-sizing: border-box;
}

.AutocompleteList #AjaxNOT {
    margin-left: auto;
}

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

/* Firefox */

div.ews-dialog-mobile div.AjaxNotOn {
    background-color: var(--bg-error);
    color: var(--text-onbg-error);
    transition: background-color .15s;
}

div.ews-dialog-mobile div.AjaxNotOn:hover {
    background-color: var(--bg-error);
}

.ActionBigLabel {
    float: left;
    margin: 4px 10px 0;
    line-height: 32px;
    white-space: nowrap;
    cursor: default;
    font-size: 14px;
}

.ActionField .ActionLabel {
    padding: 7px 10px 8px 5px;
}

.MainLayout .MainLayoutFilter .ActionField .ActionLabel, .MainLayout .MainLayoutActions .ActionField .ActionLabel, .ews-dashboard-filter .ActionField .ActionLabel {
    margin: 0;
    padding: 0 5px;
    width: 84px;
    line-height: 32px;
    text-align: right;
    white-space: normal;
    font-size: 13px;
}

.FilterTable.dashboard-filter .ActionField .ActionLabel {
    padding: 0;
    width: 176px;
    line-height: 18px;
    text-align: left;
}

.MainLayout .MainLayoutFilter .ActionLabel, .MainLayout .MainLayoutActions .ActionLabel {
    display: inline;
    padding: 5px 0;
    float: left;
    color: var(--text);
}

.ActionField {
    white-space: nowrap;
    position: relative;
    height: 28px;
    padding: 0 35px 0 5px;
    background-position: right center;
    background-repeat: no-repeat;
    float: left;
    border: var(--border) 1px solid;
    background-color: var(--bg);
}

.ActionField select {
    border: 1px var(--border) solid;
}

.ActionFieldSolo {
    padding-top: 4px;
    padding-right: 4px;
    float: left;
}

.ActionField .AutocompleteField td {
    background: var(--bg);
    padding: 0 !important;
    margin: 0 !important;
    border: 0 none !important;
}

.ActionField .AutocompleteSelectedList {
    padding: 3px 3px 3px 8px;
    font-size: 13px;
}

.ActionField .AutocompleteSelectedItem {
    line-height: 13px;
    padding-top: 2px;
}

.ActionField .WebQueryInput td input[type="text"] {
    margin-top: -1px !important;
    line-height: 32px;
}

.ActionField input {
    margin-top: 0;
    height: 26px;
    line-height: 28px;
    background-color: transparent;
    width: 100%;
    color: var(--text);
    border: 1px var(--border) solid;
}

.ActionField input.FileInputButton {
    width: auto;
}

.table-view-filter {
    margin-left: 5px;
    padding: 10px;
    min-width: 800px;
    background: var(--bg);
    border: solid 1px var(--border);
    border-radius: 8px;
}

.filter-title {
    font-size: 16px;
    color: var(--text-secondary);
}

.field-column {
    margin-right: 10px;
}

.filter-action-buttons {
    padding-top: 10px;
}

.AutocompleteItem {
    display: flex;
    align-items: center;
    min-height: 28px;
    line-height: 28px;
    padding: 0 20px;
    white-space: pre;
    position: relative;
    font-weight: 400!important;
    background: var(--bg);
    color: var(--text);
    text-align: left;
    cursor: default;
    font-size: 13px;
    transition-timing-function: cubic-bezier(0.4,0.14,0.3,1);
    transition-duration: 70ms
}

.AutocompleteItem:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text) !important;
}

.AutocompleteItem.FromDatawarehouse {
    font-style: italic;
}

.AutocompleteList .AutocompleteItem.On {
    background: var(--primary-20);
    color: var(--text-onbg-action);
}

.AutocompleteList .AutocompleteItem.Off {
    color: var(--text-placeholder);
}

.AutocompleteItem tr:hover {
    background-color: transparent !important;
}

.AutocompleteItem td {
    padding: 2px 5px 0 0 !important;
    background-color: transparent !important;
    height: auto !important;
    font-size: 13px !important;
    border-bottom: none !important;
}

.AutocompleteItem label:hover {
    background-color: transparent !important;
}

.AutocompleteItem label {
    background-color: transparent!important;
    height: auto!important;
    font-size: 13px!important;
    border-bottom: none!important
}

.AutocompleteItem input[type='checkbox'] {
    margin-top: 0 !important;
    margin-right: 10px;
}

.AutocompleteItem.Highlight {
    background-color: var(--bg-selected) !important;
    color: var(--text) !important;
    font-weight: var(--semibold-weight) !important;
}

.AutocompleteItem.Highlight:hover {
    background-color: var(--bg-selected-hover) !important;
    color: var(--text) !important;
}

.AutocompleteItem.Category {
    background-color: var(--bg);
    color: var(--text-secondary);
    font-size: var(--bodysm-font-size);
    font-weight: var(--semibold-weight);
    line-height: var(--bodysm-line-height);
}

.AutocompleteItem .PicAndDescPill {
    margin: 4px 0;
}

/* EC-7733: Update UI of ecp-autocomplete */

.AutocompleteMenu div[name="ErrorPrompt"],
.inline-style .ajaxinput-list-mobile div[name="ErrorPrompt"]{
    padding: 12px 16px !important;
}

.AutocompleteItem input[type="checkbox"] {
    position: relative;
}

.AutocompleteItem input[type="checkbox"]:checked::after {
    content: "\2713";
    background-color: var(--bg-success);
    border-color: var(--border-selected);
    color: var(--text-onbg-action);
    width: 13px;
    display: inline-block;
    height: 13px;
    font-size: 12px;
    text-align: center;
    line-height: 13px;
    position: absolute;
    border-radius: 2px;
    font-weight: bold;
    transition: border-color 70ms cubic-bezier(0.4, 0.14, 0.3, 1), background-color 70ms cubic-bezier(0.4, 0.14, 0.3, 1)
}

.excludes .AutocompleteItem input[type="checkbox"]:checked::after {
    background-color: var(--bg-error);
    border-color: var(--bg-error);
}

.excludes .AutocompleteItem.Highlight {
    background-color: var(--bg-error-secondary) !important;
}

.ComboInputButton img {
    border: solid 1px var(--border);
    border-left: 0 none !important;
}


.WCSWaiting {
    /* Waiting.gif */
    background: url("https://cdn.e8.co/GlobalDocs/789016.gif") no-repeat;
    width: 16px;
    height: 16px;
}

.CheckboxSelect {
    position: relative;
    background: var(--bg);
    text-align: left;
    font-size: 11px !important;
    font-weight: normal !important;
    border: 1px var(--border) solid;
    cursor: default;
    overflow: auto !important;
    box-sizing: border-box;
}

.CheckboxSelect:hover {
    border: 1px var(--border-active) solid !important;
}

.CheckboxSelect ul {
    width: 100%;
    margin: 0;
    padding: 0;
}

.CheckboxSelect .AutocompleteItem td {
    font-size: 13px !important;
}

.SortableSelectItem {
    /* SortArrow.png */
    background-image: url("https://cdn.e8.co/GlobalDocs/587934.png");
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 16px;
}

.SortableSelectItem.Highlight {
    /* SortArrowLight.png */
    background-image: url("https://cdn.e8.co/GlobalDocs/789017.png");
}

.SortableSelectItem.Highlight:hover {
    /* SortArrowLight.png */
    background-image: url("https://cdn.e8.co/GlobalDocs/789017.png");
}

.SortableSelectItem:hover {
    /* SortArrow.png */
    background-image: url("https://cdn.e8.co/GlobalDocs/587934.png");
}

.SortableSelectStateHighlight {
    background: var(--bg);
    border: 1px var(--neutral-120) dashed;
}

.Dragging {
    background: var(--bg-warning);
    color: var(--text-onbg-warning);
}

.ActionOption {
    background-color: transparent !important;
    border: 0 none !important;
}

.MainLayoutFilter .ActionField, .MainLayoutActions .ActionField, .ews-dashboard-filter .ActionField {
    border: 0 none;
    background-color: transparent;
    height: auto;
    padding: 0 8px 0 5px;
    margin-bottom: 5px;
}

.MainLayoutFilter .ActionField input, .MainLayoutActions .ActionField input, .ews-dashboard-filter .ActionField input {
    height: auto;
    line-height: normal;
}

.MainLayoutFilter .ActionField input, .MainLayoutActions .ActionField input {
    border: var(--border) 1px solid;
    color: var(--text);
    background-color: var(--bg);
}

.MainLayoutFilter .ActionOption, .MainLayoutActions .ActionOption {
    background-color: transparent !important;
    border: 0 none !important;
}

.MainLayoutFilter .ActionOption input, .MainLayoutActions .ActionOption input {
    border: 0 none;
    padding-top: 6px;
    padding-left: 0;
    background-color: transparent;
}

.HiddenSubmitButton {
    background: transparent;
    border: 0 none;
    width: 10px;
    height: 2px;
    position: absolute;
    top: -1000px;
    left: -1000px;
}

.HiddenSubmitButton:focus {
    border: 0 none !important;
}

.MultiSelect {
    height: auto !important;
    padding-right: 12px;
}

.SelectField:not(.MultiSelect) {
    position: relative;
    max-width: 300px;
    background: var(--bg);
    display: inline-block;
    border-radius: 4px;
}

.SelectField:not(.MultiSelect)::after {
    position: absolute;
    right: 0;
    top: 0;
    content: "\f0d7";
    font-family: Icons;
    width: 32px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    z-index: 8;
}

.SelectField select {
    padding: 3px;
    min-width: 80px;
    margin: 0 !important;
    appearance: none;
    cursor: pointer;
    box-sizing: border-box;
}

.SelectField:not(.MultiSelect) select {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 32px;
    padding-right: 18px;
    border: 1px var(--border) solid;
    background: var(--bg);
    border-radius: 4px;
    font-size: 13px;
}

.MultiSelect select {
    width: auto !important;
    height: auto !important;
}

.AutocompleteField .Info {
    color: var(--text-secondary);
}

.AutocompleteField td {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 none !important;
    line-height: 0;
}

.AutocompleteField td input[type="text"], .AutocompleteField td input[type="number"], .AutocompleteField td input[type="tel"], .AutocompleteField td input[type="email"] {
    border: 1px var(--border) solid !important;
    border-right: none !important;
}

.AutocompleteField td input[type="text"] {
    width: 100%;
    margin: 0;
    height: 32px;
    padding-left: 5px;
    box-sizing: border-box;
}

.AutocompleteField td:last-child span {
    border-radius: 0 4px 4px 0 !important;
    border: solid 1px var(--border) !important;
    border-left: none !important;
    background: var(--bg);
}

.AutocompleteField.AutocompleteActive td:last-child span {
    border: 1px var(--border-active) solid !important;
    border-left: none !important;
}

.AutocompleteActive td input[type="text"], .AutocompleteActive td input[type="number"], .AutocompleteActive td input[type="tel"], .AutocompleteActive td input[type="email"] {
    border: 1px var(--border-active) solid !important;
    border-right: none !important;
}

.AutocompleteError td input[type="text"], .AutocompleteError td input[type="number"], .AutocompleteError td input[type="tel"], .AutocompleteError td input[type="email"] {
    border: 1px var(--red-60) solid !important;
    border-right: none !important;
}

.AutocompleteError td:last-child span {
    border: 1px var(--red-60) solid !important;
    border-right: none !important;
}

.AutocompleteSelectedList {
    padding: 3px 3px 3px 8px;
    font-size: 13px;
}

.AutocompleteSelectedItem {
    line-height: 13px;
    padding-top: 2px;
}

.AutocompleteSelectedItem input[type="checkbox"] {
    height: 13px !important;
}

.WebQueryInput td input[type="text"] {
    margin-top: -1px !important;
    line-height: 32px;
}

.WdateDivUp {
    width: 8px;
    height: 4px;
    margin-bottom: 4px;
    background: url("https://cdn.e8.co/GlobalDocs/589166.png") no-repeat -48px 0;
}

.WdateDivUp:hover {
    background-position: -48px -8px;
}

.WdateDivDown {
    width: 8px;
    height: 4px;
    margin-top: 4px;
    background: url("https://cdn.e8.co/GlobalDocs/589166.png") no-repeat -48px -4px;
}

.WdateDivDown:hover {
    background-position: -48px -12px;
}

.FileInput {
    display: inline-block;
    padding-right: 4px;
    border: var(--border) 1px solid;
    border-radius: 4px;
    background: var(--bg);
    white-space: nowrap;
}

.FileInput input {
    height: 25px !important;
    border: 0 none;
}

.FileInput input:focus {
    border: 0 none !important;
}

.FileInputContainer {
    position: relative;
}

.FileInputContainer span {
    position: absolute;
    display: block;
    top: -2px;
    overflow: hidden;
    z-index: 1;
    width: 75px;
    height: 24px;
    opacity: 0;
    filter: opacity(0);
    left: 0;
}

.FileInputContainer span input {
    position: absolute;
    left: -140px;
    cursor: pointer;
}

.FileInputContainer .FileInputButton {
    position: relative;
    z-index: 0;
    margin-right: 0 !important;
    padding: 0 8px;
    border: none;
    border-right: 1px var(--border) solid;
    border-radius: 4px 0 0 4px;
}

.FileInputFocus {
    border: 1px var(--border-active) solid !important;
}

/* Dialogs */

#DialogMask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--text);
    opacity: 0.08;

    /* Task 691265: Add display: none style to DialogMask class */
    display: none;
}

.Dialog {
    width: 600px;
    height: 400px;
    position: fixed;
    z-index: 1000;
    box-sizing: border-box;
    background: var(--bg-action);
    border: 1px var(--neutral-70) solid;
    box-shadow: 0 0 8px var(--neutral-90);
}

.Dialog .DialogLayout {
    width: 100%;
    height: 100%;
    border: 1px var(--neutral-70) solid;
    box-shadow: 0 0 8px var(--neutral-90);
    background-color: var(--bg);
}

.Dialog .DialogLayout thead td {
    padding: 8px;
    cursor: default;
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.Dialog .DialogLayout tbody td {
    padding: 5px;
    vertical-align: top;
}

.Dialog .DialogLayout tbody td.ScrollCell {
    height: 100%;
    padding: 0 !important;
    vertical-align: top;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.Dialog .DialogLayout tbody td .ScrollContent {
    width: 100%;
    height: 362px;
    padding: 5px;
    box-sizing: border-box;
    overflow: auto;
}

.Dialog .DialogLayout tbody td .Label {
    cursor: default;
    color: var(--text);
    font-size: 13px;
}

.Dialog .DialogLayout tfoot td {
    padding: 5px;
    cursor: default;
    background-color: var(--primary-10);
}

.Dialog .DialogLayout tbody td .FavoritesMemo {
    width: 80%;
    height: 162px;
    border: 1px var(--border) solid;
}

.Dialog.BoxShowNone, .DialogContent .DialogLayout {
    border: none !important;
    box-shadow: none !important;
}

.Dialog .DialogHeader {
    background: var(--bg-action);
    color: var(--text-onbg-action);
    padding: 8px;
}

.Dialog .DialogContent {
    overflow: hidden;
}

.Dialog .DialogFooter {
    background-color: var(--primary-10);
    padding: 8px 0;
    position: relative;
    bottom: 0;
    float: right;
}

.DialogClose {
    width: 16px;
    height: 16px;
    float: right;
    margin-left: 4px;
    cursor: pointer;
    box-sizing: border-box;
}

/* Transformations */

.ActionReset {
    clear: both;
    height: 5px;
}

.NoHover:hover, .NoHover:hover td {
    background-color: inherit !important;
}

/* Control Elements */

.LayerControl {
    height: 16px;
    font-size: 14px;
    cursor: pointer;
    margin: 0 2px;
}

.LayerControl img {
    width: 16px !important;
    height: 16px !important;
}

.ArrowRight, .ArrowLeft, .ArrowUp, .ArrowDown {
    cursor: pointer;
    background: url("https://cdn.e8.co/GlobalDocs/589166.png") no-repeat;
}

.ArrowRight, .ArrowLeft {
    width: 4px !important;
    height: 8px !important;
}

.ArrowRight {
    background-position: -52px 0;
}

.ArrowRight:hover {
    background-position: -52px -8px;
}

.ArrowUp, .ArrowLeft {
    background-position: -48px 0;
}

.ArrowUp:hover, .ArrowLeft:hover {
    background-position: -48px -8px;
}

.ArrowDown {
    background-position: -48px -4px;
}

.ArrowDown:hover {
    background-position: -48px -12px;
}

.Filter {
    width: 8px;
    height: 8px;
    background: url("https://cdn.e8.co/GlobalDocs/589166.png") no-repeat -48px -16px;
}

.Filter:hover {
    background-position: -48px -24px;
}

.ContentTabs {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0 10px 4px 0;
    width: 100%;
    max-width: max-content;
    background: var(--bg);
    overflow: auto hidden;
    box-sizing: border-box;
}

.ContentTabs .PageTab {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    margin-top: 5px;
    padding: 4px 8px 0 0;
    border-top: 3px transparent solid;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.ContentTabs .Active {
    cursor: default;
}

.ContentTabs .PageTab .InnerTab {
    height: 100%;
    padding: 0 2px 2px;
    color: var(--text);
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
}

.ContentTabs:hover .InnerTab {
    color: var(--text-secondary);
}

.ContentTabs .Active .InnerTab {
    color: var(--text);
    font-weight: bold;
    border-bottom: solid 2px var(--neutral-120);
}

.ContentTabs .PageTab:not(.Active):hover .InnerTab {
    color: var(--text);
    border-bottom: solid 2px var(--neutral-120);
}

.ContentTabs::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ContentTabs::-webkit-scrollbar-track {
    border-radius: 10px;
}

.ContentTabs::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--layer-1);
}

.Clickable {
    cursor: pointer !important;
}

/* List/Table/Form Common */

.Parent {
    padding: 5px;
    background: var(--layer-3);
    text-align: left;
    border-top: solid 1px var(--border);
    border-bottom: solid 1px var(--border);
    cursor: default;
    position: relative;
}

.Child {
    text-align: left;
    color: var(--text-secondary);
    background-color: var(--neutral-20);
    border-bottom: 3px var(--border) solid;
}

.SectionHeader {
    text-align: left;
    padding-top: 10px !important;
    background-color: var(--bg);
    border-top: 1px var(--neutral-120) solid;
    border-bottom: 1px var(--neutral-120) solid;
}

.Detail {
    text-align: left;
    color: var(--text);
}

.ColumnMenu {
    position: absolute;
    min-width: 120px;
    padding-bottom: 2px;
    z-index: 1000;
    background-color: var(--bg);
    border: 1px var(--border) solid;
    font-size: 13px;
}

.ColumnMenu a:link:hover, .ColumnMenu a:visited:hover, .ColumnMenu a:active:hover {
    text-decoration: underline;
}

.ColumnMenu a:hover {
    color: var(--text-link-hover);
}

.ColumnMenu .ColumnMenuItem {
    height: 22px;
    line-height: 22px;
    padding: 0 5px;
    white-space: nowrap;
    cursor: default;
    background-color: var(--bg);
    font-size: 13px;
}

.ColumnMenu .ColumnMenuItem:hover {
    background-color: var(--bg-hover);
}

.ColumnMenu .ColumnMenuField {
    height: auto !important;
    padding: 4px 5px 2px !important;
    line-height: normal !important;
}

.ColumnMenu .ColumnMenuField:hover {
    background-color: var(--bg) !important;
}

.ColumnMenu .ColumnMenuItem .Arrow {
    float: left !important;
    border: 0 none !important;
    margin-top: 9px !important;
    margin-right: 5px !important;
    margin-left: 0 !important;
}

.ColumnMenu .NoIcon {
    padding: 0 5px 0 18px !important;
}

.ColumnMenu .Seperator {
    height: 1px;
    margin: 3px 0;
    background-color: var(--divider);
}

.ColumnMenu .ColumnMenuCell {
    padding: 5px 5px 5px 3px;
    vertical-align: top;
}

.ColumnMenu .ColumnMenuButtonsTop {
    padding: 4px;
    border-bottom: 1px var(--border) solid;
}

.ColumnMenu .ColumnMenuButtons {
    padding: 5px 7px;
    border-top: 1px var(--border) solid;
}

.ColumnMenuCellBorder {
    border-left: 1px var(--border) solid;
}

.FieldTable, .FieldTable tr, .FieldTable td {
    background-color: transparent !important;
}

.FieldTable td {
    line-height: 28px;
}

@media (hover: hover) {

    .Table tr:hover>td, .Table tr:hover>td.Sticky {
        background-color: var(--bg-hover);
    }

    .Table tr.Highlight:hover, .Table tr.Highlight:hover td.Sticky, .TableHasSubTable tr.Highlight:hover td {
        background-color: var(--yellow-10);
    }

    .Table tr.Dim:hover>td.Sticky {
        background: var(--neutral-50);
    }
}

/* Task 568276 */

.Disabled, .disabled {
    opacity: 0.3;
    cursor: not-allowed !important;
}

.Disabled:hover, .disabled:hover {
    opacity: 0.5;
}

.disabled, .Disabled a, .disabled a {
    pointer-events: none;
}

/* 198707 Customer Dashboard Customer Notes not wrapping causing
stretches horizontally, requires scrolling to the right to see all of the content */

.Table .BreakWord {
    width: 50px;
    max-width: 50px;
    min-width: 50px;
}

.Item tr:hover {
    background-color: transparent !important;
}

.Item td {
    padding: 0;
    background-color: transparent !important;
    height: auto !important;
}

.Pagination {
    padding: 5px 10px;
    height: 27px;
}

/* CustomTableEditor */

.NoHoverBG:hover {
    background-color: var(--bg) !important;
}

.WhiteSpace {
    margin: 8px;
}

.NoHoverBG td {
    border-bottom: none;
}

.TableHeader {
    border-bottom: 2px solid var(--neutral-120);
}

.TableHeader span.HeaderName {
    background-color: var(--text);
    color: var(--text-onbg-action);
    padding: 2px;
}

.BasicInformation .TableBody .TableBodyItem {
    border-bottom: none;
}

.BasicInformation .TableBody .TableBodyItem input {
    display: block;
}

.TableBodyItem .SelectField::after {
    content: "*";
    color: var(--red-60);
    margin-left: 3px;
}

#ColumnSearchMenu {
    -webkit-touch-callout: none;
    user-select: none;
    min-width: 282px;
    margin-right: 0;
    max-width: 98%;
    overflow-x: auto;
    transform: translateZ(0);
}

.ScrollBarWrap::-webkit-scrollbar {
    appearance: none;
}

.ScrollBarWrap::-webkit-scrollbar:horizontal {
    height: 12px;
}

.ScrollBarWrap::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid var(--layer-2);
    background-color: rgb(0 0 0 / 30%);
}

.ScrollBarWrap::-webkit-scrollbar-track {
    display: block;
    background-color: var(--bg);
    border-radius: 8px;
}

/* News Table Style */

.GroupTitle {
    margin: 10px 0 0 25px;
    border-bottom: solid 1px var(--bg-action);
    font-weight: bold;
}

.GroupTitle label {
    display: inline-block;
    color: var(--text-onbg-action);
    padding: 2px 4px;
    background: var(--bg-action);
}

.TableForm {
    margin: 3px 0 5px 25px;
}

.FormTitle {
    background: var(--neutral-20);
    padding: 2px 12px;
    width: 180px;
    max-width: 180px;
    white-space: normal !important;
    text-align: left;
}

.TableForm td {
    padding: 5px 12px 10px;
    width: 180px;
    max-width: 180px;
    white-space: normal !important;
}

.TableForm th:last-child, .TableForm td:last-child {
    width: auto;
    max-width: none;
}

.TableForm td a:hover {
    text-decoration: underline;
}

/* Set Password */

.SetPassword .ews-icon-envelope {
    font-size: 12px;
}

.SetPassword .AutocompleteField td {
    position: relative;
}

.SetPassword .AutocompleteField td input[type="text"] {
    padding-left: 20px;
}

.SetPassword .AutocompleteField td:first-child::before {
    content: "\f007";
    display: block;
    position: absolute;
    width: 20px;
    height: 13px;
    top: 7px;
    font: normal normal normal 14px/1 Icons;
    text-align: center;
    color: var(--text-placeholder);
    text-rendering: auto;
}

.SetPassword i {
    top: 8px;
    font-size: 14px;
}

/* Table edit tips */

.ews-dashboard-tips-container .ews-dashboard-tips-description {
    background: var(--neutral-120);
    color: var(--text);
    border: none;
}

.ews-dashboard-tips-container .ews-dashboard-tips-description::after {
    background: transparent;
}

/* Dialog space submit button bug fix */

.ews-dialog .ews-dialog-content form input[value="&nbsp;"] {
    border: none !important;
    background: transparent !important;
}

/* Server Logs */

.panel-wrap {
    padding: 0 10px;
}

.panel-block {
    margin: 15px 15px 0 0;
    max-width: 300px;
    min-width: 200px;
    width: 10%;
    height: 120px;
    display: inline-block;
    background: var(--layer-1);
}

.panel-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.panel-item-title {
    color: var(--text) !important;
    font-size: 20px;
}

.panel-item:hover {
    background: var(--bg-action-hover);
}

.panel-item:hover .panel-item-title {
    color: var(--text-onbg-action) !important;
}

/* Mobile */

#MobileBodyWrap input[type="text"], #MobileBodyWrap input[type="password"], #MobileBodyWrap input[type="number"], #MobileBodyWrap input[type="button"], #MobileBodyWrap input[type="submit"], #MobileBodyWrap textarea, .ews-dialog-mobile input[type="text"], .ews-dialog-mobile input[type="password"], .ews-dialog-mobile input[type="number"], .ews-dialog-mobile input[type="button"], .ews-dialog-mobile input[type="submit"], .ews-dialog-mobile textarea {
    appearance: none;
}

#MobileBodyWrap .AutocompleteField td img, .ews-dialog-mobile .AutocompleteField td img {
    width: auto;
}

/* Menu Mobile */

#MobileBodyWrap #MenuInnerContents {
    -webkit-overflow-scrolling: auto;
}

/* AjaxInput Mobile */
@media (width >=768px) {

    .ajaxinput-mobile-wrapper {
        transition: none !important;
    }
}

/* EC-7733: Update UI of ecp-autocomplete */

.inline-style .ajaxinput-mobile-wrapper {
    margin: 0 24px;
    height: 44px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--layers-layer-2);
    padding: 0 16px;
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
}

.inline-style .ajaxinput-mobile-wrapper:focus {
    border-color: var(--border-active);
}

.inline-style .ajaxinput-mobile-wrapper .label-inline {
    margin-right: 8px;
}

.inline-style .ajaxinput-mobile-wrapper .excludes {
    color: var(--text-error);
    font-weight: var(--semibold-weight);
    margin-right: 8px
}

.inline .ajaxinput-mobile-wrapper .selected-item {
    display: flex;
    width: 16px;
    height: 16px;
    padding: 0 5px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    margin-right: 8px;
    background: var(--neutral-t24);
    color: var(--text);
    font-size: var(--bodysm-font-size);
    font-weight: var(--bold-weight);
    line-height: var(--bodysm-line-height);
}

.inline .ajaxinput-mobile-wrapper .multiple-selected,
.inline .ajaxinput-mobile-wrapper .multiple-selected-num {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 100%
}

.inline .ajaxinput-mobile-wrapper .multiple-selected::before,
.inline .ajaxinput-mobile-wrapper .multiple-selected::after {
    display: block;
    content: "";
    width: 3px;
    height: 16px;
    margin-right: 2px;
    border-radius: 2px 0 0 2px;
    background: var(--neutral-t24);
}

.ajaxinput-mobile-wrapper {
    position: relative;
    padding: 0 10px 10px;
    height: 50px;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}

.inline-style .ajaxinput-mobile-wrapper input {
    height: 40px !important;
    border: none;
    padding: 0;
    font-size: var(--body-font-size);
}

.ajaxinput-mobile-wrapper input {
    display: inline-block;
    width: 100%;
    height: 40px !important;
    padding: 5px 35px 5px 16px;
    box-sizing: border-box;
    font-size: 14px;
}

.ajaxinput-mobile-wrapper .ajax-input-delete-wrapper {
    position: absolute;
    top: 0;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
}

.inline-style .ajaxinput-mobile-wrapper .ajax-input-delete-wrapper {
    width: 36px;
    height: 44px;
    right: 0;
}

.inline-style .ajaxinput-mobile-wrapper .ews-icon-close:hover {
    border-radius: 50%;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 20px;
    background-color: var(--bg-object);
}

.inline-style .ajaxinput-mobile-wrapper .ews-icon-close {
    font-size: 13px;
}

.ajaxinput-mobile-wrapper .ews-icon-close {
    font-size: 16px;
}

.inline-style .ajaxinput-list-mobile {
    padding: 0;
    font-size: var(--body-font-size);
}

.inline-style .ajaxinput-list-mobile div {
    padding-bottom: 0;
}

.ajaxinput-list-mobile {
    padding: 10px;
    font-size: 14px;
}

.ajaxinput-list-mobile div {
    padding-bottom: 5px;
}

.ajaxinput-list-mobile .ews-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px 16px;
    min-height: 24px;
    color: var(--text-secondary);
    cursor: pointer;
}

.ajaxinput-list-mobile .ews-menu-item .ews-menu-icon {
    width: 30px;
}

.ajaxinput-list-mobile .search-result-category {
    margin: 0 10px 8px;
}

/* inline-styles in aspx */

.ews-menu-mobile .arrowup {
    position: absolute;
    top: -10px;
    right: 15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 10px;
    border-color: transparent transparent var(--neutral-50) transparent;
}

.ews-menu-mobile .arrowup::before {
    position: absolute;
    content: '';
    top: 1px;
    left: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 10px;
    border-color: transparent transparent var(--text-onbg-action) transparent;
}

.item-list-mobile .header {
    font-size: 14px !important;
}

/* table view */

.table-view-filter .ActionField {
    width: 250px;
}

.table-view-filter .ActionLabel {
    width: 80px;
    white-space: normal;
    text-align: right;
    line-height: 16px;
}

.header-user-avatar {
    font-size: 40px;
    margin: 7px 0;
}

.lap-header-user-avatar {
    font-size: 24px;
    margin: 0 16px 0 0;
}

/* Mobile Style Reset */

#MobileBodyWrap #Content {
    box-sizing: content-box;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    text-size-adjust: none;
}

/* Mobile Version */

.MobileVersionInfo {
    position: absolute;
    bottom: 0;
}

#VersionCategory .company-info .logo-content {
    text-align: center;
    padding: 15px 0;
}

#VersionCategory .company-info .logo-content img {
    width: 70%;
}

#VersionCategory .company-info .location-content p {
    padding: 10px 35px;
    vertical-align: text-top;
}

#VersionCategory .company-info .location-content p a {
    color: var(--text);
    display: inline-block;
}

#VersionCategory .company-info .location-content p i {
    margin-right: 5px;
}

#VersionCategory .company-info .media-content {
    text-align: center;
    margin-top: 10px;
    padding-bottom: 10px;
}

#VersionCategory .company-info .media-content a {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 15px;
    margin: 0 8px;
}

#VersionCategory .company-info {
    border-bottom: 1px solid var(--border);
    margin: 0 15px;
}

#VersionCategory .company-info .media-content a span {
    font-size: 16px;
    padding: 8px;
    color: var(--text-onbg-action);
}

.media-content a.twitter-logo {
    background: #2dcffb;
}

.media-content a.facebook-logo {
    background: #3b5998;
}

.media-content a.youtube-logo {
    background: #cc1e1c;
}

.mobile-version {
    text-align: center;
    margin-top: 20px;
}

.mobile-version .caption, .mobile-version .performance {
    margin-top: 10px;
}

/* new UI */

.section-header {
    border-bottom: solid 2px var(--bg-action);
}

.section-header span {
    display: block;
    padding: 3px 10px;
    color: var(--text-onbg-action);
    background: var(--bg-action);
}

.menu-mask {
    position: absolute;
    inset: 0;
    background: rgb(60 60 60 / 50%);
    z-index: 999;
}

#MobileColumnMenuButtons {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg);
}

#MobileBodyWrap .ColumnMenuCell .display-parent-field-list {
    padding-right: 20px;
}

#MobileBodyWrap .ColumnMenuCell .display-parent-field-list::-webkit-scrollbar {
    width: 60px;
    -webkit-overflow-scrolling: touch;
}

/* Switch Database */

.database-search-box {
    position: absolute;
    z-index: 10;
    width: 100%;
    left: 50%;
    margin-left: -50%;
}

.database-search-box td:first-child {
    padding-left: 0 !important;
}

.database-search-box td:last-child {
    padding-right: 0 !important;
}

.database-txt-input {
    width: 100%;
    border-radius: 4px;
}

.database-list-frame {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    border-top: solid 38px transparent;
}

.database-list {
    margin: 10px auto 0;
    width: 100%;
}

.database-list-item {
    display: block;
    margin-bottom: 8px;
}

.database-list-item td {
    padding: 5px 8px !important;
    vertical-align: middle !important;
}

.database-list-item td:first-child {
    border: solid 1px var(--border);
    border-right: none;
    border-radius: 4px 0 0 4px;
}

.database-list-item td:last-child {
    border: solid 1px var(--border);
    border-left: none;
    border-radius: 0 4px 4px 0;
}

.database-name {
    display: inline-block;
    padding-right: 10px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 16px;
    white-space: normal !important;
    color: var(--text-secondary);
}

input[type="button"].switch-btn {
    margin: 0 !important;
    padding: 2px 10px !important;
    height: auto !important;
    text-align: center;
    background: var(--primary-80);
    color: var(--text-onbg-action);
    border: none;
}

/* switch site mobile */

.ews-dialog-mobile .database-search-box {
    position: unset;
    margin: 0 auto;
    padding: 0 10px;
}

.ews-dialog-mobile .database-list-frame {
    position: unset;
    border-top: none;
    padding: 0 10px;
}

.ews-dialog-mobile .database-list-item td {
    border: none;
    border-bottom: solid 1px var(--border);
    border-radius: 0 !important;
}

.ews-new-category {
    position: absolute;
    top: 12px;
    left: 136px;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-warning);
    border: solid 1px var(--text-warning);
    border-radius: 7px;
    padding: 0 3px;
    line-height: 16px;
}

.ews-unshared-menu-item {
    font-style: italic;
}

.display-flex {
    /* For dashboard filter? */
    display: flex;
    flex-wrap: wrap;
}

/* Redactor UI reset */

.redactor-styles {
    font-size: 13px;
    line-height: 18px;
}

.redactor-styles ol>li {
    list-style: decimal;
}

.redactor-styles ul>li {
    list-style: disc;
}

/* End of day Task 454227 */

.EndOfDayTable>tbody>tr>td {
    padding: 12px 5px;
}

.EndOfDayTable>tbody>tr:last-child td {
    border-bottom: none;
}

.Table.EndOfDayTable tr:hover {
    background: transparent;
}

.WriteMessageRow td table {
    margin-bottom: 10px;
}

.WriteMessageRow td th {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

.WriteMessageRow td th:not([colspan]) {
    padding: 8px 8px 0;
    color: var(--text-secondary);
}

.WriteMessageRow td td {
    padding: 3px 8px;
}

.WriteMessageRow td th:first-child:not([colspan]), .WriteMessageRow td td:first-child {
    text-align: right;
}

.WriteMessageRow td th, .WriteMessageRow td td {
    border-collapse: separate;
    border-spacing: 5px 0;
}

.black-mask {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgb(0 0 0 / 30%);
}

.ews-icon-qualified-promotion {
    color: var(--primary-70) !important;
    text-decoration: none !important;
}

.ews-icon-unqualified-promotion {
    color: var(--text-error) !important;
    text-decoration: none !important;
}

.ews-icon-price-on-invoice {
    color: var(--text-success) !important;
    text-decoration: none !important;
}

table.NoPadding {
    border-spacing: 0;
}

table.spacing-5 {
    padding-left: 5px;
    padding-top: 5px;
}

table.spacing-2 {
    padding-left: 2px;
    padding-top: 2px;
}

table.spacing-10 {
    padding-left: 10px;
    padding-top: 10px;
}

table.spacing-7 {
    padding-top: 7px;
    padding-left: 7px;
}

/** Table View **/

.Table {
    background-color: var(--bg);
}

.Table thead {
    min-width: 100%;
    max-width: 100%;
}

.Table .Parent {
    padding: 6px;
    background: var(--layer-3);
    font-size: 13px;
    font-weight: bold;
    color: var(--text);
    max-width: 600px;
    cursor: default;
    white-space: nowrap;
    border-top: none;
    border-bottom: none;
    vertical-align: middle !important;
}

.Table td {
    padding: 5px 6px;
    color: var(--text);
    background: var(--bg);
    border-bottom: 1px solid var(--divider);
    cursor: default;
    white-space: normal;
    box-sizing: border-box;
}

.Table .tableview-filterbar-container {
    background: var(--bg) !important;
}

.Table td.Sticky {
    position: sticky;
    background-color: var(--bg);
}

.Table .Dim .link-icon-column {
    background: var(--layer-special);
}

.Table th.link-icon-column, .Table td.link-icon-column {
    padding: 5px 0;
    width: 8px;
}

.Table>tbody>tr:last-child>td {
    border-bottom: none;
}

.Table td a:link:hover, .Table td a:visited:hover, .Table td a:active:hover {
    text-decoration: underline;
}

.Table td.link-icon-column a:link, .Table td.link-icon-column a:visited, .Table td.link-icon-column a:active {
    margin: 0 3px;
    text-decoration: none;
}

.Table td img {
    max-width: 200px;
    max-height: 200px;
}

.Table td img.small-img {
    max-width: 90px;
    max-height: 90px;
}

/* Table that has sub table */

.Table.TableHasSubTable {
    border-spacing: 0 4px !important;
    background: transparent !important;
    border: none;
}

.Table.TableHasSubTable>tbody>tr {
    border-radius: 8px;
    box-shadow: 0 0 5px var(--bg-object);
}

.TableHasSubTable td {
    background: var(--bg);
}

.Table.TableHasSubTable>tbody>tr>td:first-child {
    border-radius: 8px 0 0 8px;
}

.Table.TableHasSubTable>tbody>tr>td:last-child {
    border-radius: 0 8px 8px 0;
}

.TableHasSubTable #bottomSaveButtonCell {
    background: transparent;
}

.Table.TableHasSubTable tr.NoHover {
    box-shadow: none;
}

.Table.TableHasSubTable>tbody>tr.SubRowShowed {
    box-shadow: none;
    border-radius: 0;
}

.SubRowShowed .SubTableCell>div:not(.stickySentinelBottom) {
    margin-top: -8px;
    margin-left: -44px;
    padding-left: 44px;
    padding-top: 12px;
    background: var(--bg);
    border-radius: 0 0 8px 8px;
}

.Table.TableHasSubTable>tbody>tr.ParentRowOpened {
    border: solid 1px var(--border-selected);
    border-radius: 8px 8px 0 0;
}

.Table.TableHasSubTable>tbody>tr.ParentRowOpened td {
    border-bottom: none;
}

.Table.TableHasSubTable>tbody>tr.ParentRowOpened td:not(.Sticky) {
    position: relative;
}

.Table.TableHasSubTable>tbody>tr.ParentRowOpened>td:first-child {
    border-bottom-left-radius: 0;
}

.Table.TableHasSubTable>tbody>tr.ParentRowOpened>td:last-child {
    border-bottom-right-radius: 0;
}

.Table.TableHasSubTable .SubTableCell {
    padding-bottom: 8px;
    border-bottom: none;
}

/** Not know if the code is useful **/

.Table th.Child, .Table th.SectionHeader {
    text-align: left;
    padding-top: 3px !important;
}

.Table th.Detail {
    text-align: left;
}

.Table td.link-icon-column .LayerControl {
    margin: 0 5px;
    font-size: 15px;
    line-height: 16px;
}

.Table td .SelectField {
    padding-right: 2px !important;
    overflow: hidden;
}

.Table td .MultiSelect {
    height: auto !important;
}

.Table td .SelectField select {
    padding: 3px 18px 3px 3px;
}

.Table td .MultiSelect select {
    height: auto !important;
}

.Table td .AutocompleteField td {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 none !important;
}

.Table td .AutocompleteField td input[type="text"] {
    width: 100%;
    margin: 0;
    height: 32px !important;
    padding-left: 5px;
    border-right: 0 none !important;
}

.Table td .AutocompleteSelectedList {
    padding: 3px 3px 3px 8px;
}

.Table td .AutocompleteSelectedItem {
    line-height: 13px;
    padding-top: 2px;
}

.Table td .AutocompleteSelectedItem input[type="checkbox"] {
    height: 13px !important;
}

.Table td .WebQueryInput td input[type="text"] {
    margin-top: -1px !important;
    line-height: 32px;
}

.Table th.Parent .Arrow {
    float: right;
    margin-top: 8px;
    margin-left: 5px;
    margin-bottom: 5px;
}

.Table th.Parent .Title {
    cursor: pointer;
}

.Table td.Pagination {
    border-bottom: 0 none;
}

.Table td.Pagination .Label {
    margin: 0 8px 0 0;
    cursor: default;
}

.Table td.Pagination .Current {
    font-weight: bold;
    margin: 0 4px;
    cursor: default;
}

.Table td.Pagination .Option a:link, .Table td.Pagination .Option a:visited, .Table td.Pagination .Option a:active {
    text-decoration: none;
    margin: 0 4px;
}

.Table .TextField {
    min-width: 300px;
    white-space: normal;
}

/* Single Record Table - Flex */

.tv_flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 1600px;
    background: var(--bg);
}

.tv_flex-item {
    width: 20%;
    min-width: 155px !important;
    box-sizing: border-box;
    flex-grow: 1;
}

.tv_column-title {
    background: var(--neutral-30);
    border-top: solid 1px var(--neutral-30);
    border-bottom: solid 1px var(--neutral-30);
    cursor: pointer;
}

.tv_column-value {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.tv_column-title, .tv_column-value {
    padding: 5px;
    min-height: 30px;
    color: var(--text);
    box-sizing: border-box;
}

.tv_column-value img {
    max-width: 200px;
    max-height: 200px;
}

.tv_column-value img.small-img {
    max-width: 90px;
    max-height: 90px;
}

/* Tip Tool */

.tip-container {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    cursor: pointer;
    user-select: none;
}

.tip-container::after {
    content: "";
    display: block;
    width: 60px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
}

.tip-container i {
    width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 1px;
    text-align: center;
    border-radius: 50px;
    cursor: pointer;
    font-size: 18px;
    box-sizing: border-box;
}

.tip-container i.ews-icon-info-label {
    background: var(--neutral-120);
    color: var(--text-onbg-action);
}

.tip-description {
    display: none;
    position: absolute;
    padding: 10px;
    width: 200px;
    background: var(--bg);
    border: solid 1px var(--neutral-110);
    border-radius: 4px;
    z-index: 10;
}

.tip-container:hover .tip-description {
    display: block;
}

.tip-box {
    display: flex;
    flex-flow: wrap;
}

.tooltip-container {
    width: auto;
    height: 100%;
    position: relative;
    display: inline-block;
}

.tip-box:hover .tooltip-description, .tooltip-container:hover .tooltip-description {
    display: block;
}

.tooltip-description {
    display: none;
    position: fixed;
    background: var(--bg-action);
    color: var(--text-onbg-action);
    pointer-events: none;
    padding: 8px 15px;
    border-radius: 5px;
    z-index: 100;
    box-shadow: 0 -5px 10px -2px rgb(0 0 0 / 40%);
    width: max-content;
}

@keyframes ani-top {

    from {
        opacity: 0.5;
        top: -50%;
    }
}

@keyframes ani-right {

    from {
        opacity: 0.5;
        left: -30%;
    }
}

@keyframes ani-left {

    from {
        opacity: 0.5;
        left: -20%;
    }
}

@keyframes ani-bottom {

    from {
        opacity: 0.5;
        top: 50%;
    }
}

.tooltip-description[position='top'] {
    top: -43px;
    animation: ani-top 0.5s ease-out;
}

.tooltip-description[position='left'] {
    top: -6px;
    animation: ani-right 0.45s ease-out;
}

.tooltip-description[position='right'] {
    left: 30px;
    top: -6px;
    animation: ani-left 0.45s ease-out;
}

.tooltip-description[position='bottom'] {
    top: 35px;
    animation: ani-bottom 0.5s ease-out;
}

.tooltip-description-center {
    left: 50%;
    transform: translateX(-50%);
}

/* Form */

.Form td {
    background: var(--bg);
    vertical-align: top;
    padding: 3px 10px;
    height: 32px;
}

.Form td.Buttons {
    padding-top: 10px;
    background: transparent;
}

.ews-error-text {
    width: 100%;
}

/* New Button */

.button-container {
    display: inline-block;
    padding: 5px;
    font-size: 14px;
}

.button {
    display: block;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 14px;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    font-family: Open Sans, Segoe UI, SF Pro Text, Helvetica, Helvetica Neue, Arial, Tahoma, sans-serif;
}

.button-default, .link-btn-default {
    background: var(--bg);
    color: var(--text);
    border: solid 1px var(--border);
}

.button-action, .link-button-action {
    background: var(--bg-action);
    color: var(--text-onbg-action);
    border: solid 1px var(--bg-action);
}

.button-export, .link-button-export, .button-add, .link-button-add {
    background: var(--bg-success);
    color: var(--text-onbg-action);
    border: solid 1px var(--neutral-120);
}

.flex {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flex-item {
    padding: 15px 25px;
}

.flex-column-2 .flex-item {
    width: 50%;
}

.flex-column-3 .flex-item {
    width: 33%;
}

.flex-column-4 .flex-item {
    width: 25%;
}

/* Encompass UI */

.section {
    font-family: Open Sans, Segoe UI, SF Pro Text, Helvetica, Helvetica Neue, Arial, Tahoma, sans-serif;
    padding: 40px 0;
}

.section-system-bg {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.section-red-bg {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.section-black-bg {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.section-green-bg {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.section-gray-bg {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.section-orange-bg {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.section-yellow-bg {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.section-purple-bg {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.section-teal-bg {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.section-darkblue-bg {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.section-brown-bg {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.section-blue-bg {
    background: var(--bg-action);
    color: var(--text-onbg-action);
}

.section h1, .section h2, .section h3, .section h4 {
    font-family: Open Sans, Segoe UI, SF Pro Text, Helvetica, Helvetica Neue, Arial, Tahoma, sans-serif !important;
    font-weight: 300;
    white-space: normal;
}

.section h1 {
    font-size: 32px;
    line-height: 32px;
}

.section h2 {
    font-size: 28px;
    line-height: 28px;
}

.section h3 {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 6px;
}

.section h4 {
    font-size: 22px;
    line-height: 24px;
}

.section .link-btn.black-btn {
    display: inline-block;
    background: var(--bg-action);
    color: var(--text-onbg-action);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    white-space: nowrap;
}

/* Task 566530 - Reduce page load by using CSS for spinner instead of a gif */

.donutSpinner, .donutSpinnerMobile {
    margin: 0 auto;
    border-radius: 3px;
    font-size: 18px;
    color: rgb(0 0 0 / 50%);
    padding: 10px;
    margin-bottom: .25em;
    vertical-align: top;
    transition: .3s color, .3s border;
    text-align: center;
}

.donutSpinnerMobile {
    color: var(--text-onbg-action);
}

.loader::before, .loader::after, .loader {
    border-radius: 50%;
    animation: loader 1.8s infinite both ease-in-out;
}

.loader {
    width: 14px;
    height: 14px;
    margin: 5px auto;
    color: inherit;
    vertical-align: middle;
    pointer-events: none;
    position: relative;
    transform: translateZ(0);
    animation-delay: -0.16s;
    top: -1em;
}

.loader::before {
    right: 100%;
    animation-delay: -0.32s;
}

.loader::after {
    left: 100%;
}

.loader::before, .loader::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: inherit;
    height: inherit;
}

@keyframes loader {

    0%, 80%, 100% {
        box-shadow: 0 1em 0 -1em;
    }

    40% {
        box-shadow: 0 1em 0 -.2em;
    }
}

/* Task 550475: Shake to reject bad value */

.ShakeToReject {
    animation: kf_shake 0.5s 1 linear;
}

@keyframes kf_shake {

    0% {
        transform: translate(30px);
    }

    20% {
        transform: translate(-30px);
    }

    40% {
        transform: translate(15px);
    }

    60% {
        transform: translate(-15px);
    }

    80% {
        transform: translate(8px);
    }

    100% {
        transform: translate(0);
    }
}

/* Steps */

.encompass-step-container {
    background: var(--layer-1);
    padding: 20px;
    width: 100%;
    height: 93px;
    font-size: 16px;
    line-height: 16px;
    box-sizing: border-box;
}

.encompass-step {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    height: 100%;
    color: var(--text);
}

.step-item {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    height: 100%;
}

.step-item.current::before {
    content: "\f0d7";
    font-family: Icons;
    display: block;
    position: absolute;
    top: 2px;
    left: 4px;
}

.step-item:not(:last-child)::after {
    content: "";
    display: block;
    height: 4px;
    flex: 1;
    background: var(--bg);
}

.step-item.complete::after {
    background: var(--bg-success);
}

.step-item.complete .step-icon::before {
    content: "\e848";
    font-family: Icons;
    color: var(--text-success);
    font-size: 20px;
    line-height: 20px;
    margin: -1px;
}

.step-icon {
    display: block;
    width: 18px;
    height: 18px;
    background: var(--bg);
    border-radius: 50%;
}

.step-text {
    position: absolute;
    top: 75%;
    width: 100%;
}

a#ActionButtonKnowledge::after {
    Width: 6px;
    Height: 6px;
    Border-radius: 50%;
    Content: '';
    Display: block;
    Position: absolute;
    Top: 3px;
    Right: 3px;
    background: var(--bg-error);
}

input[type="search"] {
    background: transparent !important;
    border: 1px transparent !important;
}

input[type="select"] {
    background: transparent !important;
    border: 1px transparent !important;
}

.AutocompleteList {
    user-select: none;
    color: var(--text);
}

/* Card */

.card-box {
    border: solid 1px var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

.card-box img {
    width: 100%;
}

.card-title {
    padding: 12px 15px 8px;
    font-size: 1.2em;
}

.card-text-box {
    padding: 0 15px;
    line-height: 24px;
}

.card-text-box p {
    margin-top: 5px;
    text-indent: 2em;
}

.card-box .button-container {
    padding: 15px;
}

.card-box .link-container {
    padding: 15px;
}

.card-box .link-container a {
    display: inline-block;
    padding: 5px 0;
}

.card-box .link-container a:not(:last-child) {
    margin-right: 15px;
}

.card {
    padding: 16px 24px;
    background: var(--bg);
    border: solid 1px var(--border);
    border-radius: 8px;
}

.card h3 {
    font-size: 13px;
    line-height: 20px;
    font-weight: var(--semibold-weight);
}

.card h3,
.card h4 {
    display: flex;
    gap: 8px;
}

.card .sub-text {
    color: var(--text-secondary);
    font-size: var(--bodysm-font-size);
    line-height: var(--bodysm-line-height);
}

.card h3 *[class*="ews-"],
.card h4 *[class*="ews-"] {
    color: var(--text-secondary);
}

.card-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-left: 0 !important;
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
}

.card-links li {
    list-style: none !important;
}

.card .ews-icon-externallink {
    margin-left: 4px;
}

.link-card {
    padding: 0;
    background-color: var(--bg);
    border-radius: 8px;
    border: solid 1px var(--border);
}

.link-card a {
    display: block;
    padding: 16px 24px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: color 0.2s;
}

.link-card *[class*="ews-icon-"] {
    font-size: 28px;
}

/* Title-Bar */

.title-bar {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 40px 0;
    font-size: 45px;
    font-weight: 300;
    justify-content: center;
    height: 80px;
    line-height: 0;
}

/* Task 681493: 'Pill' style status values */

.pill-grey {
    padding: 2px 8px;
    color: var(--text-onbg-action);
    background-color: var(--neutral-60);
    font-weight: 500;
    border-radius: 15px;
    white-space: nowrap;
}

.pill-purple {
    padding: 2px 8px;
    color: var(--text-onbg-action);
    background-color: #582281;
    font-weight: 500;
    border-radius: 15px;
    white-space: nowrap;
}

.pill-orange {
    padding: 2px 8px;
    color: var(--text-onbg-action);
    background-color: var(--yellow-60);
    font-weight: 500;
    border-radius: 15px;
    white-space: nowrap;
}

.pill-red {
    padding: 2px 8px;
    color: var(--text-onbg-action);
    background-color: var(--bg-error);
    font-weight: 500;
    border-radius: 15px;
    white-space: nowrap;
}

.pill-green {
    padding: 2px 8px;
    color: var(--text-onbg-action);
    background-color: var(--bg-success);
    font-weight: 500;
    border-radius: 15px;
    white-space: nowrap;
}

.pill-blue {
    padding: 2px 8px;
    color: var(--text-onbg-action);
    background-color: var(--primary-80);
    font-weight: 500;
    border-radius: 15px;
    white-space: nowrap;
}

.pill-brown {
    padding: 2px 8px;
    color: var(--text-onbg-action);
    background-color: var(--yellow-100);
    font-weight: 500;
    border-radius: 15px;
    white-space: nowrap;
}

.pill-white {
    padding: 1px 7px;
    border: 1px solid var(--neutral-80);
    border-radius: 15px;
    white-space: nowrap;
}

.pill-black {
    padding: 2px 8px;
    color: var(--text-onbg-action);
    background-color: var(--neutral-80);
    font-weight: 500;
    border-radius: 15px;
    white-space: nowrap;
}

.pill-yellow {
    padding: 2px 8px;
    color: var(--text-onbg-action);
    background-color: var(--bg-warning);
    font-weight: 500;
    border-radius: 15px;
    white-space: nowrap;
}

/* toggle switch */

.toggle-switch-widget {
    display: flex;
    align-items: center;
}

.toggle-switch-labels {
    flex: 1;
    display: flex;
    font-size: 16px;
}

.toggle-switch-labels-small {
    flex: 1;
    display: flex;
    font-size: 14px;
}

.toggle-switch-labels [class*="ews-icon-"] {
    width: 18px;
    font-size: 18px;
    line-height: 20px;
}

.toggle-switch-title {
    flex: 1;
    padding-right: 8px;
    line-height: 18px;
    white-space: normal;
}

.toggle-layer {
    width: 58px;
    position: relative;
}

.toggle-layer-small {
    width: 42px;
    position: relative;
}

.toggle-switch-checkbox {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.switch-icon {
    position: relative;
    display: block;
    border-radius: 24px;
    cursor: pointer;
    user-select: none;
}

.switch-icon::before {
    content: "";
    display: block;
    border-radius: 24px;
    background-color: var(--layer-special);
    transform: scale(1, 1);
    transition: all 70ms cubic-bezier(0.4, 0.14, 0.3, 1);
}

.switch-icon::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 24px;
    background-color: var(--bg);
    transition: all 70ms cubic-bezier(0.4, 0.14, 0.3, 1);
}

.checkboxActive .switch-icon::before {
    box-shadow: 0 0 5px #0da3eb;
}

.toggle-layer .switch-icon, .toggle-layer .switch-icon::before {
    height: 28px;
}

.toggle-layer .switch-icon::after {
    width: 24px;
    height: 24px;
}

.toggle-layer-small .switch-icon, .toggle-layer-small .switch-icon::before {
    height: 22px;
    background-color: var(--text-placeholder);
}

.toggle-layer-small .switch-icon::after {
    width: 18px;
    height: 18px;
}

.toggle-switch-checkbox:checked~.switch-icon::after {
    transform: translateX(30px);
}

.toggle-switch-checkbox:checked~.switch-icon::before {
    background-color: var(--bg-success);
}

.toggle-layer-small .toggle-switch-checkbox:checked~.switch-icon::after {
    transform: translateX(20px);
}

/* multiple labels */

.toggle-multiple-labels .toggle-switch-widget {
    align-items: center;
}

.toggle-multiple-labels .toggle-switch-labels {
    flex: none;
}

.toggle-multiple-labels .toggle-layer {
    margin: 0 16px 0 8px;
}

/* media query */
@media screen and (width <=768px) {

    #UnifiedSearch section {
        display: inline-flex;
        align-items: center;
    }

    ecp-btn[name="RemindMe"],
    [name="CallManager"],
    .switchVersionTypeContent {
        display: none !important;
    }

    .FilterTable.filter-mobile .ActionField {
        width: 25%;
        box-sizing: border-box;
    }

    #MobileBodyWrap .mobile-scroll-wrap {
        width: 100%;
    }

    .body-wrap #Menu .Inner {
        overflow-y: auto;
        user-select: none;
    }

    .ews-menu-mobile .arrowup {
        right: 34px !important;
    }

    .MainLayoutTabs::after {
        content: "";
        display: inline-block;
        width: 16px;
        height: 38px;
        background: linear-gradient(to right, transparent 30%, #c3c3c3 100%);
    }

    .MainLayoutTabs>div {
        overflow: auto hidden;
    }
}

@media screen and (width <=767px) {

    #MobileBodyWrap #Header .search-box #UnifiedSearch {
        margin-right: 0;
        width: 48px;
        height: 44px;
    }

    #MobileBodyWrap #Header .search-box #UnifiedSearch:active {
        background: var(--bg-active);
    }

    #MobileBodyWrap #UnifiedSearch #ews-UnifiedSearch-input {
        position: absolute;
        top: 0;
        z-index: 10;
        padding-left: 0;
        width: 48px;
        height: 44px !important;
        background: transparent;
        opacity: 0;
    }

    #MobileBodyWrap #UnifiedSearch .ews-input-action {
        z-index: 5;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-size: 18px;
    }

    .body-wrap #Header .body-wrap #Header .ecp-help-button, .body-wrap #Header #EChatButton {
        display: none !important;
    }

    .body-wrap #UnifiedSearch {
        min-width: 200px;
    }

    .body-wrap #Dashboard {
        min-width: 300px;
    }

    .body-wrap .Mobile {
        top: 40px;
    }

    .body-wrap .Left-content {
        padding-top: 35px;
    }

    #MobileBodyWrap .LabelButton {
        text-align: center;
    }

    #MobileBodyWrap .ListItem .Title, #MobileBodyWrap .ListItem .Description {
        font-size: 14px;
        text-size-adjust: none;
    }

    .ListSectionTitle span[class*="ews-icon-favorite"] {
        margin-top: 12px;
    }
}

/* device width */

@media (device-width <=768px) {

    #Header .ecp-help-button {
        font-size: 28px;
    }

    .FilterTable.filter-mobile .query-mobile .element {
        float: none !important;
    }
}

@media screen and (device-width >=600px) and (device-width <=1024px) {

    #ProductSearchForm .FilterTable, #InvoiceListForm .FilterTable {
        max-width: 480px;
    }

    .FilterTable.filter-mobile .ActionField {
        width: 50%;
        box-sizing: border-box;
    }
}

/* Task 596471:Please check the UI for iPad OS (iOS 13) desktop website model */

@media (device-width <=1366px) {

    .body-wrap input[type="text"] {
        appearance: none;
    }

    .SortableSelect {
        position: relative;
        padding-right: 40px;
        -webkit-overflow-scrolling: touch;
        background: rgb(184 184 184 / 20%);
    }

    .SortableSelect>div {
        background: var(--bg);
    }

    .SortableSelect:active, .SortableSelect:hover {
        background: rgb(184 184 184 / 20%);
    }
}

#EncompassMobileCategory, #EncompassMobileCategory .ews-icon-nextpage {
    display: none;
}

#EncompassMobileCategory h2 {
    margin: 0 0 0 10px !important;
    padding: 0 !important;
    font-size: 13px;
}

#EncompassMobileCategory .tips {
    margin: 4px 8px 0 !important;
    padding: 4px !important;
    font-size: 13px;
}

#EncompassMobileCategory .MainMenuItem.application-versions a {
    padding: 0 15px 8px 8px;
}

#EncompassMobileCategory .MainMenuItem.application-versions a p {
    font-size: 11px;
    color: var(--neutral-50);
}

/* Snackbar  */

.ecp-snackbar {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 13px 16px;
    box-sizing: border-box;
    position: fixed;
    right: 15px;

    /* top: 0; */
    border-radius: 4px;
    font-size: 14px;
    line-height: 19px;
    z-index: 999;
    opacity: 0.5;
    border-left: solid 4px var(--border);
    box-shadow: 0 1px 1px -2px rgb(0 0 0 / 13%), 0 2px 3px -2px rgb(0 0 0 / 20%), 0 10px 12px -3px rgb(0 0 0 / 34%);
    transition: top ease var(--ecp-duration-fast);
}

.ecp-snackbar-error {
    background: linear-gradient(0deg, var(--bg-error-secondary) 0%, var(--bg-error-secondary) 100%), var(--bg);
    border-left-color: var(--bg-error);
}

.ecp-snackbar-info {
    background: linear-gradient(0deg, var(--bg-object) 0%, var(--bg-object) 100%), var(--bg);
    border-left-color: var(--border);
}

.ecp-snackbar-success {
    background: linear-gradient(0deg, var(--bg-success-secondary) 0%, var(--bg-success-secondary) 100%), var(--bg);
    border-left-color: var(--bg-success);
}

.ecp-snackbar-warning {
    background: linear-gradient(0deg, var(--bg-warning-secondary) 0%, var(--bg-warning-secondary) 100%), var(--bg);
    border-left-color: var(--bg-warning);
}

.ecp-snackbar-content {
    flex: 1;
    padding-right: 28px;
}

.ecp-snackbar-actionwrap {
    margin-top: 16px;
}

.ecp-snackbar-icon-close {
    position: absolute;
    right: 8px;
    top: 8px;
    cursor: pointer;
}

.ecp-snackbar-error .ecp-snackbar-icon {
    color: var(--text-error);
}

.ecp-snackbar-warning .ecp-snackbar-icon {
    color: var(--text-warning);
}

.ecp-snackbar-success .ecp-snackbar-icon {
    color: var(--text-success);
}

.ecp-snackbar-info .ecp-snackbar-icon {
    color: var(--text-secondary);
}

.animate_active {
    opacity: 1;
}

@media screen and (width <=534px) {

    .ecp-snackbar {
        width: 90%;
    }

    #UserMenuMask {
        position: fixed;
        z-index: 232;
        left: 0;
        top: 54px;
        bottom: 0;
        width: 100%;
        background: var(--border);
    }

    #ews-BC_EWS_UserMenu-menu {
        min-width: 280px;
        max-width: 320px;
    }

    .body-wrap #Dashboard {
        min-width: 200px;
    }
}

/* for Galaxy 8+ and fold */
@media screen and (width <=374px) {

    #ews-BC_EWS_UserMenu-menu {
        min-width: 100%;
        max-width: 100%;
        left: 0 !important;
        border-radius: 0;
    }

    .ews-menu .ews-menu-item {
        padding: 4px 8px !important;
        min-width: 264px !important;
    }

    .body-wrap #Dashboard {
        min-width: 200px;
    }
}

@media screen and (width >=534px) {

    .ecp-snackbar {
        width: 400px;
    }
}

/* page-container */
@media (width <=599px) {

    .page-container {
        padding: 0 24px;
    }

    #MobileBodyWrap #PageBreadcrumb_Title {
        padding-left: 24px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #PageBreadcrumb_Title .PageBreadcrumb-button {
        margin-right: 24px;
        padding-left: 24px;
    }

}

@media (width >=600px) and (width <=1239px) {

    .page-container {
        padding: 0 32px;
    }

    #PageBreadcrumb_Title {
        padding-left: 32px;
    }

    #PageBreadcrumb_Title label {
        max-width: 220px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    #PageBreadcrumb_Title .PageBreadcrumb-button {
        margin-right: 32px;
        padding-left: 32px;
    }
}

@media (width >=1240px) {

    .page-container {
        padding: 0 48px
    }

    #PageBreadcrumb_Title {
        padding-left: 48px;
    }

    #PageBreadcrumb_Title .PageBreadcrumb-button {
        margin-right: 48px;
        padding-left: 48px;
    }
}

.MainLayoutHeader.has-pageheader {
    overflow: hidden;
    flex-shrink: 0;
}

.MainLayoutHeaderTitle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--enc-sector-color);
    height: 80px;
    font-weight: 300;
}

#MobileBodyWrap #PageBreadcrumb_Title {
    margin-right: 32px;
    padding-left: 16px;
}

#PageBreadcrumb_Title {
    font-size: 18px;
    margin-right: auto;
    display: flex;
    align-items: center;
}

#PageBreadcrumb_Title .cut-off-line {
    color: var(--text-placeholder);
    margin: 0 12px;
}

.MainLayoutHeaderTitle>.dashboard-header {
    color: var(--text-onbg-action);
    font-size: 24px;
    padding: 0 7px;
    width: 100%;
    box-sizing: border-box;
}

.MainLayoutHeaderTabs {
    border: none;
    font-size: 14px;
}

.MainLayoutHeaderTabs ecp-tabs {
    border-bottom: none;
}

.MainLayoutHeaderTabs ecp-tab-item:first-child {
    margin-left: 0;
}

.MainLayoutHeaderTabs>div {
    width: 100%;
    overflow-x: auto;
}

.MainLayoutHeaderTabs .PageTab {
    top: 0;
    border: none;
    padding: 0;
    margin-left: 24px;
    height: 44px;
    line-height: 44px;
}

.MainLayoutHeaderTabs .PageTab:first-child {
    margin-left: 0;
}

.MainLayoutHeaderTabs .PageTab:hover .InnerTab {
    border-bottom: solid 3px var(--text);
}

@media screen and (width <=768px) {

    .MainLayoutHeaderTabs::after {
        display: none;
    }
}

/* Collapse dashboard header tabs  */

.HeaderTabsSticky {
    position: sticky;
    top: -72px;
    z-index: 130;
}

.OverflowInherit {
    overflow: inherit;
}

/* Login widget */

.Login-btn {
    width: 100%;
    height: 44px;
    font-size: 14px;
    line-height: 19px;
    font-family: Open Sans, Segoe UI, SF Pro Text, Helvetica, Helvetica Neue, Arial, Tahoma, sans-serif;
}

.login-input-container {
    height: 64px;
}

.login-input-container input {
    box-shadow: 0 0 0 1000px var(--layer-1) inset;
}

.login-footer {
    max-width: 122px;
    margin: 0 auto;
    font-size: 14px;
    margin-top: 20px;
    padding-bottom: 10px;
}

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

.input-tips {
    width: 100%;
    height: 20px;
    font-size: 14px;
    line-height: 19px;
    font-family: Open Sans, Segoe UI, SF Pro Text, Helvetica, Helvetica Neue, Arial, Tahoma, sans-serif;
}

/* Motion */

.motion-fast {
    transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
    transition-duration: 70ms;
}

.motion-moderate {
    transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
    transition-duration: 150ms;
}

.motion-slow {
    transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
    transition-duration: 400ms;
}

.slide-bottom {
    transform-origin: center bottom;
}

/* rotate animation */

.rotate-mirror {
    transform: rotate(-180deg);
}

.rotate-anticlockwise-90 {
    transform: rotate(-90deg);
}

.rotate-clockwise-90 {
    transform: rotate(90deg);
}

/* ecp-menu mask layer */

#MobileMenuMask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 665;
    background: var(--neutral-t48);
}

/* Task 1192649: Update UI on Users.PictureAndDesc */

.PicAndDescPill {
    min-width: 215px;
    max-width: 275px;
    height: 44px;
    background: var(--bg-hover);
    border-radius: 50px;
    display: grid;
    grid-template-columns: 44px 1fr;
}

.PicAndDescPill>img {
    width: 44px;
    height: 44px;
    border-radius: 50px;
    grid-row: 1/3;
    grid-column: 1;
}

.PicAndDescPill>.PicPillName {
    font-weight: 700;
    font-size: 13px;
    height: 22px;
    line-height: 27px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 8px;
}

.PicAndDescPill>.PicPillTitle {
    color: var(--neutral-50);
    font-size: 11px;
    height: 22px;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 8px;
}

/* strip color */

.Table[has-colorstrips] tr .Parent:first-child,
.Table[has-colorstrips]>tbody>tr>td:first-child {
    padding-left: 24px;
}

.Table tr[ecp-colorstrip]>td:first-child {
    position: relative;
}

.Table tr[ecp-colorstrip]>td:first-child::before {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 6px;
    width: 6px;
    background: transparent;
    border-radius: 4px;
}

.Table tr[ecp-colorstrip="black"]>td:first-child::before {
    background: var(--strip-black);
}

.Table tr[ecp-colorstrip="red"]>td:first-child::before,
.Table tr[ecp-colorstrip="error"]>td:first-child::before,
.Table tr[ecp-colorstrip="danger"]>td:first-child::before {
    background: var(--strip-red);
}

.Table tr[ecp-colorstrip="orange"]>td:first-child::before {
    background: var(--strip-orange);
}

.Table tr[ecp-colorstrip="yellow"]>td:first-child::before,
.Table tr[ecp-colorstrip="warnings"]>td:first-child::before {
    background: var(--strip-yellow);
}

.Table tr[ecp-colorstrip="green"]>td:first-child::before {
    background: var(--strip-green);
}

.Table tr[ecp-colorstrip="teal"]>td:first-child::before,
.Table tr[ecp-colorstrip="success"]>td:first-child::before,
.Table tr[ecp-colorstrip="complete"]>td:first-child::before {
    background: var(--strip-teal);
}

.Table tr[ecp-colorstrip="blue"]>td:first-child::before {
    background: var(--strip-blue);
}

.Table tr[ecp-colorstrip="navy"]>td:first-child::before {
    background: var(--strip-navy);
}

.Table tr[ecp-colorstrip="purple"]>td:first-child::before,
.Table tr[ecp-colorstrip="pending"]>td:first-child::before {
    background: var(--strip-purple);
}

.Table tr[ecp-colorstrip="magenta"]>td:first-child::before {
    background: var(--strip-magenta);
}

.Table tr[ecp-colorstrip="black-subtle"]>td:first-child::before {
    background: var(--strip-black-subtle);
}

.Table tr[ecp-colorstrip="red-subtle"]>td:first-child::before {
    background: var(--strip-red-subtle);
}

.Table tr[ecp-colorstrip="orange-subtle"]>td:first-child::before {
    background: var(--strip-orange-subtle);
}

.Table tr[ecp-colorstrip="yellow-subtle"]>td:first-child::before {
    background: var(--strip-yellow-subtle);
}

.Table tr[ecp-colorstrip="green-subtle"]>td:first-child::before {
    background: var(--strip-green-subtle);
}

.Table tr[ecp-colorstrip="teal-subtle"]>td:first-child::before {
    background: var(--strip-teal-subtle);
}

.Table tr[ecp-colorstrip="blue-subtle"]>td:first-child::before {
    background: var(--strip-blue-subtle);
}

.Table tr[ecp-colorstrip="navy-subtle"]>td:first-child::before {
    background: var(--strip-navy-subtle);
}

.Table tr[ecp-colorstrip="purple-subtle"]>td:first-child::before {
    background: var(--strip-purple-subtle);
}

.Table tr[ecp-colorstrip="magenta-subtle"]>td:first-child::before {
    background: var(--strip-magenta-subtle);
}

/* EC-7220: Create helper classes/components for implementing typography guidelines */

h1, .h1 {
    font-size: 28px;
    line-height: 40px;
    font-weight: var(--bold-weight);
}

h2, .h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: var(--bold-weight);
}

h3, .h3 {
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--bold-weight);
}

h4, .h4 {
    font-size: 13px;
    line-height: 20px;
    font-weight: var(--semibold-weight);
}

.ecp-bodysm {
    font-size: var(--bodysm-font-size);
    line-height: var(--bodysm-line-height);
}

.ecp-body {
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
}

.animation-fade-in {
    transform-origin: center;
    animation-name: ecp-keyframe-fadein;
    animation-duration: var(--animation-durations-slowest);
}

.animation-fade-out {
    transform-origin: center;
    animation-name: ecp-keyframe-fadeout;
    animation-duration: var(--animation-durations-slowest);
}

.animation-scale-in {
    transform-origin: center;
    animation-name: scale-in;
    animation-duration: var(--animation-durations-slowest);
}

.animation-scale-out {
    transform-origin: center;
    animation-name: scale-out;
    animation-duration: var(--animation-durations-slowest);
}

.animation-appear-from-top {
    transform-origin: center top;
    animation: ecp-keyframe-appearfromtop var(--ecp-duration-fast);
}

.animation-appear-from-bottom {
    transform-origin: center top;
    animation: ecp-keyframe-appearfrombottom var(--ecp-duration-fast);
}

.animation-disappear-to-top {
    transform-origin: center top;
    animation: ecp-keyframe-disappeartotop var(--ecp-duration-fast);
}

.animation-disappear-to-bottom {
    transform-origin: center top;
    animation: ecp-keyframe-disappeartobottom var(--ecp-duration-fast);
}

@keyframes scale-in {

    from {
        scale: 0.95;
    }

    to {
        scale: 1;
    }
}

@keyframes scale-out {

    from {
        scale: 1;
    }

    to {
        scale: 0.95;
    }
}

/* EC-18245 Create animation tokens for both duration and animation type */
@keyframes ecp-keyframe-fadein {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ecp-keyframe-fadeout {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes ecp-keyframe-slidefromtop {

    0% {
        translate: 0 -0.5rem
    }

    100% {
        translate: 0
    }
}

@keyframes ecp-keyframe-slidefrombottom {

    0% {
        translate: 0 0.5rem
    }

    100% {
        translate: 0
    }
}

@keyframes ecp-keyframe-slidetotop {

    0% {
        translate: 0
    }

    100% {
        translate: 0 -0.5rem
    }
}

@keyframes ecp-keyframe-slidetobottom {

    0% {
        translate: 0
    }

    100% {
        translate: 0 0.5rem
    }
}

@keyframes ecp-keyframe-appearfromtop {

    0% {
        opacity: 0;
        translate: 0 -0.5rem
    }

    100% {
        opacity: 1;
        translate: 0
    }
}

@keyframes ecp-keyframe-appearfrombottom {

    0% {
        opacity: 0;
        translate: 0 0.5rem;
    }

    100% {
        opacity: 1;
        translate: 0;
    }
}

@keyframes ecp-keyframe-disappeartotop {

    0% {
        opacity: 1;
        translate: 0
    }

    100% {
        opacity: 0;
        translate: 0 -0.5rem
    }
}

@keyframes ecp-keyframe-disappeartobottom {

    0% {
        opacity: 1;
        translate: 0
    }

    100% {
        opacity: 0;
        translate: 0 0.5rem
    }
}