@charset "UTF-8";
*, *::before, *::after {
    box-sizing: border-box;
    line-height: 1
}
::-webkit-scrollbar {
width:10px;
height:10px
}
::-webkit-scrollbar-track {
background:#FFF;
border-radius:50px
}
::-webkit-scrollbar-thumb {
background:#3493bb;
border-radius:50px;
border:1px #FFF solid
}
::-webkit-scrollbar-thumb:hover {
background:#318aa4
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-size: 16px;
    color: #595959
}

@media(max-width:940px) {
html, body {
    font-size: 14px
}
}
.is-hidden {
    display: none !important
}
a {
    text-decoration: none;
    color: #399fbd
}
.link-a {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    line-height: 1.4;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}
label {
    cursor: pointer
}
iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0
}
button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-family: 'Noto Sans TC', 'LiHei-Pro', Arial, 'Microsoft JhengHei', sans-serif;
    color: #666;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: pointer
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
border:1px #DDD solid;
-webkit-text-fill-color:#666;
-webkit-box-shadow:0 0 0 1000px #FFF inset;
transition:background-color 5000s ease-in-out 0s, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}
input, textarea, select {
    padding: 10px;
    border: 1px #DDD solid;
    border-radius: 4px;
    background-color: #FFF;
    font-size: 1rem;
    font-family: 'Noto Sans TC', 'LiHei-Pro', Arial, 'Microsoft JhengHei', sans-serif;
    color: #666
}
input[type="text"], input[type="password"], input[type="search"], input[type="number"], textarea, select {
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}
input:focus, textarea:focus, select:focus, button:focus, button.btn:focus {
    border-color: #86b7fe;
    outline: 0 !important;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,0.2)
}
input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus {
border-color:#86b7fe;
outline:0 !important;
box-shadow:0 0 0 1000px #FFF inset, 0 0 0 .25rem rgba(13,110,253,0.2)
}
button.no-focus-outline:focus {
    border-color: transparent;
    box-shadow: none
}
textarea {
    display: block;
    width: 100%;
    resize: none
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    background-image: none;
    border: 0;
    padding: 12px;
    font-size: 1rem;
    color: #666;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.btn:hover {
    color: #333;
    text-decoration: none
}
button:disabled {
    cursor: not-allowed;
    opacity: .6;
    box-shadow: none;
    pointer-events: none
}
.btn-color {
    background-color: #399fbd;
    color: #FFF
}
.btn-color:hover, .btn-color:focus {
    background-color: #318aa4;
    color: #FFF
}
.btn-color-blue {
    background-color: #6a6da3;
    color: #FFF
}
.btn-color-blue:hover, .btn-color-blue:focus {
    background-color: #5e6091;
    color: #FFF
}
.btn-word {
    background-color: transparent
}
.btn-word:hover, .btn-word:focus {
    color: #399fbd
}
.btn-word:active {
    color: #318aa4
}
.btn-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px transparent solid;
    font-size: 1rem;
    color: #888;
    background-color: transparent
}
.btn-icon:hover {
    color: #399fbd;
    background-color: rgba(0,0,0,0.08)
}
.btn-icon:focus {
    color: #399fbd
}
.btn-icon+.btn-icon {
    margin-left: 4px
}
.list-table tr.is-edited .edit-ele .btn-icon {
    color: #FFF
}
.list-table tr.is-edited .edit-ele .btn-icon:hover {
    color: #399fbd;
    background-color: rgba(255,255,255,0.7)
}
.btn-icon:disabled, .btn-icon:disabled:hover {
    color: #888;
    background-color: transparent;
    cursor: not-allowed;
    opacity: .3
}
input[type="radio"], input[type="checkbox"] {
    margin: 0
}
table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse
}
.list-table {
    counter-reset: count count-min
}
.list-table span.tr-count::before {
    content: counter(count);
    counter-increment: count
}
.list-table span.tr-count-min::before {
    content: counter(count-min);
    counter-increment: count-min
}
.list-table>thead>tr>th {
    padding: 12px 8px;
    border-bottom: 1px #DDD solid;
    line-height: 1.2;
    vertical-align: bottom
}
.list-table.no-app-tr>tbody>tr.odd {
    background-color: #f9f9f9
}
.list-table.no-app-tr>tbody>tr.odd:hover {
    background-color: #EEE
}
.list-table.no-app-tr>tbody>tr.even {
    background-color: #FFF
}
.list-table.no-app-tr>tbody>tr.even:hover {
    background-color: #f2f2f2
}
.list-table:not(.no-app-tr)>tbody>tr:nth-child(4n+1), .list-table:not(.no-app-tr)>tbody>tr:nth-child(4n+2) {
    background-color: #f9f9f9
}
.list-table:not(.no-app-tr)>tbody>tr:nth-child(4n+1):hover, .list-table:not(.no-app-tr)>tbody>tr:nth-child(4n+2):hover {
    background-color: #EEE
}
.list-table:not(.no-app-tr)>tbody>tr:nth-child(4n+3), .list-table:not(.no-app-tr)>tbody>tr:nth-child(4n) {
    background-color: #FFF
}
.list-table:not(.no-app-tr)>tbody>tr:nth-child(4n+3):hover, .list-table:not(.no-app-tr)>tbody>tr:nth-child(4n):hover {
    background-color: #f2f2f2
}
.list-table th, .list-table td {
    padding: 6px 8px;
    word-break: break-all
}
.list-table th.sorting_1, .list-table td.sorting_1 {
    background-color: rgba(0,0,0,0.04)
}
.list-table input[type="text"] {
    display: block;
    width: 100%
}
.list-table:not(.no-app-tr)>tbody>tr:nth-child(4n+1).is-edited, .list-table:not(.no-app-tr)>tbody>tr:nth-child(4n+2).is-edited, .list-table:not(.no-app-tr)>tbody>tr:nth-child(4n+3).is-edited, .list-table:not(.no-app-tr)>tbody>tr:nth-child(4n).is-edited, .list-table:not(.no-app-tr)>tbody>tr:nth-child(4n+1).is-edited:hover, .list-table:not(.no-app-tr)>tbody>tr:nth-child(4n+2).is-edited:hover, .list-table:not(.no-app-tr)>tbody>tr:nth-child(4n+3).is-edited:hover, .list-table:not(.no-app-tr)>tbody>tr:nth-child(4n).is-edited:hover, .list-table.no-app-tr>tbody>tr.odd.is-edited, .list-table.no-app-tr>tbody>tr.even.is-edited, .list-table.no-app-tr>tbody>tr.odd.is-edited:hover, .list-table.no-app-tr>tbody>tr.even.is-edited:hover {
    background-color: #399fbd;
    color: #FFF
}
.list-table tr.is-edited .show-ele {
    display: none
}
.list-table tr .edit-ele {
    display: none
}
.list-table tr.is-edited .edit-ele {
    display: block;
    width: 100%
}
.list-table tr.is-edited .edit-ele.f {
    display: flex
}
.list-table>tbody>tr.min-tr>td {
    padding: 0
}
label.choose {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px
}
label.choose input[type="radio"], label.choose input[type="checkbox"] {
    margin-right: 4px
}
label.choose:hover {
    background-color: rgba(0,0,0,0.1)
}
tr.is-edited label.choose {
    display: block;
    width: 100%
}
tr.is-edited label.choose:hover, tr.is-edited label.choose.is-selected {
    background-color: rgba(255,255,255,0.2)
}
.min-tr-div {
    display: flex;
    align-items: stretch;
    justify-content: center
}
.min-tr-word {
    padding: 1.5rem 0 1.5rem 1.5rem;
    position: relative
}
.tr-count-min {
    position: absolute;
    top: 6px;
    right: -8px;
    font-size: 3rem;
    opacity: .1;
    pointer-events: none
}
.m-sub {
    display: flex;
    align-content: center;
    justify-content: flex-start
}
.m-title .show-ele {
    display: block;
    color: #399fbd;
    font-weight: bold;
    font-size: 1.6rem;
    margin-bottom: .8rem;
    letter-spacing: 1px
}
.m-sub .m-sub-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 8px
}
.m-title .m-sub-label {
    display: none
}
.is-edited .m-title .m-sub-label {
    display: flex
}
.m-sub .m-sub-content>.show-ele, .m-sub .m-sub-content>.edit-ele {
    width: 100%
}
.m-sub+.m-sub {
    margin-top: .5rem
}
.min-tr-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px
}
.min-tr-btns>.btn-div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}
.min-tr-btns .btn-icon+.btn-icon {
    margin-left: 0
}
.no-data {
    opacity: .4
}

@media(min-width:940px) {
.list-table>tbody>tr.min-tr {
    display: none
}
}

@media(max-width:940px) {
.list-table:not(.dataTable)>thead, .list-table:not(.dataTable)>tbody>tr.lg-tr {
    display: none
}
}
.f {
    display: flex;
    align-items: stretch;
    justify-content: center
}
.f.f-cen {
    align-items: center;
    justify-content: center
}
.f-cs {
    align-items: center;
    justify-content: flex-start
}
.f-c {
    flex-direction: column
}
.f-a {
    flex-grow: 1;
    flex-shrink: 1
}
.f-c>.f-a {
    height: 100%;
    overflow-y: auto
}
.f-n {
    flex-grow: 0;
    flex-shrink: 0
}
.btn-div {
    display: flex;
    align-items: center;
    justify-content: center
}
.btn-div>button+button {
    margin-left: 15px
}
nav {
    width: 200px;
    background-color: #f9f9f9;
    overflow-y: auto;
    border-right: 1px rgba(0,0,0,0.1) solid
}

@media(min-width:940px) {
nav.is-hide {
    display: none
}
}
#menu-toggle {
    display: none;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 0;
    background-color: transparent
}
#menu-toggle:hover {
    background-color: #EEE
}
#menu-toggle>svg {
    width: 20px;
    height: 20px;
    fill: #888
}
#menu-toggle.is-selected {
    background-color: #399fbd
}
#menu-toggle.is-selected>svg {
    fill: #FFF
}
#nav-main {
    justify-content: flex-start;
    flex-shrink: 0
}
#site-title {
    display: block;
    padding: 15px;
    text-decoration: none
}
#site-title>h1 {
    margin: 0;
    color: #405daf;
    line-height: 1.2;
    font-size: 1.5rem
}
#site-title>h1>img {
    max-width: 100%;
    display: block
}

@media(max-width:940px) {
#site-title>h1>img {
    display: none
}
}
#nav-toggle {
    width: 8px;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0
}
#nav-toggle:hover, #nav-toggle:focus {
    background-color: #62bdd8
}
nav.is-hide {
    margin-left: -192px
}
nav.is-hide #nav-toggle {
    background-color: #62bdd8
}
#close-menu {
    flex-shrink: 0;
    flex-grow: 0;
    display: none;
    width: 3rem;
    height: 3rem;
    margin: 10px 10px 10px auto;
    border-radius: 50%;
    border: 1px transparent solid;
    font-size: 1rem;
    color: #399fbd
}
.menu-btn {
    justify-content: flex-start;
    width: 100%;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    padding: 15px;
    font-size: 1rem
}
.menu-btn:hover {
    background-color: #EEE
}
.menu-btn.is-selected {
    background-color: #399fbd;
    color: #FFF
}
.link-btn, .mode-btn {
    color: #399fbd
}
.mode-btn {
    justify-content: center
}

@media(min-width:940px) {
.mode-btn {
    border-top: 1px #DDD solid
}
button.no-focus-outline.mode-btn:focus {
    border-color: #DDD
}
}

@media(max-width:940px) {
body {
    flex-direction: column
}
nav {
    width: 100%;
    height: 50px;
    border-bottom: 1px #EEE solid
}
nav.is-hide {
    margin-left: 0
}
#nav-main {
    overflow-y: hidden
}
#nav-toggle {
    display: none
}
.nav-title {
    display: flex
}
#site-title {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center
}
#site-title>h1 {
    font-size: 1.1rem
}
#menu-toggle {
    display: flex
}
#close-menu {
    display: flex
}
#menus-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000;
    opacity: 1;
    background-color: rgba(0,0,0,0.7);
    transition: opacity .3s
}
#menus {
    width: 80%;
    max-width: 400px;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10001;
    overflow-y: auto;
    background-color: #f9f9f9;
    box-shadow: 0 15px 12px rgb(0, 0, 0, 0.2);
    transition: right .3s
}
#menus-bg.is-hide {
    opacity: 0;
    right: -100%
}
#menus.is-hide {
    right: -100%
}
#menus li {
    border-top: 1px #DDD solid
}
.menu-btn {
    color: #666
}
}
#page {
    position: relative
}
#load-page {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10001
}
#map {
    width: 100%;
    height: 100%
}
#map.leaflet-grab.has-feature-info {
    cursor: pointer
}
.list-section {
    padding: 15px;
    overflow-y: auto
}
.list-ul {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start
}
.station-type {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 10px 0 6px;
    color: #888;
    letter-spacing: 1px
}
.station-type>.bi {
    margin-right: 6px;
    flex-grow: 0;
    flex-shrink: 0
}
.station-type>span {
    flex-grow: 0;
    flex-shrink: 0
}
.station-type::before {
    content: '';
    width: 10px;
    height: 1px;
    background-color: #DDD;
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 10px
}
.station-type::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #DDD;
    flex-grow: 1;
    flex-shrink: 1;
    margin-left: 10px
}
.item {
    flex: auto;
    width: 250px;
    margin: 15px;
    box-shadow: 0 0 3px #666
}
.item-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background-color: transparent
}
.item-main>h2 {
    margin: 0;
    padding: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: left
}
.item-update-time {
    margin-top: 6px;
    font-size: .5em;
    letter-spacing: 1px;
    color: #AAA
}
.item-status-light {
    width: 20px
}
.status-success {
    background-color: #a4d864
}
.status-warning {
    background-color: #f19c40
}
.status-unusual {
    background-color: #e64d4d
}
.status-none {
    background-color: #AAA
}
.status-forbidden {
    background-color: #e64d4d
}
.status-0 {
    background-color: #dd884b
}
.status-1 {
    background-color: #f1cf40
}
.status-2 {
    background-color: #41a7a4
}
.item-status-icon {
    align-self: center;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}
.status-icon-none {
    background-image: url(../img/status/status-none.webp)
}
.status-icon-forbidden {
    background-image: url(../img/status/status-forbidden.webp)
}
.status-icon-0 {
    background-image: url(../img/status/status-0.webp)
}
.status-icon-1 {
    background-image: url(../img/status/status-1.webp)
}
.status-icon-2 {
    background-image: url(../img/status/status-2.webp)
}
.item-light {
    padding: 0 10px;
    font-size: .8em
}
.item-light+.item-light {
    border-left: 1px #FFF solid
}
.item-sub-left, .item-sub-right {
    flex: auto
}
.item-sub {
    display: none;
    border-top: 1px #EEE solid
}
.item-sub li {
    display: flex;
    padding: 8px 10px;
    font-size: .9rem;
    text-align: left
}
.item-sub li+li {
    display: flex;
    padding-top: 0
}
.item-sub-success, .item-sub-unusual {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: .5em
}
.item-sub-item {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 6.5em;
    margin-right: 10px;
    color: #7d7d7d
}
.item-sub-status {
    width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start
}
.item-sub-success {
    color: #3bb796
}
.item-sub-warning {
    color: #d4782e
}
.item-sub-unusual {
    color: #da0e0e
}
.item-sub-unit {
    align-self: flex-end;
    margin-left: 2px;
    font-size: .8em
}
.item.show-sub {
    width: 380px
}
.item.show-sub .item-sub {
    display: flex
}

@media(max-width:940px) {
.item {
    width: 100%;
    margin: 10px 3px
}
.item-main>h2 {
    font-size: 1.1rem
}
.item-sub-left, .item-sub-right {
    width: 100%
}
.item-status-light {
    width: 15px
}
}
.info-part {
    display: none;
    flex-direction: column;
    width: calc(100% - 33% + 200px);
    height: 100%;
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: calc(33% - 200px);
    z-index: 9999;
    background-color: #FFF
}
.info-part .item-sub {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-top: 0;
    font-size: 1.4rem
}
.info-part .item-sub li {
    padding: 10px;
    font-size: 1rem
}
.info-part .item-main>h2 {
    font-size: 1.6rem
}
.info-part .item-update-time {
    margin-top: 10px;
    font-size: .9em;
    color: #AAA
}
.info-part-main {
    padding: 20px
}
.info-part-btn {
    width: 100%;
    padding: 20px 20px 0 20px
}
.back-to-list, .to-top {
    background-color: transparent;
    border: 0;
    font-size: 1rem;
    color: #399fbd;
    letter-spacing: 1px
}
.back-to-list:hover, .to-top:hover {
    color: #2d839d
}
.back-to-list>.icon, .to-top>.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 10px;
    line-height: 1;
    background-color: #EEE;
    font-size: 1rem;
    border-radius: 50%
}

@media(max-width:940px) {
.info-part {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    top: 10px;
    left: 10px;
    box-shadow: 0 0 6px rgb(0 0 0 / 40%)
}
.info-part-btn {
    flex-grow: 0;
    flex-shrink: 0;
    order: 2;
    width: 100%;
    padding: 0
}
.info-part-main {
    flex-grow: 1;
    flex-shrink: 1;
    order: 1;
    width: 100%;
    overflow-y: auto
}
.back-to-list, .to-top {
    width: 100%;
    padding: 4px;
    background-color: #399fbd;
    color: #FFF
}
.back-to-list:hover, .to-top:hover {
    background-color: #2d839d;
    color: #FFF
}
.back-to-list>.icon, .to-top>.icon {
    background-color: transparent
}
.info-part .item-sub {
    flex-direction: column;
    display: flex
}
}
.info-section {
    width: 100%;
    margin-top: 20px;
    padding-bottom: 10px
}
.info-section+.info-section {
    border-top: 0
}
.info-section img {
    max-width: 100%;
    display: block;
    margin: 0 auto
}
.info-section h3 {
    margin: 25px 0 15px 0
}

@media(max-width:940px) {
.info-section h3 {
    margin: 20px 0 10px 0
}
}
.box-16-9 {
    width: 100%;
    padding-top: 56.25%;
    position: relative
}
.box-16-9-in {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}
.current-video-title-div {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin: 0 0 20px 0;
    color: #888;
    letter-spacing: .5px;
    font-weight: normal;
    font-size: .9rem
}
#current-video-title {
    margin: 0 10px 0 0
}
#current-video-btns {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px
}
.btn-video-view {
    margin-right: 10px;
    width: 2rem;
    height: 2rem;
    border: 1px transparent solid;
    border-radius: 50%;
    background-color: #EEE
}
.btn-video-view:hover {
    background-color: #e1e1e1
}
.btn-video-view.is-selected, .btn-video-view.is-selected:hover {
    background-color: #3493bb;
    color: #FFF
}
#current-video-content img {
    display: block;
    max-width: 100%;
    max-height: 100%
}
#current-video-content .video-js {
    width: 100%;
    height: 400px
}

@media(min-width:940px) {
#current-video-info {
    width: 100%;
    max-width: 875px
}
}

@media(max-width:940px) {
.current-video-title-div {
    display: block
}
#current-video-title {
    margin: 0 0 10px 0
}
}
.ta-l {
    text-align: left
}
.ta-c {
    text-align: center
}
.ta-r {
    text-align: right
}
.mt-0 {
    margin-top: 0
}
.mt-4 {
    margin-top: 4px
}
.mt-6, .info-part .item-update-time.mt-6 {
    margin-top: 6px
}
.mt-10 {
    margin-top: 10px
}
.mt-20 {
    margin-top: 20px
}
.mb-10 {
    margin-bottom: 10px
}
.mb-15 {
    margin-bottom: 15px
}
.mr-4 {
    margin-right: 4px
}
.mr-6 {
    margin-right: 6px
}
.mr-10 {
    margin-right: 10px
}
.mr-16 {
    margin-right: 16px
}
.ml-10 {
    margin-left: 10px
}
.ml-4 {
    margin-left: 4px
}
.ml-6 {
    margin-left: 6px
}
.ml-8 {
    margin-left: 8px
}
.ml-10 {
    margin-left: 10px
}
.ml-20 {
    margin-left: 20px
}
.ml-a {
    margin-left: auto
}
.p-0 {
    padding: 0 !important
}
.if {
    display: inline-flex
}
.ib {
    display: inline-block
}
.n {
    display: none
}
.lh-12 {
    line-height: 1.2
}
.lh-14 {
    line-height: 1.4
}
.v-h {
    visibility: hidden
}
.fs-09r {
    font-size: .9rem
}
.feature-popup-div .unit.fs-08r, .fs-08r {
    font-size: .8rem
}
.fw-b {
    font-weight: bold
}
.wp-n {
    white-space: nowrap
}
.red {
    color: #e81010
}
body.swal2-height-auto {
    height: 100% !important
}
.swal2-title {
    margin: 0 0 .6em;
    line-height: 1.2
}
.swal2-content {
    padding: 0
}
.swal2-select {
    border-radius: 4px;
    border-color: #AAA
}
.swal2-validation-message {
    margin: 0 -1.1em;
    line-height: 1.4
}
.swal2-html-container {
    line-height: 1.4
}
.swal2-input {
    height: auto;
    padding: 6px;
    font-size: 1rem
}
.swal2-images {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    margin: 1em auto
}
.swal2-image-div {
    flex: 1;
    max-width: 800px;
    padding: 0;
    margin: 15px;
    border: 0
}
.swal2-image-div img {
    width: 100%
}
.multi-facility-word {
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 4rem;
    font-size: 2rem;
    line-height: 1.2
}

@media(max-width:940px) {
.swal2-images {
    flex-direction: column
}
.swal2-image-div {
    margin: 0 0 15px 0
}
}
.switch-box-label {
    margin-bottom: 0;
    align-items: center;
    justify-content: flex-start
}
.switch-box {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 20px;
    border-radius: 100px;
    background-color: #ccc;
    box-shadow: 0 3px 0 rgba(0,0,0,.13) inset;
    text-align: initial
}
.switch-box .switch-btn {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    margin-left: 0;
    transition: .5s;
    box-shadow: 1px 2px 5px rgba(0,0,0,.3)
}
.switch-ck {
    display: none
}
.switch-ck:checked+.switch-box {
    background-color: #41dcb9
}
.switch-ck:checked+.switch-box .switch-btn {
    margin-left: 20px
}
.tab-choose {
    display: none
}
.tab-choose-btn {
    flex: 1;
    padding: 13px 6px;
    border-radius: 0;
    background-color: #EEE
}
.tab-choose-btn:focus {
    box-shadow: none !important
}
.tab-choose-btn.is-selected {
    background-color: #fff;
    color: #c59d2b;
    font-weight: bold
}
.tab-choose-btn+.tab-choose-btn, .tab-choose-btn+.tab-choose-btn:focus {
    border-left: 1px rgba(0,0,0,0.08) solid
}

@media(min-width:940px) {
.pc-tab.tab-choose {
    display: flex;
    margin-bottom: 30px
}
.pc-tab .tab-choose-btn.btn {
    padding: 16px 26px;
    width: auto;
    flex: initial;
    border: 1px #DDD solid;
    border-radius: 4px
}
.pc-tab .tab-choose-btn:hover {
    background-color: #e9e9e9
}
.pc-tab .tab-choose-btn.is-selected {
    background-color: #c59d2b;
    color: #FFF
}
.pc-tab .tab-choose-btn+.tab-choose-btn, .pc-tab .tab-choose-btn+.tab-choose-btn:focus {
    border-left-color: #DDD;
    margin-left: 15px
}
.pc-tab-content {
    display: none
}
.pc-tab-content.is-selected {
    display: block
}
.pc-tab-content.is-selected.f {
    display: flex
}
}

@media(min-width:940px) {
.app-show {
    display: none
}
}

@media(max-width:940px) {
.tab-choose {
    display: flex;
    background-color: #EEE;
    z-index: 1
}
/*-.tab-content {
    display: none !important;
    flex-grow: 1;
    flex-shrink: 1
}-*/
.tab-content.is-selected {
    display: block !important
}
.tab-content.f.is-selected {
    display: flex !important
}
.app-hide {
    display: none !important
}
}
#map-section {
    width: 100%;
    height: 100%;
    position: relative
}
#map-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 999
}
#map-btns .map-circle-btn+.map-circle-btn {
    margin-left: 10px
}
.map-circle-btn {
    flex-direction: column;
    width: 6rem;
    height: 6rem;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    color: #3493bb
}
.map-circle-btn:hover {
    background-color: #DDD
}
.map-circle-btn>div {
    margin-top: 8px
}
.map-circle-btn i.bi {
    font-size: 2rem
}
.map-circle-btn.is-selected, .map-circle-btn.is-selected:hover {
    border: 4px #efefef solid;
    background-color: #3493bb
}
.map-circle-btn.is-selected {
    color: #FFF
}

@media(max-width:940px) {
#map-btns {
    flex-direction: column;
    left: 10px;
    bottom: 10px
}
#map-btns .map-circle-btn+.map-circle-btn {
    margin-left: 0;
    margin-top: 10px
}
.map-circle-btn {
    width: 5rem;
    height: 5rem
}
.map-circle-btn>div {
    margin-top: 2px
}
.map-circle-btn i.bi {
    font-size: 2rem
}
.ui-datepicker {
    width: calc(100% - 20px);
    left: 10px !important;
    z-index: 9999 !important
}
.ui-datepicker td span, .ui-datepicker td a {
    padding: .8em .4em
}
}
#map-legend {
    width: auto;
    max-width: 450px;
    position: absolute;
    left: calc(50% + 75px);
    right: 150px;
    top: 0;
    z-index: 500;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0,0,0,0.3)
}
#map-legend .legend-title {
    padding: 10px 15px;
    font-size: .8rem
}
#map-legend>img {
    max-width: 100%
}

@media(max-width:940px) {
#map-legend {
    left: 50px;
    right: 50px
}
}
.map-left-legend {
    padding: 10px;
    max-height: calc(100% - 285px);
    position: absolute;
    left: 0;
    top: 130px;
    z-index: 500;
    overflow-y: auto;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0,0,0,0.3)
}
.legend-oc {
    padding: 6px 2px;
    background-color: #000
}

@media(max-width:1400px) {
.map-left-legend {
    max-height: calc(100% - 350px)
}
}
.map-left-legend .legend-title {
    padding-bottom: 10px;
    text-align: left;
    font-size: .8rem;
    line-height: 1.4
}

@media(min-width:940px) {
#button-toggle-left-legend {
    display: none !important
}
}

@media(max-width:940px) {
#button-toggle-left-legend {
    display: none;
    position: absolute;
    top: 115px;
    left: 10px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    background-color: #FFF
}
#button-toggle-left-legend.is-selected {
    background-color: #3493bb;
    color: #FFF
}
.map-left-legend {
    padding: 8px;
    top: 150px;
    max-width: 20%;
    max-height: calc(100% - 300px)
}
.map-left-legend img {
    width: 100%
}
.map-left-legend.is-hidden {
    display: none !important
}
}
#point-legends {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 2px 8px;
    position: absolute;
    top: 5px;
    left: 95px;
    z-index: 500;
    background-color: rgba(255,255,255,0.8);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5)
}
#point-legends-toggle {
    width: 2rem;
    height: 2rem;
    position: absolute;
    bottom: 5px;
    right: 5px;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.5)
}
.point-legend {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 2px 0;
    font-size: .8rem
}
.point-legend+.point-legend {
    margin-top: 4px
}
.point-legend-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 2px 4px
}
.point-legend-img {
    width: 20px;
    height: 20px;
    margin-right: 2px
}
.point-legend-color {
    width: 15px;
    height: 6px;
    margin-right: 4px
}
.point-legend-color-2 {
    background-color: #50ada9
}
.point-legend-color-1 {
    background-color: #dbb638
}
.point-legend-color-0 {
    background-color: #dc884a
}
.point-legend-color-forbidden {
    background-color: #e64c4e
}
#point-legends.is-selected {
    padding: 0
}
#point-legends:not(.is-selected) #point-legends-toggle {
    background-color: #3493bb;
    color: #FFF;
    bottom: calc(100% - 2rem - 5px)
}
#point-legends:not(.is-selected) .point-legend:first-child {
    padding-right: calc(2rem - 4px)
}
#point-legends.is-selected .point-legend {
    display: none
}

@media(min-width:940px) {
#point-legends-toggle {
    display: none
}
}

@media(max-width:940px) {
#point-legends {
    width: 100%;
    max-width: 100%;
    padding: 6px;
    top: auto;
    bottom: 84px;
    left: 0;
    border-radius: 0
}
.point-legend {
    flex-wrap: wrap
}
}
.g-vhf-legend {
    margin-right: 20px;
    min-width: 65px
}
.vhf-items {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 30px
}
.vhf-item {
    flex-direction: column;
    width: 50%;
    border: 1px #e4e4e4 solid;
    padding: 25px 10px;
    background-color: #EEE
}
.vhf-item:hover {
    background-color: #e1e1e1
}
.vhf-item i {
    font-size: 1.6rem;
    margin-bottom: 8px
}
.vhf-item span {
    line-height: 1.2
}
.vhf-item.is-selected {
    background-color: #399fbd;
    color: #FFF
}
.g-vhf-bot {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 20px
}
.g-radar-opacity {
    display: flex;
    align-items: stretch;
    justify-content: space-between
}
#radar-opacity {
    padding-left: 0;
    padding-right: 0
}

@media(max-width:940px) {
.g-radar-opacity {
    flex-direction: column
}
#radar-opacity {
    margin-top: 10px
}
}
.vhf-legend-div {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    margin-top: 10px
}
.vhf-legend-div img {
    height: 300px
}
.vhf-legends {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    padding-left: 5px;
    overflow-y: hidden;
    font-size: .9rem
}
.vhf-legend {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start
}
#map-animate-control {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    position: absolute;
    left: calc(50% - 380px);
    bottom: 15px;
    z-index: 500
}

@media(max-width:1200px) {
#map-animate-control {
    padding: 15px;
    bottom: 0
}
}
#mac-start {
    width: 3rem;
    height: 3rem;
    margin-right: 30px;
    padding: 0;
    border: 1px transparent solid;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EEE;
    color: #666;
    font-size: 1rem;
    box-shadow: 0 0 0 3px #EEE, 0 0 20px rgba(0,0,0,0.5)
}
#mac-start::before {
    content: '▶'
}
#mac-start.is-played {
    background-color: #3493bb;
    color: #FFF;
    font-size: 1rem
}
#mac-start.is-played::before {
    content: '█'
}
#mac-title {
    margin-top: 6px;
    text-shadow: 2px 0 0 #EEE, -2px 0 0 #EEE, 0 2px 0 #EEE, 0 -2px 0 #EEE, 1px 1px #EEE, -1px -1px 0 #EEE, 1px -1px 0 #EEE, -1px 1px 0 #EEE;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center
}
#mac-bar {
    align-items: center;
    position: relative
}
#mac-bar::after {
    content: '';
    width: calc(100% - 1rem);
    height: 4px;
    background-color: #FFF;
    position: absolute;
    top: calc(50% - 2px);
    left: .5rem;
    z-index: -1;
    opacity: .4
}
.mac-bar-btn {
    flex-grow: 0;
    flex-shrink: 0;
    width: .8rem;
    height: .8rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #EEE;
    position: relative
}
.mac-bar-btn::before, .mac-bar-btn.is-selected::before {
    content: attr(data-time);
    padding: .6em .5em;
    min-width: 4em;
    position: absolute;
    top: -2.2em;
    text-shadow: 2px 0 0 #EEE, -2px 0 0 #EEE, 0 2px 0 #EEE, 0 -2px 0 #EEE, 1px 1px #EEE, -1px -1px 0 #EEE, 1px -1px 0 #EEE, -1px 1px 0 #EEE;
    font-weight: bold;
    font-size: .8rem
}
.mac-bar-date-btn {
    width: 2.2rem;
    height: 2.2rem;
    padding: 6px;
    background-color: transparent
}
.mac-bar-date-btn:hover {
    background-color: rgba(0,0,0,0.1)
}
.mac-bar-date-btn svg {
    width: 100%;
    height: 100%;
    fill: #EEE
}
#mac-bar-date-last svg {
    transform: rotate(180deg);
    transform-origin: center
}
#mac-bar-date-last::before {
    content: '昨日'
}
#mac-bar-date-next::before {
    content: '隔日'
}
.mac-bar-btn.is-selected::before {
    content: attr(data-time) ' 時';
    top: -3.2em;
    font-size: 1rem;
    background-color: #EEE;
    border-radius: 4px;
    z-index: 5;
    box-shadow: 0 0 10px rgba(0,0,0,0.5)
}
.mac-bar-btn.is-selected::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #FFF transparent transparent transparent;
    position: absolute;
    top: calc(-3em + 31px);
    left: calc(50% - 5px);
    z-index: 6
}
.mac-bar-btn+.mac-bar-btn {
    margin-left: 12px
}
.mac-bar-btn.is-selected {
    background-color: #3493bb;
    box-shadow: 0 0 0 2px #3493bb, 0 0 0 5px #EEE
}

@media(min-width:1200px) {
#mac-bar-date-last {
    margin-right: 10px
}
#mac-bar-date-next {
    margin-left: 10px
}
.animate-control-s #mac-bar-date-next {
    margin-left: 0
}
.animate-control-s #mac-bar-date-last {
    margin-right: 0
}
.mac-bar-btn:nth-child(even):not(.is-selected, .mac-bar-date-btn)::before {
    display: none
}
}

@media(max-width:1200px) {
#map-animate-control {
    width: 100%;
    height: 52px;
    padding: 0;
    left: 0;
    bottom: 32px;
    border-top: 1px #fff solid;
    background-color: #FFF;
    overflow-x: auto
}
#map-animate-control>.f-cen {
    flex-grow: 0;
    flex-shrink: 0
}
#mac-start {
    width: 4rem;
    height: 100%;
    margin-right: 0;
    border-right: 1px #FFF solid;
    box-shadow: none;
    border-radius: 0;
    background-color: #5b7f8e;
    color: #FFF
}
#map-animate-control>.f-c {
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    overflow-x: auto
}
#mac-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    margin-top: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #EEE;
    border-top: 1px #b6cad3 solid
}
#mac-bar {
    justify-content: flex-start;
    align-items: flex-end;
    height: 100%;
    position: relative;
    overflow-y: hidden;
    overflow-x: auto
}
#mac-bar::after {
    display: none
}
#mac-btn-bar {
    height: 100%
}
.mac-bar-date-btn {
    background-color: #a6c0cb
}
.mac-bar-date-btn:hover {
    background-color: #94acb6
}
#mac-bar-date-last {
    border-right: 1px #FFF solid
}
#mac-bar-date-next {
    border-left: 1px #FFF solid
}
.mac-bar-btn {
    width: 3.8rem;
    height: 100%;
    border: 0;
    border-radius: 0
}
.mac-bar-btn:nth-child(even):not(.is-selected) {
    background-color: #e1e1e1
}
.mac-bar-btn.is-selected {
    z-index: 5
}
.mac-bar-btn+.mac-bar-btn {
    margin-left: 0
}
.mac-bar-btn::before, .mac-bar-btn.is-selected::before {
    position: static;
    background-color: transparent;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    padding: 0
}
.mac-bar-btn:nth-child(even)::before {
    display: flex
}
.mac-bar-btn.is-selected::after {
    display: none
}
}

@media(max-width:480px) {
#map-animate-control>.f-c {
    overflow: hidden
}
#mac-bar {
    box-sizing: content-box;
    height: calc(100% + 10px);
    padding-bottom: 10px
}
}
.animate-control-s .map-right-divs {
    max-height: calc(100% - 55px)
}
.animate-control-s #quick-position {
    left: 10px
}
.animate-control-s #point-legends {
    left: 55px
}
.animate-control-s #map-bot-divs {
    bottom: 70px
}
.animate-control-s #map-animate-control {
    width: 100%;
    height: 52px;
    padding: 0;
    left: 0;
    bottom: 0;
    border-top: 1px #fff solid;
    background-color: #FFF;
    overflow-x: auto
}
.animate-control-s #map-animate-control>.f-cen {
    flex-grow: 0;
    flex-shrink: 0
}
.animate-control-s #mac-start {
    width: 4rem;
    height: 100%;
    margin-right: 0;
    border-right: 1px #FFF solid;
    box-shadow: none;
    border-radius: 0;
    background-color: #5b7f8e;
    color: #FFF
}
.animate-control-s #map-animate-control>.f-c {
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    overflow-x: auto
}
.animate-control-s #mac-title {
    display: none
}
.animate-control-s #mac-bar {
    justify-content: flex-start;
    align-items: flex-end;
    height: 100%;
    position: relative;
    overflow-y: hidden;
    overflow-x: auto
}
.animate-control-s #mac-bar::after {
    display: none
}
.animate-control-s #mac-btn-bar {
    height: 100%
}
.animate-control-s .mac-bar-date-btn {
    background-color: #a6c0cb
}
.animate-control-s .mac-bar-date-btn:hover {
    background-color: #94acb6
}
.animate-control-s #mac-bar-date-last {
    border-right: 1px #FFF solid
}
.animate-control-s #mac-bar-date-next {
    border-left: 1px #FFF solid
}
.animate-control-s .mac-bar-btn {
    width: 3.8rem;
    height: 100%;
    border: 0;
    border-radius: 0
}
.animate-control-s .mac-bar-btn:nth-child(even):not(.is-selected) {
    background-color: #e1e1e1
}
.animate-control-s .mac-bar-btn.is-selected {
    z-index: 5
}
.animate-control-s .mac-bar-btn+.mac-bar-btn {
    margin-left: 0
}
.animate-control-s .mac-bar-btn::before, .animate-control-s .mac-bar-btn.is-selected::before {
    position: static;
    background-color: transparent;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    padding: 0
}
.animate-control-s .mac-bar-btn:nth-child(odd)::before, .animate-control-s .mac-bar-btn:nth-child(even)::before {
    display: flex
}
.animate-control-s .mac-bar-btn.is-selected::after {
    display: none
}
.feature-popup-item {
    padding: 8px
}
.feature-popup-title {
    margin-bottom: 8px;
    text-align: left;
    font-weight: bold;
    font-size: .94rem
}
.feature-popup-div {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start
}
.feature-popup-content {
    font-size: 1.5rem;
    font-weight: bold;
    color: #399fbd
}
.feature-popup-div .unit {
    margin-left: 4px;
    font-size: .94rem
}
.feature-popup-no-data {
    width: 100%;
    margin-top: 4px;
    color: #AAA;
    font-size: .94rem
}
.feature-popup-div+.feature-popup-title {
    margin-top: 15px
}
.feature-popup-wind-img {
    width: 1.8rem;
    height: 1.8rem;
    transform-origin: center
}
.feature-popup-wind-dir-text {
    margin-left: 6px;
    margin-right: 8px;
    align-self: center;
    text-align: center;
    font-size: .9rem
}
.feature-popup-water-quality.feature-popup-position {
    width: 100%;
    font-size: 1rem
}
.feature-popup-position-title {
    margin-bottom: 6px;
    text-align: left;
    font-weight: bold
}
.feature-popup-position-div {
    line-height: 1.2
}
.feature-popup-water-qualitys {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 250px
}
.feature-popup-water-quality {
    width: 50%;
    padding: 8px
}
.namr-feature {
    width: 215px;
    height: 215px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px rgba(255,255,255,0.6) solid;
    position: relative
}
.namr-feature-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.namr-feature-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 150px;
    height: 30px;
    padding-right: 45px;
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 2px);
    z-index: 5;
    transform-origin: left center;
    text-align: right;
    color: #FFF;
    letter-spacing: 1px
}
.namr-feature-item.is-unfocus {
    opacity: .5;
    z-index: 4
}
.namr-feature-wind {
    background-image: url(../img/namr-feature/namr-feature-wind.webp)
}
.namr-feature-wave {
    background-image: url(../img/namr-feature/namr-feature-wave.webp)
}
.namr-feature-wave2 {
    background-image: url(../img/namr-feature/namr-feature-wave2.webp)
}
.namr-feature-current {
    background-image: url(../img/namr-feature/namr-feature-current.webp)
}
.namr-feature-position {
    width: 100%;
    position: absolute;
    top: calc(100% + 50px);
    left: 0;
    text-align: center;
    color: #FFF;
    text-shadow: 0 0 4px #000;
    opacity: .8
}
.namr-feature-eles {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: absolute;
    top: calc(100% + 68px);
    left: 0
}
.namr-feature-ele {
    padding: 4px;
    border: 0;
    border: 1px rgba(255, 255, 255, 40%) solid;
    border-radius: 2px;
    color: #FFF;
    font-size: .8rem
}
.namr-feature-ele.is-unfocus {
    opacity: .5
}
.namr-feature-ele+.namr-feature-ele {
    margin-left: 5px
}
.namr-feature-ele-wind {
    background-color: #4ca879
}
.namr-feature-ele-wave {
    background-color: #5163a9
}
.namr-feature-ele-wave2 {
    background-color: #72649d
}
.namr-feature-ele-current {
    background-color: #a87b4d
}
.namr-feature-circle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    margin-left: 2px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.3);
    color: #FFF;
    font-size: .9rem
}
.namr-feature-circle-btn:hover {
    background-color: rgba(0,0,0,0.4)
}
.namr-feature-weather {
    margin-left: 4px
}
.leaflet-marker-icon.namr-feature-icon {
    z-index: 1200 !important
}

@media(min-width:940px) {
.info-part.left-info {
    width: 430px;
    right: auto;
    left: 50px;
    justify-content: flex-start
}
}
.circle-btn {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    top: 10px;
    right: 32px;
    z-index: 1;
    color: #AAA;
    font-size: 1.4rem
}
.circle-btn:hover {
    background-color: rgba(0,0,0,0.06)
}
.info-part h2 {
    margin: 0 0 20px 0;
    color: #3493bb;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 2px
}
.info-part .sub-title {
    margin-bottom: 1rem;
    color: #888;
    letter-spacing: .5px;
    font-weight: normal;
    font-size: .9rem
}
.info-part .sub-title .g-type::before {
    content: '｜';
    margin: 0 4px
}

@media(max-width:940px) {
.circle-btn {
    display: none
}
.info-part h2 {
    font-size: 2rem
}
}
.layer-info-group-toggle-ck, .layer-info-toggle-ck {
    display: none
}
.layer-info-group-toggle, .layer-info-toggle {
    width: 100%;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center
}
.layer-info-toggle {
    padding: 14px 12px
}
.layer-info-group-toggle:hover, .layer-info-toggle:hover {
    background-color: rgba(0,0,0,0.04)
}
.layer-info-group-toggle-ck:checked+.layer-info-group-toggle {
    color: #399fbd;
    background-color: #eaeef3
}
.layer-info-toggle-ck:checked+.layer-info-toggle {
    font-weight: bold
}
.layer-info-toggle {
    padding-left: calc(1.6rem + 20px)
}
.layer-info-group-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 10px;
    background-color: #399fbd;
    color: #FFF;
    border-radius: 50%;
    font-size: .9rem
}
.layer-info-group-toggle-ck+.layer-info-group-toggle>.bi-caret-right-fill, .layer-info-toggle-ck+.layer-info-toggle>.bi-caret-right-fill {
    transform-origin: center
}
.layer-info-group-toggle-ck:checked+.layer-info-group-toggle>.bi-caret-right-fill, .layer-info-toggle-ck:checked+.layer-info-toggle>.bi-caret-right-fill {
    color: #399fbd;
    transform: rotate(90deg)
}
.layer-info-ul, .layer-info-div {
    display: none
}
.layer-info-group-toggle-ck:checked~.layer-info-ul, .layer-info-toggle-ck:checked~.layer-info-div {
    display: block
}
.layer-info-ul>li:nth-child(odd) {
    background-color: #FFF
}
.layer-info-ul>li:nth-child(even) {
    background-color: #f9f9f9
}
.layer-info-div {
    padding-left: calc(1.6rem + 20px);
    padding-bottom: 10px;
    padding-right: 40px
}
.layer-info-table th, .layer-info-table td {
    padding: 8px;
    border-top: 1px #e1e1e1 solid;
    font-size: .9rem;
    line-height: 1.4
}
.layer-info-table th {
    width: 110px;
    font-weight: normal;
    color: #888;
    text-align: left
}
.layer-info-div h3 {
    margin: 20px 0 15px 0;
    font-size: 1rem;
    letter-spacing: .5px
}
.layer-info-div .unit-btn, .weather-unit-btn {
    display: inline-flex;
    padding: 4px;
    font-size: .8rem;
    border: 1px transparent solid;
    border-radius: 4px;
    background-color: #EEE;
    color: #399fbd
}
.layer-info-div .unit-btn:hover {
    background-color: #e1e1e1
}
.wx-img {
    display: inline-block;
    vertical-align: middle;
    width: 30px
}
.wx-img+span {
    display: inline-block;
    vertical-align: middle
}
.weather-title {
    display: flex;
    align-items: center;
    justify-content: flex-start
}
#point-content {
    padding-right: 10px
}
#point-content>.info-sub-div:first-child {
    margin-top: 0
}
.attraction-img {
    display: block;
    max-width: 100%;
    margin-bottom: 25px
}
.att-word {
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0 10px;
    font-size: .94rem;
    letter-spacing: 1px;
    color: #888
}
.att-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    line-height: 1.4;
    text-align: justify
}
.att-icon {
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 12px
}
.att-b-icons {
    align-items: stretch;
    flex-wrap: wrap
}
.att-b-icon-div {
    display: block;
    align-self: flex-start;
    min-width: 64px;
    margin: 6px;
    padding: 6px;
    border: 0;
    border-radius: 2px;
    background-color: transparent
}
.att-b-icon {
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0 auto
}
.att-b-icon-text {
    max-width: 4.5em;
    margin: 4px auto 0 auto;
    text-align: center;
    font-size: .8rem;
    line-height: 1.1
}
.att-b-icon-limit {
    margin-top: 6px;
    padding: 4px;
    border: 0;
    border-radius: 2px;
    background-color: #f3eaea;
    text-align: center;
    color: #9f2929;
    line-height: 1.2;
    font-size: .8rem
}
.att-b-icon-limit.is-selected {
    background-color: #9f2929;
    color: #FFF
}
.att-content {
    flex-grow: 1;
    flex-shrink: 1;
    line-height: 1.4
}
.att-row.last-update {
    justify-content: flex-end;
    margin-top: 20px;
    opacity: .7;
    text-align: right;
    font-size: .8rem
}
.action-limit-scope-text {
    padding: 3px;
    text-align: center;
    line-height: 1.4;
    border: 0;
    background-color: transparent;
    text-shadow: 3px 0 0 #FFF, -3px 0 0 #FFF, 0 3px 0 #FFF, 0 -3px 0 #FFF, 2px 2px #FFF, -2px -2px 0 #FFF, 2px -2px 0 #FFF, -2px 2px 0 #FFF;
    color: #b10a0a;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: none
}
.li52-div {
    position: relative;
    padding: 24px 0 28px
}
.li52-line {
    width: 100%;
    height: 2px;
    background-color: #CCC
}
.li52-div-marker {
    position: absolute;
    top: calc(0.8rem - 10px)
}
.li52-div-0 {
    left: 0
}
.li52-div-1 {
    left: 100%
}
.li52-top-word {
    margin-bottom: 4px;
    font-size: .8rem
}
.li52-marker {
    height: 12px;
    width: 4px;
    background-color: #999
}
.li52-div-value .li52-top-word {
    color: #3493bb;
    font-weight: bold
}
.li52-div-value .li52-marker {
    background-color: #3493bb
}
.li52-word {
    margin-top: 6px;
    font-size: .8rem
}
.li52-div-1 .li52-word {
    position: absolute;
    right: 0;
    word-break: keep-all
}
.li53-div-out {
    display: flex;
    align-items: center;
    justify-content: flex-start
}
.li53-padding-div {
    padding: 2.2rem;
    position: relative
}
.li53-div-compass {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    opacity: .6
}
.li53-div-wave-direction-arrow-text {
    width: 3.6rem;
    height: 50%;
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: 1;
    transform-origin: left bottom;
    text-align: center;
    color: #3493bb;
    font-size: .8rem
}
.li53-div-wave-direction-arrow-text div {
    position: relative;
    left: -1.6rem;
    top: -2rem
}

@media(min-width:940px) {
.li53-div-out .li53-text {
    margin-left: 16px
}
}
.li53-div {
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    width: 150px;
    height: 150px;
    border: 2px #d9d9d9 solid;
    border-radius: 100%
}
.li53-div .main {
    height: 100%;
    background-color: #3493bb;
    border-radius: 100px
}
.li53-div .common {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #FFF
}
.li53-div .mask1 {
    border-radius: 100px 0 0 100px;
    left: 0;
    transform-origin: right center
}
.li53-div .mask2 {
    transform-origin: left center;
    left: 50%;
    border-radius: 0 100px 100px 0
}

@media(max-width:940px) {
.li53-div {
    width: 130px;
    height: 130px
}
.li53-div-out {
    flex-direction: column
}
.li53-div-out .li53-text {
    margin-top: 10px
}
.layer-info-table th.li53-th {
    width: 75px
}
}
.featureInfo {
    min-width: 250px
}
.base-maps-div {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap
}
.base-map {
    flex-direction: column;
    width: 50%;
    padding: 0;
    border: 1px transparent solid;
    background-color: transparent;
    position: relative
}
.base-map:hover {
    background-color: rgba(0,0,0,0.06);
    color: #AAA
}
.base-map:active {
    background-color: rgba(0,0,0,0.08)
}
.base-map>span {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 6px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 6px transparent solid;
    text-align: left
}
.base-map.is-selected>span {
    border-color: #399fbd;
    color: #FFF
}
.base-map img {
    display: block;
    width: 100%
}
*::-ms-backdrop, .base-map {
height:150px
}
*::-ms-backdrop, .base-map img {
height:100%
}
.value-mode-div input, .style-setting-div input {
    display: none
}
.choose-mode {
    flex: 1;
    padding: 15px;
    background-color: #EEE;
    text-align: center
}
.choose-mode:hover, .choose-style:hover {
    background-color: #e1e1e1
}
.value-mode-div input:checked+.choose-mode, .style-setting-div input:checked+.choose-style {
    background-color: #399fbd;
    color: #FFF
}
.value-mode-div input:disabled+.choose-mode, .value-mode-div input:disabled+.choose-mode:hover, .style-setting-div input:disabled+.choose-style, .style-setting-div input:disabled+.choose-style:hover {
    opacity: .6;
    background-color: #EEE;
    color: #AAA;
    cursor: not-allowed;
    pointer-events: none
}
.choose-mode:first-of-type, .choose-style:first-of-type {
    border-radius: 4px 0 0 4px;
    border-right: 0
}
.choose-mode:last-of-type, .choose-style:last-of-type {
    border-radius: 0 4px 4px 0
}
.style-setting {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}
.style-setting+.style-setting {
    margin-top: 8px
}
.style-setting-title {
    margin-right: auto;
    letter-spacing: .5px
}
.style-setting-title-main {
    margin-right: 2px;
    font-weight: bold
}
.style-setting-info {
    flex-grow: 0;
    flex-shrink: 0;
    width: .9rem;
    height: .9rem;
    margin-right: 12px;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    color: #3493bb;
    font-size: .9rem
}
.choose-style {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 15px;
    background-color: #EEE;
    text-align: center
}
.map-right-divs {
    max-height: 100%;
    padding: 20px 10px 20px 160px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 400;
    overflow-y: auto;
    transition: background-color ease-in-out .3s
}

@media(max-width:1200px) {
.map-right-divs {
    max-height: calc(100% - 84px)
}
}

@media(min-width:940px) {
.map-right-divs:hover {
    background-color: rgba(0,0,0,0.4)
}
}
#button-toggle-right {
    display: none;
    position: fixed;
    top: 62px;
    right: 10px;
    z-index: 500
}
#button-close-right {
    display: none
}

@media(max-width:940px) {
.map-right-divs {
    width: 210px;
    height: 100%;
    max-height: 100%;
    right: -210px;
    z-index: 9999;
    overflow-y: auto;
    padding: 10px 10px 25px 170px;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
    transition: right .3s ease-in-out
}
.map-right-divs.is-selected {
    right: 0;
    overflow-y: auto
}
#button-toggle-right, #button-close-right {
    display: flex;
    padding: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    background-color: #FFF;
    text-align: center
}
#button-toggle-right .mrs-label {
    right: 0;
    padding-right: 0;
    top: calc(100% + 6px)
}
.map-right-divs.is-selected #button-toggle-right {
    background-color: #3493bb;
    color: #FFF
}
.map-right-divs .map-right-settings {
    margin-top: 20px
}
}
.map-right-settings {
    position: relative
}
.map-right-settings::before {
    content: '';
    width: 2rem;
    height: calc(100% + 20px);
    position: absolute;
    left: 0;
    top: -10px;
    background-color: #FFF;
    border-radius: 50px;
    z-index: -1;
    box-shadow: 0 0 10px rgba(0,0,0,0.5)
}
.map-right-settings+.map-right-settings {
    margin-top: 30px
}

@media(max-height:940px) {
.map-right-settings+.map-right-settings .mrs-label {
    padding-left: 10px;
    left: 100%;
    right: auto
}
.map-right-settings+.map-right-settings {
    margin-top: 0;
    position: fixed;
    top: 95px;
    left: 10px
}
}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: 0
}
.leaflet-touch .leaflet-bar a, .mrs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50% !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    color: #3493bb;
    background-color: #FFF;
    line-height: 1;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: pointer
}
.mrs-btn {
    position: relative;
    box-shadow: none;
    background-color: transparent
}
.mrs-btn+.mrs-btn, .mrs-group {
    margin-top: 4px
}
.leaflet-touch .leaflet-bar a:hover {
    background-color: #DDD
}
.mrs-btn:hover {
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0,0,0,0.5)
}
.leaflet-touch .leaflet-bar a:focus {
    border-color: #86b7fe;
    outline: 0 !important;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,0.2)
}
.mrs-btn.is-selected, .mrs-btn.is-selected:hover {
    box-shadow: 0 0 0 4px #fff;
    background-color: #3493bb;
    color: #FFF
}
.measurement-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0
}
.sub-layer .measurement-icon {
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 8px
}
.measurement-point {
    border: 2px #FFF solid;
    border-radius: 50%
}
.measurement-image {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}
.measurement-line::before {
    content: '／';
    font-weight: bold
}
.measurement-polygon {
    border: 2px #FFF solid
}
.measurement-icon-main-entrance {
    background-color: #f8d62f
}
.measurement-icon-start-end-position {
    background-color: #000
}
.measurement-icon-north-traditional-survey {
    background-image: url('../img/measurements/north-traditional-survey.webp')
}
.measurement-icon-life-saving {
    border-radius: 50%;
    background: #FFF;
    background-image: url('../img/measurements/life-saving.svg');
    box-shadow: 0 0 0 2px #fff
}
.measurement-icon-information-board {
    background-image: url('../img/measurements/information-board.webp')
}
.measurement-icon-billboard {
    background-image: url('../img/measurements/billboard.svg')
}
.measurement-icon-restroom {
    background-image: url('../img/measurements/restroom.svg')
}
.measurement-icon-rinse {
    background-image: url('../img/measurements/rinse.webp')
}
.measurement-icon-park {
    background-image: url('../img/measurements/park.webp')
}
.measurement-icon-stages {
    background-image: url('../img/measurements/stages.svg')
}
.measurement-icon-security-checkpoint {
    background-image: url('../img/measurements/security-checkpoint.svg')
}
.measurement-icon-beaches {
    color: #b265d5
}
.measurement-icon-reefs {
    color: #3e67a1
}
.measurement-icon-potentialFishingSpots {
    color: #277191
}
.measurement-icon-niceFishingSpots {
    color: #2efff1
}
.measurement-icon-dist {
    color: #000
}
.measurement-icon-road {
    color: #0404fd
}
.measurement-icon-trail {
    color: #f58b35
}
.measurement-icon-groin {
    color: red
}
.measurement-icon-tetrapods {
    color: purple
}
.measurement-highest-tidal {
    color: #487bb6
}
.measurement-icon-protect {
    background-image: url('../img/measurements/protect.webp')
}
.measurement-icon-seawall {
    background-image: url('../img/measurements/seawall.webp')
}
.measurement-icon-windbreak {
    border-color: #97aaa8;
    background-color: #80ffb0
}
.measurement-icon-plant {
    border-color: #97aaa8;
    background-color: #7fe5cd
}
.measurement-icon-oyster {
    border: 2px #bf840c solid;
    background-image: url('../img/measurements/oyster.webp');
    background-size: cover
}
.leaflet-control-zoom-out {
    margin-top: 4px
}
.mrs-label {
    padding-right: 10px;
    position: absolute;
    right: 100%;
    color: #FFF;
    word-break: keep-all;
    white-space: nowrap;
    font-size: .9rem;
    letter-spacing: .5px;
    user-select: none;
    text-shadow: 0 0 4px #000;
    text-align: right
}
.layer-classification-show .mrs-label {
    font-size: .8rem
}
.mrs-label>i {
    font-size: 12px;
    margin-left: 4px
}
.mrs-sub-val {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    word-break: keep-all;
    white-space: nowrap
}
.stages-icon svg {
    width: 100%;
    height: 100%;
    fill: #4e6b9b
}
.measurement-risk-map-legends {
    padding: 0 15px 10px 15px;
    align-items: center;
    justify-content: flex-start;
    font-size: .84rem
}
.measurement-risk-map-legend {
    text-align: center
}
.measurement-risk-map-legend .bi {
    display: block;
    margin-bottom: 4px;
    font-size: 1rem
}
.measurement-risk-map-legend+.measurement-risk-map-legend {
    margin-left: 15px
}
.measurement-risk-map-legend-1 {
    color: #63b56f
}
.measurement-risk-map-legend-2 {
    color: #aacc57
}
.measurement-risk-map-legend-3 {
    color: #dfd64f
}
.measurement-risk-map-legend-4 {
    color: #e79b5e
}
.measurement-risk-map-legend-5 {
    color: #cc5757
}
.self-mrs-btn {
    z-index: 500;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    color: #3493bb;
    background-color: #FFF
}
.self-mrs-btn:hover {
    background-color: #DDD
}
.self-mrs-btn svg {
    width: 14px;
    height: 14px;
    fill: #3493bb
}
#quick-position {
    position: absolute;
    top: 10px;
    left: 50px;
    margin-top: 0
}

@media(max-width:940px) {
#quick-position {
    left: 10px
}
}
#quick-position-table_wrapper .dataTables_scrollHead {
    display: none
}
#quick-position-table_wrapper .dataTables_scrollBody {
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    overflow-x: hidden !important
}
#quick-position-table_wrapper .dataTables_filter {
    float: none;
    margin-top: 20px;
    margin-bottom: 15px
}
#quick-position-table_wrapper .dataTables_scrollBody {
    height: 250px
}
#quick-position-table tr {
    text-align: left;
    cursor: pointer
}
.position-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 0
}
.position-hashtag {
    flex-shrink: 0;
    flex-grow: 0;
    margin-left: 15px;
    font-size: .9rem;
    white-space: nowrap
}

@media(max-width:940px) {
.position-hashtag {
    margin-left: 5px
}
}
.position-hashtag::before {
    content: '#';
    margin-right: 2px
}
#quick-position-tags {
    margin-top: 10px
}
.position-filter {
    padding: 6px;
    border-radius: 4px;
    background-color: transparent;
    border: 1px transparent solid;
    color: #999
}
.position-filter:hover {
    background-color: rgba(0,0,0,0.06)
}
.position-filter.is-selected {
    background-color: #3493bb;
    color: #FFF
}
.navigations {
    border-top: 1px #e2e2e2 solid;
    border-bottom: 1px #e2e2e2 solid
}
.navigation {
    display: flex;
    align-items: stretch;
    justify-content: center;
    color: #666
}
.navigation.navigation-title:nth-child(odd):hover {
    background-color: transparent
}
.navigation:not(.navigation-title) {
    cursor: pointer
}
.navigation:nth-child(odd) {
    background-color: #FFF
}
.navigation:nth-child(odd):hover {
    background-color: #f1f1f1
}
.navigation:nth-child(even) {
    background-color: #f9f9f9
}
.navigation:nth-child(even):hover {
    background-color: #EEE
}
.navigation-type {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 190px;
    padding: 15px 8px;
    text-align: left
}
.navigation-type>.measurement-icon {
    margin-right: 10px
}
.navigation-beach {
    flex-grow: 1;
    flex-shrink: 1;
    padding: 15px 8px;
    text-align: left
}
.navigation-tags {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8px
}
.navigation-tag {
    flex-shrink: 0;
    flex-grow: 0;
    padding: 6px;
    border-radius: 4px;
    background-color: transparent;
    border: 1px transparent solid;
    color: #999;
    margin: 10px 8px;
    font-size: .9rem;
    white-space: nowrap
}
.navigation-tag::before {
    content: '#';
    margin-right: 2px
}
.navigation-tag:hover {
    background-color: rgba(0,0,0,0.06)
}
.navigation-tag.is-selected {
    background-color: #3493bb;
    color: #FFF
}

@media(max-width:940px) {
.navigation {
    display: block
}
.navigation-title {
    display: none
}
.navigation-type {
    width: 100%;
    font-size: .9rem;
    padding: 15px 15px 5px 15px
}
.navigation-beach {
    padding: 5px 15px 15px 15px;
    font-size: 1.3rem
}
}
#map-bot-divs {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 400
}

@media(max-width:1200px) {
#map-bot-divs {
    bottom: 97px
}
}

@media(max-width:940px) {
#map-bot-divs {
    display: none
}
}
#map-bot-divs .f+.f {
    margin-top: 30px
}
.map-bot-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    position: relative
}
.map-bot-settings::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    border-radius: 50px;
    z-index: -1;
    box-shadow: 0 0 10px rgba(0,0,0,0.5)
}
.map-bot-settings::after {
    display: block;
    margin-bottom: 5px;
    position: absolute;
    top: -1.2rem;
    left: 0;
    text-shadow: 0 0 4px #000;
    color: #FFF;
    font-size: .8rem
}

@media(max-width:940px) {
.map-bot-settings::after {
    top: -1.4rem
}
}
#action-settings::after {
    content: '進行活動'
}
#type-settings::after {
    content: '時間點'
}
#type-settings .mrs-btn {
    width: auto;
    border-radius: 50px !important;
    padding: 10px;
    font-size: .8rem
}
.map-bot-settings .mrs-btn+.mrs-btn {
    margin-top: 0
}
.map-bot-settings .action-img {
    width: 64%;
    height: 64%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}
#action-settings .mrs-btn {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0
}
.action-setting-17 .action-img, .s-action-17 .action-img {
    background-image: url('../img/sea-activities/17.webp')
}
.action-setting-17.is-selected .action-img, .s-action-17.is-selected .action-img {
    background-image: url('../img/sea-activities/17-selected.webp')
}
.action-setting-20 .action-img, .s-action-20 .action-img {
    background-image: url('../img/sea-activities/20.webp')
}
.action-setting-20.is-selected .action-img, .s-action-20.is-selected .action-img {
    background-image: url('../img/sea-activities/20-selected.webp')
}
.action-setting-16 .action-img, .s-action-16 .action-img {
    background-image: url('../img/sea-activities/16.webp')
}
.action-setting-16.is-selected .action-img, .s-action-16.is-selected .action-img {
    background-image: url('../img/sea-activities/16-selected.webp')
}
.action-setting-1 .action-img, .s-action-1 .action-img {
    background-image: url('../img/sea-activities/1.webp')
}
.action-setting-1.is-selected .action-img, .s-action-1.is-selected .action-img {
    background-image: url('../img/sea-activities/1-selected.webp')
}
.action-setting-12 .action-img, .s-action-12 .action-img {
    background-image: url('../img/sea-activities/12.webp')
}
.action-setting-12.is-selected .action-img, .s-action-12.is-selected .action-img {
    background-image: url('../img/sea-activities/12-selected.webp')
}
.action-setting-15 .action-img, .s-action-15 .action-img {
    background-image: url('../img/sea-activities/15.webp')
}
.action-setting-15.is-selected .action-img, .s-action-15.is-selected .action-img {
    background-image: url('../img/sea-activities/15-selected.webp')
}
.action-setting-26 .action-img, .s-action-26 .action-img {
    background-image: url('../img/sea-activities/26.webp')
}
.action-setting-26.is-selected .action-img, .s-action-26.is-selected .action-img {
    background-image: url('../img/sea-activities/26-selected.webp')
}
.layers .switch-box-label {
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0 12px 0 0
}
.layer {
    width: 100%;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center
}
.layer:hover {
    background-color: rgba(0,0,0,0.06)
}
.layer-visible, .layer-show-quick, .layer-all, .layer-legend, .layer-opacity {
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0
}
.layer-visible, .layer-show-quick, .layer-all {
    margin-right: 10px
}
.layer-visible:checked+.layer-name, .layer-visible:checked~.bi, .layer-visible:checked~.layer-name, .layer-show-quick:checked+.layer-name, .layer-all:checked+.layer-name {
    color: #399fbd
}
.layer-visible {
    display: none
}
.layer-name {
    width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    letter-spacing: .5px
}
.layer-name>i, .layer>.measurement-icon, .layer>.bi {
    margin-right: 8px
}
.layer-legend {
    margin: 0 6px;
    visibility: hidden
}
.layer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    margin-left: 10px;
    border-radius: 50%;
    font-size: .9rem
}
.layer-opacity {
    width: 80px;
    padding: 0;
    visibility: hidden
}
.layer-visible:checked~.layer-legend, .layer-visible:checked~.layer-opacity, .layer-visible:checked~.layer-icon, .layer-show-quick:checked~.layer-legend, .layer-show-quick:checked~.layer-opacity, .layer-show-quick:checked~.layer-icon {
    visibility: visible
}
.layer-group-toggle {
    width: 2rem;
    height: 2rem;
    margin-left: 5px;
    border: 1px transparent solid;
    border-radius: 50%;
    background-color: transparent;
    transform-origin: center
}
.layer-group-toggle:hover {
    background-color: rgba(0,0,0,0.06)
}
.sub-layer {
    display: none;
    padding-left: 20px;
    font-size: .9rem;
    max-height: 200px;
    overflow-y: scroll;
    background-color: #FFF
}
#layers-satellites {
    max-height: inherit
}
.layer-group-title.is-opened .layer-group-toggle {
    color: #399fbd;
    transform: rotate(90deg)
}
.layer-group-title.is-opened+.sub-layer {
    display: block
}
.layer-group-title>.layer>.switch-box-label {
    visibility: hidden
}
.status-li {
    padding: 10px;
    text-align: center;
    opacity: .5
}
.layer-classification {
    display: none
}
.layer-classification:checked+.layer-classification-toggle-div {
    background-color: #cfd9f7;
    border-radius: 50px 50px 0 0
}
.layer-classification:checked+.layer-classification-toggle-div .mrs-btn {
    box-shadow: 0 0 0 4px #DDD;
    background-color: #3493bb;
    color: #FFF
}
.layer-classification:checked+.layer-classification-toggle-div .mrs-btn .mrs-label {
    display: block
}
.layer-classification+.layer-classification-toggle-div .mrs-btn .mrs-label i::before {
    transition: transform .3s
}
.layer-classification:checked+.layer-classification-toggle-div .mrs-btn .mrs-label i::before {
    transform: rotate(180deg)
}
.layer-classification+.layer-classification-toggle-div+.layer-classification-show, .layer-classification+.layer-classification-toggle-div.is-hidden, .layer-classification+.layer-classification-toggle-div+.layer-classification-show.is-hidden, .layer-classification:checked+.layer-classification-toggle-div+.layer-classification-show.is-hidden {
    display: none
}
.layer-classification:checked+.layer-classification-toggle-div+.layer-classification-show {
    display: block
}
.layer-classification-show {
    padding: 4px 0;
    background-color: #DDD;
    border-radius: 0 0 50px 50px
}
.layer-classification-show .mrs-btn {
    color: #506fc6
}
.layer-classification-show .mrs-btn.is-selected, .layer-classification-show .mrs-btn.is-selected:hover {
    background-color: #506fc6;
    color: #FFF
}

@media(max-width:940px) {
.layer-classification:checked+.layer-classification-toggle-div {
    width: 28px
}
.layer-classification:checked+.layer-classification-toggle-div+.layer-classification-show {
    width: 28px
}
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    transition: none
}
.drag-popup .leaflet-popup-close-button {
    display: none
}
.drag-popup .leaflet-popup-content {
    margin: 20px
}
.drag-popup .drag-close {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: #c3c3c3;
    font-size: 1rem;
    padding: 4px
}
.drag-popup .drag-close:hover {
    color: #999
}
.waiting {
    display: block;
    width: 40px;
    height: 40px
}
.marker-radar {
    z-index: 999 !important
}
.leaflet-marker-photo-cluster {
    margin-left: 25px !important
}
.community-share {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    font-size: .94rem
}
.community-share-text {
    margin-right: 6px
}
.community-share-text i {
    margin-right: 6px
}
.community-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    padding: 0;
    border: 1px transparent solid;
    border-radius: 50%;
    color: #FFF
}
.community-share-btn svg {
    width: 60%;
    height: 60%;
    fill: #FFF
}
.community-share-fb {
    background-color: #5161bf
}
.community-share-fb:hover {
    background-color: #4957ab
}
.community-share-line {
    background-color: #51bf54
}
.community-share-line:hover {
    background-color: #47a849
}
.community-share-twitter {
    background-color: #5ebdda
}
.community-share-twitter:hover {
    background-color: #52a6bf
}
.community-share-gplus {
    background-color: #d85f5f
}
.community-share-gplus:hover {
    background-color: #be5252
}
.community-share-plurk {
    background-color: #de7256
}
.community-share-plurk:hover {
    background-color: #c26249
}
.community-share-link {
    background-color: #AAA
}
.community-share-link:hover {
    background-color: #999
}
.swal2-container .community-share {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px #DDD solid
}
#bottom-info {
    display: none;
    border-radius: 0;
    overflow-y: auto
}

@media(min-width:940px) {
#bottom-info {
    width: 100%;
    height: 50%;
    padding: 0;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0
}
}
#bottom-info.is-opened {
    display: flex
}
#bottom-info .loading {
    display: none
}
#bottom-info.is-loading .loading {
    display: flex;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0
}
#bottom-info.is-loading .info-title, #bottom-info.is-loading .info-part-main {
    display: none
}
#bottom-title-div {
    width: 100%;
    margin: 0;
    padding: 20px 15px;
    font-weight: bold;
    color: #399fbd;
    letter-spacing: .5px
}

@media(max-width:940px) {
#bottom-title-div {
    padding: 20px 15px 10px 15px
}
}
#bottom-title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
    font-size: 1.4rem
}

@media(max-width:940px) {
#bottom-title {
    flex-direction: column
}
}
#bottom-close {
    position: static
}
#point-set {
    margin-left: 4px;
    font-size: .9rem;
    color: #888
}
#point-set::before {
    content: '（'
}
#point-set::after {
    content: '）'
}
#bottom-close:hover, #bottom-close:focus {
    color: #999
}
#bottom-content {
    padding: 0 15px 15px 15px;
    overflow-y: auto
}
.table-weather {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    border: 1px #DDD solid;
    border-collapse: collapse;
    background-color: #FFF;
    font-size: .9rem
}

@media(max-width:940px) {
.table-weather {
    display: none
}
}
.table-weather th, .table-weather td {
    padding: 6px;
    border-left: 1px #DDD solid;
    border-right: 1px #DDD solid;
    text-align: center
}
.table-weather th {
    font-weight: normal
}
.table-weather thead th {
    border-bottom: 1px #DDD solid
}
.table-weather .odd {
    background-color: rgba(0,0,0,0.04)
}
.table-weather .day-is-hover, .table-weather .odd.day-is-hover {
    background-color: #399fbd;
    color: #FFF
}
.table-weather .td-0 {
    width: 125px
}
.weather-icon {
    width: 100%;
    max-width: 40px
}

@media(max-width:940px) {
.weather-icon {
    width: 100%;
    max-width: 30px
}
}
.table-weather .weather-icon {
    display: block;
    margin: 0 auto
}
.weather-tidal {
    font-size: .84rem
}
.tidal-icon-type {
    margin-left: 6px;
    vertical-align: middle
}

@media(min-width:940px) {
.tidal-icon-type {
    display: none
}
}

@media(max-width:940px) {
.tidal-time, .tidal-type {
    display: inline
}
.tidal-type {
    margin-left: 4px
}
}
.weather-tidal .bi {
    font-size: 1.4rem;
    vertical-align: middle
}
.weather-tidal-up {
    color: #b35481
}
.weather-tidal-down {
    color: #399fbd
}
.tidal-time {
    margin-bottom: 4px
}

@media(min-width:940px) {
.list-weather {
    display: none
}
}
.list-weather .weather-icon {
    margin-right: 8px
}
#weather-source {
    position: absolute;
    right: 0;
    padding: 6px;
    border: 0;
    border-radius: 4px;
    background-color: transparent;
    color: #888;
    letter-spacing: .5px;
    font-weight: normal;
    font-size: .9rem
}
#weather-source:hover {
    color: #444
}
#weather-source .bi {
    margin-left: 4px;
    color: #399fbd
}
.weather-source-link {
    display: block;
    padding: 8px;
    border-radius: 4px
}
.weather-source-link+.weather-source-link {
    margin-top: 4px
}

@media(max-width:940px) {
#weather-source {
    position: static;
    margin-top: 6px;
    align-self: flex-end
}
}
#biological-info.info-part h2 {
    margin: 0;
    font-size: 2.4rem
}
.g-place-description {
    line-height: 1.2
}
.g-biological, .g-diving {
    width: 100%;
    margin-top: 10px;
    padding: 15px;
    background: #FFF;
    box-shadow: 0 0 10px rgba(0,0,0,0.1)
}
.g-biological-main-img.preview-img {
    width: 140px;
    margin-right: 0;
    justify-content: flex-start;
    background-color: #EEE
}
.g-biological-main-img.preview-img>img {
    width: 100%;
    object-fit: cover
}
*::-ms-backdrop, .g-biological-main-img.preview-img>img {
width:auto
}
#biological-info .preview-img-none {
    width: 140px;
    min-height: 100px
}
.g-biological-content {
    margin-left: 16px
}
.g-biological-title, .g-diving-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 6px
}
.swal2-content .g-diving-title {
    justify-content: center
}
.g-biological-name, .g-diving-name {
    margin-right: 4px;
    font-size: 1.4rem;
    color: #3493bb
}
.g-biological-scientific-name, .g-diving-entrance {
    color: #3493bb;
    margin-bottom: 12px;
    font-style: italic
}
.g-diving-entrance {
    margin-top: 10px;
    color: #666;
    font-size: .9rem;
    line-height: 1.2
}
.swal2-content .g-diving-entrance {
    text-align: center
}
.g-biological-tag, .g-diving-tag {
    margin-left: 6px;
    padding: 4px;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.1);
    font-size: .84rem
}
.g-biological-poisonous {
    background-color: rgba(221,130,130,0.4)
}
.g-biological-special {
    background-color: rgb(221, 177, 130, 0.4)
}
.btn-diving {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    font-size: 1rem;
    border: 0;
    background-color: #EEE
}
.btn-diving:hover, .btn-diving:focus {
    background-color: #d9d9d9
}
.btn-diving:active {
    background-color: #d1d1d1
}
.btn-diving-position.is-selected {
    background-color: #3493bb;
    color: #FFF
}
.btn-diving img {
    width: 1.1rem
}
.g-biological-description {
    line-height: 1.2
}
.g-biological-sub-imgs {
    margin-top: 4px;
    flex-wrap: wrap
}
.g-biological-sub-imgs .preview-img {
    height: 30px
}
.g-diving-features {
    padding-left: 1.5rem;
    overflow: inherit
}
.g-diving-features li {
    list-style: disc;
    line-height: 1.2
}
.g-diving-features li+li {
    margin-top: 2px
}
.g-diving-links {
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: .8rem
}
.g-diving-links span, .g-diving-links a {
    line-height: 1.2
}
.btn-position-place {
    margin: 0 auto;
    padding: 4px;
    border: 0;
    background-color: transparent;
    color: #3493bb
}
.btn-position-place:hover, .btn-position-place:focus {
    color: #2e84a8
}
.btn-position-place:active {
    color: #287393
}

@media(max-width:940px) {
.g-biological {
    margin-top: 30px;
    padding: 0;
    box-shadow: none
}
.g-biological-scientific-name {
    margin-bottom: 8px
}
.g-biological-main-img.preview-img {
    width: 90px;
    height: 60px
}
#biological-info .preview-img-none {
    width: 90px;
    min-height: 60px
}
}

@media(max-width:940px) {
#comment-info .info-part-btn {
    display: flex;
    align-items: stretch;
    justify-content: flex-start
}
}
#comment-info .to-top, #comment-info .back-to-list {
    flex: 1;
    width: 100%
}
#comment-info .to-top {
    border-right: 1px #FFF solid
}
#comment-info.info-part h2 {
    margin: 0;
    font-size: 2.4rem
}
.board-div {
    justify-content: space-between;
    flex-wrap: wrap
}
.board-main-div {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap
}
.board-main-div>.board {
    width: 30%
}
.board {
    margin: 6px;
    background-color: #FFF;
    border: 4px #DDD solid;
    box-shadow: 0 0 10px rgba(0,0,0,0.15)
}
.board-main-div .board:last-child:nth-child(3n-1) {
    margin-right: calc(32% + 3% / 2)
}
.board-main-div .board:last-child:nth-child(3n-2) {
    margin-right: calc(64% + 6% / 2)
}

/*-@media(max-width:940px) {
.board-main-div>.board {
    width: 45%
}
.board-main-div .board:last-child:nth-child(3n-1) {
    margin-right: inherit
}
.board-main-div .board:last-child:nth-child(3n-2) {
    margin-right: inherit
}
.board-main-div .board:last-child:nth-child(2n-1) {
    margin-right: calc(49% + 2%)
}
}-*/
.board-icon {
    padding: 12px 10px;
    color: #399fbd;
    font-size: 2rem;
    text-align: center
}
.board-icon svg {
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    fill: #399fbd
}
.board-icon img {
    width: 2rem;
    height: 2rem;
    margin: 0 auto
}
.board-value-div {
    min-height: 40px;
    padding: 8px;
    background-color: #EEE
}
.board-forbidden .board-value-div {
    background-color: #e78383
}
.board-value-dir {
    font-size: 1.2rem;
    margin-left: 10px
}
.board-value-dir .bi {
    transform-origin: center
}
.board-0 .board-value-dir .bi {
    color: #b87d53
}
.board-1 .board-value-dir .bi {
    color: #a68d26
}
.board-2 .board-value-dir .bi {
    color: #3a9491
}
.board-present .board-value-dir .bi {
    color: #888
}
.board-forbidden .board-value-dir .bi {
    color: #FFF
}
.board-value-others {
    padding: 4px 0
}
.board-value-other {
    padding: 4px 8px;
    text-align: center
}
.b-short-name {
    margin-right: 6px;
    color: #666;
    font-size: .84rem
}
.board-forbidden .b-short-name {
    color: #DDD
}
.b-type {
    width: 99%;
    margin-bottom: 5px;
    font-size: .84rem;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}
.b-mark {
    color: #3456bb;
    font-size: 1rem;
    letter-spacing: .5px
}
.b-mark.fs-09r {
    font-size: .9rem
}
.number .b-mark {
    color: #3456bb;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 1px
}
.b-unit {
    margin-left: 4px;
    color: #666;
    font-size: .9rem
}
.b-unit.fs-08r {
    font-size: .8rem
}

@media(max-width:940px) {
.board {
    background-color: #f9f9f9
}
/*-.number .b-mark {
    font-size: 1.4rem
}-*/
}
.board-other-div {
    width: 100%;
    display: flex
}
.board-other-div>.board {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    padding: 8px
}
.other-board {
    width: 25%;
    min-width: 95px;
    padding: 12px 6px;
    text-align: center
}

@media(min-width:940px) {
.other-board:nth-child(4n+1):last-child {
    margin-right: 75%
}
.other-board:nth-child(4n+2):last-child {
    margin-right: 50%
}
.other-board:nth-child(4n+3):last-child {
    margin-right: 25%
}
}
.other-board .bi {
    display: block;
    margin-bottom: 10px;
    color: #399fbd;
    font-size: 2rem;
    text-align: center
}
.other-board img {
    width: 2.4rem;
    height: 2.4rem;
    display: block;
    margin: 0 auto 6px auto
}
.other-board-sunrise {
    height: calc(2rem + 2px);
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    margin-bottom: 10px;
    position: relative
}
.other-board-sunrise .b-unit:first-child {
    margin-left: 0
}
.other-board-sunrise .bi {
    margin-bottom: 0;
    margin-top: -2px
}
.bi.other-board-sunrise-bi {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 4px;
    color: #666;
    font-size: .8rem
}
.other-board-temperature-to {
    margin: 0 2px;
    color: #666;
    font-size: .9rem;
    font-weight: normal
}

@media(max-width:940px) {
.board-other-div>.board {
    flex-wrap: wrap
}
.other-board {
    width: 33.333%;
    min-width: auto
}
}
.risk-statement {
    margin-top: 15px;
    color: #b06262;
    font-size: .84rem;
    line-height: 1.2
}
.risk-statement::before {
    content: '!';
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 8px;
    border: 1px #b06262 solid;
    color: #b06262;
    border-radius: 50%;
    font-size: .8rem
}
.board-legend-div {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: .8rem
}
.board-legend {
    margin: 5px 0;
    margin-right: 18px
}
.board-legend-icon {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    border-width: 2px;
    border-style: solid;
    background-color: #FFF
}
.board-legend-svg {
    width: 24px;
    height: 24px;
    margin-right: 4px
}
.board-legend-svg svg {
    width: 100%;
    height: 100%
}

@media(max-width:940px) {
.board-legend {
    margin-right: 8px
}
}
.board-0, .board-legend-icon-0 {
    border-color: rgba(246,132,50,0.6)
}
.board-0 .b-mark {
    color: #dd884b
}
.board-1, .board-legend-icon-1 {
    border-color: rgba(200,165,18,0.6)
}
.board-1 .b-mark {
    color: #b79b29
}
.board-2, .board-legend-icon-2 {
    border-color: rgba(65,167,164,0.6)
}
.board-2 .b-mark {
    color: #41a7a4
}
.board-forbidden, .board-legend-icon-forbidden {
    border-color: #e64d4d;
    background-color: #e64d4d
}
.board-forbidden .board-icon, .board-forbidden .b-type, .board-forbidden .b-mark, .board-forbidden .b-unit {
    color: #FFF
}
.board-present .b-mark {
    color: #888
}
.board-legend-icon-present {
    border-color: #DDD
}
.board-top-btns {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 5px;
    padding: 0 10px
}
.btn-board-top {
    font-size: .8rem;
    padding: 4px;
    border: 1px transparent solid;
    background-color: transparent;
    margin-left: auto;
    border-radius: 4px;
    margin-left: 10px
}
.btn-board-top:first-child {
    margin-left: auto
}
.btn-board-top:hover, .btn-board-top:focus {
    color: #3493bb
}
.btn-board-top i {
    margin-right: 4px
}
.icon-info-content {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap
}
.icon-info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 4px;
    padding: 15px 8px;
    background-color: #f9f9f9
}

@media(min-width:940px) {
.icon-info-item {
    width: calc(25% - 8px);
    font-size: .96rem
}
}

@media(max-width:940px) {
.icon-info-item {
    width: calc(50% - 8px);
    font-size: 1rem
}
.icon-info-item-icon {
    margin-bottom: 12px;
    font-size: 3rem
}
.icon-info-item-icon.board-icon img {
    width: 3rem;
    height: 3rem
}
}
.icon-info-item-icon {
    padding: 0;
    margin-bottom: 10px
}
.item-surfing-indicators .bi-surfing-indicators::before {
    width: 1.3rem;
    height: 1.3rem
}
.info-sub-surfing-indicators {
    margin-left: 12px;
    font-size: 1.3rem
}
.surfing-indicator-level::after {
    margin-left: 5px
}
.surfing-indicator-level-0 {
    color: #3cb1d0
}
.surfing-indicator-level-0::after {
    content: '（戲水等級）'
}
.surfing-indicator-level-1 {
    color: #ae9b27
}
.surfing-indicator-level-1::after {
    content: '（初學等級）'
}
.surfing-indicator-level-2 {
    color: #be689c
}
.surfing-indicator-level-2::after {
    content: '（專家等級）'
}
.item-fishing-type .bi-fish::before {
    width: 1.3rem;
    height: 1.3rem
}
.info-sub-fishing-type {
    margin-left: 12px;
    font-size: 1.3rem
}
.g-radar-controller {
    margin-top: 30px
}
.radar-opacity-label {
    display: block;
    margin-right: 10px;
    margin-bottom: 4px;
    color: #399fbd;
    letter-spacing: 1px
}
#view-radar-info {
    margin-left: auto
}
.info-sub-div {
    margin-top: 30px
}
.info-sub-title-icon {
    margin-right: 8px;
    color: #3493bb
}
.info-sub-title-div {
    margin-bottom: 15px
}
.info-sub-title {
    color: #3493bb;
    font-size: 1.3rem
}
.info-sub-a, .g-unit a {
    padding: 4px;
    border: 0;
    border-radius: 4px;
    background-color: transparent;
    color: #666;
    font-size: .9rem
}
.g-unit a {
    font-size: 1em
}
.info-sub-a+.info-sub-a {
    margin-left: 20px
}
.info-sub-a:hover, .g-unit a:hover {
    color: #222
}
.show-coastal-facilitys-div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: .8rem
}
.show-coastal-facilitys-title {
    margin-right: 8px;
    line-height: 1.1;
    text-align: right
}
.info-sub-content {
    display: flex;
    align-items: stretch;
    justify-content: space-between
}
.info-sub-content.att-b-icons {
    align-items: stretch;
    justify-content: flex-start
}
#stages-fb-link {
    padding: 6px;
    border-radius: 4px
}
#stages-fb-link:hover {
    background-color: rgba(0,0,0,0.06)
}
#stages-fb-link i {
    margin-right: 4px;
    color: #3873b7;
    font-size: 1.1rem
}
.g-stages-description {
    line-height: 1.4
}
.info-sub-content.g-comments {
    display: block
}
.facility-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 50%;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    pointer-events: none
}
.facility-icon img {
    width: 70%;
    height: 70%
}
.m-comment-none {
    width: 100%;
    padding: 10px;
    color: #AAA;
    letter-spacing: 1px
}
.swal2-container {
    z-index: 9999
}
.photo-description, .photo-status {
    letter-spacing: .5px
}
.photo-description video {
    margin: 1.25em auto;
    max-width: 100%
}
.photo-time {
    margin-left: 12px;
    margin-right: 20px
}
.photo-time::after {
    content: '時'
}
.photo-name::before {
    content: 'by';
    margin-right: 6px;
    font-variant: small-caps
}
.photo-row {
    margin: 15px 0;
    text-align: left
}
.photo-row-title {
    margin-right: 20px;
    font-size: .9rem;
    color: #888
}
.photo-btns.btn-div {
    flex-wrap: wrap;
    padding: 20px 15px 10px 15px
}
.photo-btns.btn-div .btn {
    width: auto;
    margin-bottom: 10px
}
.photo-btns .word-mark {
    margin: 0 4px;
    color: #399fbd
}
.swal2-title {
    flex-wrap: wrap
}
.title-bio {
    display: inline-block;
    margin-bottom: 8px
}
.title-bio+.title-bio {
    margin-left: 12px
}
.title-bio+.title-bio::before {
    content: '與';
    margin-right: 12px;
    font-size: 1.2rem
}
.bio-name-tw {
    color: #399fbd
}
.bio-name-scientific {
    color: #999;
    font-size: 1rem;
    margin-left: 8px
}
.share-url {
    border: 1px #CCC solid;
    border-radius: 4px;
    padding: 15px;
    user-select: all;
    margin-bottom: 15px;
    font-size: 1rem
}
.m-comment {
    margin: 10px 0;
    background-color: #FFF;
    box-shadow: 0 0 5px rgba(0,0,0,0.1)
}
.m-comment+.m-comment {
    margin-top: 10px
}
.m-comment-self {
    padding: 15px
}
.m-comment-self:hover {
    background-color: rgba(0,0,0,0.04)
}
.m-comment-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: .9rem
}
.m-comment-content {
    line-height: 1.4
}
.m-comment-image.preview-img {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: transparent
}
.m-comment-replay .m-comment-image.preview-img {
    width: 20px;
    height: 20px
}
.m-comment-image img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}
.m-comment-name {
    margin-right: auto;
    color: #3493bb
}
.m-comment-poster {
    margin-right: auto;
    padding: 6px;
    border: 1px transparent solid;
    border-radius: 4px;
    background-color: transparent;
    font-size: .94rem;
    color: #399fbd
}
.m-comment-poster:hover {
    background-color: #EEE
}
.m-comment-poster.m-comment-account {
    margin-right: 0
}
.m-comment-title-right {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

@media(max-width:500px) {
.m-comment-title-right {
    width: 100%;
    margin-top: 10px
}
.m-comment-time {
    margin-left: auto
}
}
.m-comment-stars {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    color: #d8bf3f
}
.m-comment-stars-title {
    margin: 12px 10px 12px 0;
    color: #666
}
.m-comment-star {
    margin-right: 4px
}
.to-comment-star {
    padding: 4px;
    border-radius: 4px;
    border: 1px transparent solid;
    background-color: transparent;
    color: #d8bf3f
}
.m-comment-tag {
    padding: 6px;
    border: 1px transparent solid;
    border-radius: 4px;
    background-color: #EEE;
    font-size: .94rem;
    color: #399fbd
}
.m-comment-tag:hover {
    background-color: #e1e1e1
}
.m-comment-tag:before {
    content: '#';
    margin-right: 2px
}
.m-comment-suggest-type {
    margin-left: auto
}
.m-comment-time {
    margin-left: 10px;
    color: #AAA;
    font-size: .8rem
}
.preview-imgs {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    margin-top: 8px;
    overflow-x: auto
}
.m-comment-btns {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start
}
.m-comment-btn {
    padding: 6px 10px;
    border: 1px transparent solid;
    background-color: transparent;
    border-radius: 50px;
    font-size: .9rem
}
.m-comment-btn:hover {
    background-color: #e4e4e4
}
.is-reported .m-comment-btn:hover {
    background-color: #fff4f4
}
.m-comment-btn+.m-comment-btn {
    margin-left: 8px
}
.m-comment-like.is-like {
    color: #3493bb
}
.m-comment-status, .m-comment-btn+.m-comment-btn.m-comment-status {
    margin-left: auto
}
.m-comment-status.comment-status-0 {
    color: #cb1616
}
.m-comment-status.comment-status-1 {
    color: #5bab4a
}
.m-comment-status.comment-status-2 {
    color: #399fbd
}
.comment-status-0 {
    background-color: #f6e9e9
}
.comment-status-0:hover {
    background-color: #eddbdb
}
.comment-status-1 {
    background-color: #ebf8e9
}
.comment-status-1:hover {
    background-color: #daecd8
}
.comment-status-2 {
    background-color: #FFF
}
.comment-status-2:hover {
    background-color: #EEE
}
.m-comment-replays-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 4px;
    border: 1px transparent solid;
    background-color: transparent;
    color: #BBB;
    font-size: .8rem;
    letter-spacing: .5px
}
.m-comment-replays-toggle:hover {
    background-color: rgba(0,0,0,0.04)
}
.m-comment-replays-toggle span {
    margin: 0 10px
}
.m-comment-replays-toggle-line {
    width: 100%;
    height: 1px;
    background-color: #BBB
}
.m-comment-replays-toggle.hide-replays {
    color: #AAA
}
.m-comment-replays-toggle.hide-replays .m-comment-replays-toggle-line {
    background-color: #AAA
}
.m-comment-replays-toggle:not(.hide-replays) .show-replays-text, .m-comment-replays-toggle.hide-replays .hide-replays-text, .m-comment-replays-toggle.hide-replays+.m-comment-replays {
    display: none
}
.m-comment-replays {
    font-size: .8em
}
.m-comment-reply-text {
    margin-left: 6px;
    color: #888
}
.m-comment-replay {
    padding: 10px 15px 10px 25px
}
.m-comment-replay:hover {
    background-color: rgba(0,0,0,0.04)
}
.m-comment-replay .m-comment-name i {
    margin-left: 6px;
    color: #888
}
.m-comment-self.is-reported, .m-comment-replay.is-reported {
    background-color: #ffd0d0
}
.m-comment-replay .m-comment-btns {
    margin-top: 6px
}
.m-comment-replay-none {
    padding: 10px 10px 20px 10px;
    text-align: center;
    color: #AAA
}
#to-comment-ta {
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 10px;
    font-size: 1.125em
}
#to-comment-photos-div {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 15px;
    padding: 5px;
    overflow-x: auto
}
#to-comment-photos-div .m-share {
    margin-right: 10px
}
#to-comment-photos {
    flex-direction: column;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px transparent solid;
    border-radius: 4px;
    background-color: #EEE;
    color: #AAA
}
#to-comment-photos::before {
    content: '＋';
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px auto;
    width: 2rem;
    height: 2rem;
    border: 1px #AAA solid;
    border-radius: 50%
}
#comment-photo-file {
    display: none
}
.remove-comment-photo, .preview-img, .preview-video, .preview-VR-video {
    height: 100px;
    margin: 5px;
    padding: 0;
    position: relative;
    border: 1px transparent solid
}
.remove-comment-photo>img, .preview-img>img, .preview-video>img, .preview-VR-video>img {
    height: 100%
}
.preview-img-none {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EEE;
    color: #BBB;
    letter-spacing: 1px;
    font-size: 1.2rem
}
.preview-img-none::before {
    content: '暫無照片'
}
.view-video {
    width: 100%;
    max-width: 100%;
    margin: 1.25em auto
}
.remove-comment-photo-text {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background-color: rgba(0,0,0,0.4);
    color: #FFF;
    transition: opacity .3s
}
.remove-comment-photo:hover .remove-comment-photo-text {
    opacity: 1
}
.swal2-html-container .m-comment-stars {
    font-size: 1.2rem;
    justify-content: center
}
#report-type {
    width: 100%;
    margin-top: 8px;
    font-size: 1.125em
}
.wave-arrow {
    position: relative
}
.wave-arrow-order {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: -1.6rem;
    left: -1.6rem;
    border: 3px #bcdcf5 solid;
    border-radius: 50%;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0,0,0,0.7);
    font-size: 1.2rem;
    font-weight: bold
}
.wave-arrow-0 {
    background-color: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px rgba(0,0,0,0.5)
}
.wave-arrow.wave-arrow-0 .barbed-arrow {
    max-width: 60px !important;
    max-height: 60px !important
}
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #FFF
}
.loading>img {
    width: 100px;
    height: 100px
}
.loading-title {
    margin-top: 10px;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 1px;
    color: #399fbd
}
.loading-title div {
    line-height: 1.4
}
.loading-title div+div {
    margin-top: 4px
}
.is-selected>.is-selected-hide {
    display: none
}
:not(.is-selected)>.is-selected-show {
    display: none
}
.bi-fish::before, .layer-visible:checked+.bi-fish::before {
    content: url(../img/bi-icons/fish-main.svg);
    width: 1em;
    height: 1em
}
.layer-classification-show .bi-fish::before {
    content: url(../img/bi-icons/fish-blue.svg)
}
.is-selected>.bi-fish::before, .layer-classification-show .is-selected>.bi-fish::before, .bi-fish-white::before {
    content: url(../img/bi-icons/fish-white.svg);
    width: 1em;
    height: 1em
}
.bi-fish.bi-595959::before, .layer-visible:not(:checked)+.bi-fish::before {
    content: url(../img/bi-icons/fish-595959.svg)
}
.bi-berth::before, .layer-visible:checked+.bi-berth::before {
    content: url(../img/bi-icons/berth-main.svg);
    width: 1em;
    height: 1em
}
.layer-classification-show .bi-berth::before {
    content: url(../img/bi-icons/berth-blue.svg)
}
.is-selected>.bi-berth::before, .layer-classification-show .is-selected>.bi-berth::before, .bi-berth-white::before {
    content: url(../img/bi-icons/berth-white.svg);
    width: 1em;
    height: 1em
}
.bi-berth.bi-595959::before, .layer-visible:not(:checked)+.bi-berth::before {
    content: url(../img/bi-icons/berth-595959.svg)
}
.bi-leaf::before, .layer-visible:checked+.bi-leaf::before {
    content: url(../img/bi-icons/leaf-main.svg);
    width: 1em;
    height: 1em
}
.layer-classification-show .bi-leaf::before {
    content: url(../img/bi-icons/leaf-blue.svg)
}
.is-selected>.bi-leaf::before, .layer-classification-show .is-selected>.bi-leaf::before, .bi-leaf-white::before {
    content: url(../img/bi-icons/leaf-white.svg);
    width: 1em;
    height: 1em
}
.bi-leaf.bi-595959::before, .layer-visible:not(:checked)+.bi-leaf::before {
    content: url(../img/bi-icons/leaf-595959.svg)
}
.bi-zeta::before, .layer-visible:checked+.bi-zeta::before {
    content: url(../img/bi-icons/zeta-main.svg);
    width: 1em;
    height: 1em
}
.layer-classification-show .bi-zeta::before {
    content: url(../img/bi-icons/zeta-blue.svg)
}
.is-selected>.bi-zeta::before, .layer-classification-show .is-selected>.bi-zeta::before, .bi-zeta-white::before {
    content: url(../img/bi-icons/zeta-white.svg);
    width: 1em;
    height: 1em
}
.bi-zeta.bi-595959::before, .layer-visible:not(:checked)+.bi-zeta::before {
    content: url(../img/bi-icons/zeta-595959.svg)
}
.bi-oxygen::before, .layer-visible:checked+.bi-oxygen::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/oxygen-main.webp')
}
.layer-classification-show .bi-oxygen::before {
    background-image: url('../img/bi-icons/oxygen-blue.webp')
}
.is-selected>.bi-oxygen::before, .layer-classification-show .is-selected>.bi-oxygen::before, .bi-oxygen-white::before {
    background-image: url('../img/bi-icons/oxygen-white.webp')
}
.bi-oxygen.bi-595959::before, .layer-visible:not(:checked)+.bi-oxygen::before {
    background-image: url('../img/bi-icons/oxygen-595959.webp')
}
.bi-salt::before, .layer-visible:checked+.bi-salt::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/salt-main.webp')
}
.layer-classification-show .bi-salt::before {
    background-image: url('../img/bi-icons/salt-blue.webp')
}
.is-selected>.bi-salt::before, .layer-classification-show .is-selected>.bi-salt::before, .bi-salt-white::before {
    background-image: url('../img/bi-icons/salt-white.webp')
}
.bi-salt.bi-595959::before, .layer-visible:not(:checked)+.bi-salt::before {
    background-image: url('../img/bi-icons/salt-595959.webp')
}
.bi-surfing-indicators::before, .layer-visible:checked+.bi-surfing-indicators::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/surfing-indicators-main.webp')
}
.layer-classification-show .bi-surfing-indicators::before {
    background-image: url('../img/bi-icons/surfing-indicators-blue.webp')
}
.is-selected>.bi-surfing-indicators::before, .layer-classification-show .is-selected>.bi-surfing-indicators::before, .bi-surfing-indicators-white::before {
    background-image: url('../img/bi-icons/surfing-indicators-white.webp')
}
.bi-surfing-indicators.bi-595959::before, .layer-visible:not(:checked)+.bi-surfing-indicators::before {
    background-image: url('../img/bi-icons/surfing-indicators-595959.webp')
}
.bi-snorkeling::before, .layer-visible:checked+.bi-snorkeling::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/snorkeling-main.webp')
}
.layer-classification-show .bi-snorkeling::before {
    background-image: url('../img/bi-icons/snorkeling-blue.webp')
}
.is-selected>.bi-snorkeling::before, .layer-classification-show .is-selected>.bi-snorkeling::before, .bi-snorkeling-white::before, .awesome-marker .bi-snorkeling::before {
    background-image: url('../img/bi-icons/snorkeling-white.webp')
}
.bi-snorkeling.bi-595959::before, .layer-visible:not(:checked)+.bi-snorkeling::before {
    background-image: url('../img/bi-icons/snorkeling-595959.webp')
}
.bi-diving::before, .layer-visible:checked+.bi-diving::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/diving-main.webp')
}
.layer-classification-show .bi-diving::before {
    background-image: url('../img/bi-icons/diving-blue.webp')
}
.is-selected>.bi-diving::before, .layer-classification-show .is-selected>.bi-diving::before, .bi-diving-white::before {
    background-image: url('../img/bi-icons/diving-white.webp')
}
.bi-diving.bi-595959::before, .layer-visible:not(:checked)+.bi-diving::before {
    background-image: url('../img/bi-icons/diving-595959.webp')
}
.bi-surfing::before, .layer-visible:checked+.bi-surfing::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/surfing-main.webp')
}
.layer-classification-show .bi-surfing::before {
    background-image: url('../img/bi-icons/surfing-blue.webp')
}
.is-selected>.bi-surfing::before, .layer-classification-show .is-selected>.bi-surfing::before, .bi-surfing-white::before {
    background-image: url('../img/bi-icons/surfing-white.webp')
}
.bi-surfing.bi-595959::before, .layer-visible:not(:checked)+.bi-surfing::before {
    background-image: url('../img/bi-icons/surfing-595959.webp')
}
.bi-surge::before, .layer-visible:checked+.bi-surge::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/surge-main.webp')
}
.layer-classification-show .bi-surge::before {
    background-image: url('../img/bi-icons/surge-blue.webp')
}
.is-selected>.bi-surge::before, .layer-classification-show .is-selected>.bi-surge::before, .bi-surge-white::before {
    background-image: url('../img/bi-icons/surge-white.webp')
}
.bi-surge.bi-595959::before, .layer-visible:not(:checked)+.bi-surge::before {
    background-image: url('../img/bi-icons/surge-595959.webp')
}
.bi-main-surge::before, .layer-visible:checked+.bi-main-surge::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/main-surge-main.webp')
}
.layer-classification-show .bi-main-surge::before {
    background-image: url('../img/bi-icons/main-surge-blue.webp')
}
.is-selected>.bi-main-surge::before, .layer-classification-show .is-selected>.bi-main-surge::before, .bi-main-surge-white::before {
    background-image: url('../img/bi-icons/main-surge-white.webp')
}
.bi-main-surge.bi-595959::before, .layer-visible:not(:checked)+.bi-main-surge::before {
    background-image: url('../img/bi-icons/main-surge-595959.webp')
}
.bi-second-surge::before, .layer-visible:checked+.bi-second-surge::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/second-surge-main.webp')
}
.layer-classification-show .bi-second-surge::before {
    background-image: url('../img/bi-icons/second-surge-blue.webp')
}
.is-selected>.bi-second-surge::before, .layer-classification-show .is-selected>.bi-second-surge::before, .bi-second-surge-white::before {
    background-image: url('../img/bi-icons/second-surge-white.webp')
}
.bi-second-surge.bi-595959::before, .layer-visible:not(:checked)+.bi-second-surge::before {
    background-image: url('../img/bi-icons/second-surge-595959.webp')
}
.bi-thermometer-sea::before, .layer-visible:checked+.bi-thermometer-sea::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/thermometer-sea-main.webp')
}
.layer-classification-show .bi-thermometer-sea::before {
    background-image: url('../img/bi-icons/thermometer-sea-blue.webp')
}
.is-selected>.bi-thermometer-sea::before, .layer-classification-show .is-selected>.bi-thermometer-sea::before, .bi-thermometer-sea-white::before {
    background-image: url('../img/bi-icons/thermometer-sea-white.webp')
}
.bi-thermometer-sea.bi-595959::before, .layer-visible:not(:checked)+.bi-thermometer-sea::before {
    background-image: url('../img/bi-icons/thermometer-sea-595959.webp')
}
.bi-wave-divergence::before, .layer-visible:checked+.bi-wave-divergence::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/wave-divergence-main.webp')
}
.layer-classification-show .bi-wave-divergence::before {
    background-image: url('../img/bi-icons/wave-divergence-blue.webp')
}
.is-selected>.bi-wave-divergence::before, .layer-classification-show .is-selected>.bi-wave-divergence::before, .bi-wave-divergence-white::before {
    background-image: url('../img/bi-icons/wave-divergence-white.webp')
}
.bi-wave-divergence.bi-595959::before, .layer-visible:not(:checked)+.bi-wave-divergence::before {
    background-image: url('../img/bi-icons/wave-divergence-595959.webp')
}
.bi-vibrio-vulnificus::before, .layer-visible:checked+.bi-vibrio-vulnificus::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/vibrio-vulnificus-main.webp')
}
.layer-classification-show .bi-vibrio-vulnificus::before {
    background-image: url('../img/bi-icons/vibrio-vulnificus-blue.webp')
}
.is-selected>.bi-vibrio-vulnificus::before, .layer-classification-show .is-selected>.bi-vibrio-vulnificus::before, .bi-vibrio-vulnificus-white::before {
    background-image: url('../img/bi-icons/vibrio-vulnificus-white.webp')
}
.bi-vibrio-vulnificus.bi-595959::before, .layer-visible:not(:checked)+.bi-vibrio-vulnificus::before {
    background-image: url('../img/bi-icons/vibrio-vulnificus-595959.webp')
}
.bi-dew-point::before, .layer-visible:checked+.bi-dew-point::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/dew-point-main.svg')
}
.layer-classification-show .bi-dew-point::before {
    background-image: url('../img/bi-icons/dew-point-blue.svg')
}
.is-selected>.bi-dew-point::before, .layer-classification-show .is-selected>.bi-dew-point::before, .bi-dew-point-white::before {
    background-image: url('../img/bi-icons/dew-point-white.svg')
}
.bi-dew-point.bi-595959::before, .layer-visible:not(:checked)+.bi-dew-point::before {
    background-image: url('../img/bi-icons/dew-point-595959.svg')
}
.bi-submarine-geomorphology::before, .layer-visible:checked+.bi-submarine-geomorphology::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/submarine-geomorphology-main.svg')
}
.layer-classification-show .bi-submarine-geomorphology::before {
    background-image: url('../img/bi-icons/submarine-geomorphology-blue.svg')
}
.is-selected>.bi-submarine-geomorphology::before, .layer-classification-show .is-selected>.bi-submarine-geomorphology::before, .bi-submarine-geomorphology-white::before {
    background-image: url('../img/bi-icons/submarine-geomorphology-white.svg')
}
.bi-submarine-geomorphology.bi-595959::before, .layer-visible:not(:checked)+.bi-submarine-geomorphology::before {
    background-image: url('../img/bi-icons/submarine-geomorphology-595959.svg')
}
.bi-pop::before, .layer-visible:checked+.bi-pop::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/pop-main.svg')
}
.layer-classification-show .bi-pop::before {
    background-image: url('../img/bi-icons/pop-blue.svg')
}
.is-selected>.bi-pop::before, .layer-classification-show .is-selected>.bi-pop::before, .bi-pop-white::before {
    background-image: url('../img/bi-icons/pop-white.svg')
}
.bi-pop.bi-595959::before, .layer-visible:not(:checked)+.bi-pop::before {
    background-image: url('../img/bi-icons/pop-595959.svg')
}
.bi-thermometer-body::before, .layer-visible:checked+.bi-thermometer-body::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/thermometer-body-main.svg')
}
.layer-classification-show .bi-thermometer-body::before {
    background-image: url('../img/bi-icons/thermometer-body-blue.svg')
}
.is-selected>.bi-thermometer-body::before, .layer-classification-show .is-selected>.bi-thermometer-body::before, .bi-thermometer-body-white::before {
    background-image: url('../img/bi-icons/thermometer-body-white.svg')
}
.bi-thermometer-body.bi-595959::before, .layer-visible:not(:checked)+.bi-thermometer-body::before {
    background-image: url('../img/bi-icons/thermometer-body-595959.svg')
}
.bi-uv::before, .layer-visible:checked+.bi-uv::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../img/bi-icons/uv-main.svg')
}
.layer-classification-show .bi-uv::before {
    background-image: url('../img/bi-icons/uv-blue.svg')
}
.is-selected>.bi-uv::before, .layer-classification-show .is-selected>.bi-uv::before, .bi-uv-white::before {
    background-image: url('../img/bi-icons/uv-white.svg')
}
.bi-uv.bi-595959::before, .layer-visible:not(:checked)+.bi-uv::before {
    background-image: url('../img/bi-icons/uv-595959.svg')
}
#reCAPTCHA {
    width: 100%;
    margin-top: 30px;
    overflow: hidden
}
#reCAPTCHA>div {
    margin: 0 auto
}
.rc-anchor-normal {
    width: 100% !important
}
.beta-note {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    font-size: 1.1rem;
    text-align: left
}
.beta-note>div {
    line-height: 1.2
}
.beta-note::before {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    margin-right: 16px
}
.beta-to-suggest {
    display: inline-flex;
    padding: 4px;
    margin: 6px 4px;
    border: 1px transparent solid;
    border-radius: 4px;
    color: #3493bb;
    background-color: #EEE
}
.beta-to-suggest:hover {
    background-color: #e1e1e1
}
.important-icon {
    z-index: 9999 !important
}
.marker-div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px #FFF solid;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.6);
    border-radius: 50%;
    font-size: .9rem;
    transform: translate(calc(-50% + 6px), calc(-50% + 6px))
}
.lightning-div {
    color: #FFF;
    background-color: #be3a28
}
.uv-div {
    color: #FFF;
    background-color: #666
}
.uv-0 .uv-div {
    background-color: #a7cd20
}
.uv-1 .uv-div {
    background-color: orange
}
.uv-2 .uv-div {
    background-color: #f39800
}
.uv-3 .uv-div {
    background-color: #ea1904
}
.uv-4 .uv-div {
    background-color: #b34fa2
}
.vv-div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px #FFF solid;
    background-color: #666;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.6);
    border-radius: 50%;
    color: #FFF;
    font-size: .9rem;
    transform: translate(calc(-50% + 6px), calc(-50% + 6px))
}
.vv-0 .vv-div {
    background-color: #a7cd20
}
.vv-1 .vv-div {
    background-color: #e37318
}
.vv-2 .vv-div {
    background-color: #be3a28
}
.yb-div {
    width: 2rem;
    height: 2rem;
    background-color: #54569c;
    color: #FFF
}
.fv-div {
    width: 2rem;
    height: 2rem;
    background-color: #666;
    color: #FFF;
    font-size: 1rem
}
.fv-0 .fv-div {
    border: 1px #b34fa2 solid;
    background-color: #FFF;
    color: #b34fa2
}
.fv-1 .fv-div {
    background-color: #c989be
}
.fv-2 .fv-div {
    background-color: #b34fa2
}
.fv-3 .fv-div {
    background-color: #732e67
}
.fv-4 .fv-div {
    background-color: #522049
}
.si-div {
    background-color: #666;
    color: #FFF
}
.si-0 .si-div {
    background-color: #3cb1d0
}
.si-1 .si-div {
    background-color: #ae9b27
}
.si-2 .si-div {
    background-color: #be689c
}
.sa-div {
    width: 40px;
    height: 40px;
    background-color: transparent;
    font-size: 1rem;
    background-image: url(../img/swells-alert.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translate(calc(-50% + 6px), calc(-50% + 6px))
}
.wd-div {
    width: 2rem;
    height: 2rem;
    background-color: #666;
    color: #FFF;
    font-size: 1rem
}
#panorama {
    height: 600px;
    max-width: 100%;
    margin: 1.25em auto
}

@media(max-width:940px) {
#panorama {
    height: 350px
}
}
.ocean-sub .inp-div {
    margin-bottom: 15px
}
.ocean-sub .inp-div .bi {
    margin-right: 6px
}
.ocean-sub .inp-div+.inp-div {
    margin-left: 15px
}
.ocean-sub .inp-div-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: .9rem;
    color: #399fbd
}
.ocean-sub .inp-div-title-text {
    margin-bottom: 8px
}
.ocean-sub .inp-div>.inp {
    display: block;
    width: 100%;
    padding: 8px;
    letter-spacing: 0;
    border-radius: 4px
}

@media(max-width:940px) {
.ocean-sub .inp-div {
    margin-bottom: 0;
    padding: 10px
}
.ocean-sub .inp-div+.inp-div {
    margin-left: 0
}
}

@media(max-width:500px) {
.ocean-sub .inp-div {
    width: 50%
}
.ocean-sub .inp-div>input[type="text"] {
    width: 100%
}
}
.bi.dir-N::before {
    transform: rotate(0)
}
.bi.dir-NNE::before {
    transform: rotate(22.5deg)
}
.bi.dir-NE::before {
    transform: rotate(45deg)
}
.bi.dir-ENE::before {
    transform: rotate(67.5deg)
}
.bi.dir-E::before {
    transform: rotate(90deg)
}
.bi.dir-ESE::before {
    transform: rotate(112.5deg)
}
.bi.dir-SE::before {
    transform: rotate(135deg)
}
.bi.dir-SSE::before {
    transform: rotate(157.5deg)
}
.bi.dir-S::before {
    transform: rotate(180deg)
}
.bi.dir-SSW::before {
    transform: rotate(202.5deg)
}
.bi.dir-SW::before {
    transform: rotate(225deg)
}
.bi.dir-WSW::before {
    transform: rotate(247.5deg)
}
.bi.dir-W::before {
    transform: rotate(270deg)
}
.bi.dir-WNW::before {
    transform: rotate(292.5deg)
}
.bi.dir-NW::before {
    transform: rotate(315deg)
}
.bi.dir-NNW::before {
    transform: rotate(337.5deg)
}
.uploader #uploader-file {
    display: none
}
.uploader .uploader-zone {
    width: 100%;
    min-height: 200px;
    position: relative;
    border: 4px #CCC dashed;
    color: #CCC;
    font-size: 1.6rem;
    cursor: pointer
}
.uploader .uploader-zone:hover {
    border-color: #AAA;
    background-color: #f9f9f9;
    color: #AAA
}
.uploader .uploader-zone-enter {
    border-color: #AAA
}
.uploader .has-file, .uploader .has-file:hover {
    border-color: #399fbd
}
.uploader .uploader-zone #uploader-tips, .uploader .uploader-zone #uploader-preview.uploader-preview-video {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
    background-color: #FFF
}
.uploader .uploader-zone img, .uploader #uploader-preview img {
    display: block;
    max-width: 100%
}
body.not-support {
    background-image: url(../img/not-support/bg.jpg);
    background-size: cover;
    background-position: center;
    overflow-y: auto
}
.not-support-grid {
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    text-align: center
}
.not-support-grid-main-td {
    padding: 30px;
    overflow-y: auto
}
.not-support-grid-main {
    max-width: 800px;
    margin: 0 auto
}
.not-support-web-logo {
    display: block;
    width: 275px;
    margin: 0 auto 40px auto
}
.not-support-web-title {
    color: #399fbd;
    margin-bottom: 40px;
    text-align: center
}
.not-support-web-content {
    padding: 0 10px;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.5
}
.not-support-web-content-mark {
    margin: 0 4px;
    font-size: 1.3em;
    color: #a22
}
.not-support-recommend-browser-table {
    width: 100%;
    margin-top: 20px;
    table-layout: fixed;
    border-spacing: 10px;
    border-collapse: separate
}
.not-support-recommend-browser-table td {
    height: 1px
}
.not-support-recommend-browser {
    display: block;
    padding: 20px;
    background-color: #FFF;
    border-radius: 4px;
    cursor: pointer;
    transition: box-shadow ease-in-out .2s, background-color ease-in-out .2s
}
.not-support-recommend-browser:hover {
    background-color: #f9f9f9;
    box-shadow: 0 0 10px #CCC
}
.not-support-recommend-browser-logo {
    display: block;
    width: 100px;
    max-width: 100%;
    margin: 0 auto;
    border: 0
}
.not-support-recommend-browser-name {
    margin-top: 15px;
    font-weight: bold
}

@media(max-width:940px) {
.not-support-recommend-browser {
    padding: 12px
}
.not-support-recommend-browser-name {
    font-size: .9em
}
}
.line-omit {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.4
}
.grecaptcha-badge {
    visibility: hidden
}