@import url("colors.css");
@import url("underline.css");

/** Background of the label of the area on the map created by the Measure tool */

.Measure_AreaText_layer {
    text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white;
}

/** Background of the label of the length on the map created by the Measure tool */

.Measure_LengthText_layer {
    text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white;
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;

    /* this prevents ipad viewport vertical scroll on window drag */
    position: fixed;

    -webkit-overflow-scrolling: touch;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;

    --calcite-sheet-scrim-background: rgba(0, 0, 0, .4) !important;
    --paper-icon-button-ink-color: var(--primary-color-light);

    /** Sets the ripple color for all polymer components */
    --paper-tab-ink: var(--primary-color-light);

    /* User-defined Primary Color */
    --primary-hex: var(--colors-primary, #1C8903);

    /* Hard-coded variables regardless of user color */

    --primary-red: #d53737;
    --primary-blue: #346fd7;
    --primary-green: #198500;
    --primary-orange: #BD5400;
    --primary-yellow: #FFBB33;

    --internal-error: #d53737;
    --internal-success: #198500;
    --internal-warning: #BD5400;
    --internal-info: #346fd7;

    /* Generated Primitive Colors - don't use these directly outside of this file*/
    --internal-primary-50: oklch(from var(--primary-hex) 0.96 calc(c * 0.15) h);
    --internal-primary-100: oklch(from var(--primary-hex) 0.91 calc(c * 0.35) h);
    --internal-primary-200: oklch(from var(--primary-hex) 0.83 calc(c * 0.45) h);
    --internal-primary-300: oklch(from var(--primary-hex) 0.74 calc(c * 0.60) h);
    --internal-primary-400: oklch(from var(--primary-hex) 0.66 calc(c * 0.80) h);
    --internal-primary-500: oklch(from var(--primary-hex) 0.58 c h);
    --internal-primary-600: oklch(from var(--primary-hex) 0.50 calc(c * 0.95) h);
    --internal-primary-700: oklch(from var(--primary-hex) 0.42 calc(c * 0.90) h);
    --internal-primary-800: oklch(from var(--primary-hex) 0.34 calc(c * 0.80) h);
    --internal-primary-900: oklch(from var(--primary-hex) 0.26 calc(c * 0.65) h);
    --internal-primary-950: oklch(from var(--primary-hex) 0.18 calc(c * 0.55) h);

    --internal-neutrals-50: #fafafa;
    --internal-neutrals-100: #ebebeb;
    --internal-neutrals-200: #e5e5e5;
    --internal-neutrals-300: #d4d4d4;
    --internal-neutrals-400: #a3a3a3;
    --internal-neutrals-500: #737373;
    --internal-neutrals-600: #525252;
    --internal-neutrals-700: #404040;
    --internal-neutrals-800: #262626;
    --internal-neutrals-900: #171717;
    --internal-neutrals-950: #000000;

    /*Semantic colors */

    /* Always white, and always dark, regardless of light-dark theme */
    --primary-white: #fff;
    --primary-black: #000;

    /* Use for all non-text gadgets, like toggles, checks, etc) */
    --gadget-primary: var(--internal-primary-600);

    /*Grays - these should flip with light-dark */
    --primary-gray-light: var(--internal-neutrals-200);
    --primary-gray-semi-light: var(--internal-neutrals-300);
    --primary-gray: var(--internal-neutrals-400);
    --primary-gray-semi-dark: var(--internal-neutrals-500);
    --primary-gray-dark: var(--internal-neutrals-600);

    --primary-color-light: var(--internal-primary-50);
    --primary-color-semi-light: var(--internal-primary-100);
    --primary-color-dark: var(--internal-primary-800);

    --text-default: var(--internal-neutrals-900);
    --text-hover: var(--internal-primary-950);
    --text-active: var(--internal-primary-600);
    --text-disabled: var(--internal-neutrals-500);
    --text-primary: var(--internal-primary-600);
    --text-negative: #fff;

    /* Backgrounds - components on neutral (white or black) background */
    --background-default: var(--internal-neutrals-50);
    --background-hover: var(--internal-neutrals-100);
    --background-active: var(--internal-primary-50);
    --background-disabled: var(--internal-neutrals-100);

    --border-gray-light: var(--internal-neutrals-100);
    --border-gray: var(--internal-neutrals-200);

    --border-active: var(--internal-primary-600);
    --border-active-size: 2px;

    /* Backgrounds - contained component (primary color dark based ) */

    --background-contained-default: var(--internal-primary-600);
    --background-contained-hover: var(--internal-primary-700);
    --background-contained-active: var(--internal-primary-800);

    --border-contained-focus: var(--internal-primary-50);

    /* Primary colors with opacity, used for drop areas */
    --primary-color-oklch-alpha-12: oklch(from var(--internal-primary-500) l c h /0.12);

    /* Feedback Colors - same for everyone */

    /* Error */
    --feedback-error-background: #d537371F;
    --feedback-error-contained-background: var(--internal-error);

    /* use with --feedback-error-background */
    --feedback-error-text-alt: oklch(from var(--internal-error) 0.45 calc(c * 0.90) h);

    /* use with --background-default */
    --feedback-error-text: var(--internal-error);

    /* use with --feedback-error-contained-background */
    --feedback-error-contained-text: var(--text-negative);


    /* Warning */
    --feedback-warning-background: #BD54001F;
    --feedback-warning-contained-background: var(--internal-warning);

    /* use with --feedback-warning-background */
    --feedback-warning-text-alt: oklch(from var(--internal-warning) 0.45 calc(c * 0.90) h);

    /* use with --background-default */
    --feedback-warning-text: var(--internal-warning);

    /* use with --feedback-warning-contained-background */
    --feedback-warning-contained-text: var(--text-negative);


    /* Info */
    --feedback-info-background: #346fd71F;
    --feedback-info-contained-background: var(--internal-info);

    /* use with --feedback-info-background */
    --feedback-info-text-alt: oklch(from var(--internal-info) 0.45 calc(c * 0.90) h);

    /* use with --background-default */
    --feedback-info-text: var(--internal-info);

    /* use with --feedback-info-contained-background */
    --feedback-info-contained-text: var(--text-negative);


    /* Success */
    --feedback-success-background: #1985001F;
    --feedback-success-contained-background: var(--internal-success);

    /* use with --feedback-success-background */
    --feedback-success-text-alt: oklch(from var(--internal-success) 0.45 calc(c * 0.90) h);

    /* use with --background-default */
    --feedback-success-text: var(--internal-success);

    /* use with --feedback-success-contained-background */
    --feedback-success-contained-text: var(--text-negative);
    /* End Semantic Colors */

    /* Default opacity for contained components and components with different colors (icons). */
    /* For components on non-solid backgrounds or white backgrounds and solid colors, consider --text-disabled and --background-disabled */
    --disabled-opacity: 0.38;

    /* Paper Element Variables */
    --paper-input-container-focus-color: var(--internal-primary-600);
    --paper-icon-button-ink-color: var(--background-active);

    --internal-app-header-height: 44px;

    --internal-gap-xs: 4px;
    --internal-gap-small: 6px;
    --internal-gap-default: 8px;
    --internal-gap-large: 12px;

    --primary-text-color: var(--text-default);
    --primary-background-color: var(--background-default);

    --threegis-progress-bar-height: 4px;
}

.slider-input {
    min-width: 48px;
}

div.appHeader {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--background-default);
    column-gap: var(--internal-gap-default);
    padding-left: 8px;
    padding-right: 8px;
    /* Magic number because of the way progress bar is displayed.  May be able to remove this once buttons are styled */
    height: var(--internal-app-header-height);
}

#messagingIcon {
    height: 100%;
    overflow: visible;
    font-size: large;
}

.paper-icon-button-0 {
    width: 24px;
    height: 24px;
}

div.mainContainer {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    /*    flex-basis: 100%;*/
}

/* Used in index.cshtml for the main window background */

div.whiteBackground {
    background-color: var(--background-default);
}

#selectionBar.paper-tabs {
    height: 4px;
    z-index: 1;
}

#selectionBar {
    border-bottom-width: 3px !important;
}

div.sectionLabel {
    margin: 2px 0 2px 0;
}

div.noShrink {
    flex-shrink: 0;
}

paper-material.noShrink {
    flex-shrink: 0;
}

/* all modal dialogs we create are at 999, having the overlay at 998 will obscure all other windows correctly */

paper-dialog {
    z-index: 999 !important;
    --paper-dialog-background-color: var(--background-default);
    --paper-dialog-color: var(--text-default);
}

threegis-popup-dialog {
    background-color: var(--background-default);
    color: var(--text-default);
}

iron-overlay-backdrop {
    z-index: 998 !important;
}

paper-listbox threegis-tooltip-item,
paper-listbox paper-item {
    border-bottom: none;
    --paper-item-min-height: 30px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 20px;
    min-height: 30px;
    padding: 2px 35px 2px 15px;
    background-color: var(--background-default);
    color: var(--text-default)
}

paper-listbox threegis-tooltip-item:hover,
paper-listbox paper-item:hover {
    background-color: var(--background-hover);
    color: var(--text-hover);
}

paper-listbox threegis-tooltip-item:active,
paper-listbox paper-item:active {
    background-color: var(--background-active);
    color: var(--text-active);
}

paper-listbox threegis-tooltip-item:focus-visible,
paper-listbox paper-item:focus-visible {
    outline: 1px solid var(--border-active);
    outline-offset: -1px;
}

paper-listbox threegis-tooltip-item[disabled],
paper-listbox paper-item[disabled] {
    background-color: var(--background-default);
    color: var(--text-disabled);
}

/* rather than using full/half classes use flex-1 flex-2 to do proportions or just flex for equal. */

/* fields will flex into each other but use a span fieldSpacer to get the correct separation. */

/* gives us fewer classes to maintain if we use flex proportion capability as much as possible. */

/* :host should define the required margins from edge of window content not the UI elements. */

span.fieldSpacer {
    width: 8px;
}

span.verticalSpacer {
    height: 8px;
}

.leftRightPadding {
    padding-left: 5px;
    padding-right: 5px;
}

.topBottomMargin {
    margin-top: 8px;
    margin-bottom: 8px;
}

.noOverflow {
    overflow: hidden !important;
}

/*Keeps from getting squished by padding on resize*/

paper-icon-button {
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
}

/*Toggled button*/

paper-icon-button[active],
paper-icon-button[is-active] {
    background-color: var(--primary-gray-semi-light);
    border-radius: 50%;
}

paper-menu-button[disabled],
paper-icon-button[disabled] {
    opacity: var(--disabled-opacity);
}

paper-menu-button[hidden] {
    display: none;
}

paper-icon-button:hover {
    background-color: var(--background-hover);
}

/* Button definition */

.MuiButton-contained

.MuiTouchRipple-root {
    color: var(--gadget-primary);
}

/* Actionbar buttons and header buttons */
.appHeader .ThreegisIconButton,
#actionContainer paper-menu-button,
#actionContainer paper-icon-button,
#actionbarContainer paper-menu-button,
#actionbarContainer paper-icon-button,
#create-feature-bar paper-menu-button,
#create-feature-bar paper-icon-button,
#actionbarExtension paper-menu-button,
#actionbarExtension paper-icon-button {
    flex: 0 0 auto;
    overflow: visible;
    text-align: center;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px !important;
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    outline: 0;
    align-items: center;
    user-select: none;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    width: 28px;
    height: 28px;
    min-height: 28px;
    min-width: 28px;
    border: none;
    padding: 2px;

    --internal-button-color: var(--text-default);
    --internal-button-background-color: transparent;
    background-color: var(--internal-button-background-color);
    color: var(--internal-button-color);
}

.appHeader .ThreegisIconButton:hover,
#actionContainer paper-icon-button:hover,
#actionContainer paper-menu-button:hover,
#actionbarContainer paper-icon-button:hover,
#actionbarContainer paper-menu-button:hover,
#create-feature-bar paper-icon-button:hover,
#create-feature-bar paper-menu-button:hover,
#actionbarExtension paper-icon-button:hover,
#actionbarExtension paper-menu-button:hover {
    --internal-button-background-color: var(--background-hover);
    --internal-button-color: var(--text-hover);
}

.appHeader .ThreegisIconButton:active
#actionContainer paper-menu-button:active #actionContainer paper-icon-button:active,
#actionContainer paper-icon-button[is-active],
#actionContainer paper-icon-button.isToggled,
#actionbarContainer paper-icon-button:active,
#actionbarContainer paper-icon-button[is-active],
#actionbarContainer paper-icon-button.isToggled,
#actionbarContainer paper-menu-button:active #create-feature-bar paper-icon-button:active,
#create-feature-bar paper-icon-button[is-active],
#create-feature-bar paper-icon-button.isToggled,
#create-feature-bar paper-menu-button:active #actionbarExtension paper-icon-button:active,
#actionbarExtension paper-icon-button[is-active],
#actionbarExtension paper-icon-button.isToggled,
#actionbarExtension paper-menu-button:active {
    --internal-button-background-color: var(--background-active);
    --internal-button-color: var(--text-active);
}

.appHeader .ThreegisIconButton:focus-visible,
#actionContainer paper-menu-button:focus-visible,
#actionContainer paper-icon-button:focus-visible,
#actionbarContainer paper-icon-button:focus-visible,
#actionbarContainer paper-menu-button:focus-visible,
#create-feature-bar paper-icon-button:focus-visible,
#create-feature-bar paper-menu-button:focus-visible,
#actionbarExtension paper-icon-button:focus-visible,
#actionbarExtension paper-menu-button:focus-visible {
    outline: 1px solid var(--border-active);
    outline-offset: -1px;
}

.appHeader .ThreegisIconButton[disabled],
#actionContainer paper-icon-button[disabled],
#actionContainer paper-menu-button[disabled],
#actionbarContainer paper-icon-button[disabled],
#actionbarContainer paper-menu-button[disabled],
#create-feature-bar paper-icon-button[disabled],
#create-feature-bar paper-menu-button[disabled],
#actionbarExtension paper-icon-button[disabled],
#actionbarExtension paper-menu-button[disabled] {
    opacity: var(--disabled-opacity);
}

.appHeader .ThreegisIconButton svg,
#actionContainer paper-icon-button svg,
#actionContainer paper-menu-button svg,
#actionbarContainer paper-icon-button svg,
#actionbarContainer paper-menu-button svg,
#create-feature-bar paper-icon-button svg,
#create-feature-bar paper-menu-button svg,
#actionbarExtension paper-icon-button svg,
#actionbarExtension paper-menu-button svg {
    color: var(--internal-button-color) !important;
    fill: var(--internal-button-color) !important;
}

#actionContainer paper-icon-button~paper-icon-button,
#actionContainer paper-icon-button~paper-menu-button,
#actionContainer paper-menu-button~paper-icon-button,
#actionbarContainer paper-icon-button~paper-icon-button,
#actionbarContainer paper-icon-button~paper-menu-button,
#actionbarContainer paper-menu-button~paper-icon-button,
#create-feature-bar paper-icon-button~paper-icon-button,
#create-feature-bar paper-icon-button~paper-menu-button,
#create-feature-bar paper-menu-button~paper-icon-button,
#actionbarExtension paper-icon-button~paper-icon-button,
#actionbarExtension paper-icon-button~paper-menu-button,
#actionbarExtension paper-menu-button~paper-icon-button {
    margin-left: var(--internal-gap-default) !important;
}

/* End actionbar buttons and header buttons */

/* Button Styling - Outline by default, contained with class properties*/
.ThreegisButton,
paper-button:not(.toolButton) {
    font-size: var(--font-size-root);
    font-weight: var(--font-weight-medium);
    line-height: normal;
    text-transform: none;
    letter-spacing: unset;
    padding: 8px 16px;
    border-radius: 4px;
    box-shadow: none;
}

paper-button:not(.toolButton) {
    background-color: transparent;
    color: var(--text-primary);
}

paper-button:not(.toolButton).contained {
    background-color: var(--background-contained-default);
    color: var(--text-negative);
    border: none;
}

paper-button:not(.toolButton):not(.contained) {
    padding: 7px 15px;
    /*Reduce padding for border*/
    border: 1px solid var(--text-primary);
}

/* Hover State */
paper-button:not(.toolButton):hover {
    background-color: var(--background-hover);
}

paper-button:not(.toolButton).contained:hover {
    background-color: var(--background-contained-hover);
}

paper-button:not(.toolButton):active {
    background-color: var(--background-active);
}

paper-button:not(.toolButton).contained:active {
    background-color: var(--background-contained-active);
}

paper-button:not(.toolButton):focus-visible {
    padding: 7px 15px;
    border: 1px solid var(--border-active);
}

paper-button:not(.toolButton).contained:focus-visible {
    padding: 7px 15px;
    border: 1px solid var(--border-contained-focus);
}

paper-button:not(.toolButton)[disabled] {
    opacity: var(--disabled-opacity);
}

/* End button styling */

/* Paper Item Styling */

paper-item {
    background-color: var(--background-default);
    color: var(--text-default);
}

paper-item:hover {
    background-color: var(--background-hover);
    color: var(--text-hover);
}

paper-item:active {
    background-color: var(--background-active);
    color: var(--text-active);
}

paper-item:focus-visible {
    outline: 1px solid var(--border-active);
    outline-offset: -1px;
}

paper-item[disabled] {
    opacity: var(--disabled-opacity);
}

/* End Paper Item Styling */

paper-button {
    margin: 0;
}

.gap {
    gap: 8px;
}

/* Tab Styling */
paper-tabs {
    border-bottom: 1px solid var(--border-gray);

}

paper-tab {
    background-color: var(--background-default);
}

paper-tab:hover {
    background-color: var(--background-hover);

}

paper-tab:focus-visible {
    outline: 1px solid var(--border-active);
    outline-offset: -1px;
}

paper-tab[selected],
paper-tab.iron-selected {
    color: var(--text-active);
}
/* End Tab Styling */

/*Remove padding and size requirement for paper-icon-buttons styled in a flex grid*/

paper-icon-button.tableIcon {
    min-width: 24px;
    min-height: 24px;
    width: 24px;
    height: 24px;
    padding: 0;
}

paper-icon-button.tableIcon>iron-icon {
    width: 24px;
    height: 24px;
}

paper-icon-button.check {
    color: var(--feedback-success-text);
}

paper-icon-button.reject {
    color: var(--feedback-error-text);
}

.Y-scrollerContainer {
    overflow: hidden;
    overflow-y: auto;
    /* adding overflow-x also creates problems on edge and ie */
}

div.toggle-label {
    text-overflow: ellipsis;
    overflow: hidden;
}

.text-ellipsis {
    text-overflow: ellipsis;
}

paper-item {
    white-space: nowrap;
}

paper-material.dropdown-content {
    overflow-x: auto;
    min-width: 150px;
    max-height: 400px;
}

div.buttonsOnlyRow {
    min-height: 36.5px;
}

div.field-required {
    color: var(--primary-blue) !important;
}

div.field-display-field {
    color: var(--primary-green);
}

div.highlight-new-workoder {
    background-color: var(--feedback-info-background) !important;
}

/* Offsets all the transforms by (7, -22) so that the pin head lines up with the cursor. */

@keyframes pinDrop {
    0% {
        opacity: 0;
        transform: translate(7px, -522px);
    }
    70% {
        opacity: 1;
        transform: translate(7px, -22px);
    }
    85% {
        transform: translate(7px, -37px);
    }
    100% {
        transform: translate(7px, -22px);
    }
}

#coordinatePin_layer image {
    animation: pinDrop .5s 1;
    transform: translate(7px, -22px);
}

/* used in some modules to center content vertically and left to right in cell */

.gridCellItemCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cursor-busy {
    cursor: wait;
}

.cursor-ready {
    cursor: default;
}

/** Text label that shows up on the map after a measure area is complete */

.Measure_AreaText {
    text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white, 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white, 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white;
}

/** Text label that shows up on the map after a measure length is complete */

.Measure_LengthText {
    text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white, 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white, 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white;
}

div.error-message {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    margin: 20px;
}

/*Paper Card Style*/

paper-card .card-content .title {
    @apply --paper-font-headline;
    overflow: hidden;
    text-overflow: ellipsis;
}

paper-card .card-actions .moreInfo .description {
    overflow-wrap: break-word;
}

paper-card:hover {
    @apply --shadow-elevation-8dp;
    -moz-transition: all 1s cubic-bezier(.25, .8, .25, 1);
    -ms-transition: all 1s cubic-bezier(.25, .8, .25, 1);
    -o-transition: all 1s cubic-bezier(.25, .8, .25, 1);
    -webkit-transition: all 1s cubic-bezier(.25, .8, .25, 1);
    transition: all 1s cubic-bezier(.25, .8, .25, 1);
}

paper-card {
    --paper-card-background-color: var(--background-default);
}

paper-tabs {
    --paper-tabs-selection-bar-color: var(--border-active);
    flex-shrink: 0;
}

/*IE Specific, do not delete*/

#tabsContent #selectionBar {
    border-bottom: 2px solid var(--border-active);
}

paper-checkbox {
    padding: 8px 0;
    --paper-checkbox-checked-color: var(--gadget-primary);
    --paper-checkbox-unchecked-color: var(--gadget-primary);
}

/*IE Specific, do not delete*/

paper-checkbox #checkbox.checked {
    background-color: var(--gadget-primary) !important;
    border-color: var(--gadget-primary) !important;
}

paper-checkbox[disabled] #checkbox {
    border-color: var(--gadget-primary) !important;
}

paper-checkbox[disabled][checked] #checkbox {
    background-color: var(--gadget-primary) !important;
}

paper-checkbox #checkbox {
    border-color: var(--gadget-primary) !important;
}

/*Edge only, known issue with dir=rtl being applied*/

paper-checkbox #checkmark {
    -webkit-transform-origin: 97% 86% !important;
    -ms-transform-origin: 97% 86% !important;
    -moz-transform-origin: 97% 86% !important;
    transform-origin: 97% 86% !important;
}

paper-checkbox #checkboxLabel {
    padding-right: 0 !important;
    padding-left: 8px !important;
}

div.links {
    margin-top: 8px;
    width: 100%;
}

a.openLink {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sliders */

paper-slider {
    --paper-slider-knob-color: var(--gadget-primary);
    --paper-slider-active-color: var(--gadget-primary);
    --paper-slider-pin-color: var(--gadget-primary);
}

/*Edge Specific, do not delete*/

paper-slider .slider-knob-inner {
    background-color: var(--gadget-primary) !important;
    border: 2px solid var(--gadget-primary) !important;
}

/*Edge Specific, do not delete*/

paper-slider .slider-knob-inner::before {
    background-color: var(--gadget-primary) !important;
}

/* #region Flex Grid Styling*/
input.wj-cell-check {
    position: relative;
}

input.wj-cell-check:before {
    content: "";
    display: inline-block;
    position: absolute;
    box-sizing: border-box;
    height: 14px;
    width: 14px;
    border-radius: 2px;
    border: 1px solid var(--border-active);
    background-color: var(--background-default);
}

input.wj-cell-check:hover::before {
    border: 1px solid var(--gadget-primary);
}

input.wj-cell-check:checked:hover::before {
    filter: brightness(90%);
}

input.wj-cell-check:checked:disabled:hover::before {
    filter: none;
}

input.wj-cell-check:checked:before {
    content: "";
    display: inline-block;
    position: absolute;
    box-sizing: border-box;
    height: 14px;
    width: 14px;
    border-radius: 2px;
    border: 1px solid var(--gadget-primary);
    background-color: var(--gadget-primary);
}

input.wj-cell-check:checked:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 2px;
    box-sizing: border-box;
    height: 5px;
    width: 10px;
    border-left: 2px solid var(--background-default);
    border-bottom: 2px solid var(--background-default);
    -webkit-transform: translateY(-1.5px) rotate(-45deg);
    transform: translateY(-1.5px) rotate(-45deg);
}

div.wj-content {
    border-radius: 0 !important;
    background-color: var(--background-default);
}

div.wj-state-selected {
    background: var(--background-active) !important;
    color: var(--text-active) !important;
}

div.wj-state-multi-selected {
    background: var(--background-active) !important;
    color: var(--text-active) !important;
}

div.field-read-only {
    color: var(--text-disabled);
    cursor: not-allowed;
    background-color: var(--background-disbaled) !important;
}

/*Style the input text like the regular text*/

.wj-input-group .wj-form-control {
    padding: 0 3px !important;
}

.wj-content.wj-grid.wj-dropdown {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.wj-grid.wj-dropdown .wj-template {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.wj-input-group {
    min-height: 1em !important;
}

.wj-input-group .wj-form-control {
    min-height: 1em !important;
}

div.wj-calendar {
    z-index: 10;
}

/* This Removes the Red Overlay and Border on the row header in the flexgrid when a cell is invalid */
.wj-rowheaders .wj-cell.wj-state-invalid {
    border-top: none;
    border-left: none;
}

/* Style dropdown indicator to line up with actual drop down button */
.field-dropdown-field {
    margin-left: 10px;
    margin-right: 10px;
}

/* Make the height of the dropdown input field the same as the grid row height */
.wj-grid-editor.wj-dropdown {
    padding: 0 !important;
}

/* Hide divider line of dropdown */
.wj-input-group-btn:last-child > .wj-btn {
    border-left-width: 0 !important;
}

.wj-listbox-item {
    min-height: 23px;
}

.wj-listbox-item input[type=checkbox] {
    width: 10em;
}

/* #endregion */

/* Toggle Buttons */

paper-toggle-button {
    --paper-toggle-button-checked-bar-color: var(--gadget-primary);
    --paper-toggle-button-checked-button-color: var(--gadget-primary);
    --paper-toggle-button-checked-ink-color: var(--gadget-primary);
}

/*Edge Specific, do not delete*/

paper-toggle-button[checked]:not([disabled]) .toggle-bar {
    background-color: var(--gadget-primary) !important;
}

/*Edge Specific, do not delete*/

paper-toggle-button[checked]:not([disabled]) .toggle-button {
    background-color: var(--gadget-primary) !important;
}

/*Edge Specific, do not delete*/

paper-toggle-button[checked] .toggle-ink {
    color: var(--gadget-primary) !important;
}

/* #region Splitters used for resizing elements*/

div.verticalSplitter::after {
    content: '';
    height: 64px;
    width: 6px;
    border-radius: 6px;
    background-color: var(--primary-gray);
    position: absolute;
    top: calc(50% - 32px);
    left: 0;
    right: 0;

    transition: all 0.25s ease-in-out;
}

div.verticalSplitter:hover::after {
    background-color: var(--border-active);
}

div.verticalSplitter {
    border-radius: 8px;
    min-width: 6px;
    background-color: var(--primary-gray-light);
    border-left: 1px var(--background-default) solid;
    border-right: 1px var(--background-default) solid;
    cursor: col-resize;
    position: relative;

    transition: all 0.25s ease-in-out;
}

div.verticalSplitter:hover {
    background-color: var(--primary-color-semi-light);
}

/*
This is here because the vertical splitter was appearing
over the top of the "Link Map" popup menu and I couldn't figure
out how to force that popup to display over top of all elements
(including the vertical splitter).
*/
div.verticalSplitter.behind-popup {
    z-index: -1;
}

div.horizontalSplitter::after {
    border-radius: 6px;
    content: '';
    position: absolute;
    bottom: 0;
    top: 0;
    left: 50%;
    height: 6px;
    width: 64px;
    margin-top: 0;
    margin-left: -32px;
    background-color: var(--primary-gray);

    transition: all 0.5s ease-in-out;
}

div.horizontalSplitter:hover::after {
    background-color: var(--border-active);
}

div.horizontalSplitter {
    border-radius: 8px;
    min-height: 6px;
    background-color: var(--primary-gray-light);
    width: 100%;
    border-top: 1px var(--background-light) solid;
    border-bottom: 1px var(--background-light) solid;
    cursor: row-resize;
    position: relative;

    transition: all 0.5s ease-in-out;
}

div.horizontalSplitter:hover {
    background-color: var(--primary-color-semi-light);
}

/* #endregion */

/* Styling of disabled text area */

paper-textarea {
    --paper-input-container-disabled: {
        opacity: 0.66 !important;
    }
    ;
}

paper-input {
    --paper-input-container-input: {
        text-overflow: ellipsis;
    };
}

/* Radion Buttons */

paper-radio-button {
    --paper-radio-button-checked-color: var(--gadget-primary);
    --paper-radio-button-unchecked-color: var(--gadget-primary);
}

/* Edge specific, do not delete*/

paper-radio-button #onRadio {
    background-color: var(--gadget-primary) !important;
}

/* Edge specific, do not delete*/

paper-radio-button[checked] #offRadio {
    border-color: var(--gadget-primary) !important;
}

/* Edge specific, do not delete*/

paper-radio-button #offRadio {
    border: 2px solid var(--gadget-primary) !important;
}

/* Edge specific, do not delete*/

paper-radio-button[disabled] #offRadio {
    border-color: var(--gadget-primary) !important;
}

/* Edge specific, do not delete*/

paper-radio-button[disabled][checked] #onRadio {
    background-color: var(--gadget-primary) !important;
}

.maxWidth {
    width: 100%;
}

.maxHeight {
    height: 100%;
}

div.invisible {
    display: none !important;
}

/* Hides the pointer on map popup windows, for example the snapping popup window */

.esriPopup:not(.fiberAvailabilityPopup) .outerPointer,
.esriPopup:not(.fiberAvailabilityPopup) .pointer {
    display: none !important;
}

/* Makes text in the components like divs and spans selectable by the user */

.selectableText {
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Give components a disabled look when the disabled property is true */

paper-tab[disabled],
paper-tabs[disabled],
iron-pages[disabled],
div[disabled],
paper-material[disabled] {
    opacity: var(--disabled-opacity);
    cursor: auto;
    pointer-events: none;
}

/** Warning area on some dialogs */

iron-icon.warning {
    fill: var(--feedback-warning-text);
}

div.warning {
    border: 1px solid var(--feedback-warning-text);
    border-radius: 10px;
    margin-top: 8px;
    font-weight: bold;
    color: black;
    padding: 8px;
}

#notification {
    z-index: 10;
    border: solid 10px whitesmoke;
    background-color: white;
    color: darkgrey;
    font-family: var(--threegis-font-family);
    font-size: 14px;
}

/** Right Click Popup Menu on map hover color*/
threegis-dropdown-menu {
    width: 100%;
}

threegis-dropdown-menu[hidden] {
    display: none;
}

div.wj-cell.wj-alt.wj-detail div.wj-control.wj-flexgrid {
    margin-left:46px;
    border:solid 1px var(--border-gray);
    width: calc(100% - 46px) !important;
}

div.wj-cell.wj-alt.wj-detail {
    background:var(--primary-color-light)!important;
}

.nsd_holder {
    position: absolute;
    background-color: white;
    overflow: auto;
}

/* 3-GIS Collapse Styling */
div.collapse {
    background-color: var(--primary-color-light);
    color: var(--text-default);
    border-width: 0px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: var(--threegis-font-family);
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    height: 40px;
    min-height: 40px;
    white-space: nowrap;
}

.collapse-button-label {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    margin: 8px
}

div.collapseContents {
    border: lightgray solid 1px;
    padding: 0 8px;
}

#closureCollapseIcon {
    margin: auto;
}

/* Tree view expanded arrow */
.item-expanded {
    position: relative;
    display: inline-block;
    border-bottom: .65em solid;
    border-left: .65em solid transparent;
    opacity: 0.75;
    cursor: pointer;
    margin: 6px 8px 8px;
    vertical-align: middle;
}

/* Tree view collapsed arrow */
.item-collapsed {
    position: relative;
    display: inline-block;
    border-top: .4em solid transparent;
    border-bottom: .4em solid transparent;
    border-left: .5em solid;
    opacity: 0.75;
    cursor: pointer;
    margin: 6px 8px 8px;
    vertical-align: middle;
}

/* Tree view expanded arrow for tablets */
*[is-tablet]>.item-expanded {
    border-bottom: .85em solid;
    border-left: .85em solid transparent;
    margin: 14.1px;
}

/* Tree view collapsed arrow for tablets */
*[is-tablet]>.item-collapsed {
    border-top: .5em solid transparent;
    border-bottom: .5em solid transparent;
    border-left: .7em solid;
    margin: 13px;
}

paper-slider #sliderContainer {
    width: initial;
    flex: 1 1 auto;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.sortable-ghost-hidden {
    opacity: 1 !important
}

.sortable-fallback-hidden {
    display: none !important
}

/* Delete icon on reshape popup menu */
div.info-container {
    align-items: center;
    white-space: nowrap;
    flex: 1;
    flex-direction: row;
}

div.info-container[is-tablet] {
    min-height: 30px;
}

div.infoItem {
    padding: 6px 4px 2px;
    vertical-align: middle;
    display: inline;
    white-space: nowrap;
}

*[is-tablet]>div.infoItem {
    padding: 10px 4px 10px;
}

h3 {
    margin-block-start: 1em;
    margin-block-end: 1em;
}

.threegis-map-link-target::before {
    content: " ";
    background: rgba(227, 228, 220, 0.65);
    width: 100%;
    height: 100%;
    position: absolute;
    border: 3px dashed rgb(160, 160, 147);
    box-sizing: border-box;
    transition: border .25s, background .25s;
    z-index: 1000;
    top: 0;
    left: 0;
    pointer-events: none;
}

.threegis-map-link-target::after {
    content: attr(datalinktext);
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    z-index: 1001;
    color: rgb(160, 160, 147);
    font-size: 1.5em;
    text-shadow: 1px 1px 4px #FFF;
    transition: color .25s;
    transform: translateY(-50%);
    pointer-events: none;
}

/* This is the map link popup menu on the presentation layer and only has access to
main.css.  By default, the popover takes up the whole screen, preventing the user from
clicking on the button to close the menu again.  This unsets those values.*/
#mapLinkMenuButtonpopupMenu {
    position: unset;
    top: unset;
    left: unset;
    bottom: unset;
    right: unset;
}

/* This is the presentation layer for MUI menus.  By default, the popover takes up the whole screen,
preventing the user from clicking on the button to close the menu again.  This unsets those values.
Using the class so that it works for ALL menus and doesn't require each menu to be listed here by ID
MUI is a Suite of React UI Tools and the menus referred to here is the popup dialog that shows options
the user can click on.*/

.MuiMenu-root {
    position: unset;
    top: unset;
    left: unset;
    bottom: unset;
    right: unset;
}

.gshDisplay {
    border-color: #c6cbbc;
    opacity: 21%;
    margin-bottom: 10px;
}

div.rightclick-menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

button.rightclick-menu {
    width: 100%;
    padding: 5px;
    border: 1px solid var(--border-gray);
    color: var(--text-default);
    background-color: var(--background-default);
    margin: 0;
}

button.rightclick-menu:hover {
    background-color: var(--background-hover);
    color: var(--text-hover);
}

button.rightclick-menu:active {
    background-color: var(--background-active);
    color: var(--text-active);
}

button.rightclick-menu:focus-visible {
    outline: 1px solid var(--border-active);
    outline-offset: -1px;
}

button.rightclick-menu[disabled] {
    background-color: var(--background-disabled);
    color: var(--text-disabled);
}

@font-face {
    font-family: CalciteWebCoreIcons;
    src: url('js/lib/esri/assets/esri/themes/base/icons/fonts/CalciteWebCoreIcons.ttf')
}

.MuiCollapse-hidden {
    display: none;
}