body {
    background-color: hsla(0, 0%, 90%);
}

.hidden, [hidden] {
    display: none !important;
}

a {
    color: hsl(210, 80%, 45%);
}
a:hover {
    color: hsl(210, 80%, 35%);
    text-decoration: underline;
}
a:active {
    color: hsl(210, 80%, 25%);
    text-decoration: underline;
}

.tooltip {
    backdrop-filter: blur(2px);
}
.bs-tooltip-auto[x-placement^=top] .arrow::before,
.bs-tooltip-top .arrow::before {
    border-top-color: hsl(0deg 0% 0% / 70%);
}
.tooltip-inner {
    background-color: hsl(0deg 0% 0% / 70%);
}

p:first-child {
    margin-top: 0;
}
p:last-child {
    margin-bottom: 0;
}
p.pre {
    white-space: pre-line;
}

.text-muted {
    color: hsl(210deg 10% 60%) !important;
}

.password-visibility-toggle .icon {
    display: block;
    width: 20px;
}

.form-control {
    color: inherit !important;
}

select:disabled {
    opacity: 1;
}

.hr-buttons :is(.btn, .btn-group, .dropdown) + :is(.btn, .btn-group, .dropdown) {
    margin-left: 0.5em;
}
.hr-buttons .btn-group .btn.dropdown-toggle-split {
    margin-left: 0 !important;
}


.pswp {
    --blur-strength: 3px;
    --header-height: 48px;
    z-index: 22000;
}
img.ps { cursor: zoom-in; }

.pswp.pswp--animated-in {
    backdrop-filter: blur(var(--blur-strength));
}
.pswp__top-bar {
    height: calc(var(--header-height) + var(--blur-strength) - 1px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.seperator.sep-vertical {
    border-left: 1px solid hsla(0, 0%, 0%, 0.1);
    height: 100%;
}

.custom-control {
    padding-left: 1rem;
}
.custom-control-label {
    padding-left: 0.5rem;
}
.custom-control-label::before {
    left: -1rem;
}
.custom-control-label::after {
    left: -1rem;
}

.icon-btn {
    width: 1.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.5;
}
.icon-btn:hover {
    opacity: 0.8;
}
.icon-btn:active {
    opacity: 1;
}


.bootstrap-select.disabled {
    cursor: default;
}
.bootstrap-select.disabled > button.btn.dropdown-toggle {
    pointer-events: none;
    /* background-color: hsla(210deg 16% 93% / 0.4) !important; */
    background-color: #e9ecef !important;
}
/* .bootstrap-select.disabled > .btn.dropdown-toggle {
    color: hsl(0, 0%, 0%, 0.5) !important;
} */
.bootstrap-select.disabled > .btn.dropdown-toggle::after {
    opacity: 0.6;
}
.bootstrap-select.disabled .filter-option-inner-inner {
    opacity: 0.8;
}

/* This doesn't automatically target the placeholder. */
/* There needs to be some sort of a check if the select has a title/placeholder */
/* An option with empty value seems to be used as a placeholder */
.bootstrap-select > .btn.dropdown-toggle.bs-placeholder .filter-option {
    opacity: 0.4;
}
.btn.dropdown-toggle::after {
    margin-top: 0;
}

.alert-info {
    background-color: hsl(190deg 55% 90%);
}


.NA {
    opacity: 0.4;
}



.g-1 { gap: 0.25em; }
.g-2 { gap: 0.5em; }
.g-3 { gap: 1em; }
.g-4 { gap: 1.5em; }


/* #region ==================== BS: REL SIZING */

.btn.bs-relative {
    padding: 0.375em 0.75em;
    font-size: 1em;
    line-height: initial !important;
}
.btn-sm.bs-relative {
    padding: 0.25em 0.5em;
    font-size: .875em;
    line-height: initial !important;
    border-radius: 0.2em;
}
.btn-lg.bs-relative {
    padding: 0.5em 1em;
    font-size: 1.2em;
    line-height: initial !important;
    padding-bottom: 0.55em;
}

.form-control:not(.dropdown).bs-relative {
    padding: 0.375em 0.75em;
    font-size: 1em;
    height: calc(1.5em + 0.5em + 2px);
    height: unset;
    line-height: initial !important;
}

.form-control.dropdown.bs-relative {
    font-size: 1em;
    border-radius: 0.25em;
}

.input-group-text.bs-relative {
    padding: 0.375em 0.75em;
    font-size: 1em;
    line-height: initial !important;
    border-radius: 0.25em;
}

.custom-select.bs-relative {
    height: calc(1.5em + 0.75em + 2px);
    height: unset;
    padding: 0.375em 1.75em 0.375em 0.75em;
    font-size: 1em;
    line-height: initial !important;
    border-radius: 0.25em;
}


.form-group.bs-relative {
    margin-bottom: 1em;
}
.row + .row.bs-relative {
    margin-top: 1em;
}


/* #endregion */


/* TODO: this needs to be scoped */
/* .card-header .btn {
    padding: 0.25em 0.5em;
    line-height: 1.25;
}
.card-header .btn .icon i {
    font-size: .875em;
} */


.ts-1 {
    text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.2);
}
.ts-2 {
    text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.4);
}



.collapse-btn {
    width: 1.5em;
    height: 1.5em;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.collapse-btn .fa-angle-down {
    margin-bottom: -1px;
}
.card.collapse-body.collapse-hide .card-header {
    border-bottom: 1px solid transparent;
}

.card:is(.collapse-hiding, .collapse-hide) .card-header [data-toggle=collapse] .fas:before {
    content: "\f107";  /* down */
}
.card:is(.collapse-showing, .collapse-show) .card-header [data-toggle=collapse] .fas:before {
    content: "\f106";  /* up */
}


textarea::placeholder,
textarea.form-control::placeholder,
input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
input[type="url"]::placeholder {
    /* color: black !important;
    opacity: 0.3 !important; */
    color: black;
    opacity: 0.25;
}
input[type="text"].text-password::placeholder,
input.password-placeholder::placeholder,
input[type="password"]::placeholder {
    /* color: black !important; */
    /* opacity: 0.2 !important; */
    color: black;
    opacity: 0.15;
}


textarea:is(.disabled, [disabled])::placeholder,
textarea.form-control:is(.disabled, [disabled])::placeholder,
input[type="text"]:is(.disabled, [disabled])::placeholder,
input[type="number"]:is(.disabled, [disabled])::placeholder,
input[type="tel"]:is(.disabled, [disabled])::placeholder,
input[type="email"]:is(.disabled, [disabled])::placeholder,
input[type="search"]:is(.disabled, [disabled])::placeholder,
input[type="url"]:is(.disabled, [disabled])::placeholder {
    color: black;
    opacity: 0.15;
}
input[type="text"].text-password:is(.disabled, [disabled])::placeholder,
input.password-placeholder:is(.disabled, [disabled])::placeholder,
input[type="password"]:is(.disabled, [disabled])::placeholder {
    color: black;
    opacity: 0.1;
}




textarea.form-control {
    min-height: calc(1em * 1.5 * 1 + 0.375rem * 2 + 1px * 2);
    max-height: calc(1em * 1.5 * 8 + 0.375rem * 2 + 1px * 2);
    /* min-height: calc(1em * 1.5 * attr(data-lines number, 2) + 0.375rem * 2 + 1px * 2); */
}



/* textarea.min-lines-1 { min-height: calc(1em * 1.5 * 1 + 0.375rem * 2 + 1px * 2); } */
textarea.min-lines-2 { min-height: calc(1em * 1.5 * 2 + 0.375rem * 2 + 1px * 2); }
textarea.min-lines-4 { min-height: calc(1em * 1.5 * 4 + 0.375rem * 2 + 1px * 2); }
textarea.min-lines-5 { min-height: calc(1em * 1.5 * 5 + 0.375rem * 2 + 1px * 2); }
textarea.min-lines-6 { min-height: calc(1em * 1.5 * 6 + 0.375rem * 2 + 1px * 2); }

textarea.max-lines-2  { max-height: calc(1em * 1.5 * 2 + 0.375rem * 2 + 1px * 2); }
textarea.max-lines-3  { max-height: calc(1em * 1.5 * 3 + 0.375rem * 2 + 1px * 2); }
textarea.max-lines-4  { max-height: calc(1em * 1.5 * 4 + 0.375rem * 2 + 1px * 2); }
textarea.max-lines-5  { max-height: calc(1em * 1.5 * 5 + 0.375rem * 2 + 1px * 2); }
textarea.max-lines-7  { max-height: calc(1em * 1.5 * 7 + 0.375rem * 2 + 1px * 2); }
textarea.max-lines-8  { max-height: calc(1em * 1.5 * 8 + 0.375rem * 2 + 1px * 2); }
textarea.max-lines-10 { max-height: calc(1em * 1.5 * 10 + 0.375rem * 2 + 1px * 2); }
textarea.max-lines-12 { max-height: calc(1em * 1.5 * 12 + 0.375rem * 2 + 1px * 2); }
textarea.max-lines-14 { max-height: calc(1em * 1.5 * 14 + 0.375rem * 2 + 1px * 2); }
textarea.max-lines-15 { max-height: calc(1em * 1.5 * 15 + 0.375rem * 2 + 1px * 2); }
textarea.max-lines-20 { max-height: calc(1em * 1.5 * 20 + 0.375rem * 2 + 1px * 2); }

textarea.lines-1  { height: calc(1em * 1.5 * 1 + 0.375rem * 2 + 1px * 2); }
textarea.lines-2  { height: calc(1em * 1.5 * 2 + 0.375rem * 2 + 1px * 2); }
textarea.lines-3  { height: calc(1em * 1.5 * 3 + 0.375rem * 2 + 1px * 2); }
textarea.lines-4  { height: calc(1em * 1.5 * 4 + 0.375rem * 2 + 1px * 2); }
textarea.lines-5  { height: calc(1em * 1.5 * 5 + 0.375rem * 2 + 1px * 2); }
textarea.lines-6  { height: calc(1em * 1.5 * 6 + 0.375rem * 2 + 1px * 2); }
textarea.lines-7  { height: calc(1em * 1.5 * 7 + 0.375rem * 2 + 1px * 2); }
textarea.lines-8  { height: calc(1em * 1.5 * 8 + 0.375rem * 2 + 1px * 2); }
textarea.lines-9  { height: calc(1em * 1.5 * 9 + 0.375rem * 2 + 1px * 2); }
textarea.lines-10 { height: calc(1em * 1.5 * 10 + 0.375rem * 2 + 1px * 2); }
textarea.lines-11 { height: calc(1em * 1.5 * 11 + 0.375rem * 2 + 1px * 2); }
textarea.lines-12 { height: calc(1em * 1.5 * 12 + 0.375rem * 2 + 1px * 2); }
textarea.lines-13 { height: calc(1em * 1.5 * 13 + 0.375rem * 2 + 1px * 2); }
textarea.lines-14 { height: calc(1em * 1.5 * 14 + 0.375rem * 2 + 1px * 2); }
textarea.lines-15 { height: calc(1em * 1.5 * 15 + 0.375rem * 2 + 1px * 2); }

textarea.form-control.bs-relative.lines-1  { height: calc(1em * 1.5 * 1 + 0.375em * 2 + 1px * 2); }
textarea.form-control.bs-relative.lines-2  { height: calc(1em * 1.5 * 2 + 0.375em * 2 + 1px * 2); }


.drop-target-text {
    display: none;
}
body.is-dragover .drop-target {
    border: 1px dashed silver;
}
.dt-is-dragover .non-drop-target-text,
body.is-dragover .non-drop-target-text {
    display: none;
}
.dt-is-dragover .drop-target-text,
body.is-dragover .drop-target-text {
    display: block;
}

.dt-is-dragover {
    border: 1px dashed hsl(120deg 90% 40%) !important;
}

.overflow-container {
    overflow: auto;
}

.money-and-percentage {
    display: inline-flex;
    gap: 0.375em;
}


/* #region ==================== REQUIRED MARKER */

:root {
    --required-border-color: 1px solid hsl(0deg 100% 75% / 50%);
    --required-bg-gradient: radial-gradient(ellipse at right, hsl(0deg 100% 50% / 15%), transparent 50%);
    --required-bg-size: 45% 200%;
}

.form-control[required] {
    border-right: var(--required-border-color);
}
.form-control[required]:not(.custom-select) {
    background-image: var(--required-bg-gradient);
    background-size: var(--required-bg-size);
    background-position: 140% 50%;
    background-repeat: no-repeat;
}
.input-group:has(.form-control[required]) .input-group-append:last-child > * {
    border-right: var(--required-border-color);
    background-image: var(--required-bg-gradient);
    background-size: var(--required-bg-size);
    background-position: 140% 50%;
    background-repeat: no-repeat;
}
.bootstrap-select:has(.form-control[required]) .dropdown-toggle {
    border-right: var(--required-border-color);
    background-image: var(--required-bg-gradient);
    background-size: var(--required-bg-size);
    background-position: 140% 50%;
    background-repeat: no-repeat;
}

/* #endregion */


.fa-info.circle {
    border: 2px solid hsla(0, 0%, 0%, 0.5);
    border-radius: 50%;
    width: 1.8em;
    height: 1.8em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fa-info.circle:before {
    content: "\f129";
    margin-top: 1px;
}


.dead {
    user-select: none;
    pointer-events: none;
}
.fuzzy {
    filter: blur(1px);
}
.fuzzier {
    filter: blur(2px);
}
.ghost {
    opacity: 0.7;
}
.ghoster {
    opacity: 0.5;
}



/* #region ==================== MARKDOWN */

body .markdown h1 {
    font-size: 1.5em;
}
body .markdown h2 {
    font-size: 1.25em;
}
body .markdown blockquote {
    border-left: 5px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
}
body .markdown code {
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
    background: #F1F1F1;
    border: 1px solid #E1E1E1;
    border-radius: 4px;
    color: var(--body-color);
    font-size: 0.8rem;
}
body .markdown p > code {
    margin: 0 0.2rem;
}
body .markdown pre {
    color: var(--body-color);
    overflow: initial;
    width: fit-content;
}
body .markdown pre code {
    white-space: pre;
    display: block;
}

body .markdown p {
    margin-bottom: 1em;
}

body .markdown :last-child {
    margin-bottom: 0;
}

/* #endregion */


.dropdown-toggle-no-arrow::after {
    content: unset;
}

/* Backward compat: old markup uses `no-after` to suppress dropdown caret */
.dropdown-toggle.no-after::after,
.btn.dropdown-toggle.no-after::after,
.no-after::after {
    display: none !important;
    content: none !important;
}

.custom-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='hsla(0,0%,25%,0.75)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-size: 16px;
    background-position-x: calc(100% - 8px);
}



dl.dl-horizontal {
    display: flex;
    margin-bottom: 0;
}
dl.dl-horizontal dt {
    font-weight: 500;
}
dl.dl-horizontal dd {
    margin-bottom: 0;
}
dl.dl-horizontal dt + dd {
    margin-left: 0.5em;
}
dl.dl-horizontal dd + dt {
    margin-left: 1.5em;
}
/* #region ==================== LANG SWITCHER */

.lang-switcher .dropdown {
    font-size: 0.8em;
    display: inline-flex;
    color: hsla(0, 0%, 100%, 0.9);
}
.lang-switcher .dropdown * {
    font-size: inherit;
}
.lang-switcher .dropdown a {
    color: inherit;
    text-decoration: none;
}
.lang-switcher .dropdown img {
    height: 1em;
}

.lang-switcher .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.375em 0.75em;
    background-color: hsl(206deg 29.7% 26.11%);
    border-color: hsl(208, 7%, 43%);
}

.lang-switcher .dropdown-toggle:hover {
    background-color: hsl(206, 7%, 38%);
    border-color: hsl(210, 8%, 36%);
}

.lang-switcher .dropdown-toggle::after {
    margin-top: 0.2em;
    margin-left: 0.5em;
}
.lang-switcher .language {
    display: inline-flex;
    align-items: center;
}
.lang-switcher .dropdown-menu .language {
    padding-left: 1em;
}
.lang-switcher .language img + span {
    margin-left: 0.5em;
}
.lang-switcher .dropdown-menu a {
    text-shadow: none;
    color: hsla(0, 0%, 0%, 0.8) !important;
}

/* #endregion */
.nav-user .dropdown * {
    font-size: inherit;
}
.nav-user .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.4em 0.6em 0.4em 0.5em;
    padding: 0.4em 0.5em;
}
.nav-user .dropdown-toggle::after {
    /* margin-left: 0.5em; */
    /* margin-top: 0.2em; */
    margin-left: 0 !important;
    color: hsl(0, 0%, 0%, 0.5);
}
.nav-user .dropdown-toggle .picture {
    width: 2em;
    height: 2em;
    border-radius: 25%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-user .dropdown-toggle .picture img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.nav-user .dropdown-toggle .display_name {
    flex-grow: 1;
    white-space: nowrap;
    max-width: 10em;
    text-overflow: ellipsis;
    overflow: hidden;
    /* line-height: 1.5; */
}
.nav-user .dropdown-toggle .picture + .display_name {
    margin-left: 0.5em;
}
# Gate/Welcome logo version badge
#company-logo { position: relative; display: inline-block; }
#company-logo .version-badge{
  position: absolute;
  top: 0px;
  right: 0px;
    padding: 2px 6px;
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
    color: #fff;
    background: #ff0101;
    pointer-events: none;
}