/* auto-generated colors to override main accent color */
body.dark {
    --primary: #8dcdff;
    --on-primary: #00344f;
    --primary-container: #004b70;
    --on-primary-container: #cae6ff;
    --secondary: #b7c9d9;
    --on-secondary: #22323f;
    --secondary-container: #384956;
    --on-secondary-container: #d3e5f5;
    --tertiary: #cfc0e8;
    --on-tertiary: #362b4b;
    --tertiary-container: #4d4162;
    --on-tertiary-container: #ebddff;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffb4ab;
    --background: #1a1c1e;
    --on-background: #e2e2e5;
    --surface: #111416;
    --on-surface: #e2e2e5;
    --surface-variant: #41474d;
    --on-surface-variant: #c1c7ce;
    --outline: #8b9198;
    --outline-variant: #41474d;
    --shadow: #000000;
    --scrim: #000000;
    --inverse-surface: #e2e2e5;
    --inverse-on-surface: #2e3133;
    --inverse-primary: #006493;
    --surface-dim: #111416;
    --surface-bright: #37393c;
    --surface-container-lowest: #0c0e11;
    --surface-container-low: #1a1c1e;
    --surface-container: #1e2022;
    --surface-container-high: #282a2d;
    --surface-container-highest: #333537;
}

#passwordTableContainer {
    table:not(:has(td)) {
        width: 80vw;
    }

    table:has(td) {
        width: 90vw;
    }

    input {
        width: 97%
    }

    td {
        width: 20%;
        overflow: scroll;
        white-space: nowrap;
        scrollbar-color: #8dcdff #8dcdff; /* work around white square issue if scrollbar color is unset */
        max-width: 0;
    }


    td:has(button) {
        /* prevent buttons from stacking */
        white-space: nowrap;
        /* make buttons float beside table by removing border */
        border: none;
        /* make buttons more compact */

        button {
            margin: 0 3px 0 0;
        }
    }

    /* make more space for content cells */

    .strengthCell {
        width: 15%;
        white-space: nowrap;
    }

}

/* define main layout */
.mainContainer {
    margin-top: 15px;
    margin-left: 10vw;
    margin-right: 10vw;
}


button:disabled {
    cursor: initial !important; /* remove cursor change over invisible unclickable buttons */
}

/* animate buttons */

button {
    transition: 75ms !important;
    white-space: nowrap;
}

button:hover {
    scale: 115%;
}

button:active {
    scale: 100%;
}

label {
    /* labels are only here for screen readers (borrowed from tailwind css sr-only class) */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}