/* (c) 2026 Gerald Forster */

h2 {
    font-size: 20px;
    margin-top: .8rem;
    margin-bottom: .05rem;
}

label {
    display: block;
    margin-bottom: .2rem;
}
div.field-wrapper {
    position: relative;
    width: 100%;
    max-width: 60rem;
    margin-bottom: .7rem;
}
input:focus {
    border-color: black;
}
input#id_your_input {
    width: 100%;
    padding: 5px 3.2rem 5px 5px;  /* Right: leave space for the clear button */
    /* padding-right: 40px; 
    padding-top: 5px;
    padding-bottom: 5px; */
    box-sizing: border-box;
}
#clear_button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    /* background-color: #ff4c4c; */
    /* color: white; */
    /* border: none; */
    cursor: pointer;
    padding: 5px 10px;
    padding: 2px 10px;
    padding: 2px;
    z-index: 1;
    /* margin-left: 2rem; */
}
/* #submit_button {
    color: #fafafa;
    background-color: rgb(30 64 175);
}
#submit_button:active {
    background-color: rgb(80, 101, 169);
} */

/* Vgl. https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css/69164710 */
input[type='checkbox'] {
    accent-color: rgb(30 64 175);
    /* filter: brightness(95%) saturate(100) hue-rotate(25deg); */
    filter: brightness(100%) saturate(100) hue-rotate(25deg);
    transform: scale(1.2);

    /* accent-color: blue;
    filter: invert(30%) sepia(99%) saturate(6101%) hue-rotate(202deg) brightness(52%) contrast(136%); */
}
input[type='checkbox']:checked {
    filter: none;
}

label {
    display: inline;
    font-size: 18px;
}
ul.errorlist {
    padding-left: 0;
    margin-bottom: .1rem;
}
ul.errorlist li {
    color: var(--error-color);
    list-style-type: none;
    /* margin-left: -1rem;
    padding-left: 0; */
}

.txri {
    text-align: right;
}

table#tbl_string, table#tbl_chars {
    width: 100%;
    border: 1px solid black;
    /* margin-bottom: .8rem; */
    margin-top: 0;
    margin-bottom: 0;
}
th, td {
    border: none;
}
td {
    /* border-bottom: 1px solid #ddd; */
    /* vertical-align: top; */
    padding-top: 0;
    padding-bottom: 0;
}
td.light {  /* border-bottom light color */
    border-bottom: 1px solid #ccc;
}
td.dark {  /* border-bottom dark color */
    border-bottom: 1px solid black;
}

/* large display */
@media screen and (min-width: 641px) {
    /* table {
        width: none;
    } */
    col#string1 {
        width: 12rem;
    }
    col#chars1 {
        width: 3rem;
    }
    col#chars2 {
        width: 9rem;
    }
    /* td {
        border: 1px solid blue;
    } */
}