/*
    FilaZulu's (FileIndexerWebApp's) own styles, compiled into filazulu.x.css.
    The styles every Zulu shares are in Styles/XZCommon/xzCommon.scss.
*/

.imageAction
{
    border:2px solid white;
    cursor:pointer;
}

.imageAction:hover
{
    border:2px solid red;
}


/*
    The legacy dialog classes, which jobtracker's ClientDialog.js and
    ClientFunctions.js still emit without a "uiv2" prefix.
*/
.dialogOuter{
    z-index:400;
    background-color:#ccd6e0;
    position:absolute;
    left:10px;
    top:2em;
    -moz-box-shadow: 3px 3px 4px #878787;
    -webkit-box-shadow: 3px 3px 4px #878787;
    box-shadow: 3px 3px 4px #878787;
}

.dialogBox
{
    background-color:#F7F7F7;
    color:#003366;
    border:solid 2px #A5A5A5;
    border-top-color:#ECECEC;
    border-left-color:#ECECEC;
}

.dialogHeader
{
    background:#369 url(../graphics/menu-bg.png) repeat-x;
    border:solid 1px #ccd6e0;
    color:white;
    cursor:pointer;
    font-weight:bold;
    padding-left:8px;
    white-space:nowrap;
    vertical-align:middle;
}

.disabledDialogBox
{
    background-color:#D8DBDD;
    color:#003366;
    border:solid 2px #A5A5A5;
    border-top-color:#ECECEC;
    border-left-color:#ECECEC;
}

.disabledDialogHeader
{
    background-color:#A4B5C6;
    border:solid 1px #F7F7F7;
    color:white;
    cursor:pointer;
    font-weight:bold;
    padding-left:8px;
    white-space:nowrap;
    vertical-align:middle;
}

.dialogTitle
{
    float:left;
    font-size:120%;
    font-weight:bold;
}

.imgIndexMediaLink {
    color: #878787;
    cursor: pointer;
    font-size: 85%;
    padding: .2em;
    text-decoration: underline;
}

.imgIndexMediaLink:hover
{
    color:red;
}


.v2MenuItem.removeClickUnderline{
    text-decoration: inherit;
}

.removeClickUnderline{
    text-decoration:inherit;
}


.currentlyPlayingCellIndicator {
    visibility:hidden;
}
.linkedCellHover .currentlyPlayingCellIndicator {
    visibility:visible;
    color:red;
}
.currentlyPlayingCellIndicator[data-currentlyplaying="1"]{
    visibility:visible
}

.currentlyPlayingCellIndicator:not([data-currentlyplaying="1"]) .invisibleIfNotCurrent{
    display:none;
}
.currentlyPlayingCellIndicator[data-currentlyplaying="1"] .invisibleIfCurrent{
    display:none;
}


.personContentTypeFilter>span{
    border: 2px solid #b8b8b8;
    padding:0.4em 0.5em;
}

#dynamicDialog .uiv2dialogContent .personContentTypeFilter  table{
    text-align:center;
    width:inherit;
    background-color:white;
}

.fdxExpression{
    border:2px solid gray;
    display:inline-block;
    background-color:white;
    margin:2px;
}

.fdxSubExpression{
    display:inline-block;
    padding:2px;
    margin:2px;
    background-color:white;
    cursor:pointer;
}

#imgPreview{
    max-width:100%;
}

.uiv2dialogContent table.nonFullWidthTable{
    width:initial;
}


.clsSlideshowMenu td.contextMenuRow{
    line-height: 30px
}
.clsSlideshowMenu .contextMenuRow span.FontAwesomeIcon,
        .clsSlideshowMenu .contextMenuRow span.IoniconIcon{
    line-height: 30px;
    padding-right:.5em;
    font-size:20px;
}

.clsSlideshowMenu .menuCheckMarkable,
        .clsSlideshowMenu .menuSubmenuChevron {
    text-align:right;
}


.reportTable.compressedTable td {
    border-bottom: 1px solid #E2D8ED;
}

/*
    Cell padding classes for report tables, named and sized after jobtracker's
    padding atomic classes (None, XXSmall 2px, XSmall 4px, Small 6px, Medium
    8px). Those atomic classes cannot pad a report table cell: jobtracker's
    ".reportTable td" sets the padding and outranks a lone class, so each of
    these names the td too. A table that wants tighter cells (the compressed
    pick lists) puts them on its cells and headers.
*/
.reportTable td.cellPaddingTopNone { padding-top: 0; }
.reportTable td.cellPaddingTopXXSmall { padding-top: 2px; }
.reportTable td.cellPaddingTopXSmall { padding-top: 4px; }
.reportTable td.cellPaddingTopSmall { padding-top: 6px; }
.reportTable td.cellPaddingTopMedium { padding-top: 8px; }

.reportTable td.cellPaddingBottomNone { padding-bottom: 0; }
.reportTable td.cellPaddingBottomXXSmall { padding-bottom: 2px; }
.reportTable td.cellPaddingBottomXSmall { padding-bottom: 4px; }
.reportTable td.cellPaddingBottomSmall { padding-bottom: 6px; }
.reportTable td.cellPaddingBottomMedium { padding-bottom: 8px; }

.reportTable td.cellPaddingLeftNone { padding-left: 0; }
.reportTable td.cellPaddingLeftXXSmall { padding-left: 2px; }
.reportTable td.cellPaddingLeftXSmall { padding-left: 4px; }
.reportTable td.cellPaddingLeftSmall { padding-left: 6px; }
.reportTable td.cellPaddingLeftMedium { padding-left: 8px; }

.reportTable td.cellPaddingRightNone { padding-right: 0; }
.reportTable td.cellPaddingRightXXSmall { padding-right: 2px; }
.reportTable td.cellPaddingRightXSmall { padding-right: 4px; }
.reportTable td.cellPaddingRightSmall { padding-right: 6px; }
.reportTable td.cellPaddingRightMedium { padding-right: 8px; }

.reportTable td.narrowWrappedCell {
    white-space: pre-wrap;
    max-width: 12em;
    padding:4px;
}

.reportTable td.headerCol div.narrowWrappedCell {
    max-width: 12em;
    white-space: pre-wrap;
}

.breakAll{
    word-break:break-all;
}


.dialogImageNavButton{
    width:2.5em;
    height:20em;
}

table.clsEpNumTable{
    border-collapse: collapse;
    width:100%;
}

table.clsEpNumTable td {
    border: none;
    padding: 0;
}

table.clsEpNumTable td:last-of-type {
    width: 0.9em;
}


.bigListTable {
    border: 2px solid gray;
    width: 100%;
    border-collapse: collapse;
}

.bigListTable tr td {
    padding: 0;
}

.bigListTable button {
    padding-top: 0;
    padding-bottom: 0;
}

.bigListTable tr.downButtonRow td,
.bigListTable tr.upButtonRow td {
    text-align: center;
    text-decoration: none;
    font-size: 90%;
    padding: 0;
}
.bigListTable tr.downButtonRow td button span,
.bigListTable tr.upButtonRow td button span {
    line-height: 0.75em;
}

.bigListTable tr.upButtonRow td {
    border-bottom: 1px solid #D8DBDD;
}
.bigListTable tr.downButtonRow td {
    border-top: 1px solid #D8DBDD;
}

.bigListTable tr td.bigListDataCell {
    padding: .25em .9em;
    font-size: 90%;
    cursor: pointer;
}

.bigListTable tr td.bigListDataCell:hover {
    background-color: aqua;
}
.bigListTable tr td.highlightRow.bigListDataCell:hover {
    background-color: mediumaquamarine;
}

.invisible{
    visibility: hidden
}


/*
    A section header's action button written as a link, so that it can be
    middle-clicked into a new tab, but looking just like the <button>s beside
    it. It gets the button rules (the browser's and uiv2's) that a link misses,
    and loses the link colour and underline.
*/
.pageSeparatorRow a.fontActionButton.clsFontActionButtonLink {
    display: inline-block;
    box-sizing: border-box;
    margin: 2px;
    border-radius: 4px;
    background-color: white;
    color: #878787;
    text-decoration: none;
    text-align: center;
    line-height: 1.15;
}

.pageSeparatorRow a.fontActionButton.clsFontActionButtonLink:hover {
    color: #5D5D5D;
}


/*
    The Edit Faces page (WpFileFaces), after JobTracker's Edit Quote page: a
    title bar across the top, a bar naming the file under it, the picture
    filling the rest of the window, and a toolbar down the right that collapses
    to its icons (clsFacesToolbarCollapsed, on the editor). FZFileFacesEditor
    moves everything down to just under the title bar, whatever its height, and
    the picture to just under the file bar.
*/
.clsToolStripContainer.dialogHeaderToolStrip,
.dialogHeaderToolStrip .clsToolStrip {
    background-color: white;
}

.dialogHeaderToolStrip .clsToolStrip {
    width: 100%;
}

/*
    The title bar's height on the Edit Quote page (CounterGo's
    dlgToolbarHeight), where the stylesheet FileIndexer shares with JobTracker
    leaves every toolstrip at 76px. Narrow windows keep that stylesheet's
    !important heights.
*/
.dialogHeaderToolStrip .clsToolStrip,
.dialogHeaderToolStrip .clsToolStrip td {
    height: 56px;
}

.clsFacesFileBar {
    position: fixed;
    left: 0;
    top: 56px;
    right: 159px;
    box-sizing: border-box;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #F7F7F7;
}

.clsFacesFileBar .clsFacesFileLabel {
    margin-right: 0.4em;
}

.clsFacesFileBar .clsFacesFileInfoButton {
    margin-left: 0.2em;
}

/*
    The status line takes helpText's look, but stays on the one line, since
    FZFileFacesEditor places the picture by the bar's height.
*/
.clsFacesFileBar .clsFacesStatus {
    margin-left: 1.5em;
    white-space: nowrap;
}

/*
    The bell over the Save button's icon while there are unsaved changes, as on
    CounterGo's Edit Price List page (priceListUnsavedChangesIcon).
*/
.clsFacesUnsavedChangesIcon {
    color: #E37200;
    position: absolute;
    margin-top: -15px;
    margin-left: -40px;
    /* add a 1 pixel white edge around the icon */
    text-shadow: 0 0 1px white;
}

.clsFacesEditorCanvas {
    position: fixed;
    left: 0;
    top: 86px;
    right: 159px;
    bottom: 0;
}

.clsFacesToolbarCollapsed .clsFacesFileBar,
.clsFacesToolbarCollapsed .clsFacesEditorCanvas {
    right: 56px;
}

.clsFacesRightToolbar {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 159px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 3;
    padding-bottom: 8px;
    background-color: #F7F7F7;
    border-left: 1px solid #F7F7F7;
    box-shadow: -3px 0px 6px rgba(0,0,0,0.25);
}

.clsFacesToolbarCollapsed .clsFacesRightToolbar {
    width: 56px;
}

/*
    The arrows that collapse and expand the toolbar, under its other items as on
    the Edit Quote page (whose arrows are green): whichever applies shows.
*/
button.fontActionButton.clsFacesToolbarCollapso,
button.fontActionButton.clsFacesToolbarExpando {
    display: block;
    margin: 8px 8px 0 8px;
    border: 1px solid transparent;
    background: none;
    color: #397CB2;
    cursor: pointer;
}

button.fontActionButton.clsFacesToolbarCollapso:hover,
button.fontActionButton.clsFacesToolbarExpando:hover {
    color: #397CB2;
    border-color: #397CB2;
}

button.fontActionButton.clsFacesToolbarExpando,
.clsFacesToolbarCollapsed button.fontActionButton.clsFacesToolbarCollapso {
    display: none;
}

.clsFacesToolbarCollapsed button.fontActionButton.clsFacesToolbarExpando {
    display: block;
}

/*
    What shows only one way round: the people panel when expanded, and the
    People button that opens it as a dialog when collapsed.
*/
.clsFacesToolbarCollapsed .clsFacesExpandedOnly,
button.fontActionButton.clsFacesToolbarButton.clsFacesCollapsedOnly {
    display: none;
}

.clsFacesToolbarCollapsed
        button.fontActionButton.clsFacesToolbarButton.clsFacesCollapsedOnly {
    display: block;
}

button.fontActionButton.clsFacesToolbarButton {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 16px);
    height: 40px;
    margin: 8px 8px 0 8px;
    padding: .2em .25em .2em 8px;
    text-align: left;
    border: 1px solid #83BA7B;
    border-radius: 3px;
    cursor: pointer;
}

button.fontActionButton.clsFacesToolbarButton:disabled {
    cursor: unset;
    opacity: 0.3;
}

button.fontActionButton.clsFacesToolbarButton > span {
    vertical-align: middle;
}

button.fontActionButton.clsFacesToolbarButton > span.FontAwesomeIcon {
    width: 1.25em;
    font-size: 20px;
}

button.fontActionButton.clsFacesToolbarButton > span.fontActionButtonText {
    margin-left: 0.25em;
    font-size: 14px;
}

/*
    Collapsed, a button is just its icon; its tooltip still names it.
*/
.clsFacesToolbarCollapsed button.fontActionButton.clsFacesToolbarButton {
    width: 40px;
    padding: 0;
    text-align: center;
}

.clsFacesToolbarCollapsed
        button.fontActionButton.clsFacesToolbarButton
        > span.fontActionButtonText {
    display: none;
}

/*
    A toggle that's on, such as Show Trained. The shorthand also clears the
    button's usual gradient, which would otherwise hide the colour.
*/
button.fontActionButton.clsFacesToolbarButton.clsEngagedButtonOption,
button.fontActionButton.clsFacesToolbarButton.clsEngagedButtonOption:hover {
    background: #386731;
    border-color: #386731;
    color: white;
}

.clsFacesToolbarSeparator {
    height: 8px;
}

.clsFacesPeopleTitle {
    margin: 8px 8px 0 8px;
    font-weight: bold;
}

.clsFacesPeople {
    margin: 0 8px;
}

.clsFacesPerson {
    margin-top: 8px;
}