:root {
    /*
    Palette Colours

    The base colours, and shades of those colours, that are used throughout the application. These are not intended for
    direct use in styles, but rather as the values of variables for specific purposes (e.g. --btn-primary-text). It is
    these variables that then get used in styles.

    The shades of these colours are defined in fixed perceived luminosity (L*, or Lstar) increments, usually +/- 10,
    from fixed reference colours. These lighter/darker shades are always selected relative to a reference colour. E.g.
    if a button has a background of --c-primary, and you want the border or activation colour to be a slight variation
    on that, then you would select one of the --c-primary-lighter or --c-primary-darker colours. However, if you had a
    button with a white background, and a solid border based off --c-primary (a pretty common button style), you would
    select the activation colour from --c-primary-from-white and the border colour as --c-primary or --c-primary-darker
    since the borders are normally a shade darker. The "from-black" colours currently do not have any real usages, but
    these would take the place of "from-white" in dark-mode. These may need to be modified if the base background colour
    for dark mode is not black, unless we use black as the base of some elements still.

    The shades of reference colours are always defined as fading between two colours. They always stop when they the
    next L* increment would pass one of those colours since the increments are only meaningful between them. E.g. If
    between white and primary, then going lighter than white is meaningless, since it is the lightest colour, and going
    darker than the primary colour is not well defined. It could mean darker by then fading to black, subtracting white,
    or increasing the saturation, the latter two of which will almost certainly hit a negative RGB value before reaching
    0 L*.
    */

    --c-white: #ffffff; /* L* = 100 */
    --c-black: #000000; /* L* = 0 */

    --c-primary-lighter-5: #eff3f9; /* L* +50 */
    --c-primary-lighter-4: #c9d8eb; /* L* +40 */
    --c-primary-lighter-3: #a5bddd; /* L* +30 */
    --c-primary-lighter-2: #80a2cf; /* L* +20 */
    --c-primary-lighter-1: #5c88c2; /* L* +10 */
    --c-primary: #386db4; /* L* = 45.7 */
    --c-primary-darker-1: #2c558c; /* L* -10 */
    --c-primary-darker-2: #203e66; /* L* -20 */
    --c-primary-darker-3: #142842; /* L* -30 */
    --c-primary-darker-4: #0a1320; /* L* -40 */

    --c-primary-from-white-1: #d9e3f1; /* L* -10 */
    --c-primary-from-white-2: #b4c8e3; /* L* -20 */
    --c-primary-from-white-3: #90add5; /* L* -30 */
    --c-primary-from-white-4: #6c93c7; /* L* -40 */
    --c-primary-from-white-5: #4778ba; /* L* -50 */

    --c-red-lighter-5: #f9f1f1; /* L* +50 */
    --c-red-lighter-4: #edd0d0; /* L* +40 */
    --c-red-lighter-3: #e0afaf; /* L* +30 */
    --c-red-lighter-2: #d38e8e; /* L* +20 */
    --c-red-lighter-1: #c66c6c; /* L* +10 */
    --c-red: #b74747; /* L* = 45.7 */
    --c-red-darker-1: #8f3737; /* L* -10 */
    --c-red-darker-2: #682828; /* L* -20 */
    --c-red-darker-3: #441a1a; /* L* -30 */
    --c-red-darker-4: #210d0d; /* L* -40 */

    --c-red-from-white-1: #f2dede; /* L* -10 */
    --c-red-from-white-2: #e5bdbd; /* L* -20 */
    --c-red-from-white-3: #d89c9c; /* L* -30 */
    --c-red-from-white-4: #cb7a7a; /* L* -40 */
    --c-red-from-white-5: #be5757; /* L* -50 */

    --c-grey-lighter-5: #f3f3f3; /* L* +50 */
    --c-grey-lighter-4: #d6d6d6; /* L* +40 */
    --c-grey-lighter-3: #bbbbbb; /* L* +30 */
    --c-grey-lighter-2: #a0a0a0; /* L* +20 */
    --c-grey-lighter-1: #868686; /* L* +10 */
    --c-grey: #6c6c6c; /* L* = 45.7 */
    --c-grey-darker-1: #545454; /* L* -10 */
    --c-grey-darker-2: #3d3d3d; /* L* -20 */
    --c-grey-darker-3: #272727; /* L* -30 */
    --c-grey-darker-4: #131313; /* L* -40 */

    --c-grey-from-white-1: #e2e2e2; /* L* -10 */
    --c-grey-from-white-2: #c6c6c6; /* L* -20 */
    --c-grey-from-white-3: #ababab; /* L* -30 */
    --c-grey-from-white-4: #919191; /* L* -40 */
    --c-grey-from-white-5: #777777; /* L* -50 */

    --c-grey-from-black-4: #5e5e5e; /* L* +40 */
    --c-grey-from-black-3: #474747; /* L* +30 */
    --c-grey-from-black-2: #303030; /* L* +20 */
    --c-grey-from-black-1: #1b1b1b; /* L* +10 */

    /* Application Variables */

    --nav-bg: var(--c-primary);
    --progress-bar-bg: var(--c-primary);
    --spinner-fill: var(--c-primary);

    --text: var(--c-black);
    --text-secondary: var(--c-grey-from-black-4);

    --link-hover: var(--c-grey-from-black-2);
    --link-secondary-hover: var(--c-grey-from-black-2);

    --link-action-text: var(--text);
    --link-action-text-disabled: var(--c-grey-from-white-4);

    --link-btn-primary-text: var(--c-primary);
    --link-btn-primary-text-active: var(--c-primary-darker-1);

    --link-btn-secondary-text: var(--c-grey);
    --link-btn-secondary-text-active: var(--c-grey-darker-1);

    --btn-primary-text: var(--c-white);
    --btn-primary-bg: var(--c-primary);
    --btn-primary-border: var(--c-primary-darker-1);

    --btn-primary-active-bg: var(--c-primary-darker-1);
    --btn-primary-active-border: var(--c-primary-darker-2);

    --btn-primary-toggled-bg: var(--c-primary-darker-2);
    --btn-primary-toggled-border: var(--c-primary-darker-3);

    --btn-secondary-text: var(--c-white);
    --btn-secondary-bg: var(--c-primary);
    --btn-secondary-border: var(--c-primary-darker-1);

    --btn-secondary-active-bg: var(--c-primary-darker-1);
    --btn-secondary-active-border: var(--c-primary-darker-2);

    --btn-red-text: var(--c-white);
    --btn-red-bg: var(--c-red);
    --btn-red-border: var(--c-red-darker-1);

    --btn-red-active-bg: var(--c-red-darker-1);
    --btn-red-active-border: var(--c-red-darker-2);

    --btn-disabled-text: var(--c-grey-from-black-4);
    --btn-disabled-bg: #eee; /* This is relative to the panel colour, which we don't have palette values for yet. */
    --btn-disabled-border: var(--c-grey-from-white-1);

    --msg-info-border: #2582ff;
    --msg-info-text: var(--c-primary); /* WCAG AA compliant colour for small text with white background. */

    --msg-warn-border: #e78900;
    --msg-warn-text: #9d5d00; /* WCAG AA compliant colour for small text with white background. */

    --msg-err-border: #ff3131;
    --msg-err-text: #db0000; /* WCAG AA compliant colour for small text with white background. */

    --anno-symbol: var(--c-primary);
    --anno-symbol-current: var(--c-primary-darker-1);

    --rse-value: var(--msg-err-text);

    --tree-table-only-marker: #b85c00;

    --font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-h1: 15px;
    --fs-h2: 14px;
    --fs-h3: var(--fs-h2);
    --fs-body: 13px;
    --fs-nav-buttons: var(--fs-h1);
    --fs-table-h: var(--fs-h2);
    --fs-modal-h: var(--fs-h2);
    --fs-arrow-buttons: 15px;

    --fs-user-h2: 18px;
    --fs-user-body: 16px;
    --fs-user-small: var(--fs-body);
}

input,
button {
    /* Some browsers (*cough* Safari *cough*) add a margin around buttons. Don't */
    margin: 0;
}

input[type="button"],
input[type="submit"],
button {
    /* Stop iOS Safari from trying to add a custom style to buttons */
    -webkit-appearance: none;
}

/*
 * Disable the default browser focus highlighting for anything that's not focus-visible so the focus ring is only
 * present when required. The focus-visible polyfill adds the focus-visible class to the element via JS as well as
 * js-focus-visible to the top-level html element to fallback to default highlighting behaviour if JS is disabled.
 * While a polyfill is required for not, this is an active area of development. See:
 *   - https://github.com/WICG/focus-visible/blob/master/explainer.md
 *   - https://web.dev/style-focus/#use-:focus-visible-to-selectively-show-a-focus-indicator
*/
.js-focus-visible :focus:not(.focus-visible) {
    outline: none;
}

::-ms-reveal {
    display: none;
}

form {
    margin: 0;
    padding: 0; /* IE default form padding is 10px, FF is 0px. This makes them look the same. */
}

.spacer {
    border-top: 1px solid #eee;
    margin: 8px 0;
}

/* Help link */

.help-link img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    opacity: 0.9; /* 'same' value as optionMenu.css */
    transition: opacity 0.1s ease-in;
}

.help-link img:hover,
.help-link img:active {
    opacity: 1;
}

/* Annotations */

sup.anno {
    cursor: help;
}

.inline-anno,
table.crossTabTable .anno,
.sw2-contentHeaderContainer .anno {
    color: var(--anno-symbol);
    font-size: var(--fs-body);
    font-weight: normal;
}

.cell-anno-text-start {
    padding-left: 6px;
}

.cell-anno-text-end {
    padding-right: 8px;
}

#catalogueItemPageHeadings .inline-anno {
    vertical-align: middle;
}

.inline-anno-more {
    cursor: help;
}

.dijitTextBoxDisabled input {
    color: black !important;
}

input::-moz-focus-inner {
    /*http://davidwalsh.name/firefox-buttons*/
    border: 0;
    padding: 0;
}

/* Annotations Panel */
.foldPanelContent a:is(*, :visited) {
    color: inherit;
    font-weight: bold;
    text-decoration: none;
}

/* General Styles */
a img {
    border: 0 !important;
}
.activeLink:is(*, :visited) {
    color: var(--link-action-text);
    cursor: pointer !important;
    text-decoration: none;
}
.activeLink:is(:hover, :active) {
    color: var(--link-action-text);
    text-decoration: underline !important;
}

.inactiveLink {
    color: var(--link-action-text-disabled);
    cursor: default;
    text-decoration: none;
}

img.glyphicons-sw2-medium {
    width: 14px;
}

.display-none {
    display: none;
}

.hidden {
    visibility: hidden;
}
.visible {
    visibility: visible;
}
.clearfix {
    clear: both;
}
/* Inputs */

.activeTextField,
.inactiveTextField,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
    font-size: inherit;
    line-height: inherit;
    background: #fff;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 2px;
    box-sizing: border-box;
}

select {
    padding: 3px 0;
}

.inactiveTextField,
.inactiveTextField:disabled,
.activeTextField:disabled,
select:disabled,
textarea:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled {
    background: var(--btn-disabled-bg);
    border: solid 1px var(--btn-disabled-border);
}

/* Consistent Buttons */
.activeButton,
.inactiveButton,
.btn-primary,
.btn-secondary,
.btn-disabled,
.btn-warn {
    padding: 4px 7px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    font-family: inherit;
}

.activeButton,
.inactiveButton,
.btn-primary.smallButton,
.btn-secondary.smallButton,
.btn-disabled.smallButton,
.btn-warn.smallButton {
    font-size: var(--fs-body);
}

.activeButton:disabled,
.activeButton.disabled,
.inactiveButton,
.btn-primary:disabled,
.btn-primary.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-warn:disabled,
.btn-warn.disabled {
    color: var(--btn-disabled-text);
    background: var(--btn-disabled-bg);
    border: 1px solid var(--btn-disabled-border);
    cursor: default;
}

.activeButton,
.btn-primary,
.shepherd-button:not(:disabled):hover {
    color: var(--btn-primary-text);
    border: 1px solid var(--btn-primary-border);
    background: var(--btn-primary-bg);
    cursor: pointer;
}

.activeButton:hover,
.activeButton:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-warn:hover,
.btn-warn:focus {
    text-decoration: none;
}

.btn-secondary {
    color: var(--btn-secondary-text);
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
}
.btn-secondary:active {
    background: var(--btn-secondary-active-bg);
    border-color: var(--btn-secondary-active-border);
}

:is(.activeButton .btn-primary .shepherd-button):not(.disabled):active {
    background: var(--btn-primary-active-bg);
    border-color: var(--btn-primary-active-border);
}

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

.btn-secondary,
.shepherd-button.shepherd-button-secondary,
.shepherd-button.shepherd-button-secondary:not(:disabled):hover {
    color: var(--btn-secondary-text);
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    cursor: pointer;
}

.btn-secondary:active,
.shepherd-button.shepherd-button-secondary:active {
    background: var(--btn-secondary-active-bg);
    border-color: var(--btn-secondary-active-border);
}

.btn-warn {
    color: var(--btn-red-text);
    background: var(--btn-red-bg);
    border: 1px solid var(--btn-red-border);
    cursor: pointer;
}

.btn-warn:active {
    background: var(--btn-red-active-bg);
    border-color: var(--btn-red-active-border);
}

/* Buttons  */
button#downloadChart-btn:disabled {
    color: var(--btn-disabled-text);
    background: var(--btn-disabled-bg);
    border: 1px solid var(--btn-disabled-border);
    cursor: default;
}

.buttonWithDropdown {
    z-index: 1;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.dropdownButton {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    margin-left: -1px;
    display: flex;
    min-width: 24px;
    min-height: 24px;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.dropdownButton:active {
    z-index: 1;
}

.floatButtonGroup {
    white-space: nowrap;
}

.floatButtonGroup > * {
    display: inline-block;
}

.floatButtonGroup .groupSaveControls-buttons {
    float: right;
}

.floatButtonGroup .groupSaveControls-buttons input {
    margin-left: 4px;
}

.forceHide {
    display: none !important;
}

/* Side Bar */
.contentPageLeftFunctionBar {
    border-right: 1px solid #cdcdcd;
    background: #f7f7f7;
    color: #111;
}
.customiseGraphPanel {
    /* because its position absolute */
    padding: 10px; /*Need to be the same as contentPageLeftFunctionBar*/
}
#map
    .dijitContentPane.dijitBorderContainer-child.dijitBorderContainer-dijitContentPane.dijitBorderContainerPane.dijitAlignLeft {
    /* Same as: contentPageLeftFunctionBar*/
    border-right: 1px solid #cdcdcd !important;
    background: #f7f7f7;
    color: #111;
}
#map
    .dijitContentPane.dijitBorderContainer-child.dijitBorderContainer-dijitContentPane.dijitBorderContainerPane.dijitAlignLeft
    > div,
#map #str_map_ui_LeftPanel_0 {
    padding: 10px;
}

.minimisedMenu {
    position: relative;
    width: 28px;
    background: #f7f7f7; /* Same as contentPageLeftFunctionBar */
    border-right: 1px solid #cdcdcd;
    display: none;
    text-align: center;
}

.minimisedMenu_img {
    width: 7px;
    margin-top: 20px;
}

.showHidePanelImg {
    display: inline-block;
    cursor: pointer;
    min-width: 24px;
    min-height: 24px;
    align-content: center;
    text-align: center;
}

.minimisedMenu.showPanel {
    display: block;
    cursor: pointer;
    z-index: 1;
}

.headerContent {
    white-space: nowrap;
}

.headerContent > * {
    margin: 0 0 0 4px;
}

.fileUploadHidden {
    margin-left: -9999px;
    height: 0;
}

.fileUploadFacadeButton {
    position: relative;
    top: -1.5px;
    width: 85px;
}

.fileUploadFacadeText {
    margin-left: 5px;
    margin-right: 5px;
    padding: 0 2px;
    height: 16px;
}

.fileUploadConfirmButton {
    position: relative;
    top: -1.5px;
}

/* Message (Info default) */
.message,
.messagePanel,
.errorPanel,
.info-message,
.baseErrorPanel,
.errorMsg, /* customData */
.fatalMsg, /* customData */
.warnMsg, /* customData */
.infoMsg, /* customData */
.errorContainer /* chartView */ {
    background: white;
    font-size: var(--fs-body);
    font-weight: bold;
    padding: 5px 10px;
    border-left: 3px solid var(--msg-info-border);
    color: var(--msg-info-text);
    display: block;
    margin-bottom: 10px;
}

/* Error, Fatal */
.validationError,
.messagePanel.error-message,
.errorMsg,
.fatalMsg {
    color: var(--msg-err-text);
    font-weight: bold;
    line-height: 16px;
}

.messagePanel.error-message,
.errorMsg,
.fatalMsg {
    border-color: var(--msg-err-border);
}

.validationError ol,
.validationError ul {
    list-style: initial;
    padding-left: 20px;
}

.validationError ol {
    list-style: decimal;
}

.rf-msg.validationError > * {
    padding: 0;
    background: none;
    color: inherit;
}

.validationError .rf-msg-det {
    display: block;
}

.termsContainer iframe {
    width: 100%; /* fl-fill should have been enough but IE also requires this. */
    border: 1px #ccc solid;
}

#termsForm {
    margin-top: 0.9rem;
}

.allErrorMs,
.allErrorMsg *,
.rf-msg-err,
.rf-msgs-err {
    background-image: none;
}

/* Warn */
.messagePanel.warning-message,
.customDataError,
.warnMsg {
    border-color: var(--msg-warn-border);
    color: var(--msg-warn-text);
    background-image: none;
}

/* Success, Ok */
.messagePanel.success-message {
    border-color: var(--msg-info-border);
    color: var(--msg-info-text);
}

.messagePanel.info-message a:is(*, :visited),
.customDataError .infoMsg a:is(*, :visited) {
    color: var(--msg-warn-text);
    text-decoration: none;
}
.messagePanel.info-message a:hover,
.customDataError .infoMsg a:hover {
    text-decoration: underline;
}

.messagePanelWithMargin {
    margin-left: 10px;
}
.messagePanelWithMargin ul,
.messagePanelWithMargin dl {
    margin-bottom: -10px;
}
.messagePanelWithMargin li:first-child,
.messagePanelWithMargin dt:first-child {
    margin-top: 10px;
}

#infoMessage {
    color: green;
}

/* Guest User Guide Page Styles */
.warningPanel {
    width: 30rem;
    font-size: var(--fs-body);
    padding: 2rem;
    border: 1px solid #bbb;
    border-radius: 0.4rem;
    box-shadow: 0 0.1rem 0.3rem #ccc;
    position: relative;
}
.warningPanel .warningPanelIcon {
    position: absolute;
    top: calc(-2rem + 7px); /* Used px for the positioning part relative to the fixed resolution image. */
    background: #fff;
}
.warningPanel .warningPanelIcon img {
    opacity: 0.5;
}
.warningPanel a {
    font-weight: bold;
}

.progressCancelDiv {
    text-align: center;
    text-align: -webkit-center;
    padding: 10px 0 0 0;
}

/* Loading Spinner*/
.spinner {
    zoom: 1;
    cursor: wait;
    background: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    animation: delayedFadeIn 1s;
}
@keyframes delayedFadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.outerLoad {
    top: 40%;
    position: relative;
    text-align: center;
}
.innerLoad {
    border-radius: 4px;
    background-color: white;
    height: 60px;
    margin: 0 auto;
    font-size: 0;
    top: 40%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    display: inline-block;
    padding: 0 8px;
}
.loadGif {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}
.loadTextDiv {
    display: inline-block;
    margin: 0 15px;
    vertical-align: middle;
    font-size: var(--fs-h2);
}
.loadingText1 {
    font-weight: bold;
    display: block;
}
.loadingText2 {
    margin-top: 4px;
    display: block;
}

/* LOADING INDICATORS */

.busyIndicator,
.busyIndicator div,
.busyIndicator div:after {
    box-sizing: border-box;
}
.busyIndicator {
    color: black;
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
}
.busyIndicator div {
    transform-origin: 16px 16px;
    animation: busyIndicator 1.6s linear infinite;
}
.busyIndicator div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 21px;
    left: 14px;
    width: 4px;
    height: 7px;
    border-radius: 10px;
    background: black;
}
.busyIndicator div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.4s;
}
.busyIndicator div:nth-child(2) {
    transform: rotate(45deg);
    animation-delay: -1.2s;
}
.busyIndicator div:nth-child(3) {
    transform: rotate(90deg);
    animation-delay: -1s;
}
.busyIndicator div:nth-child(4) {
    transform: rotate(135deg);
    animation-delay: -0.8s;
}
.busyIndicator div:nth-child(5) {
    transform: rotate(180deg);
    animation-delay: -0.6s;
}
.busyIndicator div:nth-child(6) {
    transform: rotate(225deg);
    animation-delay: -0.4s;
}
.busyIndicator div:nth-child(7) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}
.busyIndicator div:nth-child(8) {
    transform: rotate(315deg);
    animation-delay: 0s;
}
@keyframes busyIndicator {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.dotIndicator {
    width: 60px;
    height: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dotIndicator div {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--spinner-fill);
    animation: dotPulse 0.8s infinite alternate;
}

.dotIndicator div:nth-child(1) {
    animation-delay: 0s;
}

.dotIndicator div:nth-child(2) {
    animation-delay: 0.2s;
}

.dotIndicator div:nth-child(3) {
    animation-delay: 0.4s;
}

.dotIndicator div:nth-child(4) {
    animation-delay: 0.6s;
}

.dotIndicator div:nth-child(5) {
    animation-delay: 0.8s;
}

@keyframes dotPulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.6);
    }
}

/* Bootstrap's DropDown */
.dropdown {
    position: relative;
    display: flex;
}
.dropdown-menu {
    color: var(--text);
    position: absolute;
    z-index: 1000;
    display: none;
    font-size: var(--fs-body); /* Some menus toggle buttons still use a font-size of 0 for layout. */
    font-weight: normal;
    text-align: left;
    list-style: none;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
.dropdown-menu.ie-forceDisplay {
    display: block !important;
    opacity: 0;
    filter: alpha(opacity=0);
}
.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    padding: 0 !important;
    background-color: #e5e5e5;
}
.dropdown-menu > li.disabled,
.dropdown-menu > li > .disabled {
    cursor: default;
    opacity: 0.5;
    background: none;
}
.dropdown-menu > li.disabled > * {
    cursor: default;
}
.dropdown-menu > li > a:is(*, :visited),
.dropdown-menu > li > button {
    width: 100%;
    display: block;
    box-sizing: border-box;
    clear: both;
    white-space: nowrap;
    color: inherit;
    text-decoration: inherit;
    cursor: inherit;
}

.dropdown-menu > li > button {
    font-size: inherit;
    text-align: inherit;
    background: transparent;
    border: none;
}

.dropdown > .dropdown-menu.show,
.dropdown-visible {
    display: block !important;
    min-height: fit-content;
}

.dropdown-menu-right {
    left: auto;
}
.dropdown-menu-left {
    right: auto;
}

.dropdown-hdr {
    display: block;
    white-space: nowrap;
}
.dropdown-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
}

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    margin-top: -3px;
}
.dropdown-menu-right .dropdown-submenu > .dropdown-menu {
    right: 100%;
}
.dropdown-menu-left .dropdown-submenu > .dropdown-menu {
    left: 100%;
}
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus > .dropdown-menu {
    display: block;
}

.dropdown-submenu .dropdown-menu.show {
    display: block;
}

.dropdown-submenu.pull-left {
    float: none;
}

.toggleLink.selected {
    background: url(images/material/ic_check_black.svg) 2px center no-repeat;
    background-size: 16px;
    cursor: default;
}

/* Pagination controls */
.activeArrowButton,
.inactiveArrowButton {
    font-size: var(--fs-arrow-buttons);
    text-decoration: none;
    padding: 0 4px;
    border: 0;
    background: none;
}
.activeArrowButton {
    color: var(--link-action-text);
    cursor: pointer;
}
.inactiveArrowButton {
    color: var(--link-action-text-disabled);
}
.activeArrowButton:hover {
    text-decoration: underline;
}

/* Tree in modalSaveDialog and shareGroup */

#saveTableForm a:is(*, :visited),
#saveRecodeForm a:is(*, :visited) {
    text-decoration: none;
    color: #666;
}
#saveTableForm a.node-selected,
#saveRecodeForm a.node-selected {
    font-style: italic;
    color: black !important;
    text-decoration: none;
    font-weight: bold;
}

.vAlignSpacer {
    height: 100%;
    width: 0;
    display: inline-block;
    vertical-align: middle;
}

.treeContainer {
    overflow: auto;
    background: white;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 2px 0;
}

/* ======== RichFaces generic styling ======== */

/* Tables */

.sw2Table.fullWidth {
    width: 100%;
}

.sw2Table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    border-bottom: 1px solid #c4c0c9;
}

.sw2Table .rf-dt-hdr-c,
.sw2Table .rf-dt-shdr-c {
    border: 0;
    border-bottom: 1px solid #ddd;
    background: transparent;
    font-weight: bold;
    text-align: left;
    padding: 0 6px 3px 3px;
}

.sw2Table .rf-dt-c {
    border: 0;
    border-bottom: 1px solid #eee;
}

.sw2Table .rf-dt-r:hover {
    background: #fbfbfb;
}

.sw2Table .rf-dt-r a {
    text-decoration: none !important;
}

#downloadTableList.sw2Table .rf-dt-r a {
    text-decoration: underline !important;
}

.sw2Table .rf-dt-r > td :is(a, span):is(*, :visited) {
    color: #111111 !important;
    display: inline-block;
}

.sw2Table .rf-dt-shdr-c > * {
    vertical-align: middle;
}

.sw2Table .rf-dt-c-srt,
.sw2Table .rf-dt-c-srt:hover {
    color: #000;
}

.sw2Table .rf-dt-srt-btn {
    width: 16px;
}

.rf-ulst-itm {
    padding: 2px 0;
}

/* Reset RichFaces component values. */
.rf-ulst-itm,
.rf-dt-shdr-c,
.rf-dt-c {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.sw2TableList {
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 4px 6px;
    box-sizing: border-box;
    overflow: auto;
}

/* Table Pagination */

.sw2Pagination {
    box-sizing: border-box;
    margin-top: 0.4rem;
}

.sw2Pagination .rf-ds-nmb-btn,
.sw2Pagination .rf-ds-btn {
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--link-action-text);
    vertical-align: middle;
    white-space: nowrap;
}

.sw2Pagination .rf-ds-nmb-btn {
    width: 2em;
    padding: 2px 0 3px;
}

.sw2Pagination .rf-ds-btn {
    text-align: center;
    width: 2em;
    padding: 0 0 3px;
}

.sw2Pagination .rf-ds-act {
    border-bottom: 2px solid #7af;
    color: #000;
    font-weight: bold;
}

.sw2Pagination .rf-ds-btn-first,
.sw2Pagination .rf-ds-btn-prev,
.sw2Pagination .rf-ds-btn-next,
.sw2Pagination .rf-ds-btn-last {
    display: none;
}

.sw2Pagination .rf-ds-dis {
    visibility: hidden;
}

/* Trees */

.rf-trn {
    display: table;
    overflow: auto;
    padding: 0;
}
.rf-trn-hnd,
.rf-trn-cnt {
    display: table-cell;
    min-width: 16px;
    padding: 0;
}
.rf-trn-hnd-lf {
    pointer-events: none;
}
.rf-trn,
.rf-tr-nd {
    background: none;
}
.rf-trn-hnd-exp {
    background: url("images/material/expanded.svg") no-repeat center;
}
.rf-trn-hnd-colps {
    background: url("images/material/collapsed.svg") no-repeat center;
}

.rf-trn-ico {
    margin: 1px 2px;
}

.noIcon {
    display: none;
}

.rf-trn-cnt {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.rf-trn-cnt:hover,
.noSelectTree .rf-trn-sel:hover {
    background: #f7f7f7;
}
.rf-trn-sel,
.rf-trn-sel:hover {
    background: #dde7f3;
}
.noSelectTree .rf-trn-sel,
.noHoverTree .rf-trn-cnt:hover,
.noHoverTree .rf-trn-sel:hover {
    background: none;
}
.rf-trn-lbl {
    height: 100%;
    padding: 0 2px 0 0;
    font-size: 0;
}
.rf-trn-lbl,
.rf-trn-cnt {
    cursor: pointer;
}
.noSelectTree .rf-trn-lbl,
.noSelectTree .rf-trn-cnt {
    cursor: default;
}

/* Table Filters */

.fieldName {
    white-space: pre;
    display: inline-block;
}

.tableFilters {
    margin-left: 10px;
}

.tableFieldTitle > * {
    vertical-align: middle;
}

#table-filters .fieldName,
#table-layers .fieldName {
    margin-top: 3px;
    margin-bottom: 3px;
}

#table-layers select {
    margin: 0 0 0 4px;
    max-width: 500px;
}

/* Metadata Info */

.metaInfoButton,
.sortControl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

.metaInfoButton,
.sortControl,
#tableViewPanel #table-layers li div a {
    text-decoration: none;
}

@media print {
    select {
        /*for firefox*/
        -moz-appearance: none;
        /*for chrome*/
        -webkit-appearance: none;
        appearance: none;
        border: none;
    }

    select::-ms-expand {
        display: none;
    }
}

/* Custom tab panel */

.tabPanel {
    display: flex;
    flex-flow: row nowrap;
    position: relative;
    height: auto;
    padding: 0 0 10px;
}

.tabPadding {
    width: 100%;
    border-top: 1px solid transparent;
    border-bottom: 1px solid #ddd;
}

.tab {
    color: var(--text-secondary);
    background: none;
    height: auto;
    padding: 3px 8px 5px;
    border: 1px solid transparent;
    border-bottom-color: #ddd;
    font-size: var(--fs-h2);
    font-family: Arial, Verdana, sans-serif;
    line-height: 14px;
    white-space: nowrap;
    cursor: pointer;
}

.tab.active {
    color: var(--text);
    border-color: #ddd;
    border-bottom-color: transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: default;
}