html {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select:   none; /* Safari */
    -khtml-user-select:    none; /* Konqueror HTML */
    -moz-user-select:      none; /* Firefox */
    -ms-user-select:       none; /* Internet Explorer and Edge */
    user-select:           none; /* Chrome and Opera */

/*  --dark-color:      #585858; */
    --dark-color:      #212121;
    --content-color:   #313131;
/*  --light-color:     #ff8800; */  /* Red-Orange      */
/*  --light-color:     #dd8800; */  /* Orange          */
/*  --light-color:     #6a6a6a; */  /* Dark Grey       */
/*  --light-color:     #336699; */  /* Grey Blue       */
    --light-color:     #1f9ede;     /* Light Blue      */
/*  --light-color:     #ffdd20; */  /* Yellow          */
    --darktext-color:  #010101;
/*  --lighttext-color: #ffaa22; */  /* Brighter Orange */
    --lighttext-color: #3fbefe;     /* Lighter Blue    */

    --marker-color:    #ff0000;
}

.force-select {  
    -webkit-touch-callout: all;
    -webkit-user-select:   all;
    -khtml-user-select:    all;
    -moz-user-select:      all;
    -ms-user-select:       all;
    user-select:           all;
}

.force-overflow {
    overflow: auto;
    padding: 1rem;
}

/* Generic Elements */

br {
    line-height: 6px;
}

a:link {
    color: var(--light-color);
}
a:visited {
    color: var(--light-color);
}
a:focus {
    color: var(--light-color);
}
a:hover {
    color: var(--lighttext-color);
}
a:active {
    color: var(--light-color);
}

/* Common Elements */

body {
    height: 100vh;
    width: 100vw;

    cursor: default;
    font-family: arial;
    overflow: hidden;

    background-color: var(--dark-color);

    box-sizing: border-box;
}

*, ::before, ::after {
    box-sizing: inherit;
}

#Screen {
    position: absolute;
    /* add 1px, otherwise border is cutted off on right side and bottom */
    height: calc(95vh + 1px);
    width: calc(95vh * 0.6 + 1px);
    min-width: 400px;
    max-width: 98%;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    overflow: auto;
    font-size: 16px;
    border:2px solid var(--light-color);
}

#Title {
    width: 100%;
    height: 55px;
    overflow: hidden;
    align-items: center;
    display: flex;
    background: var(--light-color);
}

#TitleText {
    font-size: 30px;
    font-weight: bold;
    color: var(--dark-color);
    vertical-align:middle;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
}

#Login {
    position: absolute;
    right: 15px;
    width: 30px;
    height: 30px;
}

#Body {
    top: 55px;
    overflow: visible;
    background: var(--dark-color);
}

.Header {
    margin-top: 5%;
    margin-left: 5%;
    width: 90%;
    height: 35px;
    overflow: hidden;
    background: var(--light-color);
    display: flex;
    align-items: center;
    border:1px solid var(--light-color);
}

.HeaderText {
    font-size: 22px;
    font-weight: bold;
    color: var(--dark-color);
    vertical-align:middle;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
}

.Content {
    margin-left: 5%;
    width: 90%;
    overflow: hidden;
    background: var(--content-color);
    display: flex;
    align-items: center;
    border:1px solid var(--light-color);
}

.ContentText {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    color: var(--light-color);
    vertical-align:top;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
}

.NavBar {
    position: relative;
    top: 0;
    margin: 5%;
    width: 90%;
    overflow: hidden;
    background: var(--content-color);
    display: flex;
    align-items: center;
    border:1px solid var(--light-color);
}

.NavBarText {
    margin-top: 7px;
    margin-bottom: 7px;
    font-size: 18px;
    color: var(--light-color);
    vertical-align:top;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
}

#ClimaContainer {
    display: table
}

.ClimaContent {
    color: var(--light-color);
    text-align: center;
    width: 90%;
    border:1px solid var(--light-color);
    margin: 1.5em auto;
}

.ClimaHeader {
    color: var(--dark-color);
    margin: 0px;
    background-color: var(--light-color);
    border:1px solid var(--light-color);
}

.ClimaData {
    color: var(--light-color);
    background-color: var(--content-color);
    margin: 0em .5em;
}