.alert {
  z-index:100;
  padding: 20px;
  background-color: #f44336;
  color: white;
  position: absolute;
  top: 10px;
  right: 20px;
}

.alert.success {
  background-color: #4CAF50;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
.country-name {
  font-family: Helvetica;
}
.select2-container--default .select2-selection--single {
    height: 35px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 33px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px !important;
}

.route-input.active {
  border: 1px solid black! important;
}

#menubox {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 11;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .24);
    width: 360px;
    user-select: none;
}

#menu1 {
    padding: 15px;
}

#menu1-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.menubar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 20px;
    height: 35px;
    width: 35px;
    border-radius: 100%;
    cursor: pointer;
}

.menubar:hover {
    background: rgba(0, 0, 0, .1)
}

.menubar-logo>img {
    height: 35px;
    vertical-align: bottom;
}

#searchbox-wrapper {
    display: flex;
}

.search_container {
    border: 1px solid rgba(6, 28, 28, .14);
    position: relative;
    flex: 1;
    max-width: 500px;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    outline: none;
}

.search_container>img {
    max-width: 40px;
    margin-left: 10px;
}

.search_container .search-action {
    height: 50px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
}

.search_container .search-action>div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px;
}

.search_container>span {
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    color: grey;
    cursor: pointer;
    left: 10;
    display: none;
}

.search_place {
    padding: 0 10px 0 10px;
    height: 50px;
    background: #fff;
    border-radius: 25px;
    outline: none;
    border: none;
    font-size: 16px;
}

.country-box {
    padding-left: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.country-box>img {
    height: 15px;
    max-width: 30px;
}

.country-box span {
    text-align: center;
    font-size: 12px;
    margin-top: 5px;
    font-weight: bold;
    text-transform: uppercase;
}

.pin-address {
    color: #705750;
    font-weight: 900;
    font-size: 12px;
    background: white;
    display: none;
}

#buttons {
    display: flex;
    flex: 1;
    margin-top: 10px;
}

#buttons>*:nth-child(n+2) {
    margin-left: 10px;
}

.button-icon {
    display: flex;
    font-size: 12px;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(6, 28, 28, .14);
    color: #333;
    transition: all .3s;
}

.button-icon>i {
    color: #00007a;
}

.button-icon:hover {
    color: #fff;
    background: #00007a;
}

.button-icon:hover i {
    color: #fff;
}

.button-icon>i {
    margin-right: 10px;
}

#qr {
    display: none;
    margin-top: 10px;
}

#qr>div {
    display: flex;
    align-items: center;
}

#infowindow,
#infowindow2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

#infowindow {
  width: 200px;
  height: 200px;
}
#infowindow>img {
  border-style: none;
  border-radius: 10px;
  width: 200px;
  height: 200px;
}

#qr-button-container {
    display: flex;
    flex: 1;
}

#qr-button-container>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

#qr-button-container .button-wrapper {
    border-radius: 100%;
    background: rgba(0, 0, 0, .1);
    width: 40px;
    line-height: 40px;
    text-align: center;
    transition: all .3s;
}

#qr-button-container .button-wrapper:hover {
    background: #999;
    color: #fff;
}

#qr-button-container span {
    text-align: center;
    font-size: 12px;
    margin-top: 5px;
}

#save_address {
    display: none;
    margin-top: 10px;
}

#route {
    padding: 10px;
    display: none;
}

.route .route-input {
    border: 1px solid rgba(6, 28, 28, .14);
    position: relative;
    flex: 0.95;
    max-width: 500px;
    min-width: 300px;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    outline: none;
    margin-bottom: 10px;
}

.route .search-action {
    height: 50px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
}

.route input {
    padding: 0 10px 0 10px;
    height: 50px;
    background: #fff;
    border-radius: 25px;
    outline: none;
    border: none;
    font-size: 16px;
}

.route .route-buttons {
    display: flex;
}

.route .route-buttons>*:nth-child(n+2) {
    margin-left: 10px;
}

#menu2 {
    display: none;
}

#menu2-header {
    padding: 15px 15px 0 15px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.menu2-title {
    font-size: 20px;
    padding: 15px 15px 0 15px;
}

.menu2-desc {
    padding: 15px 15px 0 15px;
    font-size: 14px;
}

.menu2-menus {
    margin-top: 10px;
    padding-bottom: 10px;
}

.menu2-menus>* {
    padding: 10px 15px;
    font-size: 14px;
    display: block;
    cursor: pointer;
    color: #3887e8;
    text-decoration: none;
}

.menu2-menus>*:hover {
    background: rgba(0, 0, 0, .05)
}

#login-button {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    font-size: 12px;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    color: #333;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .24);
    transition: all .3s;
}

#login-button:hover{
    color:#fff;
    background:#00007a;
}

#profile-container {
    user-select: none;
}

#profile {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    background: #fff;
    align-items: center;
    justify-content: center;
    color: #999;
    z-index: 12;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .24);
}

#profile-name {
    height: 60px;
    text-align: right;
    display: flex;
    align-items: center;
    padding: 10px 60px 10px 10px;
    font-size: 14px;
}

#profile-wrapper {
    z-index: 11;
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .24);
    background: #fff;
    min-width: 250px;
    padding-bottom: 10px;
}

.profile-button {
    border: 1px solid rgba(6, 28, 28, .14);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    color: #333;
    text-align: center;
    font-size: 12px;
    display: block;
    cursor: pointer;
    text-decoration: none;
    transition: all .3s;
}

.profile-button:hover {
    background: #00007a;
    color: #fff;
}

#profile-menu2,
#profile-menu3 {
    display: none;
}

.profile-menu {
    padding: 10px;
}

.profile-menu-header {
    height: 40px;
}

.profile-menubar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    border-radius: 100%;
    cursor: pointer;
}

.profile-menubar:hover {
    background: rgba(0, 0, 0, .1)
}

#saved-address {
    overflow: auto;
    max-height: 300px;
}

.address-wrapper {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.address-name {
    font-size: 14px;
    font-family: Bold;
}

.address-street {
    margin-top: 5px;
    font-size: 12px;
}

.address-code {
    font-size: 14px;
}

.address-actions {
    display: flex;
    margin-top: 5px;
}

.address-button-wrapper {
    font-size: 12px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.address-button-wrapper>span {
    font-size: 10px;
}

.address-actions>*:nth-child(n+2) {
    margin-left: 10px;
}

.address-button {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .05);
    border-radius: 100%;
    cursor: pointer;
    transition: all .3s;
}

.address-button:hover {
    background: #999;
    color: #fff;
}

.logout-wrapper {
    padding: 10px 15px;
}

#mobile-route {
    display: none;
    padding: 10px;
}

.mobile-menu {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .24);
}

.mobile-menu>i {
    font-size: 20px;
}

.round-button {
    z-index: 5;
    position: absolute;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .24);
    border-radius: 100%;
    background: #fff;
}

#qr-btn {
    bottom: 10px;
    left: 10px;
}

#save-address-btn {
    bottom: 70px;
    left: 10px;
}

#forgot-form{
    display:none;
}

/*****end*****/
#container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

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

#marker {
    width: 100%;
    position: absolute;
    z-index: 10;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: -40px;
    user-select: none;
}

#markerA {
    display: none;
}

#markerB {
    display: none;
}

.marker {
    box-shadow: 0 30px 80px 0 rgba(0, 0, 0, 0.19),
        0 12px 24px 0 rgba(0, 0, 0, 0.23);
    cursor: pointer;
    background: #e11f26;
    color: #fff;
    height: 34px;
    width: 120px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-align: center;
}

.marker::after {
    content: "";
    position: absolute;
    background-color: #e11f26;
    bottom: -6px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top:
        /* TIP_HEIGHT= */
        8px solid #e11f26 !important;
}

.popup-bubble-anchor::after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top:
        /* TIP_HEIGHT= */
        8px solid #e11f26 !important;
}

#marker-box {
    box-shadow: 0 30px 80px 0 rgba(0, 0, 0, 0.19),
        0 12px 24px 0 rgba(0, 0, 0, 0.23);
    cursor: pointer;
    background: #e11f26;
    color: #fff;
    height: 30px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

#marker-box::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 6px #e11f26;
    border-left: solid 8px transparent;
    border-right: solid 8px transparent;
}

.gmnoprint a,
.gmnoprint span {
    display: none;
}

.gm-style-cc {
    display: none;
}

.gm-style div a img {
    display: none;
}

#GMapsID div div a div img {
    display: none;
}

#marker-logo {
    position: absolute;
    z-index: 1;
    background: red;
    border-radius: 100%;
    border: 4px solid white;
    height: 15px;
    width: 15px;
}

.marker-btn {
    font-size: 20px;
}

#share-input-wrapper {
    display: flex;
    align-items: center;
}

#copy-button {
    cursor: pointer;
    margin-left: 10px;
}

#save_location {
    text-align: center;
    margin-bottom: 10px;
}

#save_button {
    padding: 5px;
    background: #000;
    border-radius: 5px;
    color: #fff;
    margin-top: 10px;
    text-align: center;
}

#fav-icons {
    flex-direction: row;
    display: flex;
}

#fav-icons>div {
    margin: 5px;
}

.menu-container {
    left: calc(50% - 200px);
    width: 400px;
    position: absolute;
    top: 50px;
    z-index: 300;
    display: none;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .24)
}

.menu-header {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
}

.menu-back {
    position: absolute;
    left: 20px;
    cursor: pointer;
    display: none;
}

.menu-close {
    position: absolute;
    right: 20px;
    cursor: pointer;
    width: 60px;
    height: 40px;
    padding-right: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.menu-logo {
    font-size: 20px;
    text-align: center;
}

.menu-body {
    padding: 0 20px 20px 20px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.link-box {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-left: 2px;
    text-decoration-line: underline;
    cursor: pointer;
}

.facebook_button {
    font-size: 14px;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
    background: #4469b2;
    color: #fff;
    flex: 1;
}

.facebook_button>div,
.google_button>div {
    width: 35px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.google_button {
    font-size: 14px;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
    background: #4285F4;
    color: #fff;
    flex: 1;
    margin-left: 20px;
}

.menu:nth-child(n + 2) {
    display: none;
}

.menu-item-container {
    display: flex;
    align-items: center;
}

.menu-item-container>div:nth-child(n + 2) {
    margin-left: 20px;
}

.menu-item {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 12px;
    height: 40px;
    color: #0a3049;
    margin-top: 10px;
    border-radius: 5px;
    background: #e6ebec;
    cursor: pointer;
    justify-content: center;
}

.menu-divider {
    padding: 20px 0 10px 0;
    text-align: center;
}

.menu-text {
    margin-top: 30px;
    text-align: center;
}

.menu-text>span {
    font-family: Bold;
}

.saved_address {
    padding: 10px;
    background: #f3f3f3;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.saved_address:nth-child(n + 2) {
    margin-top: 10px;
}

.address_info {
    padding-right: 10px;
}

.share-btn {
    display: inline-block;
    display: inline;
    zoom: 1;
    margin: 0 2px 5px;
    padding: 5px;
    overflow: hidden;
    line-height: 0;
    text-decoration: none;
    text-transform: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 0;
    font-family: helvetica neue, helvetica, arial, sans-serif;
    background-color: rgb(0, 132, 255);
    border-radius: 4px;
    padding: 5px;
    justify-content: center;
    display: flex;
}

.select-box {
    background: #e6ebec;
    height: 40px;
    border: none;
}

#register-form {
    display: none;
}

#snackbar {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    width: 150px;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    position: absolute;
    z-index: 2000;
    left: calc(50% - 75px);
    top: 30px;
    font-size: 12px;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top: 30px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        top: 30px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

@media screen and (min-width: 601px) {
    #mobile-control {
        display: none;
    }

    .desktop-hide {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .mobile-hide {
        display: none !important;
    }

    #qr {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .24);
    }

    #mobile-control {
        display: block;
    }

    #menubox {
        width: 100%;
        left: 0;
        top: 0;
        box-shadow: none;
        background: transparent;
    }

    .search_container {
        border: none;
        margin: 0 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .24)
    }

    .menu-container {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: none;
        border-radius: none;
    }

    #menu1 {
        width: 100%;
    }

    .route .route-input-wrapper {
        display: flex;
    }

    .route .route-input {
        min-width: initial;
        max-width: initial
    }

    .route .route-input:nth-child(n+2) {
        margin-left: 10px;
    }
}