@font-face {
    font-family: BrushType Normal; /* Имя шрифта */
    src: url(new-font.ttf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: Cuphead Memphis; /* Имя шрифта */
    src: url(cuphead.ttf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: "Roboto Condensed";
    src: local("Roboto Condensed"),
    local("RobotoCondensed-Regular"),
    url("https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2") format("woff2"); font-style: normal; font-weight: 400; unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face {
    font-family: Font Awesome \35  Free;
     font-style: normal;
    font-weight: 900;
    src: url('https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-solid-900.woff2');
   }

body, html{
    font:normal 17px Font Awesome, Geneva, sans-serif;
    width: 100%;
    height: 100%;
    /*background-image: url('bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;*/
    background: white;
    overflow-x: hidden;
    color: white;
    margin: 0;
    padding: 0;
}

#language{
    display: flex;
    line-height: 1.7;
    width: 20%;
    justify-content: space-evenly;
}
.lang-text{
    color: #ffffff!important;
}
#language:hover{
    color: white;
}
.lng{
    color: grey;
    cursor: pointer;
}

#archive > .button{
    margin: 0!important;
}

.trees_color{
    background-color: #3CA0D0!important;
}
.cars_color{
    background-color: #FFFA00!important;
}
.garage_color{
    background-color: #FF5A40!important;
}
.water_color{
    background-color: #B90091!important;
}
.buildings_color{
    background-color: #B90091!important;
}
#logo{
        /* width: 25%; */
    /* line-height: 1.7; */
    font-weight: bold;
    font-size: 1.5rem;
    text-align: right;
    position: absolute;
    right: 0;
    bottom: 15px;
    z-index: 5;
    margin: 10px;
    color: white;
}


.pac-container{
    left: 15px!important;
    top: unset!important;
    width: 100%;
}
.test-pac{
    width: 385px;
    left: 0px!important;
    margin-top: 248px;
}
#mapWrapper{
    position: relative;
    width: 100%;
    height: 100%;
    border-bottom: 0.3em solid white;
   }
#map{
    position: absolute;
     width: 100%;
     height: 100%;
}
/*кнопка для выезда меню инструкций*/

#menu{
     position: absolute;
    /* height: 80%; */
    background: white;
    width: 30%;
    left: 225px;
    top: 115px;
}

#right_sidebar{
    max-width: 25%;

}

#show_hide_btn_container{
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 4%;
    margin-top: 5rem;
    padding-right: 0.4rem;
}

.gm-style{
    transition: 0.5s;
}

.gm-bundled-control-on-bottom{
    right: unset!important;
}

.gm-fullscreen-control{
    left: 10px!important;
}

.gm-style-mtc{
        left: 60px!important;
}

#mapResultWrapper{
    width: 100%;
    height: 90%;
    display: flex;
}
#mapContent{
        width: 20%;
    position: relative;
        left: 75%;
    top: 8.3%;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}


#panel{
    height: 100%;
}
#checkBtn{
       margin: 0.9% 1% auto 1%;
       width: 10%!important ;
}

#requests{
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 18rem!important;
}

a{
    color: grey;
    text-decoration: none;
}


#links{
    background-color: white;
}
.link{
        margin: 1%;
        top: 5rem;
        -webkit-margin-before: 1.3em;
        -webkit-margin-after: 1em;
}
.controls {
        background-color: #fff;
        border-radius: 2px;
        border: 1px solid transparent;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        height: 29px;
        margin-top: 10px;
        outline: none;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;

      }

.controls:focus {
    border-color: #4d90fe;
}

/*#map > div > div > div > .gm-style-mtc, #pac-input, #map > div > div > button{
    top: 65px!important;
    height: 40px;
}*/
#pac-input{
    width: 100%;
}

#preloader {
    /*position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;*/
}
#loader {
    display: none;
    position: relative;
    /* left: 25%; */
    /* top: 50%; */
    width: 110px;
    height: 110px;
    margin: auto;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #9370DB;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #BA55D3;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #FF00FF;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* ВЕРХНЕЕ МЕНЮ */
#header_menu{
    border-bottom: none;
    #margin: 11px auto 0px;
    max-height: 40px;
    transition: 0.5s;
}
/* ПРАВОЕ МЕНЮ */
#map_overlay{
    position: absolute;
    max-width: 27rem;
    max-height: 90%;
    overflow-y: scroll;
    z-index: 1;
    margin: auto;
    margin-left: 69%;
    top: 10px;
    right: 10px;
    font-weight: bold;
    transition: 0.5s;
}
/* ВСПЛЫВАЮЩЕ ОКНА ПО ЦЕНТРУ */
#user_menu{
    position: absolute;
    top: 15%;
    z-index: 1;
    width: 100%;
}
@media (min-width: 1501px){
    #header_menu{
        margin: 11px auto 0px;
    }
}
@media (max-width: 1500px){
    #header_menu{
        max-width: 50rem;
        margin: 55px auto 0px;
    }
}

@media (max-width:500px){
    #map_overlay{
        top: 60px;
        max-height: 72%;
        transition: 0.5s;
    }
}