.ffx-field,
.ffx-field-vert {
    display: flex;
    flex-direction: column;
    margin-block-start: 1rem;
}

.ffx-field-vert-loose {
    display: flex;
    flex-direction: column;
    margin-block-start: 1.5rem;
}

.ffx-field-horz {
    display: flex;
    flex-direction: row;
    margin-block-start: 1rem;
    align-items: center;
    align-content: center;
}


.ffx-label {
    opacity: 0.7;
    padding-inline-end: 5px;
}

.tr_first_td_as_label tr>td:first-child,
.tr_second_td_as_label tr>td:nth-child(2) {
    opacity: 0.7;
}

.ffx-label:has(input) {
    opacity: 1.0;
}

.chars_count {
    text-align: right;
    font-style: italic;
    opacity: 0.8;
}

/* View Label (not for form fields) */
.ffx-vlabel {
    opacity: 0.8;
}

.ffx-vlabel-colon {
    opacity: 0.8;

    &::after {
        content: ': ';
    }
}

.content-label-inline-block label {
    display: inline-block;
}

.content-input-inline-block input {
    display: inline-block;
}

.audit-info {
    margin-block-start: 0.5em;
    font-size: 0.833rem;
    display: inline-block;
    color: #888;
}

.ffx-control {
    width: 100%;
    padding: 6px;
    font-size: 1rem;
    /* color: #555; */
    color: #333;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

textarea.ffx-control {
    padding-block-end: 11px;
    resize: both;
}

.ffx-control:user-invalid {
    outline: 2px solid red;
}


.ffx-control:focus-visible {
    outline: 1px solid #66afe9;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.ffx-required-suffix::after,
.ffx-field-vert:has([required]:not([type=radio])) .ffx-label::after,
.ffx-field-horz:has([required]:not([type=radio])) .ffx-label::after,
.ffx-field-vert:has([required]) .ffx-radio-group-label::after,
.ffx-field-horz:has([required]) .ffx-radio-group-label::after {
    content: ' *';
    font-size: var(--required-field-indicator-font-size);
    color: red;
}

.ffx-control:disabled {
    border: 1px solid #ccc;
    background-color: #ddd;
}

.ffx-combobox-popup {
    background-color: white;
    color: initial;
    border: gray 1px solid;
    border-radius: 3px;
    border-bottom: black 2px solid;

    &>* {
        border-bottom: lightblue 1px solid;
        padding: 5px;
        min-height: 20pt;
    }

    &>*:hover {
        background-color: lightgray;
    }
}

.val-err {
    color: red;
    font-size: .9em;
}

.formx {
    max-width: calc((var(--vw100, 1vw) * 100) - 10px);
    /* 10px for left right padding of main element */

    input[type=checkbox] {
        width: fit-content;
        width: 1.0rem;
        /* not work for dialog elt */
        height: 1.0rem;
    }

    input[type=radio] {
        width: fit-content;
        width: 1.1rem;
        height: 1.1rem;
    }

    input[readonly] {
        background-color: #efefef;
    }

    option:checked {
        box-shadow: 0 0 0 3px lime;
        color: darkorchid;
    }
}

/* **************************************************************************************** */
/*  Repeatable section */
/* **************************************************************************************** */
.repeatable-containerx {
    .addMoreItemButton {
        margin-block-start: 0.5rem;
    }
}

.repeatable-itemx:nth-child(2n) {
    /* The first child is even */
    background-color: #e1e1e1;
}

.repeatable-itemx:nth-child(2n+1) {
    background-color: #d2e2e2;
}

.repeatable-itemx {
    .removeItemBtn {
        align-self: end;
        width: fit-content;
    }
}

/* #css-buttons */
/* ============================================================== buttons/bootstrap ===*/

.btnx {
    user-select: none;
    -webkit-user-select: none;
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border-radius: .25rem;
    border: 1px solid transparent;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.5;
    color: #fff !important;
    font-family: unset !important;
    font-size: larger;
    text-decoration: none !important;
}

.excl-after::after {
    content: " !";
}

/*bootstrap icons*/
i.bi {
    font-size: 1rem;
}

.btnx-primary {
    background-color: #005b8f;
    border-color: #007bff;
}

.btnx-warning {
    background-color: lightsalmon;
    border-color: lightsalmon;
}

.btnx-danger {
    background-color: indianred;
    border-color: indianred;
}

.btnx-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.btnx-basic {
    background-color: gray;
    border-color: lightgray;
}

.button-text-only {
    background-color: transparent !important;
    border: none;
    color: var(--my-link-color);
    cursor: pointer;
    font-weight: 700;
}

.button-text-only:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.btnx:hover:not(:disabled):not(.disable) {
    box-shadow: 2px 2px 2px grey;
    border-radius: 5px;
    border-width: 1px;
    border-color: yellow;
    color: lightyellow;
    transition-timing-function: ease-in-out;
    opacity: 1.0;
}

.btnx:not(:disabled):not(.disable) {
    cursor: pointer;
}

.btnx-disabled {
    color: #aaa;
    background-color: #17a2b8;
    border-color: #17a2b8;
    cursor: text;
    font-size: smaller;
}