/*password fields eye-slash style*/
.pwd-field-icon {
  float: right;
  margin-right: 8px;
  margin-top: -31px;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.chg-pwd-field-icon {
  float: right;
  margin-right: 31px;
  margin-top: -24px;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

input::-ms-reveal,
input::-ms-clear {
display: none;
}

/* Shift toolbar up 4pxs to make a dark horizontal separator line appear below */
.acs_toolbar {
    top: -4px;
    /*background-color: #EAEAEA; */
    background-color: #F1F1F1;
    padding-top:4px;
}

.flex_header {
    width: 100%;
    display: -webkit-flex;
    display: flex;
}

#checkout-selector {
	font-size: 13px;
}

#checkout-selector-wrap {
    z-index: 9002;
    display: none;
    top: 10px;
    left: 280px;
    overflow: hidden;
    font-family: "Segoe UI", tahoma, arial, verdana, sans-serif;
    position: absolute;
}

#checkout-selector-combo {
    width: 400px;
}

.header_title {
    color: #EAEAEA;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 16pt;
    font-family: "Segoe UI", tahoma, arial, verdana, sans-serif;
}

#acs_header_title {
    z-index: 100;
    max-width: 600px;
    padding-top: 40px;
}

.acs_top_menu {
    z-index: 100;
    background-image: none;
    background-color: transparent;
    border-bottom:0 !important;
}

#acs_top_menu_div {
    z-index: 100;
    padding-top: 35px;
    margin-left: auto;
    min-width: 60px;
}

/*.mod-arrow em.x-btn-arrow { background-image: url("../extJS_3_4_1_1/resources/images/azzurra-legacy/button/arrow-w.gif"); }*/
.acs_top_menu .x-btn-mc em.x-btn-arrow {background-image: none !important }
.acs_top_menu .x-btn-arrow { padding-left: 1px !important; padding-right: 1px !important}
/* Customize top menu button colors */
#acs_top_menu_div .x-toolbar.x-toolbar.x-toolbar.x-toolbar .x-btn .x-btn-text { color: #f5f6f7; font-size: 11px; font-family: "Segoe UI", tahoma, arial, verdana, sans-serif; font-weight: normal; text-shadow: none; }
#acs_top_menu_div .x-toolbar.x-toolbar.x-toolbar.x-toolbar .x-btn.x-btn-over .x-btn-text { color: #00aeef; }
#acs_top_menu_div .x-toolbar.x-toolbar.x-toolbar.x-toolbar .x-btn.x-btn-over { background-color: #444444; border-color: #333333; }
#acs_top_menu_div .x-toolbar.x-toolbar.x-toolbar.x-toolbar .x-btn { width: 40px; }
#acs_top_menu_div .x-toolbar-right button { color: #f5f6f7; }

/* Header Panel's background color */
#viewer-header, #ext-acs-header-wrap {
    background-color: #231F20;
}

#viewer-header .x-panel-body, #ext-acs-header-wrap .x-panel-body {
	background-color: inherit;
}

/* Make the main vertical split bar dark */
body .x-splitbar-h {
    background-color: #231F20;
}

/* AffiniAI sparkles mark for the top-nav launcher button. Inlined here (this
   header CSS loads on every page, so it can't rely on the /affiniai page's own
   token block) and applied as a mask so background-color tints it: near-white
   to match the sibling nav icons, brand cyan on hover like their text. */
.chat-bot-icon {
    --icon-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z'/%3E%3Cpath d='M5 3v4'/%3E%3Cpath d='M19 17v4'/%3E%3Cpath d='M3 5h4'/%3E%3Cpath d='M17 19h4'/%3E%3C/svg%3E");
    background-color: #f5f6f7;
    -webkit-mask-image: var(--icon-sparkles);
            mask-image: var(--icon-sparkles);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 22px 22px;
            mask-size: 22px 22px;
    width: 3em;
    height: 24px;
    display: inline-block;
}

.chat-bot-icon:hover,
#acs_top_menu_div .x-btn.x-btn-over .chat-bot-icon {
    background-color: #00aeef;
}

/* The AffiniAI launcher and Home are Ext.LinkButtons, about 9px shorter than
   the other nav buttons: grow their middle cell to match, and centre the icon. */
#acs_top_menu_div #button_home .x-btn-mc,
#acs_top_menu_div #chat-bot-button .x-btn-mc {
    height: 29px;
}

#acs_top_menu_div #button_home .x-btn-text,
#acs_top_menu_div #chat-bot-button .x-btn-text {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 29px;
    /* nudge the icon down 4px so its optical centre lands on the same line as
       the sibling <button> glyphs (which sit slightly above their box centre) */
    padding-top: 4px;
}