html {
    scroll-behavior: smooth;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    height: 100%;
  }

p{
    line-height:24px;
    text-align: justify;
}


#container{
    position:absolute;
    top: 40px;
    width:86%;
    margin:auto;
    margin-left: 7%;
}

#container  img {
    max-width: 600px;
}


#mapmenu_toggle{
    color:#000000;
    cursor: pointer;
    display:none;
}

#mapmenu_toggled{
    color:#000000;
    cursor: pointer;
    display:inline;
}


#menu_title{
    margin-left:10px;
    margin-top:26px;
    margin-bottom: 0px;
    font-size:24px;
}


.toggler{
    margin-bottom:15px;
    cursor: pointer;
    font-size: 12px;
}

.toggler:hover {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness:2px;
}



footer {
    position:fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom:-8px;
    z-index:99;
    /* padding:0.1px; */
    background-color: #fff;
    width:440px;
    height: 40px;
    font-size: 12px;
    visibility:visible;
}
.img_copyright{
    height:22px !important;
    margin-left:3px;
    vertical-align:text-bottom;
}
.footer_a {
    display: inline-block;
    color: #6151bd;
    text-align: center;
    /* padding: 14px 16px; */
    text-decoration: none;
}
.footer_content {
    position:relative;
    margin:auto;
    text-align: center;
    padding-top:4px;
}

#write_to{
    position:relative;
    display:inline-block;
    height: 14px;
    top: 3px;
}

/* ================ */
/* panels */
#panels_toggles {
    position: fixed; z-index: 99;
    top: 52px;
    left: 0px;
    margin-left: 10px;
}
#settings_toggler {
    display:none;
}
#informations_toggler {
    display:none;
}
#panels_toggles > img {
    width:34px;
    height:34px;
    margin-left: 34px;
    cursor: pointer;
}
#white_junction {
    position: fixed; 
    top: 70px;
    left: 0px;
    margin-left: 10px;
    z-index: 1;
}
#white_junction > img {
    width:34px;
    height:34px;
    margin-left: 34px;
}
#menu_white {
    visibility:hidden;
}
#settings_white {
    visibility:hidden;
}
#informations_white {
    visibility:hidden;
}

#website_menu_panel {
    display: none;
    width: 300px;
}
#map_settings_panel {
    display: inline-block;
    /* width: 200px; */
}
#informations_panel {
    display: none;
    width: 70%;
    max-width: 540px;
    padding-right:20px;
}
#informations_panel > p{
    line-height:18px;
}

.menu_option {
    display:inline-block;
    border-bottom: 2px solid black;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 95%;
    cursor: pointer;
    color: #000000;
    text-decoration: none;
}

.menu_option:hover {
    background-color: #737275c9;
}

#website_menu_panel > #subtitle_map_settings {
    margin-top: 10px;
    width: 95%;
}

.panel{
    font-size: 12px;
    position: fixed; 
    z-index: 10;
    top: 80px;
    left: 0px;
    padding: 10px;
    padding-left: 20px;
    max-height: 76%;
    overflow-y:scroll;
    background-color: #fff;
    margin: 10px;
    margin-left: 0px;
    margin-bottom: 10px;
}



#subtitle_map_settings {
    font-weight: bold;
    color: #ffffff;
    font-size: 14px;
    background-color: #7f66b4;
    padding:4px;
    width: 90%;
    margin-right: 10px;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 4%;
}

/* ================ */
/* tutorial */

#welcome_tutorial{
    font-size: 14px;
    position: fixed;
    width:70%;
    max-width: 600px;
    /* max-width: fit-content; */
    top: 50%;
    left: 50%; 
    transform: translate(-50%,-50%);
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    z-index: 99;
    text-align: justify;

  border-style: solid;
  border-width: 4px;
  border-color: #5c5c5c;

}

#title_tutorial{
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

#end_tutorial{
    font-weight: bold;
    text-align: center;
    border-radius:25px;
    background-color: #000000;
    color:#ffffff;
    text-decoration: none;
    padding-bottom:8px;
    padding-top: 8px;
    padding-left:10px;
    padding-right: 10px;
    cursor: pointer;
    width:160px;
    position: relative;
    margin: auto; 
    margin-top:15px;
}

#end_tutorial:hover{
    background-color: #d5d5d5;
}