@font-face {
    font-family: "Material Symbols";
    font-style: normal;
    font-weight: 400;
    src: url("assets/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
}

.material-icons {
    font-family: "Material Symbols";
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

html,
body {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    color: var(--text, #333333);
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
    color: rgb(0, 100, 200);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: rgb(0, 80, 160);
}

label {
    display: block;
}

input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    -webkit-padding: 0.4em 0;
    padding: 0.4em;
    margin: 0 0 0.5em 0;
    box-sizing: border-box;
}

*:focus-visible {
    outline: var(--primary, orange) solid 1px;
}

input:disabled {
    color: #ccc;
}

/* button { */
/*   color: #333; */
/*   background-color: #f4f4f4; */
/*   outline: none; */
/* } */

/* button:disabled { */
/*   color: #999; */
/* } */

/* button:not(:disabled):active { */
/*   background-color: #ddd; */
/* } */

/* button:focus { */
/*   border-color: #666; */
/* } */