body{
    /* background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("1938s.jpg"); */
    background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("1938s2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#map-container,#olmap{
    width:100vw;
    height:100vh;
    position: absolute;
}

#app{
    width:100%;
    height:100%;
    overflow:hidden;
    position: relative;
}

.title{
    color:#009900;
    text-align: center;
    padding-top:3rem;
    padding-bottom:2rem;
}
.infobutton{
    user-select: none;
    position:relative;
    font-weight: bold;
    font-size:1.4em;
    margin-top:10px;
    margin-bottom:10px;
}
.infobutton:after{
    content:'';
    display:inline-block;
    margin-left:5px;
    background-image: url(icon/up-arrow-icon.png);
    width:14px;
    height:14px;
    background-size: 14px 14px;
    transition: 0.3s;
    transform: rotate(180deg);
    position:absolute;
    right:-10px;
}
.infobutton.opened:after{
    content:'';
    display:inline-block;
    margin-left:5px;
    background-image: url(icon/up-arrow-icon.png);
    width:14px;
    transform: rotate(0deg);
    height:14px;
    
    background-size: 14px 14px;
}
h1.maintitle{
    color:#8dc63f;
    text-align: center;
    padding-bottom:4rem;
}
#info,#convert{
    padding:15px;
    padding-top:5px;
    overflow-y: scroll;
}

.infocontent{
    text-align: justify;
}
.infocontent ol{
    list-style: decimal;
    margin-left:10px;
}
.infocontent ul{
    list-style: none;
    margin-left:10px;
}
.infocontent ul li::before{
    content:'–';
    font-size:1.5em;

}
.infocontent img{
    width:40%;
    margin:0 auto;
    display:block;
}

section{
    color:#eee;
    height:100vh;
    text-align: justify;
}
input{
    background-color: #eee;
}
input[type="submit"] {
    background-color: #eee;
    padding: 0.6rem;
    height: initial;
}
h2{
    text-align: center;
    padding-bottom:1rem;
}
ul {
list-style: none; /* Remove default bullets */
}
h3{
    text-align: center;
    padding-bottom:2rem;
}
ul li::before {
content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: #009900; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -.8em; /* Also needed for space (tweak if needed) */
}
.ol-scale-line{
    height:5px;
    top:80px;
    font-size:5px;
    padding:0;
    
}
.ol-scale-line-inner{
    color:black;
    border:0;
}
form a{
    border-radius: 10px;
    font-family: Roboto-Medium;
    background-color: #009900;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    padding:0.6rem;
    position: relative;

}
.centerlogo{
    max-width: 200px;
    width:100%;

}
.center{
    display:flex;
    justify-content: center;
    align-items: center;
}
.biggreenbutton{
    display:block;
    margin:40px 0;
    width:100%;
    background: #8dc63f;
    padding: 8px;
    font-family: Roboto-Medium;
    font-size: 14px;
    text-decoration: none;
    text-align: center;

    color: #eee;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    user-select: none;
}

form input {
    border: 2px solid black;
    border-radius: 10px;
    /* padding: 2px; */
    font-size: 19px;
    padding: 0.6rem;
    height: initial;
}
form > div{
    margin:20px 0;
    display:flex;
    flex-direction: column;
}
form{
    width:85%;
    margin: 0 auto;
}
@media screen and (min-width:500px) {
    form{
        width:425px;
    }
}
form > div:last-child{
    margin-bottom:0;
}
#loginsection,#registersection,#forgotpasswordsection{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height:100vh;
}

h1.center{
    padding-top:10px;
}

#mapmenu{
    background-color: #404040;
    border: 2px solid black;
    border-radius:10px;
    display:flex;
    gap:5px;
    position: absolute;
    bottom:10px;
    width:calc(100vw - 90px);
    margin:10px 40px;
}
@media screen and (min-width:900px) {
    #mapmenu{
        width:810px;
        left:50%;
        margin:0;
        transform: translateX(-50%);
    }
    
}
#mapmenu img{
    width:30px;
    height:30px;
}
#mapmenu > *{
    cursor: pointer;
    user-select: none;
    padding:10px;
    flex:1;
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: center;
}
.gpsbutton{
    font-size: 1.5em;
    font-weight: bold;
}
#sidemenu.opened{
    transform: translate(0,0);
}
#initialinitalNonLogged{
    display:flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.initialcontainer{
    height:100%;
    justify-content: center;
    align-items: center;
    display:flex;
    flex-direction: column;
}

.topmenu{
    position: absolute;
    width:100vw;
    margin-top:10px;
    top:0;
    display:flex;
    justify-content: space-between;
}
.infoicon{
    --size:30px;
    background-image: url(icon/information-6274.png);
    background-size: var(--size) var(--size);
    background-repeat: no-repeat;
    width:var(--size);
    height:var(--size);
    display: block;
}
.topmenu>*{
    padding:0 10px;
}

.changelang{
    font-size: 1.7em;
    color:#8dc63f;
}
.brad{
    border-radius: 10px;
}
#sidemenu{
    transition: 0.2s;
    transform: translate(-80vw,0);
    width:80vw;
    height:100vh;
    z-index:10;
    top:0;
    left:0;
    position: absolute;
    background-color: #404040;
}
@media screen and (min-width:600px){
    #sidemenu{
        width:480px;
    }
}
.gpscontainer{
    height: 100%;
    color:#EEE;
    overflow: scroll;
}
#gpstracks{
    height:100vh;
}
#sidemenu{
    overflow:hidden;
}
.gpscontainer > *{
    padding: 10px;
    border: 1px solid white;
    margin: 10px;
}
.gpscontainer > .selected{
    background-color: #5f8b7e;
}
.gpscontainer > * *{
    user-select: none;
    pointer-events: none;
}