/**
    Add new WebForms BEM CSS into this file instead of global.css.

    When adding classes or doing a merge, ensure that there are no
    conflicts with existing CSS class names. Class search should be
    case-insensitive.

    Class names should start with "lc" followed the class name in
    kebab case, all lowercase.

    For example: lc-test-component
*/

@layer app.global {
    /*****************************
        row layout
    *****************************/

    .lc-row-layout {
        display: flex;
        flex-direction: column;
        gap: 0.25em;
    }

    .lc-row-layout--align-items-start {
        align-items: flex-start;
    }

    /*****************************
        Horizontal Field Layout
    ******************************/

    .lc-horizontal-field-layout {
        display: flex;
        gap: 0.25em;
        padding: 0.125em 0;
    }

    .lc-horizontal-field-layout__label {
        flex: 0 0 12em;
    }

    .lc-horizontal-field-layout__data {
        flex-grow: 1;
    }

    /*************************
        Tabbed Layout
    **************************/

    .lc-tabbed-layout {
        --lc-tablayout-content-bg-color: #fff;
        --lc-tablayout-tablist-bg-color: var(--lc-profile_selectable-default-background-color);
        --lc-tablayout-active-tab-color: var(--lc-profile_selectable-selected-text-color);
        --lc-tablayout-active-tab-bg-color: var(--lc-profile_selectable-selected-background-color);
        --lc-tablayout-inactive-tab-bg-color: var(--lc-profile_selectable-default-background-color);
        --lc-tablayout-inactive-tab-color: var(--lc-profile_selectable-default-text-color);
        --lc-tablayout-tab-bg-color: inherit;
        --lc-tablayout-tablist-border-bottom-style: none;
        --lc-tablayout-tablist-border-bottom-color: unset;
        --lc-tablayout-tablist-border-bottom-width: none;
        --lc-tablayout-tab-header-bg-color: inherit;
        --lc-tablayout-tab-header-text-transform: uppercase;
        --lc-tablayout-tab-header-padding-tb: 14px;
        --lc-tablayout-tab-header-padding-rl: 40px;
        --lc-tablayout-tab-header-bg-image: inherit;

        display: flex;
    }

    .lc-tabbed-layout--record {
        --lc-tablayout-tab-bg-color: none;
        --lc-tablayout-tablist-bg-color: none;
        --lc-tablayout-tab-header-text-transform: none;
        --lc-tablayout-tablist-border-bottom-style: solid;
        --lc-tablayout-tablist-border-bottom-color: var(--lc-tablayout-active-tab-bg-color);
        --lc-tablayout-tablist-border-bottom-width: 2px;
        --lc-tablayout-tab-header-bg-color: var(--lc-tablayout-inactive-tab-bg-color);
        --lc-tablayout-tab-header-padding-tb: 6px;
        --lc-tablayout-tab-header-padding-rl: 20px;
    }

    .lc-tabbed-layout__tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3em;
        background-color: var(--lc-tablayout-tablist-bg-color);
        border-bottom:
            var(--lc-tablayout-tablist-border-bottom-width)
            var(--lc-tablayout-tablist-border-bottom-style)
            var(--lc-tablayout-tablist-border-bottom-color);
    }

    .lc-tabbed-layout__tabs--vertical {
        /** Width migrated from jQuery tabs to maintain visual consistency with previous version. **/
        width: 12em;
    }

    .lc-tabbed-layout__tab {
        border-bottom: 2px solid transparent;
        color: var(--lc-tablayout-inactive-tab-color);
        background-color: var(--lc-tablayout-tab-bg-color);
    }

    .lc-tabbed-layout__tab[data-tab="button"] {
    }

    .lc-tabbed-layout__tab:hover:where(:not(.lc-tabbed-layout__tab--focus, [data-dragging-block-hover])),
    .lc-tabbed-layout__tab--active {
        --lc-tablayout-tab-header-bg-color: var(--lc-tablayout-active-tab-bg-color);
        color: var(--lc-tablayout-active-tab-color);
        background-color: var(--lc-tablayout-active-tab-bg-color);
    }

    .lc-tabbed-layout__tab--focus {
        --lc-tablayout-tab-header-bg-color: var(--lc-tablayout-active-tab-bg-color);
        --lc-tablayout-focused-tab-color: var(--lc-tablayout-active-tab-color);
        border-bottom: 2px solid var(--lc-tablayout-tab-header-bg-color);
        color: var(--lc-tablayout-focused-tab-color);
        outline: Highlight solid 2px;
        outline: -webkit-focus-ring-color solid 2px;
    }

    .lc-tabbed-layout__tab--focus.lc-tabbed-layout__tab--wcag {
        --lc-tablayout-tab-header-bg-color: var(--lc-profile_selectable-focus-background-color);
        --lc-tablayout-focused-tab-color: var(--lc-profile_selectable-focus-color);
        --lc-tablayout-tab-header-bg-image: none;
    }

    .lc-tabbed-layout__tab_panel {
        display: none;
        padding: 0 0 1.818em 0;
        border-width: 0;
    }

    .lc-tabbed-layout__tab_panel--active {
        display: block;
    }

    .lc-test-tablayout__setting {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .lc-tabbed-layout[data-tab-position="top"] {
        flex-direction: column;
    }

    .lc-tabbed-layout[data-tab-position="bottom"] {
        flex-direction: column-reverse;
    }

    .lc-tabbed-layout[data-tab-position="left"] {
        flex-direction: row;
    }

    .lc-tabbed-layout[data-tab-position="right"] {
        flex-direction: row-reverse;
    }

    .lc-tabbed-layout__tabs[data-tab-position="right"],
    .lc-tabbed-layout__tabs[data-tab-position="left"] {
        flex-direction: column;
    }

    .lc-tabbed-layout__panels[data-tab-position="right"],
    .lc-tabbed-layout__panels[data-tab-position="left"] {
        flex-grow: 1;
    }

    /*****************************
        Designer Tab List
    *****************************/

    .lc-tabbed-layout__tab--design {
        display: flex;
    }

    .lc-tabbed-layout__tab-cmd {
        display: none;
        flex: 0 1 auto;
        align-items: start;
        padding-top: 4px;
        padding-right: 2px;
    }

    .lc-tabbed-layout__tab-cmd--active {
        display: inherit;
        visibility: hidden;
    }

    .lc-tabbed-layout__tab-cmd--show {
        visibility: visible;
    }

    /*****************************
        button tab
    *****************************/

    .lc-tabbed-header-button {
        color: inherit;
        background-color: var(--lc-tablayout-tab-header-bg-color);
        border: none;
        cursor: pointer;
        padding: var(--lc-tablayout-tab-header-padding-tb) var(--lc-tablayout-tab-header-padding-rl);
        font-weight: bold;
        font-size: 1em;
        text-transform: var(--lc-tablayout-tab-header-text-transform);
        letter-spacing: inherit;
        outline: none;
        background-image: var(--lc-tablayout-tab-header-bg-image);
    }

    .lc-tabbed-header-button--left-aligned-text {
        text-align: left;
    }

    /* Workaround to prevent condensed from affecting tabs in record inline. */
    .lc-comp-condensed .RecordView .lc-tabbed-layout .lc-tabbed-layout__tabs .lc-tabbed-layout__tab .lc-tabbed-header-button,
    .lc-comp-condensed .RecordEdit .lc-tabbed-layout .lc-tabbed-layout__tabs .lc-tabbed-layout__tab .lc-tabbed-header-button {
        padding: var(--lc-tablayout-tab-header-padding-tb) var(--lc-tablayout-tab-header-padding-rl);
    }

    /*****************************
        tab command button
    *****************************/

    .lc-tabbed-layout__tab-cmd-button {
        color: inherit;
        background-color: inherit;
        border: none;
        padding: 0.125em;
        cursor: pointer;
        font-weight: bold;
        width: 1em;
        height: 1em;
        font-size: 1em;
        outline: none;
    }

    /*****************************
        tablist command
    *****************************/

    .lc-tabbed-layout__commands {
        visibility: hidden;
    }

    .lc-tabbed-layout__commands--active {
        visibility: visible;
    }

    /*****************************
        tablist command button
    *****************************/

    .lc-tabbed-layout__tablist-cmd-button {
        color: inherit;
        background-color: inherit;
        border: none;
        padding: 0.125em;
        cursor: pointer;
        font-weight: bold;
        width: 1em;
        height: 1em;
        font-size: 1em;
    }

    .lc-bookbag-template {
    }

    .lc-bookbag-template--div {
        border: 1px solid;
        outline: 1px;
        padding: 0.313em;
        margin-bottom: 0.5em;
    }

    .lc-bookbag-template__heading {
        font-size: 110%;
        margin-block-start: 0.67em;
        margin-block-end: 0.67em;
    }

    .lc-bookbag-template__template-list {
        margin-bottom: 0.5em;
    }

    /****************************
        Field Description List
     ****************************/

    .lc-fielddl {
        display: flex;
        flex-direction: column;
        gap: var(--lc-recordview-field-gap);
    }

    .lc-fielddl__field {
        display: flex;
        gap: var(--lc-recordview-fieldhorizontal-gap);
    }

    .lc-fielddl__field_term {
        color: var(--lc-profile_general-view-label-color);
        font-size: var(--lc-recordview-label-font-size);
        font-weight: var(--lc-recordview-label-font-weight);
        flex: 0 0 var(--lc-recordview-label-width);
    }

    .lc-fielddl__field_detail {
        margin: 0px;
        display: flex;
        align-items: baseline;
        font-weight: bold;
    }

    .lc-fielddl__field_detail_content--margin {
        margin: 2px;
    }

    .lc-fielddl__field_detail:not(:last-child)::after {
        content: ",";
    }

    /****************************
        Field Vertical Layout List
     ****************************/

    .lc-fieldvl {
        display: flex;
        flex-direction: column;
        gap: var(--lc-recordview-field-gap);
        margin: 0;
        padding: 0;
    }

    .lc-fieldvl__field {
        display: flex;
        gap: var(--lc-recordview-fieldhorizontal-gap);
    }

    .lc-fieldvl__field_label {
        color: var(--lc-profile_general-view-label-color);
        font-size: var(--lc-recordview-label-font-size);
        font-weight: var(--lc-recordview-label-font-weight);
        flex: 0 0 var(--lc-recordview-label-width);
        margin: 2px;
    }

    .lc-fieldvl__field_data {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
    }

    .lc-fieldvl__field_data_item {
    }

    /****************************
        Rss feed
     ****************************/
     .lc-rss-feed {
        width: 100%;
     }

     .lc-rss-feed__title {
     }

     .lc-rss-feed__item-title {
     }

    /****************************
        Link Image Button
     ****************************/
     .lc-link-img-button {
     }

     .lc-link-img-button__text {
     }

     .lc-link-img-button__image {
     }

    /****************************
        Default action link in vertical hitlist
     ****************************/
     .lc-vertical-display-column__default-action-link {
     }

    /****************************
        Links portal component
     ****************************/
     .lc-portal-links__link {
     }

    /****************************
        Social media actions
     ****************************/
     .lc-social-media-link-img-button {
     }

     .lc-social-media-link-img-button__text {
     }

     .lc-social-media-link-img-button__image {
     }

    /****************************
        Modifier for external links
        (link which open in a new window)
     ****************************/
     .lc-link-img-button__text--new-window,
     .lc-header-view__header-link-img-button--new-window,
     .lc-vertical-display-column__default-action-link--new-window,
     .lc-rss-feed__title--new-window,
     .lc-rss-feed__item-title--new-window
     .lc-portal-links__link--new-window,
     .lc-portal-query-list__item-action--new-window,
     .lc-social-media-link-img-button__text--new-window {
        position: var(--lc-external-link-position);
        display: inline-block;
        padding-right: var(--lc-external-link-right-padding);
     }

    .lc-link-img-button__text--new-window::after,
    .lc-header-view__header-link-img-button--new-window::after,
    .lc-vertical-display-column__default-action-link--new-window::after,
    .lc-rss-feed__title--new-window::after,
    .lc-rss-feed__item-title--new-window::after,
    .lc-portal-links__link--new-window::after,
    .lc-portal-query-list__item-action--new-window::after,
    .lc-social-media-link-img-button__text--new-window::after {
        content: var(--lc-external-link-icon-content);
        fill: var(--lc-external-link-icon-fill);
        display: var(--lc-external-link-icon-display);
        width: var(--lc-external-link-icon-width);
        height: var(--lc-external-link-icon-height);
        background: var(--lc-external-link-icon-background-transparent);
        background-size: var(--lc-external-link-icon-background-size);
        margin-inline-start: var(--lc-external-link-icon-margin-inline-start);
    }

    /*
        We do not want the icon on the links from RSS, Social Media or Link portal
        component to have absolute postion because it does not display correctly.
        For all other links, the icon should have absolute postion so it shows up at the
        top right of the link.
    */
    .lc-link-img-button__text--new-window::after,
    .lc-header-view__header-link-img-button--new-window::after,
    .lc-vertical-display-column__default-action-link--new-window::after,
    .lc-portal-query-list__item-action--new-window::after {
        position: absolute;
        top: 0.25em;
        right: 0.25em;
    }

    /*
        The external link icon on the Grid hitlist view should have a white background
        rather than the default transparent background.
    */
    .lc-header-view__header-link-img-button--new-window::after {
        background: var(--lc-external-link-icon-background-white);
    }

    /*
    ---------------------------------------------------------------
        DevExpress Styling
    ---------------------------------------------------------------
    */

    .lc-dx {
    }

    .lc-dx--default-height {
        height: 850px;
        width: 100%;
    }

    /*
    ---------------------------------------------------------------
        Language Administration Styling
    ---------------------------------------------------------------
    */

    .lc-language-import-summary {
    }

    .lc-language-import-summary--bottom-border-solid {
        border-bottom: 1px solid var(--lc-horizontal-separator-line-color);
    }

     /****************************
        Multiple Selection Checkbox
     ****************************/
    .lc-search_results__header-multipleselection_checkbox {
        display: flex;
        gap: 1.5em;
        align-items: center;
        white-space: nowrap;
        text-transform: uppercase;
        font-size: 0.8125rem;
        width: 0;
    }


    .lc-search_results__header--grid_layout {
        padding-left: 20px;
    }

    /* Acquisitions Transaction Posting styling */
    .syd-cost-center-balance-summary {
        margin-top: 1em;
        margin-bottom: 2em;
    }

    .cspSettingStrict_container {
        display: block;
    }

    .cspSettingStrict_container__label {
        display: block;
        color: var(--lc-profile_message-error-color);
    }

    .cspSettingStrict_container__label--hidden {
        display: none;
        color: var(--lc-profile_message-error-color);
    }

    /* Hitlist Grid view styling */
    .lc-header-view {
    }

    .lc-header-view__header {
    }

    .lc-header-view__content {
    }

    .lc-header-view__footer {
    }

    .lc-header-view__header-link-img-button {
    }

    /*
    ---------------------------------------------------------------
        Edit control styling for record edit (for a single repeat
        of a field)
    ---------------------------------------------------------------
    */
    .lc-field-edit-control {
    }

    /* Add "*" after the edit control for mandatory fields */
    .lc-field-edit-control--required .SydTextBox::after,
    .lc-field-edit-control--required .BaseDateTime::after,
    .lc-field-edit-control--required .Number::after,
    .lc-field-edit-control--required .argus-geoLocation::after,
    .lc-field-edit-control--required .DimensionDropDown::after,
    .lc-field-edit-control--required .PhysicalQuantity::after,
    .lc-field-edit-control--required .FirstIssue::after,
    .lc-field-edit-control--required .LastIssue::after,
    .lc-field-edit-control--required .syd-acq-item-number-of-copies__num-copies::after,
    .lc-field-edit-control--required .lc-ft-base-link-dropdown::after {
        content: "*";
        font-size: 1.5em;
        font-weight: bold;
        padding-left: 0.2em;
        position: absolute;
        pointer-events: none;
    }

    /* do not show * for code link fields */
    .lc-ft-code .lc-field-edit-control--required .lc-ft-base-link-dropdown::after {
        content: "";
    }

    /* some special cases where we want the * to be in a position other than the default */
    .lc-field-edit-control--required .argus-geoLocation .SydTextBox::after,
    .lc-field-edit-control--required .Number.syd-acq-item-number-of-copies::after {
        content: none;
    }

    /* Leave space for the "*" before the field's action toolbar */
    td > .lc-field-edit-control {
        padding-right: 0.5em;
    }

    /* The "*" should not wrap to the next line */
    .lc-field-edit-control--required .SydTextBox,
    .lc-field-edit-control--required .BaseDateTime,
    .lc-field-edit-control--required .Number {
        white-space: nowrap;
    }

    /* Leave space for the "*" when it is not at the end of the edit control but in the middle */
    .lc-field-edit-control--required .lc-locationID-control .SydTextBox,
    .lc-field-edit-control--required .syd-acq-item-number-of-copies__num-copies {
        padding-right: 1.25em;
    }

    /* Leave space for the "*" between the first password textbox and the "Repeat password" label */
    .lc-field-edit-control--required .PasswordControl .Middle {
        padding-left: 1.25em;
    }

    /* Styling for SE Acquisitions Item Numer of Copies edit control */
    .syd-acq-item-number-of-copies {
    }

    .syd-acq-item-number-of-copies__num-copies {
    }

    .syd-acq-item-number-of-copies__split-copies {
    }

    /* Styling for Link field type's DropDown edit control */
    .lc-ft-base-link-dropdown {
    }

    /* Styling for GeographicalLocation field type edit control and search control*/
    .argus-geoLocation {
        display: inline;
    }

    /* Styling for SE Serials Subscription Claim Period edit control */
    .syd-tf-subscription-claim-period {
        display: inline-block;
    }

    /****************************
    NumericTextBox standard styles
    ****************************/

    .lc-ntb {
    }

    .lc-ntb--inline {
        display: inline-block;
        vertical-align: middle;
    }

    .lc-ntb--width-medium {
        width: 50%;
    }

/*
    ---------------------------------------------------------------
    Styling for the Container Layout designer component
    ---------------------------------------------------------------
*/
    .lc-container-component {
    }

    .lc-container-component__heading {
    }

    .lc-container-component__heading--left {
        text-align: left;
    }

    .lc-container-component__heading--center {
        text-align: center;
    }

    .lc-container-component__heading--right {
        text-align: right;
    }

    /****************************
        database selection
    ****************************/

    .lc-database-selection__databases, .lc-database-selection__pages {
        display: flex;
        flex-direction: column;
        gap: 0.25em;
        text-align: center;
    }

    .lc-database-selection__pages {
        margin-top: 2em;
    }

    .lc-database-selection__databases {
        margin: 1em 0;
    }

    /****************************
        web forms build query config view
    ****************************/
    .lc-wf-buildquery {
    }

    .lc-wf-buildquery__template {
        font-size: smaller;
        display: block;
    }

/*
    ---------------------------------------------------------------
    Styles for search field with custom validation
    ---------------------------------------------------------------
*/
    .lc-validated-search-field {
        display: inline-flex;
        flex-flow: column wrap;
        align-content: flex-start;
    }

    .lc-validated-search-field__control,
    .lc-validated-search-field__control > .SydTextBox,
    .lc-validated-search-field__control .lc-tb--full-width {
        width: 100%;
    }

    .lc-validated-search-field__validator-error {
        white-space: normal;
    }

/*
    ---------------------------------------------------------------
    Styles for command query search field controls
    ---------------------------------------------------------------
*/
    .lc-command-query-search-field {
        display: inline;
    }

    .lc-command-query-search-field__command {
    }

    .lc-command-query-search-field__command--disabled {
        background-color: light-dark(#efefef, #3b3b3b);
    }

    /****************************
        web forms dialog content
    ****************************/
    .lc-wf-dialog .Component .head {
        padding-top: 0;
        padding-right: 0;
        padding-left: 0;
    }

    .lc-wf-dialog .Component {
        padding: var(--layout-padding-top) var(--layout-padding-right) var(--layout-padding-bottom) var(--layout-padding-left);
    }

    .lc-wf-dialog__layer {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        min-height: 0;
    }

    /* for this to work, all parents div all the way to lc-wf-dialog (excluding) should be set to the lc-wf-dialog__layer*/
    div.lc-wf-dialog__content {
        overflow-y: auto;
        flex-grow: 1;
        min-height: 0;
        padding: 1em 0;
    }

/*
    **************************************
     Bookbag new section "Copied Values"
    **************************************
*/
    .lc-copied-values-setting {
        display: flex;
        flex-direction: column;
        /* baseline vertical rhythm (scales at 400% zoom) */
        row-gap: 0.5em;
        --indent-step: 2ch; /* zoom- and font-safe indentation unit */
    }

    .lc-copied-values-setting__control {
        margin-bottom: 1em;
    }

    .lc-copied-values-setting--staggered {
        margin-bottom: 1em;
    }

    .lc-copied-values-setting__row {
    }

    .lc-copied-values-setting__row--indent-1 {
        margin-inline-start: var(--indent-step);
    }

    .lc-copied-values-setting__row--indent-2 {
        margin-inline-start: calc(var(--indent-step) * 2);
    }

    .lc-copied-values-setting--aligned {
    }

    .lc-copied-values-setting__row--indent-uniform {
        margin-inline-start: var(--indent-step);
    }

/*
    ---------------------------------------------------------------
    Styles for the SydInfo control: information box (top / centered
    box often with success/fail messages).
    Note: this replaces the sydInfo css selectors defined in
    Global.css
    ---------------------------------------------------------------
*/
    .lc-infobox {
        margin: 20px 50px;
        padding: 10px 50px;
        border: 3px solid var(--lc-profile_general-border-color);
        text-align: center; 
    }

    .lc-infobox--information {
	    font-size: 100%;
        font-weight: normal;
        color: var(--lc-profile_message-information-color); 
	}

    .lc-infobox--error {
		color: var(--lc-profile_message-error-color);
		font-size: 100%;
		font-weight: normal;
	}

    .lc-infobox--caution {
        font-size: 100%;
        font-weight: normal;
        color: var(--lc-profile_message-caution-color);
    }

    .lc-infobox--focused:focus-within {
        box-shadow: 0 0 0 2px var(--lc-profile_general-border-color);      
    }

    .lc-infobox__title {
	    display: block;
	    font-weight: normal;
	}

    .lc-infobox__description {
        display: block;
    }

    .lc-infobox__description:focus,
    .lc-infobox__description:focus-visible {
        outline: none;
        box-shadow: none;
    }

    .lc-infobox__content {
    }

    /**************************************
     general administration content
    **************************************/
    .lc-wf-admin-layout {
    }

    .lc-wf-admin-layout__main {
        padding-top: 0.5em;
    }


    /*
    **************************************
     Share Records Administration
    **************************************
    */

    .lc-share-records-admin__data-content {
        margin-top: 1em;
    }

    .lc-share-records-admin__help {
        margin: 0 0 1em 0;
        padding: 0;
        border: none;
        text-align: justify;
    }

    /*
    **************************************
     Preset List Random Generation Options
    **************************************
    */

    .lc-random-options {
    }

    /* Slightly larger width for label to avoid word wrap. */
    .lc-random-options__label {
        width: 40%;
        text-wrap: nowrap;
    }

    .lc-random-options__content {
        width: 60%
    }
}