﻿.new-map-desk .map-station-information .station-info a.map-view-station-info:focus {
    display: inline-block;
    padding: 0;
    margin-top: 10px;
    outline-offset: 2px;
}

.map-search-station {
    background: #c7dae7;
    padding: 10px;
    border-radius: 3px;
}

.map-search-station p {
    margin: 0px 0px 10px;
    font-size: 16px;
}

.map-search-station h3,
.map-station-information h3 {
    padding: 5px 0;
    font-size: 20px;
}

.map-search-station input {
    border: 0px;
    width: 100%;
    border-radius: 3px;
    padding: 14px 10px;
    margin-bottom: 10px;
}

.map-search-station button {
    min-width: 100%;
}

.map-search-station button:hover,
.map-search-station button:focus,
.map-search-station button:active {
    background: #F5D83C !important;
    color: #061B2B;
    border: 1px #f5d83c solid;
}

.map-search-station input.btn:hover,
.map-search-station input.btn:focus,
.map-search-station input.btn:active,
.map-search-station input.btn:not(.disabled):hover,
.map-search-station input.btn:not(.disabled):focus {
    background: #F5D83C !important;
    color: #061B2B;
    border: 0px;
    box-shadow: 0 0 0;
}

.map-search-station .btn-primary.disabled,
.map-search-station .btn-primary:disabled {
    color: #061B2B;
}

.map-search-station .btn-primary.disabled,
.map-search-station .btn-primary.disabled:hover,
.map-search-station .btn-primary.disabled:focus,
.map-search-station .btn-primary.disabled:active {
    background: #f5d83c;
    opacity: 0.8;
    cursor: not-allowed;
}

.map-search-station input[type="text"] {
    padding: 0px 10px;
    height: 34px;
    color: #555;
}

.map-station-information {
    background: #fff;
    border-radius: 3px;
    margin: 15px 0;
    padding: 10px;
}

.map-station-information .station-info {
    width: 100%;
    font-family: "D-DIN-PRO", sans-serif;
    text-align: left;
    position: relative;
    margin: 20px 0 10px 0;
    padding-left: 50px !important;
}

.map-station-information .station-address-info::before {
    left: 0px;
}

.map-station-information p {
    margin: 0px;
}

.map-station-information h5 {
    font-weight: 500;
    padding: 0px;
}

.map-station-information .station-info::before {
    position: absolute;
    font-size: 30px;
    line-height: normal;
    left: 20px;
    top: -5px;
}

.map-station-information .station-info a {
    font-size: 16px;
    padding-top: 10px;
    display: block;
    text-decoration: underline;
    color: #0357AB;
    font-weight: 500;
}

.map-station-information-mob {
    display: none;
}

.map-station-information .acordian-question,
.map-station-information .acordian-anwser {
    width: 100%;
    padding-bottom: 10px
}

.map-station-information .acordian-anwser {
    padding-left: 0px !important;
}

.map-station-information .acordian-anwser p {
    font-size: 16px;
}

.column.station-address-info::before {
    content: "\f041";
    font-family: fontawesome, sans-serif;
}

.stn-address {
    font-size: 1.6em;
    color: #000;
    background: #fff;
    border: none;
    padding: 10px 0px 0px;
}

.modal-content div {
    padding: 7px 13px 9px 13px;
}

.map-svg-container .modal-dialog .modal-header {
    padding: 10px 15px 5px !important;
    margin-left: 0;
    border: 0;
    text-align: left;
    left: -30px;
}

.map-svg-container .modal-dialog .modal-header .modal-title {
    color: #fff !important;
    line-height: 1.42857143;
}

.map-svg-container .modal-dialog .modal-header h3 {
    font-size: 24px;
    font-weight: 500
}

.map-svg-container .modal-dialog .modal-header h5 {
    font-size: 14px;
    font-weight: 500;
}

.map-svg-container .modal-dialog .modal-header h6 {
    font-size: 12px;
    text-transform: none !important;
    color: #ccc
}

.map-svg-container .modal-dialog .modal-header .modal-bg button.close {
    position: absolute;
    right: 10px;
    z-index: 99999999999999 !important;
    background-color: transparent;
    box-shadow: none;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    border: 0;
    padding: 0;
    margin: 0;
}

.map-svg-container .modal-dialog {
    width: 800px !important;
    max-width: 800px !important;
    padding-top: 7% !important;
}

.map-svg-container .modal-dialog .station-image {
    max-height: 250px;
    overflow-y: auto
}

.map-svg-container .modal-dialog .station-image::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 6px;
}

.map-svg-container .modal-dialog .station-image::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

.map-svg-container .modal-dialog .station-image::-webkit-scrollbar-thumb {
    background: #C9C9C9;
    border-radius: 6px;
}

.map-svg-container .modal-dialog .station-image::-webkit-scrollbar-thumb:hover {
    background: #555;
    border-radius: 6px;
}

.map-svg-container .station-image img {
    float: left;
    margin-left: 0;
}

.map-svg-container .station-image .modal-title {
    float: left;
    width: 85%;
}

.map-svg-container .station-image .modal-title div,
.map-svg-container .station-image .modal-title div p {
    width: 100%;
    text-align: left;
    padding: 10px !important;
}

.map-svg-container .station-image .modal-title div p,
.map-svg-container .station-image .modal-title div div {
    padding: 0px !important;
}
div#stationInfo.modal {
    z-index: 999999;
}
div#stationInfo.modal.show {
    opacity: 1;
}
#stationInfo {
    overflow: hidden !important;
}
.map-svg-container #stationInfo .modal-dialog .modal-header .modal-bg button.close:focus {
    border: 0 !important;
    outline-color: #fff !important;
}

.map-zoom {
    position: absolute;
    right: 10px;
    bottom: 20px;
    width: 30px;
}

.map-zoom .margin-map_btn {
    background: #061B2B;
    width: 100%;
    display: block;
    text-align: center;
    font-size: 25px;
    height: 25px;
    margin-top: 1px;
    line-height: 27px;
    color: #fff;
}

.map-zoom .margin-map_btn:nth-child(2) {
    border-radius: 0 0 4px 4px;
}

.map-zoom .margin-map_btn:nth-child(1) {
    border-radius: 4px 4px 0 0;
}

.map-zoom .margin-map_btn:hover {
    text-decoration: none
}

.map-zoom .margin-map_btn:hover,
.map-zoom .margin-map_btn:focus,
.map-zoom .margin-map_btn:active {
    text-decoration: none;
}

.station-search-map {
    max-height: 200px;
    overflow-y: auto !important;
    padding: 0px;
    border-radius: 0 0 6px 6px;
}

.station-search-map li {
    font-size: 15px;
    line-height: 24px;
    padding: 10px !important;
}

.station-search-map li:hover {
    background-color: #c7dae7 !important;
}

.station-image {
    margin-bottom: 20px;
}

.link-station-detail {
    text-align: right;
}

.modal-title.link-station-detail #LinkStationPage {
    color: #fff;
    text-decoration: none;
}

.modal-title.link-station-detail #LinkStationPage:focus {
    border: 0 !important;
    outline-offset: 2px;
    outline: 2px solid #fff !important;
}


.map-svg-container svg#pin {
    cursor: pointer !important;
}

.svg-image-accordingly {
    width: 70px;
    float: left;
    display: none;
    margin-right: 20px;
}

#stationAddress p {
    color: white;
    font-size: 14px !important;
}

#searchmarkers {
    cursor: pointer;
}


.i-yellow-btn {
    background: #b1b1b1 !important;
}

div#sticky-scroll-div {
    position: sticky;
    position: -webkit-sticky;
    bottom: 0px;
    background: #e9f0f5;
    padding-bottom: 1px;
}

.up-scrl-btn,
.sticky-legend-down .dwn-scrl-btn {
    display: none
}

.sticky-legend-down .up-scrl-btn {
    display: block;
    margin: auto;
}
.station-name {
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
}
.map-svg-container .modal-dialog .modal-bg {
    width: 100%;
}
@media (max-width: 1024px) {

    .map-search-station h3,
    .map-station-information h3 {
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    .map-station-information {
        display: block;
    }

    .map-station-information-mob .map-station-information,
    .map-station-information-mob {
        display: block
    }

    .map-station-information-mob ul.tabs-nav {
        margin-bottom: 0px;
        padding-left: 0px;
        display: flex;
        padding-top: 15px;
    }

    .map-station-information-mob ul.tabs-nav li {
        list-style: none;
        text-align: center;
        width: 50%;
        display: block;
        background: #fff;
        border-radius: 4px;
        margin: 0 5px 0 0;
    }

    .map-station-information-mob ul.tabs-nav li:nth-child(2) {
        margin-right: 0;
    }

    .map-station-information-mob ul.tabs-nav li a {
        color: #061B2B;
        padding: 12px 0;
        display: block;
        text-decoration: none;
    }

    .map-station-information-mob ul.tabs-nav li.tab-active {
        background: #0092CC;
    }

    .map-station-information-mob ul.tabs-nav li.tab-active a {
        color: #fff;
    }

    .mob-map-view {
        background: #fff;
        border-radius: 3px;
        margin: 15px 0;
        padding: 10px;
    }

}

@media (max-width: 800px) {
    .map-svg-container .modal-dialog {
        width: 95% !important;
        margin: auto !important;
        padding-top: 7% !important;
    }

    .map-svg-container .modal {
        padding-right: 0px !important
    }

    .map-svg-container .station-image .modal-title {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {

    .map-svg-container {
        width: 100% !important;
        height: 100% !important;
    }

    .railway-container {
        width: 100% !important;
        height: 612px !important;
    }
}
