/* Simple dashboard grid CSS */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--white);
}

:root {
  --header-height: 50px;

  /* colors */
  --white: #FFFFFF;
  --black: #000000;

  --light1: #F7F7F7;
  --light2: #E9EAEB;
  --light3: #c9cccf;
  
  --dark1: #292B2C;
  --dark2: #888E91;
  --dark3: #AFB4B6;  

  --blue: #0275D8;
}


/* Assign grid instructions to our parent grid container */
.grid-container {
    display: grid;
    grid-template-columns: 270px 1fr;
    grid-template-rows: var(--header-height) 1fr;
    grid-template-areas:
        "header header"
        "sidebar main";
    min-height: 100vh;
}

    /* Give every child element its grid name */
    .header {
        grid-area: header;
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: row;

        padding: 0px 13px;
        background-color: var(--dark1);
        color: var(--white);
        text-align: center;
        line-height: var(--header-height);
        font-size: 1.1rem;
        z-index: 1;
    }
  
    .sidebar {
        grid-area: sidebar;
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0; 
    }

        .sidebar-spacer {
            flex-grow: 1;
        }

        .sidebar-content {
            position: sticky;
            bottom: 0;
            min-height: 100vh;
          
            --padding: 5px;
            padding:
              calc(var(--header-height) + var(--padding))
              var(--padding)
              var(--padding);
            margin-top: calc(0px - var(--header-height));

            background-color: var(--light1);
            color: var(--black);
            border-right: 2px solid var(--light3);
        }
    
    .main {
        grid-area: main;
    }

    .header-left {
        margin: 0px 15px;
    }
        
    .header-greet {
        color: var(--light2);
        font-size: 0.9em;
    }

    .header-spacer {
        flex-grow: 1;
    }
    
    .header-link {
        padding: 0px 8px;
        color: var(--dark2);
        font-weight: bold;
        text-decoration: none;
    }
    
    .header-link:hover {
        color: var(--dark3);     
        text-decoration: none;
    }
    
    .header-link-active {
        padding: 0px 8px;
        color: var(--white);
        font-weight: bold;        
        text-decoration: none;
    }

    .header-link-active:hover {
        color: var(--white);
        text-decoration: none;
    }