@import "brand-W2MTDmk.css";

:root {
    --text-color: #d6d6d6;
    --dark-bg-color: rgb(33, 37, 41);
    --brand-color: #D11FB9;
    --brand-color-hover: #B61BA1;
}

html, body {
    height: 100dvh;
    width: 100dvw;
}

.layout {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.main-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 12px;
}

.nav {
    width: 256px;
}

.nav-link {
    color: var(--text-color);

    &:hover {
        background-color: #323940;
        color: #C7C7C7;
    }
}

.table-action {
    display: flex;
    align-items: center;
    justify-content: center;;
    color: var(--text-color);
    border: unset;
    background-color: var(--brand-color);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    transition: all ease-in 200ms;
    
    &:hover {
        background-color: var(--brand-color-hover)
    }
}

table {
    height: fit-content;
}

thead>tr>th {
    background-color: var(--brand-color) !important;
}

.form-group {
    display: flex;
    flex-direction: column;
    width: fit-content;
}