#map_btn_tool,.leaflet-control-container{
    display:none !important;
}

#xmap,#map_wrapper{
    z-index: 1;
    font-family: "Arial", "Verdana", "微軟正黑體" !important;
}

#xmap .leaflet-popup-content h3{
    font-weight: 600 !important;
}

.modal-dialog{
    width: 800px !important;
}

#container-cursorData{
    top:0;
    bottom:unset;
}

.leaflet-right.leaflet-top{
    bottom: 0;
    top: unset;
}

.flashing path {
    animation: flashing 0.8s infinite alternate;
}
.flashing{
    animation: flashing 0.8s infinite alternate;
}

thead.last td[flag="d"] {
    background: #62B477;
}

tbody.last .now td[flag="d"], tbody.last .lower td[flag="d"]{
    background: #D7E4BD !important;
}

#download_pic {
    float: right;
    font-size: 30px;
    margin: 15px 5px 0 0;
    cursor: pointer;
}

@keyframes flashing {
    to {
        fill: transparent;
    }
}

.title {
    font-size: 36px;
    color: #23a2de;
    font-weight: bolder;
    border-bottom: 1px solid #5f5f5f;
    text-shadow: 3px 3px 8px #9a9a9a;
}

.info_card{
    border-radius: 10px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
    width: 260px;
}

.memo{
    padding: 16px;
    font-size: 16px;
    color: #000000;
    font-weight: 100;
    text-shadow: none;
}

.legend_content .table{
    padding-bottom: 0px;
}

.center{
    text-align: center;
}

.table{
    border-spacing: 3px;
    border-collapse: initial;
}

.table-head{
    background: #94beee;
    color: #ffffff;
    font-size: 16px;
    font-weight: bolder;
}

.table-head th{
    padding: 2px !important;
    border-bottom: unset !important;
    color: #A955AA;
}

.table_block .table-head a{
    display:inline-block;
}

.filter_block{
    box-shadow: 0 0 3px black;
    margin-bottom: 10px;
}

.filter_block div.realtime{
    border-right: 1px solid #e8e8e8;
}

.filter_block div:not(.custom){
    border-bottom: 1px solid #e8e8e8;
}

.custom{
    width: 100%;
}

.item_list{
    font-family: 微軟正黑體;
    overflow: auto;
}

.item_list input[type="radio"],.item_list input[type="checkbox"],.refresh_row{
    display:none;
}

.item_list .radio{
    margin-top: 0px !important;
    display: block;
    padding: 3px 10px 3px 32px;
    margin-bottom: 0;
    vertical-align: middle;
    line-height: 23px;
    cursor: pointer;
    color: #333;
    float: left;
}

.item_list .input{
    padding: 3px 10px 3px 32px;
    margin-bottom: 0;
}

.item_list .radio span.checked_icon{
    position: absolute;
    left: 10px;
    top: 7px;
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    border: 2px solid #000000;
    border-radius: 50%;
    background: #ffffff;
}

.item_list .radio input:checked ~ span.checked_icon{
    border: 2px solid #2A88C4;
    padding: 5px !important;
    background: #55b7ff;
}

.select_control{
    padding: 0px 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0px 5px;
}

.select_control[disabled]{
    background: #ececec;
    color: #b1b1b1;
}

.table{
    border-spacing: 3px;
    border-collapse: initial;
    margin: 0px auto;
    text-align: center;
    padding-bottom: 10px;
    color: #000000;
}

.table tr td{
    padding: 3px;
    font-size: 16px;
    vertical-align: middle !important;
}

.table tr td:nth-child(1){
    cursor: default;
    text-decoration: none !important;
    font-weight: bolder;
    font-size: 16px;
}

.table-head tr td{
    cursor: pointer;
}

.table-head tr td:hover{
    text-decoration: underline;
}

.table-head tr td:nth-child(1) div{
    width: 100%;
    line-height: 18px;
}

.table-striped td{
    padding: 3px !important;
}

.table-striped .info_td{
    text-align: initial !important;
    padding: 3px 0px 3px 15px!important;
}

.red{
    color:#FFFFFF !important;
    background: #FF0000 !important;
}

.orange{
    background: #FF7E00 !important;
}

.yellow{
    background: #FBD959 !important;
}

.icon{
    font-size: 16px;
}

.station_label{
    width: max-content;
    color: #c50f96;
    font-size: 13px;
    font-weight: bolder;
    padding: 1px;
    background: whitesmoke;
    margin: 0px -5px;
}

.warning{
    color:#FF0000 !important;
}

.higher_atte{
    color:#FF7E00 !important;
}

.atte{
    color:#FBD959 !important;
}

.default{
    color:#585858 !important;
}

.chart_block{
    height: 400px;
    overflow-x:hidden;
    overflow-y:auto;
}

.tsunami_chart{
    position: relative;
    padding: 5px 3px;
    position: relative;
    padding: 5px 3px;
    font-size: 16px;
}

.chart_title{
    font-weight: bolder;
    z-index: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    width: max-content;
    cursor:default;
}

.chart_title span:not(.show_warning){
    background: #D7E4BD;
    padding: 5px;
}

.chart_title .show_warning{
    color: #ffffff;
    padding: 5px;
    margin: 0px 25px;
}

#tsunami_chartModal .show_warning{
    font-size: 21px;
}

#staion_refresh{
    cursor: pointer;
    background: #ffffff;
    border: none;
    color: #a7a7a7;
    position: absolute;
    top: 20px;
    right: 69px;
    width: max-content;
    display: initial;
    z-index: 1;
}

#staion_refresh i{
    font-size: 22px;
    margin-left: 5px;
}

.chart_content{
    width: 100%;
    height: 250px;
    box-shadow: 0 0 2px black;
}

.close{
    display: block;
    z-index: 10;
    position: absolute;
    right: 12px;
    top: 9px;
}

.add{
    position: relative;
    right: 0px;
    bottom: 10px;
    margin-left: 5px;
}

.chart_title .add{
    bottom: 0px;
}

.refresh_row{
    font-weight: bolder;
    float: right;
    font-size: 20px;
}

#tsunami_refresh{
    margin-left: 5px;
    font-size: 22px;
}

#tsunami_chartModal .modal-dialog{
    width: max-content !important;
}

#single_chars{
    width: 1300px;
    height: 350px;
}