.bottomsheet {
    border-radius: 14px 14px 0 0
}

.x-icon {
    display: block
}

.iframe-wrapper {
    overflow: hidden;
    height: 100%
}

.arrow {
    width: 16px !important;
    height: 23px;
    margin-left: 8px
}

.flex-start-n h2 {
    font-size: 24px;
    font-weight: 600;
    font-style: normal;
    line-height: 38px;
    letter-spacing: .005em
}

.close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px !important;
    height: 32px
}

.container-box h4 {
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 16px;
    color: #fff;
    letter-spacing: .025em
}


.container {
    padding: 0 16px
}


.flex-col img {
    margin-right: 12px
}

.flex-input img {
    margin-left: 12px
}

.container-box img {
    border-radius: 5px
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: space-between
}

#maps-1 img,
#recents-sheet img {
    width: unset
}

.recents-flex {
    display: none
}

#drag .recents-flex,
.drag .recents-flex {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.recents {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-feature-settings: "case" on;
    font-weight: 600;
    line-height: 160%;
    color: #171717;
    letter-spacing: -.02em
}

.flex-input {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px
}

.mid {
    position: absolute;
    top: 20%
}

.container-box {
    position: relative;
    margin-bottom: 16px;
    padding: 8px;
    background: #181818;
    border-radius: 8px
}

#recents-sheet, .recents-sheet {
    z-index: 1000 !important
}

#recents-sheet-overlay, .recents-sheet-overlay {
    z-index: 999 !important
}

#maps-1,
#recents-sheet,
.recents-sheet {
    z-index: 999;
    width: 100%;
    max-width: -webkit-fill-available;
    background: #eaebeb29;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 0 39px #00000014
}

.maps-cont {
    padding: 0 16px
}

#maps-2 {
    width: 100%;
    max-width: -webkit-fill-available;
    padding: 10px;
    background-color: #242628
}

#drag,
.drag {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 0 16px 17px;
    text-align: center;
    background: rgba(255 255 255/ 80%);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

#drag .flex-input,
.drag .flex-input {
    margin-bottom: 0
}

.search {
    width: 100%;
    max-width: -webkit-fill-available;
    margin: 0;
    padding: 4.5px 12px 4.5px 32px;
    font-size: 17px;
    font-weight: 400;
    font-style: normal;
    line-height: 27px;
    background: rgb(0 0 0 / 4.7%);
    border: none;
    border-radius: 10px;
    outline: none
}

.cont-box {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: -webkit-fill-available;
    margin-bottom: 24px;
    padding: 8px 6px;
    background: #fff;
    border-radius: 12px
}

.sm {
    margin-top: 8px;
    font-size: 16px;
    font-feature-settings: "case" on;
    font-weight: 400;
    font-style: normal;
    line-height: 1.625;
    color: #171717
}

.md {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-feature-settings: "case" on;
    font-weight: 500;
    line-height: 26px;
    color: #171717
}

.xs {
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    color: #858585;
    letter-spacing: .02em
}

.center {
    justify-content: center
}

.margin {
    margin-left: -10px
}

.text-center {
    text-align: center
}

.no-flex {
    display: block
}

#maps-3 {
    width: 100%;
    max-width: -webkit-fill-available;
    padding: 0 5px;
    background-color: transparent
}

.lg {
    padding: 12px 0;
    font-size: 20px
}

.p2 {
    padding: 10px 0
}

.second-stack {
    display: block !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 924px !important;
    margin: auto;
}

#maps-3.modal {
    top: 80% !important
}

.overlay {
    position: absolute;
    z-index: 100;
    inset: 0;
    height: 100%;
    opacity: .2;
    background: rgb(0 0 0 / 60%);
    background-size: contain;
    border-radius: 12px
}

.modal {
    touch-action: none;
    left: 50%;
    overflow: scroll;
    display: block;
    width: 100% !important;
    max-width: 1008px !important;
    height: 100% !important;
    margin: auto;
    background-color: #000;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 1px 37px #00000024
}


.overlay.display {
    z-index: 200;
    display: block;
    opacity: 0
}

#modal-close {
    cursor: pointer;
    position: sticky;
    z-index: 100;
    top: 12px !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px 0 0
}

iframe {
    pointer-events: true;
    position: absolute
}

.dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: 0;
    /*
    margin-bottom: 58px;
    padding: 9px 0;
    background: #ededed;
    border: none;
    border-radius: 12px;
    outline: none
    */
}

/*
.dismiss:focus {
    border: none;
    outline: none
}
*/

@media screen and (width >=700px) {
    .recents-flex {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .container {
        padding: 0 56px
    }

    .mid {
        top: 0
    }

    .flex-input {
        margin-bottom: 16px;
        padding-top: 12px
    }

    .responsive {
        display: flex
    }

    .maps-cont {
        overflow: scroll;
        padding: 0
    }

    #maps-1 .maps-cont {
        height: calc(100vh - 45px)
    }

    #recents-sheet .maps-cont,
    .recents-sheet .maps-cont {
        height: calc(100vh - 90px)
    }

    .container-box {
        display: flex;
        margin-bottom: 0;
        margin-left: -16px;
        padding: 16px;
        background: none;
        border-radius: 12px;
        transition: background .4s ease
    }

    .arrow {
        display: none
    }
    .more {
        cursor: pointer;
        display: block;
        font-size: 13px;
        font-weight: 500;
        line-height: 15px
    }

    .more:first-of-type {
        display: none
    }

    .sm {
        margin-top: 0;
        font-size: 14px;
        line-height: 22px
    }

    .cont-box {
        flex-direction: column;
        margin-bottom: 16px;
        padding: 0;
        background: transparent
    }

    .md {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px
    }

    #maps-1,
    #recents-sheet,
    .recents-sheet {
        padding: 0 12px;
        background: #eaebeb29;
        -webkit-backdrop-filter: blur(20.5px);
        backdrop-filter: blur(20.5px);
        border-right: 1px solid rgba(0 0 0/2%);
        border-radius: 0;
        box-shadow: none
    }

    #recents-sheet,
    .recents-sheet {
        padding: 0 12px
    }

    .search {
        padding: 3px 12px 3px 28px;
        font-size: 14px;
        line-height: 22px;
    }

    .flex-input img {
        width: 24px;
        height: 24px
    }

    .md.more {
        display: block
    }

    .dismiss {
        position: fixed;
        bottom: 8px;
        width: 80%;
        max-width: -webkit-fill-available;
	margin: 0;
        /*        
	margin: 0 8px;
        padding: 6.5px 0;
	background: #f3f3f3;
        border-radius: 8px*/
    }
}

[data-bottomsheet] {
    touch-action: none;
    will-change: transform;
    position: fixed;
    z-index: calc(infinity);
    top: 0;
    left: 0;
    transform: unset;
    overflow: scroll;
    display: none;
    width: 100%;
    height: 100%;
    color: #000;
    opacity: 0;
    background-color: #fff;
    box-shadow: 0 1px 37px #00000024
}

#maps-2 {
    width: 100%
}

.modal {
    touch-action: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: scroll;
    display: block;
    max-width: 50%;
    height: 50%;
    margin: auto;
    background-color: #000;
    border-radius: 30px;
    box-shadow: 0 1px 37px #00000024
}

.overlay {
    position: fixed;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: #0000007f
}

.overlay.display {
    display: block;
    opacity: 0
}

[data-draggable] {
    position: sticky;
    top: 0;
    width: 100%
}

#dragmodal-close {
    cursor: pointer;
    position: sticky;
    z-index: 100;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

[data-bottomsheet] img {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none
}

[data-bottomsheet] input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select:focus,
textarea {
    font-size: 16px
}

#side-left {
    text-align: left
}

#side-right {
    text-align: right
}

#resizable {
    cursor: col-resize;
    position: fixed;
    z-index: 120;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3px;
    height: 100%;
    background-color: transparent
}


#features-sheet a {
  color: #464646;
  font-size: 14px;
}






#map {
    /*position: absolute;*/
    width: 100%;
    height: 100%;
}

#zoom {
    /*
    display: block;
    position: relative;
    margin: 0px auto;
    width: 30%;
    padding: 5px;
    border: none;
    border-radius: 3px;
    font-size: 10px;
    text-align: center;
    color: #222;
    background: #fff;
    */
}

#info {
    /*
    left: 35%;
    bottom: 0;
    display: block;
    position: absolute;
    margin: 0px auto;
    width: 50%;
    padding: 10px;
    border: none;
    border-radius: 3px;
    font-size: 10px;
    text-align: center;
    color: #222;
    background: #fff;
    */    
}

.menu {
    background: #fff;
    position: relative;
    z-index: 1;
    border-radius: 3px;
    width: 120px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    font-family: "Open Sans", sans-serif;
    font-size: 10px;
}

.menu a {
    color: #404040;
    display: block;
    margin: 0;
    padding: 0;
    padding: 5px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    text-align: center;
}

.menu a:last-child {
    border: none;
}

.menu a:hover {
    background-color: #f8f8f8;
    color: #404040;
}

.menu a.active {
    background-color: #3887be;
    color: #ffffff;
}

.menu a.active:hover {
    background: #3074a4;
}

::-webkit-scrollbar {
    display: none;
}

#mode {
    position: absolute;
    top: 10px;
    right: 49px;
}

#symbolSelector {
    position: absolute;
    top: 40px;
    right: 49px;
    z-index: 1;
}

#features {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50 %;
    overflow: auto;
    background: rgba(255, 255, 255, 0.8);
}

#map canvas {
    cursor: crosshair;
}

#secom-toggle-menu {
    /*
    position: absolute;
    top: 150px;
    right: 10px;
    background: white;
    padding: 10px;
    z-index: 999;
    border-radius: 4px;
    font-size: 14px;
    */    
}

.maplibregl-popup-content {
    border-radius: 15px !important;
    width: 400px;
}

.secom-infobox {
    width: 400px;
    max-width: 400px;
}

.secom-infobox h3 {
    margin-top: 0;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0;
    text-transform: capitalize;
}

@media screen and (width > 700px) {
    .side-sheet {
        top: auto !important;
    }
}