:root {
    --shadow: 0 0 2px #aaaaaa;
    --trello-shadow: 0 1px 1px #091E4240, 0 0 1px #091E424F;
    --azul-profundo: #1a0e38;
    --azul: #3f3ff9;
    --azul-turquesa: #4dc1ec;
    --turquesa: #54fce3;
    --cor-fonte: #555555;
    --cor-destaque: #55a99c;
}

body {
    --fundo: #f8f8f8;
    background: var(--fundo);
    --tema: #1a0e38;
}

header {
    background: var(--fundo);
}

body > header menu {
    background: var(--fundo);
}

body > header menu, header.estatico {
    background: var(--azul-profundo);
}

h1, h2, h3 {

}

a, a:hover {
    color: var(--tema);
}

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

a[href]:hover {
    text-decoration: underline;
}

body > header menu a:hover {
    background-color: #e5e5e5;
}

body > header menu a[href] {
    color: white;
    font-weight: normal;
}

body > header menu a:hover, body > header menu a[href]:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--turquesa);
}

body > header a#logo, header a.logo {
    background: url("../img/logo-horizontal.svg") no-repeat left center;
    background-size: 8rem;
}

.buttons > div button, .buttons > div a.button {
    color: var(--azul-profundo);
}

:is(#home, menu, .buttons) a:hover {
    text-decoration: none;
}

@media (min-width: 1024px) {
    header a.logo {
        flex: 0 0 9.5rem;
    }

    th {
        background: var(--tema);
        color: white;
    }
}

body > header a#logo::before, header a.logo::before {
    content: "";
    display: none;
}

body > header > span.nome {
    color: var(--azul-profundo);
}

button.person-pin, a.button.person-pin, body > header button.person-pin {
    background-image: url("../img/person-pin-azul-profundo.svg");
}


body > header a.button.input {
    background-image: url("../img/input-green.svg");
}

button:hover, a.button:hover {
    background-color: #e5e5e5;
}

button:active, a.button:active {
    background-color: #d0d0d0;
}

button.novo, a.button.novo, button.next, a.button.next {
    background-color: var(--tema);
}

button.novo:active, a.button.novo:active, button.next:active, a.button.next:active {
    background-color: var(--tema);
}

button.novo, a.button.novo {
    background-image: url("../img/add-white.svg");
}

button.help.green, a.button.help.green {
    background-image: url("../img/help-green.svg");
}

th {
    background: white;
    color: var(--azul-profundo);
    padding: 0.25rem 0.5rem;
}


td {
    background: white;
}

@media screen and (min-width: 768px) {
    table.cards.mob th {
        padding: 0.25rem 0.5rem;
    }
}

.tabs > nav a {
    background: #f1f1f1;
    color: #737373;
}

.tabs > nav a:hover {
    background: #f1f1f1;
}

.tabs > nav a.sel {
    background-color: #f1f1f1;
    border-bottom: 2px solid var(--tema);
}

.campos > .campo input, .campos > .campo textarea, .campos > .campo select {
    background: #e8e8e8;
}

.campos > .campo input:hover, .campos > .campo textarea:hover, .campos > .campo select:hover {
    background-color: #e0e0e0;
}

.campos > .campo input:focus, .campos > .campo textarea:focus, .campos > .campo select:focus {
    background-color: #e0e0e0;
    border-bottom: 2px solid var(--tema);
}

#menu-tema, #menu-tema::before {
    display: none;
}

button.filter.filtered, a.button.filter.filtered {
    background-image: url("../img/filter-green.svg");
}

.botoes button.primario, .botoes a.button.primario, .butbot.primario {
    background: var(--azul-profundo);
}

.botoes button.primario:hover, .botoes a.button.primario:hover, .butbot.primario:hover {
    background: #1a0e1f;
}

.botoes button.primario:active, .botoes a.button.primario:active, .butbot.primario:active {
    background: black;
}

#alerta .act > a {
    color: white;
}

#loading, .loading {
    background: url("../img/loading-white.svg") no-repeat center var(--tema);
}

table.cards td:before {
    color: var(--tema);
}

select, option {
    background: white;
}

table.cards tr td, table.cards.mob tr td, table.cards.tab tr td, table tr {
    background: white;
}

tr.sel,
tr.sel th,
tr.sel td,
tr.sel:hover td,
table.cards tr.sel td,
table.cards.mob tr.sel td,
table.cards.tab tr.sel td,
table tr.sel {
    background: #e8f0fe;
}

table.cards.tab td.acoes {
    align-self: stretch;
}

button.toggle.on, a.button.toggle.on {
    background-image: url("../img/toggle-on-green.svg");
}

button.tune.tuned, a.button.tune.tuned {
    background-image: url("../img/tune-green.svg");
}

.shadow {
    box-shadow: 1px 1px 4px #e0e0e0;
}

table.cards tr {
    margin-bottom: 0.375rem;
    border-radius: 2px;
}

header.estatico button.voltar {
    background-image: url("../img/back-white.svg");
}

header.estatico :is(button:hover, a.button:hover) {
    background-color: rgba(255, 255, 255, 0.1);
    background-image: url("../img/back-turquesa.svg");
}

body > header menu a.logo:hover, body > header menu a.logo[href]:hover {
    background-color: transparent;
}

button.menu, a.button.menu {
    background-image: url("../img/menu-azul-profundo.svg");
}

body > header menu section {
    border-bottom: 1px solid #f2f2f2;
}

.botoes button:hover, .botoes a.button:hover, .butbot:hover {
    text-decoration: none;
}

.carregando {
    background-image: url("../img/loading-dark-azul-profundo.svg");
}