body {    

    margin:0;

    padding:0;

}

.map_name_preview {
    line-height: 100px;
    text-align: center;
    font-size: 25px;
    font-family: 'Font Awesome 5 Free', sans-serif;
    font-weight: bold;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.map_style_preview {
    display: inline-block;
    margin-left: 5%;
    margin-top: 30px;
    width: 200px;
    height: 100px;
    border-radius: 6px;
    background-size: 100% 100%;
    opacity: 0.5;
    transition: 0.5s;
    cursor: pointer;
}

.map_style_preview:hover {
    opacity: 1;
}

#map_list {
    width: 100%;
    height: 100%;
}

.newmap-buttons {
    margin-top: 74%;
}

#mapbuttons {
    position: absolute;
    bottom: 0;
    width: 50%;
    padding: 25px;
}

#warning-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(210, 76, 91, 0.9);
    z-index: 99 !important;
}

#warning-text-content {
    animation: shake 0.5s;
    animation-iteration-count: 2;
}

@keyframes shake {
    0% { transform: translate(1px, 0px); }
    10% { transform: translate(-1px, 0px); }
    20% { transform: translate(-3px, 0px); }
    30% { transform: translate(3px, 0px); }
    40% { transform: translate(1px, 0px); }
    50% { transform: translate(-1px, 0px); }
    60% { transform: translate(-3px, 0px); }
    70% { transform: translate(3px, 0px); }
    80% { transform: translate(-1px, 0px); }
    90% { transform: translate(1px, 0px); }
    100% { transform: translate(1px, 0px); }
}

/*@keyframes fade {
    0%,100% { opacity: 0 }
    40%,60% { opacity: 1 }
    100% { z-index: 0 }
}*/

.black-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99 !important;
}

.ctrl-screen {
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 10%;
    width: 70%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99 !important;
}

.ctrl-text {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    text-align: center;
    margin-top: 20%;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 150%;
}

.newmap-div {
    position: absolute;
    background-color: #ffffff;
    margin-left: 30%;
    margin-top: 5%;
    width: 30%;
    height: 60%;
    z-index: 99 !important;
}

.newmap-form {
    width: 90%;
    margin-top: 2%;
    margin-left: 5%;
}

#map_tempo {
    position: absolute;
    margin-top: 50px;
    height: 59%;
    width: 90%;
}

#map {
    position:absolute;
    top:10%;
    bottom:10%;
    left:10%;
    width:70%;
    opacity:0;
}

.marker {

    width: 40px;

    height: 40px;   

    border-radius:

        25px;

}

.marker:before{

    color: #fff;

    font-size: 22px; 

    margin: 8px 0; 

    position: absolute;  

    width: 100%;   

    text-align: center;

}

#panel{ 

    position: relative;  

    width: 20%; 

    right: 0;

    padding:10px;

    margin-left:30px;

}

#layers{ 

    position: absolute;

    right: 0;   

    width: 20%;  

    padding: 25px;  

    box-sizing: border-box;

    top: 50px;
}

.color_cat{

    height: 20px;   

    width: 20px;   

    float: left;   

    margin:3px;

}

.btn{ 

    padding: 5px; 

    border-radius: 5px;

    border: none;   

    margin-bottom: 5px;  

    outline: none;}.active{ 

    background: #2ea92e; 

    color: #fff;

}
.directions-control-instructions, .mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib{

    display: none !important;

}

.menu {

    background-color: lightgrey;  

    filter: drop-shadow(5px 10px 5px rgb(160, 160, 160));  

    border-radius: 0.1%;  

    width: 75%;  

    height: 75%;   

    position: absolute; 

    z-index: 99 !important;

    margin-left: 12%;  

    margin-top: 6%;  

    display: none;   

    overflow-y: scroll;  

    -webkit-touch-callout: none;  

    -webkit-user-select: none;   

    -moz-user-select: none;  

    -ms-user-select: none;    

    user-select: none;
}

.menu-butn {

    -webkit-border-radius: 60%;  

    -moz-border-radius: 60%;  

    border-radius: 60px;   

    text-shadow: 1px 1px 3px #666666; 

    -webkit-box-shadow: 1px 1px 3px #666666;

    -moz-box-shadow: 1px 1px 3px #666666;

    box-shadow: 1px 1px 3px #666666;

    font-family: Arial, sans-serif;

    color: #ffffff;

    font-size: 20px;

    background: #9e0303;

    padding: 10px 15px 10px 15px;

    margin-top: 0.5%;

    margin-right: 0.5%;

    float: right;

    text-decoration: none;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

.progress
{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #F2F2F2;
}
.bar
{
    background-color: #819FF7;
    width:0%;
    height:5px;
    border-radius: 3px;
}
.percent
{
    position:absolute;
    display:inline-block;
    top:3px;
    left:48%;
}

.new-building-butn {

    text-shadow: 1px 1px 3px #666666; 

    font-family: Arial, sans-serif;

    color: #ffffff;

    font-size: 20px;

    background: #9e0303;

    padding: 10px 15px 10px 15px;  

    margin-top: 0.5%; 

    margin-right: 0.5%;  

    float: right;

}

.menu-butn:hover {  

    background: #d90707; 

    text-decoration: none;

}

.mapboxgl-popup-close-button { 

    display: none;

}

.mapboxgl-popup-content {

    background-color: rgba(0, 0, 0, 0); 

    box-shadow: none; 

    text-shadow: none; 

    position: absolute; 

    margin: auto;  

    text-align: center;

}

#info {

display: block;

position: relative;

margin: 0px auto;

width: 50%;

padding: 10px;

border: none;

border-radius: 3px;

font-size: 12px;

text-align: center;

color: #222;

background: #fff;

}