:root {
    --theme-colour: rgb(97,37,116);
    --highlight-colour: rgba(97,37,116, 0.5);
    --hover-colour: rgba(97,37,116, 0.15);
    --faded-theme-colour: rgba(97,37,116, 0.7);
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

::selection {
    background-color: var(--highlight-colour);
    color: rgb(255,255,255);
}

html {
    height: 100vh;
    width: 100vw;
}

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 50px 1fr;
    z-index: 1;
    color: var(--theme-colour);
}


header {
    grid-row: 1;
    grid-column: 1/3;
    overflow-y: visible;
    color: rgb(255,255,255);
    z-index: 1;
    color: var(--theme-colour);
    background: var(--theme-colour);
    background: linear-gradient(90deg, var(--theme-colour) 0%, rgba(255,255,255,1) 100%);
}

aside.side-menu {
    grid-row: 2;
    grid-column: 1;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr max-content;
    background: linear-gradient(90deg, var(--theme-colour) 0%, var(--faded-theme-colour) 100%);
    height: auto;
}

main {
    grid-row: 2;
    grid-column: 1/3;
    overflow-x: auto;
    overflow-y: auto;
    display: block;
    height: auto;
}
    main.with-side-menu {
        grid-column: 2;
    }
    main.print {
        overflow-y: visible;
        height: auto;
    }
article.assessment-layout {
    display: grid;
    grid-template-columns: 520px max-content;
    grid-template-rows: max-content 1fr;
    height: 100%;
    width: calc(100% - 10px);
    margin: 0 5px;
    grid-column-gap: 5px;
}

    article.assessment-profiles {
        display: grid;
        grid-template-columns: 250px 400px 1fr 1fr;
        grid-template-rows: max-content max-content 1fr;
        height: 100%;
        margin: 0 5px;
        grid-column-gap: 5px;
    }
article.risk-templates {
    display: grid;
    grid-template-columns: 300px 1fr 1fr;
    grid-template-rows: max-content max-content max-content 1fr;
    height: 100%;
    margin: 0 5px;
    grid-column-gap: 5px;
}
    article.risk-templates.view {
        min-width: 1150px;
        grid-template-columns: 470px minmax(320px, 1fr) minmax(320px, 1fr);
        grid-template-rows: max-content max-content max-content 1fr;
    }
article.create-emar {
    display: grid;
    grid-template-columns: 500px 500px;
    grid-template-rows: 500px;
    height: 100%;
    margin: 0 5px;
    grid-column-gap: 5px;
}
.create-emar .emar-periods {
    display: grid;
    grid-template-columns: 450px 45px;
    grid-template-rows: auto;
}
.planner-settings {
    margin-left: 20px;
    display: grid;
    grid-template-columns: 350px 100px 45px 45px 35px 45px 55px 45px 55px auto;
    grid-template-rows: auto;
}
.details-window {
    display: grid;
    grid-template-columns: 600px 600px;
    grid-template-rows: auto auto auto;
}
article.invoice-details {
    display: grid;
    grid-template-columns: 450px 1fr 300px;
    grid-template-rows: 45px 45px 45px 45px 45px max-content 1fr;
    height: 100%;
    margin: 0 5px;
    grid-column-gap: 5px;
}
article.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px 5px;
    grid-template-rows: repeat(4, 1fr);
    height: 100%;
}

    article.grid article.row {
        grid-column: 1/5;
    }

    article.grid article.column {
        grid-row: 1/5;
    }

    article.grid article.full-page {
        grid-column: 1/5;
        grid-row: 1/5;
    }
/*Staff Pay Summary*/
article.staffpay {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px 5px;
    grid-template-rows: 100px 1fr;
    height: 100%;
    min-width: 1200px;
}
article.staffpay.extra-wide {
    min-width: 1570px;
}