:root {
    /*Colors*/
    --orange: #ff8c00;
    --white: #ffffff;
    --black: #000000;
    --light-grey: #c1c1c1;
    --medium-grey: #8e8e8e;
    --dark-grey: #717171;
    --light-blue: #e5f2ff;
    --medium-blue: #d3e8fe;
    --dark-blue: #bdddff;
    --background-color: #f2f2f2;
    --button-hover-color: #696969;
    --card-background-color-blue: #bdddff;
    --border-radius: 10px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url("../images/background_dark_cropped.jpg");
}

/* Style the header */
.header-common {
    height: 15vh;
    width: 100vw;
    position: fixed;
    z-index: 1;
    padding: 0px 10px 0px 20px;
    line-height: 1vh;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Style the sidebar-common */
.sidenav-common {
    align-content: stretch;
    height: 83vh;
    width: 15vw;
    position: fixed;
    z-index: 1;
    top: 15vh;
    left: 1vw;
    background-color: transparent;
    overflow-x: hidden;
    overflow-y: hidden;
    display: grid;
    grid-template-rows: auto auto;
}

/* Style the content-common */
.content-common {
    height: 83vh;
    width: 75vw;
    position: fixed;
    z-index: 1;
    top: 15vh;
    left: 16vw;
    background-color: var(--background-color);
    overflow-x: hidden;
    overflow-y: hidden;
    border: 1px solid grey;
    border-radius: 10px;
    box-shadow: 2px 2px 1px 1px black;
    display: grid;
    grid-template-rows: 10% 80% 10%;
}

/* Style the content-dashboard */
.content-dashboard {
    height: 83vh;
    width: 75vw;
    position: fixed;
    z-index: 1;
    top: 15vh;
    left: 16vw;
    background-color: var(--background-color);
    overflow-x: hidden;
    overflow-y: hidden;
    border: 1px solid grey;
    border-radius: 10px;
    box-shadow: 2px 2px 1px 1px black;
    display: grid;
    grid-template-rows: 30% 70%;
}

/* Style the sidebar-common-buttons */
.sidenav-common-button {
    background-color: var(--background-color);
    color: var(--black);
    padding: 1vw;
    text-align: center;
    text-decoration: none;
    font-size: 1vw;
    margin: 0vh 0vw 1vw 0vw;
    cursor: pointer;
    width: 90%;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    overflow-x: hidden;
    overflow-y: hidden;
    border: 1px solid var(--medium-grey);
    border-radius: 10px;
    box-shadow: 2px 2px 1px 1px var(--black);
    max-height: 6vh;
}

    .sidenav-common-button:hover {
        background-color: var(--button-hover-color);
    }

/* Style header font sizes */
h1 { font-size: 2vw;   }
h2 { font-size: 1.5vw;   }
h3 { font-size: 1vw; }
h4 { font-size: .75vw; }
h5 { font-size: .50vw; }
h6 { font-size: .30vw; }

.border {
    border: 1px solid var(--medium-grey);
    border-radius: var(--border-radius);
}

.shadow {
    box-shadow: 1px 1px 1px 1px var(--black);
}

.shadow-light {
    box-shadow: 1px 1px 1px 1px var(--light-grey);
}

.cardview {
    text-align: center;
    align-content:center;
    background-color: var(--background-color);
    border: 1px solid var(--medium-grey);
    border-radius: var(--border-radius);
    box-shadow: 1px 1px 1px 1px var(--black);
}

table {
    width: 74vw;
}

th {
    background-color: var(--dark-blue);
    font-size: .75vw;
    font-style: italic;
    text-align: left;

}

tr {
    font-size: .75vw;
    font-style: normal;
    text-align: left;
}
/*
tr:nth-child(odd) {
    background-color: red;
}

tr:nth-child(even) {
    background-color: green;
}*/

tr:hover {
    background-color: var(--medium-blue);
}
td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

tr > td:hover {
    overflow: visible;
    white-space: unset;
}