:root {
    --background: #323232;
    --main-color: #4676b7;
    --main-hover-color: #305383;
    --main-secondary-color: #253e5e;
    --border-radius: 10px;
    --small-border-radius: 10px;
    --panel-color: #222;
    --subpanel-color: #2c2c2c;
    --color-red: #af2a20;
    --color-red-hover: #76201a;
    --color-green: #195e19;
    --color-green-hover: #124412;
}

body {
    background: var(--background);
    color: white;
    padding: 0px;
    margin: 0px;

    font-family: 'Montserrat', sans-serif;
}

.headercontainer {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    img {
        height: 100%;
    }

    .title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        margin-left: 10px;

        .main {
            font-size: 24px;
            font-weight: 300;
        }

        .sub {
            font-size: 12px;
            font-weight: 300;
            color: lightgrey;
        }
    }
}

.bodycontainer {
    position: absolute;
    top: 60px;
    bottom: 10px;
    left: 10px;
    right: 10px;


}