@import "brand.css";

:root {
    --color-inactive: rgb(225, 225, 225);
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: unset;
}

input {
    accent-color: var(--color-bright-red);
}

button {
    background-color: var(--color-bright-red);
    border: 2px solid var(--color-bright-red);
    border-radius: 20px;
    color: var(--color-cream);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    text-transform: uppercase;
    transition: color 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86), background-color 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86), border-color 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

    button[size=large] {
        padding-bottom: 13px;
        padding-left: 31px;
        padding-right: 31px;
        padding-top: 13px;
    }

    button:hover {
        background-color: var(--color-white);
        color: var(--color-bright-red);
    }

    button[type=outlined] {
        background-color: var(--color-white);
        color: var(--color-black);
        border: 2px solid var(--color-black);
    }

        button[type=outlined]:hover {
            color: var(--color-bright-red);
            border: 2px solid var(--color-bright-red);
        }

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: thin solid var(--color-black);
}

th, td {
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
}

v-space {
    display: block;
}

x-icon:not(:defined) {
    font-family: "Material Symbols Outlined";
    display: none;
}

page {
    display: block;
    padding-bottom: 16px;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 16px;
}

center {
    display: flex;
    align-items: center;
    justify-content: center;
}