.list-state-frame .state {
    color: #333;
    font-size: 11.4px;
    font-style: normal;
    font-weight: 700;
    height: fit-content;
}

.overflow-unset {
    overflow-x: unset !important;
}
.list-state-frame::-webkit-scrollbar {
    width: 0;
    display:none;
}
.list-state-frame .right-frame::-webkit-scrollbar {
    width: 0;
    display:none;
}

.list-state-frame{
    max-width : 1089px;
}
.list-state-frame .state h3 {
    color: #333;
    text-align: left;
    font-size: 16.4px;
    font-style: normal;
    font-weight: 700;
    line-height: 22.5px;
    margin-bottom : 6px;
}

.list-state-frame .state ul {
    padding: 0;
    list-style: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.list-state-frame .right-frame{
    display:flex;
    gap:17px;
    max-height:calc(73vh - 30px);
    overflow-y: auto;
}

/*.list-state-frame .state:nth-child(2n) ul {*/
/*    justify-content: end;*/
/*    float: right;*/
/*}*/

/*.list-state-frame .state:nth-child(2n) h3 {*/
/*    justify-content: end;*/
/*    text-align: right;*/
/*}*/

/*.list-state-frame .state:nth-child(2n+4) {*/
/*    margin-top: -90px;*/
/*}*/

/*.list-state-frame .state:nth-child(2n+4) ul {*/
/*    float: right;*/
/*    width: 234px;*/
/*}*/

/*.list-state-frame .state:nth-child(2n+6) ul {*/
/*    float: right;*/
/*    width: fit-content;*/
/*}*/

/*.list-state-frame .state:nth-child(2n+5) ul {*/
/*    width: 234px;*/
/*}*/

/*.list-state-frame .state:nth-child(2n+7) ul {*/
/*    width: 153px;*/
/*}*/

.list-state-frame .state ul li a {
    display: inline-flex;
    padding: 5.667px 18px 6.333px 17px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    width:70px;
    border: 0.667px solid #E6E6E6;
    color: #333;
    font-size : 12px;
    font-style: normal;
    font-weight: 700;

    background: #FFF;
}
.list-state-frame .state ul li a.active{
    color: rgba(51, 51, 51, 0.50);
}

.list-state-frame .list {
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-wrap: wrap;
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
}
.list-state-frame .list.mobile{
    display:none;
}

.list-state-frame .list-states-elements.mobile{
    display:none;
}

#my-map {
    /*margin-left: -10px;*/
    /*display: flex;*/
    /*padding-left: 37px;*/
    /*height : 600px;*/
}

#my-map canvas {
    width: 397px;
    height: 403px;
}

.list-state-wrapper {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #E6E6E6;
    background: #FFF;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    display:none;
}
.list-state-frame{
    display : none;
    position:fixed;
    /*top: calc(100% + 20px);*/
    /*right: -262%;*/
    left:50%;
    transform : translateX(-50%);
}
.list-state-frame .list-states-elements{
    /*position: absolute;*/
    /*top: 15px;*/
}

@media screen and (max-height: 825px) {
    .list-state-wrapper {
        max-height: 80vh;
    }
    .list-state-frame .right-frame{
        display:flex;
        gap:17px;
        max-height:calc(80vh - 20px);
        overflow-y: auto;
    }
}
@media screen and (max-height: 700px) {
    .list-state-wrapper {
        max-height: 77vh;
    }
    .list-state-frame .right-frame{
        max-height:calc(77vh - 20px);
        overflow-y: auto;
    }
}
@media screen and (max-height: 596px) {
    .list-state-wrapper {
        max-height: 73vh;
        overflow-y: auto;
    }
    .list-state-frame .right-frame{
        max-height:unset;
        overflow-y: auto;
    }
}

@media screen and (max-height: 596px) {
    .list-state-wrapper {
        max-height: 73%;
        overflow-y: auto;
    }
}


@media screen and (max-width: 1100px){
    #my-map canvas {
        margin-left:-20px;
        width: 350px;
        height: 403px;
    }
}
    @media screen and (max-width: 1024px) {
   .list-state-wrapper{
        padding-bottom:15px;
        padding-top:15px;
    }
}
@media screen and (max-width: 1004px) {
  .list-state-wrapper{
        width:800px;
        /*top: calc(100% + 0px);*/
        padding-bottom:15px;
        padding-top:15px;
      /*right: -182%;*/
    }
    /*#my-map canvas {*/
    /*    width: 496px;*/
    /*    height: 626px;*/
    /*}*/
    #my-map{
        padding-left: 44px;
    }
    .list-state-frame .state ul{
        max-width:236px;
    }
    .list-state-frame .state:nth-child(2n+6){
        margin-top:-130px;
    }
    .list-state-frame .state:nth-child(2n+8){
        margin-top: -90px;
    }
    .list-state-frame .state:nth-child(2n+8) ul{
        max-width: 315px;
        width: 375px;
    }
    .list-state-frame .state:nth-child(2n+10) ul{
        max-width:236px;
        width: fit-content;
    }
}
@media screen and (max-width: 848px){
    .list-state-frame .state ul{
        gap: 16px;
    }
    .list-state-frame .state:last-child{
        margin-bottom : 10px;
    }
    .list-state-frame .list{
        display:none;
    }
    .list-state-frame .list-states-elements{
        display:none;
    }
    .list-state-frame .list.mobile{
        display: flex;
    }
    .list-state-frame .list-states-elements.mobile{
        display:block;
    }
    #my-map{
        display:none;
    }
    .list-state-frame .list-states-elements{
        position : static;
    }
    .list-state-frame .state:nth-child(2n) h3{
        text-align : left;
    }
    .list-state-frame .state:nth-child(2n) ul, .list-state-frame .state:nth-child(2n+4) ul,.list-state-frame .state:nth-child(2n+6) ul{
        float:left;
        width:100%;
        justify-content: start;
    }
    .list-state-frame .state:nth-child(2n+7) ul,.list-state-frame .state:nth-child(2n+5) ul{
        width:100%;
    }
    .list-state-frame .list{
        flex-direction:column;
    }
    .list-state-frame .state{
        width:100%;
    }
    .list-state-frame .state ul,.list-state-frame .state:nth-child(2n+6) ul,.list-state-frame .state:nth-child(2n+8) ul,.list-state-frame .state:nth-child(2n+4) ul,.list-state-frame .state:nth-child(2n+2) ul,.list-state-frame .state:nth-child(2n) ul,.list-state-frame .state:nth-child(2n+10) ul{
        max-width:100%;
        width:100%;
    }
    .list-state-frame .state, .list-state-frame .state:nth-child(2n+6),.list-state-frame .state:nth-child(2n+8),.list-state-frame .state:nth-child(2n+4),.list-state-frame .state:nth-child(2n+2),.list-state-frame .state:nth-child(2n){
        margin-top: 0;
    }
    .list-state-wrapper{
        max-width:500px;
        right:-50%;
        padding:15px 12px;
    }
}
@media screen and (max-width: 550px){
    .list-state-wrapper{
        max-width:300px;
        right:0;
    }
}
@media screen and (max-width: 375px){
    .list-state-wrapper {
        max-width: 300px;
        right: 42%;
    }
}