/***************** LOGIN STYLES *****************/
div.login_container {
    place-self: center center;

    width: 30em;
    height: 35em;

    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 4em 2px rgba(0, 0, 0, 0.15);

    padding: 1.5em;
    }
div.login_container form {
    height: 100%;
    display: grid;
    grid-template-columns: 6em 1fr;
    grid-template-rows: 1fr 1em 4em 4em 4em;
    grid-gap: 2em;
    }
div.login_container img {
    grid-column:1/3;
    grid-row: 1/2;
    place-self: start center;
    width: 10em;
    }
div.login_container div.error {
    grid-column: 1/3;
    grid-row: 2/3;
    color: red;
    }
div.login_container label {
    place-self: center start;
    color: dimgrey;
    }
div.login_container input {
    padding: 0.5em 1em;
    }
div.login_container button {
    grid-column: 1/3;
    background-color: var(--tertiary-color);

    border: none;
    border-radius: 2px;


    color: var(--tertiary-text-color);
    text-transform: uppercase;
    font-size: 1.2em;

    transition: all 250ms ease-in-out;
    }
div.login_container button:hover {
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);

    cursor: pointer;
    }

/***************** LAYOUT STYLES *****************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    --primary-color: #21467a;
    --primary-text-color: white;

    --secondary-color: #357ba7;
    --secondary-text-color: black;

    --tertiary-color: #59a5bf;
    --tertiary-text-color: black;

    font-family: 'Roboto', sans-serif;
    }
body {
    display: grid;
    grid-template-areas: "header header"
                         "sidebar main";
    grid-template-columns: 200px 1fr;
    grid-template-rows: 4em 1fr;
    }
body:after {
    content: '';
    position: relative;
    top: 0;
    height: 4vh;
    }
header {
    grid-area: header;

    display: grid;
    justify-items: center;
    --wide-padding: 1em;
    grid-template-columns: min-content 1fr min-content min-content;

    background-color: var(--primary-color);
    }
header div.logo {
    grid-column: 1/2;
    grid-row: 1/2;
    place-self: center start;
    padding-left: var(--wide-padding);
    }
header div.logo img {
    width: auto;
    height: 3em;
    }
header div.username {
    grid-column: 3/4;
    grid-row: 1/2;
    place-self: center end;

    padding-right: var(--wide-padding);

    font-family: 'Archivo', sans-serif;
    text-transform: uppercase;
    color: var(--primary-text-color);
    font-weight: 900;
    }
header div.lock {
    place-self: center center;
    grid-column: 4/5;
    grid-row: 1/2;

    padding: 1em;
    }
header div.lock:hover, header div.lock:focus {
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
    }
div.sidebar {
    grid-area: sidebar;

    /*            background-color: var(--secondary-color);
                background: linear-gradient(to bottom, var(--primary-color) 0, var(--secondary-color) 3em);*/
    color: var(--secondary-text-color);
    padding: 2em 0;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    }
div.sidebar input {
    width: 180px;
    padding: 10px;
    margin: 0 0 0 10px;
    border-radius: 1px;
    border: 1px solid black;
    }
div.sidebar p {
    padding: 2em 0 2em 2em;
    }
div.sidebar p:hover, div.sidebar p:focus, div.sidebar p.active {
    background-color: rgba(0, 0, 0, 0.05);
    }
div.sidebar a, div.sidebar a:hover, div.sidebar a:visited {
    text-decoration: none;
    color: inherit;
    }
div.main {
    grid-area: main;

    background-color: white;
    color: black;

    padding: 2em 0 0 2em;
    }
table {
    width: 100%;
    border: none;
    text-align: left;
    }
table td {
    padding: 1em 0.25em;
    }
table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05);
    }
input {
    min-width: 180px;
    padding: 10px;
    border-radius: 1px;
    border: 1px solid black;
    margin: 4px 0;
    }
fieldset {
    max-width: 80em;
    padding: 1em 0;
    margin-bottom: 2em;
    border: none;
    border-top: 1px solid rgb(150,150,150);
    }
legend {
    position: relative;
    left: -1px;

    width: 100%;

    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
    padding: 0.25em 0 0.25em 0.5em;
    }
fieldset div.fieldset {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    }
label {
    place-self: center start;
    }
textarea {
    width: 100%;
    min-width: 100px;

    height: 8em;
    }
button {
    width: 100%;
    padding: 1em;
    background-color: var(--primary-color);

    border: none;
    border-radius: 2px;

    color: var(--primary-text-color);
    text-transform: uppercase;
    font-size: 1.2em;

    transition: all 250ms ease-in-out;
    }
button:hover {
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
    cursor: pointer;
    }
/***************** CLIENT STYLES *****************/

/***************** CASE STYLES *****************/

/***************** DEVICE STYLES *****************/

/***************** INVOICE STYLES *****************/