/* You can add global styles to this file, and also import other style files */
:root {
    --line-content-height: 24px;
    --vertical-padding: 4px;
    --horizontal-padding: 4px;
    --line-height: calc(var(--line-content-height) + 2* var(--vertical-padding));
    --border-radius: 0;
    --grid-gap: 4px;
    --primary-color: #004d7d;
    --primary-inverse-color: white;
    --primary-active-color: #6cf;
    --progress-bar-height: var(--line-height);
    --progress-bar-loading-color: #80BA45;
    --progress-bar-btn-bg-color: #c33;
    --error-msg-color: red;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --form-spacing: 20px;
    --grid-font-size: 13px;
}

body {
    margin: 0;
}

h1, h2, h3 {
    font-family: var(--bs-body-font-family) !important;
    font-weight: normal !important;
}

/* Form spacing */
.grid-form {
    margin: 8px;
}

.grid-form > div {
    margin-bottom: var(--form-spacing);
}

.grid-form > button[type="submit"] {
    margin-top: var(--form-spacing);
}

.ec-text-button {
    min-height: var(--line-height);
    line-height: var(--line-content-height);
    min-width: 48px;
    line-break: anywhere;
    padding: var(--vertical-padding) var(--horizontal-padding);
    text-align: center;
    display: inline-block;
}

.mervis-angular-checkbox-icon.unchecked {
    background-image: url("../public/mervis-angular-components/mervis-angular-checkbox/CheckBox_Unchecked.svg");
}

.mervis-angular-checkbox-icon.checked {
    background-image: url("../public/mervis-angular-components/mervis-angular-checkbox/CheckBox_Checked.svg");
}

.checkbox-partiallychecked {
    background-image: url("../public/mervis-angular-components/mervis-angular-checkbox/CheckBox_Partiallychecked.svg");
}

.checkbox-checked {
    background-image: url("../public/mervis-angular-components/mervis-angular-checkbox/CheckBox_Checked.svg");
}

.checkbox-unchecked {
    background-image: url("../public/mervis-angular-components/mervis-angular-checkbox/CheckBox_Unchecked.svg");
}

.checkbox-deny {
    background-image: url("../public/mervis-angular-components/mervis-angular-checkbox/CheckBox_Deny.svg");
}

.checkbox-mixed {
    background-image: url("../public/mervis-angular-components/mervis-angular-checkbox/CheckBox_Mixed.svg");
}

.icon-generate-password {
    background-image: url("../public/mervis-angular-components/mervis-angular-password-generator/Key.svg");
}

.icon-show-password {
    background-image: url("../public/mervis-angular-components/mervis-angular-password/Eye.svg");
}

.icon-copy-password {
    background-image: url("../public/mervis-angular-components/mervis-angular-password/Copy.svg");
}

.icon-info {
    background-image: url("../public/mervis-angular-components/mervis-angular-password/InfoGrey.svg");
}

.ec-progress-bar .icon-close {
    background-image: url("../public/mervis-angular-components/mervis-angular-progress-bar/CloseWhite.svg");
}

.icon-filter {
    background-image: url("../public/mervis-angular-components/mervis-angular-grid/Filter.svg");
}

i {
    width: 24px;
    height: 24px;
    background-size: 100%;
}

.mervis-angular-checkbox-icon {
    width: 24px;
    height: 24px;
    background-size: 100%;
}

.mervis-angular-select-icon {
    width: 24px;
    height: 24px;
    background-image: url("../public/mervis-angular-components/mervis-angular-select/icon.png");
    background-size: 100%;
}

.mervis-angular-select-arrow {
    width: 24px;
    height: 24px;
    background-image: url("../public/mervis-angular-components/mervis-angular-select/arrow.png");
    background-size: 100%;
}

.mervis-angular-treeview-expanded {
    width: 24px;
    height: 24px;
    background-image: url("../public/mervis-angular-components/mervis-angular-treeview/expanded.png");
    background-size: 100%;
}

.mervis-angular-treeview-collapsed {
    width: 24px;
    height: 24px;
    background-image: url("../public/mervis-angular-components/mervis-angular-treeview/collapsed.png");
    background-size: 100%;
}

.text-bold {
    font-weight: bold;
}

.text-green {
    color: darkseagreen;
}

.text-red {
    color: palevioletred;
}

/* .ag-row-selected::before {
  background-color: transparent!important;
} */

.ec-highlighted-row {
    background-color: red !important;
}

.ag-row-selected .custom-select-editor {
    background-color: var(--primary-color) !important;
}

button {
    display: flex;
    padding: 0;
    margin: 0;
}

    button i {
        background-repeat: no-repeat;
        background-position: center;
        text-align: center;
        display: block;
    }

.mervis-angular-grid-checkbox-header, .ag-cell.mervis-angular-grid-checkbox {
    padding: 0 !important;
}

.property-info {
    position: absolute;
    width: max-content;
    background-color: white;
    padding: 4px;
    right: 0;
    display: grid;
    grid-auto-flow: row;
    grid-gap: var(--grid-gap);
    left: 100%;
    z-index: 1;
    color: green;
}

    .property-info .invalid-item {
        color: red;
    }

.filter-button {
    background: red;
}

    .filter-button.active {
        background: green;
    }