body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: #2D2E2E;
    color: #F6F7EB;
}

.body {
    margin: 0;
    padding: 0;
}

.nav > li{
    display: inline;
}

.nav a {
    padding: 10px 20px 10px 20px;
    border-right: 1px solid darkgray;
    color: black;
}

a {
    text-decoration: none;
}

/* So all elements inherit the theme color. */
* {
    color: inherit;
}

.right {
    float: right;
}

.logo {
    padding: 10px;
    background-color: green;
    color: white;
}

ul.nav{
    margin: 0;
    background-color: #bbb;
    padding: 10px 0 10px 0;
}

.activeLink {
    background-color: #777;
}

#errorContainer {
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0px;
    width: 100%;
    z-index: 101;
    display: block;
}

.errorPopup {
    padding: 20px;
    color: white;
    animation: errorpopup 0.4s ease-in-out;
}

.errorPopup span {
    display: block;
    position: absolute;
    right: 0;
    padding: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
}

.errorTimeout {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: white;
    height: 2px;
    display: block;
    animation: errortimeout 10s linear 1;
}

.loadingContainer{
    background-color: rgba(0, 0, 0,0.2);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 39px);
    z-index: 10;
}

.centerParent {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

h3 {
    padding-left: 5px;
    border-bottom: 1px solid green;
    border-left: 3px solid green;
}

.login{
    width: 400px;
    color: white;
}

.invite {
    color: white;
    width: 600px;
    padding: 20px;
    border-radius: 10px;
}

.fillPage {
    width: 100%;
    height: calc(100% - 39px);
}

.login label{
    display: block;
    margin: 10px 0;
}

.UserPickDropdown {
    max-height: 200px;
    overflow-y: scroll;
}

.userPickItem {
    padding: 10px 15px;
    border-top: 1px solid gray;
}

.userPickItem .right, .userPickItem h5 {
    display: inline-block;
}

.userPickItem * {
    margin: 0;
    color: white;
}

input.text {
    width: 100%;
}

.login input[type=submit]{
    width: 100%;
    margin-top: 20px;
}

input, button, select {
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    border: none;
    padding: 10px;
    color: white;
}

input::placeholder {
    color: lightgray;
}

input[type=submit]:hover, button:hover {
    background-color: rgba(0,0,0,0.8);
}

.big-logo {
    text-align: center;
    font-size: 20em;
    color: white;
}

.pageHeader {
    padding: 30px 10px;
    background: linear-gradient(to bottom right, green, rgba(0,0,0,0), rgba(0,0,0,0) );
}

.pageHeader *{
    margin: 0;
}

.flex-half {
    flex: 50%;
    padding: 10px;
}

.flex-container {
    display: flex;
}

.componentPortfolio{
    margin: 0 10px;
}

.settings {
    width: 600px;
    margin: auto;
}

.settings input, .settings select {
    width: 100%;
}

.userItem {
    border-bottom: 1px solid gray;
    padding: 15px 0;
}

.modalButton {
    width: initial;
    margin-top: 20px;
    margin-left: 20px;
    width: 80px;
}

@media (max-width: 980px){
    .settings {
        margin: 10px;
        width: calc(100% - 20px);
    }
    .flex-half {
        flex: 100%;
    }
    .flex-container {
        flex-direction: column;
    }
    body {
        zoom: 1.5;
    }
    .invite {
        width: 90%;
    }
}

@keyframes errortimeout {
    from {width: 0%;}
    to {width: 100%}
}

@keyframes errorpopup {
    from {transform: translateY(100%)}
    to {transform: translateY(0)}
}