/* IDK why is this missing in Bootstrap styles because it's standard: https://getbootstrap.com/docs/4.0/components/forms/#form-groups */
table {
    --bs-table-bg: inherit;
}


.form-group {
    margin-bottom: 1rem;
}


.form-button-right form .mb-3:has(button[type="submit"]),
.form-button-right .form-group:has(button[type="submit"]) {
    text-align: right;
}

.material-icons,
.material-icons-outlined {
    position: relative;
    top: 6px;
    margin-top: -6px;
    user-select: none;
}

.invalid-feedback .material-icons,
.invalid-feedback .material-icons-outlined,
small .material-icons,
small .material-icons-outlined {
    font-size: 1.3rem;
}

h1 .material-icons,
h1 .material-icons-outlined ,
h2 .material-icons,
h2 .material-icons-outlined ,
h3 .material-icons,
h3 .material-icons-outlined ,
h4 .material-icons,
h4 .material-icons-outlined ,
h5 .material-icons,
h5 .material-icons-outlined {
    font-size: 1em;
}

.tooltip-hint {
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: help;
}

.collapsible-field {
    display: grid;
    overflow: hidden;
    transition: grid-template-rows 0.4s ease-in-out, visibility 0.4s;;
    grid-template-rows: 0fr;
    visibility: hidden;
}

.collapsible-content {
    min-height: 0;
    transition: opacity 0.3s ease-in-out;
}

.collapsible-field.show {
    overflow: visible;
    grid-template-rows: 1fr;
    visibility: visible;
}

.table-last-borderless>:not(caption)>*:last-child>* {
    border-bottom-width: 0 !important;
}

.table td>ul:last-child,
.table th>ul:last-child {
    margin-bottom: 0;
    padding-left: 1rem;
}