:root {
    --default-color: rgb(156 163 175);
    --primary-color: rgb(167 139 250);
    --bg-default-color: rgb(31, 41, 55);
    --overlay-bg-color: rgba(55, 65, 81, 0.75);
    --border-color: rgb(55, 65, 81);
}

html, body, .app, main {
    height: 100%;
}

body {
    font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    color: var(--default-color);
    background: var(--bg-default-color);
}

a {
    text-decoration: none;
}

    a[href] {
        color: var(--primary-color);
    }

    a:hover {
        text-decoration: underline;
    }

    a[href]:hover {
        color: var(--primary-color);
    }

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav a:hover {
    text-decoration: none;
}

button[type=submit], a.button {
    cursor: pointer;
    border: none;
    border-radius: .3rem;
    color: #000;
    font-weight: 600;
    padding: .25rem .75rem;
    margin: 0;
    font-size: 1rem;
    background: var(--primary-color);
    text-transform: uppercase;
}

button[type=button], a.button {
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--primary-color);
}

fieldset {
    border: 1px solid var(--border-color);
    background: rgb(43, 53, 68);
    color: #fff;
}

    fieldset > div {
        margin-bottom: .75rem;
    }

hr {
    margin: 1rem 0;
    border: 1px solid var(
        
        border-color);
    width:90%;
}

label {
}

input {
    border: 0 solid rgb(107 114 128);
    width: 100%;
    border-radius: .125rem;
    border-width: 1px;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-bottom: .3125rem;
    padding-top: .3125rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
    background-color: rgb(31 41 55);
    color: #fff;
}

table {
    border-collapse: separate;
    width: 100%;
    border-color: rgb(229, 231, 235);
}

thead {
    position: sticky;
}

th {
    background-color: rgb(17, 24, 39);
    border-color: rgb(17, 24, 39);
    letter-spacing: .025em;
    text-align: center;
    border-left-width: 0;
    border-width: 1px;
    /*max-width: 3.125rem;*/
    height: 100%;
    color: #fff;
    padding: .75rem 0;
}

td {
    color: rgb(209, 213, 219);
    background-color: rgb(17, 24, 39);
    border-color: rgb(55, 65, 81);
    font-size: .875rem;
    line-height: 1.25rem;
    text-align: center;
    max-width: 16rem;
    border-width: 1px;
    padding: 1rem 1.5rem;
}

    td.text-left {
        text-align: left;
    }

button.btn {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--primary-color);
    padding: .25rem .75rem;
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
}

button.btn-primary {
    background: var(--primary-color);
    color: #000;
}

button.btn-sm {
    padding: .125rem .25rem;
    font-size: .5625rem;
}