/* Disable iPad touch highlight */
html
{
  -webkit-tap-highlight-color:transparent;  
}

/* Disable text selection on tree nodes to allow for context menus */
.x-tree {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
}

.x-unselectable {
    -webkit-user-select: none !important;
}

.x-grid3-body .x-grid3-td-expander {
    background-color: #f8f9f9;
}

.x-grid3-body .x-grid3-td-expander:hover {
    cursor:pointer;
}

    /* invalid style for fields:
       moved to ext-acs-theme.css during Phase 2 of the theme refactor
       (THEME_REVIEW.md §4.3 Phase 2). The shell-wide rule now uses
       var(--acs-form-invalid-border). Single source of truth. */

    /* to make IE 6.0 resizing regions work */
    .ext-strict .ext-ie6 .x-layout-split{background-color: #dfe8f6;}

    /* acs Tree Panel classes */
    .x-tree-node img.toc_root, .x-tree-node-collapsed img.toc_root{
        background-image: url("/static/images/book_root_close.gif");
        background-position: 0 0;
        background-repeat: no-repeat;
    }

    .x-tree-node-expanded img.toc_root {
        background-image: url("/static/images/book_root_open.gif");
        background-position: 0 0;
        background-repeat: no-repeat;
    }

    .x-tree-node img.toc_folder, .x-tree-node-collapsed img.toc_folder{
        background-image: url("/static/images/folder_close.png");
        background-position: 0 0;
        background-repeat: no-repeat;
    }

    .x-tree-node-expanded img.toc_folder {
        background-image: url("/static/images/folder_open.png");
        background-position: 0 0;
        background-repeat: no-repeat;
    }

    .x-tree-node img.toc_section, .x-tree-node-collapsed img.toc_section{
        background-image: url("/static/images/book_close.gif");
        background-position: 0 0;
        background-repeat: no-repeat;
    }

    .x-tree-node-expanded img.toc_section {
        background-image: url("/static/images/book_open.gif");
        background-position: 0 0;
        background-repeat: no-repeat;
    }

    .x-tree-node img.toc_page {
        background-image: url("/static/images/page.gif");
        background-position: 0 0;
        background-repeat: no-repeat;
    }

      .toc_expand {
          background-image:url("/static/images/expand.png") !important;
          background-position: 0 0;
      }
      .toc_collapse {
          background-image:url("/static/images/collapse.png") !important;          
          background-position: 0 0;
      }

      .toc_next {
          background-image:url("/static/images/next_item.png") !important;
          background-position: 0 0;
      }
      .toc_prev {
          background-image:url("/static/images/prev_item.png") !important;
          background-position: 0 0;
      }
      .refresh_icon {
          background-image:url("/static/images/sync.png") !important;
          background-position: 0 0;
      }
      
      .attach_sort_alpha {
          background-image:url("/static/images/cmd_sort_atoz_on2.png") !important;
      }
      .attach_sort_toc {
          background-image:url("/static/images/cmd_sort_atoz_off2.png") !important;
      }
      .attach_clear_filters {
          background-image:url("/static/images/tb_clear_filter.png") !important;
          background-repeat: no-repeat;
      }

      .toc_container_has_glossaries * {
        color:red !important;
      }
      
      .x-tree-node-loading .x-tree-checkbox {
        display: none;
      }

/* acs.ExtDisplayField classes */

.acs_ext_readonly_field{
    background:transparent;
    padding:3px;    /* workaround the problem label and value not aligning */
}

/*legend toolbar styles*/

.legend_marker
{
    float:right;
    padding-right:0px;
}

.legend_marker .x-toolbar
{
    background:transparent;
    border:0;
    padding-right:2px !important;
    position: static;

}

.btn_legend_marker
{
    padding:0px;
    margin:0px;
}

/* remove the default left,center and right images from the button border*/
.legend_marker .x-btn-left, .question_marker .x-btn-right, .question_marker .x-btn-center{
    background: 0;
}

/* now customize the new button that has a caption below the icon */
.legend_marker .x-btn-center .x-btn-text {
    background-position: 0 0px;
    background-repeat: no-repeat;
    padding-left:0px;
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    height: 16px;
}

.legend_menu_title h3 {
    color:#046BCA;
    background-color:white !important;
    padding:3px;
    font-size:8pt;
    font-weight:bold;
    line-height:16px;
    border:1px solid #046BCA;
    height:16px;
}

/* generic filter icon classes for grids that have filters */
.x-selectable, .x-selectable * {
    -moz-user-select: text!important;
    -khtml-user-select: text!important;
    -webkit-user-select: text!important; }
}

.x-grid3-hd-row td.ux-filtered-column {
       font-style: italic;
       color: #6666CC;
   }

.x-grid3-filter-icon{
    background-repeat:no-repeat;
    display:inline;
    height:10px;
    width:10px;
    margin-left:3px;
    vertical-align:middle;
}
td.ux-filtered-column .x-grid3-filter-icon
{
    background-image:url("/static/images/filter_icon.png") !important;
    display:inline;
}

/*
 * Tri State tee styles *
 *
 */
.x-tree-checkbox {
    background:url('/static/images/checkbox.gif') no-repeat 0 0;
    height:13px;
    width:13px;
    vertical-align:middle;
    margin-left:8px;
}
.x-tree-checkbox-over .x-tree-checkbox {
    background-position:-13px 0;
}
.x-tree-checkbox-down .x-tree-checkbox {
    background-position:-26px 0;
}
.x-tree-node-disabled .x-tree-checkbox {
    background-position:-39px 0;
}
.x-tree-node-checked {
    background-position:0 -13px;
}
.x-tree-checkbox-over .x-tree-node-checked {
    background-position:-13px -13px;
}
.x-tree-checkbox-down .x-tree-node-checked {
    background-position:-26px -13px;
}
.x-tree-node-disabled .x-tree-node-checked {
    background-position:-39px -13px;
}
.x-tree-node-grayed {
    background-position:0 -26px;
}
.x-tree-checkbox-over .x-tree-node-grayed {
    background-position:-13px -26px;
}
.x-tree-checkbox-down .x-tree-node-grayed {
    background-position:-26px -26px;
}
.x-tree-node-disabled .x-tree-node-grayed {
    background-position:-39px -26px;
}

.x-tree-branch-unchecked .x-tree-checkbox,
.x-tree-branch-unchecked .x-tree-node-checked,
.x-tree-branch-unchecked .x-tree-node-grayed {
    background-position:0 0;
}
.x-tree-branch-unchecked .x-tree-checkbox-over .x-tree-checkbox,
.x-tree-branch-unchecked .x-tree-checkbox-over .x-tree-node-checked,
.x-tree-branch-unchecked .x-tree-checkbox-over .x-tree-node-grayed {
    background-position:-13px 0;
}
.x-tree-branch-unchecked .x-tree-checkbox-down .x-tree-checkbox,
.x-tree-branch-unchecked .x-tree-checkbox-down .x-tree-node-checked,
.x-tree-branch-unchecked .x-tree-checkbox-down .x-tree-node-grayed {
    background-position:-26px 0;
}
.x-tree-branch-unchecked .x-tree-node-disabled .x-tree-checkbox,
.x-tree-branch-unchecked .x-tree-node-disabled .x-tree-node-checked,
.x-tree-branch-unchecked .x-tree-node-disabled .x-tree-node-grayed {
    background-position:-39px 0;
}
.x-tree-branch-checked .x-tree-checkbox,
.x-tree-branch-checked .x-tree-node-checked,
.x-tree-branch-checked .x-tree-node-grayed {
    background-position:0 -13px;
}
.x-tree-branch-checked .x-tree-checkbox-over .x-tree-checkbox,
.x-tree-branch-checked .x-tree-checkbox-over .x-tree-node-checked,
.x-tree-branch-checked .x-tree-checkbox-over .x-tree-node-grayed {
    background-position:-13px -13px;
}
.x-tree-branch-checked .x-tree-checkbox-down .x-tree-checkbox,
.x-tree-branch-checked .x-tree-checkbox-down .x-tree-node-checked,
.x-tree-branch-checked .x-tree-checkbox-down .x-tree-node-grayed {
    background-position:-26px -13px;
}
.x-tree-branch-checked .x-tree-node-disabled .x-tree-checkbox,
.x-tree-branch-checked .x-tree-node-disabled .x-tree-node-checked,
.x-tree-branch-checked .x-tree-node-disabled .x-tree-node-grayed {
    background-position:-39px -13px;
}
/*
*  Icon Combox Styles
* X-BROWSER-WARNING: this is not being honored by Safari
*/
.ux-icon-combo-icon {
background-repeat: no-repeat;
background-position: 0 50%;
width: 18px;
height: 16px;
}


.ux-icon-combo-input {
padding-left: 25px;
}

.x-form-field-wrap .ux-icon-combo-icon {
top: 5px;
left: 5px;
}
.ux-icon-combo-item {
background-repeat: no-repeat ! important;
background-position: 3px 50% ! important;
padding-left: 24px ! important;
}



/*Header buttons style*/
.ux-panel-header-btns-ct
{
    float: right;
}

.ux-panel-header-btns .x-btn
{
    margin-left: 2px;
}

.ext-ie .ux-panel-header-btns .x-btn button
{
    padding-top: 1px;
}

.ux-panel-header-btns .x-btn-icon .x-btn-center .x-btn-text
{
    background-position: 1px -1px;
}

.ux-panel-header-btns .x-btn-text-icon .x-btn-center .x-btn-text
{
    background-position: 1px -1px;
    padding: 0 0 0 11px;
}

.ext-ie .ux-panel-header-btns .x-btn-text-icon .x-btn-center .x-btn-text
{
    padding: 1px 0 0 13px;
}

.ext-ie .ux-panel-header-btns .x-btn-text-icon .x-btn-center
{
    padding-right: 4px;
}

.ux-panel-header-btns .x-btn-left
{
    width: 2px;
    height: 15px;
    background: url(/static/images/1blank.png) no-repeat 0 0;
}

.ux-panel-header-btns .x-btn-right
{
    width: 2px;
    height: 15px;
    background: url(/static/images/1blank.png) no-repeat 0 -15px;
}

.ux-panel-header-btns .x-btn-center
{
    background: url(/static/images/1blank.png) repeat-x 0 -30px;
    padding: 0 1px;
}

.ux-panel-header-btns .x-btn-tl, .ux-panel-header-btns .x-btn-tr, .ux-panel-header-btns .x-btn-tc, .ux-panel-header-btns .x-btn-ml, .ux-panel-header-btns .x-btn-mr, .ux-panel-header-btns .x-btn-mc, .ux-panel-header-btns .x-btn-bl, .ux-panel-header-btns .x-btn-br, .ux-panel-header-btns .x-btn-bc{
    background-image:url(/static/images/1blank.png);
}

.ux-panel-header-btns .x-btn-left i, .ux-panel-header-btns .x-btn-right i
{
    width: 2px;
}

.ux-panel-header-btns .x-btn-text
{
    color: #3255B2;
}

.ux-panel-header-btns .x-btn-over .x-btn-text
{
    color: #264390;
}

.ux-panel-header-btns .x-btn-pressed .x-btn-text
{
    color: #264390;
}

.ux-panel-header-btns .x-btn-over .x-btn-left
{
    background-position: 0 -45px;
}

.ux-panel-header-btns .x-btn-over .x-btn-right
{
    background-position: 0 -60px;
}

.ux-panel-header-btns .x-btn-over .x-btn-center
{
    background-position: 0 -75px;
}

.ux-panel-header-btns .x-btn-pressed .x-btn-left
{
    background-position: 0 -90px;
}

.ux-panel-header-btns .x-btn-pressed .x-btn-right
{
    background-position: 0 -105px;
}
.ux-panel-header-btns .x-btn-pressed .x-btn-center
{
    background-position: 0 -120px;
}

.ux-panel-header-btns .x-btn-click .x-btn-left
{
    background-position: 0 -90px;
}

.ux-panel-header-btns .x-btn-click .x-btn-right
{
    background-position: 0 -105px;
}
.ux-panel-header-btns .x-btn-click .x-btn-center
{
    background-position: 0 -120px;
}

.ux-panel-header-btns .x-btn-menu-active .x-btn-left
{
    background-position: 0 -90px;
}

.ux-panel-header-btns .x-btn-menu-active .x-btn-right
{
    background-position: 0 -105px;
}
.ux-panel-header-btns .x-btn-menu-active .x-btn-center
{
    background-position: 0 -120px;
}
.ext-ie6 .ux-panel-header-btns-ct
{
    width: 1px;
}

/* ExtFileUpload styles */
.fileuploader_widget
{
    padding-left:0px;
    padding-right:0px;
    padding-top:2px;
    padding-bottom:2px;
}

.job_wiz_heading
{
    font-weight: bold;
    font-size: 10pt;
}

/* Fix for BUG #933. Highlighting in treePanel not correct */
.x-tree-root-ct 
{
    float: left;
}

.x-tree-node img.fldr_cat, .x-tree-node-collapsed img.fldr_cat{
    background-image: url("/static/images/category.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

.x-tree-node-expanded img.fldr_cat {
    background-image: url("/static/images/category.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}


/* alert and export windows */

.x-window-plain.newStyle,
.x-window-plain.newAlert {
    background: #ffffff;
    box-shadow: 0 0 3px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.6);

}

.x-window.black-window-active.active-window.newStyle{
    border: 0px;
    background-color: #ffffff;
}

.x-window.black-window-active.active-window.newStyle .x-window-header{
    color: #31373d;
}

.newStyle .x-window-tl {
    margin-top: 5px;
}

.newStyle .x-form-check-wrap{
    padding-bottom: 8px;
}

.newStyle .x-fieldset{
    padding-top: 6px;
    padding-bottom: 6px;
    border: 0px;
}

.newStyle .x-window-header{
    height: 10px;
    color: #31373d;
    margin-bottom: 8px;
}

.newAlert .x-window-tl,
.newAlert .x-window-tc,
.newAlert .x-window-tr,
.newAlert .x-window-ml,
.newAlert .x-window-mr,
.newAlert .x-window-bl,
.newAlert .x-window-br,
.newAlert .x-window-bc {
    background-image: none;
}


.newStyle .x-window-bl,
.newAlert .x-window-bl {
    margin-top: 15px;

}

.newStyle .x-window-bwrap,
.newAlert .x-window-bwrap {
    position: relative;
    bottom: 0;
    left: 0;
}

.newAlert .x-window-br {
    padding: 5px 0px 5px 50px;
}

.newStyle .x-window-mc,
.newStyle .x-window,
.newAlert .x-window-mc,
.newAlert .x-border-layout-ct {
    background-color: #ffffff !important;

}

.newStyle .x-window-header {
    font: 16px/15px normal;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 0 0 10px 10px;
    color: #31373d;
    overflow: hidden;
    max-height: 50px;
}
.newStyle .x-window-mc,
.newStyle .x-window-plain,
.newStyle .x-window-body{
    border: 0px;
}

.newStyle .ext-el-mask{
    background-color: transparent;
}

.newAlert .msg_dlg_title_text {
    font: 16px/15px normal;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 0 0 10px 32px;
    color: #d60024;
    overflow: hidden;
    max-height: 50px;
}

.newInfo .msg_dlg_title_text {
    color: #6E90BA;
}
.newConfirm .msg_dlg_title_text {
    color: #AFE38A;
}
.newWarn .msg_dlg_title_text {
    color: #F5972C;
}

/*
question  #237f00
error     #a50000   alert
info      #0271c7
attention #CA8E00
 */

.newAlert .msg_dlg_icon {
    background: url(/static/images/icon-messages.png) no-repeat;
    background-position: -32px 0;
    margin-left: 15px;
}

.newInfo .msg_dlg_icon {
    background: url(/static/images/icon-messages.png) no-repeat;
    background-position: -64px 0;
    margin-left: 15px;
}
.newConfirm .msg_dlg_icon {
    background: url(/static/images/icon-messages.png) no-repeat;
    background-position: 0px 0;
    margin-left: 15px;
}
.newWarn .msg_dlg_icon {
    background: url(/static/images/icon-messages.png) no-repeat;
    background-position: -96px 0;
    margin-left: 15px;
}



.newAlert div.msg_dlg_main_text {
    padding: 0 0 0 32px;
    max-height: 306px !important;
    margin-bottom: 15px;
    overflow: auto;
}

.msg_dlg_main_additional {
    padding: 0 0 0 32px;
    font: 13px/134% normal;
    overflow: auto;
    font-family: "Segoe UI", tahoma, arial, verdana, sans-serif;
}

.msg_dlg_detail_btn .x-btn-tl,
.msg_dlg_detail_btn .x-btn-tr,
.msg_dlg_detail_btn .x-btn-tc,
.msg_dlg_detail_btn .x-btn-ml,
.msg_dlg_detail_btn .x-btn-mr,
.msg_dlg_detail_btn .x-btn-mc,
.msg_dlg_detail_btn .x-btn-bl,
.msg_dlg_detail_btn .x-btn-br,
.msg_dlg_detail_btn .x-btn-bc,
.msg_dlg_no_btn .x-btn-tl,
.msg_dlg_no_btn .x-btn-tr,
.msg_dlg_no_btn .x-btn-tc,
.msg_dlg_no_btn .x-btn-ml,
.msg_dlg_no_btn .x-btn-mr,
.msg_dlg_no_btn .x-btn-mc,
.msg_dlg_no_btn .x-btn-bl,
.msg_dlg_no_btn .x-btn-br,
.msg_dlg_no_btn .x-btn-bc,
.msg_dlg_ok_btn .x-btn-tl,
.msg_dlg_ok_btn .x-btn-tr,
.msg_dlg_ok_btn .x-btn-tc,
.msg_dlg_ok_btn .x-btn-ml,
.msg_dlg_ok_btn .x-btn-mr,
.msg_dlg_ok_btn .x-btn-mc,
.msg_dlg_ok_btn .x-btn-bl,
.msg_dlg_ok_btn .x-btn-br,
.msg_dlg_ok_btn .x-btn-bc {
    background-image: none;
}

.x-window-plain.newStyle .x-btn button,
.x-window-plain.newAlert .x-btn button {
    color: #ffffff;
}

.newStyle .x-plain .x-panel-btns{
    width: 484px !important;
}

.newStyle .x-btn,
.newAlert .msg_dlg_no_btn,
.newAlert .msg_dlg_ok_btn,
.newAlert .msg_dlg_detail_btn {
    border: #EAEAEA 1px solid;
    background: #231F20;
    /*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNhNjM5YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYTRkN2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);*/
    /*background: -moz-linear-gradient(top,  #3a639b 0%, #2a4d7a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a639b), color-stop(100%,#2a4d7a));
    background: -webkit-linear-gradient(top,  #3a639b 0%,#2a4d7a 100%);
    background: -o-linear-gradient(top,  #3a639b 0%,#2a4d7a 100%);
    background: -ms-linear-gradient(top,  #3a639b 0%,#2a4d7a 100%);
    background: linear-gradient(top,  #3a639b 0%,#2a4d7a 100%);*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a639b', endColorstr='#2a4d7a',GradientType=0 );*/
}

.newStyle .x-btn-noicon button.x-btn-text,
.x-window.black-window-active.active-window.newStyle .x-btn,
.newAlert .x-btn-noicon button.x-btn-text {
    padding: 0 10px 3px;
    height: 22px;
    margin: 0px;
}

.newStyle .x-btn.x-btn-over,
.x-window.black-window-active.active-window.newStyle .x-btn.x-btn-over,
.newAlert .msg_dlg_no_btn.x-btn-over,
.newAlert .msg_dlg_ok_btn.x-btn-over,
.newAlert .msg_dlg_detail_btn.x-btn-over {
    border: #EAEAEA 1px solid;
    background: #ffffff;
    filter: none;
}

.newStyle .x-btn.x-btn-over button,
.x-window.black-window-active.active-window.newStyle .x-btn.x-btn-over button,
.newAlert .msg_dlg_no_btn.x-btn-over button,
.newAlert .msg_dlg_ok_btn.x-btn-over button,
.newAlert .msg_dlg_detail_btn.x-btn-over button {
    color: #3b659e;
}

.newStyle .x-panel-btns td.x-toolbar-cell,
.newAlert .x-panel-btns td.x-toolbar-cell {
    padding-right: 10px;
    padding-left:  10px;
}

.newStyle .x-form-textarea.msg_dlg_detail_text,
.newAlert .x-form-textarea.msg_dlg_detail_text {
    max-height: 120px;
    color: #717171;
    background-image: none;
    border: 0;
    width: 358px !important;
    padding: 0 0px 0px 32px;
    overflow: auto;

}

.newStyle .x-btn.x-btn-noicon .x-btn-text,
.newAlert .x-btn.x-btn-noicon .x-btn-text  {
    height: 24px; line-height: 24px;
}


.newAlert .x-window-header {
    height: 10px;
}

.acs-toolbar-title {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Breadcrumb separator — SVG chevron from shared icon library
   (Phase 6 mask-image pattern). Painted in --acs-text-tertiary so the
   separator recedes against the linked breadcrumb segments. */
.bread_crumbs_separator {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    background: none;
    background-color: var(--acs-text-tertiary, #8c95a0);
    -webkit-mask-image: var(--icon-chevron-right);
            mask-image: var(--icon-chevron-right);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

/*Fix for ExtJs icons height and align*/

.x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-icon, .x-tree-node-leaf .x-tree-node-icon {
	height: 16px;
    vertical-align: middle;
}

.x-tree-node .x-tree-node-inline-icon{
    width:16px;
}

.x-tree-node .question-submit-img, .x-tree-node .question-draft-img,  .x-tree-node .question-final-img, .x-tree-node .question-answered-img, .x-tree-node .question-publish-img{
    background-position:0;
}

.x-tree-node .track_item{
    width:16px;
}

.group_remove_img{
    width:14px;
    height:14px;
}

.newUpdate .x-window .x-window-header{
    color: #1a1a1c;
}

.newUpdate .black-window .active-window{
    border: 0px;
    background-color: #ffffff;
}

.newUpdate .x-window .x-window-mc{
    background-color: #ffffff;
}

.metadata-filters .add-filter-btn.x-btn.x-btn-icon,
.metadata-filters .remove-filter-btn.x-btn.x-btn-icon,
.search-in-folder .browse-btn,
#save-search-form .search-in-folder .browse-btn,
.metadata-filters .add-empty-btn {
    background: transparent !important;
    border: none;
}

/* ============================================================================
   Metadata Filters fieldset — AffiniTag feature affordance.
   The metadata-filters block is the only place where AffiniTag (the
   feature-tagging product) surfaces in the shell. Mark it as such with:
     - A subtle red (`--acs-tag-red`) accent stripe down the left edge,
       so the block is visually identified as "this is AffiniTag" without
       turning the whole surface red.
     - A small "AffiniTag" pill in the top-right of the legend row with
       the tag SVG glyph — like a feature badge.
   The fieldset's themed legend banner (uppercase 11px secondary text
   from ext-acs-theme.css:2104) stays untouched.
   ============================================================================ */
.x-fieldset.metadata-filters {
    position: relative !important;
    border-left: 3px solid var(--acs-tag-red, #FE235D) !important;
    padding-left: 12px !important;
    margin-left: 0 !important;
}

/* AffiniTag pill — sits on the legend row, opposite the "Metadata Filters"
   label. The pill is a `<span class="metadata-affinitag-pill">` injected
   on render by ext-acs-search-metadata-filter.js. <fieldset> has special
   layout (legend overlaps the top border + box-shadow region), so we
   position the pill via the legend's float-right rather than fighting
   the fieldset's positioning. */
.x-fieldset.metadata-filters > legend {
    position: relative !important;
}
.metadata-affinitag-pill {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    background-color: rgba(254, 35, 93, 0.08) !important;
    color: var(--acs-tag-red, #FE235D) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    border: 1px solid rgba(254, 35, 93, 0.22) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
.metadata-affinitag-pill::before {
    content: '' !important;
    width: 11px !important;
    height: 11px !important;
    flex-shrink: 0 !important;
    -webkit-mask-image: var(--icon-tag) !important;
            mask-image: var(--icon-tag) !important;
    -webkit-mask-size: 11px 11px !important;
            mask-size: 11px 11px !important;
    -webkit-mask-position: center !important;
            mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    background-color: var(--acs-tag-red, #FE235D) !important;
}

.search-in-folder .x-box-inner {
    height: 100% !important;
}

.metadata-filters .add-empty-btn {
    /* 26x32 to match `.add-filter-btn` height (32px input height) so the
       Region / Document Type +-button vertically centres with the input
       in dialog metadata-filter rows. Polish-pass alignment. */
    width: 26px;
    height: 32px;
    cursor: default;
}

/* Save Search dialog — Title input should not extend past the right
   edge of the Query input (which lives inside `.search-options-fieldset`
   at 6px horizontal padding from the page-wide `.acs-startpage .x-fieldset`
   rule). Title sits outside the fieldset, so without this rule it
   renders 12px wider than Query. Add matching 6px horizontal padding
   to Title's row so both inputs land on the same right edge. */
#save-search-form .x-form-item:has(.acs-ss-title) {
    padding: 0 6px !important;
    box-sizing: border-box !important;
}

/* Save Search dialog — extra space above and below the row that owns
   the chkTitles ("Search Table of Contents Only") checkbox. ExtJS lifts
   the checkbox into a wrapper that includes the surrounding controls,
   so the `:has()` match adds breathing room between the "Search for"
   radio group above and the AdvancedSearchOptions content below — the
   visual gap the old accordion layout used to provide. */
#save-search-form .x-form-item:has(.acs-chk-titles) {
    margin-top: 12px !important;
    margin-bottom: 20px !important;
}

/* Save Search dialog — vertically center the icon inside the row-action
   buttons (.add-filter-btn / .remove-filter-btn / .add-empty-btn /
   .browse-btn). Their outer container is 32px tall to match the input
   row, but the inner ExtJS `<button>` keeps its native ~16-20px height
   pinned at offsetTop:3-4 (visually top-anchored). Center the inner
   button so the icon aligns with the input center. */
#save-search-form .add-filter-btn,
#save-search-form .remove-filter-btn,
#save-search-form .add-empty-btn,
#save-search-form .browse-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* fix: grid column headers and cells are not aligned */
.search-books-grid .x-grid3 .x-grid3-body .x-grid3-row td,
.search-results-grid .x-grid3 .x-grid3-body .x-grid3-row td,
.basic-view-grid .x-grid3 .x-grid3-body .x-grid3-row td,
.common-grid-panel .x-grid3 .x-grid3-body .x-grid3-row td {
    padding-right: 2px;
}


.folder-filter-fieldset {
    max-height: 300px;
    overflow: auto;
}

.grid-anchor-cell {
    color: #385F95;
    text-decoration:none;
}

.search-for .x-column-inner {
    width: 100% !important;
}

.search-for .x-column {
    width: calc(100% / 2) !important;
}

.search-for .x-form-element .x-form-radio {
    position: absolute;
    top: 10px;
}

.search-for .x-form-element .x-form-cb-label {
    display: inline-block;
    width: 100%;
    padding: 5px 15px;
    box-sizing: border-box;
    margin: 0;
}

.search-books-grid .x-panel-bbar .x-toolbarm,
.search-results-grid .x-panel-tbar .x-toolbar,
.search-results-grid .x-panel-bbar .x-toolbar {
    border-radius: 0;
}

.border-none {
    border: none !important;
}

/* Task modal dialog */

.flex-form-items {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-form-items input,
.flex-form-items div.x-html-editor-wrap {
    flex: 1;
}

.flex-form-items .x-html-editor-wrap iframe {
    width: 100%;
    height: 100%;
}

.flex-form-items .x-form-field-wrap {
    display: flex;
    flex: 1;
    width: auto !important;
}

.flex-form-items .x-form-field-wrap input {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    width: auto !important;
}

.flex-form-items .x-form-field-wrap img {
    right: 0;
}

.flex-form-items > .x-panel {
    flex: 1;
}

.flex-form-items .x-grid3-body,
.flex-form-items .x-grid3-row,
.flex-form-items .x-grid3-row-table {
    width: 100% !important;
}

.flex-form-items .x-grid3-td-name {
    width: auto !important;
}

.flex-form-items .x-grid3-body {
    min-height: 23px;
    height: 150px;
    max-height: 200px;
    overflow: auto;
}

.grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 20px;
}

.align-flex-start {
    align-items: flex-start;
}

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

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

.full-width {
    width: 100% !important;
}

.white-space-nowrap {
    white-space: nowrap;
}

#info_panel .x-fieldset-body {
    display: grid;
    grid-template-columns: 80px 1fr;
    padding: 0 10px;
    grid-gap: 0 10px;
    align-items: center;
}

.status-container .x-panel,
.status-container .x-panel-body  {
    width: 100% !important;
}

#info_panel .x-fieldset-body .x-form-item label {
    width: auto !important;
}

#info_panel .x-fieldset-body .x-form-item .x-form-element {
    padding-left: 0 !important;
}

#info_panel .x-fieldset-body .x-form-item textarea {
    width: 100% !important;
}

.parent-task {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-gap: 0 10px;
}

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

/* END: Task modal dialog */


.search-btn {
    margin: 5px 0 5px 5px;
    display: inline-table;
    background: #0e8bb0;
    border-color: #0a6f8c;
}

.search-btn.x-btn.x-btn-over {
    background: #00aeef;
    border-color: #0a6f8c;
}

.search-btn, .reset-btn {
    padding: 2px;
}

.search-for .x-item-disabled * {
    color: #595959 !important;
}

.search_panel form {
    overflow-x: hidden !important;
}

.search_panel .x-form-clear-trigger {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.meta-description-grid .x-grid3-hd-inner {
    white-space: normal;
}

/* =============================================
   SPLIT BARS - one look for every splitter (STYLING_PATTERNS 13)
   - The 1px bar is the line between the two panels: no gap
   - 13px grab area centred on it, over both panels
   - Grip pill in the middle; hover tints line and grip
   ============================================= */

/* ExtJS reserves the element's offsetWidth (or offsetHeight) between the
   panels, so the element stays 1px and the grab area is its ::before. */
.x-layout-split-west,
.x-layout-split-east,
.x-layout-split-north,
.x-layout-split-south {
    position: absolute !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: var(--acs-border-input, #dce2ef) !important;
    background-image: none !important;
    border: none !important;
    z-index: 5 !important;
    transition: background-color 0.15s, box-shadow 0.15s !important;
}

.x-layout-split-west,
.x-layout-split-east {
    width: 1px !important;
    cursor: ew-resize !important;
}

.x-layout-split-north,
.x-layout-split-south {
    height: 1px !important;
    cursor: ns-resize !important;
}

.x-layout-split-west::before,
.x-layout-split-east::before,
.x-layout-split-north::before,
.x-layout-split-south::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    background: transparent !important;
}

.x-layout-split-west::before,
.x-layout-split-east::before {
    top: 0 !important;
    bottom: 0 !important;
    left: -6px !important;
    width: 13px !important;
}

.x-layout-split-north::before,
.x-layout-split-south::before {
    left: 0 !important;
    right: 0 !important;
    top: -6px !important;
    height: 13px !important;
}

.x-layout-split-west::after,
.x-layout-split-east::after,
.x-layout-split-north::after,
.x-layout-split-south::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 1px !important;
    background: var(--acs-text-tertiary, #8c95a0) !important;
    transition: background 0.15s !important;
}

.x-layout-split-west::after,
.x-layout-split-east::after {
    width: 2px !important;
    height: 20px !important;
}

.x-layout-split-north::after,
.x-layout-split-south::after {
    width: 20px !important;
    height: 2px !important;
}

/* The 1px bar plus a 1px shadow each side reads as a 3px line. */
.x-layout-split-west:hover,
.x-layout-split-east:hover,
.x-layout-split-north:hover,
.x-layout-split-south:hover {
    background: rgba(0, 174, 239, 0.3) !important;
    box-shadow: 0 0 0 1px rgba(0, 174, 239, 0.3) !important;
}

.x-layout-split-west:hover::after,
.x-layout-split-east:hover::after,
.x-layout-split-north:hover::after,
.x-layout-split-south:hover::after {
    background: var(--acs-brand-cyan, #00aeef) !important;
}

/* The collapse button below takes the grip's place on hover. */
.x-layout-split-west:has(> .x-layout-mini):hover::after,
.x-layout-split-east:has(> .x-layout-mini):hover::after {
    opacity: 0 !important;
}

/* Drag marker: the hover line, not the theme's grey block. ExtJS sizes the
   proxy to the 1px bar and clips it, so let the line overflow. */
.x-splitbar-proxy-h,
.x-splitbar-proxy-v {
    background: transparent !important;
    overflow: visible !important;
}

.x-splitbar-proxy-h::before,
.x-splitbar-proxy-v::before {
    content: '';
    position: absolute;
    background: rgba(0, 174, 239, 0.3);
}

.x-splitbar-proxy-h::before {
    top: 0;
    bottom: 0;
    left: -1px;
    width: 3px;
}

.x-splitbar-proxy-v::before {
    left: 0;
    right: 0;
    top: -1px;
    height: 3px;
}

/* Collapse button: hidden by default, appears on hover */
.x-layout-split-west .x-layout-mini,
.x-layout-split-east .x-layout-mini {
    opacity: 0 !important;
    transition: opacity 0.15s !important;
    background: #1c2127 !important;
    background-image: none !important;
    width: 14px !important;
    height: 32px !important;
    top: 50% !important;
    margin-top: -16px !important;
}

.x-layout-split-west .x-layout-mini {
    border-radius: 0 4px 4px 0 !important;
    left: 0 !important;
}

.x-layout-split-east .x-layout-mini {
    border-radius: 4px 0 0 4px !important;
    right: 0 !important;
    left: auto !important;
}

.x-layout-split-west:hover .x-layout-mini,
.x-layout-split-west .x-layout-mini:hover,
.x-layout-split-east:hover .x-layout-mini,
.x-layout-split-east .x-layout-mini:hover {
    opacity: 1 !important;
}

/* CSS arrow for collapse button */
.x-layout-split-west .x-layout-mini::before,
.x-layout-split-east .x-layout-mini::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    padding: 3px !important;
    margin-top: -4px !important;
}

/* West arrow points left (collapse) */
.x-layout-split-west .x-layout-mini::before {
    margin-left: -2px !important;
    transform: rotate(135deg) !important;
}

/* East arrow points right (collapse) */
.x-layout-split-east .x-layout-mini::before {
    margin-left: -4px !important;
    transform: rotate(-45deg) !important;
}

/* =============================================
   COLLAPSED STATE - West panel
   ============================================= */

.x-layout-cmini-west {
    position: absolute !important;
    width: 18px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-right: none !important;
    padding: 0 !important;
    z-index: 20 !important;
}

.x-layout-cmini-west::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 2px !important;
    background: #DCE2EF !important;
    transition: background 0.15s, width 0.15s, box-shadow 0.15s !important;
}

.x-layout-cmini-west:hover::before {
    background: rgba(0, 174, 239, 0.6) !important;
    width: 4px !important;
    box-shadow: 0 0 8px rgba(0, 174, 239, 0.4) !important;
}

.x-layout-cmini-west .x-layout-mini {
    opacity: 1 !important;
    background: #1c2127 !important;
    background-image: none !important;
    border-radius: 0 4px 4px 0 !important;
    width: 14px !important;
    height: 32px !important;
    top: 50% !important;
    margin-top: -16px !important;
    left: 2px !important;
    transition: opacity 0.15s !important;
}

.x-layout-cmini-west .x-layout-mini::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    padding: 3px !important;
    margin-top: -4px !important;
    margin-left: -5px !important;
    transform: rotate(-45deg) !important;
}

/* =============================================
   COLLAPSED STATE - East panel
   ============================================= */

.x-layout-cmini-east {
    position: absolute !important;
    width: 18px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-left: none !important;
    padding: 0 !important;
    z-index: 20 !important;
}

.x-layout-cmini-east::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 2px !important;
    background: #DCE2EF !important;
    transition: background 0.15s, width 0.15s, box-shadow 0.15s !important;
}

.x-layout-cmini-east:hover::before {
    background: rgba(0, 174, 239, 0.6) !important;
    width: 4px !important;
    box-shadow: 0 0 8px rgba(0, 174, 239, 0.4) !important;
}

.x-layout-cmini-east .x-layout-mini,
.x-layout-cmini-east .x-layout-mini-east {
    opacity: 1 !important;
    background: #1c2127 !important;
    background-image: none !important;
    border-radius: 4px 0 0 4px !important;
    width: 14px !important;
    height: 32px !important;
    top: 50% !important;
    margin-top: -16px !important;
    right: 2px !important;
    left: auto !important;
    transition: opacity 0.15s !important;
}

.x-layout-cmini-east .x-layout-mini::before,
.x-layout-cmini-east .x-layout-mini-east::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    padding: 3px !important;
    margin-top: -4px !important;
    margin-left: -1px !important;
    transform: rotate(135deg) !important;
}