:root {
    --kvp-key-width: 110px;
}

/* STRUCTURE ELEMENTS */

.headerPalette {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

DIV#main {
    display: flex;
    min-width: 100%;
    min-height: calc(100vh - 60px);
}


DIV#sutil-app {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

DIV#sidebar {
    padding-right: 0;
    width: 300px;

    /* enforcing width for flexbox */
    min-width: 300px;
}

@media (max-width: 768px) {
    DIV#main {
        flex-direction: column;
    }

    DIV#sidebar {
        width: 100%;
        min-height: initial;
    }
}

DIV#content {
    flex-grow: 1;
}

DIV#content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - 60px);
    justify-content: space-between;
}

FOOTER {
    text-align: center;
    margin-bottom: 0.5em;
    opacity: 0.7;
    font-size: 14px;
}

DIV#sidebar NAV {
    min-height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

DIV#sidebar NAV A.active {
    font-weight: bold;
}

DIV#sidebar NAV A.nav-link {
    display: flex;
    align-items: center;
    font-size: 16px;
    column-gap: 5px;
    padding-top: 0;
}

DIV#sidebar NAV A.nav-link-disabled {
    opacity: 0.4;
}

DIV#sidebar NAV UL UL {

}

DIV#sidebar NAV UL UL A {
    font-size: 0.9em;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2em;
}


DIV.rbx-notification {
    padding: 0.5em 1em;
    border-radius: 3px;
}

DIV.rbx-callout {
    padding: 0.6em 1em;
    position: relative;
    margin-bottom: 0.5em;
    border-left-width: 2px;
    border-style: none none none solid;
}

DIV.rbx-callout-heading {
    font-weight: 600;
    margin-bottom: 0.1em;
}

.rbx-box-danger {
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
    color: var(--bs-danger-text-emphasis);
    --bs-link-color-rgb: var(--bs-danger-text-emphasis-rgb);
}

.rbx-box-danger TD {
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
    color: var(--bs-danger-text-emphasis);
}

.rbx-box-info {
    background-color: var(--bs-info-bg-subtle);
    border-color: var(--bs-info-border-subtle);
    color: var(--bs-info-text-emphasis);

    /* this does not look good on the light background */
    /* --bs-link-color-rgb: var(--bs-info-text-contrast-rgb); */
    --bs-link-color-rgb: var(--bs-info-text-emphasis-rgb);
}

.rbx-box-info TD {
    background-color: var(--bs-info-bg-subtle);
    border-color: var(--bs-info-border-subtle);
    color: var(--bs-info-text-emphasis);
}

.rbx-box-warning {
    background-color: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
    color: var(--bs-warning-text-emphasis);
    --bs-link-color-rgb: var(--bs-warning-text-emphasis-rgb);
}

.rbx-box-warning TD {
    background-color: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
    color: var(--bs-warning-text-emphasis);
}

.rbx-box-success {
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
    color: var(--bs-success-text-emphasis);
    --bs-link-color-rgb: var(--bs-success-text-emphasis-rgb);
}

.rbx-box-success TD {
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
    color: var(--bs-success-text-emphasis);
}

/*H2 {
    font-size: 26px !important;
    font-weight: 600 !important;
}
*/

DIV.rbx-field {
    margin-top: 0.7rem;
}

DIV.rbx-field > LABEL {
    /*font-weight: 600;*/
    /*opacity: 85%;*/
}

.rbx-field > DIV {
    font-size: 1em;
    /*border: 1px solid gray;*/
    border-radius: 4px;
    cursor: text;
}

.rbx-field > DIV:hover {
    /*border: 1px solid black;*/
}
.rbx-field > DIV:focus {
    /*border: 2px solid rgb(21,101,192);*/
}

DIV.rbx-field-description {
    font-size: 0.875em;
    opacity: 60%;
}

.rbx-file-path {
    font-family: monospace;
    font-size: 0.875em;
}

.rbx-inactive {
    opacity: 0.7;
}

.ms-indent {
    margin-left: 0.4rem !important;
    padding-left: 1.6rem !important;
}


INPUT[type=text], INPUT[type=password] {
    font-size: inherit;
    min-width: 0;
    width: 100%;
    margin: 0;
    /*border: 1px dotted black;*/
}

INPUT[type=text]::placeholder, INPUT[type=password]::placeholder {
    opacity: 0.5;
}

INPUT[type=radio] {
    margin-right: 0.4em;
}

LABEL.rbx-radio {
    margin-right: 1.2em;
}

FIELDSET {
    display: block;
    padding: 0 0 1em 1em !important;
    border: 1px solid #ccc !important;
}

LEGEND {
    /*font-weight: 600;*/
    /*margin-left: -1em !important;*/
    /*padding: 0 1em !important;*/
    /*opacity: 85%;*/
}

TEXTAREA.form-control {
    margin-bottom: 0.5em;
}

DIV.box-box {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0;
    margin-bottom: 1em;
}

DIV.box-box > DIV.box-caption {
    font-weight: 600;
    padding: 0.3em 1em 0.3em 0.75em;
}

DIV.box-box > DIV.box-content {
    padding: 0.6em 1em 0.3em 0.75em;
}

LI.breadcrumb-item:last-child SPAN {
    font-weight: bold;
}

CODE {
    font-family: monospace;
    font-size: 0.9em;
}

.typography-mono {
    font-family: monospace;
    font-size: 0.9em;
}

svg {
    width: 1em;
    height: 1em;
    box-sizing: content-box !important;
    display: inline-block;
}

svg.icon-small {
    font-size: 1.25rem;
}

sup svg.icon-small {
    font-size: inherit;
}

svg.icon-normal {
    font-size: 1.5rem;
}

svg > path {
    fill: currentColor;
}

BUTTON {
    display: flex;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1rem;
    border: 1px solid transparent;
}

BUTTON.full-width {
    width: 100%;
    display: block;
}

BUTTON.rbx-is-loading::after {
    animation: spinAround 500ms infinite linear;
    border: 2px solid #dbdbdb;
    border-radius: 9999px;
    border-right-color: transparent;
    border-bottom-color: transparent;
    content: "";
    display: block;
    height: 1em;
    width: 1em;
    margin-left: 2em;
}

BUTTON.clr-l2 {
    opacity: 0.8;
}

/* vitz */
.navbar-brand a {
    text-decoration: none;
    font-weight: bold;
}

.box-box table th {
    line-height:normal;
}

label > input[type=checkbox] {
    margin-right: 0.5em;
}

input[type=range] + span {
    margin-left: 0.5em;
    position:relative;
    top: -.8ex;
}

button + button {
    margin-left: 1em;
}

.max-width-120 {
    max-width: 120px;
}

.max-width-150 {
    max-width: 150px;
}

.width-150 {
    width: 150px;
}

.max-width-200 {
    max-width: 200px;
}

.max-width-300 {
    max-width: 300px;
}

.max-width-400 {
    max-width: 400px;
}

.max-width-600 {
    max-width: 600px;
}

.max-width-800 {
    max-width: 800px;
}

.max-width-1000 {
    max-width: 1000px;
}

.max-width-1200 {
    max-width: 1200px;
}

.opa25 { opacity: 0.25; }
.opa50 { opacity: 0.5; }

.row { margin-right: 0; }

/* Bootstrap overrides */
DIV.modal {
    width: 100vw; /* originally 100% which may be more than viewport for small screens */
}

/* Bootstrap color overrides */

/* TODO: style input[type=range] -- see https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */

.btn-primary {
    --bs-btn-color: var(--bs-primary-text-contrast);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary-text-contrast);
    --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.8);
    --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 0.8);
}

.rbx-callout .btn-outline-primary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-btn-bg);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 0.8);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: rgba(var(--bs-primary-rgb), 0.8);
    --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 0.8);
}

.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-switch .form-check-input {
    color: var(--bs-primary-text-contrast);
    --bs-form-switch-bg: var(--bs-form-switch-bg-url);
}

.pro-feature-box {
    border-left: #ffd700 2px solid;
    padding-left: 15px;
    margin-left: 4px;
    margin-top: 10px;
    box-shadow: -4px 0 2px #ffd700;
    clip-path: inset(0px 0px 0px -20px);
}

.pro-feature-box-caption {
    color: #da9100;
}

H5.section-header {
    font-size: 1.0rem;
    font-weight: 600;
}

.text-center {
    text-align: center;
}

TH { font-size: 0.9em; font-weight: normal; padding-bottom: 2px !important; vertical-align: middle; }
TD:first-child, TH:first-child { padding-left: 0;}

DIV.ui-box {
    border-top: solid 1px var(--bs-border-color);
    padding-top: 1.5em;
    margin-top: 1.5em;
    margin-bottom: 1em;
}

DIV.ui-box:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 1em;
}

DIV.ui-box > H6 { font-weight: 600; }

/* smaller margin between toasts */
.toast-container > :not(:last-child) {
    --bs-toast-spacing: 0.5rem;
}

DIV.cookies-bar A {
    margin-right: 10px;
    font-size: smaller;
}

/* PAGE-SPECIFIC CSS */
DIV.page-home TABLE.installation-info > TBODY > TR > TD:first-child {
    width: 200px;
    opacity: 0.7;
}

.flex-h {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex-v {
    display: flex;
    flex-direction: column;

}

DIV.kvp {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0.3em;
    margin: 0.3em;
    border-top: solid 1px var(--bs-border-color);
    font-size: 14px;
}

/* kvp row */
DIV.kvp > DIV {
    display: flex;
    flex-direction: row;
}

/* caption */
DIV.kvp > DIV > DIV:only-child {
    font-weight: bold;
}

DIV.kvp > DIV > DIV:first-child {
    min-width: var(--kvp-key-width);
    text-align: right;
}

DIV.kvp > DIV > DIV:nth-child(2) {
    padding-left: 15px;
    word-break: break-all;
    min-width: 0;
}

DIV.expandable-string {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    text-decoration: underline;
}

DIV.expandable-string.expanded {
    word-break: break-all;
    text-overflow: initial;
    white-space: wrap;
    text-decoration: none;
}

.modal-private-key {
    /* --bs-modal-width: 560px; */
    --kvp-key-width: 130px;
}

.rbx-explanation {
    font-size: 16px;
    opacity: 0.9;
}

/* text, which, when clicked, will become editable */

SPAN.inline-edit {
    border-bottom: dotted 1px black;
}

/* prevent width: 100% for textbox */
SPAN.inline-edit-active > INPUT {
    width: initial;
}