.hideInput {
    visibility: hidden !important;
    height: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

#hid-1, #hid-4 {
    text-transform: lowercase;
}

input[type="date"][readonly] {
    background: #ddd;
}

#appformPageElement .row,
#profilePageElement .row {
    margin-bottom: 1rem;
}

#appformPageElement input[id]:has(+ i),
#profilePageElement input[id]:has(+ i) {
    margin-bottom: 0.05rem;
}
#appformPageElement input[id] + i,
#appformPageElement select[id] + i,
#profilePageElement input[id] + i,
#profilePageElement select[id] + i,
.instruction,
.passwordRequirements {
    font-style: normal;
    display: block;
    margin-bottom: 1rem;
}
.passwordRequirements {
    margin-top: -1.05rem;
}

@media (min-width: 550px) {
    #appformPageElement .checkboxList.twoColumnList,
    #profilePageElement .checkboxList.twoColumnList {
        columns: 2;
        -webkit-columns: 2;
        padding-left: 0;
        list-style: none;
    }
}

/* PWA platform applies display:flex to .checkboxList li, which blockifies the wrapping label and shrinks its width below content size — that's what causes labels like "Bebidas alcoólicas" to wrap even when the column is plenty wide. Restore the li to list-item so the label gets its natural inline flow back. */
#appformPageElement .checkboxList li,
#profilePageElement .checkboxList li {
    display: list-item !important;
}

#appformPageElement .checkboxList label,
#profilePageElement .checkboxList label {
    display: inline !important;
}

.hid19Container > div:first-child {
    width: fit-content;
}

.hid19Container > div:last-child {
    width: fit-content;
    float: left !important;
}

.hid37Container {
    line-height: 1.6;
}

.hid37Container > label {
    display: block;
}

.hid37Container a {
    text-decoration: underline;
}

.hid37Container a.visited {
    color: #551A8B;
}

body:has(#appformPageElement) #dialog-modal,
body:has(#profilePageElement) #dialog-modal {
    top: 5dvh !important; /* so the modal doesn't overflow below the footer */
    max-height: 90dvh;
    overflow: auto;
}

body:has(.privacy) #dialog-modal {
    top: 5dvh !important;
    max-height: 90dvh;
    overflow: auto;
}

#appfrmConfirmCon h1 {
    font-size: 1rem;
}

/* cookies table */
.cookies div {
    width: fit-content;
    margin: auto;
}

.cookies table thead tr th {
    background-color: red;
    color: white;
}

.cookies th,
.cookies td {
    border: 1px #a6a6a6 solid
}

.privacy h2 {
    font-weight: bold;
}