.overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #282F41;

    z-index: 99999999;

    padding: 10px;

    display: none;

    -ms-grid-rows: 25% 50% 25%;

    grid-template-rows: 25% 50% 25%;

}



.full {

    display: -ms-grid;

    display: grid;

    -ms-grid-columns: 25% 60% 15%;

    grid-template-columns: 25% 60% 15%;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -ms-grid-row: 2;

    grid-row: 2;

}



.choose {

    font-size: 1.5vw;

    color: white;

    text-align: center;

    -ms-grid-column: 1;

    grid-column: 1;

    /*font-family: 'Poppins', sans-serif;    */

}



.choose>h2 {

    font-family: Corbel;

    font-weight: lighter;

}



.langs-container {

    position: absolute;

    top: 70px;

    left: 0;

    right: 0;

    max-height: 100%;

    overflow-y: auto;

    overflow-x: hidden;

    display: -ms-grid;

    display: grid;

    -ms-grid-columns: 1fr 1fr 1fr;

    grid-template-columns: repeat(3, 1fr);

    row-gap: 1.5rem;

    height: 100%;

}



.langs {

    position: relative;

    min-height: 100%;

    -ms-grid-column: 2;

    grid-column: 2;

}



.lang-link {

    outline: none !important;

    text-decoration: none !important;

    display: table;

    padding: 5px 10px;

}



.lang-img {

    cursor: pointer;

    border-width: 0px;

    border-style: initial;

    border-color: initial;

    -o-border-image: initial;

    border-image: initial;

    padding: 15px;

    outline: 0px;

    background: transparent;

    border-radius: 50%;

    overflow: hidden;

    width: 3vw;

    height: 3vw;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    background-image: url('https://restcountries.eu/data/usa.svg');

    margin: 0 3px;

    display: table-cell;

    vertical-align: middle;

}



.lang-name {

    font-size: 1.2vw;

    color: white;

    padding: 5px 15px;

    display: table-cell;

    vertical-align: middle;

    font-weight: inherit;

    /*font-family: 'Poppins', sans-serif;*/

    font-family: Corbel;

}



.close-btn {

    outline: none !important;

    margin: 2vh 5vw;

    font-size: 4vw;

    user-select: none;

    color: rgb(137, 139, 149);

    -ms-flex-item-align: start;

    -ms-grid-row-align: start;

    align-self: start;

    -ms-grid-column-align: end;

    justify-self: end;

    cursor: pointer;

    background: transparent;

    border: 0;

    line-height: 100%;

    text-align: center;

    font-family: auto;

    transition: all .3s ease-in-out;

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    -ms-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

}



.close-btn:hover {

    color: rgb(181, 184, 196);

}



.langs-container::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);

    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);

}



.langs-container::-webkit-scrollbar {

    width: 10px;

}



.langs-container::-webkit-scrollbar-thumb {

    background-color: rgb(137, 139, 149);

    background-image: -webkit-linear-gradient(90deg, rgba(40, 47, 65, 1) 0%, rgba(40, 47, 65, 1) 25%, transparent 100%, rgba(40, 47, 65, 1) 75%, transparent)

}



.topSwicherBtn {

    outline: none !important;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    vertical-align: middle;

    margin: 0 5px;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    cursor: pointer;

    background-image: url();

    border: 3px solid rgb(47, 128, 237);

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

}

.langs .srh_fld{ display:inline-block; width:100%; margin-bottom:20px;}
.langs .srh_fld input[type="text"]{display:inline-block; width:100%; background:#22293c; padding:10px 20px; border:1px solid #3c4968; color:#fff;}
@media (max-width: 900px) {

    .topSwicherBtn {

        margin: auto;

        display: block;

    }

    .overlay {

        -ms-grid-rows: 5% 80% 5%;

        grid-template-rows: 5% 80% 5%;

    }

    .langs-container {

        -ms-grid-columns: 1fr 1fr;

        grid-template-columns: repeat(2, 1fr);

    }

    .full {

        -ms-grid-columns: auto;

        grid-template-columns: auto;

        -ms-grid-rows: 20% 80%;

        grid-template-rows: 20% 80%;

    }

    .full>*:nth-child(1) {

        -ms-grid-row: 1;

        grid-row: 1;

        -ms-grid-column: 1;

        grid-column: 1;

    }

    .full>*:nth-child(2) {

        -ms-grid-row: 2;

        grid-row: 2;

        -ms-grid-column: 1;

        grid-column: 1;

    }

    .choose {

        -ms-grid-row: 1;

        grid-row: 1;

        grid-column: auto;

    }

    .langs {

        -ms-grid-row: 2;

        grid-row: 2;

        grid-column: auto;

        margin: 0 10vw;

        text-align: center;

    }

}